브라우저에서 바로 플레이하는 HTML5 게임 프로젝트입니다. 캔버스 안의 게임 로직은 게임 개발자가 맡았고, 나는 게임을 감싸는 모든 것을 담당했습니다. 홈페이지 전체 UI와, 캔버스 위에 얹히는 상점·채팅·이모티콘·거래 시스템 같은 인게임 인터페이스였습니다.
일반 웹 UI와 게임 UI는 만드는 감각이 다릅니다. 웹은 문서를 읽는 흐름이지만 게임 UI는 화면을 가리지 않으면서 즉시 반응해야 합니다. 클릭 한 번의 지연이 그대로 조작감으로 이어집니다.
홈페이지 쪽에서는 게임 데이터를 시각화하는 작업이 있었습니다. 기획팀이 밸런스 수치를 엑셀로 관리하고 있었는데, 이걸 사이트에 옮길 때마다 개발자가 수동으로 반영하면 수정이 있을 때마다 병목이 생깁니다. 그래서 엑셀 파일을 그대로 읽어 차트로 그리는 구조를 만들었습니다.
문제가 무엇이었고, 무엇을 골랐고, 그래서 어떻게 됐는지.
결정 01
결정 02
결정 03
메인·소개·랭킹·공지 등 게임 외부 페이지 전반을 구현.
캔버스 위 DOM 레이어로 상점, 아이템 거래, 인벤토리 인터페이스를 구현.
실시간 채팅창과 이모티콘 선택 UI. 게임 화면을 가리지 않는 배치와 접기 동작.
SheetJS + Chart.js로 기획 엑셀을 그대로 차트로 렌더링.
설치 가능한 웹앱 형태로 만들어 브라우저 주소창 없이 실행되게 했습니다.
Desktop
Mobile · 반응형
01
02
03
게임 UI를 만들면서 '반응 속도가 곧 품질'이라는 감각을 얻었습니다. 웹에서는 200ms의 지연이 문제가 되지 않는 경우가 많지만, 게임에서는 즉시 답이 오지 않으면 조작이 먹지 않은 것처럼 느껴집니다.
개발자가 아닌 사람과 데이터를 주고받을 때는 그쪽이 이미 쓰는 도구에서 출발하는 게 제일 빠릅니다. 엑셀을 그대로 읽기로 한 건 기술적으로 특별할 게 없는 결정이었는데, 팀에서 반복하던 작업을 없앴다는 점에서 효과는 제일 컸습니다.