[Claude Code] 이모지·무음이던 게임에 "전용 캐릭터·소리·타이틀"을 입혔다 (2주차)
📝 한줄 요약
2주차 과제는 만든 게임을 타이틀 화면 · 이미지 에셋 · 오디오로 발전시키는 것. 이모지에 무음이던 노아의 방주에 스프라이트 애니메이션 + 폭풍우 사운드 + 인트로 연출을 입혀 '진짜 게임' 느낌을 냈다. 여기에 랭킹까지 붙였다. 코드는 여전히 한 줄도 안 침.
바쁘시면 이것만 읽어도 돼요:
2주차 과제 = 게임을 타이틀·이미지·오디오로 발전시키기 (매주 조금씩 발전)
이모지 → 스프라이트 애니메이션 — 사자가 실제로 덮치는 그림을 AI로 만들어 넣음
무음 → 폭풍우가 들리는 게임 — 비·천둥 배경음 + 문 여닫이·동물 소리 효과음 + 음소거 버튼
소리·그림은 CC0 무료 에셋으로 (돈 안 들이고, 출처는 크레딧에 남김)
진입에 "화면을 눌러 폭풍 시작" 인트로를 넣으니 게임 시작이 이벤트가 됨
덤: 게임에 구글 로그인 + 실시간 랭킹까지 붙여 남들과 겨루게 함
🎯 이런 분들께 도움돼요
게임은 만들었는데 이모지·무음이라 허전한 걸 채우고 싶은 비개발자
같은 지피터스 게임바이브코딩 스터디원 (2주차 과제: 타이틀·이미지·오디오)
AI 그림·무료 사운드를 게임에 실제로 붙이는 법이 궁금한 사람
📌 2주차 과제가 뭐였나
스터디장(토비) 안내: 매주 게임을 조금씩 발전시키자. 이번 주는 ① 타이틀 화면 ② 이미지 에셋 ③ 오디오를 붙이는 게 목표.
(이미지는 코덱스/힉스필드 이미지젠, 무료 에셋은 Kenney·itch.io, 효과음 일레븐랩스·freesound, BGM 수노 등)
😫 문제 상황 (Before)
지난주 노아의 방주는 동작은 되지만 허전했다. 캐릭터는 이모지(🦁🐘), 소리는 아예 없고, 게임 시작도 밋밋했다. "게임은 종합예술"이라는데 — 보는 맛·듣는 맛이 없었다.
🛠️ 사용한 도구
도구: 클로드 코드 (Claude Code) — 말로 요청하는 바이브코딩
그래픽: AI 이미지 생성으로 캐릭터 스프라이트 제작 (스프라이트젠 파이프라인)
사운드: CC0 무료 에셋 (CluckFox 비·천둥 / Kenney RPG Audio 효과음 / opengameart 동물 소리)
특이사항: 그림·소리 붙이는 코드 전부 말로만. 직접 친 코드 0줄
🔧 이번 주 만들기 스텝 (과제: 타이틀·이미지·오디오)
① 이미지 에셋 — 이모지를 '움직이는 캐릭터'로
이모지 사자가 성의 없어 보였다. 전용 캐릭터를 원했는데, 게임 코드 도구만으론 그림이 안 나온다. 그래서 AI 이미지 생성으로 사자·기린을 만들고, 한 장이 아니라 여러 컷을 이어 붙인 스프라이트 시트로 만들어 애니메이션을 넣었다.
Open optionsauto
사자가 그냥 이모지야. 실제로 덮치는 그림으로 바꾸자.
연속 동작(웅크림→도약)을 여러 컷으로 만들어서 움직이게 해줘.
그러자 사자가 웅크렸다 덮치는 애니메이션이 게임 안에서 실제로 재생됐다.
💡 배운 점: 그림은 이미지 생성 AI, 붙이는 건 바이브코딩 — 도구를 나눠 쓴다. "한 장"이 아니라 "여러 컷 이어서"라고 해야 움직인다.
② 오디오 — 무음을 '폭풍우가 들리는 게임'으로
가장 크게 바뀐 건 소리였다. 노아 = 홍수 이야기니 비와 천둥이 깔려야 했다.
Open optionsauto
비 내리는 배경음이 계속 깔리고, 가끔 천둥이 치게.
동물 태울 때 선택음, 틀리면 둔탁한 소리, 방문 여닫는 소리도.
소리는 돈 안 드는 무료(CC0) 에셋으로, 음소거 버튼도 넣자.
결과:
폭풍우 배경음이 계속 깔리고 랜덤으로 천둥이 침 (긴장감이 확 삶)
효과음 — 동물 선택음 · 틀림음 · 방문 여닫이 소리
동물 소리 — 닭·소·돼지 등
🔊 음소거 토글 (소리 부담스러운 사람 배려)
소리·그림 출처는
CREDITS.md에 정직하게 표기 (CC0라도 출처 남기기)
💡 배운 점: 소리 하나로 게임이 완전히 달라진다. 무료 CC0 에셋이면 비용 0. 대신 출처(크레딧)는 꼭 남긴다.
③ 타이틀/인트로 — 시작을 '이벤트'로
밋밋하게 바로 시작하지 않고, 진입에 연출을 넣었다.
Open optionsauto
게임 들어오면 바로 시작하지 말고, "화면을 눌러 폭풍 시작"으로
한 번 눌러서 들어가게. 그래야 소리도 켜지고 몰입돼.
"🔊 화면을 눌러 폭풍 시작" 인트로 → 규칙 안내 화면 → 항해 시작. 진입 자체가 하나의 연출이 됐다. (로고형 타이틀 화면은 다음 주 과제로.)
④ (게임 자체도 더 게임답게)
스프라이트·사운드가 살아나니 게임 로직도 밀어붙였다. 포식자(사자)가 덮치는 위협, 방을 골라 배치하는 전략, 낮/밤 사이클을 넣어 "판단하고 긴장하는 게임"으로.
⑤ (덤: 혼자 놀던 게임 → 남들과 겨루기)
구글 로그인 + 실시간 랭킹(Firebase 무료)을 붙이고, 여러 게임 순위를 한곳에서 보는 통합 랭킹 허브를 만들었다. 성경게임들은 교회 지체분 요청으로 만드는 것이라 요청자를 표기하고, 예정작(삼손·홍해 러너·골리앗)을 예고 카 드로 걸었다.
✅ 결과 (After) — 과제 체크
2주차 과제
상태
실제 반영
이미지 에셋
✅
사자·기린 스프라이트 애니메이션 (AI 생성)
오디오
✅
폭풍우 배경음 + 랜덤 천둥 + 효과음 + 동물 소리 + 음소거 (CC0 무료 에셋)
타이틀 화면
✅~
"화면을 눌러 폭풍 시작" 인트로 연출 (로고형은 다음 주)
(덤) 랭킹
✅
구글 로그인 + 실시간 순위 + 통합 랭킹 허브
🎮 직접 플레이 (개발놀이터 스터디 랭킹 연동)
이번 발전작 노아는 지피터스 개발놀이터 랭킹에 점수가 등록됩니다. 로그인하면 순위에 올라가요.
🚢 노아의 방주 (스프라이트+폭풍우 사운드 · 스터디 랭킹): https://geekcode-arcade.vercel.app/noah.html?rank=devplay
🕹 오락실 (전체 허브): https://geekcode-arcade.vercel.app
🧱 테트리스 (1주차작): https://geekcode-arcade.vercel.app/tetris.html
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
그림은 "여러 컷 이어서" — 한 장 말고 연속 동작으로 만들어야 애니메이션이 됨
소리가 가성비 최고 — 배경음+효과음 몇 개로 몰입이 확 오른다. CC0 무료면 비용 0
진입에 연출 한 겹 — "눌러서 시작"이 소리도 켜주고(브라우저 정책) 몰입도 준다
이렇게 하면 안 돼요
그림·소리 출처 안 남기기 — CC0라도 크레딧은 남긴다 (
CREDITS.md)그래픽을 코드 도구에 떠넘기기 — 그림은 이미지 생성 AI 몫. 도구를 나눠 써야 함
🖥️ (덤) 배포 현황 대시보드도 만들었어요
프로젝트가 늘어 어디에 뭘 배포했는지 한눈에 볼 게 필요해, 배포 현황 대시보드를 따로 만들었다.
내 배포 목록을 자동으로 긁어와 카드로 표시 (수동 정리 X)
분류별 필터 (게임 / 사이드 / 외주 / 기타)
검색 + 최근 배포순 정렬
게임 버전을 자동으로 읽어와 표시 (게임을 고치면 대시보드도 저절로 갱신)
🚀 앞으로의 계획
로고형 타이틀 화면 — 로고+배경 레이어 분리(가로·세로 대응)로 제대로
BGM — 수노로 오리지널 배경음악
성경게임 시리즈 확장 — 삼손 · 홍해 러너 · 골리앗 (예고 중)
📋 재사 용 가능한 프롬프트
프롬프트 1: 이모지 → 움직이는 스프라이트
이 캐릭터가 이모지야. 실제 그림으로 바꾸고, 연속 동작(웅크림→도약)을 여러 컷으로 만들어 움직이게 해줘.
프롬프트 2: 게임에 사운드 입히기 (무료)
배경음(비·천둥) 이 계속 깔리고 가끔 천둥, 선택음·틀림음·문소리 효과음, 음소거 버튼도.
소리는 CC0 무료 에셋으로, 출처는 크레딧에 남겨줘.
프롬프트 3: 진입 인트로 연출
게임 들어오면 바로 시작 말고 "화면을 눌러 시작" 한 번 누르게. (소리도 그때 켜지게)
made with Claude Code · 게임바이브코딩 23기 2주차
