🚀 이미지 URL 저장 전략: S3 직접 저장 vs CDN 활용

🤔 고민의 시작

게임이나 커머스 서비스를 개발하다 보면 이미지 파일을 어떻게 관리할지 고민하게 됩니다.
특히 몬스터, 아이템, 상품 이미지처럼 수백~수천 개의 이미지를 다뤄야 한다면?

오늘은 실무에서 자주 마주치는 이미지 저장 전략에 대해 알아보겠습니다.

📦 기본 설계: Entity 구조

먼저 몬스터 정보를 저장하는 Entity를 살펴봅시다.

@Entity
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@Table(name = "monster_species")
public class MonsterSpecies {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false, unique = true)
    private String name;

    @Enumerated(EnumType.STRING)
    private MonsterStage stage;

    @Enumerated(EnumType.STRING)
    private MonsterAttribute attribute;

    private int baseHp;
    private int basePower;

    // 🎯 핵심: 이미지는 URL 문자열로 저장
    private String idleImageUrl;     // 대기 이미지 URL
    private String attackImageUrl;   // 공격 이미지 URL
}

주목할 점은 이미지 파일 자체(Binary)가 아닌 URL(String) 을 저장한다는 것입니다.

✅ S3 URL 직접 저장 방식의 장점

1️⃣ 프론트엔드 연동이 너무 간단합니다

API 응답을 받은 프론트엔드는 아무 가공 없이 바로 사용 가능합니다.

// API 응답
{
  "name": "킹펭귄",
  "idleImageUrl": "https://tibumon-bucket.s3.ap-northeast-2.amazonaws.com/monsters/king-penguin-idle.png"
}

// React에서 바로 사용
<img src={monster.idleImageUrl} alt={monster.name} />

별도의 이미지 서버나 파일 다운로드 로직이 필요 없습니다. 🎉

2️⃣ DB 성능 부담이 전혀 없습니다

• 잘못된 방식: 이미지 Binary를 DB BLOB으로 저장 → DB 용량 폭발 💥
• 올바른 방식: 가벼운 URL 문자열만 저장 → DB는 빠르고 가볍게 유지 ⚡

-- 실제 저장되는 데이터는 이렇게 가볍습니다
INSERT INTO monster_species (name, idle_image_url) 
VALUES ('킹펭귄', 'https://tibumon-bucket.s3.../king-penguin.png');

3️⃣ 이미지 업데이트가 유연합니다

이미지를 교체하고 싶다면?

• S3에 새 이미지 업로드
• DB의 URL만 변경

서버 재배포 없이 즉시 반영됩니다!

🚀 다음 단계: CDN(CloudFront) 도입

트래픽이 증가하면 속도와 비용 문제가 생깁니다.

문제 상황

사용자(서울) → S3(서울) ✅ 빠름 (50ms)
사용자(미국) → S3(서울) ❌ 느림 (300ms)

해결책: CloudFront CDN 활용

CDN은 전 세계에 분산된 캐시 서버로, 사용자와 가까운 곳에서 이미지를 제공합니다.

사용자(미국) → CloudFront(미국 엣지) → S3(서울)
               └─ 캐시 히트 시 S3까지 안 감! (20ms) 🎯

🔧 마이그레이션은 간단합니다

DB에서 URL의 도메인 부분만 일괄 변경하면 끝!

-- Before: S3 직접 접근
'https://tibumon-bucket.s3.ap-northeast-2.amazonaws.com/monsters/agumon.png'

-- After: CloudFront를 통한 접근
'https://d1a2b3c4d5e6f7.cloudfront.net/monsters/agumon.png'

애플리케이션 코드는 한 줄도 수정할 필요 없습니다. 😎

💡 실무 팁

✨ URL 설계 모범 사례

// 경로 구조를 체계적으로 관리
String baseUrl = "https://cdn.yourservice.com";
String path = "/monsters/" + monsterId + "/idle.png";
String fullUrl = baseUrl + path;

// 나중에 CDN 주소만 바꾸면 전체 URL이 자동으로 변경됨

⚠️ 주의사항

1. S3 버킷 권한: Public Read 설정 필수 (또는 CloudFront OAI 사용)
2. HTTPS: 보안을 위해 반드시 HTTPS 사용
3. 이미지 최적화: 업로드 전 WebP 변환, 리사이징 고려

📊 비교 정리

🎯 결론

1. 초기에는 S3 URL 직접 저장으로 시작하세요. 간단하고 충분합니다.
2. 트래픽이 증가하면 CloudFront 추가를 고려하세요.
3. URL을 DB에 저장하는 구조라면 나중에 코드 수정 없이 CDN 전환 가능합니다.

💬 “지금 당장 완벽할 필요는 없습니다. 확장 가능한 구조로 시작하세요!”