VDD 3주차: 절대 색감 게임(Absolute Color Game) 🎨
🎬 3주차 활동 요약
- 제출 기한: 10월 4일(토) 24:00
- 과제: 절대색감 게임 바이브 코딩하기
- GitHub: early-developer-club/color-game-jinyoung
- 배포 주소: https://color-game-jinyoung.netlify.app/
🎮 프로젝트 개요
절대 색감 게임(Absolute Color Game) 은 제한 시간 내에 n×n 색상 그리드에서
‘하나만 다른 색상’을 찾아 점수를 얻는 간단한 웹 게임이다.
게임이 끝나면 점수가 Firebase DB에 저장되어, 이름과 함께 랭킹보드에 표시된다.
- 소요 시간: Gemini와 함께한 단일 페어 프로그래밍 세션
- 기술 스택:
- Frontend: HTML, CSS, JavaScript
- Backend / DB: Firebase Realtime Database
- Deploy: Netlify
🧠 개발 과정 (프롬프트 & 처리 내역)
Gemini CLI와의 대화 기반으로 게임이 점점 발전해갔다.
아래는 주요 프롬프트 흐름과 AI가 처리한 작업 요약이다.
1️⃣ 초기 설계
절대 색감 게임을 만들려고 해. Netlify를 통해 간단한 배포를 진행해볼 예정이야.
게임 정보를 저장해서 게임이 끝난 후 진행해 본 사용자들의 데이터를 바탕으로 랭킹을 보여주는 기능도 있으면 좋을 것 같아.
- Gemini가
HTML/CSS/JS + Firebase + Netlify스택을 제안하고 전체 개발 계획을 설계.
2️⃣ 기본 구조 생성
응 동의해.
- 프로젝트 폴더 구조 및 기본 파일(
index.html,style.css,script.js) 생성. - 초기 버전의 색상 찾기 로직 구현.
3️⃣ 데이터베이스 연동
(Firebase 설정 객체 제공)
- Firebase SDK 추가 및
saveScore,fetchRanking함수 구현.
4️⃣ README 및 보안 강화
(DB 정보 마스킹 요청)
README.md생성 및 Firebase 설정 정보 마스킹 처리.
5️⃣ 게임 규칙 개선
... n×n 형태로 시작한 뒤 1개의 다른 색상을 찾는 방식으로 진행해도 좋을 것 같아.
30초 안에 가장 많은 점수를 획득하는 것으로 하자.
- 타이머 기능, 난이도 증가 로직, 보너스/패널티 설계 추가.
6️⃣ UI/UX 수정
웅 동의해 수정해줘.
index.html/style.css/script.js전면 수정.- 동적 그리드 구성 및 타이머 시각화 추가.
7️⃣ 음악 및 몰입감 추가
시간 차감이 좋을 것 같아. 긴장감을 높이기 위해 배경음악도 추가할 수 있을까?
- 오답 시 2초 차감 로직 추가.
- 배경음악 기능 구현 (
background_music.mp3, loop 재생).
8️⃣ 최종 문서화
README.md 파일에 모든 프롬프트와 처리 내용을 업데이트해줘.
- 전체 개발 이력 및 규칙을 정리한 README 완성.
💡 인상 깊었던 포인트
“AI가 만든 코드를 그대로 사용하는 것이 아니라,
내가 원하는 방향으로 ‘조율하고 발전시키는 과정’이 바이브코딩의 진짜 핵심이다.”
Gemini CLI는 단순한 코드 생성의 역할이 아니라 개발의 전 과정을 함께 설계·수정·기록할 수 있는 협업 파트너로 느껴졌다.
다른 팀원들이 진행한 프로젝트를 봤을 때, Claude.md를 통해
⚙️ 어려웠던 점
- 배포까지의 과정은 혼자서 해본 적이 처음이었다. 관련된 지식이 없기 때문에 시간이 조금 소요되었지만, 핵심 개념을 갖고 있는 사람이 바이브 코딩을 사용한다면 엄청난 무기가 될 수 있을 것 같다.
🧩 이번 주 소감
이번 주는 단순한 실습이 아니라 AI와 함께 하나의 웹서비스를 완성한 경험이었다.
코드를 자동으로 생성하는 데서 그치지 않고,
요구사항 설계 → 구현 → 테스트 → 배포 → 문서화의 전 단계를
AI와 대화로 완성했다는 점이 인상 깊었다.
AI와 함께한 이 과정은 “바이브코딩(Vibe Coding)”이라는 개념을
가장 실감 나게 보여준 시간이었다.
다음 주에는 배포된 게임의 개선 아이디어나 기능 확장을 시도해볼 예정이다.
