Construct 3 템플릿 vs 바닐라 JS 템플릿 선택법

시각적 에디터에서 게임을 수정하고 싶고, 그 에디터를 매번 열어도 괜찮다면 Construct 3 게임 템플릿을 고르십시오. 어떤 텍스트 에디터로든 코드를 열 수 있거나 그럴 수 있는 사람이 곁에 있다면, 엔진이 필요 없는 HTML5 게임 템플릿인 바닐라 JavaScript 게임 템플릿을 고르십시오. 어느 쪽이 더 나은 상품인 것은 아닙니다. 차이는 무엇이든 바꾸기 전에 컴퓨터에 무엇을 설치해야 하는가입니다.

저희는 후자를 판매하므로 이해관계가 있습니다. 공정을 기하기 위해 2026년 10월 24일 기준으로 공개된 엔진 쪽 페이지를 읽었습니다. Construct의 기능 비교표와 문서, 그리고 Construct 프로젝트를 포함해 배포하는 HTML5 게임의 CodeCanyon 공개 상품 네 건입니다. 저희 템플릿에 대한 모든 설명은 저희 상품 페이지, 약관, 공개 매뉴얼에서 가져온 것이며 직접 열어 보실 수 있습니다.

아래에는 간단한 선택 흐름, 각 방식에서 얻는 것과 포기하는 것의 솔직한 목록, 저희 템플릿 두 가지를 열어 본 모습, 어느 쪽이든 결제 전에 해 볼 수 있는 테스트, 그리고 자주 받는 질문 여섯 가지가 있습니다.

Construct 3 게임 템플릿: 무엇이며, 열려면 무엇이 필요한가

Construct는 브라우저에서도 실행되는 시각적 에디터를 갖춘 게임 제작 도구입니다. 실제로 Construct 3 게임 템플릿은 그 에디터용 프로젝트 파일과, 그대로 호스팅할 수 있는 HTML5 버전의 게임으로 구성됩니다. 저희가 열어 본 CodeCanyon 상품 네 건은 파일 목록의 모양이 매번 같았습니다. HTML5 게임 파일 옆에 .c3p 프로젝트 파일이 있었습니다.

그 네 건이 수정에 대해 말한 내용을 하나씩 보면 이렇습니다. 한 건은 코드를 수정하려면 Construct 3 도구가 필요하다고 밝히며 온라인 에디터를 안내하고 무료 버전에는 제한이 있다고 덧붙입니다. 한 건은 프로젝트를 여는 것만으로도 무료 서드파티 플러그인이 필요하다고 합니다. 두 건은 소프트웨어 버전으로 Construct 3을 적고 아트 교체(이미지 편집기로 이미지를 바꾸는 방식, 리스킨 가이드)에 대한 도움을 제공하지만, 어느 에디션의 엔진이 필요한지는 밝히지 않습니다. 판매자는 거명하지 않습니다. 이는 하나의 경향일 뿐, 어느 상품에 대한 평가도 아닙니다.

2026년 10월 24일에 읽은 엔진 자체 페이지의 내용은 이렇습니다. 무료 에디션에는 HTML5 내보내기가 포함됩니다. 이벤트 수(인증된 이메일로 로그인하면 50개, 게스트는 25개)와 레이어 수(2개)에 상한이 있습니다. 기능표는 게임으로 수익을 얻는 것, 광고, 인앱 결제를 무료 에디션에 포함되지 않는 항목으로 나열합니다. 또한 유료 요금제는 개인, 등록된 사업자, 교육 기관 등 구매 주체에 따라 나뉘므로 어디에 해당하는지 확인하십시오.

Construct의 문서와 웹사이트는 이벤트 시트로 만든 게임을 설명합니다. 에디터에서 볼 수 있는 조건과 동작으로 이루어진 이벤트이며, 고급 사용자는 JavaScript를 선택해 쓸 수 있습니다. 이것이 이 방식의 가장 큰 매력이며, 이어지는 부분에서도 그렇게 다룹니다.

Polar Games 마켓플레이스 보기

엔진이 필요 없는 HTML5 게임 템플릿: 저희 카탈로그에서 그것이 뜻하는 바

일반 JavaScript 템플릿은 HTML, CSS, JavaScript, JSON 파일이 들어 있는 폴더입니다. 어떤 텍스트 에디터로든 열 수 있고, 웹 호스트에 올리면 브라우저에서 실행됩니다. index.html을 더블클릭하는 방식은 통하지 않습니다. 브라우저가 file://에서는 모듈을 차단하기 때문입니다.

여기서는 정확해야 합니다. “엔진이 필요 없음”과 “빌드 단계가 없음”은 같은 말이 아니기 때문입니다. 마켓플레이스의 모든 상품의 요구 사항을 읽어 보면 에디션은 세 그룹으로 나뉩니다.

• 수정하고 업로드하면 끝, 설치할 것 없음: Ricopop(game/ 폴더가 곧 수정 가능한 소스이므로 수정, 업로드, 새로고침), Velvet Pool과 Puttide(npm, 빌드 단계, PHP, 데이터베이스 없음. Velvet Pool 매뉴얼은 source/에서 수정한 뒤 바뀐 파일을 game/에 복사하도록 안내합니다). Node.js는 해당 도구가 있는 에디션의 선택형 개발자 도구에서만 등장합니다.
• 작은 빌드 도우미가 있는 일반 파일: Gridspark와 Solitaire Links(후자는 일반 HTML, CSS, JavaScript). 둘 다 설치와 플레이에 빌드가 필요 없습니다. Gridspark 매뉴얼은 source/에서 작업하고 npm test와 npm run build(Node.js 20 이상, npm 의존성 없음)를 실행해 플레이 가능한 파일이 game/에 만들어지도록 안내하며, 설정 파일은 일반 텍스트입니다. Solitaire Links는 설정 파일을 빌드 없이 수정하며, Node.js 20 이상은 테스트와 언어 생성에만 필요하고, 아트워크, 규칙, 텍스트에 대해서는 매뉴얼이 선택형 소스 에디션과 재빌드를 안내합니다.
• TypeScript 프로젝트: Beep Out, Pinloop, Riffvolt, Sunset Rally, Trimora, Twirldrop(Vite 빌드), Zabum(React와 TypeScript), 그리고 Tenguin, Mochi Monsters, Deepforge, Barricade Z. 호스팅하는 game/ 폴더는 읽을 수 있는 JavaScript이지만, TypeScript 소스를 바꾸고 다시 빌드하려면 Node.js가 필요합니다(Trimora의 요구 사항에는 npm ci, npm test, npm run build가 있습니다). 정확한 버전은 각 상품의 요구 사항 탭에 있습니다.

모든 에디션에서 바로 호스팅할 수 있는 game/ 폴더는 정적 호스트에서 그대로 실행됩니다. 어떤 요구 사항 목록에도 게임 엔진 에디터나 엔진 라이선스는 나오지 않으며, 수정을 위해 계정을 요구하는 상품도 없습니다. 저희가 주장하는 것은 이것이 전부입니다. 이곳의 모든 템플릿에 빌드 단계가 없다고는 말하지 않습니다. 사실이 아니기 때문입니다.

간단한 선택 흐름: 이것을 원하면 저것을 고르십시오

기술이 아니라, 첫날 하고 싶은 일에서 출발하십시오.

• 코드를 쓰지 않고 레벨, 아트, 규칙을 바꾸고 싶고, 에디터를 배울 의향이 있거나 이미 쓰고 있다면: 엔진 템플릿. 시각적 이벤트는 바로 그 용도로 만들어졌습니다.
• 이미 Construct를 쓰고 있고 어떤 유형의 게임으로 빠르게 시작하고 싶다면: 엔진 템플릿. 익숙한 도구에서 프로젝트를 열게 되기 때문입니다.
• 본인이나 개발자가 버전 관리를 쓰는 코드 에디터에서 작업하며 모든 변경을 텍스트 diff로 보고 싶다면: 일반 JavaScript 템플릿.
• 이름, 색상, 텍스트, 레벨만 바꿔서 업로드하려면: 어느 쪽이든 됩니다. 상품 소개에 파일명이 나와 있는지(일반 JavaScript), 또는 무료 에디션으로 프로젝트를 열 수 있는지(엔진 방식) 확인하십시오.
• 엔진 요금제가 없는 고객에게 게임을 넘겨야 한다면: 일반 파일이 전달하기 쉽습니다. 어떤 텍스트 에디터로든 열 수 있기 때문입니다. 고객이 이미 엔진에서 작업한다면 프로젝트 파일이 더 나은 인수인계 방식입니다.
• 광고로 수익을 내려는 경우: 시작하기 전에 엔진의 라이선스 표를 읽으십시오. 무료 에디션은 광고를 포함되지 않는 항목으로 나열합니다. 어떤 템플릿이든 라이선스도 읽으십시오. 저희 라이선스는 최종 제품을 광고로 수익화하도록 허용하지만, 게임에는 광고 네트워크가 포함되어 있지 않습니다.
• 두 도구를 모두 모른다면: 각각 한 시간씩 써 보고(아래 테스트 부분 참조), 덜 씨름하게 된 쪽을 고르십시오.

Ricopop 보기: 레벨이 텍스트 맵인 일반 JavaScript 템플릿

엔진 방식: 얻는 것과 포기하는 것

엔진 방식을 가볍게 보지 마십시오. 코드를 쓰지 않고 게임을 만들거나 바꾸고 싶은 사람이 많기 때문에 존재하는 방식이며, 그 일에 뛰어납니다. 어떤 구매자에게는 그냥 알맞은 도구입니다.

얻는 것

• 시각적 편집: 코드가 아니라 화면에서 읽고 바꾸는 레이아웃, 오브젝트, 이벤트 시트.
• 엔진 공식 사이트의 문서, 튜토리얼, 사용자 포럼. 막히면 공개된 답변을 검색할 수 있으며, 한 스튜디오가 판매하는 템플릿에서는 불가능한 일입니다.
• 애드온: 엔진 페이지에는 번들 애드온이 나열되어 있고 서드파티 애드온을 프로젝트와 함께 저장할 수 있으므로, 기능을 직접 코드로 작성하지 않고 애드온으로 얻습니다.
• 배운 것이 이어집니다. 두 번째 게임에서도 같은 에디터와 같은 이벤트를 씁니다.
• HTML5 내보내기가 무료 에디션에 포함되어 있으므로, 요금제를 고르기 전에 빌드하고 테스트할 수 있습니다.

포기하는 것

• 에디터가 필요하며, 무료 에디션은 이벤트와 레이어 수에 상한이 있습니다.
• 일부 프로젝트는 추가 플러그인이 필요합니다(저희가 읽은 상품 중 한 건이 그렇습니다).
• 게임으로 수익을 얻을 수 있는지는 엔진 자체의 라이선스와 요금제에 달려 있습니다.
• 프로젝트는 하나의 도구용으로 만들어져 있습니다. 텍스트 에디터가 아니라 그 도구에서 바꿉니다.

일반 JavaScript 방식: 얻는 것과 포기하는 것

바닐라 JavaScript 게임 템플릿은 에디터를 텍스트 파일과 맞바꿉니다. 코드를 읽을 수 있다면 좋은 거래이고, 읽을 수 없다면 나쁜 거래입니다.

얻는 것

• 어떤 텍스트 에디터로든 파일을 열 수 있고, 어떤 정적 웹 호스트에서든 제공할 수 있습니다.
• 수정에 엔진 요금제나 계정이 필요하지 않습니다.
• 서식이 정리된 읽기 쉬운 소스, 그리고 로고, 색상, 규칙, 텍스트의 위치를 알려 주는 매뉴얼.
• 변경 사항이 일반 텍스트로 나타나므로 버전 관리와 잘 맞습니다.
• 일부 에디션에는 선택형 자동 테스트가 있습니다(Node.js 20 이상). Velvet Pool에서는 물리, 8볼 규칙, CPU 대결, 번역 키를 다룹니다.

포기하는 것

• 코드를 수정해야 합니다. 쉼표 하나가 잘못되어도 화면이 깨질 수 있습니다.
• 레벨이나 레이아웃을 위한 시각적 에디터가 없습니다. Ricopop의 레벨은 텍스트 맵이며, 레벨을 여전히 클리어할 수 있는지 알려 주는 검사 도구가 있습니다.
• 템플릿 하나를 위한 공개 포럼이 없습니다. 질문은 판매자에게 가며, 지원에는 한계가 있습니다. 6개월이 포함되고 연장 시 12개월이며, 커스터마이징, 신규 기능, 호스팅, SDK 또는 포털 연동은 견적을 받는 별도 서비스입니다.
• 에디션이 포함하지 않은 것은 포함되지 않은 채로 남습니다. 예를 들어 Gridspark에는 온라인 리더보드, 계정, 광고 SDK, 네이티브 앱스토어 빌드가 없습니다.

모든 상품 페이지의 “이 에디션에 포함되지 않는 것” 목록을 읽으십시오. Velvet Pool의 목록에는 온라인 멀티플레이어, 온라인 랭킹, 광고 SDK, 네이티브 앱이 나와 있습니다. Ricopop의 목록에는 네이티브 Android 또는 iOS 빌드, 온라인 멀티플레이어 또는 서버가 검증하는 경쟁 랭킹, 광고 네트워크 계정과 게임 포털 SDK 연동이 나와 있습니다.

열어 본 일반 JavaScript 템플릿 두 가지: Ricopop과 Gridspark

공개 매뉴얼은 “그건 어디서 바꾸나요?”라는 질문에 파일 이름으로 답합니다. game/ 폴더가 곧 소스인 Ricopop부터 보겠습니다.

Ricopop: 텍스트로 된 레벨, 빌드 없음

• 레벨: src/levels.js에 50개 레벨이 파(par)와 정답이 포함된 텍스트 맵으로 들어 있으며, 맨 위 주석이 형식을 설명합니다.
• 규칙과 수치: src/sim/config.js에 한 번에 쏘는 공의 수, 공의 속도, 점수 값이 있습니다.
• 색상과 메뉴 모양: style.css.
• 로고: 이미지가 아니라 src/ui/logo.js의 코드로 그립니다.
• 텍스트와 14개 언어: src/locales.js.
• 광고와 리더보드 설정(둘 다 기본값은 꺼짐): ricopop.config.js.

매뉴얼의 작업 흐름은 수정, 업로드, 강력 새로고침입니다. VS Code나 Notepad++ 같은 코드 에디터를 권장하며 워드 프로세서는 쓰지 말라고 안내합니다. 맵을 바꾼 뒤에는 선택형 도구인 node tools/validate.mjs가 모든 레벨을 여전히 클리어할 수 있는지 검사하고, node tools/validate.mjs --solve 12는 12번 레벨의 해법을 찾아 줍니다. 이 도구들은 Node.js 20 이상이 필요합니다.

Gridspark: 텍스트 파일의 설정, 이름이 붙은 모듈의 규칙

• 인터페이스 텍스트와 언어: src/locales.js.
• 상수와 팔레트: src/config.js. 인터페이스 색상: style.css.
• 퍼즐 규칙: game.js, board.js, generator.js, shapes.js.
• 로고, 얼굴, 블록: src/logo.js에서 그립니다.
• 시작 화면과 전체 화면 버튼: 재빌드가 필요 없는 일반 텍스트 파일인 gridspark.config.js.

코드를 바꾸려면 매뉴얼에 따라 source/에서 작업한 뒤 npm test와 npm run build를 실행합니다. Node.js 20 이상이 필요하지만 의존성은 설치하지 않습니다.

Velvet Pool도 3D로 같은 방식을 따릅니다. 로고는 assets/logo/, 천과 큐 스타일은 src/game/progress.js, CPU 동작은 src/core/ai.js, 물리는 src/core/physics.js에 있습니다. 선택형 테스트(source/ 안에서 npm test, Node.js 20 이상)는 물리, 8볼 규칙, CPU 대결, 번역 키를 다루며, 매뉴얼은 이것이 브라우저와 기기에서의 테스트를 대신하지 않는다고 분명히 밝힙니다.

Gridspark 보기: 라이브 미리보기와 매뉴얼

결제 전에 어느 쪽이든 테스트하는 방법

구매하지 않은 프로젝트 파일은 열 수 없지만, 그 주변의 거의 모든 것은 테스트할 수 있습니다. 타이머를 켜고 순서대로 해 보십시오.

두 방식 공통

1. 플레이어가 쓸 휴대폰에서 해당 에디션의 데모를 플레이합니다. 회전하고, 새로고침하고, 언어를 바꿔 보십시오.
2. 요구 사항과 포함되지 않은 항목 목록을 읽습니다. 여전히 직접 만들거나 구매해야 할 모든 구성 요소를 적어 두십시오.
3. 라이선스를 찾아 세 문장을 읽습니다. 몇 개의 제품을 포함하는지, 광고가 허용되는지, 무엇을 재판매할 수 없는지입니다.

엔진 템플릿의 경우

1. 프로젝트를 여는 데 어떤 에디션과 버전의 엔진이 필요한지, 추가 플러그인이 필요한지 문의합니다.
2. 프로젝트가 이벤트와 레이어를 몇 개 쓰는지 묻고, 그 수를 엔진 페이지의 무료 에디션 제한과 비교합니다.
3. 에디터를 단독으로 열어 한 화면짜리 테스트를 만들어 보고, 그 안에서 작업하는 것이 즐거운지 확인합니다.
4. 게임으로 수익을 낼 계획이라면, 무엇이든 구매하기 전에 그 부분에 대한 엔진의 라이선스를 읽습니다.

일반 JavaScript 템플릿의 경우

1. 공개 매뉴얼을 열어 로고, 색상, 규칙, 텍스트가 어디 있는지 찾습니다.
2. 수정에 무엇이 필요한지 확인합니다. 아무것도 필요 없는지, Node.js와 npm이 필요한지입니다. 각 상품의 요구 사항 탭에 나와 있습니다.
3. 매뉴얼에 안내된 방식으로 실행합니다. 예를 들어 Velvet Pool 매뉴얼은 로컬 테스트로 game/ 안에서 python -m http.server 8765를 실행한 뒤 http://localhost:8765/를 열도록 안내합니다.
4. 브라우저의 개발자 도구로 데모의 스크립트 하나를 열어 봅니다. 따라갈 수 있다면 수정할 수 있습니다.

저희 쪽에서는 템플릿이 디지털 상품이므로, 아직 템플릿을 다운로드하지 않으셨거나 제공된 템플릿에 저희가 고칠 수 없는 결함이 있는 경우에만 구매를 환불해 드립니다. 요청하실 때는 라이선스 번호와 함께 저희에게 연락해 주십시오. 환불된 구매의 라이선스는 종료됩니다. 다운로드하면 그 문이 닫히므로, 구매 전에, 그리고 반드시 다운로드 전에 위의 테스트를 해 보십시오.

Velvet Pool 보기: 매뉴얼, 라이브 미리보기, 앞서 언급한 테스트

자주 묻는 질문

HTML5 게임 템플릿을 수정하려면 게임 엔진이 필요한가요?

템플릿이 어떻게 만들어졌는지에 따라 다릅니다. 엔진 템플릿은 해당 엔진의 에디터에서 열리는 프로젝트를 제공하며, Construct의 프로젝트 파일은 .c3p로 끝납니다. 일반 JavaScript 템플릿은 어떤 텍스트 에디터로든 열 수 있는 파일입니다. Polar Games 마켓플레이스에서는 어떤 요구 사항 목록에도 게임 엔진 에디터가 나오지 않습니다. 여러 에디션은 TypeScript 소스를 다시 빌드하는 데에만 Node.js, 때로는 npm이 필요합니다.

무료 에디션으로 Construct 3 템플릿을 수정할 수 있나요?

개별 프로젝트에 대해서는 답할 수 없습니다. 2026년 10월 24일에 엔진 페이지에서 확인한 내용은 무료 에디션이 HTML5로 내보낼 수 있고 이벤트는 50개(게스트는 25개), 레이어는 2개로 제한된다는 것이며, 저희가 읽은 상품 중 한 건은 무료 버전에 제한이 있다고 밝힙니다. 판매자에게 프로젝트가 이벤트와 레이어를 몇 개 쓰는지 물어보고 비교하십시오.

바닐라 JavaScript 게임 템플릿이 엔진 템플릿보다 수정하기 어렵나요?

코드를 쓰지 않는 분에게는 그렇습니다. 시각적 에디터가 없고 오타 하나가 화면을 깨뜨릴 수 있습니다. 코드를 쓰는 분에게는 색상, 텍스트, 레벨을 바꾸는 일이 이름이 붙은 파일 하나를 수정하는 일이며, 매뉴얼이 어느 파일인지 알려 줍니다. Ricopop의 레벨은 텍스트 맵이고 Gridspark의 설정 파일은 일반 텍스트입니다.

저희 템플릿에는 npm이나 빌드 단계가 필요한가요?

필요한 것도 있고 아닌 것도 있습니다. Ricopop, Velvet Pool, Puttide는 둘 다 필요 없습니다. Gridspark는 설치와 플레이에 빌드가 필요 없으며, source/의 코드를 바꿀 때만 의존성이 없는 빌드(npm test, npm run build, Node.js 20 이상)가 필요합니다. Trimora와 Twirldrop처럼 TypeScript로 만든 에디션은 다시 빌드하려면 Node.js와 npm이 필요하지만, 호스팅하는 game/ 폴더는 이미 빌드되어 있습니다. 각 상품의 요구 사항 탭에 나와 있습니다.

고객을 위해 템플릿을 쓰고 광고를 넣어도 되나요?

저희 라이선스는 최종 제품 하나(본인 또는 고객 한 곳)를 대상으로 하며, 플레이어는 이를 무료로, 또는 광고 수익화 방식으로 이용할 수 있습니다. 그 안의 코드, 아트, 오디오는 수정할 수 있지만 템플릿이나 소스를 재판매할 수는 없습니다. 게임에는 광고 네트워크가 포함되어 있지 않으므로 광고 네트워크를 연결하고 승인을 받는 것은 구매자의 몫입니다. 엔진 템플릿이라면 판매자의 라이선스와 함께 엔진의 라이선스도 읽으십시오.

잘못된 방식을 골랐다면요?

위에서 안내한 대로 먼저 테스트하십시오. 환불은 아직 템플릿을 다운로드하지 않았거나 제공된 템플릿에 저희가 고칠 수 없는 결함이 있는 경우에만 가능합니다. 나중에 한 방식에서 다른 방식으로 옮기려면 다른 도구로 게임을 다시 만들어야 하므로, 결제 전의 한 시간은 충분히 쓸 만한 시간입니다.

결정하기 전에 하나 열어 보십시오

가장 저렴한 비교는 한 시간이면 됩니다. 데모를 플레이하고, 매뉴얼을 읽고, 에디터를 열어 보십시오. 엔진 템플릿과 일반 JavaScript 템플릿에 각각 한 번씩 해 본 다음, 두 번째로 여는 일이 덜 부담스러웠던 쪽을 고르십시오.

Polar Games 마켓플레이스를 둘러보고 매뉴얼 열어 보기