AI와 몇 마디만 하면 간단한 게임은 복잡한 코딩 없이 만들어 낼 수 있습니다. 지난 편 벽돌 깨기에 이어 이번엔 테트리스입니다. 파이썬과 HTML 두 버전을 만들어 보았습니다. 코딩 천재 클로드 AI를 사용했으며, 간단한 팁과 아이디어만 있으면 5분 안에 쉽게 만들 수 있습니다.
AI 사용한 간단한 게임 만들기는 파이선 코드 사용 혹은 HTML로 만드는 두 가지 방법이 있습니다. 파이선을 사용하는 방법은 파이선을 별도로 설치해야 합니다. 대신 pyGame 라이브러리를 활용한 간결하고 쉬운 코드 등 장점도 많은 편입니다. 반면, HTML로 구현하는 방법은 브라우저에서 동작하게 되니, 별도의 프로그램 설치가 필요 없습니다.
파이썬 코드로 게임 만들기
본 포스팅에서는 테트리스 게임을 파이썬 코드를 이용해서 만든 후, HTML로 똑같이 만든 과정에 대해 이야기해 드립니다. 과정 중 알게된 클로드 AI 사용법과 몇 가지 팁을 공유합니다. 파이선 설치에 관해서는 전편 벽돌깨기 게임 만들기를 참고하시기 바랍니다. 설치 과정이 어렵지 않습니다.
우선 게임 제작을 위해 클로드 AI에게 “테트리스라는 게임을 아느냐“고 물어봤습니다. 클로드 AI는 테트리스 게임 전체 알고리즘에 대해 이야기해 줍니다. 위 알고리즘을 토대로 게임을 만들어 달라고 요청했습니다.
클로드 AI의 아티팩트(Artifact) 기능
클로드3.5 소넷(Claude 3.5 Sonnet) 초기 페이지에는 이번에 새로 업데이트 된 아티팩트 기능을 활성화하는 키가 있습니다. 활성화하면 클로드 AI가 코드를 생성할 때 대화창과 분리된 별도의 창에 보여지게 됩니다. 프리뷰 기능도 있어 코드 생성이 완료되면 결과를 실시간으로 확인할 수 있습니다.(파이선 코드는 미리보기 기능이 동작하지 않습니다.)
테트리스 게임 구현 과정
코드가 생성되면 카피한 후 메모장이나 에디터에 붙여넣고, 더블 클릭하여 실행합니다. 실행해보면 키보드 반응, 레벨, 점수 등 게임 진행에 필요한 요소들이 잘 작동하는 것을 볼 수 있습니다.
몇 분 플레이해 보니 여전히 많이 부족합니다. 이 부분을 클로드 AI와 대화를 통해 지속적으로 수정해야 하는데요. 현재 클로드3 소넷은 제한적 액세스이므로, 저 같은 무료 사용자는 가급적 수정할 내용을 한번에 모아서 요청하는 것이 좋습니다.
실행이 안된다거나, 버그가 있다면 클로드 AI에게 이야기해 주세요. “죄송합니다”를 연발하면서 코드를 검토하고 실행 가능하게 수정해 줍니다.
마지막으로 게임 타이틀이 들어간 인트로 화면과 게임 디자인을 요청하여 완성하였습니다. 구글에서 테트리스 이미지를 검색하여 붙여넣고 이대로 디자인해달라고 하니, 이 또한 비슷하게 해주었네요.
HTML로 구현하기
HTML/Javascipt 형식으로 만들어 보는 것도 파이썬 방법과 별반 다르지 않을 꺼 같아요. 위와 유사한 과정에 코드만 HTML로 요청하면 될것입니다. 저는 이미 파이썬으로 만들었기 때문에 코딩 완료된 파일을 사용했습니다.
‘Start New Chat’ 후, 생성된 코드를 카피해서 복붙(Ctrl+V)을 합니다. 클로드 AI는 이걸 파일로 인식하더라고요. 그 후 올린 파일과 HTML로 똑같이 구현해 달라고 해봤습니다. 클로드 AI는 바로 HTML코드를 쭉쭉 뱉어냅니다.
플레이해보니 파이썬과 화면은 비슷한데 역시나 한번에 되지는 않았습니다. 여러가지 버그가 있네요. 다시 대화를 통해 문제를 해결합니다. 게임에 따라 다르겠지만 파이썬으로 구현할 때보다 더 많이 수정한 듯 하네요.
플레이 결과 파이썬과 동일합니다. 바로 실행해볼 수 있으니 한번 플레이 해보세요.
프레임 클릭 후 아무 키나 누르세요.
- 왼쪽 화살표: 블록을 왼쪽으로 이동
- 오른쪽 화살표: 블록을 오른쪽으로 이동
- 아래쪽 화살표 또는 스페이스바: 블록을 빠르게 떨어뜨림
- 위쪽 화살표: 블록을 회전
- ‘R’ 키: 게임 재시작
코딩?
코딩 지식이 전무해도 별다른 지식, 기술없이 게임 하나가 완성되는 과정을 보셨습니다. 머지 않아 로블록스, 마인크래프트 정도의 3D 게임도 구현이 가능해지겠네요. 클로드 AI는 현재 제한적 무료 사용이 가능합니다.
- 이 글 공유하기
-
-
-
-
