Day 47 - WebGL 환경에서 동영상 최적화하기 (3부)

• 주제

>>  StreamingAssets 폴더 활용 최적화

>>  WebGL 빌드 설정 최적화

>>  WebGL 빌드 후 동영상 로드 디버깅

---

• 공부내용

WebGL 환경에서는 동영상 파일의 로드 속도, 용량 최적화, 호환성을 신경 써야 한다.

이번 게시글에서는 StreamingAssets 활용법, 동영상 최적화 전략,

그리고 WebGL에서 발생할 수 있는 주요 문제와 그 해결 방안을 알아보겠다.

 

1. StreamingAssets 폴더 활용 최적화

WebGL에서 동영상을 사용하려면 StreamingAssets 폴더를 통해 파일을 관리해야 한다. 하지만 WebGL 환경에서는 이 폴더가 압축되어 제공되기 때문에 로드 속도에 영향을 미칠 수 있다. 아래와 같은 최적화 방법을 적용하자.

 

1-1. 동영상 파일 크기 줄이기

1. HandBrake 또는 FFmpeg와 같은 도구를 사용해 MP4 파일의 해상도와 비트레이트를 줄인다.
   • 권장 해상도: 720p (1280x720)
   • 권장 비트레이트: 2~3 Mbps
2. 동영상의 프레임 레이트를 30fps 이하로 설정하면 용량을 줄일 수 있다.

 

1-2. StreamingAssets 내 구조 정리

동영상 파일을 폴더로 분리해 관리하면 나중에 파일을 추가하거나 변경할 때 편리하다.

StreamingAssets/
├── Videos/
│   ├── Scene_Intro.mp4
│   ├── Transition_01.mp4

 

 

1-3. Script 수정

cutscenePlayer.url = System.IO.Path.Combine(Application.streamingAssetsPath, "Videos/Scene_Intro.mp4");

---

 

 

2. WebGL 빌드 설정 최적화

동영상을 포함한 WebGL 빌드는 적절한 설정을 통해 성능을 크게 개선할 수 있다.

 

2-1. Player Settings 수정

 

• Compression Format
  • WebGL 빌드에서 Compression Format을 Gzip에서 Brotli로 변경하면 압축 효율이 더 좋아진다.
• Memory Size
  • WebGL은 정적으로 할당된 메모리를 사용하므로, 동영상 로드를 포함한 메모리 요구 사항에 맞게 WebGL Memory Size를 충분히 설정한다.
  • 기본값: 256MB
  • 권장값: 512MB 이상
• Auto Graphics API
  • WebGL 2.0 사용을 강제하지 않고 Auto Graphics API 옵션을 활성화한다.

 

---

 

 

3. WebGL 빌드 후 동영상 로드 디버깅

WebGL 빌드 후 동영상 로드가 실패하거나 재생되지 않는 경우가 있다.

이를 해결하기 위한 디버깅 방법을 소개한다.

---

문제 1: 동영상 파일이 로드되지 않는다

• 원인: StreamingAssets 경로가 제대로 설정되지 않거나 파일 크기가 너무 클 때 발생한다.
• 해결 방법 1: 동영상 경로 확인
  WebGL 빌드 후 브라우저 콘솔에서 파일의 정확한 경로를 확인한다.

Debug.Log(cutscenePlayer.url); 

 

 

• 해결 방법 2: 파일 크기 줄이기
  동영상 파일이 클 경우, 서버에서 로드 시간이 길어질 수 있다. 앞서 설명한 방법으로 파일 크기를 줄인다.

 

문제 2: 동영상 재생 중 끊김 현상

• 원인: 브라우저의 메모리 부족 또는 네트워크 문제로 인해 발생한다.
• 해결 방법:
  1. StreamingAssets 압축 해제
     WebGL 빌드 시 Decompression Fallback 옵션을 활성화한다.
     경로: Edit > Player Settings > WebGL > Publishing Settings
  2. 동영상 분할
     동영상을 짧은 클립으로 나누어 필요할 때만 로드한다.

 

문제 3: 일부 브라우저에서 동영상이 재생되지 않는다

• 원인: 브라우저 또는 동영상 인코딩 형식이 WebGL과 호환되지 않을 때 발생한다.
• 해결 방법:
  1. MP4 파일 코덱 확인
     WebGL은 H.264 코덱만 지원한다.
     동영상 파일을 H.264 코덱으로 인코딩했는지 확인한다.
  2. 다른 브라우저 테스트
     동영상 재생은 브라우저에 따라 동작이 다를 수 있다. Chrome, Firefox, Edge 등에서 테스트한다.

---

 

<결론>

WebGL 환경에서 동영상을 활용하려면, 파일 최적화, 빌드 설정, 브라우저 호환성을 모두 고려해야 한다.

이번 3부작에서는 동영상 로드부터 재생, 종료 이벤트 처리, 최적화까지 전 과정을 다뤘다.

이를 참고해 더욱 완성도 높은 WebGL 게임을 개발해 보자! 🎮