웹 게임을 만드는 데 필요한 5가지 기초

플레이어가 모바일 마켓플레이스에서 다운로드하거나 계정을 만드는 과정을 거치지 않아도 빠르게 이용할 수 있는 게임 경험을 제공한다고 생각해 보세요. 브라우저를 활용하거나 웹 뷰를 통해 네이티브 애플리케이션에 임베드하는 방법으로 어디서든 손쉽게 플레이어에게 도달할 수 있는 웹 기반 게임의 가능성은 무궁무진합니다.

최근에는 웹 플랫폼 중에서도 모바일에서 플레이어 참여도가 급증하고 있으며 이러한 추세는 계속될 것으로 보입니다. 2023년 전 세계 브라우저 게임 시장의 매출은 약 150억 3,000만 달러를 기록했습니다. 콘솔과 모바일 게임 장르의 성장에도 불구하고 브라우저 게임의 연간 매출은 2028년에 223억 3,000만 달러까지 성장할 것으로 전망됩니다.

포괄적인 내용을 다루는 이 전자책에서는 초보 크리에이터와 숙련된 개발자 모두를 대상으로 Unity Web을 사용하여 고성능 웹 게임을 제작하는 데 필요한 5가지 기초를 알아봅니다. Ready, Set, Cook!, Kasama: The Awakening, SquadBlast, Project Prismatic 같은 인기 타이틀이 웹에서 구현된 과정도 살펴볼 수 있습니다.

여기에서 다루는 유용한 정보는 다음과 같습니다.

1. 계획 및 프로토타이핑 우선하기

2. 동적 UI 구현하기

3. 조화로운 오디오 및 비주얼 경험 제작하기

4. 최적화, 최적화, 최적화.

5. 여러 웹 플랫폼으로 배포하기

1. 계획 및 프로토타이핑 우선하기

웹 플랫폼의 주요 이점은 전 세계의 플레이어에게 빠르게 게임을 제공할 수 있다는 점입니다. 하지만 뛰어난 경험을 제공하려면 견고한 디자인 기반을 두고 게임을 제작해야 합니다.

비전 설정하기

명확한 비전을 설정하면 개발 과정에서 팀에 도움이 됩니다. Stratton Studios는 브라우저 기반 게임에서 구현할 수 있는 성능과 시각적 정확도의 한계를 초월하고 싶었습니다. 웹 환경에서 기존 플랫폼에 뒤지지 않는 최고의 플레이어 경험을 제공한다는 목표를 세웠죠.

Stratton Studios의 매니징 디렉터 조쉬 로버리지는 이렇게 말합니다. “이러한 비전이 있었기에 한마음 한뜻으로 프로토타입을 만들고, 반복 작업(iteration)을 진행하고, 개발을 진행하며 일관되고 목적에 맞는 결정을 내릴 수 있었습니다.”

이 게임 제작의 첫 단계는 특히 타게팅하는 중급 하드웨어의 제약을 고려했을 때 안정적인 성능을 유지하면서도, 목표로 삼은 생동감 넘치는 환경을 구현할 수 있게 만드는 것이었습니다. 이 덕분에 이후 게임을 개발하는 과정에서 필요한 기술적 기반이 마련되었습니다.

로버리지는 이렇게 말합니다. “먼저 드로우 거리가 크게 설정된 테스트 씬을 만들고 게임의 미관에 중요한 무성한 나뭇잎, 다양한 터레인, 정교한 디테일을 렌더링할 수 있는지 확인했습니다. 새로운 WebGPU 그래픽스 API를 활용해서 씬이 예상대로 멋지게 표현되고 다양한 기기에서 원활하게 작동하는지 테스트할 수 있었죠.”

초기부터 테스트하기

ULTRAHORSE 팀은 제작 초기에 핵심 게임플레이 메카닉을 개발하는 데 집중했습니다. 런앤건 횡스크롤 멀티플레이어 슈팅 요소를 확실하게 구현하여 재미있고 매력적인 게임을 선보이고 싶었죠. 우선 대형 화면, 콘솔, PC에서 기본 요소를 확인하기 시작했습니다.

“그런 다음 빠르게 플레이어 테스트 단계로 넘어갔습니다. Antidote 같은 서비스를 통해 초기 베타 빌드를 온라인 플레이어에게 선보였고, 런던에서 열린 WASD 엑스포 같은 행사에서 초기 베타를 선보였죠”라고 CEO 겸 공동 창업자 아나톨리스 로포토프는 밝혔습니다. “그런 과정을 통해 핵심 메카닉을 검증하고 제대로 작동하는 부분과 그렇지 않은 부분에 대한 피드백을 즉시 받을 수 있었습니다.”

PIGIAMA KASAMA 팀도 초기부터 빠르게 프로토타이핑하고 아이디어를 테스트해야 한다는 데 동의합니다. Kasama: The Awakening을 제작하는 과정은 캐릭터를 정의하고 내러티브 개요를 작성하는 부분부터 시작되었습니다. 스토리, 주인공, 게임플레이를 깊게 연결하고 싶었기 때문입니다. Gravity Sketch VR에서 간단한 3D 환경을 제작한 다음 Unity로 넘어가 핵심 퍼즐 메카닉을 제작하고 테스트했습니다.

이렇게 실용적인 접근 방식 덕분에 지나치게 많은 시간을 투자하는 일 없이 메카닉이 원활하게 작동하는지 확인할 수 있었습니다. 메카닉과 스토리에 대해 확신이 들자, 애초에 만들려고 했던 경험에 가장 잘 어울리는 퍼즐 어드벤처 형식으로 게임을 제작하기로 결정했습니다.

PIGIAMA KASAMA의 공동 창업자 파리데 스텔라는 이렇게 말합니다. “상호 작용이 제대로 작동한다고 확신할 때까지 테스트 과정에서 여러 번 반복 작업을 수행합니다. 주요 게임플레이가 완성되면 컨셉 아트 작업으로 넘어가서 게임의 스토리와 전반적인 분위기에 맞도록 수정하죠.”

장애물에 대응하기

게임 개발에서 흔히 있는 일이지만, Stratton Studios는 프로토타이핑 도중 기술적인 제약에 직면하게 되어 초기 비전을 수정하고 더 바람직한 아이디어를 떠올렸습니다.

로버리지는 이렇게 밝혔습니다. “최고의 결과물을 얻기 위해 수정하는 작업은 모두 제작 과정의 일부입니다. 예를 들어 저희는 레벨 디자인을 크게 수정해야 하는 경우도 있었죠. 원래 구상했던 방식은 더 자유로운 형태의 오픈 환경이었지만, 작업을 진행하다 보니 구현 중이던 육각형 타일 오클루전 컬링 시스템에서 효율적으로 작동하지 않는다는 사실을 알게 되었거든요.”

특히 웹 기반 환경에서는 성능을 유지하기 위해 화면의 토폴로지를 크게 줄여 렌더링 프로세스를 최적화했습니다. 그 과정에서 레벨 디자인을 육각형 타일 사분면으로 재구성한 결과, 가시성과 컬링을 더 효과적으로 관리하여 명확한 문제 지점에 더욱 집중할 수 있게 되었습니다. 그렇게 게임플레이를 개선하고 다양한 기기에서 원활하게 게임이 실행되도록 만들 수 있었죠. 이 작업으로 창의적인 비전과 기술적인 성능 요구 사항 간의 균형을 맞출 수 있었던 것입니다.

계획을 잘 세우면 개발 과정에서 발생하는 문제의 영향을 줄일 수 있지만, 아무런 문제도 발생하지 않는 것은 불가능하다는 점을 꼭 명심하세요.

2. 동적 UI 구현하기

웹은 게이머가 어디서든 가장 쉽게 액세스할 수 있는 플랫폼이지만 모든 브라우저가 서로 동일하지는 않습니다. 게임의 UI를 디자인할 때는 다양한 화면 크기, 가로 및 세로 모드, 게임을 호스팅하는 앱의 UI 관련 고려 사항을 모두 감안해야 합니다.

플레이어 경험을 최우선으로 생각하기

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

Coatsink의 주니어 디자이너 카밀 바지들로는 이렇게 전했습니다. “게임을 구성하는 여러 측면을 디자인하면서 항상 최우선으로 고려한 것은 관전 경험입니다. 관전 기능은 다른 플랫폼의 모든 게임 장르를 통틀어 흔한 기능은 아니지만, 플레이어가 화상 통화로 플레이하므로 게임 전반에서 포용적인 사용자 참여 환경을 구현하는 것이 중요했죠.”

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

UI 문제 극복하기

ULTRAHORSE 팀이 해결해야 했던 심각한 과제는 마우스 및 키보드, 컨트롤러, 터치스크린 중 무엇을 사용하더라도 똑같이 즐길 수 있는 게임플레이 경험을 제작하는 것이었습니다. 진정한 크로스 플랫폼 게임을 제작한다는 비전에서 매우 중요한 과제였죠.

“초기에 다양한 게임 스타일을 테스트했지만, 기존의 많은 슈팅 게임 포맷에서 주로 선호되는 입력 방식이 있다는 사실을 알게 되었죠. 그래서 SquadBlast를 횡스크롤 슈팅 포맷으로 제작하게 되었습니다”라고 로포토프는 말합니다. “2D 평면에서 마우스로 정밀하게 조준하고, 컨트롤러로 직관적으로 조작하며, 모바일 기기에서는 설명이 필요 없는 간단한 터치 조작이 가능하다는 것을 깨달았습니다.”

PC에서 모바일 웹 개발로 전환하며 팀은 예상치 못한 문제에 직면했습니다. 처음에는 마우스 커서를 올리면 작동하는 UX 요소를 넣어 완성도 높은 PC 경험을 개발했습니다. 이를 통해 큰 화면과 정밀한 마우스 조작의 이점을 활용하는 풍부하고 디테일한 인터페이스를 제작할 수 있었죠. 툴팁, 마우스 커서 등의 복잡한 메뉴 구조를 활용하여 플레이어에게 정보와 선택지를 제공했습니다.

이로 인해 어떤 정보를 어떻게 표시할지에 대한 어려운 결정을 내려야 하기도 했습니다. 마우스 커서나 복잡한 툴팁 등 PC에서나 적합한 요소를 활용하기는 어려웠으므로 쉽게 이해할 수 있는 UI를 만들어야 했기 때문입니다. 모든 요소를 첫눈에 알아볼 수 있게 만들려면 시각 언어와 아이콘을 조정해야 했죠.

스크린 공간에 따라 조정하기

ULTRAHORSE 팀은 터치 입력을 디자인하는 과정에서도 문제에 직면했습니다. PC는 정밀한 커서 조작을 기대할 수 있었으나, 모바일은 손가락 탭의 정확도가 떨어지며 클릭을 잘못할 수 있다는 점을 고려해야 했죠. 따라서 터치 타겟의 크기를 더 키우고 UI 요소 간격을 더 여유롭게 두어야 했으므로, 한 번에 표시할 수 있는 정보의 양은 그만큼 줄어들게 되었습니다.

확대 및 축소가 가능하고 유연한 UI 요소의 중요성도 깨달았습니다. 모바일 기기의 크기와 종횡비가 다양한 점을 고려해, 여러 화면 구성과 DPI에 따라 원활하게 조정되는 UI를 제작해야 했습니다. 따라서 주어진 스크린 공간에 따라 자동으로 조정되는 더 강력한 UI 시스템을 개발했습니다. 이렇게 모바일 웹에 맞춰 UI를 간소화한 과정은 모든 플랫폼에서 SquadBlast의 UI를 개선하는 데 도움이 되었습니다.

게임 컨트롤 개선하기

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

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

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

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

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

3. 조화로운 오디오 및 비주얼 경험 제작하기

크리에이터는 고급 그래픽스와 동적 오디오 기능을 활용하여 브라우저에 필요한 최적화와 관계없이 게임 경험을 향상할 수 있습니다. 말처럼 쉽지는 않고 흔히 발생하는 병목 현상도 신중하게 고려해야 하지만, 기술의 발전에 힘입어 지금은 웹에서도 과거에 비해 뛰어난 시각 및 청각적 정확도를 구현할 수 있게 되었습니다.

수준 높은 복잡한 그래픽 구현

Stratton Studios의 목표는 비주얼 정확도가 높고 디테일한 환경의 게임을 제작하는 것이었습니다. 그러려면 WebGL이 제공하는 수준보다 높은 그래픽 성능과 유연성이 필요했습니다.

로버리지는 이렇게 말합니다. “WebGL은 훌륭하지만 성능 병목 현상과 컴퓨트 셰이더 및 GPU 스키닝 부족 등의 제약이 있어 아트 부문의 목표를 타협해야 할 수 있습니다.”

팀은 고급 셰이딩, 조명 효과, 컴퓨트 셰이더를 통한 정교한 텍스처를 활용하는 등 그래픽 복잡도를 높이기 위해 WebGPU로 전환했습니다. 그 결과 브라우저에서도 밀도 높은 멋진 환경을 렌더링하고 안정적으로 높은 프레임 속도를 유지할 수 있었습니다.

기기의 그래픽 카드 활용도를 높일 수 있는 WebGPU의 향상된 성능은 팀이 구상한 풍부한 몰입형 경험을 구현하여, 주로 데스크톱과 콘솔 게임에서 기대할 만한 디테일과 원활한 성능을 플레이어에게 제공하는 데 필수적인 요소였습니다.

성능과 WebGPU 관리하기

Stratton Studios는 WebGPU를 채택하여 필요로 하던 고급 기능을 얻게 되었지만, 아트 관련 목표를 유지하려면 해결해야 할 특별한 과제도 마주하게 되었습니다. 주요 과제 중 하나는 다양한 기기에서 성능을 최적화하는 것이었습니다. 비교적 새로운 기술인 WebGPU에서 일관된 성능과 호환성을 구현하기 위해서는 여러 조정이 필요했으므로 팀은 몇 가지 안전장치를 마련했습니다.

또 다른 과제는 사용하는 셰이더와 렌더링 기법의 복잡도를 관리하는 것이었습니다. 로버리지는 이렇게 말합니다. “WebGPU는 GPU 스키닝이나 컴퓨트 셰이더처럼 더 정교한 렌더링 기법을 사용할 수 있지만, 신중하게 처리하지 않으면 성능 병목 현상이 발생할 가능성이 높아집니다. 프레임 속도 저하나 GC(가비지 컬렉션) 스파이크 같은 성능 문제를 일으키지 않으면서 고품질 비주얼을 제공하려면 셰이더를 신중하게 최적화하고 간소화해야 했습니다.”

WebGPU는 비교적 새로운 기술이므로, 특히 덜 일반적인 하드웨어 구성에서는 검은 화면이 무작위로 출력되거나 NaN 픽셀로 블룸 효과가 커지는 등 예상치 못한 현상이 발생하기도 했습니다. 문제 해결을 위해 팀은 다양한 기기와 브라우저에서 철저한 테스트를 진행하는 데 더 많은 시간을 투자하여 게임이 플랫폼과 관계없이 정상적으로 표시되고 일관되게 작동하도록 만들었습니다.

“문제를 해결하기 위해 철저한 성능 모니터링 시스템을 구현하여 개발 과정에서 실시간으로 문제를 탐지하고 해결했습니다”라고 로버리지는 말합니다. “WebGPU 덕분에 저희가 목표하던 아트를 구현할 수 있었지만, 이와 동시에 최첨단 웹 기술을 사용하며 발생하는 걸림돌을 신중한 관리와 노력을 통해 해결해야 했습니다.”

조명 구현하기

“조명은 매우 중요하면서도 웹 게임에서 구현하기 쉽지 않은 요소입니다”라고 스텔라는 말합니다. 이렇듯 PIGIAMA KASAMA 팀은 게임의 정확도 수준에 맞는 조명을 구현해야 했습니다.

조명은 게임플레이 메카닉에도 중요했습니다. 팀에서는 조명을 통해 긴장감을 조성하고, 플레이어의 이동을 안내하며, 게임 내 중요한 영역이나 오브젝트를 강조했습니다. 동적 효과로 스토리의 주요 순간과 전환을 강조했습니다. 공동 창업자 마테오 판킨은 이렇게 말합니다. “베이크된 조명을 최대한 많이 사용하고 싶었어요. 이 방법을 사용하면 정확도가 떨어지는 플랫폼에서도 고품질 조명을 비슷하게 구현할 수 있거든요.”

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

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

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

리소스 제한 때문에 아트 관련 요소 몇 가지를 조정하여 성능을 향상했습니다. 어두운 영역으로 요소를 숨기는 방법은 폴리곤과 스킨드 메시의 수를 최적화하는 데 도움이 되었습니다. “밝은 영역에 더 많은 디테일을 추가했습니다”라고 판킨은 말합니다.

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

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

그리고 3단계에 걸친 철저한 기술 프로세스를 거쳐 오디오를 제작한 후 게임에 구현했습니다.

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

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

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

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

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

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

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

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

4. 최적화, 최적화, 최적화.

플레이어 이탈을 방지하려면 플레이어가 게임을 최대한 빨리 실행하고 플레이 내내 멋진 경험을 즐길 수 있어야 합니다. 기대치는 높고 시간은 한정적입니다. 사용자의 참여를 유지하기 위한 핵심은 최적화하고, 테스트하고, 더 최적화하는 것입니다.

파일 크기 축소

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

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

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

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

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

Stratton Studios는 개발 과정에서 파일 크기와 로딩 시간을 모두 크게 줄일 수 있었습니다. 약 400MB의 초기 게임 페이로드는 웹 기반 경험에 너무 큰 크기였습니다.

로버리지는 이렇게 설명합니다. “에셋을 압축하고, 코드를 분할하고, Unity의 어드레서블 에셋 시스템을 활용하는 등의 최적화 과정을 거쳐 초기 페이로드의 크기를 29MB로 줄일 수 있었습니다.”

이렇게 크기가 대폭 줄어든 결과 로딩 시간이 상당히 짧아졌을 뿐만 아니라, 초기 로딩이 빨라지고 전반적으로 원활한 플레이어 경험을 제공하여 더 많은 플레이어들이 Project Prismatic을 플레이하게 되었습니다.

ULTRAHORSE 팀은 초기에 200MB였던 다운로드 번들 크기를 출시 때 133MB로 줄일 수 있었습니다. 그런 다음 필수 번들 21MB와 온디맨드 번들 112MB로 나누었습니다. 로포토프는 이렇게 말합니다. “CPU 로딩 시간을 처음보다 3배 이상 단축할 수 있었어요. 프로파일링, 최적화, 불필요한 번들 비활성화가 커다란 역할을 했죠.”

로딩 시간 최적화

Stratton Studios는 페이로드 크기를 줄이고, 에셋 전송을 개선하고, 전반적인 효율성을 향상하여 로딩 시간을 최적화하는 데 집중했습니다. Unity의 빌트인 에셋 압축 기능을 사용하여 텍스처, 오디오 및 기타 에셋의 크기를 최소화하고 텍스처 아틀라싱도 전반적으로 활용했습니다.

비필수 에셋에 지연 로딩을 구현하여 게임이 핵심 컴포넌트부터 로드하고 추가 콘텐츠는 필요에 따라 어드레서블 프레임워크를 통해 백그라운드에서 점진적으로 로드하도록 만들었습니다.

팀은 어드레서블 에셋 시스템을 사용하여 필요할 때마다 에셋을 로드하며 효율적으로 관리했습니다. 이를 통해 플레이어가 게임을 진행함에 따라 에셋을 동적으로 로드하여 항상 필요한 데이터만 로드할 수 있었죠.

Unity의 CCD(Cloud Content Delivery) 프레임워크를 이용하여 지리적으로 가까운 서버에서 에셋을 제공할 수 있었습니다. 덕분에 에셋을 백그라운드에서 로드하면서 모든 플레이어의 지연 시간과 다운로드 시간을 단축할 수 있었습니다.

첫 로드 후에는 에셋이 플레이어 기기에 저장되도록 하여 다음 로드 시 걸리는 시간을 대폭 줄였습니다. 코드를 관리하기 쉬운 작은 단위로 나누어 게임플레이 시작에 필수적인 코드만 먼저 로드하고 추가 기능과 모듈은 비동기식으로 로드하도록 만들기도 했습니다.

테스트 및 디버깅 툴

Stratton Studios 팀은 WebGPU를 사용하며 발생한 성능 제약을 해결하기 위해 프레임 디버거를 사용하여 고해상도 텍스처, 복잡한 셰이더, 넓은 드로우 거리 같이 리소스를 매우 많이 사용하는 요소를 식별했습니다. 그런 다음 비주얼 품질을 크게 저하하지 않으면서 로딩 시간을 줄이기 위해 일련의 최적화를 구현했습니다.

로버리지는 이렇게 말합니다. “텍스처 아틀라스를 활용하여 텍스처 로드 수를 최소화하고, 덜 중요한 영역의 폴리곤 수를 줄이고, 먼 거리의 토폴로지에 무광택 페인팅을 적용하여 렌더링 비용을 줄였습니다. LOD(디테일 수준) 기법도 적용하여 먼 거리의 오브젝트 렌더링을 더 효율적으로 관리할 수 있었습니다.”

주된 과제는 성능과 비주얼 품질 간의 균형을 맞추는 것이었습니다. 로버리지는 말합니다. “게임의 가장 까다로운 부분을 최적화하는 데 집중하고 Unity에서 제공하는 툴을 적절하게 사용하여 다양한 기기에서 원활하게 작동하며 시각적으로 풍부한 경험을 구현할 수 있었습니다. 이러한 접근 방식을 통해 목표하던 아트를 구현하면서도 모든 플레이어가 하드웨어와 관계없이 쉽게 플레이하고 즐길 수 있는 게임을 만들 수 있었습니다.”

Project Prismatic을 디버깅하기 위해 Unity 프로파일러를 사용하여 CPU 및 GPU 사용량, 메모리 할당, 프레임 속도를 비롯한 성능 지표를 추적하기도 했습니다. 이를 통해 성능 병목 지점을 파악하고 특히 리소스가 많이 소모되는 영역에서 게임의 성능을 최적화할 수 있었습니다.

또한 Unity Cloud Diagnostics를 통해 실제 사용자로부터 크래시 리포트와 예외 오류를 수집할 수 있었습니다. 이 과정으로 개발 단계에서는 발견하지 못했을 수 있는 문제에 대한 귀중한 인사이트를 얻을 수 있었습니다.

5. 여러 웹 플랫폼으로 배포하기

스튜디오 전문가들이 거듭 강조하는 팁 중 하나는 ‘다양한 플랫폼의 플레이어에게 도달하라’는 것입니다. 웹 게임을 개발하면 쉽고 빠르게 접근할 수 있는 게임 경험을 게이머에게 제공할 수 있습니다. 게이머들이 그 어느 때보다 다양한 하드웨어, 빠른 연결 속도, 강력한 기기를 활용할 수 있는 지금, 다양한 웹 플랫폼에 배포하기 위한 모든 옵션을 고려하는 것이 중요합니다.

여러 플랫폼에서 조정

PIGIAMA KASAMA 팀은 멀티플랫폼 웹 출시를 위해 Spatial과 협력하면서 해당 플랫폼에 어울리는 파이프라인인 URP(유니버설 렌더 파이프라인)를 도입했습니다. URP의 크로스 플랫폼 호환성과 커스터마이징 기능 덕분에 쉽게 확장할 수 있었으므로 웹 플랫폼에 배포할 때는 URP의 유연성과 효율성이 특히 중요했습니다.

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

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

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

간단하게 렌더링

Stratton Studios도 URP를 사용하여 성능과 확장성 간의 균형을 맞췄습니다. 커스텀 렌더 파이프라인 패스를 손쉽게 생성할 수 있는 URP의 기능을 핵심적으로 활용했죠. 이러한 유연성을 활용해 렌더링 프로세스를 조정하여 요구 사항을 충족하고, 특정 시각 효과를 최적화하며, 커스텀 셰이더를 구현한 결과, 게임의 전반적인 디자인(look and feel)을 향상하면서 성능도 유지할 수 있었습니다.

로버리지는 이렇게 말합니다. “특히 타겟 플랫폼의 성능에 따라 특정 기능을 활성화하거나 비활성화할 수 있는 URP의 모듈성을 유용하게 활용했습니다. 이를 통해 다양한 기기에서 게임을 최적화하면서도 일관된 비주얼 경험을 유지할 수 있었죠.”

멀티플랫폼 출시의 이점

게임을 여러 플랫폼에 출시하면 계획 과정에서 고려해야 할 워크플로의 차이점이 늘어나기는 해도 많은 장점이 있습니다.

로포토프는 이렇게 설명합니다. “SquadBlast를 웹과 기타 플랫폼에 출시하여 더 많은 플레이어에게 도달할 수 있습니다. 플레이어가 게임을 실행하기 위해 다운로드하거나 설치할 것이 없으므로 시작에 따른 진입 장벽을 상당히 낮출 수 있죠.”

ULTRAHORSE 팀은 배포도 중요한 요소로 고려했으며, 웹 버전을 출시한 결과 다른 방식으로는 기대하기 어려웠을 새로운 채널에 도달할 수 있었습니다.

처음에는 자체 웹 포털 SquadBlast.com에 SquadBlast를 출시했습니다. 그 결과 팀은 빠르게 반복 작업하고, 플레이어의 즉각적인 피드백을 받으며, 신속하게 개선할 수 있는 테스트 기반을 확보했습니다. 그런 다음 CrazyGames와 같은 대형 웹 게임 포털로 확장하여 팀의 판도를 바꾸었습니다.

로포토프는 말합니다. “월간 액티브 사용자 수가 수천만 명에 달할 정도로 엄청난 수의 플레이어에게 도달할 수 있습니다. 이 포털에 SquadBlast를 출시한 결과, 다른 배포 채널로는 기대하기 어려운 수많은 플레이어에게 게임을 제공할 수 있었어요.”

메시징 앱이나 소셜 미디어 플랫폼처럼 웹 게임을 임베드할 수 있는 다른 플랫폼에서도 기회를 찾고 있습니다. 로포토프는 이렇게 밝혔습니다. “이 플랫폼들이 지닌 도달 잠재력은 엄청나며 Unity 6의 향상된 모바일 웹 기술 최적화를 통해 차세대 플랫폼에 게임을 통합할 수 있을 것입니다.”

맺는말

이 전자책에서는 성공적인 웹 게임을 개발하기 위한 5가지 원칙을 살펴봤습니다. 다음은 전문가들이 공유하는 웹 개발 관련 팁입니다.

웹 게임을 개발하거나, 다른 플랫폼의 게임을 웹으로 포팅하는 것을 고려 중이거나, 새로운 정보를 찾고 있다면 전문가들의 인사이트에서 가치와 영감을 얻을 수 있으셨기를 바랍니다.

Unity 6가 여는 새로운 가능성

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