Elementor vs Gutenberg – 2021년 대결: 어떤 페이지 빌더가 더 낫습니까?

WordPress가 페이지 빌더 없이 작동하던 때를 기억할 수 있습니까?

시간이 흐르고 기술이 발전하고 기능이 매우 제한적인 WordPress는 WordPress 테마의 기능, 특히 페이지 빌더와 같은 WordPress 플러그인 덕분에 이제 막연한 기억에 불과합니다 .

이 기사에서 우리는 OceanWP 사용자들 사이에서 가장 인기 있는 두 페이지 빌더인 Elementor와 Gutenberg를 다룰 것 입니다. 여기에서 제공할 정보는 개인적인 의견과 경험만을 기반으로 하는 것이 아니라 우리가 매일 받는 OceanWP 사용자의 피드백을 기반으로 합니다.

쇼다운이 시작됩니다!

엘리멘터란?

평균 5건 중 4.7건의 활성 설치 및 5백만 건 이상의 활성 설치로 의심의 여지가 없습니다. Elementor는 WordPress 사용자 사이에서 가장 인기 있는 페이지 빌더 입니다.

Elementor는 2016년에 처음 도입되었으며 매우 빠르게 선두를 차지했습니다. 거의 즉각적인 인기 를 얻은 이유는 Elementor의 시각적 끌어서 놓기 빌더 와 일반적인 WordPress 텍스트 편집기(구텐베르그 이전 시대)의 차이였습니다.

WordPress 사용자는 모든 종류의 사용자 정의 코딩 또는 사용자 정의 HTML/PHP/CSS 템플릿 생성의 필요성을 줄여주는 다양한 위젯 덕분에 마침내 Microsoft Word와 닮지 않은 것을 얻었습니다.

그리고 새로운 Elementor WordPress 웹 사이트 템플릿을 찾고 있습니까? 최신 HubSpot 컬렉션을 확인하십시오.

이 Elementor 대 Gutenberg 비교에서는 Elementor 무료 버전의 기능만 다룰 것입니다.

구텐베르크란?

블록 편집기 라고도 하는 Gutenberg는 기본 WordPress 페이지/포스트 편집기입니다. 2018년 WordPress Bebo 5.0 버전으로 처음 도입되었습니다 .

워드프레스 팀은 보다 발전되고 직관적인 기본 편집기에 대한 커뮤니티의 요구와 웹사이트 구축 트렌드를 이해 했습니다. 이것이 구텐베르크 편집기가 탄생하고 이전 버전인 클래식 편집기를 대체한 방법입니다.

Gutenberg가 아직 완전히 개발되지 않았고 앞으로 몇 년 안에 그 정점이 예상되지만 WordPress 팀은 약속한 것을 제공했습니다. 즉, 콘텐츠 편집기에서 페이지 빌더로 전환한 단순하지만 강력한 시각적 편집기 입니다.

그리고 Gutenberg WordPress 웹사이트 템플릿을 찾고 있다면 Gutenberg를 사용하는 최신 WooCommerce 템플릿 컬렉션을 확인하십시오.

Elementor 대 Gutenberg: 비교

Elementor 대 Gutenberg: 사용 용이성

두 도구를 모두 사용해 본 모든 WordPress 사용자는 우리가 동의할 수 있는 내용을 알려줄 것입니다. Elementor는 사용 편의성 비교에서 이겼습니다 .

엄청난 유연성과 이동성 덕분에 Elementor는 고급 이미지 편집 도구와 정말 비슷합니다. 필요한 위젯을 선택하고 콘텐츠의 아무 곳에나 배치하기만 하면 됩니다.

섹션을 생성해야 합니까? 또는 열 수가 다른 섹션입니까? 다른 장치에 대해 다른 디자인이나 이미지를 선택하시겠습니까? 또한 문제가되지 않습니다. Elementor를 사용하면 완벽할 때까지 전체 콘텐츠를 설정할 수 있습니다. 다양한 애니메이션 웹사이트 디자이너들이 좋아하는 것은 말할 것도 없고(속도 측정 도구는 그렇지 않지만).

반면에 Gutenberg는 깨끗하고 단순한 페이지 빌더 입니다. Elementor와 달리 Gutenberg는 인기 있는 끌어서 놓기 기능을 제공하지 않습니다(적어도 아직까지는 아님). 블록을 쉽게 추가하고 이동할 수 있지만 Elementor처럼 간단하지 않습니다. 게다가 Elementor가 제공하는 고급스러운 환경에 익숙한 사람들에게는 블록 스타일링이 다소 어려울 수 있습니다.

Gutenberg는 3년 동안 기본 WordPress 편집기로 사용되었지만 여전히 사용하기를 꺼리는 사람들이 있습니다 . 이러한 사용자 는 페이지 빌더를 선호하지 않습니다 . 다른 무엇보다 클래식(컨텐츠) WordPress 편집기를 선호합니다.

우리는 모두 습관의 피조물이기 때문에 구텐베르그를 직관적이지 않고 사용하기 어렵다고 표시하는 것은 단순히 클래식 편집기가 사용하기 더 쉽기 때문에 객관적이지 않다는 것을 알게 되었습니다. 하지만 한 가지 말씀드릴 수 있는 것은 Gutenberg로 게시물을 하나 만들고 초기 학습 곡선을 극복하면 계속 사용하게 된다는 것 입니다.

엘리멘터 vs 구텐베르그, 어느 쪽을 택할 것인가? 우리는 둘 다 사용하기 때문에 대답은 항상 OceanWP입니다.

PS Gutenberg의 블록 중 하나는 Classic 블록이므로 구식 기능을 사용하기 위해 추가 플러그인을 사용할 이유가 없습니다.

Elementor 대 Gutenberg 사용 용이성 요약

Elementor는 고급 위젯과 편집 도구 를 제공하여 Gutenberg보다 사용하기가 더 쉽지만 웹사이트 페이지를 반응형으로 만들어야 할 필요성이 대두되면 그만큼 어려워질 수 있습니다 .

구텐베르크에는 쉽게 극복할 수 있는 자체 학습 곡선 이 있습니다. Gutenberg의 작동 방식을 이해하면 Elementor를 비롯한 다른 모든 페이지 빌더를 관리하는 데 도움이 됩니다 .

Elementor 대 Gutenberg: 기능

Elementor에는 위젯이 있고 Gutenberg에는 블록이 있습니다. 간단합니다.

그러나 위젯이라는 용어 는 결합된 요소를 사용하는 기능을 언급할 때 WordPress에서 오랫동안 사용되었습니다. 예를 들어 제목이 있는 이미지, 다양한 쿼리 옵션이 있는 블로그 게시물 목록 등이 있습니다.

Elementor 위젯은 그룹화된 옵션과 여러 쿼리 및 스타일 설정이 있는 기능을 제공하여 유사한 방식으로 작동합니다 . 당연히 Elementor 위젯은 WordPress 위젯(모양 > 위젯)보다 훨씬 더 많은 옵션과 다양성을 제공합니다 .

Gutenberg는 단락 블록, 이미지, 비디오 등과 같은 매우 기본적인 블록으로 시작했습니다 . 블록도 스타일 옵션을 제공하지만 이러한 기능은 Elementor만큼 풍부하지도 직관적이지도 않습니다. 그러나 공정하게 말하면 사용자 친화적인 설정과 관련하여 Elementor는 Gutenberg뿐만 아니라 사용 가능한 거의 모든 페이지 빌더와 비교할 때 확실히 앞장서고 있습니다.

반면에 "지나치게 단순한 문제" 블록은 더 많은 기능과 사용자 옵션이 있는 고기능 블록을 제공하는 추가 Gutenberg 플러그인 중 일부를 사용하여 쉽게 해결할 수 있습니다.

말하자면, 최신 제품인 Ocean Gutenberg Blocks를 탐색할 기회가 있었습니까? 고객인 경우 이 플러그인을 이미 대시보드에서 다운로드하여 사용할 수 있습니다. 프로로 가는 것을 고려한다면 최신 제안을 확인하십시오.

Elementor 대 Gutenberg 기능 요약

Elementor는 위젯을 사용하고 Gutenberg는 블록을 사용합니다. Elementor의 무료 버전에는 모든 웹사이트 디자이너가 환상적인 웹사이트를 구축하는 데 사용할 수 있는 많은 고급 위젯이 포함되어 있습니다. 고급 블록을 사용하려면 Ocean Gutenberg 블록과 같은 추가 플러그인이 Gutenberg에 필요합니다 .

Elementor 대 Gutenberg: 성능

"페이지 속도" 대신 "성능"이라는 용어를 의도적으로 사용 했음을 알 수 있습니다.

그 이유는 간단하고 간단합니다. 대부분의 온라인 도구는 웹사이트의 속도를 반영하지 않는 웹사이트 점수를 측정합니다 . 그 외에도 웹 사이트 속도가 의존하는 요인이 너무 많습니다 . 슬프게도 웹사이트 성능의 성공은 실행 중인 테마나 플러그인에만 의존하지 않습니다.

말할 것도 없이, 웹사이트 소유자는 일반적으로 이러한 도구가 전체 웹사이트의 상태를 반영하지 않고 테스트된 URL에 할당된 페이지만 반영한다는 사실을 잊어버립니다. 요컨대, 홈페이지와 마찬가지로 모든 웹사이트 페이지를 동등하게 관리하십시오 .

그러나 테마 및 플러그인의 품질은 전체 웹사이트 성능에 상당한 영향을 미칠 수 있습니다 . 페이지 빌더도 마찬가지입니다.

WordPress 설정 비교

시작하기 전에 WordPress 템플릿을 구축하는 방법에 대해 약간의 소개를 하고 싶습니다. 이런 식으로 Elementor 대 Gutenberg 비교의 결과를 완전히 이해할 수 있습니다.

WordPress 템플릿은 샘플 웹사이트 콘텐츠 (페이지, 블로그 게시물, 사전 제작 및 스타일 지정)입니다. 이러한 템플릿은 구축 프로세스의 속도를 높이거나 영감을 주는 역할을 합니다. Ocean Website 템플릿의 경우 Elementor 페이지 빌더를 사용하면 메인 페이지(홈, 연락처, about 등)에서만 사용됩니다.

블로그 게시물, 상점, 제품 페이지, 아카이브 페이지와 같은 다른 모든 페이지는 OceanWP 테마에서 관리하는 기본 WordPress 페이지입니다.

이 작은 실험을 위해 Agenda와 Gutenberg Agenda라는 두 개의 WordPress 웹사이트 템플릿 을 사용했습니다.

언뜻 보기에 이미지만 봐도 이 둘의 차이점을 알 수 있고 어느 것이 Elementor를 사용하여 구축되었고 어떤 것이 Gutenberg를 사용하여 구축되었는지 짐작할 수 있습니까?

두 웹 사이트는 동일한 서버에 있으며 구성이 완전히 동일합니다.

• 소프트웨어: Apache/2.4.51(유닉스)
• MySQL: (우분투) v5.7.36
• PHP: 7.4.24
• 워드프레스: 5.8.1
• 워드프레스(PHP) 메모리 제한: 256M
• WordPress 테마: OceanWP (깜박임 깜박임)

두 웹사이트 모두 워드프레스 플러그인의 대부분을 공유합니다 .

• 오션 엑스트라
• 해양 제품 나눔
• 해양 사회 나눔
• 우커머스
• TI WooCommerce 위시리스트
• WPforms 라이트
• 바다 스티커 헤더
• WP Rocket(WordPress 템플릿 생성에 사용되지 않음).

의제 WordPress 템플릿:

• 엘리멘터
• 오션 엘리멘터 위젯

구텐베르크 의제 WordPress 템플릿:

• 오션 구텐베르크 블록

보시다시피 Gutenberg 버전은 실행하기 위해 추가 플러그인이 필요하지 않습니다 . 기본 WordPress 블록 편집기인 Gutenberg 만 있으면 됩니다.

Elementor 대 Gutenberg: Google Page Speed ​​Insights

텍스트의 일부를 건너뛰고 바로 여기까지 온 모든 사람들에게 Google Page Speed ​​Insights는 웹사이트 속도를 측정하지 않는다는 점을 강조하는 것이 중요합니다. 대신 다양한 요인을 고려하여 웹사이트에 점수를 매깁니다.

또한 점수가 거짓 긍정(낮은 점수이지만 빠른 웹사이트 및 그 반대)일 수 있을 뿐만 아니라 실제 그림을 그리지 못하는 경우가 많다는 점을 인정하는 것도 중요합니다. 모바일 PSI(Page Speed ​​Insights) 점수와 관련하여 Google은 휴대전화를 사용하여 웹사이트를 탐색하는 실제 사용자로부터 정보를 수집합니다 .

이것은 실제 상황이 즉시가 아니라 시간이 지나면서 가시화될 것임을 의미합니다. 이것은 또한 워드프레스를 설치하거나 페이지를 구축하는 순간 점수를 확인하지 말고 점수에 대해 작업하지 말라고 미묘하게 제안하고 있음을 의미합니다. 정보가 정확하지 않습니다.

웹사이트 성능 및 데이터 처리에 대한 데이터 수집이 작동하는 방식을 완전히 이해하려면 Google 직원의 이 답변을 확인하는 것이 좋습니다. 소스에서 직접 답변을 얻는 것보다 더 좋은 것은 없습니다.

그럼에도 불구하고 우리는 점수가 사용자에게 중요하다는 것을 이해합니다. 이것이 바로 우리가 결과를 여러분과 공유하는 이유입니다.

모바일 PSI 점수와 관련 하여 Elementor vs Gutenberg 경주 에서 승자는 Gutenberg 입니다.

모든 데이터 간의 차이는 매우 분명하며 Gutenberg에 유리합니다.

우리를 가장 놀라게 한 결과는 TBT( 총 차단 시간 ) 차이입니다. Elementor 빌드 페이지의 경우 TBT는 310ms인 반면 Gutenberg 빌드 페이지의 TBT는 50ms에 불과 했습니다.

기본 설정을 실행하는 대신 WP Rocket을 업로드하고 올바르게 설정하기 전에 실제로 웹 사이트에서 이미지를 최적화했다면 결과가 어땠을지 상상할 수 있습니까? 우리처럼 되지 마십시오 . 이미지를 최적화하고 웹사이트에 대한 최적의 캐싱 설정을 찾으십시오 .

데스크탑 Elementor 대 Gutenberg 비교 에서 결과가 Gutenberg에 약간 유리하지만 차이는 그렇게 극적이지 않습니다 . 적어도 PSI에 따르면 아닙니다.

이것이 우리가 사용자에게 자주 권장하는 또 다른 도구인 GTmetrix로 이동하는 이유입니다.

Elementor 대 Gutenberg: GTmetrix 비교

GTmetrix는 Agenda WordPress 템플릿인 Elementor와 Gutenberg의 두 버전 모두에 만족하는 것 같습니다.

그러나 인터랙티브 시간과 DOM 인터랙티브 시간 사이의 엄청난 차이를 무시할 수 없습니다. 두 메트릭 모두 구텐베르크에 유리합니다.

상호 작용 시간 : Elementor 대 Gutenberg : 912ms 대 408ms .

DOM 상호 작용 시간: Elementor 대 Gutenberg : 714ms 대 405ms .

Elementor 대 Gutenberg Structure 비교와 관련하여 GTmetrix는 다시 녹색 스윕을 보여줍니다.

그러나 즉시 우리의 관심을 끈 것이 하나 있습니다. 바로 DOM 크기 입니다. 다시 말하지만, 결과는 구텐베르그에게 유리합니다.

과도한 DOM 크기를 피하십시오 : Elementor 대 Gutenberg : 1251개 요소 대 929개 요소 .

Gutenberg의 팬이든 아니든, 거의 동일한 콘텐츠가 포함된 페이지에 대해 300개 이상의 요소가 적으면 큰 승리라는 사실을 인정해야 합니다. 말할 것도 없이, 그것은 또한 아웃 오브 박스(out-of-box) 승리입니다.

대체로 그래프가 말해줍니다. 성능 및 구조 점수는 정확히 동일하지만 두 웹 사이트 모두 GTmetrix 등급 A, 성능 점수 100% 및 구조 점수 98%를 획득했습니다. 구텐베르그를 지지하는 많은 통계 가 있습니다. 거대한 최적화 및 성능 팬.

GTmetrix로 판단하면 상황이 깨끗하지 않습니다. Elementor와 Gutenberg 의 나란히 성능 비교에 관해서는 Gutenberg가 절대적인 승자 입니다.

하지만, 잠시만요. 이것은 Elementor가 나쁘고 사용해서는 안 된다는 것을 의미합니까? 아니요. Elementor로도 자랑할 수 있는 만족스러운 점수를 얻을 수 있기 때문입니다.

결과는 Gutenberg가 즉각적이고 번거롭지 않으며 전위적인 성능 승리 를 제공하는 반면 Elementor의 경우 정통하고 책임감 있는 웹 디자이너가 되어야 함을 보여줍니다.

Elementor 대 Gutenberg 성능 요약

우리 웹사이트 템플릿 중 어느 것도 속도/점수에 최적화되어 있지 않으며 둘 다 기본 WP Rocket 캐싱 설정을 사용합니다. Gutenberg는 더 많은 기본 성능을 제공하며 Elementor, 특히 Total Blocking Time, DOM 크기, Time to Interactive 및 DOM Interactive Time 메트릭에 비해 일부 메트릭 차이가 상당히 큽니다 .

최고의 웹 사이트 구축 사례를 따르고 적절한 도구를 사용하는 고급 최적화 기술을 갖춘 숙련된 웹 사이트 디자이너는 Elementor를 사용하여 최고의 속도나 점수를 얻는 데 문제가 없습니다.

Gutenberg 기반 웹 사이트는 다양한 추가 Elementor 플러그인과 함께 Elementor 웹 사이트와 비교하여 원활하게 실행하기 위해 주로 WordPress 메모리 제한과 같은 리소스가 덜 필요합니다 .

Elementor 대 Gutenberg: 이점

Elementor 대 Gutenberg 혜택 비교와 관련하여 결정하기 어렵습니다.

각 페이지 빌더에는 고유한 장점과 사용해야 하는 이유가 있습니다 . 마찬가지로 각 페이지 빌더에는 단점이 있습니다. 장단점 모두 주관적인 성격을 가질 수 있습니다 .

물론 드래그 앤 드롭 기능 때문에 우리 모두 Elementor를 좋아하지만 Gutenberg를 사용하는 것도 그렇게 어렵지 않습니다 .

Elementor의 응답성 설정 과 장치를 기반으로 섹션 또는 요소를 숨기거나 장치를 기반으로 요소의 스타일을 완전히 지정할 수 있는 것은 이 제품 을 좋아하는 또 다른 이유 중 하나입니다 . 이제 초보자가 웹 사이트 구축에 다양한 블로그에서 읽었던 것보다 더 많은 노력이 필요하다는 사실을 깨닫고 처음 시작할 때 낙담하고 압도당하는 것과 동일한 기능입니다.

사용자 친화적인 사용법과 창의성 발휘 측면에서 우리는 Elementor에 투표합니다 .

그러나 사용자가 Elementor의 대안에 대해 질문할 때 변경이 필요한 주요 이유로 안정성을 언급합니다 . 분명히, 실수와 버그는 Facebook과 같은 회사에서도 발생합니다. 그리고 어떤 설정 웹사이트 소유자와 개발자가 실행 중이든 상관없이 책임을 지고 모범 사례를 따르는 것이 불편을 피하는 데 필수적 입니다. 예, 우리는 준비 영역에서 백업을 수행하거나 새로운 업데이트를 테스트하는 것에 대해 이야기하고 있습니다.

실제로, 이러한 관행을 따르는 숙련된 사용자조차도 일정 기간 동안 이 도구를 [적절하게] 사용할 가능성이 없는 Elementor의 혁신과 변경으로 인해 약간의 원한을 품습니다.

구텐베르크의 경우 개발자로서 성능(프론트엔드 및 백엔드 모두), 접근성 및 안정성을 응원 합니다. 일부 Gutenberg 플러그인은 다른 비 Gutenberg 페이지 편집기만큼 HTML에 부풀림을 추가할 수 있으므로 현명하게 선택하십시오.

Gutenberg 가 Elementor만큼 초심자 친화적이지 않은 것처럼 보이지만, 우리는 초심자에게 확실히 시도해 볼 것을 권장합니다 . 그리고 우리의 권장 사항은 보다 전문적이거나 경험이 풍부한 접근 방식(예: 반응 모드에서 편집 및 다양한 장치에 대한 콘텐츠 조정)이 필요한 일부 고급 기능이 없다는 것을 기반으로 합니다 .

Gutenberg를 다루는 방법을 배우고 다루는 사람들은 Elementor를 포함한 다른 모든 페이지 빌더도 빠르게 이해할 수 있을 것이라고 말하는 것이 안전합니다.

Elementor 대 Gutenberg 혜택 요약

Elementor의 응답성 옵션 및 설정을 사용하면 누구나 필요한 경우 다르게 모든 장치에 대해 웹사이트 디자인을 조정할 수 있습니다 . 그러나 WordPress 초보자가 웹 사이트 구축에 읽은 것보다 약간 더 많은 시간, 노력 및 연습이 필요하다는 것을 알게되면 WordPress 초보자를 조롱 할 수있는 동일한 설정 이기도합니다.

Gutenberg는 처음에는 위협적이고 완전히 직관적이지 않은 것처럼 보일 수 있지만 실제로는 놀라운 학습 출발점입니다. 구텐베르그를 극복하면 모든 사람들이 모든 페이지 빌더를 더 잘 이해하는 데 도움이 될 것 입니다. 또한 Gutenberg는 안정성, 접근성, SEO 및 전반적인 성능 향상을 제공 합니다.

Elementor vs Gutenberg: 어떤 페이지 빌더가 더 낫습니까?

당신은 그들이 말하는 것을 알고 있습니다. 하나의 신발이 모든 발에 맞는 것은 아니지만 먼저 신발을 신어보지 않으면 알 수 없습니다.

어떤 사용자는 Elementor를, 어떤 사용자는 Gutenberg를 좋아 하며 그 뒤에는 다양한 이유가 있습니다. 우리는 귀하의 웹사이트에 대해 이야기하고 있으므로 귀하와 귀하의 웹사이트 요구 사항에 맞는 것이 무엇인지 찾는 것이 중요합니다 .

사용자가 웹사이트의 안정성, 성능, SEO, 접근성 및 웹사이트 구축에 중요한 많은 요소를 손상시키지 않고 Elementor를 사용하는 방법에 대한 조언을 구할 때 WordPress 웹사이트 템플릿을 구축하는 데 사용하는 것과 같은 방식으로 Elementor를 사용하는 것이 좋습니다. . 매력적이고 매력적이어야 하는 메인 페이지에서 Elementor를 사용하세요. 나머지는 WordPress와 테마에 맡기세요.

요컨대, 특히 정통한 디자이너가 아니거나 전반적인 웹 사이트 최적화에 대한 경험이 거의 없는 경우 사용자 지정 아카이브 템플릿을 만들지 마십시오.

초보자이고 추가 편집 및 스타일링에 대해 덜 걱정 하고 싶거나 웹사이트 디자인에 조금 더 노력하는 데 신경 쓰지 않는 전문가라면(여기서는 드래그 앤 -drop 기능) 다양한 애니메이션 옵션이 없는 것에 대해 이의를 제기하지 않으면 Gutenberg를 선택 해야 합니다. 특히 모든 성능상의 이점과 Gutenberg를 사용하여 동일한 품질의 디자인을 만들 수 있다는 사실을 고려하십시오 .

절대 해서는 안 되는 한 가지, 그리고 그러한 디자인을 본 적이 있는 한 가지는 Elementor로 사용자 정의 템플릿을 만든 다음 Gutenberg를 함께 사용하여 콘텐츠를 추가하는 것입니다. 당신의 삶을 필요 이상으로 어렵게 만들지 말고 당신의 웹사이트를 죽이지 마십시오

선택한 페이지 빌더가 Elementor이든 Gutenberg이든 상관없이 우리는 원하는 웹사이트 디자인을 달성하기 위해 위젯과 블록을 모두 제공하기 때문에 항상 OceanWP와 Ocean Core Extensions Bundle이 답입니다.

당신의 판결은 무엇입니까? 가장 좋아하는 페이지 빌더는 무엇이며 그 이유는 무엇입니까? 예, 둘 다 선택하여 사용할 수 있습니다.

웹 사이트 구축에서 휴식을 취한 후 의견을 남기고 의견을 알려주세요.