SJSBiz SJSBiz

Cloudflare CDN 설정 방법 | WordPress 속도를 높이는 적용 가이드

읽는 시간 약 16분
(adsbygoogle = window.adsbygoogle || []).push({});
image 8

WordPress 사이트를 운영하다 보면 서버 성능에는 문제가 없는데도 페이지가 느리게 열리는 경우가 있습니다.

이미지와 CSS, JavaScript 파일이 늘어나거나 해외 방문자가 접속하면 서버와 사용자 사이의 거리가 멀어져 로딩 시간이 길어질 수 있기 때문입니다.

이럴 때 활용할 수 있는 것이 **CDN(Content Delivery Network)**입니다. CDN을 사용하면 웹사이트 파일을 방문자와 가까운 서버에서 제공해 로딩 속도를 개선하고 원본 서버의 부담도 줄일 수 있습니다.

이번 글에서는 CDN이 무엇인지, Cloudflare를 WordPress에 적용하는 방법과 설정 시 주의사항을 쉽게 알아보겠습니다.

30초 요약

  • CDN은 웹사이트 파일을 여러 지역의 서버에 저장하는 기술이다.
  • 방문자와 가까운 서버에서 파일을 전송해 로딩 속도를 높인다.
  • 이미지, CSS, JavaScript, 폰트 같은 정적 파일에 효과적이다.
  • Cloudflare를 이용하면 WordPress에도 비교적 쉽게 적용할 수 있다.
  • 관리자, 로그인, 장바구니, 결제 페이지는 캐시하면 안 된다.
  • 적용 후에는 캐시 상태와 사이트 기능을 반드시 확인해야 한다.

CDN이란?

CDN은 Content Delivery Network의 약자로, 콘텐츠 전송 네트워크를 의미합니다.

일반적인 웹사이트에서는 방문자가 페이지를 요청할 때마다 원본 서버가 이미지와 HTML, CSS, JavaScript 파일을 직접 전송합니다.

서버가 서울에 있고 방문자도 국내에 있다면 큰 문제가 없을 수 있습니다. 하지만 미국이나 유럽처럼 서버에서 멀리 떨어진 지역의 사용자가 접속하면 데이터가 이동해야 하는 거리가 길어집니다.

CDN은 여러 지역에 있는 서버에 웹사이트 파일을 미리 저장합니다. 방문자가 접속하면 원본 서버가 아니라 가까운 CDN 서버에서 파일을 전달합니다.

쉽게 말하면 한 곳의 창고에서 모든 상품을 보내는 대신, 여러 지역의 물류센터에 상품을 보관해 가까운 곳에서 배송하는 것과 비슷합니다.

CDN은 어떻게 작동할까?

image 10

방문자가 웹사이트의 이미지를 처음 요청하면 CDN 서버는 자신에게 해당 이미지가 있는지 확인합니다.

이미지가 없으면 원본 서버에서 파일을 가져와 방문자에게 전달하고, 동시에 CDN 서버에도 저장합니다.

다음 방문자가 같은 이미지를 요청하면 원본 서버까지 가지 않고 CDN에 저장된 파일을 바로 제공합니다.

이때 CDN에 파일이 있는 상태를 **캐시 적중(Cache Hit)**이라고 합니다. 파일이 없어 원본 서버에서 가져오는 상태는 **캐시 미스(Cache Miss)**라고 합니다.

정리하면 다음과 같은 순서로 작동합니다.

  1. 방문자가 웹사이트 파일을 요청합니다.
  2. 가까운 CDN 서버가 요청을 받습니다.
  3. 저장된 파일이 있으면 즉시 전달합니다.
  4. 파일이 없으면 원본 서버에서 가져옵니다.
  5. 가져온 파일을 저장해 다음 요청에 재사용합니다.

Cloudflare 공식 문서에서도 이미지와 CSS, JavaScript 같은 정적 파일은 기본적으로 캐시할 수 있지만, HTML 같은 동적 콘텐츠는 별도 규칙이 없으면 기본적으로 캐시되지 않는다고 설명합니다.

CDN을 사용하면 좋은 점

1. 페이지 로딩 속도가 빨라진다

CDN은 방문자와 가까운 서버에서 파일을 제공합니다.

데이터가 이동하는 거리가 짧아지고 원본 서버에 연결하는 횟수도 줄어들기 때문에 이미지와 CSS 같은 파일을 더 빠르게 불러올 수 있습니다.

해외 방문자가 있거나 이미지가 많은 사이트라면 효과가 더욱 커질 수 있습니다.

2. 원본 서버의 부담이 줄어든다

CDN에 저장된 파일은 원본 서버가 아니라 CDN 서버에서 제공합니다.

같은 이미지가 수천 번 요청되더라도 상당수의 요청을 CDN이 처리하기 때문에 서버의 네트워크 사용량과 요청 수를 줄일 수 있습니다.

방문자가 갑자기 늘어나는 상황에서도 원본 서버가 받는 부담을 완화하는 데 도움이 됩니다.

3. 해외 방문자의 접속 속도가 개선된다

원본 서버와 방문자의 거리가 멀수록 네트워크 지연 시간이 길어질 수 있습니다.

CDN은 여러 국가와 지역에 분산된 서버를 이용하기 때문에 해외 사용자에게도 비교적 안정적인 속도로 콘텐츠를 전달할 수 있습니다.

4. 보안 기능을 함께 사용할 수 있다

Cloudflare와 같은 CDN 서비스는 콘텐츠 전송뿐 아니라 다음과 같은 기능도 제공합니다.

  • DDoS 공격 완화
  • 악성 봇 차단
  • SSL 인증서 지원
  • 방화벽 규칙
  • 원본 서버 IP 보호
  • 비정상적인 요청 차단

다만 CDN만 적용한다고 WordPress 보안이 완성되는 것은 아닙니다. WordPress와 플러그인 업데이트, 관리자 계정 보호도 함께 관리해야 합니다.

CDN 적용 전후 비교

image 11
항목CDN 적용 전CDN 적용 후
파일 전송 위치원본 서버가까운 CDN 서버
해외 접속 속도느려질 수 있음지연 시간 감소
서버 요청 수많음캐시된 요청 감소
트래픽 급증 대응서버에 부담 집중일부 요청 분산
정적 파일 전송서버가 직접 처리CDN이 대신 처리
보안 기능서버 설정에 의존CDN 보안 기능 활용 가능

어떤 파일을 캐시해야 할까?

CDN은 내용이 자주 바뀌지 않는 정적 파일에 가장 효과적입니다.

캐시하기 좋은 파일은 다음과 같습니다.

  • JPG, PNG, WebP, AVIF 이미지
  • CSS 스타일 파일
  • JavaScript 파일
  • WOFF, WOFF2 웹 폰트
  • 동영상
  • 문서와 다운로드 파일

반대로 사용자마다 내용이 달라지는 페이지는 캐시하지 않는 것이 안전합니다.

  • WordPress 관리자 페이지
  • 로그인 페이지
  • 회원 정보 페이지
  • 장바구니
  • 결제 페이지
  • 주문 내역
  • 로그인한 사용자 전용 화면

사용자별 페이지가 캐시되면 로그인 상태가 풀리거나 다른 사용자의 정보가 표시되는 문제가 발생할 수 있습니다.

WordPress에 Cloudflare CDN 설정하기

image 12

1. Cloudflare에 사이트 추가

Cloudflare 계정을 만든 다음 사용 중인 도메인을 추가합니다.

Cloudflare가 기존 DNS 정보를 확인하면 웹서버를 가리키는 레코드가 올바른지 점검합니다.

설정 과정에서 안내되는 Cloudflare 네임서버로 도메인의 네임서버를 변경하면 연결을 진행할 수 있습니다.

네임서버 변경 내용이 반영되는 데는 시간이 걸릴 수 있습니다.

2. DNS 연결 상태 확인

Cloudflare의 DNS 설정에서 도메인과 www 주소가 올바른 서버를 가리키는지 확인합니다.

프록시가 활성화된 레코드는 방문자 요청이 Cloudflare를 거쳐 원본 서버로 전달됩니다.

설정 후에는 다음 주소가 모두 정상적으로 열리는지 확인합니다.

  • 홈페이지
  • 개별 게시글
  • 카테고리 페이지
  • WordPress 관리자 페이지
  • 이미지 파일

3. SSL 설정 확인

WordPress 주소가 HTTPS를 사용한다면 Cloudflare와 원본 서버의 SSL 설정도 확인해야 합니다.

원본 서버에 정상적인 SSL 인증서가 설치되어 있다면 원본 서버까지 암호화된 연결을 사용하는 것이 안전합니다.

SSL 설정이 잘못되면 다음과 같은 문제가 생길 수 있습니다.

  • 리디렉션 무한 반복
  • HTTPS 경고
  • 관리자 로그인 오류
  • 이미지 혼합 콘텐츠 경고
  • HTTP와 HTTPS 주소가 반복 이동하는 문제

HTTPS의 기본 원리는 SJSBIZ의 HTTP vs HTTPS 차이와 SSL 동작 원리 쉽게 이해하기 글에서 확인할 수 있습니다.

(adsbygoogle = window.adsbygoogle || []).push({});

4. 정적 파일 캐시 확인

Cloudflare를 연결하면 이미지, CSS, JavaScript 같은 정적 파일은 기본 캐시 정책에 따라 처리할 수 있습니다.

처음에는 모든 HTML 페이지를 캐시하려고 하기보다 정적 파일이 정상적으로 제공되는지부터 확인하는 것이 좋습니다.

사이트에 접속한 다음 다음 항목을 점검합니다.

  • 이미지가 정상적으로 표시되는가?
  • CSS가 깨지지 않는가?
  • 메뉴와 버튼이 정상적으로 작동하는가?
  • 모바일 화면에 문제가 없는가?
  • 관리자 페이지에 접속할 수 있는가?

5. 동적 페이지 캐시 제외

전체 페이지 캐시를 사용한다면 동적 경로를 반드시 제외해야 합니다.

대표적으로 다음 경로는 캐시하지 않는 것이 좋습니다.

/wp-admin/*
/wp-login.php
/cart/*
/checkout/*
/my-account/*

쇼핑몰이 아니라면 장바구니와 결제 경로는 없을 수 있습니다. 사용하는 회원 또는 쇼핑몰 플러그인에 따라 제외할 경로를 추가해야 합니다.

로그인 쿠키나 장바구니 세션이 있는 요청도 캐시를 우회하도록 설정하는 것이 안전합니다.

6. 캐시 기간 설정

이미지와 CSS처럼 자주 변경되지 않는 파일은 비교적 긴 캐시 기간을 사용할 수 있습니다.

하지만 같은 URL의 파일 내용을 변경하면 CDN이 이전 파일을 계속 제공할 수 있습니다. 이를 방지하려면 파일명에 버전이나 해시를 포함하는 것이 좋습니다.

style.css
style-v2.css
style-a82f91.css

이렇게 파일명이 변경되면 브라우저와 CDN은 새로운 파일로 인식합니다.

7. 게시글 수정 후 캐시 삭제

게시글이나 디자인을 수정했는데 이전 내용이 계속 보인다면 CDN 캐시가 남아 있을 수 있습니다.

이때는 변경한 게시글이나 파일의 URL만 선택적으로 삭제하는 것이 좋습니다.

전체 캐시를 삭제하면 모든 지역의 저장 파일이 사라져 방문자의 다음 요청이 원본 서버로 몰릴 수 있습니다. Cloudflare도 가능하면 전체 삭제보다 필요한 URL만 제거하는 방식을 권장합니다.

Cloudflare 캐시 확인 방법

image 13

Cloudflare의 캐시 상태는 브라우저 개발자 도구에서 확인할 수 있습니다.

  1. 확인할 페이지를 엽니다.
  2. 키보드에서 F12를 누릅니다.
  3. Network 탭을 선택합니다.
  4. 이미지나 CSS 파일을 선택합니다.
  5. Response Headers를 확인합니다.

다음과 같은 헤더가 표시될 수 있습니다.

CF-Cache-Status: HIT
상태의미
HITCDN에 저장된 파일이 전송됨
MISS캐시에 없어 원본 서버에서 가져옴
DYNAMIC기본적으로 캐시 대상이 아님
BYPASS규칙이나 응답 헤더 때문에 캐시하지 않음
EXPIRED기존 캐시가 만료됨
REVALIDATED원본 서버에서 변경 여부를 확인함

처음 요청했을 때 MISS가 나오고 새로고침 후 HIT가 표시되는 것은 정상적인 흐름일 수 있습니다.

CDN 설정 시 주의사항

모든 페이지를 무조건 캐시하지 않기

홈페이지와 게시글은 캐시할 수 있지만 로그인, 관리자, 결제 페이지는 사용자별 정보가 포함됩니다.

캐시 범위를 무리하게 넓히기보다 정적 파일부터 시작하는 것이 안전합니다.

캐시 플러그인과 중복 확인하기

LiteSpeed Cache, WP Rocket 같은 WordPress 캐시 플러그인을 사용한다면 Cloudflare 설정과 중복되는 기능이 있을 수 있습니다.

HTML 캐시와 CSS·JavaScript 최적화, 파일 압축 기능을 여러 곳에서 동시에 적용하면 화면이 깨질 수 있습니다.

설정은 한 번에 모두 변경하지 말고 하나씩 적용한 후 결과를 확인하세요.

원본 서버 최적화도 함께하기

CDN은 이미지와 정적 파일 전송에는 효과적이지만 느린 PHP 실행이나 데이터베이스 문제를 직접 해결하지는 않습니다.

캐시되지 않은 요청은 여전히 원본 서버가 처리합니다. 따라서 Redis 캐싱 전략으로 서버 부하 줄이는 방법과 서버 최적화도 함께 고려해야 합니다.

CDN 적용 후 체크리스트

  • Cloudflare 네임서버 연결 완료
  • DNS 레코드 정상 작동 확인
  • 홈페이지와 게시글 접속 확인
  • HTTPS 연결 확인
  • 이미지와 CSS 표시 확인
  • 관리자와 로그인 페이지 캐시 제외
  • 장바구니와 결제 페이지 캐시 제외
  • 로그인 사용자 요청 캐시 제외
  • 모바일 화면 테스트
  • 캐시 상태 헤더 확인
  • 게시글 수정 후 캐시 갱신 확인
  • PageSpeed Insights 적용 전후 비교

SJSBIZ TIP

Cloudflare를 연결했다고 무조건 사이트가 빨라지는 것은 아닙니다.

먼저 이미지나 CSS 파일의 CF-Cache-StatusHIT인지 확인하세요. 캐시되지 않는 파일이 많다면 캐시 규칙과 원본 서버의 Cache-Control 헤더를 점검해야 합니다.

CDN 적용 전후의 PageSpeed Insights 결과도 비교하는 것이 좋습니다. 특히 TTFB와 LCP, 이미지 다운로드 시간을 확인하면 실제 개선 효과를 판단하기 쉽습니다.

프론트엔드 최적화 방법은 웹사이트 로딩 속도 개선을 위한 프론트엔드 최적화 방법에서 자세히 확인할 수 있습니다.

FAQ

무료 Cloudflare만 사용해도 효과가 있나요?

개인 블로그나 일반적인 WordPress 사이트라면 무료 플랜으로도 정적 파일 캐싱과 기본적인 속도 개선 효과를 기대할 수 있습니다.

고급 캐시 제어와 추가 보안 기능이 필요할 때 유료 기능을 검토하면 됩니다.

국내 방문자만 있어도 CDN이 필요한가요?

서버와 방문자가 모두 국내에 있고 트래픽이 적다면 속도 차이가 크지 않을 수 있습니다.

하지만 이미지가 많거나 방문자가 갑자기 늘어나는 사이트라면 서버 요청을 줄이는 목적으로 도움이 될 수 있습니다.

CDN과 캐시 플러그인을 함께 사용해도 되나요?

함께 사용할 수 있습니다.

다만 두 서비스에서 HTML 캐시나 CSS·JavaScript 결합 같은 기능을 동시에 적용하면 충돌할 수 있습니다. 역할을 나누고 설정을 하나씩 테스트하는 것이 좋습니다.

Cloudflare를 사용하면 HTTP/3도 적용되나요?

Cloudflare 설정과 서비스 지원 상태에 따라 방문자와 Cloudflare 사이에서 HTTP/3를 사용할 수 있습니다.

HTTP 버전에 따른 차이는 HTTP 1.1 vs HTTP 2 vs HTTP 3 차이와 실제 성능 영향 비교 글을 참고하세요.

글을 수정했는데 이전 내용이 보이는 이유는 무엇인가요?

브라우저 캐시나 CDN 캐시에 이전 페이지가 남아 있기 때문일 수 있습니다.

먼저 변경한 URL의 캐시를 삭제하고, WordPress 캐시 플러그인을 사용하고 있다면 플러그인 캐시도 함께 비운 후 다시 확인하세요.

마무리

Cloudflare CDN은 WordPress 사이트의 이미지와 CSS, JavaScript 같은 파일을 가까운 서버에서 제공해 로딩 속도와 안정성을 개선하는 데 도움이 됩니다.

설정에서 가장 중요한 것은 모든 페이지를 무조건 캐시하지 않는 것입니다. 정적 파일은 적극적으로 캐시하고 관리자, 로그인, 장바구니, 결제처럼 사용자마다 내용이 달라지는 페이지는 반드시 제외해야 합니다.

처음에는 기본 설정으로 시작한 뒤 사이트 기능과 캐시 상태를 확인하면서 범위를 넓혀 보세요. CDN과 이미지 최적화, 서버 캐시를 함께 적용하면 더욱 안정적인 속도 개선을 기대할 수 있습니다.

(adsbygoogle = window.adsbygoogle || []).push({});
깨비

함께 보면 좋은 글

댓글 0

첫 댓글을 남겨보세요.

error: Content is protected !!
광고보고 콘텐츠 계속 읽기
원치않으시면 뒤로가기를 해주세요

광고 차단 알림

광고 클릭 제한을 초과하여 광고가 차단되었습니다.

단시간에 반복적인 광고 클릭은 시스템에 의해 감지되며, IP가 수집되어 사이트 관리자가 확인 가능합니다.

광고보고 콘텐츠 계속 읽기
원치않으시면 뒤로가기를 해주세요