[바이브코딩 체험기] 코딩 없이 '기획력'만으로 스도쿠 웹 게임 만든 썰(1)

요즘 IT 씬에서 제일 핫한 단어, 혹시 들어보셨나요? 바로 '바이브코딩(Vibe Coding)'입니다. 개발자가 직접 코드를 한 줄 한 줄 타이핑하는 대신, AI(LLM)에게 자연어로 "이런 기능 만들어줘", "이 부분 구조를 이렇게 바꿔줘"라고 지시하며 결과물을 만들어내는 새로운 개발 패러다임을 말하죠.
 
글로만 읽어서는 감이 잘 안 오더라고요. "이거 진짜 말만 하면 프로그램이 뚝딱 나온다고? 나도 한번 제대로 경험하고 연습해 봐야겠다!"라는 생각이 들었습니다.
 
그래서 첫 연습 프로젝트로 제미나이를 이용해서 제 블로그 방문자분들이 가볍게 즐길 수 있는 '무설치 웹 스도쿠 게임'을 만들어보기로 했습니다. 아이디어 기획부터 티스토리 배포까지, 저의 좌충우돌 바이브코딩 실전 경험기를 공유합니다. 

 

Step 1. 첫 지시: "스도쿠 게임의 뼈대를 만들어줘"

바이브코딩의 핵심은 '명확한 지시'라고 들었습니다. 처음부터 너무 복잡하게 요구하지 않고, 핵심 기능부터 던져봤습니다.

나의 프롬프트: "웹 게시물에 배포할 수 있는 스도쿠 게임을 HTML/CSS/JS 단일 파일로 만들어줘. 난이도는 상, 중, 하로 나누고 각각 10개의 퍼즐 데이터를 넣어줘."

 
놀랍게도 AI는 단 몇 초 만에 스도쿠의 룰이 적용된 코드를 짜주었습니다. 하지만 결과물은 아주 '날것' 그대로였습니다.
 
[이미지 삽입 포인트 1: 처음 만들어진 날것의 게임 화면 캡처]

 
돌아가긴 하는데, 화면 하나에 모든 게 다 몰려 있어서 '게임'을 한다는 느낌이 전혀 안 살았습니다. 이때 깨달았죠. "아, 바이브코딩은 AI가 다 해주는 게 아니라, 내가 기획자이자 PM이 되어 구조를 설계해 줘야 하는구나!"

 

Step 2. UX 기획자 모드: "화면의 Depth(계층)를 나눠보자"

사용자 경험(UX)을 개선하기 위해 앱처럼 화면이 전환되도록 구조를 다시 잡았습니다. AI에게 화면을 3단계로 나누어 라우팅(Routing) 처리를 해달라고 구체적으로 요구했습니다.

나의 프롬프트: "화면을 3단계로 나눠줘.

1. 메인화면: '즐거운 sdoku' 타이틀과 [상/중/하] 난이도 버튼
2. 스테이지 선택 화면: 1번~10번 게임 선택 버튼과 [홈으로] 버튼
3. 게임 화면: 실제 스도쿠 보드와 [뒤로 가기], [새로고침] 버튼"

찰떡같이 알아들은 AI는 코드를 갈아엎고 화면이 부드럽게 전환되는 로직을 추가해 줬습니다.
[이미지 삽입 포인트 2: 3단계 화면 전환 모습 캡처]

 
 
이제 제법 그럴싸한 웹 앱의 형태를 갖추게 되었습니다.

 

Step 3. 유저 잔존율 높이기: "데이터 영구 저장의 마법"

게임의 형태를 갖추니 욕심이 났습니다. 새로고침하면 제가 깼던 기록이 날아가는 게 아쉬웠거든요. 하지만 서버나 DB를 구축하기엔 일이 너무 커지는 상황이었습니다.

나의 프롬프트: "별도 서버 없이 브라우저 저장소(Local Storage)를 이용해서 사용자가 클리어한 스테이지를 저장해 줘. 그리고 스테이지 선택 화면에 클리어한 번호는 '✔' 스탬프를 찍어줘!"

 
결과는 대성공이었습니다. 클라이언트 브라우저의 저장소를 활용해 서버 비용 0원으로 영구 저장 기능을 구현했습니다.
[이미지 삽입 포인트 3: 스탬프가 찍힌 스테이지 선택 화면]

 
이 영롱한 초록색 체크마크(✔) 하나가 유저들의 수집욕과 클리어 본능을 자극하는 엄청난 요소가 되었습니다.

 

Step 4. 화룡점정: "도파민을 자극하는 디테일 추가"

바이브코딩의 진짜 묘미는 '마이크로 인터랙션'을 추가할 때 빛을 발했습니다. 코드로 짜려면 복잡한 애니메이션 로직들을 말 한마디로 추가할 수 있었죠.

나의 프롬프트: "사람들이 재미를 느끼게 다양한 요소를 듬뿍 넣어줘!

1. 정답을 다 맞추면 폭죽 애니메이션을 터트려줘!

오답을 넣으면 셀이 도리도리(Shake) 흔들리게 해줘.

1. 실시간 타이머와 최고 기록 기능을 넣어줘.
2. 고수들을 위한 '메모 모드(Pencil)' 기능도 추가해!"

 
AI는 외부 라이브러리(canvas-confetti)를 활용해 화려한 폭죽을 구현하고, CSS 애니메이션으로 타격감을 살려냈습니다. 특히 스마트폰에서 버튼을 누를 때 미세하게 진동(Haptic)이 오게 만든 부분은 정말 감탄이 나왔습니다.
📸 [이미지 삽입 포인트 4: 폭죽이 터지는 클리어 화면 & 편의 기능]
 

 

체험 결론: 바이브코딩 시대, 핵심은 '프롬프트'가 아니라 '기획력'이다

단 하루 만에, 텍스트 편집기와 제미나이만 띄워놓고 이 정도 퀄리티의 웹 게임을 만들었습니다. 이번 연습을 통해 느낀 바이브코딩의 본질은 다음과 같습니다.

1. AI는 훌륭한 '손'이지만, '머리'는 여전히 사람의 몫이다. 구조를 어떻게 짤지, 어떤 UX를 줄지 고민하는 기획력이 결과물의 퀄리티를 결정합니다.
2. 에러를 두려워할 필요가 없다. 버그가 나면 "야, 이거 모바일에서 두 번 터치하니까 화면이 커져버리잖아. 막아줘"라고 말하면 끝입니다.
3. 아이디어를 실행하는 비용이 '0'에 수렴한다.

개발 지식이 깊지 않아도, 논리적인 사고방식과 명확한 방향성만 있다면 누구나 자신만의 서비스를 런칭할 수 있는 시대가 진짜로 왔습니다. 생각만 해뒀던 아이디어가 있으신가요? 오늘 당장 AI를 켜고 첫 지시를 내려보세요!
(제가 바이브코딩으로 만든 스도쿠 게임은 다음 글에서 직접 플레이해 보실 수 있습니다. 최고 기록에 도전해 보세요!)