세상에는 수많은 페이지 빌더가 존재하며, 여러분은 분명 이렇게 자문하고 계실 것입니다: Page Builder Sandwich는 대체 무엇이 특별한가? 이미 다른 빌더를 사용하고 있다면 굳이 이것을 써야 할 이유가 있을까요?
이 글에서는 Page Builder Sandwich를 특별하게 만들고 콘텐츠 크리에이터와 디자이너 모두에게 진정한 필수품으로 만들어 주는 핵심 기능 몇 가지를 소개해 드리겠습니다. 페이지 빌더가 무엇인지, 왜 필요한지 잘 모르시더라도 걱정하지 마세요. 도움이 될 만한 자료가 준비되어 있습니다.
1. 단순한 시각적 표현이 아닌, 실제 콘텐츠를 직접 보고 편집합니다
다른 페이지 빌더에서는 콘텐츠를 단순히 나타내기만 하는 영역을 보게 됩니다. 주로 블록과 직사각형 모양으로 콘텐츠 레이아웃을 구성하기 때문에, 그 결과물은 실제 페이지에서 콘텐츠가 어떻게 보일지에 대한 뼈대처럼 보일 뿐입니다. 이로 인해 결과물이 어떻게 보일지 확인하려고 미리보기 버튼을 끊임없이 클릭해야 합니다.
Page Builder Sandwich를 사용하면 모든 편집이 사이트의 프론트엔드에서 이루어지며 콘텐츠를 직접 편집하므로 진정한 위지위그(WYSIWYG) 경험을 누릴 수 있습니다.
2. 성가신 팝업 대화상자 없는 빠르고 간편한 직접 편집
팝업은 페이지 빌더의 단골 요소였습니다. 대부분의 빌더에서는 제목, 버튼 라벨, 작은 태그라인 텍스트 등 레이아웃의 어떤 요소를 편집하려고 해도 먼저 팝업 대화상자가 열릴 때까지 기다린 후 그 안에서 변경 작업을 수행해야 했습니다.
우리는 Page Builder Sandwich 전반에서 팝업의 사용을 최소화하는 것을 목표로 삼았습니다. 팝업을 제거함으로써 모든 콘텐츠 편집이 그 어느 때보다 쉽고 매끄러워졌습니다.
편집 방식은 매우 직관적입니다. 텍스트를 클릭하여 커서를 놓고 바로 타이핑을 시작하면 됩니다. 이제 편집을 시작하기 위해 TinyMCE 에디터가 포함된 팝업 대화상자를 기다릴 필요가 없습니다. 가장 좋은 점은 여전히 콘텐츠를 드래그 앤 드롭으로 자유롭게 이동할 수 있다는 것입니다.
번거로움 없는 편집을 돕는 또 다른 혁신은 항상 표시되는 인스펙터(속성창)입니다. 인스펙터는 도구 상자이자 속성 편집기 역할을 합니다. 텍스트 색상, 제목, 글꼴 크기 조절, 마진, 패딩, 테두리, 인용문 등 콘텐츠 서식 지정을 위한 도구를 클릭 한 번으로 손쉽게 사용할 수 있습니다.
3. 워드프레스 기존 기능의 재사용
다른 페이지 빌더에서 발견한 또 다른 점은 바퀴를 다시 발명하는 경우가 많다는 것입니다. 일부 빌더는 자체 컬러 피커, 이미지 업로더, 갤러리 생성기 및 기타 다양한 도구를 직접 구현합니다. 그 자체로 나쁜 것은 아니지만, 워드프레스는 수많은 코드 스니펫의 보물창고인데 굳이 이를 활용하지 않을 이유가 있을까요?
워드프레스는 수많은 훌륭한 기여자들이 만든 멋진 도구들이 가득한 거대하고 경이로운 플랫폼입니다. Page Builder Sandwich는 워드프레스에 이미 번들로 포함된 기능을 최대한 활용합니다.
자체 컬러 피커 대신 Iris 컬러 피커를 사용합니다. 자체 이미지 업로더 대신 미디어 관리자를 사용합니다. 또한 유용한 스크립트의 예로 backbonejs, underscorejs, wp.hooks, wp.shortcode 등도 있습니다. 우리는 이 모든 것을 활용하고 있으며, 이를 통해 개발이 더 수월해졌을 뿐만 아니라 코드베이스도 훨씬 더 안정적이 되었습니다.
워드프레스의 기능을 재사용한 덕분에 멋진 뜻밖의 소득도 얻었습니다. 예를 들어, 이미지를 삽입할 때 미디어 관리자를 사용했기 때문에 워드프레스 갤러리, 비디오 및 오디오 재생목록, 외부 URL까지 추가 작업 없이 즉시 처리할 수 있었습니다. 또한 이미지 편집에도 미디어 관리자를 그대로 활용할 수 있어 불필요한 개발 고민에 들어가는 수많은 시간을 절약할 수 있었습니다.
4. 키보드 내비게이션 및 단축키
다른 페이지 빌더에서는 마우스가 주된 도구입니다. 마우스로 요소를 드래그 앤 드롭하고 더블 클릭하여 편집합니다. 하지만 키보드는 소외되는 경우가 많습니다.
예를 들어, 일부 빌더에서는 팝업 대화상자를 닫고 새 대화상자를 클릭해야 하므로 현재 편집 중인 위치의 한 단락/섹션 위에 있는 텍스트를 쉽게 편집할 수 없습니다. Page Builder Sandwich에서는 키보드로 탐색할 수 있습니다. 화살표 키를 눌러 콘텐츠 사이를 이동할 수 있으며, 다른 행이나 열 안에 숨겨진 콘텐츠라도 문제없이 작동합니다.
또 다른 중요한 기능은 실행 취소(Undo) 및 다시 실행(Redo) 키보드 단축키입니다. 처음에는 대수롭지 않게 보일 수 있지만, 실수로 콘텐츠를 잘못된 위치에 드래그 앤 드롭한 상황을 생각해 보세요. 일부 페이지 빌더에서는 원래 위치로 다시 직접 드래그해야 합니다. Page Builder Sandwich에서는 실행 취소와 다시 실행이 모두 지원됩니다. 입력한 내용을 수정하고 싶든, 드래그한 콘텐츠(또는 여러 콘텐츠)를 되돌리고 싶든, 실행 취소나 다시 실행을 누르기만 하면 됩니다. 실행 취소 및 다시 실행은 드래그 앤 드롭한 콘텐츠는 물론 글꼴 크기, 행 패딩과 같은 속성 변경에도 적용됩니다. 이를 통해 강력한 편집 도구로 활용할 수 있습니다.
5. 진정한 프론트엔드 페이지 빌더 – 더욱 편안하고 군더더기 없는 편집 경험
개발 과정에서 우리의 마음가짐은 프론트엔드에서의 편집이 백엔드 도구를 그대로 사용해 편집하는 것처럼 느껴져서는 안 된다는 것이었습니다. 빌더가 원래 백엔드용으로 만들어진 후 프론트엔드로 단순히 포팅된 것처럼 느껴져서는 안 됩니다.
결론적으로 제가 생각하는 Page Builder Sandwich의 가장 큰 차별점은 프론트엔드 편집이란 어떠해야 하는가를 새롭게 재해석하여 “진정한” 프론트엔드 페이지 빌더가 되는 것을 목표로 제작되었다는 점입니다.