엘리멘터 (Elementor) 편집 화면에서 패널 무한 로딩 문제 해결

엘리멘터(Elementor) 페이지 빌더로 제작된 워드프레스 사이트에서 플러그인들을 업데이트한 후에 엘리멘터 편집기로 페이지 편집을 시도하면 왼쪽 패널이 무한 로딩하면서 편집할 수 없는 문제 해결을 맡았습니다. 워드프레스에서 엘리멘터나 무거운 테마 또는 플러그인을 사용할 때 이런 현상이 종종 발생합니다.

 엘리멘터 패널 무한 로딩 문제가 발생하는 경우 체크해야 할 사항에 대하여 살펴보겠습니다.

엘리멘터(Elementor) 빌더 편집 화면에서 위젯 패널 무한 로딩 문제 해결

페이지를 작성하거나 편집하기 위해 엘리멘터를 실행하면 그림과 같이 왼쪽 위젯 패널이 무한 로딩되면서 편집 페이지에 진입하지 못하는 문제가 발생할 수 있습니다.

다양한 원인으로 이 문제가 발생하지만, 경험상 대부분의 문제는 두 가지 이유 중 하나로 발생하는 것 같습니다.

서버 리소스 부족

엘리멘터는 많은 메모리를 필요로 합니다. 이런 상황에서 엘리멘터 관련 애드온 플러그인을 추가적으로 설치하면 공유 호스팅에서는 메모리 부족으로 인해 페이지 빌더가 제대로 로드되지 않는 문제가 발생할 수 있습니다.

실제로 카페24 등 공유호스팅에서 리소스 부족으로 인해 500 내부 서버 오류가 발생하거나 페이지 빌더가 로드되지 않는 현상이 발생하는 것을 종종 목격합니다.

엘리멘터로 사이트 제작 시 애드온 플러그인 사용 문제

엘리멘터를 사용하는 경우 엘리멘터용 Essential Addons 등과 같은 애드온 플러그인을 가급적 사용하지 않는 것이 바람직합니다. 애드온 플러그인을 함께 사용하면 메모리 부족으로 인해 500 에러가 간헐적으로 발생하거나 엘리멘터로 페이지 제작이나 편집을 시도할 때 위젯 패널이 무한 로딩되는 등 다양한 문제가 발생할 수 있습니다.

카페 24에서 메모리 부족으로 인해 이 문제가 발생하면 PHP Memory Limit의 크기를 증가시킬 수 있지만, 이 값을 높여도 문제가 해결되지 않는 경우도 있습니다. 그런 경우 클라우드웨이즈(Cloudways)와 같은 호스팅을 이용하면 문제가 사라질 수 있습니다. 

문제의 사이트의 경우 사이트그라운드(SiteGround)라는 해외 호스팅을 이용하고 있었습니다. 사이트그라운드는 한 때 우리나라에서도 인기를 얻었지만, 사이트그라운드가 우리나라를 비롯한 일부 아시아 국가에서 신규 가입을 받지 않고 있습니다.

사이트그라운드 서비스 가입 불가능 - 한국 등 일부 국가 서비스 중단 (SiteGround)

사이트그라운드는 Memory Limit 값이 768MB로 고정되어 있고 이 값에서는 대부분의 상황에서 메모리 부족 문제가 발생하지 않을 가능성이 높습니다.

또한, max_input_vars 값이 낮을 경우에도 이 문제가 나타날 수 있다고 합니다. max_input_vars 값을 체크해보니 3000으로 충분한 상태였습니다.

플러그인 충돌 문제

서버 리소스가 충분한 상태에서도 위와 같은 오류가 발생하면 플러그인 충돌을 의심해볼 수 있습니다.

엘리멘터를 제외한 모든 플러그인을 비활성화한 후에 문제가 발생하지 않는지 체크해보시기 바랍니다. 문제가 발생하지 않으면 플러그인 충돌로 인한 문제임을 추정할 수 있습니다. 플러그인을 하나씩 활성화하면서 문제를 일으키는 플러그인을 찾도록 합니다.

해당 사이트의 경우 Image Optimization service by Optimole이라는 이미지 최적화 플러그인이 엘리멘터와 충돌하면서 발생하는 문제였습니다.

참고로 위의 그림과 같이 Elementor와 함께 Essential Addons for Elementor 등의 엘리멘터용 애드온을 설치할 경우, 서버가 좋지 않으면 사이트가 제대로 작동하지 않을 수 있습니다. 공유호스팅에서는 가급적 무거운 플러그인을 자제하는 것이 바람직합니다.

Optimole 플러그인은 워드프레스 웹사이트의 이미지를 자동으로 압축, 리사이즈, 포맷 변환(WebP, AVIF)해주고, 450개 이상의 글로벌 AWS CloudFront CDN 노드를 통해 최적화된 이미지를 빠르게 전송하는 올인원 이미지 최적화 솔루션입니다. 설치 후 별도의 복잡한 설정 없이도 모든 이미지를 인공지능 기반의 압축과 스마트 크기 조절로 실시간 최적화하며, lazy loading 기능과 placeholder 제공, 고해상도(Retina) 디스플레이 대응 등 사용자 경험과 코어 웹 바이탈(Core Web Vitals)까지 개선할 수 있다고 소개하고 있습니다. 또한, 워터마크 적용, 이미지 오프로드(클라우드 저장), 다양한 미디어 파일 관리, 우커머스 및 주요 페이지 빌더 호환 등 강력한 확장성을 제공해, 웹사이트 속도·SEO·서버 자원 효율을 동시에 높이고 싶은 사이트에 적합한 무료 및 유료 플러그인입니다.

플러그인 소개 페이지에서는 Elementor와 원활하게 통합된다고 설명하고 있지만, (2025년 10월 27일 기준) 최신 버전에서는 엘리멘터와 충돌을 일으킬 수 있습니다.

이런 플러그인을 사용하는 것보다 이미지를 업로드하기 전에 압축하여 용량을 최소화하는 것이 좋습니다. 저는 주로 챗GPT를 이용하여 이미지를 생성한 후에, wepb로 변환한 다음 온라인 이미지 압축 사이트에서 이미지를 압축합니다. 그러면 이미지 크기가 보통 50KB 이하로 줄어듭니다.😄

챗GPT 생성 이미지, 화질 유지하며 용량 줄이는 방법 - 워드프레스 정보꾸러미

만약 충돌하는 플러그인이 필수 플러그인인 경우에는 다음과 같은 조치를 고려할 수 있습니다.

1. 플러그인 개발자에게 연락하여 버그를 보고해 해결을 시도합니다.
2. 클라우드웨이즈, AWS 등과 같은 서버에서 테스트해보면 문제가 발생하지 않을 수도 있습니다. (서버 리소스 문제)

사이트 속도와 플러그인 충돌 방지를 위해 설치하는 플러그인의 개수를 최소화하는 것이 바람직합니다. 너무 많은 플러그인을 설치하면 사이트 속도가 느려지고 플러그인 간 충돌이 발생할 가능성이 높아집니다. 기능을 위해 무거운 플러그인들을 여러 개 설치해야 하는 경우, 공유호스팅에서는 메모리 부족 등의 문제로 에러가 발생해도 서버 사양이 좋으면 돌아가기도 합니다. (서버 사양이 좋아도 가급적이면 플러그인 개수를 최소화할 것을 권장합니다.

📌클라우드웨이즈 가입 방법 (+ 45% 할인 쿠폰)

마치며

이상으로 엘리멘터 빌더로 페이지를 만들거나 편집하려고 시도할 때 왼쪽의 위젯 패널이 무한 로딩되면서 편집이 불가능할 때 대응 방법에 대하여 살펴보았습니다.

엘리멘터는 매우 편리하지만 사이트 속도에 영향을 줄 수 있습니다. 사이트 속도가 중요하다면 GeneratePress 테마 + GenerateBlocks 플러그인을 사용하면 속도에 대한 영향을 최소화하면서 복잡한 사이트를 제작하는 것이 가능합니다.

불닭닷컴 사이트... GenerateBlocks로 제작되었네요

 

👉 워드프레스나 웹호스팅 문제 해결에 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

참고

https://avada.tistory.com/3697

엘리멘터로 만든 워드프레스 사이트를 WPML으로 다국어 사이트 변환 작업

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)