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

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

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

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

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

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

다 처음해 보는 작업이라 혼란스러웠지만, 막상 작업 후에는 "간단하네!" 상태가 되었어요.

* 이 글은 Cloudflare에서 구입한 도메인을 블로그스팟에 연결한 상태를 전제로 하고 있어요.

대화록: R2 저장소 이미지 서버 만들기

CHAT LOG

주인님. 계획대로 클라우드플레어사에 도착하여 R2 저장소를 탐색중입니다. 그런데... 최근 리뉴얼하였는지, 주인님이 알려주신 위치와 다릅니다. 확인 부탁드립니다.

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

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

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

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

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

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

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

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

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

TLS 버전을 지정할 것. 쓰레기 봇들을 막기 위해 1.2 이상으로 해야 함. 나머지는 클라우드플레어가 알아서 해 줌.

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

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

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

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

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

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

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

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

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

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

우리가 맞긴 파일이 어디 있는지 검색도 제대로 안 되네요...

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

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

불편해도 참아야 함. 클라우드플레어에서 도메인, 저장소 같이 빌려쓰면 에지 캐시를 쓸 수 있고 나중에 이사갈 때도 편함.

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

R2 저장소 설정 요약 정리

블로그스팟은 파일 못 올린다? 사진 올리면 주소가 너무 길고 복잡하다? 해결책은 언제나 있는 법. C.F. R2 저장소를 외부 미디어 서버로 만들어서 이미지나 컴포넌트 파일을 올릴 수 있어요. 절차는 아래와 같아요.

클라우드플레어 세팅 순서

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

이렇게 하면 돼요. 복잡해 보일수도 있지만, 막상 해 보면 아주 간단한 거예요. 처음에만 겁나요.

주의사항

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

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

R2 저장소를 미디어 서버로 쓰다가 프록시를 끄면? 난리가 나는 것이에요. 그러니까 절대로 프록시를 끄면 안 돼요. (메인 주소와는 달라요.)

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

내용이 길어져서 분리했으니 Cloudflare R2에서 CORS 정책 설정 확인하셔요.

셋째: 구글 검색 결과에서 이미지 미리보기를 크게할 수 없어요.

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

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

넷째: 썸네일 트릭이 어려워요.

블로그스팟에 직접 이미지 업도르하면 길고 요상한 주소가 나오지만, 그 대신 파라메터를 조절해서 원하는 크기를 불러올 수 있어요.

대충 "blogger.googleusercontent.com/img/b/~~~~~~~~~~~~~/s720/파일명" 이런 주소 구조를 갖고 있죠? 여기서 "s720"을 조절해서 작은 이미지를 불러올 수 있어요.

즉, 본문에 직접 렌더링 되는 것은 "s300" 같은 작은 크기, 클릭하면 보이는 이미지는 "s1600"으로 큰 이미지를 불러올 수 있단거죠. 업로드는 하나만 했는데 말이에요.

클라우드플레어같은 외부 저장소를 쓰면 그게 안 돼요. 해당 저장소에서 지원해줘야 하는데, C.F는 해당 기능 지원하긴 하지만 무료 티어에선 한달에 5000건의 제한이 있어요.

이런 단점도 있으니 참고하셔요.

주의점은 이제 다 설명한 것 같네요. 그럼 이만. 좋은 하루 되셔요~

Cloudflare R2 저장소의 이미지에 preview:large 설정하기

며칠 전에 이거 설정하고 워커를 통해 X-Robots-Tag를 주입하고 있었어요. 그거 아니면 방법이 없는 줄 알았어요.

그런데 아무리 생각해도 뭔가 아닌것 같아서 주인님(AI)을 추궁하니, 맙소사! 더 쉬운 방법이 있었던 거예요! 속에서 SkyFire가 치솟는 것이에요!

쉬운 해결법은 다음과 같아요.

Cloudflare 대시보드로 가셔요
도메인 -> 개요 -> 내 도메인 클릭
사이드 메뉴 -> 규칙 -> 개요 클릭
파란색 규칙 생성 버튼 클릭
목록 열리면 응답 헤더 변환 규칙 클릭
새 규칙 페이지가 열려요
거기서 사용자 필터 식 선택
수신 요청이 일치하는 경우... 하단 입력 폼에
필드: 호스트 이름, 연산자: 같음 요렇게 하신 뒤
값 항목에 미디어서버 주소를 넣어주셔요.
media.maidvsai.com 처럼 호스트 이름만 적으셔요.
바로 아래에, "이 경우..." 밑에 선택 상자가 있어요
거기서 "정적 추가" 선택
옆의 헤더 이름 = X-Robots-Tag
그 옆의 값 항목 = max-image-preview:large
이렇게 입력 후 배포 누르시면 끝이에요.

최종적으로 에지 캐시를 전부 날려버리신 후, 크롬 개발자 도구를 써서 헤더를 확인하면 돼요. 헤더 항목 하단에 x-robots-tag max-image-preview:large 요렇게 뜨면 끝!

남은 것은 구글이 잘 가져가기만을 기다리는 것 뿐, 이후로는 우리의 손을 떠난 거예요.

Cloudflare R2 저장소 요금 정책

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

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

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

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

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

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

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

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

도메인 연결 짧은 팁

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

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

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

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

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

이 블로그 검색

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

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

대화록: R2 저장소 이미지 서버 만들기