이전 회차는 다음과 같습니다.
게임 조정 방법: “목표 설정, 전략, 조정 요소” 만들기
1. AI 기반 게임 만들기 (티저편)
2. AI 기반 게임 만들기 Vol.2 7가지 방법과 첫 번째 게임
3. AI 기반 게임 만들기 Vol.3 목표에 따른 AI 활용법
4. AI 기반 게임 만들기 Vol.4 AI와 게임 기획 시 고려 사항
5. [게임 판매 및 종류] 장점과 단점 - AI 기반 게임 만들기 Vol.5
6. [06] 재미 추구 방법 | 코알루와 핵심 재미 - AI 기반 게임 만들기 Vol.6
지난 번 볼.6에서는 AI로 만든 게임을 재미있게 만들기 위해 무엇을 살펴봐야 하는지 다루었습니다. 조작에 대한 반응, 맞았을 때의 감각, 결과의 명확성, 그리고 앞으로의 내용이 보이는지 여부였습니다. 하지만, 공개 후 다시 읽어보니 솔직히 말해서 아쉬움이 남았습니다.
어떤 것을 봐야 할지에 대한 설명은 있었지만, 어떤 숫자를 어떻게 바꿨을 때 어떤 변화가 생기는지, 실제로 한 번도 보여주지 않았습니다. 그래서 이번에는 부록 6-2편으로, 실제 AI로 블록 깨기 게임을 만들고, 재미있게 만들기 위해 계속해서 수정하고, 더 나아가 독창적인 규칙을 하나 추가하여 하나의 작품으로 완성하는 과정을 모두 보여드리겠습니다.
이번 목표는 게임을 만든 경험이 없는 초보자라도, 기존 게임을 기반으로 자신만의 요소를 하나 추가하고, 다른 사람도 즐길 수 있는 완성된 작품을 만드는 것입니다.
6권에서는 처음에는 모방부터 시작해도 된다고 했었지만, 모방하여 만든 것에 자신의 규칙을 하나 추가하는 단계까지 진행했는데, 이로써 그것은 ‘자신의 작품’이 됩니다. 이번에는 그 가장 작은 완성까지의 과정을 블록崩し로 처음부터 끝까지 따라가겠습니다.
이번(vol.6-2)에 가져오라고 하는 것은 다음과 같습니다.
* 현재 가지고 있는 게임을 기반으로 원작 규칙에 1가지 추가 규칙을 더하여 하나의 완성된 작품을 만드는 과정
* 플레이 기기에 따라 게임 속도가 달라지는 “프레임 수”의 함정과 이를 해결하는 방법
* “왜 재미있는가”를 글로 표현하여 숫자 데이터가 포함된 AI에게 전달하는 절차
* AI로 게임을 만들 때 먼저 설계해야 할 4가지 사항
* 바로 사용 가능한 명령어와 Claude Code를 사용하여 만드는 절차(Codex와의 비교 포함)
目次
- 서문｜먼저 도구를 모으고 클로드 앱을 설치하여 제작 공간을 확보하세요.
- 클로이드(Claude) 유료 플랜에 가입하세요.
- 시작하기 전에 최소한의 규칙을 정해두는 것이 좋습니다.
- ③ 클로드 데스크톱 앱을 설치하고, 작업 공간을 마련합니다.
- ④ Claude Code 사용법 기본
1. Claude Code에 접속: Claude 웹 인터페이스 내에서 Claude Code 탭을 선택합니다.
2. 코드 생성: 원하는 기능을 수행하는 코드를 직접 작성하거나, Claude에게 코드를 생성해 달라고 요청할 수 있습니다.
3. 코드 수정: Claude가 생성한 코드를 필요에 따라 수정합니다.
4. 코드 실행: 수정된 코드를 Claude에서 실행하여 결과를 확인합니다.
5. 결과 확인: Claude가 생성한 코드의 실행 결과(코드 출력, 결과 값 등)를 확인합니다.
Claude Code를 통해 더욱 효율적인 코딩 작업을 수행할 수 있습니다.
- 이 글의 프롬프트 사용법
- 터미널에 익숙하신 분들은 터미널에서도 사용할 수 있습니다.
- 1. 먼저 기본 게임을 한 문장으로 만들어 주세요.
- 프레임 수와 게임 속도 간의 관계를 먼저 알아두는 것이 중요합니다.
- 프레임 수는 1초에 그려지는 연속 만화의 횟수를 의미합니다.
이번 글은 다음 도구와 환경을 사용하여 제작되었습니다. 같은 것을 준비하면 이 글에서 진행했던 내용을 그대로 자신의 손으로 따라할 수 있을 것입니다. 다만, AI는 같은 지시를 전달해도 매번 조금씩 다른 결과물을 만들고, 모델이 바뀌면 결과도 달라지므로 세세한 부분까지 완전히 똑같지 않더라도 걱정하지 마세요.
이번에 사용한 툴과 환경(2026년 10월 시점) - 컴퓨터: 맥(macOS 27), AI: Claude Code(버전 2.1). Anthropic사의 AI “Claude”에 컴퓨터 안의 파일을 직접 만들거나 수정해 달라고 요청할 수 있는 툴, AI 모델(AI의 두뇌에 해당하는 부분 종류): Claude Opus 5.5, 계약: Claude의 유료 플랜(Pro 이상), 게임을 즐기는 브라우저: 구글 크롬, 제작물: 브라우저에서 즐길 수 있는 블록 브레이커(HTML 파일 1개). 설치 방법은 서론에, 입력하는 프롬프트는 각 장과 Ⅺ 목록에 모두 담았습니다. 같은 프롬프트를 ChatGPT의 “Codex”에서도 테스트한 결과를 XIII장에 기록했습니다.
이 글에는 일상적으로 익숙하지 않은 어구들이 몇 가지 등장합니다. 모두 본문 안에서 설명하지만, 미리 간략하게 알아두면 훨씬 읽기 쉽습니다.
이 글에 자주 등장하는 용어 및 HTML 파일: 인터넷을 보게 하는 앱(Chrome이나 Safari 등)으로 열기만 하면 작동하는 홈페이지와 같은 종류의 파일입니다. 이번 게임은 이 파일 하나로 제작되었습니다.
* **프로ンプ트:** AI에 보내는 지시 문구입니다.
* **px (픽셀):** 화면에서 길이를 측정하는 단위로, 화면을 구성하는 아주 작은 점 1개 분량 정도의 길이입니다. “300px”라면 점 300개 분량 정도의 길이입니다.
* **프레임:** 게임 화면이 한 번 다시 그려지는 것을 의미하며, 패러불라 만화의 1페이지와 같습니다.
* **효과음 (SE) 및 시각 효과:** 공이 닿았을 때의 “카!”라는 소리와, 빛나거나 흔들리는 시각적인 연출입니다.
* **CONFIG (컨피그):** 게임의 숫자(속도나 점수 등)를 프로그램의 맨 앞에 모아서 써놓는 “설정 메모란”입니다.
* **하드코딩:** 숫자를 CONFIG에 모아놓지 않고, 프로그램 곳곳에 직접 써넣는 것을 의미합니다. 나중에 수정할 때, 무엇을 수정해야 하는지 알기 어려워집니다.
* **츠마미:** 음악 플레이어의 볼륨 바처럼, 움직이면 숫자가 변하는 조절용 부품입니다.
* **v0.html, v1.html:** 만든 게임 파일의 이름입니다. 다시 만들 때마다 v1, v2, v3 등으로 번호를 늘려 이전 버전을 보관합니다.
이번에는 다음 흐름대로 진행하겠습니다.
이번 흐름(목표: 하나의 작품을 완성시키는 것) 0. 준비: 지켜야 할 규칙을 정하고 Claude Code를 입력한다 (서론) 1. AI에게 한 문장으로 기본 게임을 만들어 달라고 요청한다 (Ⅰ) 2. 게임 속도가 변하는 “프레임 수”의 함정을 알아낸다 (Ⅱ) 3. 기본 재미를 언어로 분리한다 (Ⅲ) 4. 언어를 숫자 기반의 지시문으로 바꿔 재구성한다 (Ⅳ·Ⅴ) 5. 촉각으로 숫자를 결정한다 (Ⅵ) 6. 하나의 독창적인 규칙만 추가한다 (Ⅶ·Ⅷ) 7. 다른 사람에게 플레이해 줄 수 있는 “완성품”으로 마무리한다 (Ⅸ) 8. 자신의 게임을 할 때의 절차와 처음 설계해야 할 사항 (Ⅹ·Ⅺ) 9. 입력하는 프롬프트 목록과 Codex와의 비교 (Ⅻ·ⅩⅢ)
먼저 한 가지 말씀드려야 할 사항이 있습니다. 이번에는 블록 깨기라는 간단한 게임이기 때문에, 떠오르는 프롬프트를 바로 입력해 나가는 방식으로 진행하고 있습니다.
단, 더 재미있고 규모가 어느 정도 되는 게임을 끝까지 만들려면 이 진행 방식대로라면 중간에 손을 놓게 되어 버립니다. 제작한 파일의 변경 기록을 GitHub(파일의 변경 이력을 남겨 언제든 이전 상태로 되돌릴 수 있는 서비스)에서 관리하고, 나중에 수정하고 싶을 만한 요소나 게임의 설계 자체를 한 곳에서 관리하고 조정할 수 있도록 미리 설계해 두는 것이 좋습니다.
그 방법과 관련하여 사전 설계 기법에 대해, 추후 게시글에서 더 자세히 다뤄보고 싶습니다.
서문｜먼저 도구를 모으고, 클로드 앱을 설치하여 제작 공간을 확보하세요.
이 글은 읽는 동안 자신의 손으로도 같은 블록 깨기 게임을 만들 수 있도록, 각 장 안에 “프롬프트①”와 같은 묶음을 두어 구성되어 있습니다. 그 전에, AI에게 게임을 만들어 달기 위한 도구를 준비합니다. 사용하는 것은 Anthropic사의 AI “클로이드(Claude)”에, 컴퓨터 안의 파일을 직접 만들거나 수정해 줄 수 있는 “클로이드 코드(Claude Code)”라는 도구입니다. 채팅 화면에 프로그램(코드)을 보여주고, 이를 직접 복사하여 저장하는 번거로움 없이, 이처럼 여러 번 다시 만들 때 매우 간편합니다.
클로이드(Claude) 유료 플랜에 가입하려면, 먼저 클로이드 웹사이트 또는 앱에서 계정을 생성해야 합니다. 계정 생성 후, 클로이드(Claude)의 다양한 유료 플랜 중 원하는 플랜을 선택하고 결제 정보를 입력하여 가입을 완료하면 됩니다. 유료 플랜에 가입하면 클로이드(Claude)의 고급 기능들을 이용할 수 있으며, 더 많은 텍스트를 처리하고 더 빠른 응답 속도를 경험할 수 있습니다. 클로이드(Claude) 유료 플랜에 대한 자세한 내용은 클로이드(Claude) 웹사이트에서 확인할 수 있습니다.
클루드 코드는 클루드의 무료 플랜으로는 사용할 수 없습니다. 먼저 브라우저에서 클루드의 사이트(https://claude.ai)를 열어 계정을 만들고 유료의 프로 플랜(월 20달러, 2026년 10월 시점. 일본 엔화로 환산하면 환율 및 세금에 따라 달라집니다)에 신청해 두는 것이 좋습니다. 개발자를 위한 사용한 만큼 요금을 지불하는 계약(Console)으로도 사용할 수 있지만, 처음이시라면 프로 플랜이 더 이해하기 쉽습니다.
하지만 이 글은 Claude Code를 사용하여 작성되었지만, 처음부터 고가의 플랜에 가입할 필요는 없습니다. Codex처럼 ChatGPT의 저렴한 플랜(예를 들어 Go 플랜은 월 8달러)으로도 충분히 사용할 수 있는 도구가 있으며, 가벼운 게임이라면 충분히 만들 수 있습니다. 따라서 먼저 그러한 저렴한 플랜으로, 적은 금액의 시도 과정을 몇 번이나 해보시는 것을 추천합니다. 돈에 여유가 있으시다면, 처음부터 Codex의 Pro 플랜이나 Claude Code를 신청하셔도 됩니다. 반복하지만, AI로 게임을 만들 때에는 여러 번 다시 만들어야 할 일이 많으므로, 우선 익숙해지는 데까지는 방법을 이미지로 익히는 것이 중요합니다.
시작하기 전에 최소한의 규칙을 정해 둠이 좋습니다.
클루드 코드는 컴퓨터 안의 파일을 읽고 쓰거나 명령을 실행할 수 있는 도구입니다. 편리한 만큼, 사용법을 잘못하면 자신의 작품이나 중요한 정보를 위험에 노출시킬 수도 있습니다. 따라서 사용하기 전에 다음 5가지 사항은 반드시 지켜주세요.
클루드 코드를 사용할 때, 기초의 기초인 규칙과 AI 학습에 사용하지 않도록 설정하는 방법: 클루드는 웹사이트의 “설정” → “개인정보”에 있는 “Claude 개선에 협조”를 끄는 것이 좋습니다. 챗GPT(코드엑스)는 “설정” → “데이터 관리”에 있는 “모두를 위해 모델을 개선”을 끄면 됩니다. 이렇게 하면 새로 생성하는 것이 AI 학습에 사용되지 않게 됩니다. 비밀번호, 주소, 전화번호와 같은 개인 정보나 업무 비밀은 프롬프트나 작업 폴더에 넣을 수 없습니다. 클루드 코드는 게임을 만드는 데 필요한 폴더 안에서만 사용해야 하며, 홈 폴더나 데스크톱처럼 여러 파일이 있는 곳에서는 사용하지 않습니다. 무엇을 하는지 모르는 명령은 허락하기 전에 “이것은 무엇을 하는 명령입니까?”라고 질문해야 합니다. 특히 파일을 삭제하거나 인터넷에서 무언가를 가져오는 명령은 인지한 후에 허락해야 합니다. 다른 사람의 그림이나 음악, 캐릭터를 그대로 게임에 사용하지 않으며, 놀이의 메커니즘까지만 활용할 수 있습니다. 그림이나 소리는 AI에게 만들어 달라고 요청하거나 직접 준비해야 합니다.
설정 항목의 이름은 업데이트 시에 약간 변경될 수 있습니다. 찾을 수 없을 때는 Claude Code 입력란에 “학습에 사용하지 않도록 설정은 어디에 있나요?”라고 문의하면 답변을 얻을 수 있습니다.
클로이드 데스크톱 앱을 설치하고 작업 공간을 마련합니다.
클루드 코드는 클라우드의 데스크톱 앱 내부에 있는 “Code” 탭을 통해 사용합니다. 일반적인 앱과 마찬가지로 버튼을 누르고 폴더를 선택하기만 하면 되므로, 컴퓨터에 능숙하지 않아도 됩니다.
먼저, 공식 페이지(https://code.claude.com/docs/en/desktop-quickstart)를 열고 “Download for macOS”를 클릭하여 앱을 다운로드합니다. 다운로드한 파일을 열고 설치한 후, Finder의 “애플리케이션” 폴더에서 Claude를 실행하고, ◆①에서 만든 계정으로 로그인해 주세요.
다음으로, 게임을 놓을 자리를 만들어야 합니다. Finder를 열고, 왼쪽의 “문서” 등을 선택한 후, 메뉴의 “파일”에서 “새 폴더”를 선택하면 새로운 폴더가 생성됩니다. 이 폴더의 이름을 “breakout”으로 지정해 두세요. 이 기사에 만들어질 게임의 모든 파일은 이 폴더 안에 들어오게 됩니다.
폴더가 생성되면 Claude 앱으로 돌아가 화면 상단 중앙의 “Code” 탭을 누릅니다. 여기서 “Local”을 선택한 후 “Select folder”를 눌러, 앞서 만든 breakout 폴더를 선택합니다. 이렇게 하면 AI가 breakout 폴더 안에서 파일을 만들거나 수정할 수 있게 됩니다. “Code”를 누르면 업그레이드를 요청받는다면 아직 유료 플랜에 가입하지 않았기 때문에, ①로 돌아가 신청해주세요.
④ 클로드 코드 사용법의 기본
사용 방법은 일반적인 채팅과 거의 같습니다. 화면 아래의 입력란에 프롬프트를 붙여넣고 전송하면 AI가 작업을 시작합니다. 입력란에서 엔터 키를 누르면 그 시점에서 전송되므로, 중간에 줄바꿈하고 싶을 때는 Shift 키를 누르면서 엔터 키를 눌러주세요. 이 기사의 프롬프트는 복사하여 그대로 붙여넣기 하면 되므로, 직접 줄바꿈할 필요는 없을 거라고 생각합니다.
보낸 후에는 AI가 생각하거나 파일을 만들고 있는 모습이 화면에 계속해서 나타납니다. 몇 분 정도 걸릴 수도 있으니, 완료될 때까지 기다려 주세요. 진행 중 “이 변경 사항을 반영해도 괜찮습니까?”와 같이 확인을 요청하면 내용을 확인하고 “Accept”를 누르면 계속 진행됩니다. 실수로 보내버린 경우나 진행 중인 작업을 멈추고 싶을 때는 입력란 옆의 정지 버튼을 누르면 멈출 수 있습니다.
직접 만들어진 게임은 Finder에서 breakout 폴더를 열고 파일을 더블 클릭하면 브라우저에서 플레이할 수 있습니다. 이 기사와 동일한 Chrome으로 열고 싶을 때는 파일을 마우스 오른쪽 버튼으로 클릭하여 “이 애플리케이션으로 열기”에서 Google Chrome을 선택하세요. 끝날 때는 앱을 닫는 것만으로 충분합니다. 계속 진행할 때는 앱을 열고 “Code” 탭을 누른 다음, 화면의 왼쪽 사이드바에 있는 이전 대화를 선택하면 다시 시작할 수 있습니다.
이 글의 프롬프트 사용법
이후 장에서는 “프롬프트 0”부터 “프롬프트 7”까지, 총 8개의 묶음이 나타납니다. 나타난 순서대로 묶음 안의 문장을 복사하여 Claude Code에 붙여넣으면, 마지막으로 완성된 블록 붕괴가 생성됩니다. 1행目の“프롬프트 1”과 같은 제목은 복사할 필요 없습니다. 묶음 안에 ( )로 표시된 부분은 설명에 따라 내용을 대체하고, ( )의 설명 행은 그대로 제출합니다. 만들어지는 파일 이름은 헷갈리지 않도록 모두 결정되어 있습니다.
만들 파일의 흐름 - 프롬프트 ① (Ⅰ): 한 마디로 제작한 게임 → v0.html · 프롬프트 ⓪ (Ⅳ): AI와의 규칙을 담은 파일 → CLAUDE.md · 프롬프트 ② (Ⅳ): 재미를 숫자로 지시하는 게임 → v1.html · 프롬프트 ③ (Ⅴ): 숫자를 한 곳에 모아 정리하는 게임 → v2.html · 프롬프트 ④ (Ⅵ): 숫자를 조절하는 조정 화면 → tune.html · 프롬프트 ⑤ (Ⅵ): 조정한 숫자를 넣은 게임 → v3.html · 프롬프트 ⑥ (Ⅶ): 원작 규칙을 추가한 게임 → v4.html · 프롬프트 ⑦ (Ⅸ): 다른 사람에게 플레이해 줄 완성판 → v5.html
AI는 같은 프롬프트라도 매번 조금씩 다른 결과물을 만들어내기 때문에, 화면의 모습이나 반찬의 수 등이 글과 다르면 너무 걱정하지 마세요. 중간에 막혔을 때의 해결 방법은 Ⅻ에 자세히 정리되어 있습니다.
터미널에 익숙하신 분들은 터미널에서도 사용할 수 있습니다.
컴퓨터에 익숙하신 분들은 데스크톱 앱 대신 Mac의 “터미널”이라는 앱에서 Claude Code를 사용할 수도 있습니다. 터미널은 문자를 입력하여 컴퓨터에 명령을 내리는 앱으로, “command” 키를 누른 채로 “공백” 키를 누른 다음 “terminal”이라고 입력하고 Enter 키를 누르면 열립니다. 열리면 다음 줄을 복사하여 붙여넣고 Enter 키를 누르면 Claude Code 설치가 시작됩니다.
설치 스크립트를 실행합니다.
완료되면 터미널을 열고 “claude --version”이라고 입력하면 “2.1.296 (Claude Code)”와 같이 번호가 나타나면 설치가 완료됩니다. “command not found” 메시지가 나타나면 터미널을 다시 열거나, 설치 마지막 단계에서 영어로 표시된 안내에 있는 한 줄을 복사하여 실행해주세요. 그 후, 다음 세 줄을 한 줄씩 입력하면 breakout 폴더를 만들고, 그 안에서 Claude Code가 실행됩니다.
브레이크아웃 CD 및 브레이크아웃 클로드 폴더를 생성했습니다.
처음 실행했을 때는 영어로 화면 색상 선호도와 로그인 방법을 묻는 질문이 나오고, 브라우저로 로그인 한 후에는 “이 폴더를 신뢰하시겠습니까?”라는 의미의 질문이 나오므로 “Yes”를 선택해 주세요. 터미널에서는 Enter 키를 누르면 즉시 전송되므로 여러 줄의 텍스트는 먼저 “텍스트 편집”에서 구성한 후 붙여넣습니다. 멈추고 싶을 때는 Esc 키, 종료할 때는 “/exit”를 입력합니다. 다음 날에는 터미널에서 “cd breakout”과 “claude” 두 줄을 입력하면 바로 다음부터 시작할 수 있습니다. Windows의 경우 또는 문제가 발생했을 경우에는 공식 절차(https://code.claude.com/docs/en/quickstart)에 화면별 설명이 담겨 있습니다.
1. 먼저 기본 게임을 한 문장으로 만들어 주세요.
먼저, 기본 블록 맞추기를 아무런 생각 없이 AI에게 맡겨 보았습니다. 요청한 것은 vol.2에서도 소개한 가장 짧은 한 마디입니다.
프롬프트 1: 블록 파괴를 하나의 HTML 파일로 제작해 주세요. 파일 이름은 v0.html로 지정해 주십시오.
손을 움직이시는 분들은 서章에서 준비한 Claude Code(데스크톱 앱의 “Code” 탭) 입력란에 이 텍스트를 붙여서 보내주세요(나중에 비교하기 쉽도록 파일 이름만 추가했습니다). 1분 정도 기다리면 v0.html이 생성되므로, Finder에서 breakout 폴더를 열고 v0.html을 더블클릭하면 브라우저에서 즐길 수 있습니다.
이 한 마디로 바로 브라우저에서 즐길 수 있는 블록 깨기 게임이 떠올랐다. 바는 마우스로 움직이고, 공은 제대로 튀어오르며 블록에 맞으면 없어지고, 점수도 들어간다. 전부 다 깨면 “CLEAR!”라고 나오고, 스페이스 키로 다시 할 수 있다. 즐기는 면에서는 어딘가 빠지는 점 없이 완벽해 보이며, 이것만으로도 충분히 “게임”이 되고 있다.
그러나 놀아보면 금방 지루해지는군요. 바의 어느 곳에서든 받아도 공은 항상 같은 각도로 돌아오기 때문에 정확히 칠 수 없어요. 블록은 소리 없이 사라질 뿐이어서 맞혔다는 사실도 느껴지지 않고, 공의 속도도 처음부터 끝까지 변하지 않기 때문에 막바지에 이르러도 긴장감이 생기지 않아요. 6권에서 언급했던 “정돈은 되어 있지만 재미가 없다”가 바로 이 상태입니다.
실제로 플레이해 본 소감으로는, 말씀드린 것처럼 블록을 부수는 게임입니다. 단조롭고, 단순히 공이 떨어지지 않도록 하는 것 이상의 규칙은 없지만, 한편으로는 게임으로서의 재미도 있습니다. 다만, 효과나 음향 효과가 없기 때문에 짜릿함이나 즐거움은 전혀 느껴지지 않습니다. 솔직히 말해서, 이것으로 시작하는 건 괜찮다고 생각합니다.
하지만 AI는 같은 한 마디를 요청할 때마다 다른 것을 내놓습니다. 날을 다시 대고, 완전히 털어놓은 상태에서 똑같은 한 마디를 요청해 본 결과, 이번에는 끝부분에서 받아서 각도가 바뀌고, 블록을 부술 때마다 조금씩 빨라지는 구조로 되어 있었습니다. 그럼에도 불구하고, 소리나 손맛은 전혀 없었고, 공을 움직이는 방법도, 뒤에 Ⅱ에서 설명하는 함정 속성을 가진 채 그대로였습니다. 따라서 무엇이 따라올지는 그때의 상황에 달려 있더라도, 재미의 핵심 부분은 빠지기 쉬우므로 주의해야 합니다.
또한, 이 한 줄의 프롬프트로 만든 블록 브레이커 프로그램(AI가 쓴 코드)을 읽어보면, 간과할 수 없는 함정이 하나 발견되었습니다. 게임을 하는 컴퓨터에 따라 공의 속도가 두 배로 달라지는 구조로 만들어진 것입니다. 이를 설명하기 위해서는 먼저 “프레임 수”에 대한 이야기를 먼저 해야 하므로, 다음 Ⅱ에서 자세히 설명하겠습니다.
프레임 수와 게임 속도 간의 관계를 미리 알아두는 것이 중요합니다.
한 마디 프롬프트로 만든 게임의 프로그램을 읽어보면서 발견된 함정은 AI로 게임을 만든다면 반드시 알아야 할 이야기입니다. 먼저 “프레임 수”의 기본을 알아두는 것이 갑자기 공 이야기를 하려는 것보다 훨씬 명확합니다.
프레임 수는 1초에 그려지는 연속 만화의 컷 수를 의미합니다.
게임의 화면은 패러패미와 유사하게, 조금씩 다른 그림을 1초에 수십 장이나 그려 다시 그리는 방식으로 움직이는 것처럼 보이게 합니다. 이 1초당 그림 장수를 “프레임 수” 또는 “프레임 레이트”라고 하며, “60fps(1초에 60장)”와 같이 표기합니다. 또 다른 용어로는 화면 자체가 1초에 몇 번 다시 그릴 수 있는지를 “리프레시 레이트”라고 하며, “60Hz”와 같이 표기합니다. 일반적인 PC 모니터는 60Hz, 즉 1초에 60번 다시 그릴 수 있는 화면이지만, MacBook Pro의 화면은 최대 120Hz이며, 게임용 모니터에는 144Hz 또는 240Hz 제품도 있습니다. 또한, 브라우저에서 즐기는 게임은 이 화면이 다시 그릴 수 있는 횟수와 맞춰 게임의 그림도 다시 그리는 것이 기본입니다. 즉, 같은 블록 깨기 게임이라도, 플레이어의 화면에 따라 1초에 60장 그려지거나 120장 그려지는 것입니다.
프레임 수는 기계나 게임에 따라 달라집니다.
프레임 수가 바뀌는 것은 PC만의 이야기가 아닙니다. 닌텐도 스위치에서도 30fps로 움직이는 게임도 있고, 60fps로 움직이는 게임도 있습니다. 어떤 것을 선택할지는 본질적인 것이 아니라 각 게임의 제작자가 결정하는 것입니다. 광활한 세계나 아름다운 풍경을 보여주고 싶어 하는 게임은 30fps를, 액션이나 대전처럼 조작에 대한 반응이 중요한 게임은 60fps를 선택하는 경우가 많습니다. 스위치 2에서는 휴대 모드 화면이 120Hz에 대응하며, PS5의 게임에서는 “화질 우선”과 “프레임 레이트 우선”을 선택하여 즐길 수 있는 경우도 흔하지 않습니다. 하나의 게임을 여러 기종으로 출시할 때, 기종마다 프레임 수가 다른 것은 일반적인 현상이며, PC 버전에서는 플레이어가 설정 화면에서 직접 선택할 수 있도록 하는 경우가 많습니다.
프레임 수가 많을수록 기계의 부담이 커집니다.
프레임 수를 바꾸는 것은 프레임 수가 높을수록 기계의 부담이 커지기 때문입니다. 기계는 1프레임마다 캐릭터나 적의 위치를 계산하고, 충돌 판정(공이 블록에 맞았는지 등)과 같은 규칙을 계산하며, 전체 화면의 그림을 다시 그리는 작업을 반복합니다. 1장의 그림에 소요되는 시간은 30fps라면 약 0.033초, 60fps라면 약 0.017초이며, 120fps에서는 약 0.008초밖에 없습니다. 즉, 120fps에서는 30fps의 4배나 더 많은 횟수, 같은 작업을 수행해야 하는 것입니다. 요리를 예로 들면, 1시간에 30접시를 만드는 것과 60접시를 만드는 것의 차이에서 60접시를 만들고 싶다면, 빠르고 재능 있는 요리사(성능이 높은 기계)를 갖추거나 요리를 간단하게 만들어야 합니다.
그러므로 제작자는 기종의 성능과 그 게임에서 무엇을 우선순위로 하느냐를 고려하여 “화를 화려하게 하고 페이지 수를 줄일 것인가”, “화를 조금 단순하게 하고 페이지 수를 유지할 것인가”를 선택합니다. 그리고 기계가 목표 페이지 수만큼의 그림을 그릴 수 없게 되면 실제로 1초에 그릴 수 있는 그림의 수가 줄어들어 플레이하는 사람에게는 “느리다”, “끊기는” 느낌을 받을 수 있습니다. 노트북이나 스마트폰에서는 프레임 수가 높을수록 배터리 소모가 빠르고 본체가 열이 쉽게 올라가기 때문에 스마트폰 게임에 30fps와 60fps 설정을 선택할 수 있도록 하는 경우가 많습니다.
단 한 마디 프롬프트로 만든 게임에서 공의 속도가 놀이 기계에서 두 배로 변합니다.
이제 Ⅰ에서 한 줄의 프롬프트로 만든 블록 브레이커로 돌아가겠습니다. AI가 쓴 프로그램을 읽어보면, 이 블록 브레이커는 공을 “1프레임당 3px” 움직여서 만드는 구조였습니다. 즉, 한 번 그림을 다시 그릴 때마다 공을 가로 방향으로 3개 픽셀, 세로 방향으로 3개 픽셀씩 움직이는 것입니다. ①에서 언급한 바와 같이, 브라우저 게임은 화면이 다시 그릴 수 있는 횟수만큼 게임 그림을 다시 그리기 때문에, 일반적인 PC(60Hz)의 경우 가로 방향으로 1초에 180px, MacBook Pro(120Hz)의 경우 가로 방향으로 1초에 360px 이동하게 됩니다. 같은 파일인데도, 플레이하는 기기에 따라 공의 속도가 두 배로 다르게 나타나는 것입니다.
왜 더 빠르게 되는지는, 타키리 다오신과 같은 리듬 게임으로 생각하면 매우 쉽게 이해할 수 있습니다. 만약 흘러오는 타키를 “화면의 그림을 1회 다시 그리고, 타키를 4px 왼쪽으로 이동시킨다”는 식으로 만든다고 가정해 봅시다. 화면의 그림을 1초에 60회 다시 그리는 컴퓨터라면, 타키는 1초에 240px 이동하여 곡의 박자와 정확히 일치하는 위치에 도달합니다. 그러나 화면의 그림을 1초에 120회 다시 그리는 컴퓨터에서는, 같은 “1회 4px”가 1초에 120번 반복되므로 타키는 두 배의 속도로 흘러가게 됩니다. 음악의 경우에는, 어떤 컴퓨터든 시간대로 흘러가므로 타키만 곡보다 먼저 도착하여, 100개의 타키가 있다고 하더라도 곡 절반의 시간 동안 모두 흘러 버리는 것입니다.
즉, 이렇게 빠르게 움직이는 이유는 타악기 움직임을 “화면의 그림을 1회 그릴 때마다”를 기준으로 설계했기 때문입니다. 다시 말해, “프레임으로 관리”하고 있는 것이죠. 화면의 그림을 그리는 횟수가 두 배가 되면, 타악기 움직임도 두 배가 됩니다. 반대로, 화면의 그림을 그리는 횟수가 다르면 변하지 않아야 한다면, “1초에 240px 흘려보내기”처럼 초 단위로 관리하면 됩니다. 이렇게 하면 1초에 60회 그림을 그리는 컴퓨터에서는 1회 4px씩, 120회 그림을 그리는 컴퓨터에서는 1회 2px씩 타악기를 움직여서, 둘 다 1초 후에는 같은 240px만큼 진행되므로 타악기는 항상 곡의 박자에 맞춰 도착합니다. 다른 차이는 타악기 흐름의 부드러움뿐입니다.
단 한 마디 프롬프트로 만든 블록 붕괴 게임으로 인해 일어났던 일도 완전히 똑같았습니다. 공의 움직임이 “화면의 그림을 1회 그릴 때마다 3px”로 설계되어 있어서, 화면의 그림을 그리는 횟수가 많은 컴퓨터에서는 공이 두 배의 속도로 날아왔습니다.
여기서 무서운 점은 AI가 아무도 요청하지 않았는데 스스로 ‘프레임으로 관리한다’는 방식으로 진행했다는 것이다. ‘블록 깨기’를 만들어달라는 한 마디 주문뿐이었고, 공이 어떻게 움직이는지에 대해서는 전혀 설명하지 않았다.
그럼에도 불구하고 화면의 그림을 1초에 60번 갱신하는 일반적인 컴퓨터로 게임을 하고 있을 때, 평소처럼 움직이는 것처럼 보이기 때문에 프레임에 대해 잘 모르는 사람들은 프로그램을 읽어봐도 알아차리지 못할 것이고, 알아차리지 못하면 고칠 수도 없을 것입니다. 결과적으로 다양한 컴퓨터나 게임기에 공개되어도 “기계마다 난이도가 다르다”라고 말하게 되고, 제작자조차 원인을 알 수 없는 상황이 발생하게 됩니다.
6권에서 쓰여진, 어느새 AI가 숫자를 정하고 글을 작성했던 실패와 완전히 똑같은 구도가 아니겠습니까. 게다가 이 기사 초안에서는, 완전히 털어서 다시 만들 때도 똑같이 프레임으로 관리하는 구조였던 반면, ‘XIX’에서 소개하는 Codex는 처음부터 바로 관리하는 구조였습니다. AI가 때때로 정확하게 만들어주기도 하지만, 항상 그런 결과가 보장되지는 않으므로, 제작자가 인지한 후에는 미리 지시해 두어야 합니다.
또한, 블록崩시는 이러한 “초 단위 관리”라는 사고방식을 익히는 훈련에 딱 맞는 소재입니다. 왜냐하면 블록崩시에는 한 번에 튀어가는 공과 플레이어가 움직이는 막대라는 움직임이 다른 두 가지 요소가 반드시 등장하기 때문입니다. 공의 속도는 물론, 키보드의 좌우로 막대를 움직이는 경우, 그 막대의 속도는 “1초에 몇 픽셀”로 결정해야 하며, 이어서 4번의 지시문(Ⅳ)에 들어갈, 맞은 순간 게임을 일시적으로 멈추는 시간(히트 스톱), 화면이 흔들리는 시간, 깜빡이는 속도 역시 모두 초 단위로 관리하는 것입니다.
마우스로 막대를 움직이는 경우, 막대가 마우스 위치로 그대로 이동하므로 화면의 그림을 그리는 횟수에 영향을 받지 않습니다. 스스로 움직이는 것, 플레이어가 조작하는 것, 시간 기반 연출이 모두 준비되어 있고 게임 전체가 작아 어느 부분이 초 단위로 관리되는지 AI에 확인하면서 익히기에 적절한 크기입니다.
1프레임에서 몇 픽셀인지, 1초 동안 몇 픽셀인지는 늘어난 경우 결과도 달라진다.
또한, 이 두 가지 방식의 차이는 기계가 무거워졌을 때에도 적용됩니다. 예를 들어, 캐릭터를 “1 프레임당 4px” 움직이는 방식과 “1 초당 240px” 움직이는 방식을 비교해 보면 다음과 같습니다.
제작 방식에 따른 차이 및 “1프레임에서 4px” 제작: 60fps라면 1초에 240px입니다. 120fps 화면에서는 1초에 480px로 두 배의 속도로 빨라지지만, 무거워져 30fps로 떨어지면 1초에 120px가 되어 게임 자체가 슬로우 모션이 됩니다. “1초에 240px” 제작: 60fps라면 한 번에 4px, 120fps라면 한 번에 2px, 30fps로 떨어지면 한 번에 8px 움직이는 것이므로, 모두 1초에 240px입니다. 다른 점은 움직임의 부드러움만 다릅니다.
옛날 게임기에서 적이 많이 나타나면 게임 전체가 느려지는 “처리 낙” 현상이 있었지만, 대부분은 “1프레임에서 몇 픽셀”로 인한 것이었습니다. 1초에 그릴 수 있는 화면의 그림 수가 줄어들 때 발생했습니다. 반면 “1초에 몇 픽셀”로 만들었다면, 게임이 무거워지고 그림 수가 줄어들어도 게임 속도나 타이머는 바뀌지 않습니다. 그만큼 1회당 이동 거리가 커져 움직임이 어색해 보일 수는 있지만, 즐기는 기계에 따라 난이도가 달라지는 것은 아닙니다.
프레임 수와 게임의 속도를 연결한 채, 다른 환경에서도 문제가 발생한 사례가 있었습니다. 2013년에 출시된 레이싱 게임 『Need for Speed Rivals』의 PC 버전은 게임의 진행 방식이 30fps에 연결된 제작 방식이었기 때문에 30fps로 고정되어 출시되었습니다. 플레이어가 이 상한선을 수정하여 게임 속도를 두 배로 만들 수 있었던 점이 당시 큰 화제가 되었습니다.
전문 게임 개발에서도 “1초당”으로 제작하는 것이 기본입니다.
이러한 이유 때문에 현재 게임 개발에서는 움직임을 “1초당”으로 만드는 것이 기본이 되고 있습니다. 예를 들어, 많은 게임을 만드는 데 사용되는 “Unity”라는 게임 엔진(게임 제작을 위한 전용 도구)이 있습니다. 그 공식 설명에도, 물건을 움직일 때는 이전 그림을 그리고 나서 몇 초가 지났는지 확인한 후, 그 만큼만 움직이도록 되어 있는데, “1프레임당 10미터”가 아닌 “1초당 10미터”로 움직이도록 설명하고 있습니다. 이번 지시문에 넣은 한 줄은, 전문가가 어떤 기종에서도 동일한 감각으로 즐길 수 있도록 하기 위해 하고 있는 것과 완전히 같은 생각입니다.
초심자는 먼저 1행을 사용하고, 가능하다면 3개의 지시사항을 포함하는 것이 좋습니다.
이까지 읽으셨다면, 시스템이 명확하게 이해되지 않더라도 전혀 문제가 없습니다. 초보자분들이 해야 할 일은 딱 1가지인데, AI에 도움을 요청할 때 “공이나 움직이는 것들의 속도는 ‘1초당 몇 px’로 결정해주세요”라고 한 줄 적어주는 것입니다. 이렇게 적어 놓으면, AI는 화면의 그림을 다시 그리는 횟수와 맞춰서 1회당 움직임을 자동으로 조절해 주므로, 어떤 컴퓨터로 플레이하든 같은 속도가 되며, 다른 차이는 움직임의 부드러움만 남게 됩니다. 이는 블록 맞추기 게임에 한정된 것이 아니며, 수평 롤플레잉 게임에서도 완전히 동일합니다. 캐릭터가 걷는 속도, 화면이 스크롤되는 속도, 점프하여 떨어지는 속도, 적이 탄환을 발사하는 간격도 “화면의 그림을 1회 다시 그릴 때마다 몇 px”로 설정하면, 플레이 기종에 따라 난이도가 달라지게 됩니다. 움직이는 것과 시간으로 결정되는 요소가 등장하는 게임이라면, 어떤 게임이든 반드시 넣어두는 것이 좋은 1줄입니다. 이 줄은 뒤에서 4에서 소개하는 명령어에도, 11의 시작 부분에 전달되는 설계 지시에도 포함되어 있으므로, 기사의 프롬프트를 그대로 사용해도 충분히 해결됩니다.
더 한 걸음 나아가 AI에 지시할 때 다음 세 가지를 포함시키면 무거워질 때 포함하여 이 문제는 거의 막을 수 있습니다.
프레임 수에 좌우되지 않도록, 움직이는 물체의 속도, 중력, 제한 시간, 공격 간격, 무적 시간, 애니메이션 속도 등 움직임과 시간으로 결정되는 모든 요소는 “1초당”, “몇 초”로 설정하여 1회의 움직임이 지나치게 커지지 않도록 주의해야 합니다. 또한, 공이나 캐릭터가 벽이나 블록을 통과하지 않도록 하고, 테스트를 위해 프레임 수를 30, 60, 120으로 전환할 수 있는 스위치를 추가하여 어떤 프레임 수에서도 동일한 속도로 움직이는지 확인해야 합니다.
두 번째는 한 번의 이동 거리가 커지면 사실 맞지 않아야 할 벽이나 블록을 공이 뛰어넘어 버리는 현상을 막기 위한 것입니다. 이번에 지시대로 만든 버전에서도 AI가 스스로 이 방식을 적용했습니다. 하지만 너무 무거워졌을 때는 통과를 막기 위해 게임 방향을 의도적으로 조금 느리게 만드는 방식이 일반적이며, 이번 버전도 화면의 그림을 1초에 30회 이상 그을 수 없을 정도로 무거워지면 조금 느리게 설정되어 있었습니다. 세 번째 스위치를 추가하면 자신의 컴퓨터가 60Hz라도 120Hz 화면으로 즐기는 사람과 같은 상태를 직접 확인할 수 있습니다. 참고로 본격적인 게임에서는 충돌했을 때의 반사처럼 복잡한 물리 계산은 정해진 시간 간격으로 묶어서 계산하는 방식(고정 타임스텝)도 자주 사용됩니다. 하지만 초보자의 경우 위에 언급한 세 가지로 충분합니다.
8. 적용: 수평 스크롤 액션의 경우, 오른쪽 버튼을 누르면 다음과 같은 동작을 수행합니다.
예를 들어, 수평 스크롤 액션 게임에서 오른쪽 버튼을 누르면 캐릭터가 움직이는 경우, AI에 대한 지시는 다음과 같이 작성하는 것이 좋습니다.
오른쪽 키를 누르면 움직임 지시 (예시) ・오른쪽 키를 누르고 있는 동안 캐릭터는 오른쪽으로 이동한다. 가장 빠른 경우 초속 240px ・움직임을 시작한 후 0.15초에 가장 빠른 속도 (느릿하게 움직이기 시작) ・키를 떼면 0.1초에 멈춘다 (얼음 위처럼 미끄러지지 않음) ・점프 높이는 96px, 점프하여 착지할 때까지 0.6초 ・이러한 숫자들은 모두 CONFIG에 모아서 조정 화면의 다이얼에 설정한다
“중력의 강도”와 같은 어려운 단어는 사용하지 않고, “얼마나 빠르게 최고 속도에 도달하는가”, “얼마나 빠르게 멈추는가”, “얼마 px만큼 튀고, 얼마나 멈추는가”와 같이 자신이 가지고 노는 것을 느낄 때 사용하는 단어로 숫자를 적어두면, AI가 필요한 계산을 해줍니다. 그리고 이 숫자가 촉각을 결정하는 조절나사 역할을 하므로, 6가지처럼 촉각을 느끼면서 조절해 나가면 됩니다.
블록 파괴의 재미는 5가지 요소로 나누어 설명할 수 있다.
갑자기 “더 재미있게 해줘”라고 요청해도, AI는 여전히 그럴듯한 평균적인 답변만 반환한다. 먼저 블록 브레이커의 어떤 점이 재미있는지를 자신의 언어로 정의하는 것이 중요하다. 나는 블록 브레이커의 재미는 다음 5가지로 나눌 수 있다고 생각한다.
첫째, 목표 지점을 정확히 조준할 수 있다는 점입니다. 바에서 어떤 위치에서 공을 받느냐에 따라, 공의 궤적을 스스로 결정할 수 있어 운이 아닌 자신의 실력으로 공을 파고드는 듯한 느낌이 듭니다.
두 번째는 깨지는 감각입니다. 맞춘 순간에 소리와 빛, 화면의 흔들림으로 “맞았다”가 손에 느껴지고, 쪼개는 만큼 감정이 몰입됩니다.
세 번째는 뒤쪽으로 들어가는 즐거움입니다. 블록의 가장자리를 파괴하여 맨 위까지 통과하면 공이 블록의 뒷면에서 튀어 오르면서 우리가 아무것도 하지 않아도 순식간에 무너져 내려갑니다. 목표에 맞았다는 보상과 같은 순간인 것이죠.
네 번째는 점수가 높아질수록 긴장되는 상황입니다. 상단 단계일수록 점수가 높지만, 거기에 맞추면 공의 속도가 빨라져 위험이 줄어들게 됩니다.
다섯 번째는 마지막 1개입니다. 남은 개수가 줄어들수록 더 어렵게 느껴져서 불안해지지만, 그래서 더욱 클리어했을 때, 한풀 꺾이는 듯한 해방감을 느낄 수 있습니다.
이 다섯 가지는 단순한 제 상상이 아니라, 원작 게임에 제대로 구현된 요소들입니다. 1976년 아타리에서 출시된 원조 게임 ‘브레이크아웃’은 블록이 8단으로, 아래에서부터 노란색, 녹색, 주황색, 빨간색이 각각 2단씩 배열되어 있었고, 점수는 아래에서 1, 3, 5, 7점으로 설정되어 있었습니다. 공은 4번 닿거나 12번 닿을 때, 그리고 주황색이나 빨간색 블록에 닿을 때 속도가 빨라졌으며, 빨간색 블록을 통과하여 가장 높은 벽에 닿으면 막대가 반으로 줄어들었습니다. 위로 올라갈수록 점수가 높아지는 긴장감과, 그 점수를 획득했을 때의 특별한 순간이 50년 전부터 이미 구현되어 있었습니다.
그렇다면 이 게임은 눈에 띄는 부분은 아니지만, 블록 깨기에 있어서는 다른 재미 요소들도 숨겨져 있다.
한 가지는 화면이 깔끔해지는 기분입니다. 블록이 줄어들수록 화면이 더욱 깔끔해지고, 어디까지 진행했는지 한눈에 파악할 수 있어 방 청소를 하는 듯한 성취감을 느낄 수 있습니다.
더하여, 거의 다 놓치고 포기할 뻔한 순간을 붙잡는 짜릿함은 블록 깨기만이 선사할 수 있는 독특한 흥분감입니다. 바의 가장자리에서 공을 챙길 수 있었을 때의 “다행이다!”라는 순간은 다섯 가지 게임 모두에 들어맞지 않는 블록 깨기만의 특별한 감동을 자아냅니다.
또한, 금방 다시 한 번 하고 싶은 마음이 드는 점 또한 큰 재미입니다. 한 번의 플레이가 짧고, 공을 떨어뜨렸을 때도 “이건 자신의 실수다”라고 납득할 수 있어서, 화나서 자꾸만 더 한 번 더 플레이하게 되는 것이죠.
다만, 이번에는 재미의 핵심에 가장 관련 있는 5가지에 집중하여 AI에 대한 지시를 작성하겠습니다. 여기서 언급된 3가지 항목은 Ⅷ에서 독창적인 규칙을 고안할 때의 힌트가 되기도 합니다.
다섯 단어가 모여서 하나의 문장으로 압축될 수 있다면, 그것을 한마디로 요약해 둡니다. 이번 블록 파괴는 “바의 끝에서 조준하여 뒤로 밀어 넣고, 한 번에 무너뜨리는 짜릿함”이라는 의미이며, vol.6에서 쓴 “재미의 핵심” – 즉, 그 게임에서 가장 짜릿한 부분을 한마디로 표현한 것이 이것에 해당합니다.
흥미의 분해, 조정 설계의 기초는 여기도 참고해 주세요.
흥미로운 다섯 가지 요소를 숫자 포함 AI 지시문에 대체한다.
흥미가 말을 했다면, 다음으로 그 흥미를 AI가 망설임 없이 만들 수 있는 지시문으로 바꿔 씁니다. “마음이 좋게”, “좋은 느낌으로”와 같은 표현을 전부 숫자로 대체합니다.
미용실에서 머리를 자르고 나올 때를 떠올려 보세요. “잘 다듬어 주세요”라고 부탁하면 미용사는 그 사람의 “잘 다듬어 준다”는 방식대로 자르고는 있지만, 그것이 본인이 생각했던 모양과는 차이가 있을 수 있죠. 그런데 “앞머리는 눈 위 1cm, 옆머리는 귀가 반쯤 가리게”라고 말하면 거의 원하는 대로 완성됩니다. AI에게 하는 명령도 똑같이 “기분 좋은 촉감을 주세요”라고 하면 전달되지 않지만, “닿는 순간 60밀리초(0.06초) 동안 멈추고 화면을 4픽셀 흔들어 주세요”라고 쓰면 정확히 그처럼 만들어 줍니다.
실제로 제가 전달한 지시문은 Ⅲ의 다섯 가지를 그대로 제목으로 하여 다음과 같이 작성했습니다.
프로ンプ트 ②의 본문(지시문) 블록 부수기 게임을 하나의 HTML 파일로 만들어 주세요. 이 게임의 재미는 “바의 끝에서 공을 쏘아 맞추고, 블록 뒤에 공을 넣은 후, 한 번에 무너뜨리는 짜릿함”입니다. 다음 조건으로 제작해 주세요.
[던지기]
* 공의 속도는 화면 업데이트 횟수에 영향을 받지 않도록 “1초당 몇 px”로 움직입니다. 초기 속도는 초속 300px입니다.
* 바의 중앙에서 맞으면 즉시 위로 튀고, 바의 가장자리에서 맞을수록 각도가 더 커져 튀어 나갑니다. 가장 바깥쪽에서 60도 각도로 맞으면 바는 마우스 움직임에 지지되지 않고 따라옵니다.
[파괴의 감각]
* 블록에 맞은 순간, 게임을 60밀리초(ヒットストップ) 동안 멈춥니다.
* 동시에 화면을 최대 4px, 0.12초 동안 흔듭니다.
* 부서진 블록은 일시적으로 하얗게 빛나고, 블록 색상의 조각을 10개씩 흩뿌립니다.
* 효과음을 재생합니다.
* 바에서 쳐서 튕겨 나올 때까지 계속해서 부서지는 정도에 따라 음정의 높낮이를 반음씩 변화시킵니다.
[뒤로 들어가는 즐거움]
* 블록은 8단으로 구성되며, 아래에서 노란색, 초록색, 주황색, 빨간색을 2단씩 쌓아, 점수는 1, 3, 5, 7점입니다.
* 공이 가장 높은 벽에 맞으면 “뒤로 들어왔다”로 간주하고, 화면의 상단 끝을 빛나게 합니다.
* 다음으로 바에서 쳐서 튕겨 나올 때까지 부서진 블록은 점수를 2배로 합니다.
[점점 빨라지는 긴장감]
* 4회차와 12회차에 쳐서 튕겨 나올 때, 오렌지 단과 빨간 단에 처음으로 맞았을 때, 공의 속도를 1.15배 증가시킵니다.
* 최대 속도는 초기 1.8배입니다.
* 현재 속도를 화면의 왼쪽 하단에 작게 표시합니다.
[마지막 한 개]
* 남은 블록 수를 화면의 상단에 표시합니다.
* 남은 3개로 줄어들면, 남은 블록을 천천히 깜빡입니다.
[조정 용이성]
* 위의 숫자는 모두 파일의 시작 부분 설정(CONFIG)에 이름을 붙여 묶습니다. 프로그램 안에 숫자를 직접 쓰지 않도록(ハードコーディングしない) 합니다.
몇 가지 보충 설명을 드리자면, “[狙える]”의 첫 번째 행은 Ⅱ에서 설명한 “놀이 기계에서 속도가 변하는” 문제를 방지하기 위한 것입니다. “壊れる手応え”에 있는 힛스트톱은 공격이나 충돌이 닿는 순간, 아주 짧은 시간 동안 게임을 멈추게 하는 연출을 의미하며, 격투 게임이나 액션 게임에서 흔히 볼 수 있는 방법입니다. 단 0.06초이지만, 이것만으로도 “맞았다”는 감각이 확실하게 느껴집니다.
마지막으로 ‘조정 용이성’은 게임 숫자를 프로그램 맨 앞에 있는 ‘CONFIG’라는 “설정 메모란”에 모두 모아 달라는 문구입니다. 이렇게 하면 공의 속도를 바꾸고 싶을 때도 메모란의 숫자를 1개만 수정하면 됩니다. 반대로, 숫자를 프로그램 곳곳에 직접 써넣는 것을 ‘하드코딩’이라고 부르는데, 제가 vol.6에서 쓴 실패는 바로 이것이었습니다. AI가 숫자를 곳곳에 직접 써넣어 버려서, 어디를 수정해야 할지 알 수 없었던 것입니다. 이러한 경험을 반복하지 않기 위해 이 문구를 반드시 포함하고 있습니다.
점점 고조되는 긴장감을 나타내는 숫자입니다. ‘Breakout’의 제작 방식을 참고하여 결정되었으며, 6권에서 언급한 바와 같이, 처음에는 흉내를 내는 정도로 훌륭합니다.
손을 움직이시는 분들은 이 지시문을 전달하기 전에, 다음과 같이 추가 준비를 해주십시오. AI를 어떻게 만들어갈지에 대한 규칙을 담은 “CLAUDE.md” 파일을 breakout 폴더에 두면, Claude Code는 실행될 때마다 이 파일을 자동으로 읽어 기록된 규칙을 따라 만들어 줍니다. 내용은 Ⅺ에서 자세히 설명하므로, Ⅺ에 있는 괄호 안의 “처음으로 전달하는 설계 지시”의 시작부터 마지막 줄까지를 복사하여 다음 프롬프트의 ( ) 안에 붙여넣어 주세요. Ⅰ가 한 마디를 CLAUDE.md보다 먼저 시도한 이유는, CLAUDE.md가 있으면 한 마디로 요청해도 어느 정도 정돈되어 만들어져 주는 경우가 있기 때문입니다.
다음 내용을 이 폴더에 CLAUDE.md를 만들어 주세요. (여기에는 Ⅺ가 처음으로 전달한 설계 지시사항의 “이 폴더에서는”부터 마지막 줄까지를 붙여넣기 합니다.)
0번이 끝나면, 혹시 모를 상황에 대비하여 새로운 대화를 시작하고 다시 시작하면 CLAUDE.md의 규칙이 확실하게 읽혀집니다. 데스크톱 앱의 경우 “Code” 탭에서 새로운 대화를 시작하고 다시 breakout 폴더를 선택하며, 터미널의 경우 “/exit” 명령으로 종료한 후 다시 “claude”를 입력하여 실행합니다.
CLAUDE.md가 완성되면, 텍스트 편집기에 “프로ンプ트②의 본문(지시문)”의 괄호를 모두 복사하고, 그 아래에 다음 2행을 추가한 후, Claude Code에 붙여넣어 전송합니다. 1행은 Ⅴ로 쓴 “소리가 나지 않는 문제”를 미리 방지하기 위한 것이고, 2행은 파일명 지정입니다.
프로ンプ트 2(“프로ンプ트 2의 본문” 아래에 다음 2행을 추가) - 먼저 “클릭하여 시작” 화면을 표시하고, 클릭 후 시작되도록 설정하여 반드시 효과음이 울리게 해주세요. 파일 이름은 v1.html로 지정 바랍니다.
만약 AI가 제작하기 전에 질문을 한다면, 예상대로 답변을 해도 되며, “질문 없이 그대로 만들어줘”라고 요청해도 괜찮습니다. 제가 테스트해 본 결과, Claude.md에 “만들기 전에 질문해줘”라고 적어놓아도, 이렇게 상세한 지시문을 전달하면 AI는 더 이상 질문하지 않는다고 판단하는지, 질문 없이 바로 제작을 시작해 버렸습니다. 자신이 만들고 싶은 게임에서 재미를 표현하는 데 도움을 요청할 때는 “만들기 전에 질문만 부탁해. 아직 만들지 마”라고 프롬프트 안에서 명확하게 요청하는 것이 확실합니다. 또한 Claude.md에 조정 화면에 대한 내용이 언급되어 있으므로, 이 시점에서 AI가 요청하지 않은 간단한 조정 화면을 추가하는 경우도 있습니다. 그것은 그대로 유지하면 되며, 이후 6단계에서 접근하기 쉬운 조정 화면을 별도의 파일로 만들어 주시면 됩니다.
5. 지시대로 제작해도, 그대로는 완성되지 않습니다.
이 지시문을 받자마자, AI는 잠시 후 놀랍도록 블록 파괴 게임을 만들어 주었습니다. 8개의 블록이 빨간색에서 노란색으로 나열되고, 공을 맞추면 ‘카치’하고 한순간 멈추더니, 화면이 작게 흔들리고 블록 색깔 조각이 흩뿌려집니다. 계속해서 파괴하면 소리가 점점 높아지기 때문에, 자연스럽게 연달아 공을 칠하게 되고, 바의 끝에서 맞추면 공이 사선으로 튀기 때문에 “여기를 노리자”라고 생각하며 칠 수 있게 되었습니다.
단순히 지시대로 만들어 달라고 해도 그것으로 완성된 것은 아니며, 제가 직접 알아내어 고친 부분이 2곳 있습니다.
첫 번째는 처음에는 효과음이 재생되지 않았던 것입니다. 이는 현재 브라우저에는 페이지를 열었을 때 사람이 클릭하거나 키 조작을 할 때까지 소리가 나오지 않는 설정이 있기 때문입니다. 마우스를 움직이는 것만으로도 즐길 수 있는 게임의 경우, 한 번도 클릭하지 않은 상태로 계속해서 플레이할 수 있게 되어, 중요한 역할을 하는 효과음이 계속해서 재생되지 않았던 것입니다. 따라서 처음으로 “클릭하여 시작” 화면을 띄우도록 수정했습니다. 프롬프트 ②에서 마지막에 추가한 첫 번째 줄은 이 문제에서 비롯된 것입니다.
두 번째로 ‘세부 숫자를 하드코딩하지 마라’라고 지시했음에도 불구하고, 공의 속도나 각도, 히트 스톱 길이와 같은 중요한 숫자는 제대로 설정에 모아져 있었습니다. 그러나 키 조작 시 막대의 속도, 파편의 흩어짐, 효과음의 높이와 같은 세부 숫자는 프로그램 안에 직접 쓰여진 채로 남아 있었고, 이를 스스로 프로그램을 읽고 설정에 다시 정리했습니다. AI는 지시를 상당히 잘 따르지만, 모든 것을 완벽하게 따르지는 않기에 지시가 주어지면 멈추고 마지막에는 자신의 눈으로 확인하는 것이 중요합니다. 이 점은 되풀이해서 강조하고 싶습니다.
손을 움직이고 계시는 분들은, v1.html이 완성되면, 게임을 시작하기 전에 다음 프롬프트를 보내 AI에게 숫자 누락을 찾아달라고 요청해 주세요. CLAUDE.md에서 “이전 버전 유지”를 설정해 두었기 때문에, 앞으로 수정할 때마다 파일 번호를 1씩 늘려가겠습니다.
프로ンプ트③v1.html에서 CONFIG에 포함되지 않은 숫자가 프로그램에 직접 쓰인 부분을 찾아 목록으로 보여주세요. 게임의 움직임, 외형, 음향과 관련된 모든 요소는 이름을 붙여서 전부 CONFIG로 옮기고, 수정된 부분은 v2.html로 저장해주세요. v1.html은 변경하지 마세요.
VI｜터치하고, 숫자를 결정하다
지시문에 제시된 숫자는 단순한 출발점일 뿐입니다. 60밀리초의 히트 스톱이 적절한지, 아니면 40밀리초가 더 가볍게 작동하는지는 실제로 확인해 보지 않고는 알 수 없습니다. 따라서, 놀면서 숫자를 조절할 수 있는 “조정 화면”도 AI에게 제작해 달라고 요청합니다. 요청 방식은 프로ンプ트 ③으로 만든 v2.html을 기반으로 합니다.
프로젝트 4v2.html을 기반으로, 놀면서 숫자를 조절할 수 있는 tune.html을 만들어 주세요. v2.html은 변경하지 마십시오. 화면의 왼쪽에 게임, 오른쪽에 조절용 튜미(슬라이더)를 배치합니다. 튜미는 재미의 5가지(맞히기/파괴되는 손맛/뒤에 들어가는 즐거움/점점 빨라지는 긴장감/마지막 1개) 각 항목마다 제목을 붙여 구분합니다. CONFIG의 숫자 각 항목마다 1개씩 튜미를 만들고, 이름을 일본어로 표기하며, 현재 값과 단위를 옆에 표시합니다. 튜미를 움직이면, 게임을 중단해도 즉시 게임에 반영합니다. 히트 스톱, 화면의 흔들림, 파편, 효과음은 각각 켜고 끌 수 있도록 합니다. “초기 값으로 복귀” 버튼을 추가하고, “현재 값 복사” 버튼을 추가하여 누르면 변환된 숫자가 “이름: 값” 형태로 복사되도록 합니다.
완성된 tune.html을 게임과 같이 두 번 클릭하여 열면, 왼쪽에 게임 화면, 오른쪽에 줄지어 놓인 튜명들이 나타납니다. 열었을 경우에는 먼저 왼쪽에 있는 게임 화면을 클릭하여 시작하세요. 튜명을 만지는 동안에도 공은 계속 움직이므로, 떨어뜨리더라도 신경 쓰지 말고, 얼마든지 반복해서 시도해도 괜찮습니다. 튜명은 재미의 5단계로 나뉘어 있으며 (가장 아래의 “기본”은 평소에는 만지지 않아도 됩니다), 예를 들어 “깨지는 감촉”의 단계에 있는 “히트 스톱 길이”를 좌우로 움직이면, 게임 중에 있더라도 즉시 공이 맞았을 때 멈추는 방식이 바뀝니다. 히트 스톱이나 화면 흔들림의 켜기/꺼기 기능을 전환하면, 그 연출이 있는 경우와 없는 경우로, 감촉이 얼마나 다른지 바로 비교할 수 있습니다.
이는 실제로 이 지시문을 Claude Code에 전달하여 만들어진 화면으로, 조작버튼은 총 51개였습니다. 처음에는 “첫 번째 버튼의 속도”, “바의 끝에서 받았을 때의 각도”, “히트 스톱의 길이”, “화면의 흔들림 크기”, “한 번에 빠르게 되는 비율” 정도부터 먼저 눌러보는 것이 좋습니다 (버튼의 이름은 AI에 의해 약간 다를 수 있습니다). 움직인 버튼의 이름이 색깔로 바뀌므로, 어떤 버튼을 눌렀는지 바로 알 수 있습니다.
마음에 드는 숫자를 찾았다면 “현재 값을 복사” 버튼을 누릅니다. 그러면 “히트 스톱 길이: 40 밀리초”처럼 변한 숫자만 문장으로 복사되어 나타나므로, 그것을 다음 프롬프트의 괄호 안에 붙여넣고 AI에 보내면 됩니다. 조정 화면에서 조정한 숫자는 그 화면 안에만 남아 AI에는 보이지 않으니, 이 “복사하여 전달하는” 과정이 중요합니다.
프로ンプ트 ⑤v2.html을 기반으로 다음 값을 CONFIG에 반영하여 v3.html을 제작해 주세요. v2.html은 변경하지 않습니다. (여기에는 tune.html의 “현재 값을 복사”로 복사한 내용을 붙여넣습니다.)
숫자를 정하기 어려울 때는, 프롬프트 ⑤의 대신에 “v2.html을 그대로, v3.html이라는 이름으로 복사해 주세요”라고 요청하면, 이후 파일 이름이 꼬이지 않습니다.
그렇게 지시하고, 만들게 하고, 만지고, 숫자를 고쳐서, 이 과정을 여러 번 반복하면 “정상”이 “기분 좋다”로 조금씩 바뀌어 갑니다. 어떤 숫자를 어떤 순서로 만져야 할지는 “【읽기 완료】게임 조정을 위한 ‘목표·전술·조절 방법’ 만드는 법”에 자세히 정리되어 있습니다.
7. 원본 규칙은 재미의 핵심을 확장하는 데 1가지 요소만 추가하는 것입니다.
지금까지는 원조의 ‘브레이크아웃’을 모방한 기본적인 블록 파괴 게임을 만들었습니다. 이제부터는 이를 자신의 작품으로 발전시켜 나가는 단계입니다.
출처: note 원문
번역: Gemma 3(.44) 초벌 + 교정 107청크
원문 보기 | 출처: note.com