테트리스 바이브코딩하기

얻어갈 것

• 테트리스를 직접 바이브코딩하면서 웹, API, 데이터베이스, 라이브러리가 무엇이고 왜 필요한지 파악합니다.

테트리스 게임 소개

이번 챕터에서는 AI와 함께 테트리스 게임을 만들어 봅니다.

테트리스는 네 단계로 키워 갑니다.

1. 브라우저에서 바로 실행되는 게임 — 키보드로 블록을 움직이고, 점수와 시간을 봅니다.
2. 내 컴퓨터에 남는 랭킹 — 게임이 끝나면 이름과 점수를 저장하고, 껐다 켜도 기록이 남습니다.
3. 친구와 공유할 수 있는 랭킹 — 여러 사람이 같은 순위표를 보도록 서버와 데이터 저장소가 필요해집니다.
4. 사운드와 애니메이션 — 라이브러리를 붙여 효과음, 배경음, 시각 효과를 더합니다.

확대

이 흐름이 중요한 이유는 요구사항이 커질수록 필요한 개발 지식도 함께 늘어나기 때문입니다. 처음에는 HTML, CSS, JavaScript만으로도 충분하지만, 랭킹을 공유하려는 순간 API와 데이터베이스가 등장합니다. 사운드나 애니메이션을 붙이려면 라이브러리를 고르고 연결해야 합니다.

왜 개발 지식이 필요한가

AI에게 일을 맡길수록 개발 지식은 오히려 더 중요해집니다. 모든 코드를 직접 외울 필요는 없지만, 원하는 결과를 설명하고 문제가 난 위치를 좁힐 수 있어야 합니다.

• 더 정확하게 요청할 수 있습니다. AI로 원하는 결과를 얻으려면 요청도 구체적이어야 합니다. "랭킹이 안 돼요"보다 "새로고침하면 브라우저에 저장된 랭킹이 사라집니다"가 훨씬 낫습니다. 정확하게 요청하려면 결국 용어와 맥락을 조금 알아야 합니다.
• 문제가 난 위치를 빠르게 좁힐 수 있습니다. 화면 문제인지, 키보드 입력 문제인지, API 문제인지, 데이터베이스 저장 문제인지 흐름을 알아야 합니다. 그래야 AI의 답변을 이해하고, 다음 요청도 빠르게 줄 수 있습니다.

반대로 "안 됨, 고쳐줘"에서 멈추면 AI도 넓게 추측할 수밖에 없습니다. 이 챕터는 프론트엔드, 백엔드, API, 데이터베이스, 라이브러리 같은 단어를 테트리스 프로젝트에 붙여서 익히는 구간입니다.

실습 준비

이전에 만들었던 실습 폴더로 들어갑니다. 아직 만들지 않았다면 터미널 사용해 보기 레슨을 참고해 주세요.

$cd ~/vc-class/vibe-tetris  # 테트리스 프로젝트 폴더로 이동
$code .  # VS Code로 폴더 열기

code 명령어가 안 된다면 VS Code를 직접 열고 vibe-tetris 폴더를 선택해도 됩니다. 중요한 건 AI가 작업할 폴더를 하나 준비하는 것입니다.

1단계: 브라우저에서 실행되는 테트리스

먼저 가장 단순한 목표부터 시작합니다. 내 컴퓨터에서 바로 실행할 수 있고, 키보드로 조작할 수 있는 테트리스를 만들어 달라고 요청합니다.

브라우저에서 할 수 있는 테트리스 게임 만들어줘.
내 컴퓨터에서 바로 실행해서 플레이할 수 있게 해줘.
키보드로 기본 동작을 하게 해주고, 우측에 다음 블록을 미리 보여주고, 점수와 시간도 보여줘.

2단계: 내 컴퓨터에 남는 랭킹

다음은 점수 저장입니다. 처음에는 친구들과 공유되는 서버까지 가지 않아도 됩니다. 내 브라우저에 기록이 남는 정도만으로도 "데이터를 저장한다"는 감각을 잡을 수 있습니다.

게임이 끝나면 이름을 입력받고, 그 점수를 저장해줘.
그리고 지금까지 나온 점수들 중 상위 10개를 순위표로 보여줘.
게임을 껐다 켜도 점수가 그대로 남아있어야 해.

여기서 AI는 보통 브라우저의 저장 기능을 사용할 가능성이 큽니다. 이 단계에서는 그걸로 충분합니다. 아직 "모든 사람이 같은 랭킹을 본다"는 요구는 넣지 않았기 때문입니다.

3단계: 친구와 공유하는 랭킹

이제 요구사항이 바뀝니다. 내 컴퓨터에만 남는 점수가 아니라, 친구들이 접속해도 같은 순위표를 봐야 합니다.

이 순간부터 프론트엔드만으로는 부족합니다. 점수를 한곳에 모으는 서버나 데이터베이스가 필요해집니다.

이 게임을 내 친구들한테 링크로 공유해서 같이 하고 싶어.
순위표는 모두가 같은 걸 보도록, 누가 어디서 접속하든 점수가 한곳에 모이게 해줘.
순위표가 있고, 이름을 입력해서 게임을 시작하게 해줘.
(우선 개발 환경에서만 동작하도록 하자)

여기서 에이전트가 작업을 수행하면서 백엔드, API, 데이터베이스 등의 용어를 이야기할 겁니다.

4단계: 사운드와 애니메이션

마지막으로 게임을 조금 더 게임답게 만듭니다. 효과음, 배경음, 줄 제거 애니메이션을 붙이면서 라이브러리라는 개념을 만납니다.

적절한 오디오 라이브러리를 사용해 게임에 효과음을 넣어줘.
블록이 바닥에 닿을 때, 줄이 사라질 때, 게임 오버될 때 각각 다른 소리가 나게.
줄이 사라질 때 번쩍이거나 부서지는 애니메이션도 넣어줘. 배경 음악도 하나 깔아주고, 음소거 버튼도 만들어줘.

라이브러리는 직접 전부 만들지 않고 남이 만든 코드를 가져와 쓰는 방식입니다.

결과를 볼 때의 기준

각 단계가 끝날 때마다 아래 세 가지를 확인합니다.

1. 실행되는가 — 안내된 명령어로 실제 게임이 켜지는지 봅니다.
2. 요구사항을 만족하는가 — 점수, 랭킹, 입력, 사운드처럼 요청한 기능이 동작하는지 봅니다.
3. 어떻게 변경되었는가 — 상세한 변경 내용까지는 몰라도 변경된 큰 흐름에 대해서 이해합니다.

실패해도 괜찮습니다. 중요한 건 실패를 보고 다시 요청하는 감각입니다. "안 됨"에서 멈추지 않고, "어떤 단계에서 어떤 증상이 났는지"를 붙여서 다시 프롬프트를 주면 됩니다.

마무리

이 레슨에서는 테트리스 실습의 전체 흐름을 잡았습니다. 처음에는 브라우저에서 실행되는 작은 게임으로 시작하고, 점수 저장, 공유 랭킹, 사운드와 애니메이션을 붙이며 요구사항을 키워 갑니다.

다음 레슨부터는 이 결과물을 뜯어보면서 개발 지식을 하나씩 붙입니다. 먼저 우리가 만든 게임이 어떤 언어와 파일로 이루어져 있고, 소프트웨어가 어떻게 실행되는지 살펴봅니다.