ChatGPT로 만든 HTML 게임이 아이폰에서 실행되지 않았습니다. 웹 주소로 여는 방법, PC 테스트 과정, 스킬·보스를 추가한 v0.2 플레이 소감을 정리했어요.
1편에서 받은 LAST LIGHT v0.1은 HTML 파일 하나에 캐릭터 이동, 자동 공격, 몬스터 추격, 레벨업까지 들어 있다고 했습니다.
그런데 이 파일을 아이폰에서 열어보니 게임이 실행되지 않았습니다. 모바일 게임을 만들어달라고 했는데 정작 모바일에서 안 열린다는 건 전혀 예상하지 못한 일이었어요. 게임 코드에 문제가 있는 건지, 제가 실행 방법을 잘못 안 건지도 처음에는 구분이 되지 않았고요.
이번 글에서는 아이폰에서 막혔던 과정과 웹 주소로 열 수 있게 된 경위, PC에서 한 테스트, 그리고 스킬과 보스를 추가한 v0.2를 플레이해 본 소감을 정리했습니다.
1. 아이폰에 내려받은 ChatGPT HTML 게임이 실행되지 않았다
첫 프로토타입은 설치 프로그램이 아니라 HTML 파일로 받았습니다. ChatGPT는 아이폰에서도 파일을 내려받아 열어볼 수 있다고 안내하면서, 기기나 앱에 따라 실행이 제한될 수 있다고 덧붙였어요.
실제로 해보니 안 됐습니다. 아이폰에 HTML 파일을 다운로드해서 열었는데 게임이 실행되지 않았습니다. ChatGPT에는 이렇게 짧게 보냈어요.
아이폰에서 실행이 안돼
이 대화에서 처음 요청한 ‘모바일 게임’과 실제로 받은 ‘HTML 웹 게임’이 다르다는 걸 알게 됐습니다. HTML과 JavaScript로 만든 게임은 웹브라우저에서 돌아가는 방식이라, 파일을 폰에 저장했다고 앱처럼 바로 실행되는 건 아니에요. 어떤 앱으로 여는지, 파일 접근 환경이 어떤지에 따라서도 동작이 달라질 수 있다고 ChatGPT는 설명했습니다.
다만 구체적인 오류 메시지는 확인하지 못했습니다. 그래서 특정 브라우저 문제라고 단정하기는 어렵습니다.
2. 해결 방법은 웹 주소로 접속하는 것이었다
ChatGPT가 제안한 해결책은 단순했습니다. 게임 파일을 웹서버에 올리고, 아이폰에서 그 주소로 접속하라는 것이었어요. 브라우저가 서버에서 HTML과 JavaScript를 불러와 실행하기 때문에, 파일을 폰에 저장해서 여는 방식과는 구조가 다릅니다.
문제는 게임을 만들던 당시의 저는 이 블로그에 연재 글을 쓰기 전이라 파일을 올려둘 곳이 마땅치 않았다는 점이에요. 다운로드한 HTML 파일만으로는 아이폰에서 실행이 안 됐던 것도 이 때문입니다.
나중에 연재를 쓰면서 1편 본문에 HTML 파일을 첨부했고, 그렇게 만들어진 링크를 아이폰에서 열어보니 게임이 실행됐습니다. 폰에 저장해서 여는 게 아니라 웹 주소로 접속하면 되는 거였어요.
ChatGPT는 워드프레스에 게임을 넣는 플러그인 ZIP 파일도 만들어줬습니다. 다만 이때는 바로 설치하지 않았고, 나중에 쓰게 돼서 그때 이야기하겠습니다.
링크로 열리는 것과 모바일에서 플레이하기 편한 것은 다른 얘기라서, 화면 구성과 터치 조작은 따로 확인할 부분입니다.
3. 먼저 PC에서 테스트하기로 했다
아이폰에서 막힌 상태에서 ChatGPT에 다시 물었습니다.
피시에서 테스트할수 있는 방법은 없어?
PC에서는 게임 엔진이나 다른 프로그램을 설치하지 않아도 HTML 게임을 실행할 수 있다는 답이 돌아왔습니다. 받은 파일을 Chrome이나 Edge로 열면 된다는 거였어요. 당시 받은 파일 이름은 last_light_survival_v0_1.html이었습니다.
PC용 조작법도 같이 안내받았습니다.
| 조작 | 기능 |
|---|---|
| W, A, S, D / 방향키 | 캐릭터 이동 |
| Space 또는 Shift | 대시 |
| 마우스 | 게임 시작, 능력 선택 |
캐릭터를 움직이고, 몬스터가 쫓아오는지 보고, 자동 공격과 경험치 획득, 레벨업이 되는지 확인하는 것이 이 단계의 목표였습니다. 모바일 터치 조작은 미뤄두고 기본 동작이 되는지에만 집중했어요.
4. PC에서는 잘 돌아갔지만 공격이 너무 단순했다
다음 날인 2026년 10월 14일, PC에서 게임을 실행해 본 뒤 ChatGPT에 이렇게 답했습니다.
응 게임은 잘 돌아가. 이제 수정 좀 하자. 일단 공격이 너무 단순해. 스킬이 있으면 좋겠구, 몹을 처치했을때 아이템이 드랍했으면 좋겠어. 그리고 일정 시간마다 정예 몬스터나 보스 몬스터가 나왔으면 좋겠어. 그걸 처치 했을 경우 좋은 아이템이랑 많은 경험치를 줬으면 좋겠어. 일단 이정도 수정할수 있지?
기본 구조만으로는 계속 플레이할 만한 재미가 부족했습니다. 가까운 몬스터를 자동으로 공격하는 것 말고는 할 게 없었으니까요. 그래서 스킬, 아이템 드랍, 일정 시간마다 나오는 정예 몬스터와 보스를 요청했습니다.
놀랐던 건 그다음이에요. 스킬, 아이템 드랍, 보스를 넣어달라고만 했는데 ChatGPT가 구체적인 스킬 종류와 보스 등장 시점, 아이템 구성까지 게임에 맞춰 설계해 왔습니다.
이렇게 받은 것이 LAST LIGHT v0.2입니다. 직접 플레이해 본 솔직한 느낌은 아직 많이 부족하다는 거였어요. 그래도 몇 줄짜리 요청으로 게임이 이만큼 달라지는 걸 보니, 충분한 데이터를 입력해 주면 내가 원하는 게임을 만들 수 있겠다는 생각이 들었습니다. 이때 가능성을 봤고, 그래서 계속 이어갈 수 있었던 것 같아요.
5. 첫 HTML 게임 테스트에서 배운 것
가장 크게 남은 건 제작할 플랫폼과 테스트할 환경을 따로 생각해야 한다는 점입니다. 모바일 게임을 요청했지만 받은 건 웹 게임이었고, 아이폰에서는 내려받은 파일이 실행되지 않았고, 웹 주소로 열 때에야 실행됐어요. 기본 동작은 PC 브라우저에서 먼저 확인했고요.
처음부터 다시 한다면 첫 프롬프트에 실행 환경부터 분명히 적을 것 같습니다. 예를 들면 이런 식입니다.
HTML, CSS, JavaScript로 2D 게임을 만들어줘.
첫 번째 목표는 PC의 Chrome 브라우저에서
정상적으로 실행되는 프로토타입 제작이야.
게임 파일을 제공할 때 다음 내용을 함께 알려줘.
1. HTML 파일 실행 방법
2. 키보드와 마우스 조작 방법
3. 구현한 기능과 미구현 기능
4. 직접 테스트해야 하는 항목
5. 모바일 브라우저에서 예상되는 제약
PC 버전의 기본 동작이 확인된 뒤
아이폰 Safari에 맞는 터치 조작과 화면 구성을
별도 단계에서 개선할 거야.
코드 문법 검사와 실제 플레이 테스트를 구분해줘.당시 쓴 원문이 아니라, 첫 HTML 게임을 만들고 테스트하면서 얻은 경험을 바탕으로 다시 정리한 예시입니다.
기본 동작이 확인되기 전부터 그래픽과 시스템을 계속 얹으면 어디서 문제가 생겼는지 찾기 어려워집니다. 작은 기능부터 확인하고, 잘 돌아가는 버전은 따로 보관하면서 다음 단계로 넘어가는 편이 이후 오류를 잡을 때도 훨씬 편했어요.
6. 이제 게임다운 재미를 채울 차례
아이폰에서는 파일을 내려받아 여는 방식으로는 막혔지만, 웹 주소로 열 수 있다는 걸 알았고, PC에서는 처음부터 잘 돌아갔습니다. 이제 필요한 건 실행 방법이 아니라 게임의 재미를 늘리는 일이었어요.
스킬과 아이템 드랍, 정예 몬스터와 보스를 넣은 v0.2를 아래에서 직접 해볼 수 있습니다. 앞서 말한 것처럼 아직 많이 부족한 버전이니, 완성도보다는 v0.1에서 무엇이 달라졌는지를 보는 용도로 열어봐 주세요.
다음 편: ChatGPT로 로그라이크 게임 만들기 — 스킬·장비·보스 시스템 추가 과정
다음 편에서는 LAST LIGHT v0.2부터 v0.4까지 만들면서 추가한 스킬, 아이템 드랍, 정예 몬스터, 보스, 장비 강화 시스템을 살펴봅니다. 어떤 프롬프트를 입력했고 버전이 바뀔 때마다 무엇이 추가됐는지 대화 기록을 바탕으로 정리할 예정입니다.