구텐베르크 대 워드프레스 페이지 빌더

게시 됨: 2020-10-05

WordPress 5.0이 출시되면서 WordPress는 Gutenberg의 형태로 완전히 새로운 블록 편집기를 갖게 되었습니다. 내장된 블록 레이아웃을 사용하여 콘텐츠 제작에 대한 완전히 새로운 철학을 가져왔습니다. 이 때문에 많은 사람들이 Gutenberg가 WordPress 페이지 빌더 플러그인을 대체한다고 믿기 시작했습니다. 그러나 그들 사이에는 큰 차이가 있습니다.

Gutenberg는 매우 강력하며 아름다운 블록 레이아웃을 사용하여 콘텐츠를 만들 수 있습니다. 그러나 강력한 WordPress 페이지 빌더 플러그인과 일치하지 않습니다.

이 기사에서는 Gutenberg와 WordPress 페이지 빌더를 비교하여 둘의 차이점을 이해하는 데 도움을 드립니다.

목차

구텐베르크 대 워드프레스 페이지 빌더

Gutenberg는 WordPress의 새로운 기본 블록 편집기입니다. 콘텐츠 블록을 사용하여 페이지 및 게시물에 대한 요소를 만들고 정렬합니다.

WordPress 페이지 빌더 플러그인은 코드를 건드릴 필요 없이 완전한 기능의 웹사이트 디자인을 만들 수 있는 드래그 앤 드롭 도구입니다.

가장 큰 차이점은 Gutenberg가 핵심 WordPress에 내장되어 있으며 WordPress 버전을 5.0으로 업그레이드하면 기본 콘텐츠 편집기라는 것입니다.

반면에 WordPress 페이지 빌더는 코더가 아닌 일반인도 웹사이트를 디자인하는 데 도움이 되는 타사 WordPress 플러그인입니다.

워드프레스 핵심 팀조차도 구텐베르그를 페이지 빌더라고 부르지 않고 대신 블록 편집기라고 부릅니다. 그 이유는 다음과 같습니다.

백엔드 및 프론트엔드 편집

Gutenberg와 Page Builder 플러그인의 가장 큰 차이점은 백엔드 및 프론트엔드 편집입니다.

구텐베르크 블록 편집기에는 프런트 엔드 편집 기능이 없습니다. 백엔드에서 모든 것을 수정할 수 있습니다. 그러나 프론트엔드 편집과 동일하게 작동하지만 웹 콘텐츠의 정확한 디자인을 보려면 미리보기 버튼을 클릭해야 합니다.

반면 WordPress 페이지 빌더는 페이지를 편집할 때 페이지의 정확한 미리보기를 제공합니다. 페이지를 저장하지 않고도 웹사이트에 페이지가 어떻게 표시되는지 확인할 수 있습니다.

구텐베르그 대 워드프레스 페이지 빌더
엘리멘터 요소
구텐베르그 대 워드프레스 페이지 빌더
WPBakery 편집기
구텐베르그 대 워드프레스 페이지 빌더
비버 빌더 편집기

변경 사항을 즉시 확인할 수 있으므로 프런트엔드 편집이 더 좋습니다. 이것은 전체 프로세스를 더 빠르게 만듭니다.

드래그 앤 드롭 기능

드래그 앤 드롭 기능을 사용하면 모든 요소를 ​​쉽게 재정렬하거나 재정렬할 수 있으므로 전체 작업을 간단하고 쉽게 만듭니다.

Gutenberg에는 편집기에 블록을 삽입하기 위한 끌어서 놓기 프로세스가 제공됩니다. 추가하려는 블록을 검색하고 클릭해야 합니다. 탐색 화살표를 사용하여 블록을 위아래로 이동할 수 있지만 높이/너비를 조정하거나 내부 블록을 추가하거나 행과 열에서 복잡한 레이아웃을 만들 수는 없습니다.

구텐베르그 대 워드프레스 페이지 빌더

반면에 WordPress 페이지 빌더는 레이아웃을 제어할 수 있는 완전한 유연성을 제공합니다. 편집기에서 요소 또는 위젯을 드래그 앤 드롭하고 높이와 너비를 구성하고 요소 내부에 내부 요소를 추가하고 행 및 열 옵션을 사용하여 복잡한 레이아웃을 만들 수도 있습니다.

구텐베르그 대 워드프레스 페이지 빌더
Elementor: 드래그 앤 드롭
구텐베르그 대 워드프레스 페이지 빌더
WPBakery: 드래그 앤 드롭
구텐베르그 대 워드프레스 페이지 빌더
비버 빌더: 드래그 앤 드롭

서식 지정 및 스타일 지정 옵션

이것은 페이지 빌더가 Gutenberg 블록 편집기에 대해 완벽한 넛지를 얻는 곳입니다.

WordPress는 블록을 사용자 정의할 수 있는 고유한 스타일 및 서식 옵션과 함께 Gutenberg의 다양한 내장 블록을 제공합니다. 각 블록의 텍스트와 배경에 적합한 색상을 선택할 수 있습니다. 또한, 타이포그래피에 대한 사전 설정 크기 또는 사용자 정의 크기를 설정할 수 있습니다. 그러나 이러한 옵션은 매우 제한적입니다. 더 많은 스타일 및 서식 옵션을 추가하려면 블록에 대한 사용자 정의 CSS를 추가해야 합니다.

반면에 WordPress 페이지 빌더는 위젯, 열 또는 전체 페이지를 사용자 정의할 수 있는 훨씬 더 많은 서식 및 스타일 옵션을 제공합니다. 이러한 옵션은 색상을 변경하거나 글꼴 크기를 구성하는 기본 옵션이 아닙니다. 배경 변경, 그라디언트, 이미지 또는 비디오 배경 사용, 글꼴 선택, 줄 높이, 너비 조정, 이미지 사용 등과 같은 거의 모든 것을 편집할 수 있습니다.

Elementor: 스타일 지정 및 서식 지정 옵션
Beaver Builder: 스타일 지정 및 서식 지정 옵션

레이아웃 기능

Gutenberg를 사용하여 페이지나 게시물을 만들 때 테마 레이아웃 내에서 제약을 받습니다. 원하는 대로 콘텐츠 블록을 사용자 지정할 수 있지만 핵심 레이아웃(머리글, 바닥글, 사이드바 및 페이지의 전체 모양)은 WordPress 테마와 동일하게 유지됩니다.

반면 WordPress 페이지 빌더를 사용하면 WordPress 테마의 레이아웃을 깨고 독창적이고 고유한 페이지를 만들 수 있습니다. 전체 페이지의 레이아웃을 완전히 제어할 수 있습니다.

간단히 말해서 구텐베르크에서 사용할 수 있는 모든 스타일 및 사용자 지정 옵션은 해당 블로그에만 적용됩니다.

반면 WordPress 페이지 빌더를 사용하면 스타일 지정 및 사용자 지정을 사용하여 유연한 레이아웃을 구축할 수 있습니다.

테마 스타일 호환성

Gutenberg는 WordPress 테마의 디자인에 크게 의존하며 이러한 스타일을 무시하지 않습니다. 사용자 정의 CSS를 추가하여 전체 블록을 사용자 정의할 수 있지만 페이지 모양은 테마에서 제공하는 것과 동일합니다.

WordPress 페이지 빌더 플러그인은 WordPress 테마와 함께 작동할 수 있지만 디자인에 의존하지 않습니다. 그들은 페이지를 완전히 인수하고 스타일을 재정의하는 옵션과 함께 제공됩니다. 이것은 사용자 정의 페이지 레이아웃을 생성하려는 경우 매우 유용합니다.

블록 및 위젯

Gutenberg에는 콘텐츠 생성에 일반적으로 사용되는 요소를 포함하는 내장 블록 세트가 함께 제공됩니다. 이 블록을 다른 게시물과 다른 WordPress 웹사이트에서도 저장하고 재사용할 수 있습니다.

Gutenberg에는 플러그인 개발자가 자신의 블로그 세트를 만들거나 WordPress 플러그인을 편집기와 통합할 수 있는 강력한 API 키가 있습니다.

WordPress 페이지 빌더는 블록, 모듈 및 위젯의 대규모 컬렉션과 함께 제공됩니다. 그들은 사이더, 캐러셀, 행동 유도 버튼, 연락처 양식, 카운트다운 타이머 등을 포함한 고급 콘텐츠 요소를 제공합니다. 나중에 사용하기 위해 개별 행, 열 또는 전체 템플릿을 저장할 수 있습니다.

엘리멘터 요소
WPBakery 요소
비버 빌더 요소

Elementor, Beaver Builder, WPBakery, Divi와 같은 인기 있는 페이지 빌더에는 개발자가 애드온/확장 기능을 만들 수 있는 자체 API도 있습니다.

타사 추가 기능 및 확장

타사 애드온 및 확장에 대해 이야기하면 Gutenberg와 WordPress 페이지 빌더 모두 사용할 수 있는 확장 플러그인의 상당 부분을 보유하고 있습니다.

Gutenberg를 사용하여 많은 개발자가 멋진 Gutenberg 블록 플러그인을 구축했습니다.

페이지 빌더와 관련하여 많은 페이지 빌더에는 개발자가 페이지 빌더용 타사 애드온을 빌드할 수 있는 API가 포함되어 있습니다.

Gutenberg가 WordPress 페이지 빌더 플러그인을 대체합니까?

현재 형식에서 Gutenberg는 Page Builders를 대체하지 않습니다. 페이지 빌더는 WordPress 웹사이트에서 거의 모든 작업을 수행할 수 있는 강력한 기능을 제공합니다. 구텐베르크는 아직 초기 단계에 있습니다. WordPress 로드맵을 보면 WordPress가 블록 편집기를 더욱 강력하게 만들 계획이 있음을 확실히 알 수 있습니다. 그러나 Gutenberg가 페이지 빌더를 인수할 것 같지는 않습니다.