이 글은 Page Builder Sandwich의 작동 방식에 대해 간략히 설명하며, 당사의 페이지 빌더가 WordPress의 다양한 요소와 어떻게 통합되는지 관심 있는 분들을 위한 입문서로 마련되었습니다. Page Builder Sandwich의 개별적인 기능들에 대해 자세히 다루지는 않겠습니다. 해당 내용을 확인하고 싶으시다면 각 기능을 짧은 화면 녹화 영상으로 소개하는 동영상 페이지를 방문해 보세요.
Page Builder Sandwich가 다른 페이지 빌더들과 어떻게 다른지 알고 싶으시다면, How Page Builder Sandwich Is Different from the Rest.
어디에 있나요? 그리고 무엇을 편집할 수 있나요?
다른 많은 페이지 빌더와 달리, Page Builder Sandwich는 웹사이트의 프런트엔드에서 작동합니다. 백엔드에 계실 경우, 페이지의 프런트엔드로 이동할 수 있도록 콘텐츠 편집기 버튼 옆에 “Frontend” 버튼을 제공해 드렸습니다.
Page Builder Sandwich를 사용하면 글, 페이지 및 커스텀 포스트 타입 콘텐츠를 편집할 수 있습니다. 단, 메인 페이지에 모아놓은 블로그 글 목록이나 사이트의 기타 비단일 페이지 영역은 직접 편집할 수 없습니다. 백엔드에 콘텐츠 편집기가 있는 대상(예: “새 글 추가”, “새 페이지 추가”)이라면 Page Builder Sandwich를 사용할 수 있다고 생각하시면 됩니다. 개별 페이지와 블로그 글을 편집할 수 있으며, 예를 들어 레스토랑 메뉴나 포트폴리오 항목을 추가해 주는 플러그인이 있다면 해당 항목도 편집할 수 있습니다.
프런트엔드에서는 관리 표시줄(어드민바)에 파란색 “Edit with Page Builder Sandwich” 버튼이 배치되어 있습니다. 이 버튼을 클릭하기만 하면 페이지 편집을 시작할 수 있습니다.
직관적인 콘텐츠 편집
Page Builder Sandwich를 사용하면 콘텐츠 편집을 최대한 쉽고 번거로움 없이 진행할 수 있습니다. 편집 작업은 매우 직관적이고 쉬워 클릭하고 입력하기만 하면 됩니다. 정말 간단합니다.
인스펙터(Inspector)를 소개합니다
많은 페이지 빌더에 팝업창이 너무 많다는 점을 발견했습니다. 개인적으로 저는 팝업창이 집중을 방해하고 기본적으로 “잠깐, 이 필드들을 다 채우기 전까지는 하던 작업을 멈추세요”라고 말하는 것 같아 선호하지 않습니다. 이는 매끄러운 편집 경험의 흐름을 끊어 놓습니다. 이 때문에 저희는 전반적인 팝업창 사용을 최소화하고, 대신 인스펙터를 제작했습니다.
인스펙터는 필요한 모든 서식 및 레이아웃 도구를 담고 있는 사이드바 형태의 영역입니다. 화면의 왼쪽 또는 오른쪽에 고정할 수 있어 편집 중인 내용을 쉽게 확인할 수 있습니다.
인스펙터를 통해 제목, 글꼴 크기, 굵게, 기울임꼴, 텍스트 색상 등 다양한 텍스트 속성을 조정할 수 있습니다. 이외에도 이미지를 추가하고 행이나 열로 구성된 콘텐츠를 생성할 수 있습니다. 또한 행을 전체 페이지 너비로 조정하거나, 행 및 열의 배경색, 수직 콘텐츠 정렬, 여백 및 배경 설정 등 더욱 고급 편집 기능도 수행할 수 있습니다. 매우 강력하여 작업의 대부분을 인스펙터로 처리하게 될 것입니다.
WordPress 테마와의 통합
Page Builder Sandwich는 본질적으로 자체 스타일이 거의 포함되어 있지 않습니다. 콘텐츠를 편집할 때 표시되는 스타일은 대부분 현재 사용 중인 테마를 기반으로 합니다.
숏코드(Shortcode)와의 통합
숏코드는 WordPress에서 중요한 부분을 차지하며, 사이트에서 여러 숏코드를 활용할 가능성이 높습니다. Page Builder Sandwich는 프런트엔드에서 숏코드가 렌더링된 상태로 나타나도록 이를 매우 잘 처리합니다. 숏코드는 계속해서 편집 가능한 상태로 유지되며, 가장 좋은 점은 숏코드를 편집한 후 변경 사항과 함께 다시 즉시 렌더링된다는 것입니다.
편의를 위해 인스펙터를 사용하여 숏코드를 편집할 수 있습니다. 더 세부적으로 제어하고 싶다면 숏코드를 두 번 클릭하여 원본 코드 형태로 편집할 수도 있습니다. 뿐만 아니라, 웹사이트에서 사용 가능한 모든 숏코드가 인스펙터에 나열되어 콘텐츠에 쉽게 삽입할 수 있습니다.
웹사이트 속도 저하(Bloat)는 없나요?
느린 웹사이트를 좋아하는 사람이 있을까요? 저희도 싫어하며, 여러분도 당연히 싫어하실 것입니다. 저희는 Page Builder Sandwich가 웹사이트 성능에 미치는 영향을 거의 제로에 가깝게 유지하도록 개발했습니다. 로그아웃된 상태에서는 최소한의 행 및 열 CSS 스타일만 대기열에 추가되며(enqueue), 사용자가 사용한 숏코드에 필요한 JS 및 CSS 스크립트만 함께 로드됩니다.
개발자를 위한 안내
개발자로서 본인의 WordPress 플러그인에 숏코드가 포함되어 있다면, Page Builder Sandwich가 제공하는 Shortcode API를 활용하여 고객이 숏코드를 쉽게 생성하고 수정할 수 있는 필드를 간편하게 제공할 수 있습니다.
기능을 더욱 확장하거나 Page Builder Sandwich의 일부와 통합하고 싶으신 경우 사용할 수 있는 유용한 액션 및 필터 훅도 다수 준비되어 있습니다.