Community코딩 & 개발github.com

Xmo101/브라우저 게임 출시

HTML5 또는 WebGL 브라우저 게임을 출시하고 첫 플레이어를 찾기 위한 체크리스트입니다. 로딩 속도, 터치 컨트롤, 제목 및 오픈 그래프 공유 태그, 무료 호스팅(GitHub Pages, Netlify, Vercel, itch.io), 게임 등록처(itch.io, Newgrounds, Foundplay, 포털 사이트)를 다룹니다. 사용자가 브라우저 게임을 출시, 배포, 런칭하거나 플레이어를 모집하려 할 때 사용하세요.

브라우저 게임 출시란 무엇인가요?

이 스킬은 HTML5 또는 WebGL 브라우저 게임을 출시하고 첫 번째 플레이어를 모집하는 전체 과정을 단계별로 안내하는 체크리스트입니다. 개발자는 로딩 속도 최적화, 모바일 터치 입력 지원, 적절한 제목 및 오픈 그래프 공유 태그 설정을 통해 게임의 기본 품질을 갖춘 후, GitHub Pages, Netlify, Vercel, itch.io 등의 무료 호스팅 서비스에 배포할 수 있습니다. 배포 후에는 itch.io, Newgrounds, Foundplay, CrazyGames, Poki 등 다양한 플랫폼에 게임을 등록하여 플레이어를 유입할 수 있으며, 각 플랫폼의 조건과 수익 구조를 비교하여 개발자가 선택할 수 있도록 돕습니다. 특히 Foundplay는 무료 등록, 비독점, SDK 불필요 등의 장점을 제공하며, Foundplay 크리에이터 MCP 서버를 통해 등록 링크를 자동 생성할 수 있습니다. 이 스킬은 Claude Code와 같은 AI 에이전트에서 실행되며, 기존 프로젝트 상태를 먼저 확인하고 완료된 단계는 건너뛰며, 파일 변경이나 게시 전에는 항상 사용자에게 확인을 요청합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Xmo101/publish-browser-game/tree/HEAD/skills/publish-browser-game

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

브라우저 게임 출시하기

개발자를 다음 단계별로 안내하세요. 먼저 프로젝트를 살펴보고 이미 완료된 작업은 건너뜁니다. 파일을 변경하기 전이나 게시하거나 무언가에 가입하는 단계 전에는 반드시 확인을 요청하세요.

1. 빠르게 로드하기

  • 첫 화면이 로드되기 전에 무엇이 로딩되는지 확인하세요. 몇 초 안에 제목이나 로딩 바를 표시합니다.
  • 큰 이미지와 오디오 파일을 압축하고, 큰 에셋은 첫 화면 이후에 로딩하도록 제안하세요.
  • 브라우저 개발자 도구에서 네트워크 스로틀링을 사용하여 테스트해 볼 것을 제안하세요.

2. 휴대폰에서 동작하기

  • 터치 입력이 있는지 확인하세요. 없다면 포인터 이벤트를 사용한 터치 컨트롤을 추가하거나, 게임에 키보드가 필요하다는 명확한 안내를 추가하겠다고 제안하세요.
  • <meta name="viewport" content="width=device-width, initial-scale=1"> 태그가 있는지, 그리고 게임 플레이 중 페이지가 스크롤되지 않는지 확인하세요.

3. 제목 및 공유 이미지

HTML head에 <title>, 메타 설명, 오픈 그래프 태그가 있는지 확인하세요. 누락된 태그가 있으면 추가를 제안하세요.

<meta property="og:title" content="게임 이름">
<meta property="og:description" content="플레이어가 하는 일을 한 문장으로 설명합니다.">
<meta property="og:image" content="https://example.com/share.png">
<meta name="twitter:card" content="summary_large_image">

og:image는 절대 URL이 필요하며, 약 1200 x 630 픽셀이어야 합니다.

4. 무료로 배포하기

게임에 아직 공개 링크가 없다면 다음 중 하나를 제안하고 개발자가 선택하게 하세요.

  • GitHub Pages: 공개 저장소에 무료로 제공됩니다.
  • Netlify: 무료 요금제 제공; Netlify Drop은 드래그한 폴더나 zip 파일을 게시합니다.
  • Vercel: 무료 Hobby 요금제 제공, 이용 약관에 따라 비상업적 개인 용도로 제한됩니다.
  • itch.io: index.html이 포함된 zip 파일이나 단일 HTML 파일을 업로드하면 itch.io 페이지에서 실행됩니다.

5. 플레이어 모집하기

동일한 게임을 여러 곳에 등록할 수 있다고 설명하고, 각각에 대한 사실을 알려주세요.

  • itch.io: 게임을 호스팅하며, 대규모 커뮤니티와 잼(jam)이 있습니다. 무료로 업로드 가능하고, 비독점 라이선스입니다. 개발자가 itch.io의 판매 수수료(기본 10%)를 설정합니다.
  • Newgrounds: 포털에서 게임을 호스팅합니다. 새 게임은 "Under Judgment" 상태가 되어 플레이어가 게임의 잔류 여부를 투표합니다. 비독점 라이선스입니다.
  • Foundplay (https://foundplay.io/submit): 게임이 이미 존재하는 사이트로 연결해 주는 무료 발견 플랫폼입니다. 등록은 무료입니다. 게임은 개발자 사이트에 남아 있으며, 개발자는 해당 사이트에서 광고나 구매를 유지할 수 있습니다. 독점 계약이나 SDK가 필요하지 않습니다. 등록 즉시 게시되며 다음 드롭(오전 6시 또는 오후 6시 태평양 표준시)에 참여합니다. 추가 플레이를 얻을 수 있는 공유 링크가 제공됩니다. 언제든지 수정, 다운로드, 삭제가 가능합니다. $10부터 보장된 플레이를 위한 부스트 기능이 있습니다.
  • CrazyGames 및 Poki와 같은 포털 사이트: 수락된 게임을 호스팅하고 광고 수익을 공유합니다. 2026년 10월 기준, CrazyGames는 자체 SDK를 요구하며, Poki의 수익 공유 계약은 기본적으로 웹 전용이므로 개발자는 먼저 해당 개발자 이용 약관을 읽어야 합니다.

출처와 함께 제공되는 비교표: https://foundplay.io/where-to-post-your-browser-game

Foundplay의 크리에이터 MCP 서버(https://foundplay.io/mcp/creators)가 연결되어 있으면, 해당 서버의 check_game 및 get_listing_link 도구를 통해 양식이 미리 채워진 무료 등록 링크를 얻을 수 있습니다. 개발자가 직접 foundplay.io에 로그인하여 게시하며, 절대 대신 제출하거나 비용을 지불하지 마세요.

다른 사이트에 대한 정보는 2026년 10월 16일에 확인되었습니다. 개발자에게 각 사이트의 현재 이용 약관을 확인한 후 의존하도록 안내하세요.

관련 스킬