jsDelivr SSL 인증서 오류로 사이트 접속이 안 될 때: 워드프레스에서 임시 우회하는 가장 빠른 해결 방법
최근 jsDelivr CDN의 SSL 인증서 문제로 인해 cdn.jsdelivr.net을 사용하는 일부 웹사이트에서 CSS와 JavaScript 파일을 정상적으로 불러오지 못하는 사례가 발생했습니다. 특히 부트스트랩(Bootstrap) 기반 워드프레스 테마나 플러그인을 사용하는 사이트에서는 화면이 깨지거나 접속이 정상적으로 이루어지지 않는 증상이 나타날 수 있습니다.
이 글에서는 문제의 원인과 함께 워드프레스에서 즉시 적용할 수 있는 임시 해결 방법, 그리고 복구 이후 반드시 확인해야 할 사항까지 정리합니다.
어떤 문제가 발생한 것인가?
이번 장애는 cdn.jsdelivr.net에서 제공되는 리소스를 HTTPS로 불러오는 과정에서 SSL 인증서 오류가 발생하면서 시작되었습니다.
브라우저가 인증서를 신뢰하지 못하면 CSS나 JavaScript 파일 다운로드가 차단되고, 그 결과 다음과 같은 증상이 나타날 수 있습니다.
- 사이트 디자인이 깨진다.
- Bootstrap 스타일이 적용되지 않는다.
- JavaScript 기능이 동작하지 않는다.
- 일부 환경에서는 페이지 자체가 정상적으로 표시되지 않는다.
이번 이슈는 사이트 자체의 문제라기보다 jsDelivr CDN의 인증서 문제에서 비롯된 장애입니다.
관련 진행 상황은 jsDelivr GitHub 이슈에서도 확인할 수 있습니다.
https://github.com/jsdelivr/jsdelivr/issues/18565
가장 빠른 임시 해결 방법
장애가 복구될 때까지는 cdn.jsdelivr.net 대신 다음 CDN 엔드포인트를 사용하면 정상적으로 리소스를 불러올 수 있습니다.
fastly.jsdelivr.netgcore.jsdelivr.net
두 주소 모두 jsDelivr 네트워크에서 제공하는 대체 엔드포인트이며, 문제가 발생한 기본 도메인 대신 사용할 수 있습니다.
워드프레스에서는 모든 출력 HTML에서 주소를 자동으로 변경하도록 처리하면 가장 간단하게 적용할 수 있습니다.
워드프레스 functions.php에 적용하기
테마의 functions.php 파일 맨 아래에 다음 코드를 추가합니다.
function fix_jsdelivr($buffer) {
return str_replace('//cdn.jsdelivr.', '//fastly.jsdelivr.', $buffer);
}
function fix_jsdelivr_start() {
ob_start('fix_jsdelivr');
}
function fix_jsdelivr_end() {
ob_end_flush();
}
add_action('init', 'fix_jsdelivr_start');
add_action('shutdown', 'fix_jsdelivr_end');위 코드는 워드프레스가 출력하는 HTML을 마지막 단계에서 검사한 뒤, cdn.jsdelivr.net 요청을 자동으로 fastly.jsdelivr.net으로 변경합니다.
별도로 테마나 플러그인 파일을 수정하지 않아도 되므로 빠르게 장애를 우회할 수 있다는 장점이 있습니다.
필요하다면 fastly.jsdelivr.net 대신 gcore.jsdelivr.net으로 변경해도 동일한 방식으로 사용할 수 있습니다.
플러그인으로 적용하는 방법
테마를 직접 수정하고 싶지 않다면 간단한 플러그인 형태로 적용하는 것도 가능합니다.
다음 위치에 파일을 생성합니다.
/wp-content/plugins/fixjsdelivr/fix.jsdelivr.php생성한 파일에 위 PHP 코드를 추가한 뒤 플러그인을 활성화하면 동일하게 적용됩니다.
이 방법은 테마를 업데이트하더라도 수정 내용이 사라지지 않는다는 장점이 있습니다.
왜 HTML을 직접 수정하지 않고 출력 버퍼를 사용할까?
이번 해결 방식은 워드프레스가 최종적으로 생성한 HTML을 한 번만 검사하여 CDN 주소를 바꾸는 방식입니다.
이 접근법의 장점은 다음과 같습니다.
- 테마 파일을 일일이 수정할 필요가 없다.
- 여러 플러그인에서 사용하는 jsDelivr 주소도 함께 변경된다.
- 문제가 해결되면 코드만 제거하면 원래 상태로 쉽게 복구할 수 있다.
반면, 출력 버퍼를 사용하는 만큼 사이트 구조에 따라 다른 문자열까지 의도치 않게 변경될 가능성이 있으므로, 적용 후에는 주요 페이지가 정상적으로 표시되는지 확인하는 것이 좋습니다.
문제가 해결되면 반드시 원래대로 되돌려야 하는 이유
이번 방법은 장애를 우회하기 위한 임시 조치입니다.
jsDelivr 측에서 SSL 인증서 문제가 정상적으로 복구되면 다음 작업을 권장합니다.
- 플러그인을 비활성화한다.
functions.php에 추가한 코드를 삭제한다.- 사이트가 다시
cdn.jsdelivr.net을 정상적으로 사용하는지 확인한다.
장기간 임시 우회 코드를 유지할 특별한 이유는 없으며, 공식 서비스가 정상화되면 원래 구성으로 복귀하는 것이 유지보수 측면에서도 바람직합니다.
적용 전 확인할 사항
이번 해결 방법은 다음과 같은 경우에 특히 유용합니다.
| 상황 | 적용 여부 |
|---|---|
| Bootstrap을 jsDelivr에서 불러오는 경우 | 권장 |
| 워드프레스 테마가 jsDelivr를 사용하는 경우 | 권장 |
| 플러그인이 jsDelivr를 사용하는 경우 | 권장 |
| 사이트가 자체 서버에서 CSS·JS를 제공하는 경우 | 필요 없음 |
또한 이번 방법은 SSL 인증서 문제를 우회하는 것이지, 사이트 내부 오류를 수정하는 것은 아닙니다. 따라서 장애 원인이 다른 경우에는 동일한 효과를 기대하기 어렵습니다.
마무리
외부 CDN은 성능과 관리 측면에서 많은 장점을 제공하지만, 간혹 이번 사례처럼 외부 인프라의 문제로 예상치 못한 서비스 장애가 발생할 수 있습니다.
다행히 이번 문제는 CDN 요청 도메인을 fastly.jsdelivr.net 또는 gcore.jsdelivr.net으로 변경하는 것만으로 대부분의 환경에서 빠르게 우회할 수 있습니다. 워드프레스에서는 출력 버퍼를 이용한 간단한 코드만 추가하면 별도의 대규모 수정 없이 즉시 적용할 수 있으며, 장애가 공식적으로 해결된 이후에는 반드시 원래 설정으로 되돌리는 것이 좋습니다.
앞으로도 외부 CDN을 사용하는 사이트라면 장애 발생 시 대체 엔드포인트를 활용할 수 있는 방법을 미리 알아두면 예기치 않은 서비스 중단에 보다 신속하게 대응할 수 있습니다.
