AI로 브라우저 게임 만들기 (스네이크 게임)

준비물

• 컴퓨터 (키보드로 하는 게임이라 컴퓨터가 편합니다)
• Claude 무료 계정 (claude.ai), 또는 ChatGPT 무료 계정
• 프로그램 설치는 필요 없습니다

이런 결과가 나옵니다

방향키와 휴대폰 터치로 움직이는 스네이크 게임. 먹이를 먹으면 점수가 오르고, 최고 점수를 기억합니다. 아래 데모는 이 프롬프트로 만든 결과를 그대로 올린 것입니다.

따라 하기

1. 1

   claude.ai에 들어가 로그인하기

   인터넷 창에서 claude.ai 를 엽니다. 구글 계정이나 이메일로 무료 가입하고 로그인합니다. ChatGPT를 쓰려면 chatgpt.com 에 로그인합니다.

   이렇게 되면 성공화면 아래쪽에 글을 쓰는 대화창이 보이면 준비 끝입니다.

2. 2

   프롬프트 붙여넣고 보내기

   아래 프롬프트를 복사해 대화창에 붙여넣고 엔터(또는 전송 버튼)를 누릅니다. 색깔이나 소재를 바꾸고 싶다면 보내기 전에 고치세요.

   붙여넣을 프롬프트프롬프트 복사

   스네이크 게임을 만들어줘. 인터넷 창에서 바로 할 수 있게 파일 하나로 만들어줘.
   
   - 정사각형 칸이 있는 판 위에서 뱀이 움직여
   - 키보드 방향키로 움직이고, 휴대폰에서는 화면을 밀어서(스와이프) 움직여. 화면 아래에 방향 버튼도 같이 넣어줘
   - 먹이를 먹으면 점수가 오르고 뱀이 길어져. 먹을 때마다 조금씩 빨라져
   - 최고 점수를 기억해서 다음에 열어도 보이게 해줘
   - 스페이스바를 누르면 잠시 멈춰
   - 벽이나 내 몸에 부딪히면 게임이 끝나고 "다시 시작" 버튼이 나와
   - 배경은 어두운 남색, 뱀은 파란색, 먹이는 노란색
   - 설명 글은 모두 한국어로

   내 것으로 바꿀 곳

   • 색깔(배경, 뱀, 먹이)을 좋아하는 색으로 바꿉니다.
   • 아이용이면 "처음엔 아주 느리게 시작해줘"를 한 줄 추가합니다.
   • 뱀 대신 고양이나 기차 같은 소재로 바꿔 말해도 됩니다.

   더 자세히 지시하고 싶다면 (조금 기술적인 버전)

   이 버전 복사

   HTML 파일 하나로 끝나는 스네이크 게임을 만들어줘.
   - 18x18 격자, 캔버스로 그림
   - 방향키와 모바일 스와이프 둘 다 지원, 화면 아래에 방향 버튼도
   - 먹을 때마다 조금씩 빨라짐
   - 최고 점수는 localStorage에 저장
   - 스페이스로 일시정지, 게임 오버 화면에 다시 시작
   - 어두운 배경(#15192b), 뱀은 파란색, 먹이는 노란색
   - 외부 라이브러리 없이

   이렇게 되면 성공Claude는 몇십 초 뒤 화면 오른쪽에 결과물 창이 따로 열리고 게임이 나타납니다.

   팁ChatGPT는 긴 코드가 나올 수 있습니다. 그럴 땐 "코드 말고 바로 해볼 수 있게 보여줘(Canvas로)"라고 한 번 더 말해보세요.

3. 3

   결과물 창에서 직접 플레이하기

   오른쪽 결과물 창 안의 게임 화면을 한 번 클릭합니다. 그다음 키보드 방향키를 누르면 뱀이 움직입니다. 먹이(노란 칸)를 먹어 점수를 올려보세요.

   이렇게 되면 성공뱀이 방향키대로 움직이고 점수가 올라가면 성공입니다.

   팁방향키를 눌러도 반응이 없다면 게임 화면을 한 번 클릭하세요. 키보드 입력이 다른 곳으로 가 있어서 그렇습니다.

4. 4

   말로 고치기

   마음에 안 드는 점을 대화창에 말로 적으면 게임이 바로 바뀝니다. 한 번에 하나씩 말하는 게 정확합니다.

   팁이렇게 말하면 됩니다. "벽에 부딪혀도 안 죽고 반대편으로 나오게 해줘", "장애물 블록을 몇 개 추가해줘", "처음 속도를 더 느리게", "점수 글씨를 더 크게"

5. 5

   최고 점수가 남는지 확인하기

   게임을 해서 점수를 낸 뒤 인터넷 창을 새로고침합니다. 최고 점수가 그대로 보이는지 확인합니다.

   이렇게 되면 성공새로고침 후에도 최고 점수 숫자가 남아 있으면 성공입니다.

   팁점수가 사라진다면 시크릿(비공개) 창이거나 방문 기록을 지우는 설정일 수 있습니다. 일반 창에서 열어보세요.

6. 6

   링크로 만들어 친구에게 보내기

   결과물 창 오른쪽 위의 Publish(게시) 버튼을 누르면 공개 링크가 생깁니다. 링크를 복사해 카톡에 붙여넣으면 받는 사람이 가입 없이 바로 플레이합니다. 자세한 순서는 아래 "링크로 공유하기"를 보세요.

   이렇게 되면 성공내 카톡 나와의 채팅에 링크를 보내 열어봤을 때 게임이 나오면 성공입니다.

막히면

다음에 해볼 것

• 테트리스나 2048처럼 규칙이 분명한 게임을 다음으로 해보세요. 규칙이 긴 게임은 "먼저 기본 규칙만, 그다음 점수 계산"처럼 나눠 시킵니다.
• 터미널에서 Claude Code로 만들면 파일을 직접 다루고 계속 고쳐가기 편합니다. 익숙해진 뒤에 해도 늦지 않습니다.

여기 쓰인 기능

다른 레시피