워드프레스 Tips
카카오맵 자바스크립트 충돌 문제 해결
[문제 설명] 카카오맵 자바스크립트가 로그인 하지 않는 디바이스에서는 실행이 되지 않아 지도가 나타나지 않음.
fantago-kr-604814.hostingersite.com
이 상황에서 카카오맵 문제를 해결하고 CSS 깨짐 문제까지 예방할 수 있는 가장 확실하고 근본적인 조치는 다음과 같습니다.
1. Divi 최적화 기능 비활성화 (보이는 옵션만)
LiteSpeed Cache와 Divi 최적화 기능의 충돌을 방지합니다. 스크린샷(image_68c23c.png)에서 확인된 Divi 성능 옵션 중 충돌 가능성이 높은 옵션을 OFF로 설정합니다.
-
Divi > 테마 옵션 > Performance 탭에서:
-
Critical CSS: OFF
-
Defer JQuery And JQuery Migrate: OFF (카카오맵 스크립트 실행에 문제 방지)
-
Defer Additional Third Party Scripts: OFF (카카오맵은 서드 파티 스크립트임)
-
2. LiteSpeed Cache의 JS 최적화 강제 OFF
스크롤 없이 보이는 화면에서 충돌을 일으키는 LiteSpeed Cache의 JS 최적화 기능을 아예 비활성화합니다.
-
LiteSpeed Cache > [2] JS Settings 탭에서:
-
JS Minify: OFF
-
JS Combine: OFF
-
Load JS Deferred: OFF (현재
Deferred로 설정되어 있는 것을 OFF로 변경. 이게 카카오맵이 안 보이는 가장 큰 원인입니다.)
-
3. 모든 캐시 강제 삭제 및 초기화
위 설정들을 저장한 후, 모든 캐시를 삭제합니다.
-
LiteSpeed Cache Purge All 실행.
-
Divi > 테마 옵션 > 빌더 > 고급에서 정적 CSS 파일 지우기 실행.
-
호스팅어 hPanel에서 서버 캐시 초기화.
📢 문제 지속 시: 플러그인 재설치 또는 호스팅사 문의
위의 1~3단계를 수행했는데도 카카오맵이 표시되지 않거나 CSS가 여전히 깨져 있다면, LSCache 플러그인 자체에 문제가 있는 것입니다.
1. LiteSpeed Cache 플러그인 재설치
가장 확실한 방법은 플러그인을 비활성화 > 삭제 > 재설치하는 것입니다. 재설치 후에는 설정 파일이 초기화되어 정상적인 인터페이스가 보일 가능성이 높습니다. (다만, 이전에 설정했던 모든 캐시 최적화 설정은 사라집니다.)
2. 호스팅어(Hostinger) 기술 지원 문의
LSCache는 호스팅어 환경에 최적화된 플러그인이므로, 설정 화면이 제대로 표시되지 않는 문제를 호스팅어 기술 지원팀에 문의하는 것이 가장 좋습니다.
-
문의 내용: “LiteSpeed Cache 플러그인의 ‘페이지 최적화’ 설정 페이지에서 JS/CSS 제외(Excludes) 필드가 표시되지 않습니다. 테마와의 충돌로 인해 필수 설정 필드가 누락된 것 같으니, 서버 환경에서 LSCache 설정을 강제로 초기화하거나 플러그인 파일 자체의 문제인지 확인해 주십시오.”
이 단계를 통해 LSCache 설정을 복구하고, 카카오맵 문제를 일으키는 Load JS Deferred 옵션을 확실하게 끌 수 있을 것입니다.

