웹 런타임 업데이트를 통한 브라우저 지원 강화

유니티는 유나이트 2023 행사에서 최신 웹 런타임 제품을 공개했습니다. 그 과정에서 많은 기대를 받은 모바일 브라우저 지원과 관련된 세부 사항을 추가로 공개했고, 데스크톱 브라우저에서의 그래픽스와 렌더링을 향상하기 위해 WebGPU를 활용하는 방법에 대한 초기 아이디어를 제시했습니다. 또한, Meta와의 파트너십을 통해 Facebook과 Messenger의 Instant Games 플랫폼에서 Unity 타이틀을 선보이고자 한다는 기쁜 소식을 발표했습니다. 유니티가 차세대 웹 기반 프로젝트를 위해 어떤 발판을 마련했는지 자세히 알아보세요.

Unity는 웹 런타임을 오랫동안 활용해 왔습니다. 2006년, Unity 웹 플레이어는 웹 브라우저의 플러그인으로 첫 선을 보였습니다. 하지만 HTML5가 도입되고 브라우저가 플러그인 지원을 없애기 시작하면서 Unity 웹 플레이어도 2015년에 지원이 중단되었습니다. 이후 유니티는 WebGL을 채택함으로써 asm.js를 사용하여 브라우저에서 직접 게임을 실행할 수 있게 했습니다. 유니티는 WASM(WebAssembly) 설계 프로세스의 시작 단계부터 참여했으며 그 이후로 WASM과 함께 발전을 거듭했습니다. 덕분에 Unity 엔진은 웹에서 거의 네이티브에 가까운 성능을 발휘할 수 있게 되었습니다. 2018.2 버전부터 Unity의 WebAssembly는 asm.js를 대체하는 기본 솔루션으로 자리잡았습니다.

한동안 관련 소식이 뜸했지만, 이제는 웹에서의 Unity 콘텐츠가 전환점에 이르렀다고 생각합니다.

기술적 발전과 더불어 플랫폼에 대한 명명 규칙도 업데이트되었습니다. WebGL 기술을 Unity의 웹 플랫폼과 구별하는 차원에서 WebGL은 이제 Unity Web이라고 합니다. 또한 유니티는 둘 이상의 렌더링 표준을 사용할 수 있는 환경을 마련하고자 합니다. 결과적으로는 WebGL을 사용하는 빌드, WebGPU를 사용하는 빌드, 또는 두 가지를 모두 사용하는 단일 빌드를 만들 수 있게 됩니다.

웹으로 콘텐츠를 제공하면 게이머는 기기에 아무것도 설치하지 않고 단 한 번의 링크 클릭이나 QR 코드 스캔으로 즉시 게임을 즐길 수 있습니다. 그뿐만 아니라 브라우저의 안전한 환경에 콘텐츠를 구현하면 다른 온라인 스토어를 거치지 않고도 게이머와 직접적인 소통이 가능합니다.

웹에는 다른 플랫폼과 같은 설치 과정이 존재하지 않으므로 마찰 요인이 그만큼 적으며 즉각적인 참여가 가능합니다. 하지만 콘텐츠를 처음으로 로드할 때는 런타임과 시작에 필요한 에셋을 다운로드해야 합니다. 따라서 로딩 시간은 유니티뿐만 아니라 개발자와 최종 사용자 모두에게 매우 중요합니다. 유니티는 로딩 시간 단축을 위해 많은 노력을 기울이고 있는데, 이에 관한 내용은 포스팅 후반부에서 더 자세히 살펴보겠습니다.

개발자는 독보적인 폭과 깊이를 선사하는 Unity 엔진을 사용하여 다른 웹 기술에 비해 더 복잡한 시뮬레이션과 인터랙티브 요소를 처리할 수 있습니다. 하지만 런타임과 시작 에셋을 다운로드해야 하는 사용자의 입장에서 보면, 적어도 현재로서는 웹 컨텍스트에서 소규모 콘텐츠에 더 관심을 가질 수밖에 없습니다.

이러한 장단점으로 인해 웹에서는 특정 장르의 게임을 구동하기가 더욱 용이한데, 짧은 플레이 세션과 이해하기 쉬운 메카닉을 갖춘 캐주얼 및 하이퍼캐주얼 게임을 그 예로 들 수 있습니다.

또한 마찰 요인이 적은 웹의 특성을 활용해서 큰 게임의 일부에 해당하는 튜토리얼 레벨 등을 별도의 웹 빌드로 구축하여 모두가 이용할 수 있게 만들 수도 있습니다. 그러면 게임을 처음 접하는 플레이어도 기기에 아무것도 설치하지 않고 게임을 원활하게 즐길 수 있으며, 그 과정에서 메카닉을 익힌 플레이어를 전체 네이티브 앱의 사용자로 전환할 기회도 얻을 수 있습니다.

지난 11월에 문을 연 AROW(아르테미스 실시간 궤도 웹사이트)는 Unity로 제작한 아르테미스 1호 탐사선의 인터랙티브 실시간 트래커입니다.

NASA는 달 표면으로의 귀환을 기념하는 탐사에 아폴로의 쌍둥이 남매인 그리스 신화 속 여신 아르테미스의 이름을 붙였습니다.

전 세계의 우주 팬들은 개인 데스크톱 웹 브라우저를 통해 오리온 캡슐의 궤도상 위치뿐만 아니라 지구 귀환 이후 태평양에서의 착수 위치까지 면밀하게 추적할 수 있었습니다. NASA는 향후의 모든 아르테미스 탐사에서 오리온 캡슐뿐만 아니라 모든 탐사 요소를 추적할 수 있도록 이 트래커를 확장할 계획입니다.

AROW는 당시 인턴이었던 세스 램버트가 만들었으며, 세스는 그 후 NASA 통신팀의 정식 팀원이 되었습니다.

유니티는 유나이트 행사에서 Unity 6부터 Android와 iOS 브라우저 지원을 도입하겠다고 발표했습니다. 머지 않은 시점에 iOS와 Android 브라우저를 포함하는 모든 웹에서 Unity 게임을 실행할 수 있게 될 것입니다. 또한 게임을 네이티브 앱의 웹 뷰에 임베드하거나 Unity의 프로그레시브 웹 앱 템플릿을 사용하여 자체 단축키와 오프라인 기능으로 게임이 네이티브 앱처럼 작동하도록 만들 수 있습니다. 모바일의 Unity Web을 타게팅했다면 지난 2~3년 동안 릴리스된 고사양 모바일 기기에서는 좋은 성과를 거두었을 가능성이 높지만, 콘텐츠에 따라 그 성과가 상이했을 수 있습니다. 유니티는 Unity 6을 출시할 때까지 모바일의 Unity Web 콘텐츠에 대한 최소 하드웨어 사양을 더욱 명확하게 제시할 예정입니다.

유니티의 최신 2D 샘플 프로젝트인 해피 하비스트(Happy Harvest)가 iPhone 15 Pro의 Safari에서 실행되는 모습을 확인해 보세요.

Safari가 WebGL2를 지원하기 시작하면서 Unity Web이 Android뿐만 아니라 iOS 기기에서도 작동할 수 있게 되었습니다. 끊임없이 향상되고 있는 CPU와 GPU 성능은 물론, 모바일 네트워크의 속도와 안정성도 꾸준히 발전해 왔습니다. 마찰 요인이 거의 없는 환경에서 즉시 즐길 수 있는 경험을 원하는 오늘날의 사용자들은 숏폼 인터랙티브 콘텐츠를 받아들일 준비가 되어 있습니다.

유나이트 기조 연설에서 발표한 것처럼, 유니티는 Meta와 긴밀히 협력하며 Meta의 Instant Games 플랫폼에 대한 지원을 준비해 왔습니다. 크리에이터를 위한 생태계가 조성되면 플레이어는 Facebook과 Messenger 대화에서 즉시 게임을 발견하고 즐길 수 있게 될 것입니다. 게이머 인구가 수억 명에 달하는 현재 상황에서 이러한 지원은 완전히 새로운 사용자 집단에 콘텐츠를 선보일 수 있는 멋진 기회가 될 수 있습니다.

Meta의 Facebook Gaming 프로덕트 리드인 앤드루 모는 “Meta와 유니티는 긴밀한 협업을 진행하며 Unity로 구축한 HTML5 게임의 성능 향상 측면에서 이미 몇 가지 고무적인 초기 결과를 얻었습니다”라고 밝혔습니다. “내년에도 이 기세를 이어나가 게임 개발자들이 Facebook과 Messenger에 콘텐츠를 더욱 손쉽게 선보일 수 있는 환경을 조성하고자 합니다.”

또한 앤드루 모는 “게임을 즉시 즐길 수 있게 된다면 무수한 잠재적 기회가 창출되리라고 믿습니다. 특히 친구나 커뮤니티와 함께 즐길 수 있는 게임이라면 더욱 그럴 거예요. 유니티와 협업하며 Meta 플랫폼에서 그 가능성을 실현할 수 있게 되어 기쁩니다”라고 덧붙였습니다.

“게임을 즉시 즐길 수 있게 된다면 무수한 잠재적 기회가 창출되리라고 믿습니다. 특히 친구나 커뮤니티와 함께 즐길 수 있는 게임이라면 더욱 그럴 거예요. [...] 유니티와 협업하며 Meta 플랫폼에서 그 가능성을 실현할 수 있게 되어 기쁩니다.” – 앤드루 모, Meta의 Facebook Gaming 프로덕트 리드

Unity Web 플랫폼 팀은 이러한 협력 관계를 더욱 촉진하기 위해, Instant Games에 맞춰 간소화된 플로로 게임을 테스트, 최적화, 퍼블리시할 수 있는 전용 빌드 타겟을 마련하는 등 다양한 노력을 기울이고 있습니다. 예를 들어 Instant Game API와의 연동을 위한 C# SDK를 출시하고, 플레이어가 게임을 즉시 시작할 수 있도록 지원하는 여러 새로운 최적화도 진행할 예정입니다.

또한 유니티는 여러 게임 스튜디오와 협업을 진행하며 새로운 툴을 검증해 나가고 있습니다. 출시 파트너 중에는 Meta 플랫폼에서 Ready, Set, Cook!을 포함한 몇 가지 게임을 제공하는 Coatsink가 있습니다. Coatsink가 출시 파트너로 합류한 직후 유니티 팀은 이 게임에 일부 초기 최적화를 적용해 보았는데, 매우 고무적인 결과를 얻었습니다.

로딩 시간이 25% 줄어들었을 뿐인데도 활성 세션이 50% 증가했으며, 클릭을 통한 게임 플레이 전환율은 35%에서 58%로 껑충 뛰었습니다. 초기 최적화만으로도 Ready, Set, Cook!이 대다수에게 플레이를 선보이지도 못했던 게임에서 많은 사람이 친구와 함께 즐기는 게임으로 성장한 것입니다. 이는 최적화 효과를 보여 주는 빙산의 일각일 뿐이지만, 이처럼 로딩 시간을 약간만 단축해도 참여도를 크게 향상할 수 있다는 점을 잘 보여 주는 사례입니다.

다음 그래프는 Coatsink가 제공한 원래 빌드와 Unity의 최신 Instant Games용 툴을 적용하여 최적화한 버전을 비교한 결과입니다. Ready, Set, Cook!에서 상호작용이 이루어지기까지 소요되는 시간이 이미 50% 단축된 것을 볼 수 있습니다. 이 테스트는 48Mbps로 스로틀링한 Pixel 5에서 진행했습니다.

위의 그래프를 보면 Ready, Set, Cook!을 기준으로 테스트했을 때의 최적화 이전 로딩 시간과 현재 로딩 시간을 비교할 수 있습니다. 테스트에서는 먼저 속도를 48Mbps로 스로틀링했습니다. 이는 Ookla에 따른 전 세계 모바일 네트워크 속도의 중간값이며 5G도 아닙니다. 전 세계 브로드밴드 속도의 중간값인 86Mbps에서는 이보다 로딩이 훨씬 빠릅니다. 안정적인 5G 연결 속도인 176Mbps에서는 속도가 더욱 향상되지만, 네트워크 대역폭이 더 이상 주요 제한 요인이 되지 않으면서 수확 체감(Diminishing returns) 효과가 발생했습니다.

로딩 시간을 단축하려면 웹 브라우저에서의 게임 다운로드 및 초기화와 관련된 모든 측면을 고려해야 합니다.

웹 빌드는 다음과 같은 몇 가지 파일로 구성됩니다.

• WebAssembly(.wasm) 파일: Unity 엔진과 게임 로직을 포함하는 바이너리 실행 파일입니다.
• 대규모 리소스 파일(.data): 빌드에 포함된 씬의 글로벌 메타데이터와 에셋 리소스를 포함합니다.
• 에셋 번들이나 어드레서블이 존재할 수 있습니다.
• WebGL 템플릿(HTML과 CSS), 게임 실행을 위한 일부 Unity 프레임워크 JavaScript 파일도 포함됩니다.

먼저 릴리스 빌드의 품질을 확보하려면 다음과 같은 몇 가지 초기 베스트 프랙티스를 따라야 합니다.

• 컴파일러와 링커(linker)가 최적의 코드 크기에 맞게 빌드하도록 설정
• Brotli 압축 방식 사용
• 웹 템플릿에 HTTP preload 태그를 추가하여 첫 번째 씬에 필요한 에셋 번들과 어드레서블을 사전에 로드

향후 출시할 Instant Games 빌드 타겟에서 이는 모두 기본 설정이 될 것입니다.

Unity 엔진이 로딩 및 초기화를 진행하는 동안 스플래시 화면이나 애니메이션을 표시해 플레이어의 체감 로딩 시간을 단축하는 방법도 고려해 보세요.

게임에 따라 에셋은 WebAssembly보다 크거나 작을 수 있습니다.

먼저 몇 가지 베스트 프랙티스를 고려하세요. 첫 번째 씬을 로딩하는 데 소요되는 시간이 중요하므로, Unity 어드레서블 시스템을 사용해 각 에셋을 분리하여 별도로 다운로드하게 하는 방법도 고려해 볼 수 있습니다. 그런 다음 HTTP preload 태그를 추가하여 첫 번째 씬에 필요한 어드레서블을 사전 로드합니다. 그 이후의 씬에서는 필요에 따라 어드레서블 시스템을 통해 에셋을 로드합니다.

오디오를 많이 사용하는 게임이라면 반드시 압축 오디오를 사용하세요. 경우에 따라서는 모노 설정을 적용하거나 오디오 품질을 낮춰야 할 수 있습니다.

두 번째로, 그래픽스 설정을 조정합니다. ETC 크런치 압축 텍스처를 사용하면 다운로드 크기를 최소화하고 모바일 기기에서의 GPU 메모리 사용량을 낮게 유지할 수 있습니다. ASTC 압축 텍스처를 사용하고 있다면 블록 크기를 주의 깊게 확인하고 작은 텍스처에는 큰 블록 크기를 선택하세요. 마찬가지로 프로젝트의 Player Settings에서 셰이더 스트리핑을 설정합니다.

WebAssembly 기술은 계속 발전하고 있으며 Unity에도 업데이트가 제공되고 있습니다. 첨단 기술을 지원하기 위해 애써 주시는 웹 W3C 커뮤니티의 노고에 정말 감사 드립니다. 모든 브라우저 개발자들의 투자와 지원이 없었다면 웹 게이밍은 존재할 수 없었을 것입니다. 특히 함께 협업한 Google의 Chrome 팀에 감사의 뜻을 표합니다. 유니티는 Chrome 팀과 함께 WebAssembly의 게임 사용 사례와 복잡한 게이밍 워크로드의 그래픽스 성능을 강화하기 위해 노력했습니다.

Emscripten 컴파일러는 Unity il2cpp 빌드를 WebAssembly 형식으로 변환합니다. 유니티는 LTS(장기 지원) 릴리스를 새롭게 출시할 때마다 최신 버전의 Emscripten을 함께 제공함으로써 개발 속도를 높이고, 더욱 작고 최적화된 릴리스 빌드를 구축할 수 있도록 합니다(빌드 시간은 다소 소요될 수 있음).

Unity 6에서는 4GB 메모리 지원을 이용할 수 있습니다. 이를 통해 데스크톱 브라우저의 대용량 메모리를 활용하면 웹에서 더욱 큰 규모의 실시간 3D 경험을 구현할 수 있습니다. 향후 이는 모든 브라우저가 64비트 메모리를 지원하게 될 시기에 대비한 초석이 될 것입니다.

현재로서는 웹 빌드의 예외 지원을 활성화할 경우 약간의 오버헤드가 발생합니다. 예를 들면 try/catch 지원을 위해 모든 함수에 코드를 추가하는 경우가 있습니다. 하지만 Unity 6에 도입될 WebAssembly 네이티브 예외 처리 옵션을 사용하면 오버헤드를 거의 발생시키지 않으면서 예외 지원이 가능합니다.

또한 Unity 6에서는 WebAssembly SIMD 지원을 활성화할 수 있습니다. 이는 벡터화된 명령어를 통해 CPU의 수학적 계산을 가속화합니다. x64와 Arm 기기에서 모두 작동하며, 웹 페이지를 로드할 때 WebAssembly SIMD 명령어를 SSE 또는 Arm NEON으로 매핑합니다. 이를 통한 성능 향상은 기기와 브라우저에 따라 다르겠지만 분명히 체감할 수 있는 수준일 것입니다.

이러한 기능은 모두 선택 사항이며 최신 웹 브라우저 버전에서만 사용할 수 있습니다.

새로운 WebGPU 백엔드 도입은 웹 기반 그래픽스 가속화의 중대한 이정표로, Unity 웹 게임의 그래픽스 렌더링 정확도를 전례 없는 수준으로 끌어올리는 디딤돌이 될 것입니다.

WebGPU는 최신 GPU 기능을 웹에 노출하고 활용하려는 목적으로 설계되었습니다. WebGPU는 새로운 웹 API로서 DirectX 12, Vulkan, Metal과 같은 네이티브 GPU API를 통해 내부적으로 구현되는 최신 그래픽스 가속화 인터페이스를 데스크톱 기기에 따라 제공합니다.

WebGPU는 새롭고 유용한 렌더링 기능에 대한 지원을 활성화하여, 그래픽스 정확도를 데스크톱 웹에서 이전에는 볼 수 없었던 수준으로 높여 줄 수 있습니다. 다른 최신 그래픽스 API와 마찬가지로, 렌더링 설정과 GPU 실행을 로우 레벨에서 제어함으로써 새로운 최적화 기회를 확보하여 CPU와 GPU의 오버헤드를 줄이고 처리량과 지연을 개선할 수 있습니다.

또한 WebGPU는 최초로 컴퓨트 셰이더를 웹에 제공합니다. GPU 컴퓨트 스키닝은 스킨드 메시 캐릭터의 렌더링 성능을 획기적으로 향상합니다. 이제 버텍스 변형은 GPU가 전적으로 처리하게 됩니다. 이 데모는 GPU 스키닝의 장점을 활용해 비교적 높은 프레임 속도를 유지하면서 로봇 골격 위에 스킨을 메시 처리합니다. 이 작업을 CPU로 수행한다면 FPS는 한 자릿수로 떨어질 것입니다.

컴퓨트 셰이더 내에서 지오메트리를 직접 절차적으로 생성하는 Unity의 VFX 그래프도 좋은 예시입니다. 아래의 파티클 시뮬레이션에는 50만 개가 넘는 파티클이 모두 GPU의 컴퓨트 셰이더를 통해 움직입니다.

보트 어택(Boat Attack) 데모는 아마 예전에 보셨을 것입니다. 이제 WebGPU만으로 이 데모를 실행할 수 있습니다. WebGPU는 현재 macOS와 Windows의 Google Chrome과 Microsoft Edge에서 사용할 수 있습니다. 이 마지막 예시는 WebGPU에서 렌더링한 인터랙티브 보트 어택 데모입니다.

Unity의 WebGPU 백엔드 개발을 진행하면서, 유니티의 그래픽스 엔지니어들은 Chrome 팀과의 긴밀한 협력을 통해 대규모 씬과 복잡한 셰이더를 사용하여 WebGPU에 대한 테스트를 수행하고 탁월한 결과를 얻었습니다.

WebGPU 그래픽스 백엔드는 여전히 개발 중이므로 프로덕션 목적으로 사용하는 것은 권장하지 않습니다. 하지만 현재 미리 체험해 보는 것은 가능합니다. 자세한 사용 방법은 그래픽스 포럼에서 확인하세요.

웹은 원활한 경험을 제공하며 플레이어와의 직접적인 소통이 가능하다는 점에서 탁월한 환경이라고 할 수 있습니다. 웹 프로젝트에서는 WASM과 시작 에셋을 미리 다운로드해야 하므로 로딩 시간을 단축하는 것이 핵심입니다. 이 로딩 시간 문제로 인해 일반적으로는 작은 규모의 콘텐츠가 웹 환경에 가장 적합합니다.

2024년 하반기부터 Facebook과 Messenger로 Instant Games 플랫폼의 게임을 빌드하고 배포함으로써 완전히 새로운 사용자들에게 다가갈 수 있을 것입니다. 유니티 및 Meta와 직접 협력하여 Instant Games에서 성공을 거둘 수 있는 툴과 리소스를 미리 사용해 보거나, 새로운 플랫폼 지원 이니셔티브에 대한 최신 소식을 얻고 싶다면 지금 바로 등록하세요.

Unity 6부터 모바일 웹 지원이 시작됩니다. 유나이트 기조 연설에서 Unity 6에 대해 자세히 알아보세요.

최신 기능에 관심이 많다면 Unity 6에 추가될 WebGPU에 대한 포럼 게시물을 읽고, WebGPU 백엔드를 미리 체험해 보기 위한 정보를 확인해 보세요. 또한 지금 바로 시청할 수 있는 온디맨드 유나이트 2023 세션에서 최신 엔진 개발 관련 정보를 다양하게 알아보세요. ‘Unity를 통해 개발한 게임을 웹에서 더 많은 플레이어에게 제공하는 방법(영문)’ 유나이트 세션도 아래에서 시청하실 수 있습니다.