코딩을 한 줄도 몰라도 프로그램을 만들 수 있는 시대입니다. 만들고 싶은 것을 사람 말로 설명하면, AI가 대신 코드를 써 줍니다. 이렇게 “직접 짜는” 대신 “원하는 것을 설명하고 결과를 다듬어 가는” 방식을 요즘은 바이브코딩이라고 부릅니다.
이 블로그 오른쪽에 있는 ‘오늘의 랜덤 지식’ 돌림판도 그렇게 만들었습니다. 버튼을 누르면 원판이 돌아가 무작위로 글 하나가 뽑히고, 그 글로 바로 이동하는 작은 게임입니다. 이 글에서는 그 게임을 예로 들어, 코딩을 몰라도 AI에게 무엇을, 어떤 순서로 시키면 하나의 게임을 끝까지 완성할 수 있는지 일곱 단계로 정리했습니다.
시작하기 전에 한 가지만 기억하세요. 바이브코딩에서 사람이 하는 일은 코드를 외우는 게 아니라, 원하는 것을 분명하게 설명하고, 나온 결과를 확인하고, 고쳐 달라고 요청하는 것입니다. 이 세 가지만 잘하면 됩니다.
1단계. 기획 — 무엇을 만들지 한 문장으로 정하기
가장 먼저 할 일은 “이게 뭘 하는 것인지”를 한 문장으로 말할 수 있게 만드는 것입니다. 우리 예시는 이렇게 정리됩니다. “버튼을 누르면 돌림판이 돌아가 무작위 글이 뽑히고, 그 글로 바로 이동하는 게임.”
여기에 두 가지를 더 정해 두면 좋습니다. 왜 만드는지(방문자가 새 글을 우연히 만나 재미있게 둘러보게 하려고), 그리고 다 됐다고 볼 기준(돌릴 때마다 다른 글이 나오고, 누르면 그 글로 이동하면 성공)입니다. 이 한 문장과 기준이 뒤에 나오는 모든 단계의 나침반이 됩니다.
2단계. 설계 — 화면과 흐름을 미리 그려 보기
이제 머릿속 아이디어를 눈에 보이게 그려 봅니다. 종이에 대충 그려도 좋고, AI에게 말로 설명해도 됩니다. 정할 것은 세 가지입니다. 어디에 놓을지(사이드바 아래), 무엇이 보일지(제목, 원판, 돌리기 버튼, 결과 링크), 그리고 어떤 순서로 움직일지(버튼 누름 → 원판 회전 → 멈춤 → 뽑힌 글 링크 표시)입니다.
한 가지 더, 이 게임에 필요한 재료도 미리 적어 둡니다. 바로 글 목록입니다. 각 글의 제목과 주소가 있으면 원판을 채울 수 있습니다. 이렇게 화면과 흐름, 필요한 재료를 먼저 그려 두면 AI에게 훨씬 정확하게 시킬 수 있습니다.
3단계. 작업요구서 — AI에게 정확히 설명하기
이 단계가 바이브코딩의 핵심입니다. AI는 설명이 애매하면 엉뚱한 것을 만듭니다. 그래서 원하는 것을 구체적으로 적어 주는 ‘작업요구서’가 필요합니다. 크기, 색, 칸 수, 애니메이션 시간, 멈춘 뒤 보여 줄 것까지 적을수록 결과가 좋아집니다.
예시 지시문: “사이트 사이드바에 넣을 원형 돌림판을 만들어 줘. 글 목록을 칸으로 나누고, ‘돌리기’ 버튼을 누르면 3~4초 돌다가 무작위 칸에서 멈춰. 멈춘 칸의 글 제목과 ‘바로가기’ 링크를 원판 아래에 보여 줘. 색은 파랑과 청록 계열로, 깔끔하게.”
한 번에 완벽하게 적으려고 애쓰지 마세요. 큰 틀을 먼저 요청하고, 나온 결과를 보며 “버튼을 좀 더 크게”, “도는 시간을 조금 짧게”처럼 조금씩 다듬는 편이 훨씬 빠릅니다.
4단계. 프론트엔드 — 눈에 보이는 부분 먼저 만들기
이제 실제로 화면에 보이는 부분을 만듭니다. AI에게 원판 그림, 돌아가는 움직임, 결과 표시를 만들게 합니다. 이때 요령이 있습니다. 진짜 글 목록을 연결하기 전에, 가짜 데이터로 먼저 만들어 달라고 하세요. ‘글 1’, ‘글 2’ 같은 임시 항목으로 원판이 도는 모습을 눈으로 확인하는 것입니다.
확인할 점은 두 가지입니다. 버튼을 누르면 원판이 부드럽게 돌다가 멈추는지, 그리고 위쪽 화살표가 가리키는 칸과 아래에 나오는 결과가 서로 맞는지입니다. 이 부분이 잘 맞으면 게임의 절반은 완성된 셈입니다.
5단계. 백엔드 — 진짜 데이터 연결하기
화면이 잘 도는 것을 확인했다면, 이제 가짜 데이터를 진짜 글 목록으로 바꿉니다. 이 게임에서는 사이트(워드프레스)에서 최신 글의 제목과 주소를 자동으로 가져와 원판에 넣습니다. 이렇게 보이지 않는 곳에서 데이터를 준비해 화면에 넘겨주는 부분을 백엔드라고 부릅니다.
예시 지시문: “이제 가짜 데이터 대신, 사이트의 최신 글 여덟 개를 자동으로 가져와 원판 칸에 넣어 줘. 글이 늘어나면 칸도 자동으로 늘게 해 줘.”
백엔드라고 하면 어렵게 느껴지지만, 초보자는 “무엇을 가져와 어디에 넣는다”는 개념만 알면 충분합니다. 실제 코드는 AI가 씁니다. 우리는 원하는 데이터가 무엇인지, 몇 개를 어떤 순서로 보여 줄지만 정확히 말해 주면 됩니다.
6단계. 검증 — 정말 잘 되는지 확인하기
다 만든 것 같아도, 바로 끝내지 말고 여러 상황에서 확인해야 합니다. 여러 번 돌려서 매번 다른 글이 잘 나오는지, ‘바로가기’를 눌렀을 때 정말 그 글로 이동하는지, 휴대폰 화면에서도 잘 보이는지 살펴봅니다. 화면 움직임을 불편해하는 사람을 위해, 움직임을 줄이는 설정도 챙기면 더 좋습니다.
문제를 발견하면 AI에게 상황을 구체적으로 알려 주는 것이 중요합니다. “안 돼요” 대신 “버튼을 두 번 빠르게 누르면 원판이 멈추지 않아요”처럼 언제, 어떻게 문제가 생기는지 알려 주면 AI가 훨씬 잘 고칩니다.
7단계. 배포 — 실제 사이트에 올리기
마지막은 완성한 게임을 실제 사이트에 올리는 일입니다. 여기서 꼭 지킬 것이 하나 있습니다. 내 컴퓨터에서 잘 됐다고 끝이 아니라, 올린 뒤 실제 주소에서 한 번 더 확인해야 합니다. 환경이 달라 예상 못 한 문제가 나오기도 하니까요.
또 하나, 올리기 전에 되돌릴 방법(백업)을 준비해 두면 마음이 편합니다. 문제가 생겨도 예전 상태로 돌아갈 수 있으니, 겁내지 않고 이것저것 시도해 볼 수 있습니다.
한눈에 보기
| 단계 | 핵심 할 일 | AI에게 이렇게 말하기 |
|---|---|---|
| 1. 기획 | 무엇을 만들지 한 문장으로 | “이런 게임을 만들고 싶어” |
| 2. 설계 | 화면·흐름·필요한 재료 정리 | “이렇게 배치하고 이 순서로 움직여” |
| 3. 작업요구서 | 구체적으로 요구사항 적기 | “크기·색·시간·결과까지 이렇게” |
| 4. 프론트엔드 | 보이는 부분을 가짜 데이터로 | “먼저 임시 데이터로 보여 줘” |
| 5. 백엔드 | 진짜 데이터 연결 | “실제 최신 글을 가져와 넣어 줘” |
| 6. 검증 | 여러 상황에서 확인·수정 | “이럴 때 이렇게 안 돼, 고쳐 줘” |
| 7. 배포 | 올리고 실제 주소에서 재확인 | “올린 뒤 실제 화면도 확인” |
정리하며
바이브코딩에서 가장 중요한 것은 코딩 실력이 아니라, 원하는 것을 분명히 설명하고 결과를 확인하는 힘입니다. 기획, 설계, 작업요구서, 프론트엔드, 백엔드, 검증, 배포. 이 순서만 기억하면 코딩을 몰라도 작은 게임 하나를 처음부터 끝까지 만들어 낼 수 있습니다.
믿기지 않는다면, 지금 이 페이지 오른쪽의 ‘오늘의 랜덤 지식’ 돌림판을 한번 돌려 보세요. 방금 읽은 일곱 단계로 만든 결과물이 바로 그것입니다.