워드프레스에서 레이아웃 작업을 쉽게 하려면 엘리멘터를 사용할 수 있습니다. 엘리멘터는 초보자부터 전문 사용자까지 코딩 지식 없이 쉽게 원하는 레이아웃을 만들 수 있지만, 사이트 속도에 영향을 미칠 수 있습니다. 워드프레스 사이트를 빠르고 효율적으로 구축하고 싶다면, GenerateBlocks 플러그인이 괜찮은 선택일 수 있습니다.
블로그를 운영하거나 원페이지 레이아웃 사이트를 만들려는 경우 속도가 중요하다면 GenerateBlocks를 사용하는 것을 고려할 수 있습니다. 블록 에디터의 기능을 확장하는 이 플러그인은 CSS와 JavaScript 사용을 최소화하여 사이트 로딩 속도를 극대화합니다. 복잡한 페이지 빌더 없이도 컨테이너, 그리드, 헤드라인, 버튼 등 핵심 블록만으로 다양한 레이아웃과 디자인을 구현할 수 있습니다.
가볍고 빠른 블록 에디터용 GenerateBlocks 플러그인
GenerateBlocks는 가장 빠른 워드프레스 테마 중 하나로 평가되는 GeneratePress 테마를 만든 개발자가 제작한 블록 에디터용 플러그인입니다.
이 플러그인을 설치하여 활성화하면 블록 에디터에서 몇 개의 추가적인 블록을 사용할 수 있습니다.
제공되는 블록은 몇 개 되지 않지만, 이러한 블록을 활용하여 다양한 레이아웃 요소들을 만들어낼 수 있습니다.
GenerateBlocks 프로 버전에서는 20개 이상의 스타터 사이트(아바다 테마 등의 데모 사이트와 비슷)와 200개 이상의 사전 제작된 디자인 패턴이 제공됩니다.
무료 버전으로 복잡한 레이아웃을 만들려면 쉽지 않습니다. 프로 버전에서는 미리 만들어진 디자인 패턴을 제공하여 쉽게 페이지 디자인을 할 수 있도록 돕습니다.
CTA, FAQ, 갤러리, 히어로 페이지, 로고, 가격표(Pricing), 쿼리 루프 등 다양한 패턴을 활용할 수 있습니다.
GenerateBlocks과 GeneratePress 유료 버전은 최대 500개 사이트에 설치가 가능합니다. (여러 사이트에 적용하는 경우 엘리멘터에 비해 가격면에서 저렴한 편입니다.)
GenerateBlocks와 Elementor의 차이점에 대하여 다음 표를 참고해 보세요.
| 항목 | GenerateBlocks Pro | Elementor Pro |
|---|---|---|
| 유형 | 구텐베르크 블록 플러그인 | 드래그 앤 드롭 페이지 빌더 |
| 주요 특징 | 8개 핵심 블록(컨테이너, 그리드 등), 고성능, 가벼움, 고급 스타일(글로벌 스타일, 효과), 템플릿 라이브러리, 반응형, 커스텀 속성 | 57개 이상의 위젯, 테마 빌더, 비주얼 편집, 다양한 템플릿, 고급 디자인 기능 |
| 템플릿/패턴 | 20개 이상의 스타터 사이트, 200개 이상의 패턴 | 수백 개의 블록 및 페이지 템플릿 제공 |
| 성능(속도/최적화) | 매우 빠름, 페이지 용량·요청 수 적음, 최적화에 강점 | 상대적으로 무거움, 많은 JS/CSS, 최적화 필요 |
| 사용 난이도 | 구텐베르크 친화적, 약간의 학습 필요 | 직관적, 초보자도 쉽게 사용 가능 |
| 가격 | 연간 99달러 (500개 사이트 적용 가능) | 적용 사이트 개수에 따라 연간 - 84달러 (1개 사이트) - 99달러 (3개 사이트) - 204달러 (25개 사이트) - 399달러 (1000개 사이트) ※ 기능이 제한된 Essential 요금제의 경우 연간 60달러 |
| 확장성 | GeneratePress 등 경량 테마와 궁합 우수 | 다양한 애드온 및 플러그인과 호환 |
| 주요 단점 | 블록 기반, 일부 고급 디자인은 직접 구현 필요 | 사이트 속도 저하, 무거운 코드 |
복잡한 사이트를 만들려는 경우 엘리멘터가 편리할 수 있지만, 속도면에서는 GenerateBlocks가 유리하며, 사용법을 익히면 복잡한 사이트의 제작도 가능합니다. 실제로 복잡한 효과가 적용된 불닭닷컴 사이트가 GenerateBlocks로 제작되었습니다(참고).
자세한 정보는 GeneratePress 홈페이지를 참고하시기 바랍니다.
GenerateBlocks 플러그인의 Container 블록의 가독성 높이기
컨테이너 블록 영역을 시각적으로 구분하기 어려움
GenerateBlocks의 Container(컨테이너) 블록을 사용하면 여러 개의 블록을 하나의 그룹으로 묶어서 활용할 수 있습니다. 이를 통해 다양한 효과를 만들어낼 수 있습니다. 예를 들어, 다음과 같은 카드 UI를 컨테이너 블록을 사용하여 구현할 수 있습니다.
블록 에디터에서 Container를 추가하려면 블록 삽입하기 아이콘(플러스 기호 아이콘)을 클릭하여 Container를 선택하거나, 간단히 /Container를 입력하여 선택할 수 있습니다(블록 에디터 키보드 단축키 참고).
컨테이너 블록을 삽입하여 블록을 추가해 보면 어떤 블록들이 컨테이너에 포함되었는지 시각적으로 구분하기가 쉽지 않습니다.
다음 그림과 같이 블록 에디터에서 컨테이너 영역을 쉽게 구분할 수 있다면 컨테이너를 보다 편리하게 사용할 수 있을 것입니다.
컨테이너 영역을 시각적으로 쉽게 구분할 수 있도록 스타일 지정하기
다음과 같은 방법으로 블록 에디터에서 GenerateBlocks의 Container 블록 영역이 시각적으로 구분되도록 할 수 있습니다.
1 차일드 테마의 함수 파일(functions.php)에 다음 코드를 추가합니다.
// default container style in block editor
// 블록 에디터에서 컨테이너 스타일 지정하기
function child_theme_add_editor_styles() {
add_editor_style('editor-style.css');
}
add_action('after_setup_theme', 'child_theme_add_editor_styles');2 차일드 테마 폴더에 editor-style.css 파일을 만듭니다.
3 editor-style.css 파일에 다음 코드를 추가합니다.
/* Visually distinguish GenerateBlocks Container block in the block editor */
/* GenerateBlocks Container 블록을 블록 에디터에서 시각적으로 구분 */
.block-editor-block-list__block[data-title="Container"] {
background-color: rgba(0, 200, 255, 0.07);
border: 1px dashed #00bcd4;
padding: 16px;
box-shadow: inset 0 0 0 2px #00bcd4;
color: black;
}이제 블록 에디터에서 Container 블록을 추가하면 컨테이너 영역이 색상으로 구분되어 보다 편리하게 블록을 컨테이너에 추가할 수 있습니다.
스타일을 바꾸고 싶다면 상기 CSS 코드를 적절히 변경하시기 바랍니다.
마치며
워드프레스는 높은 점유율이 꺾일 것이라는 전망이 있었지만 엘리멘터 페이지 빌더 때문에 사용자들이 꾸준히 유입되면서 높은 점유율을 유지하고 있습니다.
엘리멘터를 사용하면 코딩 지식이 부족해도 디자인 작업을 쉽게 할 수 있다는 장점이 있습니다. 하지만 페이지 빌더를 사용하면 사이트 속도에 영향을 미칠 수밖에 없습니다. 엘리멘터가 빌더 중에서 속도가 괜찮은 것으로 평가되지만 엘리멘터를 활성화하면 사이트 속도가 느려지는 경우가 많습니다.
속도가 중요하다면 GeneratePress와 같은 가벼운 테마를 사용할 수 있습니다. 또한, GenerateBlocks 플러그인을 함께 사용하면 디자인 작업을 확장할 수 있을 것입니다. 다만, 속도면에서 엘리멘터에 비해 확실히 빠르지만 사용 편의성은 엘리멘터가 더 좋은 편입니다.
블로그를 운영한다면 굳이 페이지 빌더를 사용할 필요는 없고 심플하게 구성하여 운영하시면 좋을 듯 합니다. 기업 사이트나 쇼핑몰을 운영하는 경우에는 엘리멘터나 GenerateBlocks와 같은 플러그인을 사용하면 디자인 작업이 수월할 것입니다.
Generatepress 테마를 사용하고 있는데 Generateblocks도 함께 사용해봐야겠네요.