본문 바로가기

조작과 월드 만들기

1. 프로젝트 세팅

상품 소개 페이지 때와 같은 방식입니다. VS Code에서 새 폴더 my-game을 열고 준비물을 배치합니다.

my-game/
├── GAME.md        ← 지난 챕터의 기획서
└── assets/
    ├── models/    ← character.glb, item.glb
    └── sounds/    ← bgm.mp3, pickup.mp3

터미널에서 claude를 실행하고, 첫 요청으로 기획서를 읽힙니다.

프롬프트 예시

GAME.md에 게임 기획서가 있어. 읽고 나서 궁금한 점이 있으면 물어봐줘.
이 게임을 Vite + Three.js 프로젝트로 만들 건데,
한 번에 다 만들지 말고 내가 요청하는 단계까지만 만들어줘.

바이브 코딩 팁

"한 번에 다 만들지 말고"가 이 챕터의 안전벨트입니다. AI는 시키면 5단계까지 한 번에 만들어버리는데, 그러면 문제가 생겼을 때 어느 단계 탓인지 찾기 어렵습니다.

2. 1단계. 월드에 캐릭터 세우기

> 1단계를 만들어줘: Vite + Three.js 프로젝트를 세팅하고,
  잔디색 바닥과 하늘색 배경, 은은한 조명이 있는 월드를 만들어서
  assets/models/character.glb를 바닥 가운데에 세워줘.
  실행 방법도 알려줘.

npm run dev로 확인합니다. 체크리스트:

  • 캐릭터가 바닥 위에 서 있나요? 공중에 떠 있거나 반쯤 묻혀 있으면: "캐릭터가 떠 있어. 바닥에 딱 붙게 해줘"
  • 크기는 적당한가요? 너무 크거나 작으면: "캐릭터가 화면에서 적당히 보이게 크기 조절해줘"
  • 캐릭터가 새까맣게 보이면: 2-3에서 배웠죠. "조명이 부족한 것 같아. 캐릭터가 잘 보이게 조명 조정해줘"

3. 2단계. 조작: 게임이 되는 순간

> 2단계를 만들어줘:
  - 방향키와 WASD로 캐릭터를 이동시켜줘
  - 이동하는 방향으로 캐릭터가 회전해서 걷게 해줘
  - 이동 중에는 걷기 애니메이션, 멈추면 대기 애니메이션을 재생해줘
  - 카메라는 캐릭터 뒤를 부드럽게 따라오게 해줘
  - 맵 가장자리 밖으로는 못 나가게 해줘

키보드를 눌러보세요. 내가 만든 캐릭터가 내 조작에 반응해 걸어다니는 순간. 이 강의에서 가장 짜릿한 순간 중 하나입니다.

3.1 손맛 다듬기

게임의 재미 절반은 "조작감"입니다. 직접 움직여보며 다듬으세요.

느낌요청
너무 굼떠요이동 속도를 1.5배 올려줘
방향 전환이 뚝뚝 끊겨요회전이 부드럽게 이어지도록 보간을 넣어줘
카메라가 어지러워요카메라를 좀 더 멀리, 더 천천히 따라오게 해줘
걷기 애니메이션과 속도가 안 맞아요이동 속도에 맞게 애니메이션 재생 속도를 조절해줘

애니메이션이 재생되지 않는다면

모델에 따라 애니메이션 이름이 제각각입니다("Walk", "walking", "Armature|Walk"...). "이 GLB 파일에 들어 있는 애니메이션 이름을 전부 출력해서 알려줘"라고 요청하면 Claude Code가 목록을 뽑아줍니다. 그중 걷기에 해당하는 이름을 쓰라고 알려주면 해결됩니다.

4. 월드 꾸미기

허허벌판은 심심하니 공원답게 만들어 봅시다.

> 맵에 로우폴리 나무 몇 그루와 바위를 적당히 배치해줘.
  캐릭터가 나무를 통과하지 않고 막히게 해줘.
> 낮 하늘 느낌으로 구름 몇 개 띄워줘.

나무·바위 같은 소품은 코드로 만들게 해도 되고, Poly Pizza에서 받은 GLB를 assets/models에 추가해 "이 나무 모델을 배치해줘"라고 해도 됩니다.

여기까지 됐다면 잊지 말고:

> 지금까지 작업 저장해줘 (커밋 메시지: 2단계 조작 완성)

5. 도전 과제

  1. 달리기: Shift를 누르는 동안 속도가 빨라지게 해보세요. 캐릭터에 달리기 애니메이션을 넣었다면 함께 전환되게!
  2. 점프: 스페이스바로 짧게 점프하게 해보세요.
  3. 내 게임 컨셉에 맞게 월드 테마를 바꿔보세요 (공원 → 빙하, 화성...).

6. 정리

  • 시작은 기획서 읽히기 + "한 번에 다 만들지 마" 선언
  • 1단계 월드·캐릭터 → 2단계 조작·카메라·애니메이션, 단계마다 확인 후 저장
  • 조작감은 수치의 문제. 직접 움직여보며 속도·회전·카메라를 다듬기
  • 애니메이션 문제는 "애니메이션 이름 목록 출력"으로 해결

돌아다닐 수 있는 월드가 생겼습니다. 다음 챕터에서 생선을 뿌리고, 점수를 세고, 게임을 완성합니다.