[AI 코딩 강의 #05] 내 게임을 세상에 공개하기: 모바일 최적화와 무료 웹 배포

🌍 이제 내 게임을 친구들에게 자랑할 시간입니다!

컴퓨터 폴더 속에만 있던 index.html 파일을 이제 인터넷 세상으로 꺼낼 차례입니다. 클릭 한 번으로 친구가 내 게임에 접속하고, 지하철에서도 스마트폰으로 플레이할 수 있다면 얼마나 멋질까요?

오늘 마지막 강의의 핵심 미션입니다.

1. 마우스나 키보드 없이도 조작 가능한 '가상 조이스틱' 만들기
2. 화면 크기에 맞춰 게임 크기가 변하는 '반응형 디자인' 적용
3. GitHub Pages를 이용해 무료로 나만의 게임 사이트 만들기

---

🛠 Step-by-Step: 모바일 최적화와 인터넷 배포

1단계: 스마트폰용 조작 버튼 만들기

스마트폰에는 키보드가 없죠? 화면 하단에 누를 수 있는 방향 버튼을 만들어야 합니다.

1. Cursor에서 index.html을 엽니다.
2. Ctrl + L을 누르고 아래와 같이 요청하세요.
3. "이 게임을 모바일에서도 할 수 있게 화면 하단에 상하좌우 방향 버튼(가상 패드)을 추가해줘. 버튼을 터치하면 캐릭터가 움직여야 해. 버튼 디자인은 반투명하고 깔끔하게 부탁해."

2단계: 화면 꽉 차게 만들기 (반응형 설정)

기기마다 화면 크기가 다르기 때문에, 어디서든 꽉 찬 화면으로 보이게 조절해야 합니다.

1. 코드의 <style> 태그 부분을 드래그합니다.
2. Ctrl + K를 누르고 아래와 같이 요청하세요.
3. "캔버스(Canvas) 크기가 브라우저 창 크기에 맞춰 자동으로 조절되게(Responsive) 수정해줘. 그리고 모바일에서 화면이 밀리지 않도록 터치 스크롤 방지 코드를 넣어줘."

728x90

728x90

3단계: [꿀팁] 클릭 한 번으로 인터넷에 올리기 (Netlify 또는 GitHub)

가장 쉬운 방법인 Netlify를 추천합니다. (로그인만 하면 끝납니다!)

1. Netlify Drop 사이트에 접속합니다.
2. 내가 만든 MyRPG 폴더(index.html이 들어있는 폴더)를 통째로 마우스로 끌어서 웹사이트 창에 놓습니다(Drag & Drop).
3. 잠시 기다리면 https://abc-123.netlify.app 같은 나만의 주소가 생성됩니다! 이제 이 링크를 친구에게 보내보세요.

---

⚠️ 여기서 다들 막힙니다! (인터넷 검색량 상위 시행착오)

지뢰 1: "인터넷에 올렸는데 화면이 하얗게만 나와요!"

• 원인: 파일 이름이 대문자로 시작하거나(Index.html), 폴더 안에 파일이 제대로 들어있지 않은 경우입니다.
• 해결책: 메인 파일 이름은 반드시 소문자 **index.html**이어야 합니다. 서버는 대소문자를 엄격하게 구분하거든요.

지뢰 2: "스마트폰에서 버튼을 누르면 자꾸 화면이 확대돼요."

• 원인: 모바일 브라우저의 기본 '더블 탭 확대' 기능 때문입니다.
• 꿀팁: AI에게 **"HTML의 meta 태그에 viewport 설정을 추가해서 사용자가 임의로 확대/축소하지 못하게 막아줘"**라고 요청하세요. 게임 조작감이 훨씬 전문적으로 변합니다.

---

🎬 강의를 마치며: 여러분은 이제 개발자입니다!

총 5번의 강의를 통해 우리는 아무것도 없는 백지에서 시작해, AI라는 강력한 도구를 활용해 실제로 작동하는 게임을 만들고 인터넷에 배포까지 마쳤습니다.

• 1강: AI 환경 세팅 (Cursor)
• 2강: 픽셀 캐릭터 생성과 이동
• 3강: 몬스터와 충돌 로직
• 4강: 점수와 난이도 시스템
• 5강: 모바일 최적화와 웹 배포

코딩은 이제 '외우는 것'이 아니라 AI와 함께 '문제를 해결해 나가는 과정'입니다. 이번에 만든 RPG 게임에 여러분만의 아이디어(성벽 만들기, 보스 몬스터 추가 등)를 더해 더 멋진 프로젝트를 이어가 보세요!

그동안 함께해주셔서 감사합니다!