포트폴리오 사이트 미디어 최적화하기

들어가며

포트폴리오 사이트에 프로젝트 캐러셀 기능을 추가하면서 이미지 35장과 시연 영상 1개를 넣었습니다.

무작정 이미지와 영상을 넣은 결과 총 209MB의 미디어 파일과 함께 느려터진 로딩 속도, GitHub의 경고 메시지가 저를 맞이했습니다.

이 글에서는 실제로 적용한 최적화 과정과 각 방법의 trade-off, 그리고 실제 성능 개선 수치를 공유합니다.

---

 

1. 문제 상황

이미지 문제

• 파일 형식: PNG (무손실, 고용량)
• 개별 용량: 3~6MB
• 총 35장: 139MB
• 증상: 모달 열 때 로딩 지연, 슬라이드 전환 시 버벅임

영상 문제

• 파일 용량: 70MB (MP4)
• GitHub 경고: 권장 최대 크기 50MB 초과
• 배포 후 404 에러: base URL 경로 불일치

remote: warning: File public/videos/cherrish-demo.mp4 is 69.44 MB;
this is larger than GitHub's recommended maximum file size of 50.00 MB

---

2. 이미지 최적화: PNG → WebP 변환

왜 WebP인가?

형식	특징	용량
PNG	무손실, 투명도 지원	큼
JPEG	손실 압축, 사진에 적합	중간
WebP	손실/무손실 모두 지원, 현대 브라우저 호환	작음

WebP는 Google이 개발한 이미지 포맷으로, 동일 품질 대비 PNG보다 26%, JPEG보다 25-34% 작은 용량을 제공합니다.

이미지 타입 변경 결과

항목	Before	After	감소율
1.png	4.5MB	236KB	95%
10.png	4.5MB	139KB	96%
11.png	5.0MB	123KB	98%
전체 (35장)	139MB	4.8MB	97%

3. 영상 최적화: 로컬 → YouTube 임베드

선택지 비교

• FFmpeg 압축
• 외부 CDN
• YouTube 임베드

왜 YouTube를 선택했나?

먼저 FFmpeg 압축의 경우에는 구현복잡도가 높았고 깃허브 레포에 영상을 같이 저장하는 것의 한계가있다고 생각했다.

외부 CDN의 경우에도 따로 스토리지 비용이 추가로 발생하기에 최소한의 비용으로 구현하는 게 목표인 내게 좋은 선택이 아니었다.

유튜브의 장점은 아래가 있었는데

1. 저장소 용량 절약: 70MB → 0MB (로컬 파일 삭제)
2. GitHub 경고 해결: 50MB 제한 우회
3. 스트리밍 최적화: YouTube CDN 활용
4. 적응형 품질: 사용자 네트워크에 따라 자동 조절

유튜브 영상 UI가 조금 밤티이고 짜쳐보인다는 것만 빼면 훌륭한 선택지이다. 만약 나중에 여유가 생긴다면 다른 외부 CDN으로 갈듯!

4. 캐러셀 프리로딩 최적화

다음으로 모달이 열릴 때 35장의 이미지가 한꺼번에 로드되면서 네트워크 병목 발생하는 문제였다.

이걸 인접한 이미지 ±2를 프리로드 함으로써 최적화 했다.

결과로 기존에 이미지 로딩시 0.5~0.8초가 걸리던걸 0.2초 아래로 최적화 하게 되었다.

추가로 사이트에 고려할 수 있는 최적화 방안은 아래와 같은 것들이 있을 것 같다. 여유가 되면 해보겠다.

• 이미지 CDN (Cloudinary, Imgix): 자동 포맷 변환, 리사이즈
• Progressive 로딩: 저해상도 → 고해상도 순차 로드
• Service Worker 캐싱: 오프라인 지원 및 재방문 시 즉시 로드