바이브게임 커뮤니티

바이브코딩으로 웹 게임 만드는 법

바이브게임가이드, 2026년 9월 25일

바이브코딩은 만들고 싶은 것을 AI에게 말로 설명하고, AI가 쓴 코드를 실행해 보면서 "여기가 이상해, 이렇게 고쳐 줘"라고 다시 말하는 방식으로 프로그램을 만드는 방법이에요. 코드를 한 줄도 직접 쓰지 않아도 되고, 필요한 건 무엇을 만들지 정하는 감각과 끝까지 해 보는 끈기예요.

게임은 바이브코딩으로 시작하기 가장 좋은 주제예요. 결과가 바로 눈에 보이고, 한 판 해 보면 무엇을 고칠지 금방 알 수 있거든요. 이 글은 코딩을 처음 하는 사람이 하룻저녁 안에 웹에서 열리는 첫 게임을 만들고, 다른 사람에게 플레이를 받아 보는 데까지를 순서대로 정리했어요.

1. 아이디어는 버튼 하나로 시작해요

처음부터 큰 게임을 만들면 중간에 길을 잃기 쉬워요. 조작 버튼이 딱 하나이고, 한 판이 30초 안에 끝나는 게임으로 시작하세요. 점프로 장애물을 넘는 게임, 움직이는 블록을 제때 내려놓는 게임, 떨어지는 것을 받는 게임처럼요. 규칙을 한 문장으로 말할 수 있으면 좋은 아이디어예요.

바이브게임의 이달의 게임잼 주제도 "버튼 하나로 만드는 게임"이에요. 주제가 정해져 있으면 고민이 줄어요.

2. AI 코딩 도구를 하나 고르세요

대화하면서 파일을 직접 만들고 고쳐 주는 도구가 편해요. Claude Code, Cursor, OpenAI Codex 같은 도구가 여기에 해당해요. 채팅형 AI(ChatGPT, Claude 웹)에 코드를 받아서 파일로 저장해도 되지만, 고칠 때마다 붙여 넣어야 해서 번거로워요. 어떤 도구든 "HTML 파일 하나로 만들어 줘"라고 하면 설치할 것이 거의 없어요.

3. 첫 프롬프트는 규칙과 끝나는 조건까지

AI에게는 규칙, 조작, 끝나는 조건, 화면 크기를 한 번에 알려 주세요. 빠진 부분이 있으면 AI가 마음대로 채우거든요.

이렇게 부탁해 보세요

HTML 파일 하나로 브라우저에서 바로 열리는 게임을 만들어줘. 스페이스바나 화면 탭 하나로만 조작하고, 고양이가 지붕 위를 달리다 점프로 굴뚝을 넘어. 굴뚝에 부딪히면 끝나고 달린 거리를 점수로 보여줘. 끝나면 다시 하기 버튼이 나오게. 모바일 세로 화면에서도 잘 보이게 해줘.

4. 한 판 해 보고, 느낀 그대로 고쳐 달라고 하세요

만들어진 파일을 브라우저로 열어 직접 해 보세요. 그리고 코드 말고 느낌을 말하면 돼요. "점프가 너무 둔해", "굴뚝이 너무 촘촘해서 억울해", "시간이 지날수록 조금씩 빨라지게 해줘"처럼요. 한 번에 한두 가지씩 고치면 무엇이 좋아졌는지 알기 쉬워요.

게임의 첫 화면에 주인공과 첫 장애물이 함께 보이게 해 달라고 하세요. 처음 온 사람이 설명 없이도 무엇을 할지 알 수 있고, 그 화면이 그대로 게임의 표지가 돼요.

5. 웹에 올려서 주소를 만드세요

다른 사람이 플레이하려면 인터넷 주소가 필요해요. HTML 파일 하나라면 무료로 올릴 곳이 많아요.

어디에 올릴지 모르겠으면 AI에게 "이 게임을 무료로 웹에 올리는 방법을 순서대로 알려줘"라고 물어보세요.

6. 바이브게임에 첫 출시를 해 보세요

바이브게임은 데모만 있어도 첫 출시를 할 수 있는 곳이에요. 게임 올리기에서 게임 주소와 첫 화면 캡처 한 장을 올리면 플레이 피드에 들어가고, 다른 사람들이 바로 한 판 해 보고 하트와 댓글을 남겨요. 심사단이 직접 플레이하고 첫인상, 손맛, 중독성, 때깔, 신박함 다섯 가지로 점수도 매겨 줘요. 개발 중인 게임은 모두 무료예요.

7. 자주 막히는 문제

코딩을 전혀 몰라도 게임을 만들 수 있나요?
네. 규칙을 말로 설명하고, 해 보고, 느낀 대로 고쳐 달라고 하는 것을 반복하면 돼요. 버튼 하나로 조작하는 짧은 게임이면 하룻저녁에 첫 판을 할 수 있어요.
다른 사이트 안에서 열면 소리가 안 나요.
브라우저는 사람이 화면을 한 번 누르기 전에는 소리를 막아요. "시작 버튼을 누를 때 AudioContext를 만들거나 resume 해서 소리를 켜줘"라고 부탁하세요.
충돌 판정이 억울하다는 말을 들어요.
충돌 판정을 보이는 그림보다 조금 작게 잡으면 아슬아슬하게 피했다고 느껴져요. "플레이어와 장애물의 충돌 판정을 그림보다 가로세로 4px씩 작게 해줘"라고 해 보세요.
휴대폰에서 터치가 안 먹혀요.
마우스 클릭만 받게 만들어진 경우가 많아요. "마우스와 터치를 모두 받도록 pointer 이벤트로 바꿔 주고, 화면을 누를 때 페이지가 스크롤되지 않게 해줘"라고 부탁하세요.
바이브게임 안에서 게임이 안 열리고 새 탭으로만 열려요.
올린 사이트가 다른 사이트 안에서 열리지 않게 막아 둔 경우예요(X-Frame-Options 설정). 호스팅 설정에서 이 헤더를 빼면 바이브게임 안에서 바로 플레이돼요. 막혀 있어도 새 탭 버튼으로는 플레이할 수 있어요.
내 게임 올리기 이달의 게임잼 보기 다른 사람 게임 해 보기