이야기 롤플레잉 시안
선택과 인벤토리가 도는 구조
한 손으로 이동하고 한 번의 탭으로 말을 거는 구조라 출퇴근길에도 이야기가 끊기지 않습니다.
젠발트로 스튜디오 · 서울
밤 아홉 시, 손끝에서 바로 시작되는 플레이
설치 없이 열리는 HTML5 게임과 WebGL 게임을 만드는 서울의 개발 스튜디오입니다. 짧은 세션과 터치 컨트롤을 먼저 검증합니다.
프로토타입 상담하기
브라우저에서 바로 실행
테스트의 흔적
밤의 테스트룸에서 시작합니다
브라우저에서 바로 도는 캐주얼 게임을 만듭니다. 젠발트로 스튜디오는 짧은 세션, 터치 컨트롤, 빠른 초기 로딩을 기준으로 기획하고 플레이어블 프로토타입으로 먼저 검증합니다. 이 페이지에서 작업 범위와 진행 방식을 한 번에 파악할 수 있습니다.
저녁 아홉 시 테스트 매트가 깔린 방을 떠올려 보세요. 천장 조명이 매트를 비추고 한 손은 터치패드에 올려져 있습니다. 저희가 말하는 역량은 스크린샷이 아니라 레일에 남은 마모 자국 같은 흔적으로 증명됩니다. 실제로 눌러보고 끊기는 구간을 고치고 다시 돌려봅니다.
첫 탭에서 메뉴가 열리는지 확인
드래그와 탭이 엇갈리지 않는지 점검
저사양 기기에서 첫 화면이 열리는지 측정
2분 세션이 끊기지 않고 도는지 반복
이어하기 지점이 손에 닿는지 조정
금요일 플레이 빌드로 다시 검증
무엇을 만드나요
짧은 호흡에 맞춘 네 가지 결
HTML5 게임, WebGL 기반 2D와 가벼운 3D, 클릭 가능한 목업과 플레이어블 데모를 만듭니다. 퍼즐, 아케이드, 카드 보드, 방치형 루프 같은 짧은 호흡의 장르에 집중합니다. 데스크톱 마우스와 모바일 터치를 하나의 입력 체계로 묶습니다.
HTML5
WebGL
터치 우선
짧은 세션
손으로 미는 퍼즐
실수해도 바로 되돌리기
조각을 잘못 놓아도 바로 되돌릴 수 있어 아이도 보호자도 편하게 만집니다.
터치 우선 조작
엄지 하나로 끝까지
메뉴 진입부터 재시작까지 엄지 하나로 끝나게 버튼 크기와 간격을 잡습니다.
짧은 아케이드 한 판
2분 안에 닫히는 루프
점심시간 틈에 한 판을 끝낼 수 있게 목표와 보상을 짧게 접습니다.
바로 실행 테스트 무대링크 3초 승부
왜 즉시 실행이 중요한가요
링크를 누른 3초 안에 승부가 납니다
로딩이 길면 플레이어는 닫습니다. 그래서 첫 화면은 가벼운 UI 셸로 먼저 열고 게임 에셋은 뒤에서 나눠 받습니다. 덩치가 큰 WebGL 빌드도 초기 프레임 확보를 기준으로 쪼갭니다. 기다림을 설계하는 것이 첫 번째 작업입니다.
기술 스택은 어떻게 고르나요
2D 캐주얼 UI가 많으면 PixiJS 같은 WebGL 중심 렌더러가 잘 맞습니다. 빠른 3D 반복이 필요하면 PlayCanvas 흐름을 씁니다. 기획 검증용 시안은 Construct 문서의 입출력 구조를 참고해 가볍게 뽑습니다.
- 짧은 1~3분 세션은 가벼운 2D 렌더링과 단순 입력으로 엽니다.
- 3~7분 미션 구조에는 상태 저장과 중간 체크포인트를 둡니다.
- 브랜드 데모는 3D 연출과 터치 제스처 중심으로 설계합니다.
손과 시간을 재는 기준
터치, 세션, 화면을 같은 책상에 올립니다
터치 컨트롤의 기준
엄지 하나로 메뉴 진입부터 재시작까지 끝나야 합니다. 버튼 최소 터치 영역은 44px 이상으로 잡고 드래그와 탭의 충돌을 입력 이벤트 단계에서 분리합니다. 마우스 호버에만 의존한 화면은 두지 않습니다. 반응형 게임플레이는 해상도가 아니라 손가락 위치에서 시작합니다.
세션 길이는 어떻게 정하나요
출퇴근길 2분과 점심시간 5분은 다른 게임입니다. 한 판의 목표를 먼저 문장으로 적고 그 문장을 읽는 시간의 스무 배를 넘기지 않게 레벨을 자릅니다. 중간 이탈 지점에는 이어하기 버튼을 둡니다. 길이는 취향이 아니라 일정입니다.
화면은 와이어프레임부터 만듭니다
UI 와이어프레임을 캔버스 위에 바로 올리고 손으로 눌러봅니다. DOM 메뉴와 캔버스 렌더링을 섞을 때는 전환 비용을 먼저 잽니다. 글자가 깨지는 해상도에서는 레이아웃을 다시 짭니다.
제작 기록
퍼즐 한 판 시안
터치·마우스 입력
2분
모바일
아케이드 반복 루프
탭·드래그 분리
3분
공용
미션형 저장 구조
중간 이어하기
5분
데스크톱
브랜드 데모 연출
제스처 중심
4분
모바일
가볍게 여는 방법
에셋과 루프를 먼저 가볍게 합니다
텍스처 압축, 오디오 비트레이트 조정, 스프라이트 시트 정리 순서로 손댑니다. WebGL이 플러그인 없이 GPU 가속을 제공해도 기기별 차이는 남습니다. 그래서 저사양 안드로이드와 오래된 노트북을 기준으로 삼습니다.
requestAnimationFrame에 맞춰 게임 루프를 돌리면 브라우저 프레임과 어긋나지 않습니다. 백그라운드 탭에서는 루프를 멈추고 소리를 낮춥니다. 발열이 오르면 프레임이 아니라 이펙트를 줄입니다.
성능과 로딩 살펴보기나눠 받기 전과 후 · 셸을 먼저 열고 본편을 뒤에서 채웁니다
묻고 답하기
먼저 물어보는 것들에 답합니다
기획서 열 장보다 눌러보는 빌드 하나가 낫습니다. 2주 안에 핵심 루프만 도는 버전을 공유하고 조작이 손에 붙는지부터 봅니다. 매주 금요일 플레이 빌드와 변경 노트를 보냅니다. 서울 성수동 작업실에서 직접 테스트도 가능합니다.
다음 단계
어떤 장르와 세션을 원하는지 두 줄로 적어 보내주세요. 기존 레퍼런스 링크가 있으면 더 빠릅니다. 2영업일 안에 가능한 프로토타입 범위로 답합니다.
서울특별시 강남구 테헤란로 231, 7층 702호 · 월–금 09:00–18:00 · +82 2-559-0081 · [email protected]
1HTML5와 WebGL 중 무엇을 골라야 하나요?
단순 2D와 화면 중심이면 HTML5와 가벼운 WebGL 렌더링으로 충분합니다. GPU 연출이나 3D가 들어가면 WebGL 기준으로 설계합니다. 기기 대응 범위를 정하면 선택이 빨라집니다.
2브라우저 캐주얼 게임의 적정 세션 길이는요?
보통 1~5분을 기준으로 잡습니다. 2분 이하 아케이드와 3~7분 미션형으로 나누고 중간 저장 지점을 둡니다. 타깃 이용 시간대에 맞춰 조정합니다.
3모바일과 데스크톱 입력을 같이 지원하나요?
네. 터치, 마우스, 키보드를 하나의 입력 맵으로 묶습니다. 호버 전용 조작은 넣지 않고 탭과 클릭이 같은 결과를 내게 합니다.
4초기 로딩을 줄이려면 어디부터 보나요?
빌드 크기, 텍스처 압축, 오디오 용량 순서로 봅니다. 첫 화면 셸을 먼저 열고 게임 본편은 분할 로딩합니다.