[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 7회 - 반응속도 미니 게임: 게임의 핵심 상태(State) 설계법, 규칙별 예외 체크, 효과음과 최고 기록(랭킹) 시스템 구현

[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 7회 - 반응속도 미니 게임: 게임의 핵심 상태(State) 설계법, 규칙별 예외 체크, 효과음과 최고 기록(랭킹) 시스템 구현

지난 6회에서 우리는 브라우저를 껐다 켜도 데이터가 살아남는 '로컬 저장소(localStorage)'의 강력한 영구 저장 원리를 배웠습니다. 이제 우리는 정적인 웹페이지뿐만 아니라 사용자가 입력한 데이터를 기억하는 실용적인 앱까지 자유자재로 만들 수 있게 되었습니다.

그렇다면 클로드 바이브 코딩으로 찰나의 순간에 승부가 갈리는 긴장감 넘치는 '미니 게임'도 만들 수 있을까요? 당연히 가능합니다!

모임에서 친구들과 밥값 내기를 하거나 잠을 깰 때 가장 인기 있는 게임 중 하나가 바로 '반응속도 테스트 게임'입니다. 빨간색 대기 화면이 언제 바뀔지 두근두근 기다리다가, 화면이 초록색으로 번쩍 바뀌는 순간 번개처럼 클릭해서 내 반사신경(0.001초 단위 밀리초)을 측정하는 게임입니다.

하지만 게임을 만들 때는 계산기나 할 일 앱과 완전히 다른 프로그래밍 사고방식이 필요합니다. 바로 게임이 지금 어떤 단계에 있는지 추적하는 '상태(State)'의 개념입니다.

오늘 7회: 반응속도 미니 게임에서는 문장으로 게임의 흐름을 쪼개는 게임의 핵심 상태(State) 설계법, 초록색이 되기 전에 누르면 실격시키는 규칙별 예외 체크, 그리고 외부 오디오 파일 없이 소리를 내는 효과음과 최고 기록(랭킹) 시스템 구현까지 60분 만에 흥미진진하게 완성해 보겠습니다.

 

1. 반응속도 미니 게임: 오늘 만들 결과물과 60분 실습 준비

오늘 우리가 만들 게임은 단순한 버튼 누르기가 아닙니다. 부정 클릭 방지, 초록색 전환 시 찰진 비프음, 5회 평균 반응속도 등급 판정(프로게이머 vs 일반인), 그리고 내 최고 기록을 저장해 두는 명예의 전당까지 갖춘 완성형 아케이드 웹 게임입니다.

(1) 오늘의 실습 요약표

항목	상세 내용
오늘 만들 결과물	빨강(대기) $\rightarrow$ 초록(클릭!) 전환 시간을 측정하고, 부정 클릭 경고, 비프음 효과음, 5회 평균 등급 판정, 6회 로컬 저장소를 활용한 최고 기록 저장 기능이 포함된 반응속도 미니 게임 웹 앱
소요 시간	약 60분
이번 회차 세팅	추가 설치 및 가입 없음 (Claude(claude.ai)에서 새 대화를 열어 시작)
핵심 실습 3단계	① 게임 규칙을 4대 '상태(State)' 문장으로 먼저 정의해 첫 요청 보내기 $\rightarrow$ ② 규칙별 예외 동작(부정 클릭) 테스트하기 $\rightarrow$ ③ Web Audio API 효과음과 최고 기록 랭킹 추가하기
오늘 깨우칠 핵심 원리	"게임과 동적 앱의 본질은 '상태(State: 대기/준비/신호/결과)'의 전환이다. 규칙을 문장으로 단계별로 쪼개어 쓰면 AI는 버그 없는 완벽한 게임 엔진을 구현한다."

(2) 왜 게임을 만들 때는 '상태(State)'가 가장 중요할까요?

게임 화면의 커다란 네모 박스를 상상해 보세요. 사용자가 박스를 클릭했을 때 어떤 일이 일어나야 할까요?

• 시작 전이라면? $\rightarrow$ "게임을 시작합니다! 빨간 화면으로 전환"
• 아직 빨간색인데 성급하게 눌렀다면? $\rightarrow$ "너무 빨라요! 실격(파울) 처리"
• 초록색으로 바뀌었을 때 눌렀다면? $\rightarrow$ "성공! 0.198초 기록 측정"

똑같은 네모 박스를 클릭했는데도 '지금 게임이 어떤 상태인가'에 따라 컴퓨터가 해야 할 일이 완전히 달라집니다. 프로그래밍에서는 이것을 '상태(State)'라고 부릅니다. 이 상태를 우리말로 명확하게 정의해 주면, 클로드는 아무리 복잡한 게임이라도 엉키지 않고 깔끔하게 코딩해 냅니다.

2. 게임의 핵심 상태(State) 설계법: 대기·준비·신호·결과 4단계 규칙 문장으로 정의하기

클로드에게 단순히 *"반응속도 게임 만들어줘"*라고 하면, 초록색이 몇 초 뒤에 뜨는지, 너무 일찍 누르면 어떻게 되는지 규칙이 모호해져 엉성한 결과물이 나옵니다. 우리가 직접 게임 기획자가 되어 4가지 상태(State)를 한글 문장으로 꼼꼼히 설계해 보겠습니다.

Step 1. 반응속도 게임의 4대 상태 기획표

상태 이름	화면 색상	화면에 보일 안내 문구	사용자가 클릭했을 때의 동작 규칙
1. 대기 (Waiting)	파란색 (Blue)	"클릭해서 테스트를 시작하세요!"	클릭하면 즉시 '2. 준비' 상태로 넘어가고 타이머 작동
2. 준비 (Ready)	빨간색 (Red)	"초록색이 되면 즉시 클릭하세요!"	2초~5초 사이의 무작위(랜덤) 시간 대기. 초록색이 되기 전에 누르면 실격!
3. 신호 (Now!)	초록색 (Green)	"지금 클릭하세요! (CLICK!)"	초록색으로 바뀐 순간부터 클릭할 때까지의 시간(밀리초, ms)을 정밀 측정
4. 결과 (Result)	보라색 (Purple)	"내 반응속도: OOO ms"	측정된 시간 표시 + "다시 도전하려면 클릭하세요" 버튼

이 표를 보면 게임의 처음부터 끝까지 흐름이 한눈에 보입니다! 이 상태 기획을 그대로 담아 클로드에게 첫 번째 요청을 보내보겠습니다.

Step 2. 복사해서 바로 쓰는 반응속도 게임 첫 요청 프롬프트

Claude(claude.ai)에서 [+ 새 채팅]을 누르고, 아래 프롬프트를 복사해 붙여 넣으세요.

[복사해서 붙여 넣을 프롬프트 1 - 반응속도 미니 게임 기본 엔진 제작]

브라우저에서 바로 즐길 수 있는 '반응속도 테스트 미니 게임' 웹 앱을 단일 HTML 파일로 만들어 오른쪽 미리보기에 띄워줘. 모바일과 PC 모두 한 손으로 시원하게 누를 수 있도록 화면 가운데에 커다란 직사각형 터치 패널(최대 폭 500px, 높이 400px) 형태로 디자인해 줘.

[게임의 4대 상태(State) 동작 규칙을 엄격하게 구현해 줘]

1. 대기 상태 (시작 전):
   • 배경색: 차분한 딥 블루(남색)
   • 문구: 큼직한 번개 아이콘(⚡)과 함께 "클릭해서 시작하세요!"
   • 동작: 패널을 클릭하면 즉시 '준비 상태'로 전환.
2. 준비 상태 (대기 중):
   • 배경색: 긴장감 넘치는 선명한 빨간색(Red)
   • 문구: "초록색으로 바뀌면 번개처럼 클릭하세요! 기다리는 중..."
   • 동작: 2초에서 5초 사이의 무작위(랜덤) 시간이 지난 뒤 자동으로 '신호 상태'로 변경.
   • (핵심 얌체 방지 규칙): 초록색으로 바뀌기 전에 빨간 화면을 성급하게 클릭하면, 즉시 주황색 화면으로 바뀌며 "너무 빨랐어요! 초록색이 된 후에 눌러야 합니다. (클릭하여 재도전)"이라는 파울 안내를 띄우고 타이머를 취소해 줘.
3. 신호 상태 (지금이다!):
   • 배경색: 눈에 번쩍 띄는 형광 초록색(Neon Green)
   • 문구: "지금 누르세요! (CLICK NOW!)"
   • 동작: 초록색으로 바뀐 정확한 시각을 기록하고, 사용자가 클릭한 시각과의 차이를 밀리초(1/1000초, ms) 단위로 정밀 계산.
4. 결과 상태 (기록 확인):
   • 배경색: 세련된 다크 퍼플
   • 문구: 이번 측정 시간(예: 234 ms)을 크게 보여주고, 아래에 재도전 안내 문구 표시.

3. 규칙별 예외 체크: 얌체 부정 클릭 방지와 반응속도 등급 판정 검증

오른쪽 미리보기(아티팩트) 창에 커다란 반응속도 패널이 나타났나요?

소프트웨어 테스터가 된 마음으로, 우리가 정한 규칙들이 하나도 빠짐없이 제대로 돌아가는지 2가지 예외 상황을 직접 테스트해 보겠습니다.

테스트 1. 성급한 얌체 클릭 테스트 (파울 처리 확인)

1. 파란색 화면을 클릭해 게임을 시작합니다.
2. 화면이 빨간색으로 바뀌자마자, 초록색이 켜지기도 전에 마우스로 화면을 마구 연타해 보세요!
3. 화면이 즉시 주황색으로 바뀌면서 *"너무 빨랐어요! 초록색이 된 후에 눌러야 합니다"*라는 경고가 뜨나요?
4. 만약 이 규칙이 없다면, 사용자가 빨간 불일 때 마우스를 초당 10번씩 광클하다가 우연히 0.01초 만에 눌리는 치팅(부정행위)이 발생하게 됩니다. 이처럼 '비정상적인 입력'을 사전에 차단하는 예외 처리 습관은 바이브 코딩에서 매우 중요한 디테일입니다.

테스트 2. 정상 반응속도 측정 및 밀리초 단위 확인

1. 다시 화면을 누르고 마음을 가다듬은 뒤 빨간색 화면을 가만히 응시합니다.
2. 2~5초 뒤 화면이 초록색으로 번쩍 바뀌는 순간 마우스를 팍 클릭해 보세요!
3. 보라색 화면으로 바뀌면서 여러분의 반응속도가 210 ms처럼 세 자리 숫자(밀리초)로 표시되나요? (참고로 인간의 평균 시각 반응속도는 약 200~250ms 내외입니다!)

기본 게임 엔진이 완벽하게 검증되었으니, 이제 게임을 오락실 아케이드 기계처럼 짜릿하게 만들어줄 효과음과 랭킹 시스템을 추가해 보겠습니다!

4. 효과음과 최고 기록(랭킹) 시스템 구현: 브라우저 자체 비프음과 5회 평균 명예의 전당

진짜 재미있는 게임이 되려면 두 가지가 더 필요합니다.

1. 귀를 뚫어주는 찰진 효과음: 초록색이 뜰 때 맑은 신호음(삐-!), 너무 일찍 눌렀을 때의 에러음(뿌-우), 성공했을 때의 경쾌한 완료음!
2. 최고 기록 저장 및 등급 시스템: 6회에서 배운 localStorage를 활용해 브라우저를 껐다 켜도 내 역대 최고 기록이 남아있고, 5회 누적 평균을 내어 등급(프로게이머급 vs 맹수급 vs 일반인 vs 거북이)을 매겨주는 시스템입니다.

[비전공자를 위한 핵심 상식: 오디오 파일 없이 소리 내는 법] 보통 효과음을 넣으려면 sound.mp3 같은 음악 파일을 따로 다운받아 연결해야 해서 번거롭고 파일이 깨지기 쉽습니다. 하지만 클로드에게 **"외부 파일 다운로드 없이 브라우저 내장 Web Audio API 신디사이저로 짧은 비프음을 직접 만들어 넣어줘"**라고 말하면, HTML 파일 하나만으로 완벽한 전자 효과음을 자체 생성해 냅니다!

Step 1. 효과음 및 랭킹 시스템 추가 프롬프트 보내기

같은 대화창에서 이어서 아래 프롬프트를 복사해 붙여 넣으세요.

[복사해서 붙여 넣을 프롬프트 2 - Web Audio 효과음과 최고 기록 랭킹 추가]

지금 만든 4대 상태 엔진과 부정 클릭 방지 규칙은 완벽해. 다른 부분은 그대로 두고, 게임의 손맛과 경쟁 요소를 극대화하기 위해 아래 3가지를 추가해 줘.

1. 외부 파일 없는 자체 전자 효과음(Web Audio API) 추가:

• 빨간색에서 초록색으로 팟 바뀌는 순간: 높은 주파수의 맑고 경쾌한 삡(Beep, 880Hz) 신호음 출력
• 부정 클릭(너무 일찍 클릭) 시: 둔탁하고 낮은 경고 부저음(220Hz) 출력
• 정상 클릭 성공 시: 부드러운 화음 딩동댕 소리 출력
• 패널 우측 상단에 작은 스피커 아이콘(🔊 / 🔇)을 두어 언제든 소리를 켜고 끌 수 있게 해줘.

2. 5회 누적 평균 및 등급 판정 시스템:

• 패널 아래에 최근 5회의 측정 기록을 동그란 칩 형태로 보여줘 (예: 1회: 215ms, 2회: 198ms...).
• 5회를 모두 완료하면 폭죽 애니메이션과 함께 5회 평균 시간을 계산하고 재미있는 등급을 매겨줘:
  • 180ms 미만: ⚡ "빛의 속도! 프로게이머급 반사신경"
  • 180ms ~ 230ms: 🐆 "날렵한 치타급! 상위 10% 반사신경"
  • 231ms ~ 290ms: 🏃 "건강하고 준수한 일반인 수준"
  • 291ms 이상: 🐢 "아직 잠이 덜 깬 거북이! 커피 한 잔 마시고 오세요"

3. 역대 최고 기록(Personal Best) 영구 보존:

• 6회에서 배운 브라우저 localStorage를 사용해서, 지금까지 기록한 역대 최단 반응속도(예: 🏆 내 최고 기록: 185 ms)를 패널 맨 위에 금빛 트로피와 함께 영구 표시해 줘.
• 새로고침을 하거나 내일 다시 접속해도 내 최고 기록이 유지되게 해줘.

Step 2. 오락실처럼 플레이해 보기 (손맛 체험!)

미리보기 화면이 화려한 아케이드 게임기로 변신했습니다!

1. 소리 들어보기: 시작 버튼을 누르고 대기해 보세요. 초록색으로 변하는 순간 경쾌한 전자 비프음이 울리며 뇌를 깨워줍니다! (소리가 안 들린다면 우측 상단의 스피커 아이콘이 켜져 있는지 확인하세요.)
2. 5회 연속 측정해 보기: 5번 연속으로 측정해 보며 최근 5회 기록 칩이 하나씩 채워지는지 확인하고, 최종 5회 완료 시 내 등급 판정 문구와 폭죽이 터지는지 감상해 보세요.
3. 최고 기록 갱신 테스트: 내 최고 기록이 상단 트로피 옆에 숫자로 박히는지 보고, 브라우저를 새로고침(F5)해도 그 트로피 숫자가 사라지지 않고 남아있는지 확인합니다.

완성된 게임은 [다운로드] 버튼을 눌러 reaction_game.html로 저장해 두세요. 주변 동료나 친구들에게 보내서 반응속도 밥값 내기 배틀을 열기에도 최고의 인싸 아이템이 됩니다!

5. 7회 핵심 원리 정리 및 다음 회차 예고: 상태(State)를 문장으로 나누면 모든 게임을 만들 수 있다

오늘 60분 동안 여러분은 단순한 웹 폼을 넘어, 찰나의 타이밍과 소리, 데이터 저장까지 결합된 완전한 인터랙티브 웹 게임을 내 손으로 완성하셨습니다.

(1) 오늘 배운 것 3줄 요약

1. 상태(State)의 마법: 게임이나 복잡한 앱을 만들 때는 화면 색상보다 ① 지금 무슨 상태인지(대기/준비/신호/결과), ② 각 상태에서 사용자가 클릭하면 무슨 일이 일어나는지 상태 전환 규칙을 문장으로 쪼개어 주어야 합니다.
2. 부정 클릭(얌체) 예외 처리: 사용자가 정상적인 순서대로만 행동할 것이라 믿지 말고, 준비 단계에서 미리 누르는 등의 예외 행동을 차단하는 안전장치를 설계해야 견고한 프로그램이 됩니다.
3. Web Audio API의 가성비: 무거운 음악 파일을 따로 다운로드해 연결하지 않아도, 브라우저 자체의 주파수 합성 기술을 쓰면 단일 HTML 파일 하나로 풍성한 효과음을 구현할 수 있습니다.

(2) 7회 완료 셀프 체크리스트

오늘 실습을 성공적으로 마쳤는지 체크해 보세요.

• [x] 대기 $\rightarrow$ 준비 $\rightarrow$ 신호 $\rightarrow$ 결과 4단계 상태 규칙을 문장으로 정의해 반응속도 게임을 만들었다.
• [x] 빨간색 준비 화면에서 성급하게 클릭했을 때 실격(파울) 안내가 제대로 뜨는지 확인했다.
• [x] 초록색 전환 시 효과음이 울리고, 5회 평균 등급 판정과 로컬 스토리지 최고 기록이 유지되는 것을 확인했다.

(3) 다음 8회 예고: 일부러 망가뜨리고 고치기 + 초급 졸업 과제

축하합니다! 1회 자기소개 페이지부터 7회 반응속도 미니 게임까지, 여러분은 설치 0개, 브라우저 채팅창 하나만으로 웹사이트, 계산기, 데이터 차트, 영구 저장 앱, 게임까지 모두 섭렵하셨습니다.

하지만 실전 바이브 코딩을 하다 보면 언젠가 반드시 맞닥뜨리는 공포의 순간이 있습니다. "코드가 꼬여서 화면이 새하얗게 멈춰버렸어요!", "클로드한테 고쳐달라고 했더니 오히려 엉뚱한 곳을 망가뜨렸어요!"

다음 8회 [일부러 망가뜨리고 고치기 + 초급 졸업 과제]에서는 초급편의 마지막 시간으로, 멀쩡한 앱을 일부러 고장 내보고 '기대한 동작 / 실제 동작 / 재현 방법' 3단계 문제 전달 공식으로 완벽하게 수리하는 특급 디버깅 노하우를 배웁니다! 그리고 1~7회에서 배운 모든 무기를 총동원해 나만의 생활 밀착형 도구를 하나 완성하는 초급 졸업 과제에 도전해 보겠습니다!