DigToc — HTML5 마이닝 게임

02기술 결정

문제가 무엇이었고, 무엇을 골랐고, 그래서 어떻게 됐는지.

1. 결정 01

   효과음은 재생할 때 만들지 않고 미리 만들어 둔다

   문제

   채굴할 때마다 오디오 객체를 새로 만들어 재생했더니, 연타하면 소리가 끊기거나 지연됐습니다. 브라우저가 매번 디코딩을 다시 하기 때문입니다. 게임에서 0.2초의 지연은 '반응이 없다'로 읽힙니다.

   선택

   사운드를 미리 디코딩해 메모리에 올려 두고, 재생 시점에는 이미 준비된 버퍼를 꺼내 쓰도록 바꿨습니다. 동시에 울릴 수 있는 소리의 개수에 상한을 두어 겹쳐 터지는 것도 막았습니다.

   결과

   연타해도 소리가 즉시 따라붙었습니다. 체감 반응 속도가 눈에 띄게 좋아졌는데, 실제로 빨라진 것은 화면이 아니라 소리뿐이었다는 점이 오래 기억에 남았습니다.

2. 결정 02

   첫 접속의 무게를 뒤로 미룬다

   문제

   게임에 필요한 이미지·모션·사운드를 한 번에 받게 했더니 첫 화면이 뜨기까지 너무 오래 걸렸습니다. 설치가 필요 없다는 장점이 로딩 시간에 그대로 잡아먹혔습니다.

   선택

   즉시 필요한 자원과 나중에 필요한 자원을 나눠, 로비까지는 최소한만 받고 나머지는 로비에 머무는 동안 받아 두게 했습니다.

   결과

   첫 화면이 훨씬 빨리 떴습니다. 실제 총 다운로드 양은 같았지만 사용자가 기다린다고 느끼는 시간은 크게 줄었습니다.

3. 결정 03

   PWA로 만들어 주소창을 지운다

   문제

   브라우저에서 도는 게임은 주소창과 탭이 계속 보입니다. 이것만으로도 '앱이 아니라 웹사이트'라는 인상이 강해져 몰입이 끊겼습니다.

   선택

   PWA로 만들어 홈 화면에 설치할 수 있게 하고, 실행하면 주소창 없이 전체 화면으로 뜨도록 했습니다.

   결과

   설치 과정 없이도 앱처럼 실행되는 경로가 생겼고, 재방문율이 올랐습니다. 스토어 심사를 거치지 않는 게임에게는 이 한 가지가 꽤 큰 차이였습니다.

03주요 기능

• 채굴 게임 플레이 화면

  캐릭터 모션과 채굴 이펙트가 함께 도는 메인 플레이 화면 구현.

• 실시간 채팅

  플레이 중 화면을 가리지 않으면서 접히고 펼쳐지는 채팅 인터페이스.

• 상점·거래 시스템

  아이템 구매와 유저 간 거래 UI. 게임 화면 위에 레이어로 얹었습니다.

• 사운드 시스템

  Web Audio API로 효과음을 미리 디코딩해 지연 없이 재생.

• PWA 설치

  홈 화면에 설치해 주소창 없이 전체 화면으로 실행.

04회고