TAKE-DICE 프로토타입 : FRONTEND | TAKE-DICE 연구 기록

1. 모바일 화면의 끔찍함.

웹 보드게임은 모바일 브라우저의 사용성에 달려 있다고 생각한다. 초기 프로토타입은 PC 브라우저에서 개발하여 깔끔해 보였지만, 모바일 기기로 접속하는 순간 화면이 심각하게 깨졌다.

사실 슬롯과 주사위 뿐만 아니라 곳곳에 숨어있는 문제가 있었다. 뷰포트 크기를 생각하지 않고 px 크기(즉, 절대 크기 값)으로 작성한 것이다.
상대 크기값(rem, %, aspect-square)을 활용하여 어떠한 해상도, 뷰포트 크기에서도 찌그러지지 않고 자연스럽게 비율대로 수축하고 확장되도록 레이아웃을 개편하였다.

보드게임에서 주사위를 굴리고, 주사위를 배치하고, 공격하는 손맛을 완성하는 것은 사운드이다. 하지만, 기존 음성 파일을 다운로드 받는 방식은 네트워크 비용을 발생시킨다.

Web Audio API의 AudioContext를 활용하여 주사위 롤링, 보드에 배치, 공격, 게임 승리 사운드를 구현하였다.
초기에는 사운드 재생 후 오디오 노드가 제대로 정리되지 않아 메모리 누수가 발생하거나 음성이 재생되지 않는 문제가 있었으나, 재생 완료 시 노드를 명시적으로 분리(disconnect)하고 버퍼를 캐싱하여 해결하였다.

화면 꺼짐 방지: 게임 진행 중 심리전을 펼치고, 다음 수에 대한 고민을 진행하다가 화면이 꺼지거나 어두워 질 수 있다. 이러한 경우 게임을 몰입을 방해할 수 있어, WakeLock(navigator.wakeLock.request('screen')) 기능을 구현하였다.
실수 이탈 방지: PC 플랫폼은 문제 발생이 적겠지만 모바일의 경우 화면 스와이프를 하거나 실수로 뒤로가기 버튼을 누를 수 있다. 이로 인해 허탈하게 기권을 하게 될 수 도 있다. 이를 popstate 이벤트를 통제하여 실수 여부 확인을 진행하며 방지를 하도록 제공한다.
백그라운드 단절 방지: 중요한 전화, 문자, SNS 등에 의해 급하게 앱을 전환(document.visibilitychange)하고 돌아왔을 때, OS에 의해 연결이 단절 될 수 있다. 혹시 모르는 상황을 대비하여 자동 재연결 시도 기능을 설계하였고, 게임 상태를 복구할 수 있도록 하였다.
PWA 지원: 매번 브라우저에서 바로가기나 URL을 입력하여 접속하는 것은 여간 귀찮은 일이 아니다. 앱처럼 손 쉽게 바탕화면에서 바로 접속할 수 있어야 접근성이 좋다고 생각하여 PWA를 지원하기로 하였다.