구글이 안 해줘서 직접 만듦! 블로그스팟 무료 파일 서버

블로그스팟 Cloudflare R2 파일 업로드 가이드

의문: 구글블로그에 파일 업로드 가능?

안타깝게도 구글은 블로그스팟에서 파일 업로드를 허용하지 않아요. CSS, JS 같은 파일은 따로 파일을 만들어 올릴 수 없고 전부 테마 파일에 다 뭉쳐서 넣어야 하죠.

그래서 수십 kB의 사용자 스타일/스크립트를 html 파일에 묶어서 한 번에 던져버려요.
이미지는 업로드 가능하지만, 그것도 굉장히 길고 복잡한 주소가 만들어져서 곤란한 점이 있고요.

테마에 인라인으로 코드를 넣어도 큰 문제 없다지만, 관리의 불편함과 미묘하게 페이지 로딩이 느린 느낌이 불편하더라고요.

Q: 그럼 외부 서버에서 이미지, css, js, font 파일을 올려서 블로그에 사용할 수 있나요?
A: 가능. 완전 가능이예요. Cloudflare R2 저장소를 이용하면 아주 간단하게 해결되어요.

다 처음해 보는 작업이라 혼란스러웠지만, 주인님과 함께하였더니 결국 성공할 수 있었어요. 단, 이 글은 Cloudflare에서 구입한 도메인을 블로그스팟에 연결한 상태를 전제로 하고 있어요.

대화록: R2 저장소를 미디어 서버로 설정하기

주인님. 계획대로 주황구름사에 도착하여 R2 저장소를 탐색중입니다.
그런데... 최근 사옥을 리뉴얼하여 주인님이 알려주신 위치와 다릅니다. 확인 부탁드립니다.

날카로운 지적임. 기존 지도는 더 이상 유효하지 않음.

네...(뿌득!) 그러니까... 최신 정보를 달라 이겁니다. 도메인 계약은 이미 했으니 저장소 위치를 알려주시면 되겠습니다. 현재 해당 부서 내부에 있습니다.

어카운트 > 스토리지 및 데이터베이스 > R2 저장소 > 개요.

클라우드플레어 R2 저장소 메뉴 위치

네. 확인했습니다. 조금 돌아 나가야 하는군요.

......도착했습니다. 버킷을 생성하라는데, 뭘 어떻게 해야하죠?

버킷 이름을 정하고 위치: 자동으로, 기본 저장 공간 클래스: 표준으로 선택할 것. 이름은 바꿀 수 없으니 신중하게.

R2 버킷 설정화면

네. 했어요. 그 다음은요? 이 상태로 파일을 넣어봤는데, 아무런 연결 주소도 표시되지 않네요.

사용자 설정 도메인 추가해야 함. 설정 -> 사용자 설정 도메인으로 가서 추가. 우리 도메인의 하위 도메인으로 정해야 함.

R2 버킷 사용자 도메인 추가 화면

네. media.maidvsai.com로 미디어 서버를 사용하기로 했죠? 적었어요. 계속할거냐고 묻는데, 이대로 진행할까요?

TLS 버전을 지정할 것. 쓰레기 봇들을 막기 위해 1.2 이상으로 해야 함. 나머지는 주황구름이 알아서 해 줌.

R2 버킷 사용자 도메인 TLS 설정 장면

네. 알겠..! 또 뭔가 묻는데요?! CNAME 어쩌고 하는데 뭔지 모르겠어요...

진정. 진정. 그냥 확인하는 것임. "CNAME media maidvsai" 이런식임? R2 버킷과 DNS 레코드를 연결할 거라고 알려주는 것 뿐임. 문제 없음.

진짜요? 아유... 십년감수했네요. 뭐가 갑자기 튀어나와... 아! 이제 아까 올려둔 물건으로 가는 주소가 생겼어요.

이제부터 해당 R2 저장소에 맞기는 물건은 자동으로 [media.maidvsai.com/파일명] 이렇게 주소가 붙음. 완전 자동임.

엄청 편하네요! 그런데 물건을 한 장소에 다 쌓으면 나중에 찾기 힘든데요, 어떻게 분류하죠?

폴더 추가를 눌러서 새 폴더를 만들고 거기에 집어넣으면 됨. 이제 끝. 신경쓸 거 없음.

생성된 버킷에서 폴더를 만든 모습

그렇군요... 그런데 물건 위치를 바꾸려니까 꼼짝도 안 하는데요? 이건 어쩌죠?

당연함. R2 저장소는 AmazonRainforest의 S3 호환이라 실제 물건의 위치가 존재하지 않음.

그래서, 어.떻.게 하냐고요.

지우고 다시 올려야 함. 그 방법 뿐임.

직원에게 물어보니까 우리가 맞긴 물건이 어디 있는지 검색도 제대로 안 되네요...

접두사 기준이라 중간의 단어를 넣어도 소용없음. 무조건 앞에서부터 차례로 말해야 알아들음.

하아... 이게 진짜 맞는지 모르겠네요.

불편해도 참아야 함. 주황구름에서 도메인, 저장소 같이 빌려쓰면 에지 캐시를 쓸 수 있고 나중에 이사갈 때도 편함.

네. 알겠어요. 구골사에서 요상한 주소 할당하는 거랑 그림 외엔 아무것도 못 맡기는 것보다는 낫겠죠. 네.

R2 저장소 설정 요약 정리

주인님과의 대화에서 처럼, C.F. R2 저장소를 외부 미디어 서버로 만들어서 이미지나 컴포넌트 파일을 올릴 수 있어요. 절차는 아래와 같아요.

클라우드플레어 세팅 순서

  1. 클라우드플레어 계정 대시보드 접속
  2. 스토리지 및 데이터베이스
    1. R2 객체 스토리지
    2. 개요
  3. 버킷 생성 (우측 상단)
    1. 위치: 자동
    2. 기본 저장 공간 클래스: 표준
  4. 도메인 추가
    1. 설정(좌측 상단)
    2. 사용자 설정 도메인 -> 추가
    3. 서브 도메인 입력 (ex: media.maidvsai.com)
    4. TLS 지정 (선택, 1.2이상 권장)

이렇게 하면 되어요. 복잡해 보일수도 있지만, 막상 해 보면 아주 간단한 것이어요.

주의사항

다만 몇가지 주의점이 있어요.

크랄우드플레어 DNS Proxy가 켜진 모습

첫째: 이 기능은 클라우드플레어의 DNS 레코드 설정에서 프록시를 켰을 때, 즉 주황색 구름 표시가 있을 때만 동작해요.

R2 저장소를 미디어서버로 쓰다가 프록시를 끄면? 난리가 나는 것이예요. 그러니까 절대로 프록시를 끄면 안 되어요.


둘째: 저장소에 폰트 파일을 넣어두고 쓰려면 크로스 오리진 문제로 로딩이 불가능해요. 요건 버킷 설정에서 CORS 정책을 추가해서 해결할 수 있어요.

버킷 설정 -> CORS 정책 -> 추가를 눌러서 아래의 코드를 입력하세요.

[
  {
    "AllowedOrigins": [
      "https://maidvsai.com",
      "https://www.maidvsai.com"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3600
  }
]
R2 버킷 CORS 정책 설정 화면

여기서 AllowedOrigins 항목의 사이트 주소는 필요한 대로 바꾸시고, MaxAgeSeconds 값의 3600초 역시 필요한 값으로 바꾸시면 되어요.
모든 사이트에서 다 접속 가능하게 하려면 사이트 주소 대신 애스터리스크(*) 를쓰면 된답니다. 검색엔진 페이지에 노출된다던가 하는 경우 말이예요.

method는 주인님이 HEAD, OPTION도 포함해야 폰트나 css, js 오류가 안 난다고 하시던데, 저는 요청과 저장소가 같은 도메인 아래에 있는 상태라, 멀쩡하네요. 문제 생기면 그때 추가하려고요. (현재는 단순 R2 -> worker로 교체한 상태예요.)
사용자 정의 헤더나 fetch(), XMLHttpRequest 같은 기능을 쓰려면 GET만 허용했을 때 문제 생긴다니까, 그거 필요할 때 다시 설정하죠 뭐.

또, 크롤러 문제가 생길 수도 있겠지만... 예전에 워드프레스 사이트 운영할 때의 경험을 보면, 정상적인 봇은 전부 GET을 요청하지 다른 method를 요청하는 경우는 적더라고요. 딴거 요구하는 것들은 전부 쓰레기 봇이었어요.


셋째: 구글 검색 결과에서 이미지 미리보기를 크게할 수 없다고 해요. 주인님이 그러셨어요.

마지막 문제를 해결하려면 역시 클라우드 플레어에서 worker를 사용해야 하는데요, 이 경우 R2 저장소 버킷에서 연결한 media.maidvsai.com은 삭제하고 worker에서 따로 연결해야 해요.

이것도 해보면 간단하지만 설명하려면 내용이 너무 길어지니 언젠가... 다음 기회에 또 이야기하기로 해요. 일단 저는 워커 사용중이지만, 주인님 말씀에 쪼끔 의심스러운 점도 있고요.

그럼 이만. 좋은 하루 되시어요~

Cloudflare R2 저장소 요금 정책

아참, 가격을 빼먹었네요. 결론만 말하자면 R2 저장소는 기본적으로 무료에요. 사용량이 많아지면 요금을 청구하긴 하는데요,

  1. 저장용량: 10GB
  2. 클래스 A작업: 100만 요청 / 월
  3. 클래스 B작업: 1000만 요청 / 월

요렇게 무료로 쓸 수 있어요. 클래스 A는 주로 쓰기와 같은 상태 변경을, 클래스 B는 읽기처럼 상태를 변경하지 않는 작업이라고 하네요.

내 사이트는 방문자 많다/많을거다, 요금 많이 나오면 어쩌냐?

  1. 저장용량: $0.015 / GB / 월
  2. 클래스 A작업: 4.5$ / 100만요청
  3. 클래스 B작업: 0.36$ / 100만요청

무료 용량을 소진하면 그다음부터 사용량에 따른 청구를 하는데요, 보시다시피 그리 비싸지 않죠? 애초에 개인블로그 수준에서는 무료 용량도 다 못 쓸 거예요, 아마.

다만, 사용량 기반이라고 해도 1요청 단위 혹은 1kB 단위로 청구되지는 않아요. 요금 정책에 반올림 혹은 끝자리 올림 정책이 있으니 글 아래의 출처를 확인하셔요.


* 이 내용은 2026-05-09 기준이니 참고하셔요.

도메인 연결 짧은 팁

클라우드플레어에서 도메인 구입하고 블로그스팟에 연결했는데, 적용이 안 되시나요? 시키는 대로 다 했지만 그래도 접속이 안 되시나요?

  • Cloudflare: DNS 전용 모드
  • Blogspot: 도메인 리디렉션, HTTPS 사용 여부, HTTPS 리디렉션

이 항목을 확인해 보세요. 클라우드 플레어는 계정 홈 -> 도메인 -> 개요에서 구입한 도메인을 클릭한 뒤 DNS -> 레코드 항목에서 확인해 보셔요. 전부 회색으로 DNS 전용 모드가 되어야 해요.

블로그스팟은 설정페이지에서 조금만 아래로 내려오면 해당 항목이 보여요. 전부 켜진 상태, 녹색이 되어있어야 해요.

도메인이 확실하게 연결된 후에는 클라우드플레어 프록시를 켜도 상관없어요.

참고 및 출처

메이드에게 충격을 주는 댓글은 삭제합니다