CloudFront 라이트세일 CDN 적용 중 발생했던 아이콘 깨짐과 CORS 오류를 해결한 과정을 정리했습니다. CloudFront 생성부터 워드프레스 CDN 연결, SSL 인증서 설정, DNS 매핑까지 따라할 수 있도록 이미지 기준으로 설명합니다.
CloudFront 라이트세일 CDN을 적용하려고 하는 분들이 가장 많이 겪는 문제가 바로 설정은 끝났는데 사이트가 정상적으로 동작하지 않는 상황입니다. 저 역시 처음에는 단순히 CDN만 연결하면 속도가 빨라질 것이라고 생각했는데 실제로는 SSL, DNS, CORS 문제까지 한꺼번에 겹치면서 예상보다 시간이 오래 걸렸습니다.
특히 워드프레스에서 이미지나 아이콘이 깨지는 현상이 생기면 단순 캐시 문제로 오해하기 쉽습니다. 하지만 실제 원인은 CloudFront 헤더 처리나 CORS 설정 충돌인 경우가 많았습니다. 그래서 이번 글에서는 단순 설치 과정이 아니라 “왜 문제가 생겼는지”와 “어떻게 해결했는지” 흐름으로 정리해보겠습니다.
이번 CloudFront 라이트세일 CDN 설정은 워드프레스 + 라이트세일 + CloudFront 환경 기준으로 진행했습니다. S3 버킷 방식이 아니라 웹서버를 Origin으로 사용하는 구조입니다.
목차
CloudFront 생성 시작
CloudFront 라이트세일 CDN 설정의 시작은 Distribution 생성입니다. 여기서 Create Distribution 버튼을 눌러야 실제 CDN 배포를 만들 수 있습니다.
처음 CloudFront를 접하면 메뉴가 많아서 어렵게 느껴질 수 있는데, 핵심은 “내 워드프레스 서버를 CDN 뒤에 연결한다”는 개념입니다. 이 단계가 시작점이기 때문에 여기서 잘못 선택하면 이후 설정이 꼬일 수 있습니다.
다음 단계에서는 Web 방식을 선택하게 됩니다. 여기서 중요한 부분은 정적 파일만이 아니라 HTML, CSS, 이미지까지 모두 배포할 수 있다는 설명입니다.
라이트세일 워드프레스는 일반 웹서버 구조이기 때문에 Web 배포 방식을 사용해야 이후 Origin 설정에서 정상 연결됩니다.
Origin 설정 문제 해결
CloudFront 라이트세일 CDN 설정에서 가장 중요한 부분 중 하나가 Origin Domain Name 입력입니다. 여기에는 자신의 워드프레스 주소를 넣어야 합니다.
여기서 HTTPS Only를 체크하지 않으면 일부 환경에서는 혼합 콘텐츠 문제가 생길 수 있습니다. 특히 HTTPS 사이트인데 CDN이 HTTP로 요청하면 브라우저 보안 경고가 발생하기도 합니다.
Origin ID는 자동 생성되므로 크게 건드리지 않아도 되지만, Origin Protocol Policy는 현재 사이트 환경과 동일하게 맞춰야 합니다.
CORS 오류 원인 분석
CloudFront 적용 후 아이콘이 깨지거나 CSS가 비정상적으로 보이는 경우가 있습니다. 이때 많이 놓치는 부분이 바로 Header Whitelist 설정입니다.
저는 처음에 캐시 문제라고 생각했지만 실제 원인은 Origin 헤더 전달 문제였습니다. 그래서 Cache Based on Selected Request Headers를 Whitelist로 변경하고 Origin 헤더를 추가하면서 정상 동작하기 시작했습니다.
이 과정을 하지 않으면 브라우저에서 리소스 접근을 차단하는 경우가 생길 수 있습니다.
SSL 인증서 연결 문제
CloudFront 라이트세일 CDN 적용 중 가장 오래 걸렸던 부분이 SSL 인증서였습니다. Custom SSL Certificate가 비활성화되어 있으면 CDN 도메인 연결 자체가 진행되지 않습니다.
여기서 AWS Certificate Manager 인증서를 먼저 생성해야 합니다. 인증서를 만들고 새로고침하면 Custom SSL Certificate 선택이 활성화됩니다.
이 단계를 건너뛰면 cdn.도메인 형태의 주소를 HTTPS로 사용할 수 없습니다.
CloudFront 도메인 확인
CloudFront 생성이 완료되면 Domain Name이 생성됩니다. 이후 DNS 연결 과정에서 이 주소를 사용하게 됩니다.
처음에는 단순 링크처럼 보이지만 실제로는 CDN 엔드포인트 역할을 하는 주소입니다. 따라서 정확히 복사해야 DNS 연결 과정에서 오류가 발생하지 않습니다.
DNS 연결 과정
이제 라이트세일 네트워킹 메뉴로 이동해서 DNS 영역 관리를 해야 합니다. CloudFront 라이트세일 CDN은 단순 생성만으로 끝나지 않습니다. DNS에서 cdn 서브도메인을 연결해야 실제 사이트에서 CDN 주소를 사용할 수 있습니다.
DNS 레코드 추가 단계에서는 cdn 서브도메인을 만들고 CloudFront 주소를 연결합니다. 여기서 오타가 발생하면 CDN 연결이 되지 않기 때문에 서브도메인과 매핑 주소를 정확하게 입력해야 합니다.
CloudFront CNAME 연결
CloudFront 설정 화면으로 다시 돌아와 General → Edit 메뉴를 눌러 수정 화면으로 이동합니다. 이 과정을 해야 CDN이 자신이 사용할 사용자 도메인을 인식하게 됩니다.
Alternate Domain Names 항목에 cdn.greenblog.co.kr 형태로 입력합니다. 이 과정을 하지 않으면 CloudFront 기본 주소만 사용 가능하며 사용자 CDN 도메인은 정상 작동하지 않을 수 있습니다.
워드프레스 CDN 연결
CloudFront 라이트세일 CDN 연결 마지막 단계는 워드프레스 캐시 플러그인 설정입니다. 저는 WP Fastest Cache를 사용했는데 CDN URL과 Origin URL을 각각 입력해 연결했습니다. 이후 정적 파일이 CDN을 통해 배포되기 시작했습니다.
적용 후에는 이미지 로딩 속도가 눈에 띄게 빨라졌고, 모바일 환경에서 체감 차이가 확실히 있었습니다.
CORS 오류 해결 과정
CloudFront 라이트세일 CDN 적용 후 가장 마지막까지 남았던 문제가 아이콘 깨짐 현상이었습니다. 원인을 찾다 보니 브라우저에서 CORS 접근을 차단하고 있었고, 결국 S3 버킷에서 CORS 설정을 추가하면서 해결됐습니다.
이 단계 이후 깨지던 아이콘과 일부 CSS 리소스가 정상적으로 표시되기 시작했습니다. 단순 캐시 삭제로 해결되지 않는다면 CORS 설정까지 확인해야 합니다.
CloudFront 라이트세일 CDN 적용 후 가장 크게 느껴졌던 변화는 정적 파일 응답 속도였습니다. 이미지와 CSS 로딩이 빨라졌고 해외 접속 환경에서도 체감 차이가 생겼습니다.
하지만 단순히 CDN만 연결한다고 끝나는 것은 아니었습니다. DNS, SSL, CORS처럼 연결 구조를 이해해야 실제 문제를 해결할 수 있었고, 특히 아이콘 깨짐 같은 현상은 대부분 헤더와 권한 문제에서 시작된다는 점을 알게 됐습니다.
지금 같은 구조라면 이미지 파일이 많거나 워드프레스 속도 문제로 고민하는 경우 CloudFront 라이트세일 CDN 설정을 한 번쯤 점검해보는 것도 방법이 될 수 있습니다.
▶ 라이트세일 PHP 버전 다를 때 해결 방법 (웹 서버·CLI 버전 맞추기)
