[나의 앱 개발기] 딸을 위해 '무한의 계단' 게임을 직접 만들어봤다 — AI + HTML + GitHub Pages 1인 개발기
"아빠, 무한의 계단 같은 거 오프라인에서도 할 수 있는 거 없어?"
딸한테 이 말을 듣고 잠깐 생각했습니다. 앱스토어에서 받으면 되지 않나? 근데 스크린타임 때문에 앱 설치가 제한되어 있고, 인터넷 없이도 되는 게임을 원하는 거였어요. 그래서 생각했습니다. 그냥 내가 만들어줄까?
코딩 경험이라곤 회사에서 Google Apps Script로 업무 자동화 좀 해본 게 전부입니다. 게임 개발은 당연히 처음이고요. 그런데 요즘 AI가 코드를 써준다고 하니까, 한번 해보자 싶었습니다.
* 첫 번째 시도 — "일단 돌아가는 게임부터."
Claude한테 이렇게 말했습니다. "딸이 오프라인에서도 할 수 있는 간단한 게임 개발하고 싶어. 무한의 계단 같은 거." 그랬더니 HTML 파일 하나에 Canvas 기반 게임을 만들어주더라고요. 처음 받은 버전은 솔직히 엉망이었습니다. 다음 계단을 밟아도 바로 게임오버. 카메라가 위로 올라가는데 캐릭터와 계단은 안 따라감. 왼쪽이나 오른쪽으로 가면 화면 밖으로 나가버리고. 매번 문제를 발견할 때마다 Claude한테 "이거 이상한데?"라고 스크린샷을 보냈고, 수정하고, 다시 테스트하고. 이 "문제 발견 → 스크린샷 → AI 수정 → 재테스트" 루프를 수십 번은 반복한 것 같습니다.
표로 정리하니까 깔끔해 보이는데, 실제로는 버전마다 "이번엔 되겠지?" → "안 되네..." → "왜...?" 의 연속이었습니다. 특히 사이즈 조정이 고역이었어요. 계단 크기, 캐릭터 크기, 간격을 바꾸면 전체 밸런스가 무너지거든요.
이 5개 파일을 GitHub에 올리면, Safari에서 접속 → 공유 버튼 → "홈 화면에 추가"로 아이폰 홈에 앱 아이콘이 생깁니다. 터치하면 주소창 없이 전체 화면으로 게임이 실행되고, 오프라인에서도 돌아가요.
처음 캐릭터는 노란 네모에 눈 두 개 달린 수준이었습니다. "이건 좀..." 싶어서 계속 업그레이드했어요.
레퍼런스 이미지를 찍어서 Claude한테 보내면서 "이 느낌으로 바꿔줘"라고 요청하는 식이었습니다. 안경 쓴 아저씨 캐릭터, 빨간 원피스 아줌마 캐릭터. 왼쪽으로 가면 왼쪽을 바라보고, 점프할 때 뒤에서 파란 불꽃 이펙트가 나오고.
표정 시스템도 넣었습니다. 시간이 넉넉하면 편안한 얼굴, 시간이 줄면 집중하는 표정, 거의 다 되면 눈이 커지면서 땀방울이 뚝뚝. 콤보 10개 이상이면 눈을 감고 활짝 웃는 표정으로 바뀌죠.
배경도 어두운 우주 테마에서 하늘색 그라데이션 + 구름 + 도시 실루엣으로 바꿨고, 계단에는 벽돌 질감을 넣고, 코인에는 빛나는 효과를 추가했습니다. 전부 코드로 그린 겁니다. 이미지 파일 없이요.
* 첫 번째 시도 — "일단 돌아가는 게임부터."
Claude한테 이렇게 말했습니다. "딸이 오프라인에서도 할 수 있는 간단한 게임 개발하고 싶어. 무한의 계단 같은 거." 그랬더니 HTML 파일 하나에 Canvas 기반 게임을 만들어주더라고요. 처음 받은 버전은 솔직히 엉망이었습니다. 다음 계단을 밟아도 바로 게임오버. 카메라가 위로 올라가는데 캐릭터와 계단은 안 따라감. 왼쪽이나 오른쪽으로 가면 화면 밖으로 나가버리고. 매번 문제를 발견할 때마다 Claude한테 "이거 이상한데?"라고 스크린샷을 보냈고, 수정하고, 다시 테스트하고. 이 "문제 발견 → 스크린샷 → AI 수정 → 재테스트" 루프를 수십 번은 반복한 것 같습니다.
* 기능을 하나씩 붙여갔다.
첫 번째 버전이 겨우 돌아가기 시작하니까 욕심이 생기더라고요. 난이도 선택, 기록 저장, 특수 계단 같은 것들을요.| 버전 | 추가된 기능 | 삽질 포인트 |
|---|---|---|
| v1 | 기본 계단 오르기 | 방향 판정 버그로 첫 계단에서 바로 사망 |
| v2 | 카메라 추적 | Y좌표 방향이 반대여서 캐릭터 실종 |
| v3 | 카메라 X축 추적 + 계단 보정 | 한쪽으로 치우치면 화면 밖으로 |
| v4 | 난이도 상/중/하 + 기록 시스템 | localStorage 접근 실패 시 게임오버 화면 안 뜸 |
| v5 | 특수 계단 (시간보너스, 반전, 더블) | "보라 계단이 안 나와요" — 쉬움에 확률 0%였음 |
| v6 | 모바일 터치 최적화 | 아이폰 파일 앱에서 JS 실행 차단 |
| v7 | 캐릭터 선택 (남/여) + 표정 시스템 | 캐릭터가 계단보다 작아서 안 보임 |
| v8~v10 | 배경 개선, 사이즈 조정, 일시정지 | 캐릭터가 화면을 꽉 채우는 참사 발생 |
* "그래서 딸한테 어떻게 줘?"가 가장 어려웠다.
게임 자체보다 딸 아이폰에 전달하는 과정이 훨씬 힘들었습니다. 진심으로요.1. 카카오톡으로 보내기.
HTML 파일을 보냈더니 카톡 내부 브라우저에서 제대로 안 돌아갔습니다. 다른 앱으로 열기를 해도 Safari 옵션이 안 보이고.2. AirDrop으로 전송.
파일은 갔는데, 아이폰 파일 앱에서 열면 난이도 버튼이 안 눌려요. 파일 앱의 내장 웹뷰가 JavaScript를 제한하더라고요. touchend + click 이중 바인딩까지 해봤지만 소용없었습니다.3. Blogger에 올리기.
이것도 드라마였습니다. 화살표 문자 ◀▶가 HTML 엔티티로 깨져서 화면에 ◀ 같은 숫자가 뜨고. base64로 인코딩해서 iframe에 넣어봤더니 Blogger가 스크립트를 잘라먹고. Blob URL 방식으로 바꿔봤더니 이번엔 검은 화면만. 같은 페이지를 수정하다 보니 Blogger가 이전 잔재를 남기면서 한번 됐던 코드도 안 되기 시작하고.4. 결국 GitHub Pages.
이게 정답이었습니다. GitHub에 레포지토리 만들고 index.html 올리고 Pages 설정 켜면 끝. URL 하나로 어디서든 접속 가능하고, 코드를 건드리지 않으니까 깨질 일도 없어요.* 스크린타임이라는 복병.
GitHub Pages로 배포하고 딸한테 링크를 보냈더니, "허용되지 않는 웹사이트" 화면이 떴습니다. 아이폰 스크린타임에서 웹사이트를 제한하고 있었거든요. 해결은 간단했어요. 설정 → 스크린타임 → 콘텐츠 및 개인정보 보호 제한 → 웹 콘텐츠 → 허용 목록에 도메인을 추가하면 됩니다. 시간 제한도 따로 걸 수 있어서 하루 1시간만 플레이 가능하게 설정했고요.* PWA — 앱처럼 설치하기.
"Safari로 들어가는 게 아니라 앱처럼 터치 한 번으로 실행하면 안 돼?" 딸의 요청이었습니다. PWA(Progressive Web App) 설정을 추가하면 가능합니다. 필요한 파일은 이것뿐이에요.| 파일 | 역할 |
|---|---|
| index.html | 게임 본체 |
| manifest.json | 앱 이름, 아이콘, 전체화면 설정 |
| sw.js | 오프라인 캐시 (서비스 워커) |
| icon-192.png | 홈 화면 아이콘 |
| icon-512.png | 스플래시 화면 아이콘 |
* 캐릭터와 그래픽, 계속 진화했다.
* 사용된 기술 스택 정리.
HTML + CSS + JavaScript (바닐라)
Canvas API (2D 렌더링)
GitHub Pages (무료 호스팅)
PWA (오프라인 + 앱 설치)
총 비용: 0원
* 마무리 정리.
코딩을 모르는 사람이 게임을 만들 수 있냐고 물으면, 저는 "가능하다, 다만 쉽지는 않다"고 답하겠습니다. AI가 코드를 써주지만 방향을 잡고 문제를 진단하는 건 결국 사람 몫이에요. 특히 "만든 걸 어떻게 전달하느냐"가 코딩보다 더 어려울 수 있다는 걸 이번에 뼈저리게 느꼈습니다. 그래도 딸이 홈 화면에서 "무한의 계단"을 터치하고 "아빠가 만든 거"라며 친구한테 보여주는 걸 보면, 그 수십 번의 삽질이 아깝지 않더라고요.