벡스타리노 스튜디오 벡스타리노 스튜디오 설치 없이 여는 플레이 보드
매트한 보드 위에 풀이 중인 브라우저 퍼즐 판

보드 위에 올려둔 플레이, 바로 실행됩니다

기획부터 지원까지 흐름은 단순합니다

개발 단계는 많을수록 헷갈립니다. 벡스타리노 스튜디오는 기획과 검증, 제작, 출시, 지원의 다섯 고리로만 나눕니다. 각 단계의 산출물이 분명하면 협업이 빨라집니다.

어떻게 진행되는지

먼저 범위를 잠그고, 플레이로 증명합니다

브라우저 게임은 설치 없이 바로 실행됩니다. 그래서 기획서가 두꺼울수록 늦어집니다. 저희는 한 판의 길이와 조작 수를 먼저 정하고, playable한 조각으로 계속 여부를 판단합니다. 문서보다 빌드 링크가 먼저 옵니다.

진행 단위
2주 마일스톤마다 실행 가능한 빌드 링크를 공유합니다. 각 링크마다 종료 조건이 적혀 있습니다.
검증 도구
HTML5 Canvas와 Phaser로 입력 감도와 씬 전환을 먼저 봅니다. 아트는 회색 박스로 충분합니다.
연출 원칙
WebGL과 Three.js 장면은 필요한 만큼만 올립니다. 프레임이 흔들리면 옵션을 나눕니다.
지원 창구
출시 후에는 밸런스 조정, 버그 수정, 브라우저 대응을 범위로 나눕니다. 창구는 하나로 둡니다.

개발 단계

일곱 고리, 산출물은 하나씩

범위 확정 · 문서 한 장

1단계, 세션 정의와 입력 정리

한 판의 길이와 조작 수를 문서 1장으로 정합니다. 참고 게임 2개를 고르고, 제외할 기능 목록을 함께 적습니다. 여기서 범위가 잠깁니다. 세션 길이가 정해지면 터치 횟수와 UI 밀도가 따라 정해집니다.

산출물: 세션 정의서 1장, 제외 목록, 참고 플레이 2건. 이 문서를 기준으로 이후 변경은 범위로 다룹니다.

핵심 검증 · 플레이 영상

2단계, 프로토타입 검증이 먼저입니다

검증할 기능 2개를 HTML5 Canvas나 Phaser로 만듭니다. 입력 감도와 씬 전환을 먼저 봅니다. UI는 회색 박스로 충분합니다. 플레이 영상으로 계속 여부를 정합니다.

판단 기준: 손맛이 오는지, 한 판이 끊기지 않는지. 재미가 없으면 아트를 붙이기 전에 멈춥니다.

아트와 사운드 · 경량화

3단계, 에셋과 UI를 붙입니다

검증된 규칙 위에 아트와 사운드를 얹습니다. 에셋 경량화와 로딩 분할을 함께 합니다. 카드 UI나 퍼즐 피드백 같은 읽힘 요소를 다듬습니다. 저해상도 기기에서 먼저 확인합니다.

작은 화면에서 글자와 버튼이 먼저 읽히면, 큰 화면은 자연히 따라옵니다.

연출 · 렌더 경로 분리

4단계, WebGL 연출은 필요한 만큼만

Three.js 장면이 필요하면 이때 붙입니다. 카메라와 조명, 이펙트를 단계별로 올립니다. 프레임 안정성이 꺾이면 옵션을 나눕니다. 모바일과 데스크톱 렌더 경로를 분리합니다.

화려함보다 안정된 60프레임에 가까운 흐름을 먼저 맞춥니다.

기기 대응 · 입력 테스트

5단계, 기기 대응 QA를 돌립니다

터치와 마우스, 키보드를 따로 테스트합니다. 브라우저별 오디오 자동재생 정책도 확인합니다. 반응형 레이아웃의 깨짐을 해상도별로 봅니다. 씬 전환 중 입력 씹힘을 잡습니다.

손가락과 마우스, 키보드는 서로 다른 입력입니다. 같은 테스트로 묶지 않습니다.

출시와 지원

빌드가 돌아가게 넘기고, 범위로 돕습니다

6단계, 출시 빌드와 문서 정리

배포용 빌드와 디버그 빌드를 분리합니다. 에셋 구조와 빌드 방법을 문서로 남깁니다. 버전 고정과 변경 이력을 기록합니다. 인수인계 후에도 빌드가 돌아가게 합니다.

담당자가 바뀌어도 같은 버튼으로 같은 결과가 나와야 인수가 끝난 겁니다.

7단계, 출시 후 지원은 범위로 정합니다

밸런스 조정과 버그 수정, 브라우저 업데이트 대응을 나눕니다. 지원 기간과 응답 채널을 계약서에 적습니다. 긴급 수정과 정기 개선을 구분합니다. 작은 팀이라 창구는 하나로 둡니다.

연락은 이메일 [email protected] 하나로 모읍니다. 월–금 10:00–19:00에 답합니다.

회색 박스 프로토타입 위에 에셋과 UI를 붙이는 장면
검증된 규칙 위에 아트와 읽힘 요소를 얹는 과정
휴대폰과 노트북에서 터치와 마우스 입력을 확인하는 모습
터치와 마우스를 따로 보는 기기 대응 QA
Phaser로 만든 물리 프로토타입 장면

프로토타입 검증

기능 2개만 먼저 만듭니다. 입력 감도와 씬 전환이 기준입니다.

HTML5 Canvas · Phaser

필요한 만큼만 올린 WebGL 연출 장면

WebGL 연출

Three.js 장면은 이때 붙입니다. 모바일과 데스크톱 경로를 나눕니다.

Three.js · 분리 렌더

태블릿에서 스와이프 제스처를 확인하는 손

반응형 확인

저해상도 기기에서 먼저 봅니다. 깨짐을 해상도별로 잡습니다.

터치 우선

일정은 마일스톤으로

일정 감각은 마일스톤으로 공유합니다

2주 단위로 빌드 링크를 냅니다. 각 마일스톤의 종료 조건을 미리 정합니다. 지연이 생기면 범위를 먼저 조정합니다. 일정을 늘리기 전에 뺄 기능을 찾습니다. 제외 목록이 미리 적혀 있어서 뺄 것을 고르는 회의가 짧아집니다.

긴급 수정과 정기 개선은 같은 줄이 아닙니다. 긴급 수정은 배포를 멈추는 문제를 먼저 고치고, 정기 개선은 다음 마일스톤으로 옮깁니다.

흰 종이에 인쇄된 보드와 마일스톤 표시

인쇄된 판 위에 마일스톤 종료 조건을 적어 공유합니다

자주 묻는 점

협업 전에 확인하는 것들

범위와 일정이 정해지면 다음은 로딩과 프레임 기준을 맞추는 일입니다. 서울 강남에서 월–금 10:00–19:00에 응대합니다.

두 줄이 풀린 채로 돌아온 같은 보드

흐름이 단순하면 게임이 먼저 보입니다

기획부터 지원까지, 각 단계의 산출물이 분명하면 협업이 빨라집니다. 벡스타리노 스튜디오와 함께 보드 위에서 확인하세요.

출시 후 지원 문의하기