코딩 모르는데 "테트리스"만들기 + 성경가지고 게임만들어보기

[23기 바이브코딩게임] 코딩 모르는데 "테트리스"랑 "노아의 방주" 게임을 만들었다

📝 한줄 요약

코딩을 모르는 상태에서 클로드 코드에 말로만 요청해, 1주차에 플레이 가능한 게임 2개(테트리스, 노아의 방주 짝 태우기)를 만들고 인터넷에 배포까지 했다.

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

• 도구: 클로드 코드(바이브코딩). 코드는 한 줄도 안 침

• 잘 알려진 게임(테트리스)은 "만들어줘" 한 줄이면 나온다 — 진짜였다

• 게임의 완성도는 "이 부분 이렇게 고쳐줘"를 반복하며 만들어진다 (줄삭제 연출을 3~4번 다듬음)

• 원하는 연출은 구체적인 말로 묘사할수록 잘 나온다 ("번쩍 말고 반짝반짝 하다 스르륵")

• "더 게임답게 없을까?" 한마디로 밋밋한 게임이 확 살아난다 (노아: 짝맞추기 → 홍수 액션으로 재설계)

• 만든 건 Vercel로 배포해서 링크로 누구나 플레이 (코딩 몰라도 배포까지 됨)

🎯 이런 분들께 도움돼요

• 코딩 몰라도 바이브코딩으로 게임 만들어보고 싶은 비개발자 입문자

• 같은 지피터스 게임바이브코딩 스터디원

• "나도 게임 하나 만들어볼까" 첫발이 궁금한 사람

😫 문제 상황 (Before)

"게임으로 웹개발을 배운다"는 스터디에 들어왔다. 게임은 한 번도 만들어본 적 없고, 코드도 모른다. 과연 내가 만들 수 있을까 — 반신반의로 시작했다.

🛠️ 사용한 도구

• 도구: 클로드 코드 (Claude Code) — 터미널에서 말로 요청하는 바이브코딩

• 모델: Claude Opus 4.8

• 특이사항: 소스코드는 직접 한 줄도 안 씀. 전부 "이렇게 만들어줘 / 이건 이렇게 고쳐줘"로 진행

🔧 게임 만들기 스텝

① 첫 게임 — "안녕하세요 페이지"에서 테트리스까지

강의대로 제일 쉬운 것부터 감을 잡았다. "안녕하세요 웹페이지 만들어줘" → 즉시. "계산기 만들어줘" → 뚝딱. 그리고:

테트리스 만들어줘

정말 한 줄로 나왔다. 블록이 떨어지고, 회전하고, 줄이 지워지고, 점수가 오르는 게임이. 강사님이 "AI한테는 안녕 페이지나 테트리스나 난이도가 비슷하다"고 한 말이 진짜였다. — 첫 성공 경험.

② 테트리스 다듬기 — '맛'은 여기서부터

해보니 재밌긴 한데 밋밋했다. 여기서부터가 진짜였다.

줄삭제 애니메이션이 필요할 것 같고, 게임오버 메세지가 직관적이지 않아

고쳐줬는데 사라지는 게 "뿅" 하고 없어져서 아쉬웠다. 그래서 더 구체적으로:

번쩍 사라지는 게 아니라 반짝반짝 하고 스르륵 없어지면 좋겠는데,
없어진 줄 위에 있는 것들은 내려오는 애니메이션이 있고
그다음에 새 블록이 내려오면 좋겠어

그러자 줄이 반짝반짝 → 스르륵 페이드 → 위 블록이 미끄러져 내려오는 연출로 바뀌었다. 게임오버 화면도 밋밋한 한 줄에서 점수·레벨·🏆최고점수가 담긴 결과 카드로.

💡 여기서 배웠다: 한 번에 완벽하게 안 나온다. "이 부분을 이렇게"를 반복하며 원하는 '맛'을 찾아가는 게 바이브코딩이구나.

③ 두 번째 게임 — 노아의 방주 (짝맞추기에서 '홍수 액션'으로)

성경(창세기)으로 게임을 만들어보고 싶었다. 노아의 방주 = 동물을 두 마리씩 → 처음엔 카드 뒤집는 짝맞추기(메모리 게임)로 만들었다.

노아의 방주 암수 짝맞추기 같은 거 좋다

되긴 됐는데 좀 얌전했다. "더 게임답게 못 할까?" 싶어 물었다.

뒤집기 게임 아니어도 되지 않을까? 아이디어 있을까?
동물들이 몰려와서 암수 정리하는 스토리인가?

이 한마디에서 게임이 확 바뀌었다. "홍수가 차오르는데, 우르르 몰려온 동물 중 같은 동물 2마리를 탭해 방주에 태운다" 는 액션 게임으로 재설계. 여기에 디테일을 덧붙였다:

물에 이미 잠긴 동물은 선택 못 하게 하자.
방주는 물을 따라 같이 올라가게 하고, 다 차면 결과 페이지가 나오게.

그러자 — 물이 차오르고, 방주가 물 위로 둥둥 떠오르고, 늦으면 동물이 물에 잠겨 못 구하고(짝 태워 물을 내리면 다시 떠오름!), 물이 꼭대기에 닿으면 결과창이 뜨는 진짜 게임이 됐다.

💡 배운 점: 같은 소재라도 "더 게임답게 없을까?"를 물으면 메카닉이 통째로 바뀐다. 첫 버전(짝맞추기)에 안주하지 않고 물어본 게 신의 한 수. 소재(성경 이야기)는 그대로, 재미는 장르 선택에서 나온다.

✅ 결과 (After)

🎮 직접 플레이 (배포 링크)

• 오락실: https://geekcode-arcade.vercel.app

• 🧱 테트리스: https://geekcode-arcade.vercel.app/tetris.html

• 🚢 노아의 방주: https://geekcode-arcade.vercel.app/noah.html

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 잘 알려진 게임은 한 줄이면 나온다 — 테트리스·계산기는 설명 없이도 완성. 첫 성공 경험용으로 최고

2. "이 부분 이렇게" 반복이 완성도를 만든다 — 특히 애니메이션·연출은 구체적으로 묘사할수록 좋아짐

3. "더 게임답게 없을까?" 라고 물어라 — 밋밋한 게임의 메카닉을 통째로 바꿔준다 (노아: 짝맞추기 → 홍수 액션)

이렇게 하면 안 돼요

1. 막연하게 "예쁘게/재밌게" — "번쩍 말고 반짝반짝 하다 스르륵"처럼 원하는 걸 구체적으로 말해야 원하는 게 나온다

2. 첫 버전에 안주 — 처음 나온 건 초안. "더 재밌게, 더 게임답게"를 계속 물어야 진짜가 나온다

🚀 앞으로의 계획

• 랭킹 시스템 연동 — 게임에 점수 랭킹을 붙여 다른 사람과 겨루기 (다음 주 목표)

• 이미지 더 게임답게 — 지금은 이모지로 임시. 전용 그래픽으로 바꾸고 싶은데, 그래픽은 코딩 도구(클로드 코드)만으론 한계가 있어 이미지 생성 도구를 고민 중

• 매주 게임 하나씩 만들어 오락실 채우기 (창세기 시리즈: 방주 만들기·하와 팩맨·바벨탑·요셉 곡식창고…)

아직 딱 하루 해본 결과물이다. 매주 조금씩 쌓아 나만의 오락실을 채워갈 계획.

📋 재사용 가능한 프롬프트

프롬프트 1: 알려진 게임 만들기

[테트리스] 만들어줘. 키보드랑 모바일 터치 둘 다 되게, 점수랑 최고점수도.
— [ ] 안의 게임 이름을 원하는 걸로 바꾸세요 (갤러그·팩맨·2048 등)

프롬프트 2: 게임 '맛' 다듬기 (구체적으로)

[줄이 지워질 때] 뿅 사라지지 말고 반짝반짝 하다가 스르륵 없어지고,
그다음 위에 있던 것들이 내려오는 애니메이션이 있으면 좋겠어.
— 원하는 연출을 최대한 구체적인 말로 묘사할수록 잘 나옵니다

프롬프트 3: "더 게임답게" 메카닉 재설계

[노아의 방주] 게임인데 지금은 좀 밋밋해. 더 게임답게 만들 아이디어 줘봐.
(뒤집기/짝맞추기 아니어도 됨) 그중 [홍수 피해 동물 태우기] 느낌으로 바꿔줘.