Cloudflare R2로 블로그 이미지 호스팅 무료 구축하기 (AWS S3 요금 폭탄 완벽 탈출)

블로그를 운영하다 보면 글의 수가 늘어날수록 이미지 용량과 호스팅 비용 관리가 큰 과제로 다가옵니다. 특히 개발 블로그나 기술/정보성 블로그는 고해상도 스크린샷과 다이어그램이 많이 들어가기 때문에 이미지 전송량이 빠르게 증가합니다.

많은 분들이 처음에는 익숙한 AWS S3를 떠올리지만, 구글 검색 유입이나 바이럴로 트래픽이 폭증하는 순간 '데이터 전송 비용(Egress Fee)'이라는 숨겨진 복병을 만나게 됩니다. 오늘은 AWS S3의 완벽한 대체재로 떠오른 Cloudflare R2를 활용해 평생 무료에 가까운 고성능 블로그 이미지 호스팅을 구축하는 방법을 상세히 알아보겠습니다.

1. 왜 AWS S3 대신 Cloudflare R2인가? (비용 및 스펙 비교)

Cloudflare R2가 블로그 생태계에서 '치트키'로 불리는 가장 결정적인 이유는 바로 아웃바운드 데이터 전송 수수료(Egress Fee)가 $0이라는 점입니다.

💡 참고: 개인 블로그에서 월 10GB의 이미지는 최적화(WebP 기준) 시 수만 장에 달하며, 월 1,000만 회 이상의 조회가 일어나지 않는 한 사실상 영구 무료로 운영할 수 있습니다.

2. Cloudflare R2 이미지 호스팅 4단계 구축 실전 가이드

Step 1: Cloudflare R2 버킷(Bucket) 생성

1. Cloudflare 대시보드에 로그인합니다.
2. 좌측 메뉴에서 [스토리지 및 데이터베이스] > [R2]를 클릭합니다. (최초 이용 시 결제 카드 등록이 필요할 수 있으나, 무료 티어 초과 전까지는 0원 청구됩니다.)
3. [버킷 생성(Create Bucket)] 버튼을 클릭합니다.
4. 버킷 이름(예: my-blog-images)을 입력하고 위치(Location)는 자동(Automatic) 또는 한국과 가까운 아시아-태평양 지역(APAC)으로 지정 후 생성을 완료합니다.

Step 2: 퍼블릭 접근(Public Access) 및 커스텀 도메인 연결

이미지를 블로그 글에 <img src="..."> 형태로 띄우려면 외부 방문자가 읽을 수 있도록 공개 설정과 연결 도메인이 필요합니다.

Step 3: CORS(Cross-Origin Resource Sharing) 규칙 설정

블로그 본문 내 캔버스 처리나 외부 도메인 로딩 시 발생할 수 있는 이미지 차단 문제를 방지하기 위해 CORS 규칙을 등록해 둡니다.

버킷의 [설정] > [CORS 정책]에서 아래 JSON을 붙여넣고 저장합니다:

[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedHeaders": ["*"],
    "MaxAgeSeconds": 86400
  }
]

Step 4: API 토큰 발급 (자동 업로드용 / S3 호환 클라이언트)

웹 대시보드에서 직접 드래그 앤 드롭으로 업로드해도 되지만, PicGo, ShareX 같은 업로더 도구나 Node.js / Python 자동화 스크립트를 쓰려면 S3 호환 API 토큰이 필요합니다.

• R2 개요 화면 우측 상단의 [R2 API 토큰 관리(Manage R2 API Tokens)] 클릭
• 권한: 관리자(읽기 및 쓰기) 선택
• 발급 후 나타나는 Access Key ID, Secret Access Key, 그리고 Endpoint URL을 안전한 곳에 복사해 둡니다.

3. 코드 예시: Next.js / Node.js에서 R2로 이미지 업로드하기

Cloudflare R2는 기존 @aws-sdk/client-s3 라이브러리를 그대로 재사용할 수 있습니다. 엔드포인트 URL만 R2 주소로 변경해주면 끝납니다.

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

// 1. R2 클라이언트 초기화 (S3 SDK와 100% 호환)
const s3 = new S3Client({
  region: "auto",
  endpoint: `https://${process.env.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
  },
});

// 2. 이미지 업로드 함수 예시
export async function uploadImage(fileBuffer: Buffer, fileName: string, mimeType: string) {
  const command = new PutObjectCommand({
    Bucket: process.env.R2_BUCKET_NAME,
    Key: `blog/${Date.now()}-${fileName}`,
    Body: fileBuffer,
    ContentType: mimeType,
  });

  await s3.send(command);
  
  // 커스텀 도메인 URL 반환
  return `https://img.myblog.com/blog/${Date.now()}-${fileName}`;
}

4. 구글 SEO 관점에서의 이미지 최적화 팁 (Core Web Vitals)

스토리지 구축이 끝났다면, 검색 순위를 높이기 위한 이미지 테크니컬 SEO 3원칙을 함께 적용해야 합니다.

5. 자주 묻는 질문 (FAQ)