엘리멘터 대 구텐베르크

누가 좋은 싸움을 좋아하지 않습니까? 우리는 웹사이트 구축과 관련하여 당신을 위한 아주 멋진 것을 발견했다고 생각합니다.

이 코너에는 "WordPress 페이지 빌더의 왕"이라고 자칭하는 Elementor가 있습니다. 그리고 다른 구석에는 WordPress와 함께 사전 설치된 새로운 편집기인 Gutenberg가 있습니다.

두 빌더 모두 장단점이 있으며 어느 것이 귀하에게 적합한지 파악하는 것은 혼란스러울 수 있습니다. 각각이 제공하는 것을 이해하는 데 도움이 되도록 Elementor와 Gutenberg를 자세히 비교하면 다음과 같습니다.

엘리멘터란?

Elementor는 WordPress용 무료 오픈 소스 드래그 앤 드롭 페이지 빌더 플러그인입니다. 코딩 경험에 관계없이 모든 사람이 웹 개발을 더 쉽게 만들 수 있다는 아이디어로 만들어졌습니다.

20년 넘게 웹사이트를 개발해온 Yoni Luksenberg가 만들었습니다. 웹 디자인 프로세스가 느리고 비효율적이라는 사실을 알게 된 그는 사람들이 코드를 작성할 필요 없이 아름다운 웹사이트를 구축하는 데 도움이 되는 무언가를 만들고 싶었습니다. Elementor는 2016년 5월에 출시되었으며 그 이후 빠르게 성장하여 역사상 가장 인기 있는 WordPress 플러그인 중 하나가 되었습니다.

Elementor를 사용하면 랜딩 페이지, 온라인 이력서/포트폴리오 사이트, 비즈니스 웹사이트 등 모든 유형의 웹사이트를 처음부터 또는 미리 만들어진 템플릿을 사용하여 구축할 수 있습니다. 원하는 결과를 얻기 위해 기존 테마를 사용자 정의할 수도 있습니다. 제한이 없습니다.

Elementor의 주요 기능

다음은 이 페이지 빌더의 주요 기능입니다.

• 드래그 앤 드롭 편집기
• 100개 이상의 위젯
• 테마 빌더
• 글로벌 편집
• 반응형 편집
• 놀랍고 재미있는 입장 및 퇴장 애니메이션 효과를 만들 수 있습니다.
• 90개 이상의 웹사이트 키트 보유
• 300개 이상의 이미 만들어진 템플릿 제공
• 디자인에 사용자 정의 CSS 코드를 추가할 수 있습니다.
• WooCommerce, 팝업, 양식 및 방문 페이지 빌더가 있습니다.
• 수많은 SEO 플러그인과 통합

엘리멘터를 사용해야 하는 이유

사용하기 쉬움: Elementor를 사용 하면 아름다운 웹사이트를 만들기 위해 코딩 지식을 배울 필요가 없습니다. 편집기는 끌어서 놓기 기반이며 쉽게 끌어서 놓을 수 있는 위젯을 사용하여 페이지를 시각적으로 디자인할 수 있습니다.

또한 템플릿을 선택할 수도 있습니다. 플러그인을 통해 사용할 수 있는 수백 개의 템플릿이 있습니다. 필요에 따라 템플릿을 사용자 정의하고 웹사이트에 대한 새 페이지나 게시물을 만드는 작업을 계속할 수 있습니다!

인상적인 사전 제작 디자인 및 템플릿: 요소에는 사전 제작된 디자인과 템플릿이 함께 제공되므로 시간을 절약할 수 있습니다. 이러한 디자인은 전환을 위해 잘 설계되고 최적화되었습니다. 즉, 사용자 행동을 염두에 두고 설계되었습니다!

이것들을 처음부터 디자인하려면 몇 시간이 걸리므로 이 기능만으로는 충분한 이유가 되지 않습니다. 그렇지 않으면 다른 어떤 것이 다른 사람을 설득할 수 있을지 모르겠습니다!

실시간 미리보기: Elementor에는 실시간 미리보기 기능이 있어 모든 것이 완료될 때까지 기다리지 않고 변경 사항이 발생하는 즉시 확인할 수 있습니다. 또한 문제가 발생하면 다시 시작하지 않고도 돌아갈 수 있습니다.

구텐베르크란?

이 글을 읽고 있다면 Gutenberg(일명 " WordPress의 새로운 콘텐츠 편집기 ")는 이미 당신의 삶의 일부입니다. 사용 여부에 관계없이 이미 WordPress의 큰 부분입니다.

블록 페이지 빌더는 2018년(WordPress 5.0) 릴리스 이후에 생성된 모든 WordPress 사이트 및 게시물의 기본 편집기입니다.

구텐베르크(Gutenberg)라는 이름은 1450년대 활자를 이용한 인쇄기를 발명하고 의사소통 방식을 바꾼 과학자 요하네스 구텐베르크(Johannes Gutenberg)의 이름을 따왔습니다.

Gutenberg를 MS Word 또는 Google Docs와 동등하지만 WordPress 사이트 전용으로 구축된 워드 프로세서로 생각하는 것이 가장 좋습니다. 2005년부터 사용되어 온 기존의 클래식 편집기를 대체합니다.

구텐베르크의 주요 기능

다음은 이 블록 편집기 의 주요 기능입니다.

• 블록을 사용하여 콘텐츠 및 페이지 작성
• 블록을 만드는 데 코딩이 필요하지 않습니다.
• 빠르고 신뢰할 수 있는 최신 기술로 설계
• 갤러리 사진 지원
• 편집기에서 크기 조정, 확대/축소 등을 수행할 수 있는 이미지 편집기가 있습니다.

왜 구텐베르크를 사용해야 합니까?

왜 구텐베르크를 사용해야 합니까? 글쎄, 그렇게 하는 것의 이점을 살펴보자.

• 재사용 가능한 블록 생성: 새로운 블록 편집기를 사용하면 여러 게시물과 페이지에서 사용할 수 있는 재사용 가능한 콘텐츠 블록을 쉽게 생성할 수 있습니다. 이 기능을 사용하면 시간을 절약하고 웹사이트에서 일관된 스타일을 유지할 수 있습니다. 클릭 유도문안 상자, 제품/가격표, 이미지 갤러리 등은 Gutenberg의 끌어서 놓기 인터페이스로 만들 수 있는 재사용 가능한 블록의 일부입니다.
• 고급 위젯 및 편집 도구: Gutenberg에는 열 또는 디자인의 다른 영역 내부에 배치할 수 있는 수많은 위젯이 함께 제공됩니다. 일부에는 단축 코드, 최신 게시물, 카테고리, 태그 클라우드 및 아카이브가 포함됩니다. 이러한 위젯을 사용하면 개발자가 아닌 사람들이 기술적 지식이나 코딩 기술 없이도 페이지 레이아웃 안에 추가 콘텐츠를 쉽게 배치할 수 있습니다.
• 모든 타사 플러그인 및 테마와 통합: Gutenberg는 이제 WordPress 코어의 일부이므로 타사가 플러그인 및 테마와의 호환성을 추가하는 것을 막는 것은 없습니다.

Gutenberg 대 Elementor: 공통점이 있습니까?

예, 두 빌더에는 몇 가지 공통점이 있습니다. 다음은 상위 3개입니다.

• 개별 편집: Elementor와 Gutenburg 모두 개별 블록(단락, 이미지 또는 기타)을 편집할 수 있습니다. 이 기능은 두 페이지 빌더가 이러한 요구 사항을 해결하기 위해 시간과 노력을 기울였음을 보여주기 때문에 중요합니다.
• 사용자 지정 레이아웃: Elementor와 Gutenburg를 사용하여 사용자 지정 레이아웃을 만들 수 있습니다. 즉, 왼쪽에 텍스트를, 오른쪽에 이미지를 원하면 쉽게 만들 수 있습니다!
• 타사 애드온과 호환: Elementor 또는 Guttenberg의 기능을 확장하려는 경우 온라인에서 사용할 수 있는 호환되는 애드온이 많이 있습니다. 예를 들어 Gutenburg를 사용하여 양식이나 갤러리에서 일부 사용자 정의 기능을 찾고 있다면 고급 양식을 사용해 보십시오. Elementor로 이미지가 어떻게 보이는지 더 자세히 제어하려면 Image Intense를 사용해 보십시오.

Elementor 대 Gutenburg: 차이점은 무엇입니까?

Elementor와 Gutenburg는 모두 사용자의 웹사이트 구축 경험을 단순화할 것을 약속하는 두 개의 WordPress 페이지 빌더입니다. 그들은 드래그 앤 드롭 방식의 블록 기반 편집기를 제공하여 기존 HTML 편집을 사용하는 것보다 사이트를 처음부터 더 쉽고 빠르고 직관적으로 디자인할 수 있도록 합니다.

그러나 Elementor와 Gutenburg에는 차이점이 있습니다. 다음은 각각이 제공하는 것을 비교한 것입니다.

비용

비용이 결정에 중요한 요소인 경우 Gutenberg가 이번 라운드에서 승리합니다. Elementor는 선택한 요금제에 따라 연간 $49~$999의 비용이 드는 프리미엄 플러그인입니다. 무료 버전은 매우 제한적이며 양식 필드, 갤러리 또는 플립 상자와 같이 사이트를 구축하는 동안 사용하려는 많은 요소가 포함되어 있지 않습니다.

Gutenberg는 WordPress 5.0 이상에서 무료로 제공됩니다. 이전 WordPress 사이트가 있고 지금(또는 향후) 5.0으로 업그레이드하기로 결정한 경우 Gutenberg가 추가 비용 없이 동행할 것입니다.

특징

명성에 대한 Elementor의 주장은 항상 확장된 기능이었습니다. 구텐베르크보다 웹사이트에서 더 많은 일을 할 수 있습니다.

비주얼 편집기부터 시작하겠습니다. Elementor는 사용하기 훨씬 쉽고 원하는 대로 사용자 지정할 수 있는 수많은 템플릿, 섹션 및 위젯과 함께 제공됩니다.

전자 상거래 페이지가 필요한 경우 Elementor에는 있지만 Gutenberg에는 아직 없습니다. Elementor 내부에서 자세한 열, 행, 머리글, 바닥글 및 사이드바를 만들 수도 있습니다.

사용자 친화적

Gutenberg는 사용하기가 매우 쉽고 사용자 인터페이스(UI)는 간단한 레이아웃 디자인을 가지고 있습니다.

Elementor를 사용할 때의 UI는 훨씬 더 쉽습니다. 그들은 몇 번의 마우스 클릭으로 웹사이트의 프론트 엔드에 페이지를 만들 수 있는 멋진 드래그 앤 드롭 인터페이스를 만들었습니다.

학습 곡선

페이지 빌더에 대한 경험이 있다면 구텐베르크를 배우기가 쉬울 것입니다. 그러나 완전한 초보자라면 익숙해지기 전에 몇 가지 비디오 자습서를 시청해야 할 수도 있습니다.

반면에 페이지 빌더와 웹 사이트에 대해 일반적으로 아무것도 모른다면 Elementor가 적합합니다. 설치하고 원하는 대로 사용자 지정할 수 있는 사전 제작된 템플릿이 많이 제공됩니다.

각 빌더에는 학습 곡선이 있지만 사용 방법을 배우면 그렇게 어렵지 않습니다.

성능

Elementor가 기능 및 사용자 정의 측면에서 최고의 페이지 빌더 중 하나라는 것은 의심의 여지가 없습니다. 그러나 모든 기능을 사용하여 사이트에 많은 코드가 로드될 것으로 예상할 수 있습니다. 따라서 전체 사이트 성능에 영향을 줄 수 있습니다.

Gutenberg 페이지 빌더는 WordPress 코어의 일부이므로 내부에 많은 블로트웨어가 포함된 Elementor에 비해 빠르게 로드됩니다. 페이지 로드 시간은 SEO 성능 및 사용자 경험(UX)과 관련하여 중요한 역할을 합니다. 따라서 초고속 속도를 찾고 검색 엔진에서 더 높은 순위를 얻으려면 Elementor 대신 Gutenberg 편집기를 사용하는 것이 좋습니다.

Gutenberg 페이지는 Google Page Speed ​​Insights 또는 GTMetrix와 같은 도구로 테스트할 때 Elementor보다 더 나은 성능을 보입니다.

백엔드 및 프론트엔드

WordPress 세계를 처음 접하는 경우 WordPress 웹 사이트에서 콘텐츠를 편집하는 방법이 두 가지 이상 있다는 것을 모를 수 있습니다. 편집기에는 백엔드 및 프론트엔드(또는 라이브) 편집기의 두 가지 유형이 있습니다. 당신이 사용하는 유형은 당신에게 달려 있으며 주로 당신의 선호도와 기술에 대한 편안함에 달려 있습니다.

Gutenberg는 백엔드 편집기입니다. 즉, 사용할 때 게시물이나 페이지가 게시된 후 웹사이트 독자가 보게 되는 것과 동일한 환경에서 직접 작업할 수 있습니다. 예를 들어 요소를 이동하거나 텍스트의 일부에 대해 다른 글꼴 크기를 테스트하려는 경우 페이지가 게시될 때까지 이러한 변경 사항 중 어느 것도 볼 수 없습니다.

하지만 플러스 측면에서, Gutenberg에서 게시물이나 페이지를 편집할 때 문제가 발생하면(발생) 해당 문제를 수정하는 것이 더 쉽습니다. 예. 모든 편집 작업은 쉽게 클릭할 수 있는 친숙한 환경에서 수행되었습니다.

Elementor는 프론트엔드 및 백엔드 편집기입니다. 게시물, 페이지 또는 초안에서 페이지 빌더를 사용할 때. 백엔드 또는 프론트엔드 모드에서 작업하는지 여부는 중요하지 않습니다. 사용 중인 모드에 관계없이 모든 종류의 변경 및 편집을 수행할 수 있습니다.

테마 호환성

선택한 플러그인이 테마와 호환되는지 확인하는 것이 중요합니다! 결국, 그렇지 않으면 사용할 수 없습니다.

Gutenberg는 기본 WordPress 편집기이며 모든 테마에서 작동합니다. 그러나 테마 설정, 스타일 또는 색상을 변경하지 않기 때문에 생성한 콘텐츠가 원하는 만큼 미세하게 조정되지 않을 수 있습니다. 따라서 구텐베르크의 한계를 뛰어넘고 싶다면 Elementor 호환 테마가 필요합니다.

Elementor는 모든 WordPress 테마와 완벽하게 작동하지만 Elementor용으로 특별히 제작된 프리미엄 테마와 함께 사용할 때 더 잘 작동합니다. 이러한 테마 중 하나를 선택하면(많은 테마가 있음) 모든 기본 설정이 동기화되므로 Elementor에서 생성된 웹사이트 요소와 테마 간에 충돌이 발생하지 않습니다.

편집의 자유

편집의 자유는 어떻습니까? Gutenberg에서 콘텐츠를 자유롭게 수정할 수 있지만 페이지 레이아웃이 제한됩니다. 편집기의 바닥글, 사이드바, 머리글 또는 전역 요소를 편집할 수 없습니다. Elementor를 사용하면 페이지의 모든 요소를 ​​완벽하게 제어할 수 있습니다.

Elementor는 특정 유형의 콘텐츠를 기반으로 사용자 지정 템플릿을 생성할 때도 더 유연합니다. 게시물 및 페이지에 대해 미리 정의된 템플릿을 제공하며 원하는 만큼 사용자 지정할 수 있습니다.

어느 것을 선택할 것인가?

블로그를 시작하기로 결정했습니다. 도메인 이름을 예약하고 호스팅 계획을 선택했으며 출시할 준비가 되었습니다. 이제 백엔드에서 원활하게 실행하면서 필요한 창의적인 옵션을 제공하는 플러그인을 선택할 차례입니다.

단순한 웹사이트를 만드는 도구를 찾고 있고 불필요한 요소로 인해 부풀려지는(따라서 속도가 느려지는) 것을 원하지 않는다면 Guttenberg는 Elementor보다 코드가 더 적습니다. 더 적은 팽창은 더 높은 검색 엔진 순위와 동일한 더 빠른 로딩 속도를 의미합니다.

높은 페이지 로드 속도를 유지하는 것은 검색 엔진에서 순위를 높이는 데 필수적이지만 매력적인 디자인을 사용하는 것도 마찬가지입니다.

기본 사이트 이상을 원하면 어떻게 합니까?

그렇다면 섹션 및 열과 같은 더 복잡한 레이아웃을 구축할 때 인터페이스가 훨씬 쉽고 빠르기 때문에 Elementor가 최선의 선택이 될 가능성이 있습니다.

그리고 SEO가 얼마나 중요한지 우리 모두 알고 있기 때문에 빠르게 로딩되는 웹사이트를 디자인해야 합니다. Elementor는 완벽하게 최적화되지 않은 일부 코드(기능에 대한 작은 가격)의 비용으로 제공될 수 있습니다. 그러나 Assets Cleanup, Perfmatters 등과 같은 팽창 제거 플러그인을 사용하는 것과 같이 이 팽창된 코드를 해결할 수 있는 방법이 있습니다.

결론

Gutenberg와 Elementor 모두 기술 지식이 많지 않은 초보자에게 훌륭한 선택입니다. 그들은 둘 다 자신의 일을 잘하지만, 둘 다 장단점이 있습니다. 각각은 특정 목적에 가장 적합합니다.

Elementor는 선택할 수 있는 미리 만들어진 템플릿과 블록을 많이 사용하여 웹사이트에 더 멋진 모양과 느낌을 주고자 할 때 가장 좋습니다. 또한 모든 페이지의 전체 편집 기능을 제공합니다.

반면에 Gutenberg를 사용하면 버튼, 표, YouTube 포함 및 기타 유사한 요소를 쉽게 추가할 수 있습니다. 그것은 빠른 bloat-free 페이지를 구축하며, 여백과 패딩에 익숙하지 않은 경우에 축복입니다.

따라서 우리는 명확한 승자가 없습니다. 귀하에게 가장 적합한 페이지 빌더는 귀하의 예산, 기술 및 웹사이트 디자인 요구 사항에 따라 달라집니다.

WooCommerce W/O 플러그인에 위시리스트를 추가하는 방법