Page Builder Sandwich를 대중에게 공개한 지 10개월이 지났습니다. 현재 약 6,000개의 활성 설치 수를 기록하고 있으며, 이는 저희에게 매우 큰 성과입니다. 그 덕분에 좋고 나쁜 수많은 피드백도 받았습니다. 하지만 전반적인 의견은 시중의 다른 페이지 빌더에 비해 레이아웃을 구성하고 콘텐츠를 만드는 것이 얼마나 쉬운지 사람들이 만족해하고 있다는 점이었습니다.
저희가 받은 피드백 중 상당수는 기능 요청이었고, 지난 몇 달 동안 그러한 기능 중 다수를 추가했습니다. 하지만 그렇게 작업을 계속하면서, 그 과정에서 서서히 사용자 인터페이스도 변경하기 시작했습니다. 그리고 그 결과, 사용자 경험도… 최악의 방향으로 변화하고 있었습니다. 결국 인터페이스가 더 이상 매끄럽게 작동하지 않고 다양한 기능들이 서로 제대로 어우러지지 못해, 인터페이스를 완전히 재검토해야 하는 지점에 이르렀습니다.
사라진 인터페이스
PBS의 이전 버전에서는 모든 것을 버튼 형태로 만들고자 했습니다. 왜일까요? 버튼은 사용하기 쉽기 때문입니다. 그냥… 클릭하기만 하면 되니까요. 이전 버전의 인스펙터(위 이미지의 사이드바)에서는 버튼을 클릭하면 값이 증가하고, Shift 키를 누른 채 클릭하면 값이 감소했습니다. 아주 쉽게 들립니다. 하지만 캐러셀, 탭, 지도 및 기타 새로운 요소와 기능들이 추가되면서, 이 모든 버튼들은 서로 다른 디자인을 가진 다양한 아이콘들의 뒤범벅이 되었고, 멋진 인터페이스라기보다는 상형문자처럼 보이기 시작했습니다. 기존의 숙련된 사용자들에게는 문제가 되지 않았지만, PBS를 처음 접하는 분들에게는 보기에 상당히 부담스러웠습니다.
다음으로, 인스펙터에서 몇 가지 문제가 나타나기 시작했습니다. 원래 아이디어는 모든 것을 인스펙터 내부에서 간단하고 사용하기 쉽게 만드는 것이었습니다. 여기서 모든 것이란, 텍스트를 제목으로 바꾸는 것부터 배경색, 글꼴 색상 변경에 이르기까지 정말로 모든 것을 의미했습니다. 그러나 현재 상태의 인스펙터는 이제 마우스 휠을 계속 위아래로 스크롤해야 하는 수많은 옵션을 포함하게 되었습니다. 제가 처음에 사용자들을 위해 만들고자 했던 인스펙터와는 사뭇 달랐습니다.
마지막으로, 저희는 최근 즐겨 사용하는 플러그인을 위한 숏코드 매핑. 이 기능은 숏코드 편집 경험을 더욱 쾌적하게 만들기 위해 텍스트 필드, 숫자 슬라이더, 체크박스 및 추가적인 새로운 옵션 유형을 만들어야 했습니다. 처음에는 좋은 아이디어였고, 실제로 숏코드를 다루는 작업을 더 쉽게 만들어 주었습니다. 하지만 다시 말하지만, 이 기능은 저희의 “버튼 전용” 인터페이스에서 벗어난 것이었습니다. 돌이켜보면 숏코드 속성을 변경하는 데 버튼만 사용하는 것은 실질적으로 불가능했습니다. 결국 최신 버전에서는 2가지 유형의 컨트롤이 남게 되었습니다: 버튼과 숏코드 필드입니다.
저희 인터페이스가 더 이상 효과적이지 않다(또는 저희의 요구에 맞지 않는다)고 판단하게 된 몇 가지 이유가 더 있지만, 위의 사항들이 주요 원인이었습니다. 하지만 한 가지는 언제나 분명했습니다: 인터페이스를 업데이트해야 한다는 사실을 알고 있었다는 점입니다.
페이지 빌더가 이상적으로 작동해야 하는 방식 정의하기
당장 뛰어들어 모든 것을 바꾸기보다는, 백 걸음 물러서서 페이지 빌더의 경험 전체를 되돌아보았습니다. 인터페이스에 새로운 생명을 불어넣고 싶었습니다. 솔직히 말해 매년 인터페이스를 다시 만드는 일은 원치 않았습니다. 그것은 진 빠지는 일이며 워드프레스 커뮤니티에도 실질적인 도움이 되지 않습니다. 이번에는 천천히, 신중하게 진행하기로 했습니다. Page Builder Sandwich의 구석구석과 그것을 훌륭한 페이지 빌더로 만드는 요소를 연구했고, 마침내 전체 편집 경험을 몇 가지 핵심 개념으로 구체화했습니다.
핵심 개념 #1: 편집할 콘텐츠에 직접 입력하기
페이지 빌더를 설치하는 주된 이유 중 하나는 워드프레스의 백엔드 텍스트 편집기가 주는 제약에서 벗어나기 위함입니다. 백엔드 편집기가 나쁘다는 것은 아니지만, 웹페이지를 만들 때 방문자에게 페이지가 실제로 어떻게 보일지 즉각 보여주지 못하며, 1열 레이아웃을 벗어나 콘텐츠를 배치할 수도 없습니다. 텍스트와 일부 이미지만 볼 수 있을 뿐, 더 정교한 요소(예: 문의 양식)는 볼 수 없습니다. 숏코드를 추가할 수는 있지만, 렌더링된 형태로 표시되지는 않습니다*.
* Shortcake UI와 같이 이 문제를 해결하기 위해 다른 개발자들이 만든 플러그인이 있긴 하지만, 그것은 논외입니다.
바로 이 지점에서 프론트엔드 페이지 빌더가 필요합니다. 편집 경험을 백엔드에서 프론트엔드로 끌어내어, 방문자가 실제로 보게 될 모습 그대로 사이트를 편집할 수 있게. 피핀(Pippin)의 표현을 빌리자면: 보는 대로 얻는 것(WYSIWYG)입니다.
프론트엔드 편집기의 또 다른 장점은 텍스트를 직접 편집할 수 있다는 점입니다. 제목과 본문을 직접 입력하면 웹사이트 제작 시 일반적인 워드프로세서를 사용하는 듯한 편리함을 제공합니다. 버튼과 탭 레이블 역시 클릭하고 타이핑하기만 하면 쉽게 변경할 수 있어야 합니다.
이 부분은 다른 대부분의 페이지 빌더가 제대로 제공하지 못하는 영역입니다. 대부분은 모든 것을 편집하기 위해 텍스트 필드 안에 입력하도록 강제합니다. 다시 말씀드리지만, 진정한 프론트엔드 페이지 빌더에서는 그래서는 안 됩니다. 텍스트를 직접 입력하고 편집하는 것은 버전 2 이후 Page Builder Sandwich의 강점이었으며, 버전 3에서도 이를 온전히 유지하도록 했습니다.
핵심 개념 #2: 빠른 조정을 위한 마우스 활용
마우스는 강력한 도구이지만 페이지 빌더에서 종종 간과되곤 합니다. 대개의 경우 페이지 빌더는 요소를 끌어다 다른 위치에 놓거나(드래그 앤 드롭), 버튼 또는 입력 필드를 클릭하는 용도로만 마우스를 사용합니다. 이것도 나쁘진 않지만, 페이지 제작 관점에서 마우스로 할 수 있는 일은 훨씬 더 많습니다.
우선, 페이지 편집 도구로 마우스를 사용할 때 멋진 시각적 피드백을 얻을 수 있습니다. 특히 마진, 패딩, 크기와 같은 시각적 속성을 조정할 때 더욱 그렇습니다. 이제 요소를 다듬는 작업이 자연스러운 경험이 됩니다.
PBS 버전 3에서는 마우스를 사용하여 수많은 항목을 조정할 수 있습니다. 개별 요소 사이의 여백/간격, 열 내부의 패딩뿐만 아니라 이미지, 아이콘, 지도의 크기까지 조절할 수 있습니다. 또한 숫자 값을 변경할 수 있던 버튼들을 슬라이더로 교체했습니다.
핵심 개념 #3: 텍스트 스타일 지정이 쉬워야 함
모니터에서 한 걸음 물러서서 바라보면 웹페이지에 추가하는 내용의 대부분이 텍스트 콘텐츠라는 것을 알 수 있습니다. 물론 이를 보완하기 위한 이미지와 아이콘도 있으며, 최근에는 사이트에 더 큰 이미지를 추가하는 경향이 있습니다. 하지만 중요한 콘텐츠의 대다수는 제목, 글머리 기호 목록, 본문, 인용문 등의 텍스트입니다. 그와 더불어 중요한 것은 디자인에 맞게 텍스트의 스타일을 지정하는 방법입니다. 크기와 색상을 변경하거나 굵게 또는 기울임꼴로 만들기도 합니다. 이는 독자들에게 콘텐츠가 더 읽기 쉽고, 적절하며, 매력적으로 다가가도록 하기 위함입니다.
텍스트 스타일을 자주 지정하기 때문에 스타일을 변경할 수 있는 버튼은 매우 쉽게 접근할 수 있어야 합니다. 먼저 열어야 하는 팝업 상자 안에 숨겨져 있어서는 안 됩니다. 대부분의 페이지 빌더가 이러한 고질적인 문제를 안고 있습니다. 사용자 인터페이스를 ‘깔끔하다’고 내세우기 위해 가장 많이 사용되는 옵션조차 눈에 띄지 않게 가려버리는 것입니다.
이를 해결하기 위해 가장 일반적으로 사용되는 워드프로세서들을 살펴보았습니다. 화면 상단 근처에 텍스트 서식을 지정하는 수많은 버튼이 일렬로 배치되어 있는 것을 발견하고, 버전 3에 동일한 레이아웃을 적용했습니다. 이제 화면 상단에 모든 텍스트 스타일 지정 버튼이 항상 표시되는 행이 마련되었습니다. 이를 통해 텍스트 편집 시 마치 몸에 밴 습관처럼 매우 빠르고 자연스럽게 스타일을 지정할 수 있습니다.
핵심 개념 #4: 고급 스타일링 옵션은 유연하면서도 이해하기 쉬워야 함
페이지 빌더의 본질은 사람들이 멋진 디자인을 쉽게 만들 수 있도록 해주는 것입니다. 즉, 가파른 학습 곡선으로 고통받지 않으면서도 다양하고 풍부한 설정과 옵션을 제공해야 한다는 뜻입니다. 여백과 패딩을 조절하고 텍스트 스타일을 다듬는 것도 훌륭하지만, 그것만으로는 한계가 있습니다. 작업을 완성하려면 배경 이미지, 패턴, 테두리, 고정 배경 등 훨씬 더 정교한 옵션이 필요합니다. 이러한 다양한 설정을 모두 쌓아두면 다소 버겁게 느껴질 수 있으므로, 버전 3에서는 일부를 단순화하고 카테고리별로 구성하여 훨씬 친숙하게 만들었습니다.
핵심 개념 #5: 숏코드 지원
마지막으로, 저희의 페이지 빌더가 워드프레스 위에서 작동한다는 점을 잊어서는 안 됩니다. 우리는 플랫폼과 그 기능을 온전히 수용해야 하며, 이를 제한하거나 벗어나서는 안 됩니다. 워드프레스가 제공하는 거대한 기능 중 하나는 바로 숏코드입니다. 콘텐츠 전체가 숏코드로 구성되어야 한다는 뜻은 아니며(그렇게 되면 엉망이 될 것입니다), 숏코드와 완벽하게 호환되어야 한다는 의미입니다. 수많은 플러그인과 테마가 숏코드를 사용하고 있으며, 이를 모두 무시한다면 엄청난 손실일 것입니다. 실제로 숏코드는 사용자가 페이지를 만들 때 극대화된 유연성을 제공합니다.
저희는 몇 주 전에 숏코드 매핑 시스템을 도입했으며, 덕분에 수백 개의 플러그인에서 제공하는 수백 개의 숏코드를 매핑했습니다. 워드프레스 플러그인 디렉터리에서 가장 인기 있는 플러그인을 우선적으로 처리했으므로 여러분의 사이트에서도 쉽게 접할 수 있을 것입니다. 이 기능은 버전 3에서 더욱 강화되었으며, 앞으로도 지속적으로 개선해 나갈 예정입니다.
결론
저희는 위의 모든 핵심 속성들을 취하여 Page Builder Sandwich 버전 3에 녹여냈습니다. 이것은 지금까지 워드프레스용으로 제작한 페이지 빌더 중 최고입니다. 더욱 직관적이고 자연스럽게 사용할 수 있으며, 성능은 더 빨라졌고, 사용하기 쉬우며, 그 어느 때보다 친숙합니다.
필수적인 페이지 빌더 기능에 대해 의견이 있으시다면 아래에 댓글로 알려주세요.