3D 게임 개발 가이드: 실패와 성공의 절충안

3D 게임 개발의 도전과 절충

송세현님, 박예빈님의 3D 인터랙티브 사이트 사례글을 보고 "우리 것도 해보고 싶다"로 시작해서, 세 번의 실패 끝에 2D 게임에 3D 배경과 3D 주인공을 겹쳐 얹는 절충안으로 3D 게임 '글밭 방울 대작전'을 완성하고 배포했습니다. 비용 0원, 제가 쓴 코드 0줄입니다.

바쁘시면 이것만 읽어도 돼요:

• 사례글에서 자극받아 시작 → Claude Code와 대화만으로 3D 게임 완성·배포 (비용 0원)

• 전체 3D 전환은 세 번 다 실패 — "원본이 더 낫다"를 세 번 말한 끝에 "배경+주인공만 3D" 절충안 발견

• 검증된 2D 게임은 그대로 두고 3D를 위아래로 겹치는 3겹 레이어 구조가 핵심

• 예전에 만들다 만 프로토타입 + 다른 게임 캐릭터 + 이미 만든 배경, 있는 자산 조합으로 새 게임이 나옴

• 데스크톱에서 멀쩡하던 게임이 아이폰에선 버튼도 못 누르고 소리도 안 남 — 실기기 테스트 필수

• "정신 사나워", "위로 못 올라가" 같은 느낌 표현만으로도 AI가 원인을 찾아냄

비개발자를 위한 3D 게임 개발 팁

• 코드를 몰라도 AI와 대화로 뭔가 만들어보고 싶은 비개발자 바이브코더

• 수업 도구를 직접 만드는 선생님들 (저도 교사입니다)

• "3D는 어렵겠지" 하고 미뤄둔 분 — 전부 3D로 안 해도 됩니다

• 만들다 만 프로젝트가 폴더에 잠들어 있는 분

2D에서 3D로의 전환 도전

저는 학생들과 독서 수업을 하면서 '독서 후 플레이'라는 웹게임 플랫폼을 운영하고 있습니다. 책을 읽고 나서 그 책의 세계로 게임을 하는 방식인데, 지금까지 만든 게임이 모두 2D였어요.

그러다 이 게시판에서 Tripo로 3D 모델을 만들어 인터랙티브 사이트를 만든 사례글을 봤습니다. 보는 순간 '우리 글밭 게임도 이렇게 되면 예쁘겠다' 싶었죠. 다만 조건이 있었습니다 — 비용은 무료 범위에서, 게임 전체가 아니라 몇 장면이나 배경만이라도. 유료 3D 도구를 결제할 생각까지는 없었고, 잘 돌아가는 게임을 뒤엎고 싶지도 않았거든요.

AI 코딩 도구와 3D 게임 개발

• 도구: Claude Code (터미널에서 대화하는 AI 코딩 도구)

• 모델: Claude Fable 5

• 이미지: codex-image 스킬 (ChatGPT 구독으로 이미지 생성 — 별도 과금 없음)

• 특이사항: 3D는 Three.js라는 무료 라이브러리를 AI가 알아서 골라 썼습니다. 저는 이름만 압니다 ㅎㅎ

https://play.wherethoughtsgrow.com/play/bubble

3D 게임 개발 과정

사례글 하나가 불을 지폈다

일요일 오후, 사례글 링크를 그대로 붙여넣고 이렇게 물었습니다.

Open optionsauto

이런 신박한 사례글이라니.. 우리 글밭 오리지널 게임중에 3d로 만들기에 가장 적절한
게임을 추천해줘. 어떤 게임이든지 괜찮으니까, 비용은 무료로 사용하는 선에서,
전체를 바꾸는 것이 아니라, 몇 장면만 이라도, 아니면 배경을 3D로 만들어 보고 싶어.

Claude가 기존 게임들을 훑어보더니 후보를 추려줬고, 빨간펜 게임의 두더지 장면부터 3D로 바꿔보기로 했습니다.

"원본이 더 나은데" — 세 번의 실패

결과물이 나왔는데... 솔직히 별로였습니다. 그래서 그대로 말했어요.

Open optionsauto

원래 버전이 더 나은데. 3d 버전이 오히려 예쁘지 않아. 리듬 수확게임 배경을
클레이 에니메이션 그대로 3D로 만들면 예쁘지 않을까? 한번 시도해줘.

두 번째도 마찬가지. 클레이 느낌의 아기자기한 원본을 3D로 옮기니 오히려 밋밋해졌습니다. 여기서 포기할까 하다가, 마지막 실험으로 관점을 바꿔봤습니다.

Open optionsauto

이것도 생각보다 별로네. 원본이 더 나아. 실험이니까, 마지막으로 —
리듬 게임은 한명씩 플레이 하니까, 그 플레이어의 동작을 3D로 구현할 수 있어??

배경 전체를 3D로 만드는 게 아니라, 움직이는 캐릭터 한 명만 3D로. 지금 돌아보면 이 질문이 이 프로젝트의 전환점이었습니다. "원본이 더 낫다"를 세 번 말할 수 있었기 때문에 절충안까지 올 수 있었던 거예요.

잠자던 프로토타입의 부활

그런데 Claude가 실험 결과를 보여주는 과정에서, 예전에 만들다가 잊고 있던 버블버블 스타일 게임 하나가 눈에 들어왔습니다.

Open optionsauto

아, 전에 만들었던 버블버블 게임을 만들었구나. 이것도 재미있네. 이 게임을 먼저
완성해 볼까? 몬스터들을 벌레로 만들어 주고, 배경은 아까 만든 그 배경을 써볼까?
메인 캐릭터를 글밭 농부에 가장 어울리는 가드너로 바꿔줘.

이 한 번의 요청에 세 가지 재료가 조합됐습니다.

1. 만들다 만 버블버블 프로토타입 (게임 뼈대)

2. 아까 실험하며 만든 3D 클레이 정원 배경 (실패작인 줄 알았던 것)

3. 다른 게임(리듬 수확)의 가드너 캐릭터 (거북이 농부)

새로 만든 건 없고, 있는 것들을 엮기만 했는데 새 게임이 됐어요. 실패한 실험도 버려지지 않고 배경으로 재활용됐고요.

3D 가드너가 처음 움직인 순간

Claude가 택한 구조가 재미있습니다. 게임 화면을 3겹 샌드위치로 만들었어요.

• 맨 뒤: 3D 클레이 정원 배경 (등불이 흔들리는 밤 풍경)

• 가운데: 원래의 2D 게임 (물리, 점수, 벌레 움직임 — 검증된 부분은 그대로)

• 맨 앞: 3D 가드너 캐릭터 (2D 게임 속 주인공 위치를 매 순간 읽어서 따라 움직임)

말하자면 잘 돌아가는 2D 게임 무대 앞뒤로 3D 세트를 세운 셈입니다. 게임 로직은 하나도 안 건드렸으니 망가질 위험도 없고요.

그리고 처음으로 3D 가드너가 화면에서 달리고, 점프하고, 방울을 쏘고, 벌레를 잡으면 만세를 부르는 걸 봤을 때 — 이 프로젝트에서 제일 "오!" 했던 순간입니다. 2D 그림이었던 캐릭터가 입체가 되어 움직이니까 완전히 다른 게임처럼 보였어요.

알고 보니 "위로 못 올라가는 게임"이었다

플레이해보니 뭔가 이상했습니다. 위층 발판으로 올라가고 싶은데 자꾸 안 됐어요. 밸런스 조정을 요청했더니, Claude가 놀라운 걸 찾아냈습니다.

점프 최고 높이가 발판 간격보다 5픽셀 낮아서, 원본부터 위층에 올라갈 수 없는 게임이었다는 것. 심지어 브라우저 탭을 백그라운드에 두면 물리 측정이 멈춰서, Claude는 게임 물리를 별도 시뮬레이션으로 돌려 숫자로 증명하고 점프력을 고쳤습니다.

Open optionsauto

이제 위로 올라갈 수 있어서 좋아.

프로토타입 시절부터 있던 버그를 완성 단계에서야 찾은 거죠. "왜 안 올라가지?"라는 느낌을 말로 전달했을 뿐인데 원인을 숫자로 찾아온 게 인상적이었습니다.

로고와 커버 — 한글이 깨지지 않게

게임 타이틀 로고는 이미지 생성 AI로 만들었는데, 아시는 분은 아시겠지만 이미지 AI가 한글 글자를 자주 뭉갭니다. 그래서 커버 그림은 글자 없이 생성하고, 이미 만들어둔 로고 이미지를 나중에 합성하는 방식으로 우회했어요. 클레이 점토 느낌의 "글밭 방울 대작전" 로고가 밤 정원 위에 떠 있는 커버가 나왔습니다.

ALT

배경에 거품이 있는 거북이 사진

배포 직전, 아찔했던 순간

배포하려는데 뭔가 이상해서 물었습니다.

Open optionsauto

어? 글밭리듬수확 게임은 어디로 갔어? 그건 그대로 있어야 하는데??

알고 보니 리듬 수확 게임이 제 컴퓨터의 최신 코드에 아직 합쳐지지 않은 상태였고, 그대로 배포했으면 서비스 중인 게임 하나가 통째로 증발할 뻔했습니다. 다행히 배포 전에 눈치채서 코드를 합친 뒤 배포했고, 하루 만에 새 게임이 공개됐습니다.

다음 날: 아이폰과의 전쟁

여기서 끝이 아니었습니다. 다음 날 아이폰으로 플레이해보니 완전히 다른 세상이더라고요. 문제가 꼬리에 꼬리를 물었습니다.

ALT

한국 게임 스크린샷

Open optionsauto

글밭 방울대작전을 내 아이폰에서 플레이 하려는데, 화면이 올라가지 않아서
버튼을 누를 수 없어. 고쳐줘.

시작 버튼이 화면 밖에 잘려 있는데 스크롤도 안 되는 상태. 고쳤더니 이번엔 —

Open optionsauto

방울방울대작전은 버튼에 가려서 게임 자체를 할 수가 없어. 핸드폰에서 위에 점수판만
너무 보이고, 게임을 잘 할 수 있는 위치가 아니야. 다 고쳐야 해.

조작 버튼이 게임 화면을 가리고, 점수판이 화면 절반을 먹는 문제. Claude가 점수판을 한 줄로 압축하고, 게임 화면 비율을 지키고, 조작 버튼을 게임 밖 하단 전용 공간으로 분리했습니다. 이 참에 플랫폼의 다른 게임 8종도 아이폰 크기로 전수 점검해서 같은 문제를 미리 고쳤어요.

화면을 다 잡으니 마지막 보스가 나타났습니다. 소리가 안 나요. 알고 보니 아이폰은 옆면의 무음 스위치가 켜져 있으면 게임 효과음 방식의 소리를 통째로 꺼버립니다(유튜브 같은 건 나오면서요!). Claude가 이 동작을 우회하는 표준 기법을 여러 겹으로 적용했고 —

Open optionsauto

이제 소리 나네.

이틀간의 여정이 끝났습니다.

3D 게임 개발의 성과

Before vs After

결과물

• 🎮 플레이: https://play.wherethoughtsgrow.com/play/bubble (로그인 없이 첫 판 체험 가능)

• 방울로 벌레를 가두고 몸으로 부딪혀 터뜨리는 버블버블 스타일 액션 + 전체 랭킹 TOP 5

AI 코딩 도구 활용 팁

효과적이었던 것

1. 실패를 빨리 인정하고 방향 틀기 — "원본이 더 낫다"를 세 번 말했기 때문에 절충안이 나왔습니다. 첫 시도에 매몰돼서 "조금만 더 다듬어줘"를 반복했다면 아직도 예쁘지 않은 전체 3D를 만지고 있었을 거예요.

2. 느낌을 그대로 말하기 — "정신 사나워", "위로 못 올라가", "게임을 잘 할 수 있는 위치가 아니야". 기술 용어를 하나도 안 썼는데 AI가 원인을 찾아냅니다. 정확하게 말해야 한다는 부담을 내려놓으세요.

3. 있는 자산 재활용 — 만들다 만 게임 + 다른 게임의 캐릭터 + 실패한 실험의 배경. 조합만으로 새 게임이 됩니다. 새 프로젝트를 시작하기 전에 "전에 만든 것 중에 쓸 만한 것 있어?"라고 물어보세요.

이렇게 하면 안 돼요

1. 데스크톱에서만 테스트하고 끝내기 — 컴퓨터에서 완벽했던 게임이 아이폰에선 버튼도 못 누르는 상태였습니다. 학생들(사용자들)이 실제로 쓸 기기로 꼭 직접 플레이해보세요.

2. "소리가 안 나요"를 한 가지 원인으로 단정하기 — 아이폰 소리 문제는 원인 후보가 여러 개라(무음 스위치, 브라우저 정책, 음량) AI가 여러 해법을 겹으로 적용하고 실기기로 확인하는 방식이 통했습니다.

3D 게임 개발의 확장 가능성

• "전체를 바꾸지 말고 한 겹만 얹기" 전략은 게임이 아니어도 통합니다. 잘 돌아가는 자료·양식·사이트를 뒤엎지 않고, 보이는 부분만 새로 입히는 접근이에요.

• 발표 자료나 학급 홈페이지에 3D 요소 하나만 넣어도 분위기가 확 달라집니다 — 전부 3D일 필요가 없다는 게 이번 경험의 핵심입니다.

• 폴더에 잠든 미완성 프로젝트들, AI에게 목록을 보여주고 "이 중에 되살릴 만한 것 있어?"라고 묻는 것만으로 시작이 됩니다.

3D 게임 개발의 미래 계획

• 이번에 만든 3겹 레이어 구조로 다른 글밭 게임들도 하나씩 3D 업그레이드 해볼 생각입니다 (리듬 수확이 1순위 후보).

• 방울 대작전 자체도 보스 벌레, 새 스테이지 패턴 같은 콘텐츠 확장을 계획하고 있어요. 학생들 랭킹 경쟁이 달아오르면 동기부여가 확실하거든요 ㅎㅎ

참고한 사례 링크

https://www.gpters.org/dev/post/story-how-developer-who-k46njkDCef1VMC0

송세현님 사례글

 https://www.gpters.org/dev/post/creating-interactive-site-using-ZxtJpJN2O92KNpf

박예빈님 Tripo 사례글