본문 바로가기
AI 도구

누구나 할 수 있는 AI 코딩! Llama3와 Claude3로 벽돌깨기 게임 1분 컷!

by James AI Explorer 2024. 5. 4.
    728x90

    안녕하세요! 오늘은 요즘 가장 핫한 언어 모델 Llama3와 Claude3를 AI 코딩 어시스턴트로 활용해서 스네이크 게임과 벽돌 깨기 게임을 쉽게 코딩해 보겠습니다. 비주얼 스튜디오 코드(이하 VSCode)는 다양한 프로그래밍 언어를 지원하는 Microsoft의 오픈 소스 통합 개발 환경인데요. 이 블로그에서는 VSCode의 확장기능인 CodeGPT에 Llama3와 Claude3를 적용한 AI 코딩으로 스네이크 게임과 벽돌 깨기 게임을 1분 안에 쉽게 코딩해 보겠습니다.

    누구나 할 수 있는 AI 코딩! Llama3와 Claude3로 벽돌깨기 게임 1분 컷!

    "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

    VSCode 설치 및 환경설정

    VSCode는 가볍고 빠른 성능으로, 다양한 언어를 지원하고 확장성이 뛰어나며, Git(Global Information Tracker, 분산형 버전 관리 시스템)을 사용하여 소스 코드를 효과적으로 관리하고 협업할 수 있도록 도와주고, 통합 터미널을 통해 효율적인 코딩 작업을 지원합니다. VSCode의 설치는 아래 링크를 통해서 손쉽게 하실 수 있습니다.

    https://code.visualstudio.com/download

     

    Download Visual Studio Code - Mac, Linux, Windows

    Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

    code.visualstudio.com

    한국어 언어팩을 적용하기 위해서는 좌측 메뉴 아이콘에서 확장을 선택하고 Korean Language를 검색하면 아래 화면과 같이 한국어 언어팩을 설치하실 수 있습니다. 

    VSCode 한국어 언어팩 설치

    설치가 완료되면 아래 화면과 같이 VSCode 메인 화면을 확인할 수 있습니다. 

    VSCode 메인 화면

    이 블로그의 실행환경은 Windows 11 Pro(23H2), WSL2, 파이썬 버전 3.11, 비주얼 스튜디오 코드 1.39이며, VSC를 실행하여 "WSL 연결"을 통해 Windows Subsystem for Linux(WSL) Linux 환경에 액세스 하도록 구성하였습니다.

    VSCode WSL 연결 메뉴

    WSL(Windows Subsystem for Linux) 설치는 아래 링크를 참고하시면 됩니다. 

    https://learn.microsoft.com/ko-kr/windows/wsl/install

     

    WSL 설치

    wsl --install 명령을 사용하여 Linux용 Windows 하위 시스템을 설치합니다. Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine 등 원하는 Linux 배포판에서 실행되는 Windows 머신에서 Bash 터미널을 사용할 수 있습니

    learn.microsoft.com

    728x90

    CodeGPT 설치

    VSCode 설치와 환경설정이 완료되었으면, 다음은 AI 코딩 어시스턴트 확장기능을 설치하는 단계입니다. 좌측 메뉴 아이콘에서 확장을 클릭하고 검색창에 CodeGPT라고 검색해서 아래 화면과 같이 설치합니다. 

    CodeGPT 확장기능 설치

    CodeGPT는 VSCode의 확장기능을 사용한 AI 코딩 어시스턴트 플랫폼입니다. 이 플랫폼은 다양한 작업을 자동화하고 효율성을 향상시키기 위해 인공 지능 에이전트를 활용하며, 다음과 같은 주요 특징이 있습니다:

    • AI 코딩 어시스턴트 생성: AI 코딩 어시스턴트를 생성하거나, 마켓플레이스에서 이미 만들어진 다양한 어시스턴트를 선택할 수 있습니다. 이러한 어시스턴트는 VSCode와 통합된 코파일럿(Copilot) 형태로 다양한 작업을 수행할 수 있으며 코딩 프로세스를 간소화하고 생산성을 향상시킵니다.
    • VSCode 확장 기능: 개발자를 위한 CodeGPT의 VSCode 확장 기능을 사용하여 개발 프로세스를 지원합니다. 이를 통해 개발자는 AI 어시스턴트와 함께 코딩할 수 있으며, Github Copilot과 유사하지만 더 많은 유연성을 제공합니다.
    • AI 어시스턴트 마켓플레이스: CodeGPT는 다양한 AI 어시스턴트를 제공하는 마켓플레이스를 보유하고 있습니다. 이를 통해 영업, HR, 재무, 채팅, 코딩, 이메일 자동 응답 등 다양한 작업에 대한 도우미를 쉽게 찾고 사용할 수 있습니다.
    • API 및 통합: CodeGPT API를 사용하여 AI 어시스턴트를 사용자 정의 프로젝트에 통합할 수 있습니다. 이를 통해 인스타그램 및 트위터 게시물 작성, 이메일 관리, 코딩 등 다양한 작업을 자동화할 수 있습니다.
    • 다양한 AI 모델 지원: CodeGPT는 다양한 클라우드 플랫폼과 AI 모델을 지원합니다. 이를 통해 사용자는 다양한 환경에서 손쉽게 CodeGPT를 사용할 수 있습니다.

    CodeGPT 마켓플레이스

    Llama3 어시스턴트

    CodeGPT 확장기능이 설치완료 되면, Llama3 어시스턴트를 활용하기 위해 Ollama에서 Llama3 8B 모델을 다운로드합니다. Ollama의 설치는 아래 링크에서 간단하게 설치하실 수 있습니다. WSL 환경에서는 아래 명령어를 통해 Ollama의 리눅스 버전을 설치합니다. 

    curl -fsSL https://ollama.com/install.sh | sh

    WSL 프롬프트에서 Ollama 설치화면

    https://ollama.com/download/linux

     

    Download Ollama on Linux

    Download Ollama on Linux

    ollama.com

    다음은 "ollama pull llama3:8b" 명령어를 통해 언어 모델을 다운로드합니다. lllama3까지만 입력하면 CodeGPT에서 인식이 안되므로 명령어를 매개변수 크기까지 포함해서 입력해야 합니다. 

    Llama3 모델 다운로드

    다음은 VSCode에서 Ollama 관련 설정을 해야 하는데요. VSCode를 실행 후, 아래 화면과 같이 좌측 아이콘 CodeGPT를 클릭하고 Providers에서 Ollama를 선택한 후, 아래 모델명에서 llama3:8b를 선택합니다. 

    CodeGPT Ollama 모델 설정

    설정이 완료되면 아래 화면과 같이 Llama3 어시스턴트 화면이 나타납니다. 

    Llama3 어시스턴트 초기화면

    Llama3 어시스턴트의 사용방법은 간단합니다. 채팅창에 요청사항을 입력하거나, 코드의 범위를 선택하고 마우스 우클릭으로 Explain(설명), Refactor(최적화-가독성, 유지보수성 향상), Document(문서화), Find Problems(오류 찾기), Unit Test(단위 테스트) 기능을 선택하면 선택된 언어 모델이 요청에 해당하는 답변을 합니다.

    CodeGPT 마우스 우클릭 메뉴

    다음 화면은 CodeGPT의 Document, Find Problems 실행결과입니다.

    Document, Find Problems 실행결과

    다음 화면은 Explain(코드 설명) 요청과 사용자 질문에 대한 답변 결과입니다. 

    코드 Explain(설명) 요청과 사용자 질문에 대한 답변

    Claude3 어시스턴트

    다음은 Claude3 어시스턴트를 설정하는 방법입니다. VSCode 좌측 아이콘 메뉴에서 CodeGPT를 클릭하고 Provider에서 Anthropic을 선택한 후, 모델명에서 원하는 모델을 선택합니다. 최초 연결 시 API Key 입력이 필요하면, 아래 링크를 통해 API Key를 발급하면 됩니다. 발급된 API Key를 입력하고 Connect를 클릭하면 설정이 완료되고 Opus, Sonnet, Haiku 중에서 원하는 언어 모델을 선택하면 됩니다. 참고로 Claude 모델은 최대 출력 토큰수가 4096으로 제한이 있습니다.

    https://console.anthropic.com/settings/keys

     

    Anthropic Console

     

    console.anthropic.com

    Claude 어시스턴트 API 연결설정(좌), 초기화면(우)

    아래 화면은 Claude3 Opus 어시스턴트에게 스네이크 게임을 작성해 달라고 하여 생성된 게임 결과입니다. 최초 요청으로 응답된 코드를 실행한 결과 게임이 정상 작동되었습니다. 게임 요청 - 답변 코드 삽입 - 게임 실행까지 소요된 시간은 1분 정도입니다.

    생성된 답변 코드의 복사 및 삽입기능
    Claude3 Opus 어시스턴트 작성 스네이크 게임 실행결과

    아래 화면은 게임의 배경색과 스네이크의 색상 변경, 점수 추가, R버튼 재시작 등을 요청하여 게임을 다시 생성한 결과입니다. 최초 시도와 동일하게 1회 요청 및 답변으로 게임이 정상작동하였습니다. 

    색상 변경, 점수 추가, R버튼 재시작 기능 추가
    색상 변경, 점수 추가, R버튼 재시작 기능 추가

    다음은 벽돌 깨기 게임을 작성해 달라고 했는데요. 설정에서 토큰수를 최대로 하여 코드가 중간에 잘리지 않도록 합니다.

    토큰수 설정 메뉴(좌), 벽돌깨기 게임 생성결과(우)

    Claude3 Opus가 답변한 벽돌 깨기 게임 파이썬 코드는 다음과 같습니다.

    import pygame
    import random
    
    # 게임 설정
    WINDOW_WIDTH = 800
    WINDOW_HEIGHT = 600
    PADDLE_WIDTH = 100
    PADDLE_HEIGHT = 10
    BALL_SIZE = 10
    BRICK_WIDTH = 75
    BRICK_HEIGHT = 20
    BRICK_ROWS = 5
    BRICK_COLS = 10
    
    # 색상 정의
    WHITE = (255, 255, 255)
    BLACK = (0, 0, 0)
    RED = (255, 0, 0)
    GREEN = (0, 255, 0)
    BLUE = (0, 0, 255)
    
    # 벽돌 클래스
    class Brick(pygame.sprite.Sprite):
        def __init__(self, color, x, y):
            super().__init__()
            self.image = pygame.Surface((BRICK_WIDTH, BRICK_HEIGHT))
            self.image.fill(color)
            self.rect = self.image.get_rect()
            self.rect.x = x
            self.rect.y = y
    
    # 패들 클래스
    class Paddle(pygame.sprite.Sprite):
        def __init__(self):
            super().__init__()
            self.image = pygame.Surface((PADDLE_WIDTH, PADDLE_HEIGHT))
            self.image.fill(WHITE)
            self.rect = self.image.get_rect()
            self.rect.centerx = WINDOW_WIDTH // 2
            self.rect.bottom = WINDOW_HEIGHT - 10
            self.speed = 5
    
        def update(self):
            keys = pygame.key.get_pressed()
            if keys[pygame.K_LEFT] and self.rect.left > 0:
                self.rect.x -= self.speed
            if keys[pygame.K_RIGHT] and self.rect.right < WINDOW_WIDTH:
                self.rect.x += self.speed
    
    # 볼 클래스
    class Ball(pygame.sprite.Sprite):
        def __init__(self):
            super().__init__()
            self.image = pygame.Surface((BALL_SIZE, BALL_SIZE))
            self.image.fill(WHITE)
            self.rect = self.image.get_rect()
            self.rect.centerx = WINDOW_WIDTH // 2
            self.rect.centery = WINDOW_HEIGHT // 2
            self.speed_x = random.choice([-3, 3])
            self.speed_y = -3
    
        def update(self):
            self.rect.x += self.speed_x
            self.rect.y += self.speed_y
    
            if self.rect.left <= 0 or self.rect.right >= WINDOW_WIDTH:
                self.speed_x = -self.speed_x
            if self.rect.top <= 0:
                self.speed_y = -self.speed_y
    
    # 게임 초기화
    def init_game():
        all_sprites = pygame.sprite.Group()
        bricks = pygame.sprite.Group()
        paddle = Paddle()
        ball = Ball()
    
        all_sprites.add(paddle)
        all_sprites.add(ball)
    
        brick_colors = [RED, GREEN, BLUE, GREEN, RED]
        for row in range(BRICK_ROWS):
            for col in range(BRICK_COLS):
                brick_x = col * (BRICK_WIDTH + 5) + 25
                brick_y = row * (BRICK_HEIGHT + 5) + 50
                brick = Brick(brick_colors[row], brick_x, brick_y)
                all_sprites.add(brick)
                bricks.add(brick)
    
        return all_sprites, bricks, paddle, ball
    
    # 게임 루프
    def game_loop():
        pygame.init()
        window = pygame.display.set_mode((WINDOW_WIDTH, WINDOW_HEIGHT))
        pygame.display.set_caption("Brick Breaker")
        clock = pygame.time.Clock()
        all_sprites, bricks, paddle, ball = init_game()
    
        while True:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    return
    
            all_sprites.update()
    
            # 볼과 패들 충돌 처리
            if pygame.sprite.collide_rect(ball, paddle):
                ball.speed_y = -ball.speed_y
    
            # 볼과 벽돌 충돌 처리
            collided_bricks = pygame.sprite.spritecollide(ball, bricks, True)
            if collided_bricks:
                ball.speed_y = -ball.speed_y
    
            # 볼이 화면 아래로 떨어졌을 때 게임 오버
            if ball.rect.top > WINDOW_HEIGHT:
                break
    
            # 모든 벽돌을 깼을 때 게임 클리어
            if len(bricks) == 0:
                break
    
            window.fill(BLACK)
            all_sprites.draw(window)
            pygame.display.flip()
            clock.tick(60)
    
        # 게임 오버 메시지 출력
        font = pygame.font.Font(None, 36)
        if len(bricks) == 0:
            text = font.render("Congratulations! You Won!", True, WHITE)
        else:
            text = font.render("Game Over! Press R to Restart", True, WHITE)
        text_rect = text.get_rect(center=(WINDOW_WIDTH // 2, WINDOW_HEIGHT // 2))
        window.blit(text, text_rect)
        pygame.display.flip()
    
    # R 버튼을 누를 때까지 대기
        while True:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    return
                elif event.type == pygame.KEYDOWN:
                    if event.key == pygame.K_r:
                        game_loop()
                        return
    
    #메인 함수
    def main():
        game_loop()
    
    #실행
    if __name__ == "__main__":
        main()

     

    벽돌 깨기 게임도 아래 화면과 같이 1분 만에 Claude3 Opus 모델의 최초 생성 답변으로 정상동작하였습니다.

    벽돌깨기 게임 실행결과
    벽돌깨기 게임 종료 화면

    Lllama3나 Claude3 모델 이외에도 Provider에서 Cohere나 Google AI Studio를 선택하여 Command-R-PlusGemini-1.5-Pro 모델 등도 AI 코딩 어시스턴트로 사용이 가능합니다. 

    Command-R-Plus(좌) Gemini-1.5-Pro(우)

     

    맺음말

    오늘 블로그에서는 VSCode의 확장기능인 CodeGPT를 활용하여 Llama3와 Claude3를 AI 코딩 어시스턴트로 설정하여 스네이크 게임과 벽돌 깨기 게임을 쉽게 코딩하는 방법에 대해 알아보았습니다. 가벼우면서도 빠른 성능을 제공하며, 다양한 언어를 지원하는 VSCode를 활용하여 Llama3와 Claude3 같은 대형 언어 모델의 도움으로 쉽고 간편하게 게임을 코딩할 수 있었습니다.

     

    또한, Command-R-Plus, Google Gemini-1.5-Pro 등 다양한 코딩 어시스턴트를 통해 개발자들은 더욱 효율적으로 코딩을 할 수 있으며, 빠르고 정확하게 작업할 수 있습니다. 여러분도 VSCode와 CodeGPT를 통해 간편하고 빠르게 할 수 있는 AI 코딩의 즐거움을 느껴보시면 어떨까요?

     

    오늘 블로그 내용은 여기까지입니다. 저는 다음에 더 유익한 정보를 가지고 다시 찾아뵙겠습니다. 감사합니다. 

     

    https://fornewchallenge.tistory.com/

     

     

    2024.04.25 - [AI 언어 모델] - Phi-3: 마이크로소프트의 작지만 강한 소형 언어 모델, 고난도 스네이크 게임 성공!!

     

    Phi-3: 마이크로소프트의 작지만 강한 소형 언어 모델, 고난도 스네이크 게임 성공!!

    안녕하세요! 오늘은 마이크로소프트의 최신 언어 모델 Phi-3에 대해서 알아보겠습니다. 이번에 먼저 공개된 Phi-3 mini 모델은 3.8B(38억) 개의  매개변수를 가진 소형 언어 모델(SLMs)이며, 동등한 수

    fornewchallenge.tistory.com

     

     

    728x90