HTML5 게임 소스 코드: 실제 패키지를 열어 본 내용

HTML5 게임 소스 코드는 세 가지 서로 다른 것을 뜻할 수 있습니다. 바로 업로드할 수 있는 빌드, 직접 수정하는 개발자용 파일, 또는 특정 에디터에서만 열리는 프로젝트입니다. 저희 마켓플레이스의 소스가 포함된 HTML5 게임 템플릿은 앞의 둘을 일반 웹 파일로 함께 담은 것이며, 이 글은 실제 패키지를 열어 그 모습을 보여 드립니다.

저희는 이 템플릿을 판매하므로, 시장에 대한 중립적인 조사가 아니라 저희 패키지를 둘러보는 안내로 읽어 주십시오. 저희는 주로 Velvet Pool, Puttide, Sunset Rally를 비롯한 여러 에디션을 살펴보고, 공개 매뉴얼과 스토어 약관을 읽은 뒤, 상자 안에 무엇이 있는지, 실행하려면 무엇이 필요한지, 무엇이 없는지를 적어 두었습니다. 각 매뉴얼은 상품 페이지에서 링크되므로 결제 전에 모든 줄을 직접 확인하실 수 있습니다.

“HTML5 게임 소스 코드”가 뜻할 수 있는 것

판매자들은 소스 코드라는 말을 느슨하게 씁니다. 실제로 무엇을 파는지는 세 가지 질문으로 가려낼 수 있습니다.

빌드인가, 개발자용 소스인가, 둘 다인가?

빌드는 브라우저가 불러오는 형태의 완성된 게임입니다. index.html, 스크립트, 이미지, 사운드 파일입니다. 그대로 호스팅할 수 있습니다. 개발자용 소스는 사람이 수정하도록 만든 버전이며 파일이 역할별로 나뉘어 있습니다. 빌드만 있는 패키지는 업로드는 할 수 있어도 편하게 바꾸기는 어렵습니다. 소스만 있는 패키지는 실행하기 전에 도구가 필요할 수 있습니다. 이 글에서 다루는 에디션은 둘 다 하나의 ZIP에 담습니다. 보통 게시할 game/ 폴더와 수정할 source/ 폴더입니다(Ricopop에서는 game/ 자체가 소스입니다).

읽을 수 있는가, 압축(minify)되어 있는가?

압축은 스크립트를 짧은 이름의 몇 줄로 꽉 채워 내려받기는 빠르게 하지만 읽기는 끔찍하게 만듭니다. 난독화는 한발 더 나아가 일부러 이름을 뒤섞습니다. 둘 다 운영 중인 사이트에는 해가 없습니다. 하지만 코드를 바꾸려고 구매했다면 둘 다 해롭습니다. 결제 전에 라이브 데모의 스크립트 하나를 브라우저 개발자 도구에서 열어 따라갈 수 있는지 확인해 보십시오.

일반 파일인가, 에디터 프로젝트인가?

어떤 템플릿은 특정 게임 에디터용 프로젝트로 제공되어 그 에디터에서만 열 수 있습니다. 다른 템플릿은 어떤 코드 에디터로든 열 수 있는 일반 웹 파일입니다. 이 글의 에디션은 후자입니다. HTML, CSS, JavaScript, JSON이며 일부에는 TypeScript가 있습니다.

템플릿 둘러보기

Polar Games 패키지 안에 있는 것

8볼 당구 에디션인 Velvet Pool을 예로 들겠습니다. 매뉴얼은 ZIP 안의 폴더 네 개를 설명합니다.

• game/ 은 바로 업로드할 수 있는 에디션이며, 게시하는 유일한 폴더입니다.
• source/ 는 같은 게임을 수정 가능한 개발자용 에디션으로 만든 것으로, README, package.json, 테스트가 있습니다.
• documentation/ 에는 도해 가이드와 이미지가 있습니다.
• THIRD-PARTY-LICENSES/ 에는 글꼴 라이선스 본문과 README.txt 요약이 있습니다.

라이브러리에서는 같은 패키지를 두 가지 다운로드로 제공합니다. 전체 패키지(소스와 매뉴얼) 또는 바로 호스팅할 수 있는 게임 단독입니다.

game/과 source/는 같은 구조를 공유합니다. Velvet Pool의 매뉴얼은 source/에서 파일을 수정한 뒤 바뀐 파일을 game/의 같은 경로에 복사하라고 안내합니다. 그 사이에 컴파일되는 것은 없습니다.

Velvet Pool 에디션 보기

Velvet Pool 내부: 파일 지도

파일 지도는 구매하기 전에 코드베이스를 판단하는 가장 저렴한 방법입니다. 다음은 Velvet Pool 매뉴얼에 있는 지도이며, 경로는 source/ 또는 game/ 기준입니다.

• src/core/physics.js: 공 시뮬레이션, 스핀, 쿠션 반응.
• src/core/rules.js: 8볼 규칙과 파울 판정.
• src/core/ai.js: CPU가 샷을 선택하는 방식.
• src/game/controls.js: 조준, 파워, 스핀 입력.
• src/game/progress.js: 업적, 천, 큐, 경기 점수 계산.
• src/game/i18n.js: 14개 언어의 텍스트.
• src/game/localRecords.js: 로컬 점수 기록.
• src/game/audio.js: 효과음과 음악 재생.
• css/style.css와 css/fonts.css: 테마, 반응형 레이아웃, 글꼴 선언.
• assets/: 아트, 오디오, 글꼴과 logo/ 하위 폴더.

구분을 눈여겨보십시오. 규칙, 물리, CPU는 src/core에 있습니다. 입력, 저장, 텍스트, 사운드는 src/game에 있습니다. 매뉴얼은 한 번에 한 기능씩 바꾸라고 하는데, 이 구조 덕분에 그것이 현실적입니다. 쿠션 조정과 번역 수정은 서로 다른 파일을 건드립니다.

매뉴얼은 또한 source/src와 game/src의 코드가 압축되거나 번들된 파일 없이 서식이 정리된 일반 JavaScript라고 밝힙니다. Velvet Pool은 WebGL2 기반의 바닐라 JavaScript이며 Three.js를 포함해 어떤 코드 라이브러리도 사용하지 않습니다. 변경 이력이 이를 뒷받침합니다. 1.0.1 버전은 오디오, 번역, 셰이더의 한 줄로 길게 이어진 문자열을 동작은 그대로 둔 채 읽기 쉬운 여러 줄로 나누었습니다.

Puttide: 같은 구조에 라이브러리 추가

3D 미니 골프 에디션인 Puttide는 같은 폴더 네 개를 쓰며 한 가지가 더해집니다. 게임에 필요한 서드파티 라이브러리 두 가지입니다. Three.js r186(MIT)과 Rapier 3D 0.21.0(Apache-2.0)이 lib/three/와 lib/rapier/에 있으며, index.html의 import map이 브라우저에 위치를 알려 줍니다. Puttide FAQ는 CDN에서 아무것도 불러오지 않는다고 밝히므로, 게임에는 자체 호스트만 있으면 됩니다. 매뉴얼은 라이브러리 파일이 읽을 수 있게 서식이 정리되어 있고 동작은 수정되지 않았다고 덧붙입니다.

파일 지도는 이번에도 source/ 또는 game/ 기준입니다.

• src/course/courses.js: 코스 순서와 해금 조건.
• src/course/holes.js: Ruins 코스의 지형, 파, 장애물. pier.js, ice.js, lava.js, sky.js에 나머지 네 코스가 있습니다.
• src/sim/constants.js: 물리 튜닝.
• src/game/economy.js: 공, 궤적, 의상의 정의와 가격.
• src/ui/i18n.js와 사전 파일 세 개: 언어 텍스트.
• css/style.css: 인터페이스 색상, 글꼴, 반응형 스타일.
• fonts/와 music/: 라이선스가 있는 웹 글꼴과 음악 두 곡.

새 홀을 만드는 매뉴얼의 방법은 이렇습니다. 해당 코스 파일에서 정의를 복제하고, 고유한 id를 부여하고, 파, 티, 컵의 위치를 설정하고, 코스에 추가한 다음, 언어 사전에 이름과 팁을 추가합니다. 구매하기 전에 이런 절차를 읽어 보십시오. 직접 할 수 있는 일처럼 보인다면 그 패키지는 맞는 것입니다.

Puttide 에디션 보기

소스에 빌드 단계가 필요한 경우

“빌드 단계 없음”은 어떤 에디션에는 해당하고 어떤 에디션에는 해당하지 않으므로, 스토어가 아니라 에디션을 확인하십시오. 다음은 저희 에디션 다섯 가지를 정가와 함께 나란히 놓은 것입니다. 저희 스토어는 현재 정가에서 10% 할인한 가격을 보여 주며, 각 상품 페이지의 스튜디오 직판 가격입니다. 예를 들어 Velvet Pool은 39달러 대신 35.10달러로 표시됩니다.

• Velvet Pool, 정가 39달러: WebGL2 기반의 일반 JavaScript 모듈. source/를 수정하고 game/에 복사합니다. Node.js 20 이상은 선택형 테스트에만 필요합니다.
• Puttide, 39달러: lib/에 Three.js와 Rapier가 있는 일반 JavaScript 모듈. 빌드 단계 없음. Node.js는 선택 사항이며 라이브러리 버전 관리에만 쓰입니다.
• Ricopop, 39달러: 일반 HTML, CSS, JavaScript 모듈이며 game/ 자체가 소스입니다. 선택형 개발자 도구(Node.js 20 이상): 로컬 서버, 레벨 검사 도구, 테스트.
• Pinloop, 24달러: Vite를 쓰는 TypeScript. game/ 폴더에는 읽을 수 있는 JavaScript와 CSS가 있습니다. Node.js 22.12 이상과 npm은 소스를 수정하고 다시 빌드할 때만 필요합니다.
• Sunset Rally, 39달러: Three.js r184와 Vite를 쓰는 TypeScript. game/ 폴더는 이미 빌드되어 있으며 압축되어 있지 않습니다. Node.js는 다시 빌드할 때만 필요합니다.

Sunset Rally의 매뉴얼은 Node.js 24 LTS를 권장합니다. source/ 안에서 npm ci, npm run typecheck, npm run build를 실행한 다음 dist/의 내용만 게시합니다. 또한 제공되는 런타임이 읽기 좋게 정리되어 있으므로 다시 빌드할 때 minify와 cssMinify를 꺼 두라고 안내합니다. 결과물을 업로드하고, node_modules/는 절대 올리지 마십시오.

Sunset Rally 에디션 보기

호스팅: 실제로 “정적”이 뜻하는 것

정적 호스팅은 호스트가 파일만 제공한다는 뜻입니다. Velvet Pool과 Puttide의 매뉴얼은 전체 설치를 세 단계로 안내합니다.

1. ZIP의 압축을 풉니다.
2. game/ 안의 모든 것을 FTP나 호스트의 파일 관리자로 사이트의 폴더(예: public_html/velvet-pool/)에 업로드하고, 하위 폴더를 그대로 유지합니다.
3. 브라우저에서 그 주소를 엽니다.

npm, 터미널, 빌드 단계, PHP, 데이터베이스, 계정은 관여하지 않습니다. 같은 매뉴얼에 따르면 사람들이 걸려 넘어지는 부분은 다음과 같습니다.

• index.html을 더블클릭하지 마십시오. 브라우저가 file://에서는 게임 모듈을 차단합니다. 로컬 테스트는 game/ 안에서 python -m http.server 8765를 실행하고 http://localhost:8765/를 여십시오.
• 서버는 .js 파일을 JavaScript MIME 타입으로, .wasm을 application/wasm으로 보내야 합니다. 잘못된 MIME 타입은 모듈 거부 오류로 나타납니다.
• 공개 호스팅에는 HTTPS를 사용하십시오.
• 저장 데이터는 브라우저 출처(프로토콜, 호스트, 포트)에 귀속됩니다. 게임을 다른 도메인으로 옮기면 플레이어는 처음부터 시작합니다.
• 페이지를 새로 불러올 때도 호스트가 필요하므로 설치형 오프라인 앱이 아닙니다.

로고, 색상, 규칙, 번역이 있는 곳

모든 매뉴얼에는 커스터마이징 장이 있으며, 다루는 범위는 에디션마다 다릅니다. 각각 다음과 같이 안내합니다.

Velvet Pool

• 로고와 브랜딩: assets/logo/의 파일을 교체하고 CSS의 해당 크기를 조정합니다.
• 천과 큐 스타일: 정의는 progress.js에 있습니다. 저장된 꾸미기 아이템이 계속 동작하도록 아이템 ID는 그대로 유지하십시오.
• CPU 동작은 ai.js, 물리는 physics.js. 규칙이나 물리를 바꾼 뒤에는 8볼 테스트를 실행하십시오.
• 번역: src/game/i18n.js이며, 언어 목록은 LANGS에 있습니다.

Puttide

• 색상과 글꼴: css/style.css.
• 물리: src/sim/constants.js. 꾸미기 아이템 가격: src/game/economy.js이며 기존 ID는 유지합니다.
• 음악: 라이선스가 있는 파일을 music/에 복사하고 src/audio/audio.js의 트랙 매핑을 업데이트합니다.
• 홀, 파, 해금: 위에서 설명한 코스 파일.

Gridspark와 Sunset Rally

Gridspark는 상품 FAQ에 따르면 인터페이스 텍스트가 src/locales.js에, 규칙 상수와 팔레트가 src/config.js에, 퍼즐 규칙이 game.js, board.js, generator.js, shapes.js에 있습니다. Sunset Rally에서는 캠페인 경기와 별 조건이 Campaign.ts에, 장소가 Places.ts에, 물리가 physics.ts에, 점수 계산이 match.ts에 있습니다. 영어와 포르투갈어 문자열은 src/i18n.ts에, 나머지 12개 언어는 src/locales/에 있습니다.

매뉴얼이 다루지 않는 부분을 눈여겨보십시오. Puttide 매뉴얼은 색상, 물리, 홀, 가격, 음악을 다루지만 로고를 바꾸는 단계는 없고, Sunset Rally 매뉴얼에는 브랜딩 전용 장이 없습니다. 브랜딩이 가장 먼저 바꿀 부분이라면 구매하기 전에 문의하십시오.

Gridspark 에디션 보기

자동 테스트: 무엇을 검사하고 무엇은 검사하지 않는가

Velvet Pool의 source/ 폴더에는 테스트 모음이 있습니다. Node.js 20 이상에서 source/ 안에 터미널을 열고 npm test를 실행하면 되며, 이는 node tests/run.js와 같습니다. 의존성 설치는 필요 없습니다. 매뉴얼에 따르면 이 테스트 모음은 물리, 8볼 규칙, CPU 대결, 번역 키의 일관성을 검사하며, 브라우저와 실제 기기에서의 테스트를 대신하지는 않습니다.

번역 키 검사는 14개 언어를 지원하는 게임에 필요한 종류의 테스트입니다. 한 언어에 키를 추가하고 다른 언어에는 빠뜨리면, 사람이 몇 주 동안 알아채지 못할 수 있습니다.

모든 에디션에 테스트가 있는 것은 아닙니다. Puttide 매뉴얼에는 수동 점검만 있고 테스트는 없습니다. Pinloop과 Beep Out은 개발자 명령에 npm test를 나열하며, Ricopop의 개발자 도구에는 레벨 검사 도구가 있습니다.

라이선스, 서드파티 고지문, 변경 이력

스토어 약관에 따라 한 번의 구매는 에디션을 최종 제품 하나(본인의 제품 또는 고객 한 곳의 제품)에 사용하는 영구적·비독점 라이선스를 드립니다. 그 안에서 코드, 아트, 오디오를 수정할 수 있고, 플레이어는 무료로 또는 광고를 통해 이용할 수 있습니다. 템플릿, 소스, 에셋을 단독으로, 템플릿이나 키트나 에셋 팩으로, 또는 개발자를 위한 다른 제품 안에 담아 재판매, 공유, 재배포할 수 없습니다. 지원이 끝나도 라이선스는 만료되지 않습니다.

서드파티 구성 요소는 각자의 라이선스를 유지하며, 그 고지문을 제품과 함께 보관해야 합니다. Velvet Pool에서는 SIL Open Font License 1.1이 적용되는 글꼴 두 가지, Manrope와 Fraunces가 해당하며, 본문은 THIRD-PARTY-LICENSES/와 글꼴 옆에 있습니다. Puttide에서는 여기에 Three.js(MIT), Rapier(Apache-2.0), Rubik과 Fredoka 글꼴(OFL 1.1)이 더해집니다.

변경 이력은 패키지가 어떻게 관리되는지 보여 줍니다. Velvet Pool 1.0.1(2026년 10월 18일)은 긴 문자열을 읽기 쉬운 줄로 나누고 라이선스 고지문을 하나의 평평한 폴더에 모았습니다. 1.1.0 버전(2026년 10월 22일)은 인터페이스를 14개 언어로 확장했습니다. 이 항목들은 상품 페이지에 있습니다. 약관은 같은 에디션의 업데이트가 게시되는 대로 라이브러리에 나타난다고 하며, 정해진 기간 동안의 업데이트를 약속하지는 않습니다.

구매한 게임의 코드를 한 시간 안에 읽는 방법

이 계획은 제안일 뿐 시간을 보장하는 것이 아닙니다. Velvet Pool의 구조를 따르며 패키지가 제공하는 것만 사용합니다.

1. 0~10분: ZIP의 압축을 풀고 source/의 README와 매뉴얼의 파일 지도를 훑어봅니다. index.html을 열어 어떤 스크립트와 스타일시트를 불러오는지 봅니다.
2. 10~20분: source/ 안에서 npm test(Node.js 20 이상)를 실행해 통과하는 기준선을 확보합니다.
3. 20~35분: src/game보다 src/core를 먼저 읽습니다. rules.js, ai.js, physics.js 순서로 시작하십시오. 그것이 게임 자체입니다. 컨트롤, 진행 상황, 텍스트, 사운드는 그 주변의 배관입니다.
4. 35~40분: 아이템 ID와 저장 키는 그대로 유지해야 하며, 그렇지 않으면 플레이어가 저장된 꾸미기 아이템을 잃는다는 점을 기록합니다.
5. 40~55분: progress.js의 천 정의 같은 작은 변경을 하나 해 봅니다. 파일을 game/의 같은 경로에 복사하고, python -m http.server 8765로 game/을 서비스한 뒤 결과를 확인합니다. file://로는 절대 열지 마십시오.
6. 55~60분: 테스트를 다시 실행합니다.

ES 모듈은 필요한 것을 import 줄에 적어 두므로, 페이지가 처음 불러오는 스크립트부터 연결 고리를 따라갈 수 있습니다. 일반 파일 에디션을 이 속도로 읽을 수 있는 이유입니다.

소스 코드를 구매하기 전에 물어볼 질문

• 결제 전에 매뉴얼을 읽고 데모를 플레이해 볼 수 있는가? 저희 에디션은 둘 다 상품 페이지에서 링크됩니다.
• 바로 호스팅할 수 있는 빌드와 별도의 개발자용 소스가 있는가?
• 코드를 읽을 수 있는가, 압축되어 있는가? 스크립트 하나를 열어 보십시오.
• Node.js, npm, PHP, 데이터베이스가 필요한가? 필요하다면 어떤 버전인가?
• 게임이 CDN이나 다른 사이트에서 무언가를 불러오는가?
• 어떤 서드파티 라이브러리가 들어 있으며, 어떤 라이선스를 따르는가?
• 몇 개의 프로젝트에 사용할 수 있으며, 재배포해도 되는가?
• 지원은 얼마나 오래 지속되며 무엇을 다루는가? 저희는 6개월이며, 결제 시 연장을 선택하시면 12개월이고, 파일의 설치와 사용에 관한 문의와 재현 가능한 결함을 다룹니다.
• 무엇이 빠져 있는가?
• 변경 이력과 최근 릴리스가 있는가?
• 환불 규정은 무엇인가? 저희는 템플릿이 디지털 상품이므로, 아직 템플릿을 다운로드하지 않으셨거나 저희가 고칠 수 없는 결함이 있는 경우에만 환불해 드립니다. 라이선스 번호와 함께 스튜디오에 연락하여 요청하십시오.

이 에디션에 포함되지 않는 것

일부 에디션에는 선택형 부가 기능이 있습니다. Ricopop과 Zabum에는 기본값이 꺼져 있는 파일 하나짜리 PHP 리더보드가 포함되어 있습니다. 점수를 파일에 저장하는 가벼운 공유 점수판이며, 부정행위를 막는 랭킹도 실시간 멀티플레이어도 아닙니다.

지원은 제공된 파일의 설치와 사용에 관한 문의, 그리고 제공된 게임에서 재현 가능한 결함의 수정을 다룹니다. 이것은 하나의 경계이며, 첫날부터 아는 편이 낫습니다.

자주 묻는 질문

game 폴더와 source 폴더는 무엇이 다른가요?

game/은 호스트에 업로드하는 빌드입니다. source/는 같은 게임을 수정 가능한 개발자용 에디션으로 만든 것입니다. Velvet Pool과 Puttide에서는 같은 구조를 공유하므로, source/에서 수정한 파일을 game/의 같은 경로에 복사합니다. Sunset Rally 같은 TypeScript 에디션에서 source/는 다시 빌드하는 프로젝트이며, 새로 나온 결과물을 게시합니다.

게임을 쓰려면 npm이나 Node.js가 필요한가요?

호스팅에는 필요하지 않습니다. Node.js는 Velvet Pool의 선택형 테스트(20 이상)나 Sunset Rally(24 LTS 권장), Pinloop(22.12 이상) 같은 TypeScript 에디션을 다시 빌드할 때만 등장합니다.

소스 코드가 압축되어 있나요?

여기서 다룬 에디션은 그렇지 않습니다. Velvet Pool과 Puttide는 서식이 정리된 일반 JavaScript이며, 두 에디션 모두 1.0.1 버전에서 한 줄로 길게 이어진 문자열을 읽기 쉬운 여러 줄로 나누었습니다. Sunset Rally의 런타임은 압축을 끈 채 서식이 정리된 상태로 제공됩니다.

한 번의 구매를 여러 프로젝트나 고객에게 쓸 수 있나요?

라이선스는 최종 제품 하나(본인 또는 고객 한 곳)를 대상으로 합니다. 두 번째 제품은 범위 밖입니다.

소스 코드를 재판매하거나 공유해도 되나요?

안 됩니다. 단독으로도, 템플릿이나 키트나 에셋 팩으로도, 개발자를 위한 다른 제품 안에 담아서도 안 됩니다. 본인의 최종 제품 안에서는 코드, 아트, 오디오를 수정할 수 있습니다.

구매하기 전에 매뉴얼을 읽어 볼 수 있나요?

네. 각 상품 페이지에 매뉴얼 링크와 같은 에디션의 플레이 가능한 데모가 있습니다.

구매하기 전에 패키지를 열어 보십시오

에디션을 골라 상품 페이지에서 매뉴얼을 열고, 데모를 플레이하고, 파일 지도를 위의 질문과 대조해 보십시오. 매뉴얼이 답한다면 패키지도 그럴 것입니다. 그렇지 않다면 결제 전에 스튜디오에 문의하십시오.

모든 템플릿 둘러보기