[나의 앱 개발기] Claude로 클래식 테트리스 게임 직접 만들어본 후기
요즘 AI로 게임 만드는 재미에 푹 빠져 있습니다. 지난 몇 주 동안 갈라가, 폰포코, 디그더그 같은 옛날 오락실 게임을 하나씩 HTML로 만들어서 깃헙 페이지에 올려놨거든요. 만들고 나면 아이가 폰으로 바로 실행해서 노는 모습이 그렇게 뿌듯할 수가 없더라고요.
그래서 “이번 주말엔 또 뭘 만들어볼까” 하면서 유튜브를 뒤적이고 있었어요. 마침 알고리즘이 띄워준 영상 중에 ‘테트리스 출시 40주년 다큐멘터리’ 같은 게 있었습니다. 1985년 소련에서 알렉세이 파지트노프라는 사람이 만들어서 전 세계로 퍼진 그 게임. 영상을 보다가 무릎을 탁 쳤죠. 아 맞다, 이게 있었지.
왜 진작 생각 못했을까 싶을 정도였어요. 갈라가나 폰포코 만들 때 ‘어린 시절 오락실에서 동전 넣던 그 게임들을 직접 만들어보자’ 가 컨셉이었는데, 정작 제일 유명한 테트리스를 빼먹고 있었던 거죠. 게다가 테트리스는 룰도 단순하고, 그래픽도 블록 7개만 있으면 되니까 구현 난이도도 합리적이고요.
거기다 결정적인 한 방. 영상에서 누가 말하더라고요. “테트리스는 누적 판매량 1억 장, 모바일 다운로드까지 합치면 5억 회가 넘는 단일 게임 IP의 끝판왕” 이라고. 40년 동안 살아남은 게임은 다 이유가 있잖아요. 그 이유를 직접 코드로 짜보면서 느껴보고 싶었습니다.
결론부터 말하면 총 작업 시간 3시간, 코드 라인 수 약 1,200줄짜리 모바일 대응 클래식 테트리스 게임을 완성했습니다. 그것도 효과음, 8비트 BGM, 홀드 기능, 고스트 피스, 하드드롭까지 정통 룰 거의 전부 들어간 버전으로요. 한 파일짜리 HTML이라 깃헙 페이지에 올리니 폰에서 바로 실행되고, 광고도 결제도 없는 우리 가족 전용 게임이 된 거죠.
어떤 식으로 기획했고, 어디서 막혔고, 어떻게 풀었는지 기록해두려고 합니다. 혹시 비슷한 걸 시도해보고 싶은 분께 도움이 됐으면 좋겠어요.
1. 왜 직접 만들었나
2. 기획 단계 — 무엇을 정했나
3. 핵심 게임 로직 구현
4. 모바일 조작과 UI 디자인
5. 효과음과 BGM은 어떻게 만들었나
6. 시행착오와 다음 계획
* 왜 직접 만들었나.
앱스토어에 ‘테트리스’ 검색하면 비슷한 게임이 수십 개 나옵니다. 무료로 깔 수도 있고요. 그런데 막상 다운받아 보면 광고가 너무 많거나, 결제 유도가 심하거나, UI가 복잡해서 아이가 헤매거나. 그런 경험 다들 한 번씩 있으실 거예요. 광고 한 번 봐야 다음 스테이지 가는 게임을 아이한테 쥐여주고 싶진 않잖아요.
그리고 이미 갈라가 만들면서 깨달은 게 있어요. HTML 한 파일이면 끝난다 는 거. 빌드 도구도, 서버도, 앱스토어 심사도 필요 없습니다. 텍스트 에디터에서 코드 짜고, 깃헙에 올리고, 폰에서 주소만 치면 끝이에요. 따님이 “아빠가 만든 게임” 이라고 친구들한테 자랑할 수 있다는 것도 큰 동기부여였습니다.
마지막으로 개인적인 이유 하나. 저는 어릴 때 형 GameBoy 빌려서 테트리스 했던 세대거든요. 학원 끝나고 집 가면서 친구랑 돌아가면서 한 판씩 했던 그 기억. 그걸 직접 코드로 짜본다는 게, 뭐랄까 일종의 셀프 기념품 만드는 느낌이었습니다.
* 기획 단계 — 무엇을 정했나.
AI에게 무작정 “테트리스 만들어줘” 라고 하면 어디서 본 듯한 평범한 결과물이 나오기 마련이에요. 그래서 시작 전에 핵심 의사결정을 미리 정리했습니다.
1. 비주얼 컨셉.
NES(닌텐도 8비트) 시절 클래식 픽셀 아트로 결정. 모던한 그라데이션이나 파스텔톤 대신 진한 원색 7가지 + 3D 베벨 효과 + CRT 스캔라인. 아이가 좋아할 것 같았고, 뭐랄까 ‘진짜 게임’ 느낌이 나잖아요.
2. 필수 기능.
다음 블록 미리보기, 홀드 기능, 하드드롭/소프트드롭, 효과음, BGM. 정통 테트리스 룰을 모르는 사람도 있을까 봐 정리하면, 이 다섯 가지가 빠지면 사실 테트리스가 아니라 그냥 ‘블록 쌓기 게임’이 됩니다.
3. 조작 방식.
모바일 터치 버튼, 스와이프 제스처, PC 키보드 — 세 가지 모두 지원. 따님은 폰으로 할 거고, 저는 노트북에서 테스트할 테니까요.
* 핵심 게임 로직 구현.
테트리스가 단순해 보여도 막상 코드로 짜보면 신경 쓸 게 꽤 많습니다. 핵심 로직 다섯 개를 정리하면 이렇습니다.
| 기능 | 구현 방식 | 왜 이렇게? |
|---|---|---|
| 블록 등장 순서 | 7-bag 랜덤 | 완전 랜덤이면 같은 블록 5번 연속 나올 수 있음 |
| 블록 회전 | SRS 월킥 | 벽에 붙어도 자연스럽게 돌아감 |
| 라인 제거 | 꽉 찬 줄 splice 후 위에서 빈 줄 추가 | 아래로 떨어뜨리는 효과 자동 구현 |
| 고스트 피스 | 현재 블록 위치에서 충돌 직전까지 시뮬레이션 | 매 프레임 다시 계산 |
| 레벨업 속도 | 10라인마다 +1, 레벨당 80ms 감소 | 최저 50ms로 제한 |
이 중 가장 중요한 게 7-bag 시스템입니다. I, O, T, S, Z, J, L 7개 블록을 한 ‘가방’에 넣고 무작위로 한 개씩 꺼내요. 가방이 비면 새 가방을 만들고요. 그래서 어떤 블록도 14개 안에 반드시 한 번은 나옵니다. 이게 정통 테트리스 룰이고, 안 그러면 운빨로 망하는 게임이 되거든요.
SRS(Super Rotation System)도 중요한데, 이건 블록이 벽 옆에서 회전할 때 ‘살짝 밀려나면서’ 회전이 가능하게 해주는 시스템이에요. I 블록이 가장 까다로워서 별도 킥 데이터를 따로 둡니다.
* 모바일 조작과 UI 디자인.
여기서 시간 가장 많이 썼습니다. 게임 로직보다 UI 작업이 더 오래 걸렸어요.
1. 화면 레이아웃.
가운데 게임판(10×20), 왼쪽 HOLD/SCORE/HIGH, 오른쪽 NEXT(5개 미리보기)/LEVEL/LINES. 폰에서도 PC에서도 같은 비율로 보이게 grid-template-columns로 잡았어요. 이걸 flex로 했다가 비율이 깨져서 grid로 갈아엎었습니다.
2. 터치 컨트롤.
화면 하단에 D-pad(상하좌우) + 액션 버튼 4개(HARD, HOLD, 역회전, PAUSE) 배치. 누르면 한 번 동작하고, 누르고 있으면 180ms 후부터 70ms 간격으로 반복(키 리피트). 이거 안 하면 좌우 이동할 때마다 일일이 탭해야 해서 손가락 아파요.
3. 스와이프 제스처.
게임판 위에서 좌우 스와이프 = 이동, 아래 스와이프 = 소프트드롭, 위로 빠르게 스와이프 = 하드드롭, 짧게 탭 = 회전. 24px 임계값으로 ‘우연한 터치’와 ‘의도한 스와이프’를 구분했습니다.
터치 버튼 = 정확한 조작
스와이프 = 빠른 조작
키보드 = 가장 정밀한 조작!
* 효과음과 BGM은 어떻게 만들었나.
이 부분이 의외로 재미있었어요. mp3 파일 따로 안 쓰고 Web Audio API로 실시간 합성했습니다. 외부 파일이 없으니 로딩도 없고, 용량도 안 먹고요.
원리는 간단합니다. AudioContext에서 OscillatorNode를 만들어 주파수와 파형(square, triangle, sawtooth)을 지정하고, GainNode로 음량 페이드아웃을 걸어주면 끝. 사각파로 짧게 ‘삑’ 하면 그게 8비트 효과음이에요.
BGM은 그 유명한 코로뷰시카(러시아 민요) 멜로디를 음표 데이터로 직접 입력해서 setTimeout 루프로 재생합니다. 몇 십 줄짜리 음표 배열이면 충분하더라고요. 저작권은 민요라 문제없고요.
* 시행착오와 다음 계획.
한 번에 깔끔하게 된 건 아닙니다. 몇 가지 막혔던 지점을 솔직하게 적어두면.
1. 캔버스 해상도.
처음에는 캔버스 크기를 CSS로만 잡았더니 폰에서 픽셀이 흐릿하게 나왔어요. 디바이스 픽셀 비율(devicePixelRatio)을 곱해서 내부 해상도를 따로 잡아주니까 또렷해지더라고요. 이건 모바일 캔버스 작업할 때 거의 필수입니다.
2. iOS 오디오 정책.
아이폰은 사용자 터치 이벤트 없이 자동으로 소리가 안 나옵니다. 그래서 START 버튼 눌렀을 때 audioCtx.resume() 을 호출해서 오디오를 깨우는 처리를 따로 넣었어요. 안 그러면 폰에서 무음으로 게임이 돌아가는 어이없는 상황이 됩니다.
3. 스테이지가 없다.
완성하고 보니 클래식 모드라 ‘끝’이 없더라고요. 따님이 “이거 어디까지 가면 클리어야?” 라고 묻길래, 다음 버전에서는 라인 목표 스테이지(10라인 → 20라인 → 30라인…)나 미션 스테이지(테트리스 3번 성공 등)를 추가하려고 합니다. 별 모으기 시스템 같은 거요.
저는 개인적으로 “AI 코딩이 진짜 일상에 도움이 되는 영역은 이런 ‘작지만 내 가족 맞춤 도구’ 만드는 일” 이라고 봅니다. 회사 일은 어차피 검토와 책임 문제가 걸려서 100% AI에 맡기기 어렵잖아요. 근데 주말에 딸 게임 만들어주는 건 다르거든요. 빠르게 만들고, 빠르게 피드백 받고, 빠르게 고치고. 이런 즉각적인 만족감이 큰 매력입니다.
* 마무리 정리.
HTML 파일 하나에 1,200줄. 그게 전부였습니다. 외부 라이브러리도, 빌드 도구도, 서버도 없이 그냥 텍스트 에디터에 코드만 있으면 됩니다. 깃헙 페이지에 올리면 폰에서 바로 게임이 되고요.
딸은 만족했고, 저는 주말 잘 보냈습니다. 그게 결과의 전부예요. 다음 주말엔 스테이지 모드 붙여줄 생각입니다. 그땐 또 다른 글로 정리할게요.
모든 코드 결정과 선택은 작성자의 판단입니다.
