HTML5 Canvas 스케치 데모
초기 프로토타입을 빠르게 검증하는 실용적인 경로입니다. 2D 게임과 UI, 간단한 이펙트에 적합합니다. 회색 박스 단계에서도 재미의 방향이 보입니다. 아트 전에 규칙이 서는지 확인합니다. 반응형 게임플레이의 첫 관문으로 씁니다.
2D · UI · 빠른 검증
바로 실행됩니다
데모 및 프로토타입 · 빌드 링크 단위 공유
플레이로 증명하는 데모
보드 위에 올려둔 플레이, 바로 실행됩니다. 말보다 플레이가 빠릅니다. 기술 검증용 프로토타입과 플레이 가능한 데모를 어떻게 만들고 어떤 기준으로 판단하는지 이 페이지에서 확인합니다.
HTML5 Canvas · Phaser · Three.js — 브라우저에서 바로 여는 시제품
어떻게 나눕니다
데모의 종류는 두 가지입니다
조작 검증용과 세션 검증용으로 나눕니다. 두 종류를 섞지 않습니다. 목적이 흐려지면 판단이 늦어지기 때문입니다. 각 데모는 빌드 링크 하나로 공유되고, 관찰 메모 한 장과 함께 판단합니다.
데모 범위 문의하기조작 검증
입력 감도와 판정을 봅니다
스와이프 거리, 탭 간격, 드래그 반응, 충돌 판정의 체감을 봅니다. 터치 좌표와 오브젝트 반응의 시차를 재고, 판정이 화면에 보이게 공유합니다. 재미 이전에 손에 붙는지 확인하는 단계입니다.
판정 박스 표시 · 로그 기록
세션 검증
한 판의 길이와 보상 타이밍을 봅니다
한 판이 몇 분에 끝나는지, 어디에서 보상이 터지는지, 실패 후 얼마나 빨리 돌아오는지 잽니다. 점수 팝업이 조작을 가리는지, 버튼 위치가 흐름을 끊는지 함께 봅니다.
2초 복귀 목표 · 반복 플레이 확인
기술별 시제품
엔진별 데모 목록
HTML5 Canvas, Phaser, Three.js. 가벼운 것부터 차례로 올립니다.
다섯 보드를 한 테이블에 — 단계별 풀이 상태
- 공유 단위
- 빌드 링크 하나로 바로 실행됩니다. 설치 없이 브라우저에서 열립니다.
- 판단 기준
- 좋다는 말 대신 다음에 바꿀 두 가지를 정합니다. 무엇을 버릴지 먼저 적습니다.
- 보관 방식
- 폐기된 데모도 폴더에 남깁니다. 장르를 바꿀 때 다시 꺼내는 자산이 됩니다.
Phaser 입력 데모의 관찰점
Phaser는 씬 관리와 입력, 물리를 한 번에 봅니다. 스와이프 거리와 탭 간격, 충돌 판정을 로그로 남깁니다. 저사양 기기에서 프레임이 꺾이는 구간을 표시합니다. 이 로그가 밸런스 조정표가 됩니다.
씬 전환 · 입력 로그
Three.js 라이트 3D 데모
가벼운 3D 게임의 시각적 완성도를 높입니다. 카메라 이동과 조명 변화를 브라우저에서 확인합니다. 텍스처 용량과 드로우콜 수를 함께 공개합니다. 무거운 연출은 옵션으로 분리해 저사양에서도 프레임 안정성을 지킵니다.
카메라 · 조명 · 경량화
카드 UI 밀도 데모
Slay the Spire 구조를 참고한 배치 실험입니다. 손패 겹침량과 숫자 가독성을 단계별로 바꿔봅니다. 모바일 세로 화면에서 카드 다섯 장이 겹치지 않게 조정합니다. 클릭과 드래그를 모두 기록해 터치 컨트롤의 기준을 잡습니다.
손패 배치 · 가독성
러너 재시작 데모의 기준
Subway Surfers형 흐름을 기준으로 실패 후 재시작까지의 시간을 잽니다. 버튼 위치와 연출의 간섭 여부를 봅니다. 점수 팝업이 조작을 가리지 않는지 확인합니다. 2초 복귀를 목표로 둡니다.
재시작 속도 · 세션 길이
물리 판정 데모의 기록 방식
Cut the Rope형 스테이지에서 끊기 타이밍과 낙하 궤적을 영상으로 남깁니다. 터치 좌표와 오브젝트 반응의 시차를 측정합니다. 판정 박스를 화면에 표시해 공유합니다. 체감과 수치의 간극을 줄입니다.
궤적 기록 · 시차 측정
짧은 회의
데모를 보는 회의는 짧게 끝냅니다
빌드 링크와 관찰 메모 한 장이면 충분합니다. 좋다는 말 대신 다음에 바꿀 두 개를 정합니다. 폐기된 데모도 폴더에 남깁니다. 나중에 장르를 바꿀 때 자산이 됩니다. 한 판의 길이, 보상의 위치, 실패 후 복귀 — 세 가지만 물어보고 일어납니다.
인쇄된 보드 위에 적힌 다음 수정 두 가지
읽는 법
데모를 볼 때 확인할 것
조작이 손에 붙는가
첫 30초 안에 입력이 헛돌지 않는지 봅니다. 스와이프와 탭이 의도대로 먹는지, 저사양 기기에서도 같은 느낌인지 확인합니다.
한 판이 적절한가
출퇴근길 20분을 가정한 세션 길이 안에 보상이 들어오는지 봅니다. 보상이 늦으면 규칙을 먼저 줄입니다.
다시 시작이 빠른가
실패 화면에서 다음 판까지의 동선을 잽니다. 버튼이 엄지 위치에 있는지, 팝업이 손가락을 막지 않는지 봅니다.
가볍게 열리는가
첫 로딩이 무겁지 않은지, 큰 에셋이 뒤에서 나눠 들어오는지 봅니다. 브라우저 게임은 열리는 속도가 품질의 일부입니다.
보고 싶은 데모를 말해주세요
장르와 확인하고 싶은 지점을 적어 보내주세요. 목적에 맞는 빌드 링크 두 개를 골라 보내드립니다. 서울특별시 강남구 테헤란로 311, 아남타워 8층 801호, 월–금 10:00–19:00에 직접 볼 수도 있습니다.
[email protected] · genres.php에서 장르 먼저 고르기