Hugo와 Vercel 조합으로 정적 블로그를 운영할 때, 여행기나 맛집 탐방처럼 사진이 많이 들어가는 글을 올리게 되면 한 가지 고민에 빠지게 됩니다. "Git 리포지토리 용량이 너무 커지지 않을까?", "Vercel의 용량 제한 및 네트워크 트래픽 초과는 괜찮을까?"

스마트폰 원본 사진(장당 5MB~10MB)을 그대로 올리지 않고 Vercel 용량을 방어하면서 로딩 속도를 극대화하는 3가지 이미지 관리 팁을 소개합니다.


1. Cloudinary 무료 이미지 CDN 활용 (가장 추천 👍)

블로그 호스팅과 사진 호스팅을 분리하는 가장 대표적인 방법입니다.

  • Cloudinary 무료 플랜: 매월 25GB 상당의 storage 및 트래픽 제공
  • 작동 방식: Cloudinary에 이미지를 업로드 후 생성되는 CDN URL(예: https://res.cloudinary.com/.../travel.jpg)을 포스팅에 삽입
  • 장점: Git 저장소 및 Vercel 용량을 0 Byte 소비. 전 세계 글로벌 CDN을 타고 이미지 로딩 속도가 비약적으로 향상됨

2. GitHub Issues 이미지 업로드 꼼수

별도의 이미지 CDN 서비스 가입 없이 GitHub 내에서 빠르게 처리하는 가성비 방법입니다.

📌 GitHub 이슈 이미지 업로드 방법:
1. 본인 GitHub 저장소의 Issues 탭 ➔ New Issue 클릭
2. 작성 창에 사진을 Drag & Drop 하면 https://user-images.githubusercontent.com/... 형태의 CDN URL 자동 생성
3. 생성된 URL만 복사하여 블로그 글에 넣고 Issue 창은 등록 없이 닫기

3. 이미지 리사이징 및 WebP 변환 후 static/ 저장

외부 CDN을 쓰지 않고 프로젝트 내부 static/images/ 폴더에 직접 사진을 올릴 경우, 반드시 용량 다이어트를 거쳐야 합니다.

🚨 원본 업로드 금지: 4K/8K 카메라 원본 사진은 가로 해상도 1200px~1400px 수준으로 줄이고, .webp 또는 압축 .jpg 형식으로 변환하여 장당 100KB~300KB 이하로 맞춥니다.
  • TinyPNG 또는 Mac 프리뷰/ImageOptim 앱을 이용해 압축
  • 파일 경로 예시: static/images/travel/singapore-01.webp
  • 포스팅 내 태그: <img src="/images/travel/singapore-01.webp" alt="여행 사진">

4. 결론

사진이 10장 이상 넉넉하게 들어가는 긴 여행기는 Cloudinary 또는 GitHub CDN 방식이 가장 안전하며, 3~4장 이하의 소량 이미지 글은 WebP 변환 후 static/ 지정 방식을 추천합니다.

스마트한 이미지 호스팅 전략으로 로딩 속도 빠른 고품질 기술/여행 블로그를 완성해 보세요!