Coatsink가 Ready, Set, Cook!의 웹 로딩 시간을 25% 단축한 방법

Ready, Set, Cook!은 쥬라기 월드 애프터매스와 트랜스포머:배틀그라운드의 개발사 Coatsink에서 제작한 Messenger용 협동 레스토랑 관리 게임입니다. Coatsink는 모바일 웹 개발을 처음으로 시작하며 거친 과정은 다음과 같습니다.

데스크톱 게임을 모바일로 가져와 Messenger Rooms에서 출시하려면 스튜디오에서 어떤 작업을 해야 할까요?

Ready, Set, Cook!은 본래 플레이어들이 PC 또는 노트북에서 화상 통화로 참여할 수 있는 데스크톱 웹 게임으로 개발되었습니다. Coatsink는 모바일을 타겟으로 개발 방향을 전환하면서 Meta 및 유니티와 협력했습니다. Meta와 유니티는 모바일에서 런타임을 작동하기 위해 전략적 파트너십을 맺고 있습니다. 이는 곧 출시될 Unity 6 릴리스에서 이뤄질 Unity Web의 주요 업데이트 중 하나이며, 이와 함께 WebAssembly 2023 지원, WebGPU 얼리 액세스, Emscripten 3.1.38 툴체인이 추가됩니다. 내년부터는 Unity의 인스턴트 게임 플랫폼 지원을 통해 Unity 게임 개발자가 Meta의 방대한 게임 생태계를 활용할 수 있게 됩니다.

새로운 플랫폼 테스트

Coatsink의 프로그래밍 부문 헤드인 로스 퍼미지는 “제가 Ready, Set, Cook!을 좋아하는 가장 큰 이유는 클릭 한 번으로 바로 플레이할 수 있기 때문입니다. Messenger에서 화상 통화를 하다가 버튼을 누르기만 하면 로비에 있는 모두가 게임을 바로 플레이할 수 있습니다. 따로 설정할 필요가 없죠”라고 합니다.

Coatsink는 웹 게임을 처음 개발했으므로 플랫폼의 워크플로를 최대한 활용하고자 했습니다. 그래서 플랫폼의 역량과 모바일 웹 개발에서의 강점을 분석하는 R&D 프로젝트처럼 진행했습니다.

팀에서는 기존 기능을 기반으로 대부분의 개발을 진행했습니다. HUD, 게임 관리자, 네트워크, 상호작용, 로비, 게임 지침을 처리하는 프리팹 같이 사전에 제작된 기능을 활용했고, 사용자가 해야 할 일을 알려 주는 기능을 더 알기 쉽게 개선했습니다. 또한 일시 정지, 무작위 외형, 로비 조정 및 메시징, HUD 변경, 유연한 종횡비 지원, 난이도 밸런스 조정 등 새로운 기능을 추가했습니다.

퍼미지는 “멀티플레이어 요소를 중심으로 친구들과 화상 통화를 하며 즐길 수 있도록 만들고 밸런스를 맞췄습니다”라고 설명했습니다. “프로젝트를 진행하며 데스크톱에서 모바일로 넘어가는 게임들이 공통으로 직면하는 문제에 부딪혔습니다. UI에 집중해야 했죠. 특히 웹에서는 플레이어가 Wi-Fi로 접속한다고 보장할 수 없기 때문에 모바일 데이터를 통한 다운로드 시간을 고려해야 했습니다.”

결과

• 게임 로딩 시간 25% 단축
• WASM(WebAssembly) 파일 크기 2.5% 감소
• 게임 전송 및 압축 해제 시간 10% 단축

동적으로 방향이 전환되는 UI 제작

Coatsink 팀은 프로젝트를 시작하자마자 UI에 고려할 부분이 많다는 것을 깨달았습니다. 처음에는 게임을 플레이하는 사용자와 플레이하지 않으면서 화상 통화만 하는 사용자가 같이 참여할 수 있게 하는 부분을 고민했습니다. 기존의 관전 기능을 개선하여 플레이어를 온라인 상태로 유지하며 다른 사용자들에게 긍정적인 관전 경험을 제공하고자 했습니다.

Coatsink의 주니어 디자이너 카밀 바지들로는 “게임의 여러 측면을 디자인하는 동안 관전 경험을 항상 최우선으로 염두에 두었습니다”라고 설명했습니다. “다른 플랫폼의 모든 게임 장르에서 흔한 기능은 아니지만, 저희 플레이어들은 화상 통화와 함께 플레이하므로 게임 전반에서 포용적인 사용자 참여를 중심에 두었습니다.”

화면 방향도 초기부터 고려했습니다. Ready, Set, Cook!은 처음에 데스크톱용으로 개발되었으므로, 가로 화면용으로 제작되었습니다. 그러다 모바일로 전환하면서는 가로와 세로 화면을 모두 지원해야 했습니다. Messenger에서는 플레이어들이 화상 통화를 하면서 화면을 세로로 잡기 때문에, 휴대폰을 돌려서 카메라가 옆으로 표시되는 상황은 바람직하지 않았습니다. 퍼미지는 “화면 회전을 지원하는 환경을 디자인하며 많은 고민이 있었습니다”라고 합니다.

게임 컨트롤 개선

Ready, Set, Cook!은 화면 크기와 종횡비가 다양한 여러 기기에서 플레이할 수 있습니다. 하지만 Meta의 동영상 피드나 플랫폼 컨트롤 같은 요소에도 공간이 할당되므로 게임의 뷰포트가 화면 전체로 확장되지 않습니다. 이러한 요소는 게임 애플리케이션 자체의 요소가 아니므로 개발자가 작업하는 동안에는 Unity 에디터에 표시되지 않습니다.

바지들로는 “화면에 UI 요소를 배치할 때마다 그 점을 고려해야 했습니다”라고 말합니다. “플랫폼 요소가 화면 공간을 얼마나 차지하는지 대략적인 범위를 파악하고, QA 팀과 협력하여 가장 좁은 타겟 종횡비를 파악했습니다.”

모바일에서는 기기별 컨트롤이 화면 하단에 배치됩니다. Ready, Set, Cook!은 가로 화면을 염두에 두고 제작되었으므로, 화면 하단에는 게임플레이에 필수적인 입력 대신 HUD 요소를 배치했습니다.

미국에서 게임을 제한적으로 출시했을 때, 팀은 애플리케이션에 분석 기능을 넣어 플레이어들이 언제 게임을 종료하는지 확인했습니다. 그 결과 게임이 로드되기도 전에 사용자들이 떠난다는 것을 초기에 파악할 수 있었습니다.

퍼미지는 “메뉴가 복잡하고 로비에서 게임으로 들어가는 플로가 너무 길면 사용자들이 게임을 떠난다는 사실을 알았습니다. 게임이 시작되고 나면 대부분의 플레이어가 끝까지 플레이했습니다”라고 밝혔습니다. “저희에게 아주 중요한 데이터였죠. 분석 기능이 여러 의사 결정에 큰 영향을 미쳤습니다.”

로딩 시간 최적화

Coatsink의 분석 결과, 게임의 파일 크기가 너무 크거나 로딩 시간이 너무 길면 사용자가 메인 메뉴 또는 게임플레이에 도달하기 전에 게임을 이탈했습니다.

Coatsink의 개발자 안드레이 M.은 Unity Build Settings에 있는 옵션을 사용하여 파일 크기를 줄이는 데 집중했습니다. 예를 들면 디스크에서 코드가 차지하는 용량을 최적화하기 위해 LTO를 사용하고 Brotli 압축 형식을 활용했습니다. 또한 IL2CPP 코드 생성을 더 작고 빠른 빌드로 진행했고, 관리되는 스트리핑 레벨을 높였습니다. 웹용으로 최적화한 덕분에 로딩 시간을 크게 줄일 수 있었습니다.

그런 다음 Unity 엔진에서 사용되지 않는 부분을 잘라내고 최적화된 .wasm 파일을 생성하는 Unity의 WASM(WebAssembly) 툴을 사용했습니다. 파일 크기를 줄인 덕분에 기기에서 런타임에 압축하고, 전송하고, 압축 해제할 양이 줄어들었습니다. 퍼미지는 “이렇게 해서 데이터 다운로드가 완료되자마자 사용자가 게임을 시작할 수 있게 되었습니다”라고 합니다.

게임을 최적화한 결과, 전체 WASM 파일의 2.5%인 4MB의 용량을 줄일 수 있었습니다. 그러자 전송 시간과 압축 해제 시간이 각각 10%씩 단축되었습니다. 4MB가 작게 느껴질 수도 있지만, 모바일 브라우저에서 실행되는 게임에는 전체적으로 큰 영향을 끼쳤습니다.

파일 크기 축소

파일 크기를 줄이기 위해 Coatsink 팀은 코드 이외의 플랫폼별 에셋이 들어 있는 아카이브 파일인 에셋 번들을 사용했습니다. 이를 외부 서버에서 호스팅하고 빌드가 실행될 때 다운로드하여 사용자가 게임 로비에 최대한 빨리 들어갈 수 있도록 만들었습니다.

또한 어드레서블 에셋 시스템을 사용하여 에셋을 필요할 때마다 로드했습니다. 덕분에 패키지를 게임의 각 부분에 필요한 그룹으로 나눌 수 있었으며, 로딩 시간을 25% 단축하는 데 큰 영향을 미쳤습니다.

안드레이 M.은 “이렇게 로비에 최소한의 에셋만 사용한 결과 플레이어가 더 빨리 들어올 수 있었고, 각 레벨에도 최소한의 에셋과 여러 레벨 간에 공유하는 공통 패키지 및 에셋을 사용했습니다”라고 설명했습니다. “항상 HTTP/2를 사용할 수 있는 것이 아니므로 다운로드할 파일을 최대한 줄이고 불필요한 에셋을 최대한 빼는 것이 목표였습니다.”

팀은 사용자가 게임을 시작했을 때 모바일 또는 데스크톱 중 어느 기기를 사용하는지 감지하는 워크플로를 만들었습니다. 웹 템플릿에서는 로드할 때 모바일 기기를 사용하는지 확인하고, 모바일 기기라면 플랫폼에 최적화된 에셋을 사용하도록 데이터와 에셋 디렉토리를 변경했습니다.

안드레이 M.은 “더블 빌드 시스템을 구축해서 두 가지 버전을 생성하도록 했습니다. 완전히 다른 버전은 아니지만, 서로 다른 아틀라스를 참조하고 압축 유형과 크기가 모두 달라지죠. 같은 코드 베이스를 기반으로 서로 다른 두 가지 에셋 뷰가 생성됩니다”라고 말합니다.

독특한 테스트 및 디버깅 문제 해결

게임을 테스트하고 디버깅하면서 팀은 기존의 웹 브라우저가 아닌 Messenger 앱 내에서 게임을 실행하는 독특한 환경에 따른 몇 가지 어려움을 겪었습니다. 더미 플레이어를 사용했을 때 브라우저에서 빌드가 정상적으로 실행되더라도, Messenger에서만 발생하는 버그를 처리하기 위해 깊이 파고들어야 했습니다.

퍼미지는 “버그를 발견하기 위해 개발 빌드에서 로그를 AWS 서버에 업로드하는 시스템을 만들고 로그를 읽었습니다”라고 설명했습니다.

또한 팀은 웹 브라우저 개발 툴을 사용하여 콘솔에서 오류를 발견하고 API 호출을 추적했습니다. 프로그래머로서 퍼미지에게는 이것이 핵심이었습니다.

퍼미지는 “브라우저 콘솔에서 커맨드를 입력하고 수동으로 실행해 볼 수 있습니다. 네이티브 플러그인으로 JavaScript와 Unity를 오갈 수 있는 외부 JavaScript 라이브러리를 제작해 두어 필요할 때마다 사용할 수 있었습니다”라고 밝혔습니다. 이것으로 Meta JavaScript SDK를 래핑하여 노드 멀티플레이어 서버와 소통할 수 있었으며, 이 기능은 향후 Unity 릴리스에서 패키지로 출시하기 위해 작업 중이기도 합니다.

개발 속도를 향상하기 위해 안드레이 M.도 필요한 Meta API 호출을 모방하는 로컬 래퍼를 만들었습니다. 안드레이 M.은 “로컬 서버 구성, 프로그래밍 가능한 응답, 지연을 처리하는 API 호출에 집중했습니다”라고 설명했습니다.

자연스러운 플랫폼 확장

Coatsink 팀은 Messenger 사용자에게 원활한 Ready, Set, Cook! 경험을 제공하고자 했습니다. 플레이어의 게임 세션 참여 시간부터 로딩 시간까지 단축하려 했으며, 궁극적인 목표는 플랫폼을 자연스럽게 확장하는 것이었습니다.

그 일환으로 플레이어가 막힘없이 진행하고, 여러 기기에서 플레이하며, 친구들 곁에서 응원할 수 있는 직관적인 게임플레이를 제공하고자 했습니다. 이를 위해 팀은 로딩 화면에서 스크롤하여 확인할 수 있는 게임 기능 관련 팁, 편리한 플레이 방법 애니메이션, 인터랙티브 요소를 도입했습니다. 플레이어는 이러한 기능을 통해 혼란스러운 주방을 관리하면서도 친구들과 게임을 재미있게 즐길 수 있습니다.

Coatsink의 시니어 프로듀서 닉 테일러는 “Messenger를 이미 사용하는 사람들에게 자연스럽게 다가가고 화상 통화 경험을 확장하고 싶었습니다”라고 말합니다. “Meta 및 유니티와의 협업은 아주 원활하게 이루어졌으며, 결과적으로 많은 성과를 거두었죠.”

Unity 6가 여는 새로운 가능성

Unity 6는 어느 플랫폼에서나 직접 빠르고 쉬운 게임 제작을 목표로 만들어졌습니다. Unity 6는 Unity Hub를 통해 다운로드할 수 있습니다.