AI로 게임 만들기, 만든 다음엔? HTML 파일 하나로 바로 플레이시키는 법

AI에게 "간단한 게임 만들어줘"라고 하면 요즘은 꽤 그럴듯한 게임이 나옵니다. 그런데 막상 만들고 나면 이런 질문이 남습니다.

"이걸 친구한테 어떻게 보여주지?"

배포하려면 GitHub 계정, 저장소, 호스팅 설정 같은 단계가 줄줄이 나옵니다. 처음 만들어 본 사람, 특히 학생에게는 게임을 만드는 것보다 이게 더 어렵습니다. 이 글은 그 단계를 건너뛰는 방법을 정리한 기록입니다. 핵심은 하나입니다. 게임을 HTML 파일 하나로 만들면, 그 파일 하나만 올려도 됩니다.

AI가 만든 게임은 대부분 이미 "파일 하나"입니다

ChatGPT·Claude·Gemini에게 웹게임을 부탁하면, 특별히 다른 요청을 하지 않는 한 보통 이런 형태로 나옵니다.

• <!doctype html>로 시작하는 HTML 문서 하나
• 그 안에 화면 모양(CSS)과 게임 동작(JavaScript)이 같이 들어 있음
• 그림은 이미지 파일 대신 <canvas>에 코드로 그림

이 파일을 index.html 같은 이름으로 저장하고 더블클릭하면 브라우저에서 바로 게임이 실행됩니다. 즉 게임은 이미 완성돼 있고, 남은 건 다른 사람이 열 수 있는 곳에 두는 일뿐입니다.

문제가 생기는 건 게임이 여러 파일로 쪼개질 때입니다. images/cat.png, sound/jump.mp3처럼 따로 있는 파일을 불러오는 게임은 HTML 하나만 옮기면 그림과 소리가 빠집니다. 그래서 처음부터 "한 파일"로 만들게 하는 게 가장 편합니다.

AI에게 처음부터 "한 파일 게임"으로 요청하는 문장

게임을 부탁할 때 아래 조건을 같이 붙이면 됩니다. 그대로 복사해 써도 됩니다.

웹브라우저에서 하는 게임을 만들어줘. 조건:
- index.html 파일 하나로 만들어. CSS와 JavaScript는 전부 이 파일 안에 넣어.
- 이미지·소리 파일을 따로 불러오지 마. 그림은 canvas로 그리고,
  꼭 필요한 이미지는 data: 주소로 파일 안에 넣어.
- <title>에 게임 제목을 넣고,
  <meta name="viewport" content="width=device-width, initial-scale=1">을 넣어.
- 키보드와 모바일 터치 둘 다로 조작할 수 있게 해 줘.
- 화면 크기가 바뀌어도 게임 화면이 잘리지 않게 해 줘.

이미 여러 파일로 만든 게임이 있다면 이렇게 말하면 됩니다.

지금 게임을 index.html 파일 하나로 합쳐줘.
이미지와 소리는 data: 주소로 파일 안에 넣고, 큰 이미지는 크기를 줄여줘.

data: 주소는 이미지를 글자로 바꿔 파일 안에 넣는 방식입니다. 편하지만 원본보다 용량이 3분의 1쯤 커집니다(base64 인코딩 특성). 사진처럼 큰 이미지를 여러 장 넣으면 파일이 금방 무거워지니, 줄여 달라고 같이 말하는 게 좋습니다.

올리기 전 점검표

파일을 올리기 전에 이 다섯 가지만 확인하세요.

1. 더블클릭해서 끝까지 해 봤다. 시작 화면만 보지 말고 게임 오버·다시 하기까지.
2. <title>이 게임 제목이다. 목록 카드와 공유 미리보기에 그대로 쓰입니다.
3. 휴대폰에서도 조작된다. 방향키만 받는 게임은 휴대폰에서 아무것도 못 합니다. 터치 버튼이나 화면 탭 조작이 있는지 확인하세요.
4. 다른 파일을 불러오지 않는다. 파일을 메모장으로 열어 src="나 href=" 뒤에 images/…, ./sound/… 같은 내 컴퓨터 경로가 있으면 그 파일은 같이 안 올라갑니다. https://로 시작하는 외부 주소(예: 공개 CDN의 게임 라이브러리)는 괜찮습니다.
5. 남의 캐릭터·그림·음악을 허락 없이 쓰지 않았다. AI가 만든 게임이라도 유명 캐릭터 이름이나 이미지를 넣으면 저작권 문제가 생깁니다.

파일 하나로 바로 플레이시키기 — saaskr 게임

saaskr 게임(game.saaskr.com)은 이렇게 만든 HTML 파일을 그대로 올리면 사이트 안에서 바로 플레이되는 곳입니다. 저희가 이 문제를 겪는 사람이 많다고 보고 만들었습니다.

• 배포·GitHub이 필요 없습니다. 등록 페이지에서 HTML 파일을 끌어다 놓으면 끝입니다.
• 회원가입·이메일·사업자등록을 받지 않습니다. 닉네임 하나로 올리고, 등록할 때 한 번 주는 관리 키로 수정·숨기기를 합니다. 개인정보를 받지 않아서 초등학생도 올릴 수 있습니다.
• 올리기 전에 미리 해 볼 수 있습니다. 파일을 올리면 등록 전에 "미리 해보기"로 실제로 돌아가는지 확인합니다.
• 다른 파일을 불러오는 HTML이면 알려 줍니다. 위 점검표 4번에 걸리는 파일은 경고가 뜹니다.
• 한도는 파일 하나, 4MB까지입니다. 폴더나 코드 저장소는 받지 않습니다. 대부분의 AI 게임은 수십 KB에서 1MB 안쪽이라 넉넉합니다.

올린 게임에는 게임 페이지가 하나 생기고, 그 주소를 친구에게 보내면 됩니다. 플레이 수와 응원이 쌓이고, 매달 투표 1위 게임은 메인 배너에 걸립니다.

정보를 직접 채우기 귀찮다면 등록 페이지의 "폼 대신 AI에게 맡기기" 문구를 복사해 게임을 만든 AI에게 붙여넣으세요. AI가 게임 코드를 읽고 제목·소개·장르·조작법을 채운 뒤, 올리기 전에 확인을 받습니다. Claude Code처럼 명령을 실행할 수 있는 AI는 등록까지 직접 해 주고, 웹 채팅 AI는 내용을 정리해 주면 사람이 붙여넣어 올리면 됩니다.

이미 Vercel·Netlify 같은 곳에 배포한 주소가 있다면 그 주소로도 올릴 수 있습니다. 다만 그 사이트가 "다른 사이트 안에서 열기"를 막아 두면 새 창으로 열립니다. HTML 파일로 올린 게임은 항상 페이지 안에서 바로 플레이됩니다.

자주 막히는 지점

파일을 열었더니 하얀 화면만 나와요. 대부분 JavaScript 오류입니다. 브라우저에서 F12를 눌러 콘솔의 빨간 글씨를 복사해 AI에게 그대로 보여주면 대개 고쳐 줍니다.

내 컴퓨터에서는 되는데 올리니까 그림이 없어요. 점검표 4번입니다. 이미지 파일을 따로 불러오고 있습니다. "하나의 HTML로 합쳐줘"라고 요청하세요.

휴대폰에서 화면이 잘려요. viewport 메타 태그가 없거나 게임 화면 크기가 고정돼 있는 경우입니다. "화면 크기에 맞춰 캔버스 크기를 조절해 줘"라고 요청하세요.

저장한 점수가 사라져요. 브라우저 저장소(localStorage)는 기기와 브라우저마다 따로라서, 다른 휴대폰에서 하면 처음부터입니다. 정상입니다.

정리

AI로 게임을 만드는 건 이제 어렵지 않습니다. 남은 장벽은 "보여주기"였고, 그 장벽 대부분은 게임이 여러 파일로 쪼개져서 생깁니다. 처음부터 HTML 파일 하나로 만들게 하고, 그 파일 하나를 올리면 배포 공부 없이 바로 다른 사람이 플레이할 수 있습니다.

AI로 만든 게임이 있다면 saaskr 게임 등록 페이지에서 올려 보세요. 국내 AI 도구는 AI 카테고리에서 운영 상태와 함께 볼 수 있습니다.