모바일 · 데스크톱과 성능
무거운 장면도 가볍게
보드 위에 올려둔 플레이, 바로 실행됩니다. 브라우저 게임의 평가는 재미 이전에 열리는 속도와 끊기지 않는 움직임입니다. 기준은 중급폰과 저사양 노트북입니다.
중급폰 · 저사양 노트북 기준 검증
Loading path
로딩은 씬 단위로 쪼갭니다
첫 화면에 필요한 에셋만 먼저 받습니다. 나머지는 플레이 뒤에서 미리 받습니다. 기다림을 숨기지 않고 짧게 만드는 방식입니다. 씬 전환마다 짧은 로딩 게이지를 보여줘 다음 장면이 준비 중이라는 것을 분명히 알립니다.
스프라이트 아틀라스와 오디오 압축이 기본입니다. 타이틀과 첫 퍼즐에 쓰는 이미지를 한 장으로 묶고, 효과음은 짧게 다듬어 용량을 줄입니다. 두 번째 스테이지의 그림과 소리는 첫 판을 푸는 동안 조용히 받아 둡니다.
먼저 받는 것
타이틀, 첫 씬 타일, 기본 버튼과 효과음. 이 묶음이 열려야 플레이가 시작됩니다.
뒤에서 받는 것
다음 스테이지, 긴 배경음, 고해상도 텍스처. 플레이가 멈추지 않는 선에서 순서대로 채웁니다.
보여주는 방식
씬이 바뀔 때마다 짧은 게이지 한 번. 길게 숨기는 대신 짧게 알리고 바로 넘깁니다.
첫 씬만 먼저, 나머지는 뒤에서
조작이 끊기면 로딩 탓부터 봅니다
Asset diet
에셋 경량화의 우선순위
텍스처 크기, 오디오 길이, 폰트 용량 순으로 봅니다. 안 쓰는 프레임을 지우는 게 새 에셋을 만드는 것보다 빠릅니다. 2D는 벡터보다 비트맵 아틀라스가 안정적이라 같은 그림을 여러 해상도에서 깨지지 않게 씁니다.
텍스처는 묶고, 기기별로 나눕니다
WebGL 텍스처는 기기별로 압축 포맷을 나눠 안드로이드와 아이폰, 저사양 노트북에서 각자 잘 열리는 묶음을 씁니다.
아틀라스 우선
오디오와 폰트는 짧게
긴 배경음은 반복 구간만 남기고, 폰트는 게임에 쓰는 글자만 잘라 담습니다.
용량 삭감지우는 게 먼저
쓰지 않는 프레임과 예비 컷을 덜어내는 것만으로 첫 로딩이 가벼워집니다.
정리부터Canvas path
HTML5 Canvas는 2D와 UI에
구현이 단순해 초기 비용이 낮습니다. 보드 게임의 타일, 카드 펼치기, 간단한 이펙트는 캔버스 하나로 충분합니다. UI 레이어와 게임 레이어를 나누면 글자가 번지지 않고 버튼 반응도 일정합니다.
WebGL path
WebGL은 GPU 가속으로
3D와 무거운 2D 이펙트를 그래픽 칩으로 처리합니다. OpenGL ES 계열 기능을 웹에서 쓰는 길이라 파티클과 조명이 많은 장면에 어울립니다. 장면 복잡도에 따라 렌더 경로를 고릅니다.
Frame stability
프레임 안정성은 끊김 구간을 잡습니다
평균 프레임보다 최악의 1초를 봅니다.
파티클 폭발과 카드 펼치기, 씬 전환 순간을 따로 잽니다. 드로우콜과 섀도우, 블러를 줄이는 순서로 손봅니다. 중급 안드로이드폰을 통과하면 대부분 통과합니다. 잘 돌아가는 구간 평균이 아니라 걸리는 구간을 고치는 일입니다.
최악의 1초를 종이에 적듯 봅니다
Touch control
터치 컨트롤의 지연을 줄입니다
터치 이벤트와 렌더 루프의 시차를 측정합니다. 스와이프 인식 거리를 짧게 잡고 오판은 되돌리기로 커버합니다. 진동 피드백은 짧게 한 번만 씁니다. 멀티터치 테스트는 실기기로만 합니다. 에뮬레이터의 매끈함은 실기기의 손맛과 다릅니다.
Desktop input
데스크톱 마우스와 키보드 대응
마우스 호버 힌트와 키보드 단축키를 보조 입력으로 둡니다. 고주사율 모니터에서는 물리 틱을 고정해 60Hz와 144Hz에서 같은 속도로 움직입니다. 창 크기 변경 시 캔버스 스케일을 다시 계산하고 전체화면 전환 버튼을 고정 위치에 둡니다.
Responsive layout
반응형 게임플레이의 레이아웃 규칙
세로형과 가로형의 안전 영역을 따로 둡니다. 조작 버튼은 화면 하단 고정, 정보는 상단 고정이 기본입니다. 태블릿 중간 해상도에서 버튼 간격이 벌어지지 않게 묶어 두고, 노치와 상태 표시줄 가림도 실기기로 확인합니다. 반응형 게임플레이는 화면을 줄이는 일이 아니라 손이 닿는 자리를 지키는 일입니다.
세로형
엄지 하단 조작, 점수와 남은 수는 상단. 한 손 플레이의 동선을 그대로 둡니다.
가로형
양옆 여백을 플레이에 쓰지 않고 정보와 손잡이로 씁니다. 보드는 중앙 고정입니다.
저사양 기준을 문서에 남깁니다
지원 기기와 브라우저 버전을 명시합니다. 테스트한 기기 목록을 공유하고, 옵션 낮추기와 고화질 모드의 차이를 영상으로 남깁니다. 출시 후 브라우저 업데이트 때도 같은 기준으로 다시 봅니다.
가벼운 게임이 오래 갑니다
기기 대응과 로딩, 프레임 기준을 정해두면 출시 후에도 같은 속도로 고칠 수 있습니다. 사양을 보내주시면 맞는 렌더 경로를 제안합니다.