PIGIAMA KASAMA가 웹 게임 Kasama: The Awakening의 크기를 218MB 줄인 방법

PIGIAMA KASAMA에서 제작한 Kasama: The Awakening은 여러 에피소드로 구성된 스토리 중심의 웹 기반 어드벤처 게임입니다. 이 게임을 웹에 맞게 개발하기 위해서는 높은 시각적 정확도를 유지하면서 여러 기기에서 최적의 성능을 발휘하도록 만들어야 했습니다. 그 목표를 달성한 방법을 소개해 드리겠습니다.

웹에서 감성을 자극하는 멋진 비주얼의 경험을 선보이기 위해 스튜디오는 어떤 노력을 기울일까요?

2년 동안 다른 브랜드의 게임을 제작해 온 PIGIAMA KASAMA 팀은 내러티브 중심의 독창적인 게임이 웹에서 인기를 끌 것이라고 확신했습니다. Kasama: The Awakening은 VR 및 데스크톱 격투 게임으로 시작했지만 여러 에피소드로 구성된 퍼즐 어드벤처로 게임의 방향을 틀기로 결정했습니다.

카스타니아(Kastania)의 월드를 경험해 보실 수 있도록 게임을 임베드했습니다.

오랫동안 Unity로 개발해 온 스튜디오 창립자 마테오 판킨과 파리데 스텔라는 창작의 자유, 높은 시각적 정확도, 훌륭한 플레이어 경험 그리고 멀티플랫폼 지원 등 유사한 우선순위를 가진 플랫폼 개발 및 출시 파트너를 찾고자 했습니다.

판킨은 이렇게 말합니다. “Spatial이 UGC(사용자 생성 콘텐츠)를 위한 궁극의 플랫폼이라는 것을 알게 되었습니다. Spatial의 프로세스 간소화 기능과 플레이어에게 제공되는 접근성을 Unity로 제작하며 얻는 유연성과 결합하여 웹 게임의 오디오, 비주얼, 경험의 한계를 뛰어넘을 수 있었어요.”

Spatial 팀도 PIGIAMA KASAMA 팀과의 협업이 가치 있는 작업이었다고 전했습니다. DevRel 총괄 제이크 스테이너만은 “저희는 크리에이터가 웹, 모바일, VR에서 초고품질의 경험을 제공할 수 있도록 플랫폼을 만들었습니다. Kasama: The Awakening의 초기 빌드와 다른 작업을 보면서 이를 지원해야 한다는 사실을 알 수 있었어요.”

현 상황에서 직면한 문제

PIGIAMA KASAMA 팀은 창의력, 전문성, Unity 및 Spatial의 지원까지 갖추고 있었지만 비전을 실현하기에는 많은 어려움이 남아 있었습니다. 그중 하나는 높은 시각적 정확도를 유지하면서 여러 기기에서 게임 성능을 최적화하는 것이었습니다. 스텔라는 이렇게 설명합니다. “WebGL의 한계로 인해 그래픽스, 게임플레이 메카닉, 전반적인 사용자 경험을 혁신적으로 구현할 방법이 필요했습니다.”

비주얼과 성능 기대치를 충족하려면 품질을 낮추지 않으면서 빌드 크기를 줄여야 했습니다. 따라서 Unity의 URP(유니버설 렌더 파이프라인), Shader Graph, 애니메이션 시스템, 빌트인 애니메이션 압축 기능을 활용하기로 결정했습니다.

결과

• 게임의 텍스처 메모리가 264MB에서 140MB로 감소
• 메시 버텍스 수가 550,000개에서 351,000개로 감소
• 오디오 메모리가 86MB에서 9MB로 감소
• UI 스프라이트 크기가 45MB에서 28MB로 감소
• 고유 머티리얼 수가 75개에서 57개로 감소
• 저사양 기기에서의 성능이 초반 4fps에서 최소 30fps로 향상
• 출시 후 7주 동안 80,000회 이상의 플레이 누적

제한된 리소스를 최대한 활용하기

스튜디오에서는 처음부터 리소스 제한을 최대한 고려하되 재량에 따라 시각적 정확도를 높이거나 낮출 수 있는 유연성과 대역폭을 확보한다는 디자인 접근 방식을 선택했습니다. 컴퓨팅 역량과 메모리 제한이 가장 큰 문제인 것으로 드러났으며, 성능을 유지하려면 일부 텍스처의 해상도를 낮춰야 했습니다. 스텔라의 말에 따르면 “가장 잘 보이는 위치에 제일 품질이 높은 텍스처를 배치했습니다”라고 합니다.

팀에서는 가능한 한 최소한의 리소스만 사용했고 이러한 접근 방식은 모든 요소에 영향을 미쳤습니다. 머티리얼의 수를 최대한 적게 유지하기 위해 폴리곤 수와 텍스처 크기를 줄였습니다. 지오메트리의 버텍스 정보에 대응하는 2차원 텍스처 좌표인 UV도 최적화했습니다.

“카메라의 움직임은 정해진 범위에서 매우 제한적으로 발생하므로 텍스처링 프로세스 전에 모든 지오메트리에 적극적으로 오클루전 컬링을 적용하여 모든 폴리곤과 픽셀을 최대한 활용할 수 있었습니다”라고 판킨은 말합니다. “이 과정을 거치면 Unity가 뷰에서 완전히 가려진 게임 오브젝트의 렌더링을 계산하지 않습니다.”

애니메이션도 크기를 줄였습니다. Unity 애니메이션 시스템의 휴머노이드 애니메이션 타입을 메카님 애니메이션 리타게팅 시스템과 함께 사용했죠. Unity의 빌트인 애니메이션 압축 프로세스도 프로젝트 애니메이션의 전체 크기를 줄여서 성능을 최적화하는 데 도움이 되었습니다. 특히 캐릭터 얼굴 표현에 활용되는 모션 캡처 애니메이션을 줄이는 데 도움이 되었습니다. 지나치게 세밀하여 많은 양의 연산이 이뤄질 때가 있었기 때문입니다.

조명을 개선한 과정

스텔라가 조명은 매우 중요한 요소이며 웹 게임에서 구현하기 쉽지 않다고 말했듯, 게임의 정확도 수준에 맞는 조명을 구현할 수 있어야 했습니다. 조명은 게임플레이 메카닉에도 중요했습니다. 팀에서는 조명을 통해 긴장감을 조성하고, 플레이어의 이동을 안내하며, 게임 내 중요한 영역이나 오브젝트를 강조했습니다. 동적 효과로 스토리의 주요 순간과 전환을 강조했습니다.

판킨은 이렇게 말합니다. “베이크된 조명을 최대한 사용하고 싶었어요. 이 방법을 사용하면 정확도가 떨어지는 플랫폼에서도 향상된 느낌의 조명을 구현할 수 있거든요.”

씬 로딩 없이 환경의 조명을 전환하고 광원이 켜졌을 때 동적인 조명 변화를 구현하는 과제도 해결해야 했습니다. 라이트맵을 실시간으로 조작하는 커스텀 셰이더를 사용하여 모든 것을 플랫하게 만들고 동적 광원인 것 같은 착각을 일으켰습니다. 스텔라는 이렇게 설명합니다. “핵심은 게임 디자인과 환경 디자인을 나누지 않고 하나의 프로세스로 진행하는 것입니다. 모든 요소가 서로를 보완해야 하죠.”

Shader Graph로 제작한 커스텀 셰이더는 ‘악몽 시퀀스’라고 불리는 장면에서 특히 유용하게 활용되었습니다. 이 셰이더는 검은 진흙으로 맵을 뒤덮으며 조명을 상쇄하여 환경을 흑백으로 렌더링합니다.

“플레이어가 조명을 켜면 셰이더가 효과를 반전하여 조명이 활성화되고 빛을 받는 영역에서 검은 진흙이 사라지는 착시를 일으킵니다”라고 판킨은 말합니다.

이 커스텀 셰이더는 수많은 밤이 터지는 다른 챕터에서도 아주 유용하게 활용되었습니다. 각 밤을 개별 엔티티로 처리하는 것은 비현실적이었으므로 단일 메시로 그룹화하고 셰이더를 사용하여 흔들림과 폭발을 관리했습니다.

각 밤은 폭발 시퀀스에 대응하여 UV 그리드에 왼쪽에서 오른쪽으로 매핑되며 맨 위에 놓인 밤부터 폭발합니다. 셰이더가 인덱스에 따라 사전 정의된 밤 그룹을 선택할 때 다른 스크립트는 밤이 폭발할 정확한 장소에 파티클 시스템 폭발을 배치합니다.

“이 접근 방식으로 성능 오버로드 없이 대량의 지오메트리와 복잡한 행동 규칙을 효율적으로 관리하여 웹 성능 요구 사항을 충족할 수 있었습니다”라고 스텔라는 설명합니다.

빌드 크기 제한 때문에 아트 관련 요소 몇 가지를 조정하여 성능을 향상했습니다. 어두운 영역에서는 요소를 숨기기로 했죠. 덕분에 폴리곤과 스킨드 메시 수를 최적화할 수 있었습니다. “밝은 영역에 더 많은 디테일을 추가했습니다”라고 판킨은 말합니다.

오디오 제작 파이프라인 관리

음향 디자인은 게임플레이 속도부터 환경 및 상호 작용 디자인까지 영향을 미쳤으며 플레이어가 감정적으로 빠져들게 하면서 스토리를 이끌었습니다. PIGIAMA KASAMA 팀은 각 에피소드의 분위기와 속도에 맞춰 사운드트랙을 제작했습니다. 성우와 협력하고 언어학자를 고용해 새로운 언어를 만들어 내기도 했습니다. 게임의 몰입도를 높이는 오디오 경험을 만드는 것이 이들의 목표였기 때문입니다.

“경험이나 제품의 오디오가 좋지 않으면, 그게 들리게 됩니다. 오디오가 좋으면 거슬리지 않죠”라고 스텔라는 말합니다.

이들은 3단계에 걸친 철저한 기술 프로세스를 통해 오디오를 제작한 후 게임에 통합했습니다.

1단계: 오디오 클립 통합 및 믹싱/마스터링

첫 번째 단계에서는 여러 오디오 클립, 특히 앰비언트 사운드스케이프와 게임 사운드트랙 같은 반복되는 음향을 통합했습니다. 이 프로세스를 단발성 음향 효과까지 확장하고 이를 겹쳐 단일 트랙으로 만들었습니다. 이렇게 수정된 음향은 믹싱 및 마스터링 과정에서 통합되었습니다. 그 결과 다양한 재생 환경에서도 오디오 다이내믹스와 전반적인 균형이 일관되게 유지되는 통합 클립을 만들 수 있었습니다. 이 단계는 특히 게임에서 원활하게 전환되어야 하는 반복 시퀀스에 일관성을 확보하고 조화로운 오디오 경험을 제공하는 데 아주 중요했습니다.

2단계: 최적화된 압축 표준 포맷으로 전환

두 번째 단계에서는 일반적인 AIFF 또는 FLAC 포맷의 정확도 높은 원본 오디오 파일을 OGG 포맷으로 전환했습니다. 오디오 품질 및 성능 효율 간의 균형을 유지하기 위한 업계 표준에 따라 48kHz 샘플 레이트 및 16bit 비트 뎁스로 전환했습니다. Vorbis 압축 코덱을 사용해 체감 오디오 품질 저하 없이 파일 크기를 상당히 줄일 수 있었습니다.

3단계: Unity에서 구현 및 조정

마지막 단계에서는 처리한 오디오 파일을 Unity에 통합했습니다. 이 과정에서 게임플레이 성능을 최적화하기 위해 긴 트랙은 스트리밍하거나 주요 음향 효과는 미리 로딩하는 등의 적절한 로딩 방법을 세심하게 선택해야 했습니다. 이들은 Vorbis 압축 설정을 조정하여 오디오 정확도와 리소스 사용량 간의 균형을 맞췄습니다.

음향 디자인에서의 역할과 원하는 수준의 게임 내 공간감에 따라 각 오디오 파일을 모노로 처리할지 스테레오로 처리할지도 신중하게 결정했습니다.

마지막 단계에서의 철저한 최적화 과정 덕분에 스토리지와 성능이 크게 개선되었습니다. OGG 포맷을 사용하고 압축 설정을 조정하니 오디오 에셋이 총 10MB 정도로 압축되었습니다. 미압축 AIFF 파일을 사용할 때 500MB, MP3급 파일을 사용할 때 100MB일 것으로 예상되는 것에 비해 훨씬 작은 용량입니다. 이렇게 게임의 전체 크기를 줄였을 뿐만 아니라 게임플레이 시 메모리를 효율적으로 사용하고 원활한 오디오 성능을 확보할 수 있었습니다.

멀티플랫폼 배포

멀티플랫폼 웹 출시를 위해 Spatial과 협력하면서 PIGIAMA KASAMA 팀은 해당 플랫폼에 어울리는 파이프라인인 URP를 도입했습니다. 15년 동안 CGI 일을 해온 디자이너인 스텔라는 다양한 목적으로 여러 툴을 사용해 봤으며 URP의 기능에 놀랐습니다.

“URP는 훌륭한 툴이에요. Kasama: The Awakening의 목표를 달성하는 데 필요한 기능을 빠르게 익힐 수 있었죠. URP 덕분에 생각했던 거의 모든 것을 구현할 수 있어서 정말 기쁩니다”라고 스텔라는 말합니다.

URP의 크로스 플랫폼 호환성과 커스터마이징 기능 덕분에 쉽게 확장할 수 있었으므로 웹 플랫폼에 배포할 때는 URP의 유연성과 효율성이 특히 중요했습니다.

스테이너만은 이렇게 설명합니다. “저사양 기기에서도 성능을 최적화할 수 있으며 개발자가 직접 제작한 셰이더를 사용할 수 있습니다. 미래에도 유용하게 활용하도록 제작되었죠.” “Spatial 플랫폼이 향후 Unity 버전을 지원하기 시작할 때는 URP도 함께 지원할 것으로 예상합니다.”

Spatial 서버는 개별 빌드를 생성하고 각 플랫폼을 최적화했습니다. PIGIAMA KASAMA 팀의 WebGL 빌드와 Android 및 네이티브 iOS용 개별 빌드를 지원하기도 했습니다. 플랫폼마다 목표 품질이 달랐습니다.

판킨은 이렇게 말합니다. “뎁스오브필드(피사계심도)는 WebGL에서 잘 작동하지만 일부 모바일 기기에서는 성능이 떨어집니다. 반면 오디오는 Android와 iOS에서 훨씬 성능이 좋죠.” “Android에서는 오디오 소스 내 특정 주파수의 음량을 조정할 수 있는 오디오 툴인 이퀄라이저와 필터를 사용할 수도 있겠지만 WebGL에서는 그렇게 할 수 없습니다.”

특정 요소는 모든 플랫폼에서 동일하게 유지하고 나머지 요소는 플랫폼별로 조정했습니다. 스텔라는 이렇게 요약합니다. “WebGL에서는 화면이 크기 때문에 고해상도 텍스처를 사용했고, 작은 모바일 화면은 저해상도 텍스처를 사용했습니다. 전반적인 멀티플랫폼 출시도 원활하게 진행됐고요.”

플레이어와 함께하는 여정

웹 게임을 제작하기로 결정한 PIGIAMA KASAMA 팀은 적절한 단위로 관리가 가능한 고품질 콘텐츠를 개발하는 방법을 찾아야 했습니다. 이들은 각 에피소드가 출시되면 플레이어의 피드백을 받아 향후 에피소드에 반영할 수 있도록 에피소드 단위의 출시 시스템을 선택했습니다. 이 방식은 빠르게 테스트하고 반복 작업(iteration)하는 데도 도움이 되었습니다.

스텔라는 이렇게 설명합니다. “플레이어 피드백과 새로운 기술을 바탕으로 개발 프로세스를 조정할 수 있는 유연한 로드맵을 구축했습니다. 모든 에피소드는 향후를 염두에 두고 계획되므로 시간이 지나며 내러티브와 게임플레이 메카닉이 자연스럽게 발전할 수 있습니다.”

이러한 출시 일정을 선택함에 따른 어려움도 있었습니다. 품질과 스토리텔링의 측면에서 모든 에피소드에 걸쳐 일관성을 유지해야 했습니다. 에피소드 단위로 출시하면 플레이어가 만족할 만한 콘텐츠를 제공하는 것과 다음 에피소드로 플레이어의 관심을 유지하는 것의 균형을 섬세하게 맞춰야 하므로 플레이어 기대치를 관리하는 것도 어려울 수 있습니다.

전반적으로 이들은 많은 것을 배울 수 있었고 이 지식을 다음 에피소드에 적용하는 것을 기대하고 있습니다. “얼마나 고품질의 WebGL 경험을 제작할 수 있는지 계속 보여 줄 수 있다는 것이 자랑스럽습니다”라고 판킨은 말합니다. “소규모 스튜디오로서 Unity 6나 WebGPU 같은 기술적 발전을 통해 무엇을 달성할 수 있을지 기대됩니다.”

Unity 6가 여는 새로운 가능성

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