바이브 코딩으로 주사위 게임 만들기 — 코드 없이, 글에서 바로 플레이

코딩을 한 줄도 몰라도, 만들고 싶은 걸 사람 말로 설명하면 AI가 대신 코드를 써 줍니다. 요즘 이걸 바이브 코딩이라고 부릅니다. 저는 이 방식으로 작은 주사위 게임을 만들어서, 지금 이 글 안에 넣어 두었습니다. 아래 버튼을 누르면 바로 굴러갑니다.

먼저 한번 해 보세요. 어떻게 만들었는지는 그다음에 이야기하겠습니다.

먼저 굴려 보기

주사위 두 개를 굴려 합을 보여 주는 게임입니다. 7이 나오면 럭키 세븐, 둘 다 1이면 뱀눈, 같은 숫자가 나오면 더블이라고 알려 줍니다. 굴린 횟수와 최고 합도 옆에 쌓입니다.

별거 아닌 것 같아도, 방금 굴린 이 게임이 코드를 직접 짜지 않고 나온 결과물입니다. 이제 어떻게 여기까지 왔는지 순서대로 풀어 보겠습니다. 개발 전체 흐름이 궁금하다면 예전에 쓴 바이브 코딩으로 웹 게임 만들기 글에 기획부터 배포까지 일곱 단계로 정리해 뒀으니 같이 보면 좋습니다. 이 글은 그중 실제로 손을 움직인 부분에 집중합니다.

AI에게 이렇게 말했습니다

바이브 코딩에서 사람이 하는 일은 코드를 외우는 게 아니라, 원하는 걸 분명하게 말하는 것입니다. 저는 처음에 이렇게 시작했습니다.

“웹페이지에 넣을 주사위 게임을 만들어 줘. 주사위 두 개를 굴려서 각 눈을 점으로 보여 주고, 아래에 합계를 표시해. 굴리기 버튼 하나면 돼. 색은 파랑과 청록 계열로 깔끔하게.”

한 번에 완벽하게 나오진 않습니다. 처음 결과는 주사위가 숫자로만 떠서 밋밋했습니다. 그래서 다시 말했습니다.

“숫자 대신 진짜 주사위처럼 점으로 그려 줘. 굴릴 때 잠깐 흔들리는 움직임도 넣어 줘.”

이렇게 큰 틀을 먼저 받고, 나온 걸 보면서 조금씩 고쳐 달라고 하는 편이 훨씬 빠릅니다. 마지막엔 재미 요소를 더했습니다. 7이면 럭키 세븐, 두 개가 같으면 더블이라고 말풍선을 띄워 달라고요. 이 정도 대화 몇 번이면 게임이 완성됩니다.

나온 코드는 생각보다 짧습니다

겁먹을 필요 없습니다. 이 게임의 심장은 딱 두 줄입니다. 주사위 하나를 굴리는 부분이요.

function rollDie() {          // 주사위 하나: 1~6 무작위
  return 1 + Math.floor(Math.random() * 6);
}

function roll() {
  const a = rollDie();
  const b = rollDie();
  showDice(a, b);            // 두 주사위 그림 갱신
  showTotal(a + b);         // 합계 표시
}

컴퓨터가 0과 1 사이의 아무 수나 뽑아 주는 게 Math.random()입니다. 거기에 6을 곱하고 버림을 한 뒤 1을 더하면 1부터 6까지가 됩니다. 주사위 눈을 점으로 그리고 흔들리게 하는 부분이 더 붙어서 실제 코드는 조금 더 길지만, 무작위를 만드는 뼈대는 정말 이게 전부입니다. 나머지는 AI가 알아서 채웁니다.

진짜 어려운 건 코드가 아니라 ‘글 안에서 돌아가게’ 하는 것

사실 이 글에서 제일 애먹은 부분은 게임 자체가 아니라, 그 게임을 블로그 글 안에서 실제로 돌아가게 만드는 일이었습니다. 여기엔 이 블로그를 운영하며 알게 된 함정이 하나 있습니다.

워드프레스는 글 본문에 넣은 자바스크립트를 지웁니다. 정확히는, 관리자가 아닌 계정이 글을 올리면 안전을 위해 <script> 같은 코드를 자동으로 걷어냅니다. 그래서 게임 코드를 글에 그냥 붙여넣으면, 저장은 되는데 실행이 안 됩니다. 조용히 사라지거든요.

해결법은 의외로 깔끔합니다. 게임을 글이 아니라 작은 부품에 담아 두고, 글에는 그 부품을 부르는 이름표 하나만 넣는 겁니다. 워드프레스에서는 이 이름표를 숏코드라고 부릅니다. 저는 게임을 curiogan-dice라는 작은 플러그인에 넣어 두고, 글 본문에는 이렇게 한 줄만 적었습니다.

[curiogan_dice]

글에 저장되는 건 이 글자 그대로입니다. 스크립트가 아니라서 지워지지 않습니다. 그리고 독자가 페이지를 열 때, 플러그인이 그 자리에 게임을 그려 넣습니다. 이 블로그 오른쪽에 있는 ‘오늘의 랜덤 지식’ 돌림판도 똑같은 방식으로 넣었습니다. 방금 위에서 굴린 주사위가 바로 그 이름표가 불러낸 결과입니다.

직접 만들어 볼 때 도움이 될 것들

제가 겪으면서 정리한 몇 가지입니다.

• 애매하게 말하면 애매한 게 나옵니다. “게임 만들어 줘”보다 “주사위 두 개, 굴리기 버튼, 합계 표시”처럼 눈에 보이는 것들을 콕 집어 말하세요.
• 한 번에 다 얻으려 하지 마세요. 큰 틀을 먼저 받고 “버튼을 더 크게”, “도는 시간을 짧게”처럼 조금씩 고치는 게 빠릅니다.
• 이상하면 상황을 구체적으로 알려 주세요. “안 돼요” 대신 “버튼을 빠르게 두 번 누르면 멈추지 않아요”라고 하면 AI가 훨씬 잘 고칩니다.
• 휴대폰에서도 열어 보세요. 방문자 대부분이 휴대폰으로 봅니다. 움직임을 불편해하는 분을 위해 애니메이션을 끄는 설정도 챙기면 좋습니다.

정리하며

주사위 게임 하나에 대단한 기술이 들어간 건 아닙니다. 무작위 두 줄, 그리고 그걸 글 안에서 돌아가게 하는 약간의 요령이 전부입니다. 중요한 건 코딩 실력이 아니라, 만들고 싶은 걸 분명히 말하고 나온 결과를 확인하는 힘입니다. 위의 주사위를 몇 번 더 굴려 보세요. 코드를 한 줄도 안 쓰고 만든 게임이, 지금 여러분 손에서 돌아가고 있습니다.