[NETCITY NEWS] NETCITY 메인 페이지의 캠프 위젯과 상단 사운드 자산에 로딩 최적화 작업이 적용됐다. 핵심은 영상과 음원을 처음부터 모두 내려받지 않고, 화면에 필요한 최소 미디어만 먼저 보여준 뒤 사용자의 동작에 맞춰 단계적으로 올리는 방식이다. 이번 작업에서 영상은 최적화 인코딩으로 다시 만들었고, 음원은 OGG와 M4A 포맷을 추가해 브라우저가 더 가벼운 소스를 선택할 수 있도록 구성했다.
영상은 poster, preview, 본 영상으로 분리했다
캠프 위젯 영상은 처음부터 큰 파일을 자동 재생하는 구조에서 벗어나 세 단계로 나뉘었다. 첫 화면에는 약 50KB의 poster 이미지를 먼저 보여준다. 움직임이 필요한 환경에서는 540x364 해상도의 H.264 preview MP4가 늦게 로드된다. 이 파일은 약 400KB이며, 사운드를 제거한 짧은 미리보기 영상이라 첫 화면 진입 부담이 낮다.
사용자가 사운드를 켜거나 더 풍부한 재생이 필요한 순간에는 720x486 해상도의 본 영상으로 승격된다. 본 영상은 H.264 영상과 AAC 오디오를 포함한 약 1.1MB 파일이다. 즉, 화면에 도착하자마자 본 영상 전체를 받는 방식이 아니라, poster와 preview로 먼저 보여준 뒤 필요한 때에만 본 영상을 불러오는 구조다.
| 자산 | 역할 | 규격 | 용량 |
|---|---|---|---|
| camp-poster.jpg | 첫 화면 이미지 | 640x432 | 약 50KB |
| camp-preview.mp4 | 무음 미리보기 영상 | 540x364, H.264 | 약 400KB |
| camp-optimized.mp4 | 사용자 요청 이후 본 영상 | 720x486, H.264 + AAC | 약 1.1MB |
음원은 OGG와 M4A를 추가해 가볍게 열리게 했다
상단 메뉴와 페이지 분위기를 만드는 사운드는 MP3만 두는 대신 OGG와 M4A를 함께 제공하도록 바뀌었다. 브라우저는 지원하는 포맷 중 더 효율적인 파일을 선택할 수 있고, 오디오는 preload="none" 상태로 대기하다가 hover, focus, touch, click 같은 사용자 동작이 있을 때 소스를 설정한다.
두 음원 모두 원본 MP3 대비 큰 폭으로 줄었다. multiverse-door는 MP3 약 5.0MB에서 OGG 약 1.62MB, M4A 약 1.74MB로 줄었다. cracked-galaxy는 MP3 약 5.1MB에서 OGG 약 1.62MB, M4A 약 1.82MB로 줄었다. OGG 기준으로는 약 67~68%의 용량 절감 효과가 있다.
| 음원 | MP3 | OGG | M4A | 절감 폭 |
|---|---|---|---|---|
| multiverse-door | 약 5.0MB | 약 1.62MB | 약 1.74MB | OGG 기준 약 67.2% |
| cracked-galaxy | 약 5.1MB | 약 1.62MB | 약 1.82MB | OGG 기준 약 68.2% |
초기 로딩을 줄이는 방식은 기술보다 순서 설계에 가깝다
이번 개선의 핵심은 단순히 파일을 작게 만드는 데서 끝나지 않는다. 큰 미디어를 언제 불러올 것인지 정하는 순서가 중요하다. 캠프 위젯은 preload="none", poster 우선 표시, 네트워크 상태와 절전 설정을 고려한 preview 로드, 클릭 이후 본 영상 승격을 조합했다. 팝업 영상과 외부 임베드도 처음에는 썸네일만 보여주고 클릭 뒤 실제 영상을 불러오도록 정리했다.
이 방식은 특히 모바일, 느린 네트워크, 저장 데이터 모드에서 효과가 크다. 사용자가 영상을 보지 않을 수도 있는데도 모든 영상을 미리 받는 낭비를 줄이고, 처음 필요한 화면과 텍스트, 이미지가 더 빨리 나타나도록 만든다. 결과적으로 페이지는 시각적 분위기를 유지하면서도 초기 다운로드 부담을 낮춘다.
결론: 미디어가 많은 페이지는 파일과 타이밍을 함께 다뤄야 한다
영상 최적화 인코딩은 단순한 압축 작업이 아니다. 대표 이미지, 미리보기 영상, 본 영상, 음원 포맷, 로드 시점, 사용자 동작을 하나의 파이프라인으로 묶어야 한다. NETCITY 메인 캠프 위젯은 이번 작업을 통해 무거운 영상과 사운드를 한 번에 밀어 넣는 방식에서 벗어나, 필요한 만큼만 먼저 보여주고 필요한 순간에 품질을 올리는 구조로 바뀌었다.
앞으로도 영상이 들어가는 페이지는 화면 크기에 맞춘 썸네일 영상, 무음 preview, WebP poster, OGG/M4A 음원, 지연 로딩 전략을 기본값으로 삼을 수 있다. 콘텐츠의 분위기는 유지하면서 사용자의 첫 진입 속도를 지키는 것이 이번 개선의 가장 큰 목적이다.