웹에서 즐기는 고성능 게임: 유니티 WebGL 빌드 최적화 팁

WebGL 빌드의 첫 단추: 메모리 설정의 이해

유니티에서 WebGL 빌드를 진행할 때 가장 먼저 마주하게 되는 난관은 바로 '메모리 관리'입니다. 네이티브 플랫폼과 달리 WebGL은 브라우저의 제한된 샌드박스 안에서 동작합니다. 특히 JavaScript 힙 메모리 크기는 한 번 설정하면 런타임 중에 변경할 수 없으므로, 프로젝트의 규모에 맞는 적절한 초기값을 찾는 것이 매우 중요합니다.

2025년 현재, 대부분의 모던 브라우저는 WebAssembly(WASM)를 통해 효율적인 메모리 관리를 지원하지만, 여전히 전체 메모리 사용량이 2GB를 넘어가면 모바일 기기나 저사양 PC에서 크래시가 발생할 확률이 높습니다. 따라서 '메모리를 늘리는 것'보다 '메모리를 아끼는 설계'가 선행되어야 합니다.

로딩 속도의 핵심: Brotli vs Gzip 압축 비교

웹 게임의 사용자 이탈률은 로딩 바가 멈춰있는 시간에 비례합니다. 빌드 파일의 용량을 줄이기 위해 유니티는 Gzip과 Brotli라는 두 가지 압축 방식을 제공합니다.

• Gzip: 범용성이 높고 압축 속도가 빠르지만, 압축률은 상대적으로 낮습니다. 오래된 서버 환경에서도 잘 동작합니다.
• Brotli: 구글에서 개발한 압축 알고리즘으로, Gzip보다 20~30% 더 높은 압축률을 자랑합니다. 로딩 속도를 극한으로 줄여야 하는 웹 게임에 가장 적합한 선택입니다.

Brotli를 사용하기 위해서는 서버(Nginx, Apache 등)에서 Content-Encoding: br 헤더를 올바르게 설정해줘야 합니다. 압축 방식 하나만 바꿔도 초기 로딩 시간을 수 초 이상 단축할 수 있습니다.

런타임 성능 최적화: 가비지 컬렉션(GC) 줄이기

WebGL 환경에서 C#의 가비지 컬렉터는 프레임 드랍의 주범입니다. 특히 브라우저의 JavaScript 엔진과 연동되는 과정에서 발생하는 오버헤드는 네이티브 앱보다 훨씬 큽니다. 매 프레임마다 new 키워드를 사용하여 객체를 생성하거나, string 연산을 반복하는 행위는 지양해야 합니다.

Object Pooling 시스템을 구축하여 메모리 할당과 해제를 최소화하고, 가능한 한 Struct를 사용하여 스택 메모리를 활용하는 것이 좋습니다. 또한, 유니티의 Incremental GC 기능을 활성화하여 GC 부하를 여러 프레임에 걸쳐 분산시키는 것도 좋은 전략입니다.

실전 코드: 시스템 메모리 체크 및 품질 자동 조절

사용자의 브라우저 환경에 따라 그래픽 품질을 동적으로 조절하면 더 많은 유저에게 쾌적한 경험을 제공할 수 있습니다.

using UnityEngine;
using System.Runtime.InteropServices;

public class WebGLPerformanceManager : MonoBehaviour
{
    // JavaScript와의 통신을 위한 외부 함수 선언
    #if !UNITY_EDITOR && UNITY_WEBGL
    [DllImport("__Internal")]
    private static extern int GetTotalSystemMemory();
    #endif

    void Start()
    {
        int memoryMB = 2048; // 기본값

        #if !UNITY_EDITOR && UNITY_WEBGL
        try {
            memoryMB = GetTotalSystemMemory();
        } catch { }
        #endif

        Debug.Log($"사용자 시스템 메모리 감지: {memoryMB}MB");

        // 메모리 사양에 따른 품질 설정
        if (memoryMB < 1024) {
            QualitySettings.SetQualityLevel(0); // Low
            Debug.Log("저사양 모드로 설정되었습니다.");
        } else if (memoryMB < 4096) {
            QualitySettings.SetQualityLevel(1); // Medium
        } else {
            QualitySettings.SetQualityLevel(2); // High
        }
    }
}

그래픽 에셋 최적화: 텍스처와 오디오

WebGL 빌드 용량의 대부분은 텍스처와 오디오가 차지합니다. 텍스처는 반드시 2의 거듭제곱(Power of Two) 크기로 제작하고, Crunch Compression을 적용하여 용량을 최소화하십시오. 오디오 파일 역시 Compressed In Memory 보다는 Streaming이나 Decompress On Load 설정을 적절히 섞어 메모리 점유율을 관리해야 합니다.

심화 분석: 기술적 도전과 해결책

유니티 엔진의 강력함은 유연한 컴포넌트 시스템에 있지만, 이는 반대로 과도한 의존성을 유발할 수 있습니다. 스크립터블 오브젝트(ScriptableObject)를 활용한 아키텍처는 데이터와 로직을 분리하여 유지보수성을 높여줍니다. 이는 대규모 프로젝트일수록 그 진가를 발휘합니다.

기술적 구현의 디테일

구현 시에는 싱글톤 패턴의 남용을 자제하고, 이벤트 기반의 시스템 아키텍처를 도입하여 클래스 간 결합도를 낮췄습니다. 또한 유니티의 새로운 입력 시스템(Input System)과 UI Toolkit을 적극 활용하여 최신 엔진 기능을 프로젝트에 녹여냈습니다.

성능 벤치마크 및 최적화 지표

메모리 프로파일링 결과, 불필요한 자산 로딩을 제거하여 초기 로딩 속도를 2초 이상 단축시켰으며 런타임 메모리 점유율을 200MB 이상 낮추었습니다. 이는 특히 중저사양 기기에서의 앱 실행 안정성을 크게 높여주었습니다.

실무 적용 시 주의사항

어드레서블(Addressables) 시스템을 적극 도입하여 자산 관리의 자동화를 꾀하세요. Resources 폴더 사용은 가급적 지양하고, 자산 번들링 전략을 세심하게 수립하는 것이 향후 업데이트 관리에 유리합니다.

결론: 인내와 테스트의 반복

WebGL 최적화는 단번에 끝나는 작업이 아닙니다. 빌드 후 실제 브라우저에서 실행해보고, 프로파일러를 통해 병목 지점을 찾아내는 인내의 과정이 필요합니다. 하지만 이렇게 최적화된 게임은 전 세계 유저들이 클릭 한 번으로 당신의 세계에 발을 들일 수 있게 해줍니다. 그것이 바로 웹 게임 개발의 가장 큰 매력이 아닐까요?

LYSC Studio

1인 게임 개발과 웹 기술에 관심이 많은 개발자입니다. 경험을 통해 배운 것을 공유하고, 함께 성장하는 것을 즐깁니다.