워드프레스 SSL(HTTPS) 적용 후 사이트가 깨질 때 해결하는 5가지 방법

보안을 위해 SSL 인증서를 설치했는데, 왜 사이트 메뉴와 레이아웃이 다 깨지고 브라우저에 여전히 보안 경고가 떠서 당황스러우셨나요?

https:// 로 접속했음에도 CSS가 정상적으로 불러와지지 않아 글자와 링크만 덩그러니 남거나, 일부 이미지가 X표시로 엑박이 나는 현상, 혹은 ERR_TOO_MANY_REDIRECTS 오류가 발생하는 경우가 많습니다. 이는 SSL 인증서 자체의 결함이라기보다 워드프레스 내부 주소 설정이나 기존 HTTP 리소스, 캐시 등이 얽혀 발생하는 문제일 확률이 높습니다.

이번 글에서는 SSL 적용 후 웹사이트가 깨지는 현상을 완벽하게 복구하는 5가지 핵심 해결책을 순서대로 정리해 드립니다.

1. 워드프레스 일반 설정의 주소(URL) 확인

가장 기본적이면서도 자주 놓치는 원인은 워드프레스 설정에 등록된 주소가 여전히 http://로 남아있는 경우입니다.

워드프레스 관리자 페이지(wp-admin)에 접속합니다.
설정 → 일반 메뉴로 이동합니다.
워드프레스 주소 (URL)와 사이트 주소 (URL) 항목을 확인합니다.
두 항목 모두 http://를 https://로 변경한 뒤 하단의 변경사항 저장을 클릭합니다.

만약 관리자 페이지 접속조차 불가능한 상태라면, FTP를 통해 wp-config.php 파일에 아래 코드를 추가하여 강제로 HTTPS 주소를 지정할 수 있습니다.

PHP

define('WP_HOME', 'https://내도메인.com');
define('WP_SITEURL', 'https://내도메인.com');

2. 혼합 콘텐츠(Mixed Content) 오류 수정

SSL을 적용했더라도 페이지 내에 연결된 이미지, 스크립트, 폰트 파일의 경로가 여전히 http://로 불러와지면 브라우저는 해당 페이지를 ‘안전하지 않음’으로 판단하고 스타일시트(CSS) 차단을 감행합니다.

크롬 개발자 도구(F12) 활용: F12를 누른 뒤 Console(콘솔) 탭을 열어보면 Mixed Content 관련 경고 문구가 빨간색으로 표시됩니다.
플러그인 활용 해결: 가장 간단한 방법은 Really Simple SSL 또는 Better Search Replace 플러그인을 설치하여 기존 DB에 남아있는 http:// 경로를 일괄 https://로 치환하는 것입니다.

.htaccess 파일에 HTTPS 강제 리디렉션 코드 추가

방문자가 http://로 접속하더라도 자동으로 https://로 연결되도록 서버 수준에서 리디렉션을 걸어주어야 합니다. Apache 서버 환경을 사용 중이라면 .htaccess 파일 상단에 다음 구문을 추가하세요.

Apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

주의: 코드를 수정하기 전 기존 .htaccess 파일의 백업본을 반드시 저장해 두세요.

4. 캐시(Cache) 데이터 전면 삭제

설정을 바꿨음에도 증상이 해결되지 않는다면 이전 HTTP 시절의 데이터가 브라우저나 서버 캐시에 남아있기 때문입니다.

브라우저 캐시 삭제: Ctrl + Shift + Delete를 눌러 브라우저 방문 기록 및 쿠키/캐시 데이터를 삭제하거나, 시크릿 창으로 접속해 봅니다.
워드프레스 캐시 플러그인 초기화: WP Rocket, LiteSpeed Cache 등 사용 중인 캐시 플러그인의 Clear Cache 버튼을 눌러 비워줍니다.
Cloudflare 캐시 Purge: 클라우드플레어를 사용 중이라면 Caching → Configuration → Purge Everything을 실행합니다.

5. Cloudflare Flexible SSL 설정 오류 수정 (무한 리디렉션 발생 시)

Cloudflare를 사용하는 사이트에서 ERR_TOO_MANY_REDIRECTS 오류가 발생하며 페이지가 안 열린다면 SSL 암호화 모드 설정 문제입니다.

Cloudflare 관리 타블렛에 접속합니다.
SSL/TLS → Overview 메뉴로 이동합니다.
암호화 모드가 Flexible로 되어 있다면 Full 또는 Full (strict) 모드로 변경합니다.

Flexible 모드는 Cloudflare와 실제 서버 간 통신을 HTTP로 처리하기 때문에 워드프레스의 HTTPS 강제 설정과 충돌을 일으켜 무한 리디렉션을 유발합니다.

SSL 오류 해결 단계 요약

단계	점검 항목	주요 원인 및 조치 내용
1단계	워드프레스 주소 설정	`http://`를 `https://`로 변경
2단계	혼합 콘텐츠(Mixed Content)	이미지/CSS의 HTTP 경로를 HTTPS로 치환
3단계	.htaccess 리디렉션	301 강제 HTTPS 리디렉션 구문 추가
4단계	캐시 초기화	브라우저, 플러그인, CDN 캐시 삭제
5단계	Cloudflare SSL 모드	Flexible에서 Full (strict) 모드로 전환

자주 묻는 질문

Q. SSL 적용 후 CSS가 완전히 깨져서 글씨만 나오는데 글이 삭제된 건가요?

A. 아닙니다. 글과 데이터베이스는 안전하게 보존되어 있으며, 스타일을 불러오는 CSS 파일의 경로가 보안 정책(Mixed Content)에 의해 블록되었을 뿐입니다. 주소 설정과 캐시를 정돈하면 즉시 원상 복구됩니다.

Q. SSL 무료 인증서는 주기적으로 직접 갱신해야 하나요?

A. Let’s Encrypt 등 대부분의 호스팅업체 제공 무료 SSL은 자동 갱신됩니다. 다만 갱신 시점에 서버 오류가 발생하면 일시적으로 경고가 뜰 수 있으니 호스팅 관리 화면을 점검해 보는 것이 좋습니다.

마치며 : 변경 전 백업은 선택이 아닌 필수입니다

SSL 적용 후 발생하는 사이트 깨짐 문제는 원인만 정확히 파악하면 10분 내로 쉽게 해결할 수 있습니다.

주소 설정 점검을 시작으로 혼합 콘텐츠 치환, .htaccess 설정, 캐시 삭제 순서로 차근차근 점검해 보세요. 단, .htaccess나 wp-config.php 같은 핵심 시스템 파일을 수정할 때는 만약의 상황에 대비해 원본 파일을 따로 저장해 두고 진행하는 습관이 중요합니다.

댓글 남기기 응답 취소