워드프레스 테마 & 페이지 빌더
워드프레스 활용 이야기
지난번 두 글을 통해서 웹템플릿을 가지고 워드프레스 사이트를 만드는 두 가지 작업 방식을 정리해 봤습니다. 첫 번째는 웹템플릿의 디자인과 기획의도만 참고를 해서 워드프레스 테마와 연결된 페이지 빌더를 가지고 새롭게 퍼블리싱을 하는 방법이었고, 두 번째는 웹템플릿을 테마로 전환을 하는 방식을 이용해서 일반 웹 개발 방식으로 퍼블리싱이 완성된 결과물을 가지고 워드프레스 웹사이트를 제작하는 방법이었습니다.
큰 차이라면
전자는 유료 테마를 통해 제공된 페이지 빌더를 이용해서 화면을 제작한 것이고,
후자는 페이지 빌더 없이 전체 구조를 html 태그와 css, js 조합으로 먼저 퍼블리싱을 한 다음 테마 형태로 변경을 한 것입니다.
만약 글쓰기 위주의 사이트이고, 페이지를 수정할 일이 거의 없으며, 처음 제작한 레이아웃대로 계속 운영을 할 거라면 페이지 빌더가 없어도 크게 불편함이 없을 것입니다. 글을 분류하고 추가될 콘텐츠만 관리를 하면 될 테니까요.
그런데 페이지의 내용 업데이트가 잦은 사이트라면 html이나 워드프레스의 템플릿(php 코드)을 수정해야 하므로 기본 웹 구조와 워드프레스 개발 방향을 알아야 수정이 가능하겠지요. 내가 만든 사이트가 아니라면 제작을 해 준 사람에게 다시 의뢰를 해야 할 수 있습니다. 이 경우는 페이지 빌더가 있는 게 유리합니다.
페이지 빌더?
그럼 먼저 페이지 빌더가 뭔지 확인해 보겠습니다. 구글에서 'wordpress page builder'라는 키워드로 검색을 해 보면 빌더 순위를 매기거나 소개하는 많은 글들을 볼 수 있습니다. 페이지 빌더는 대부분 플러그인 형태로 설치해서 이용을 하고, 일부는 테마 자체에 빌더가 포함된 경우도 있습니다(테마 활성화 시 동작).
플러그인 형태라는 건 어떤 테마에도 설치를 해서 이용할 수 있다는 겁니다. 워드프레스 기본 편집 화면으로 visual, html 편집으로만(css는 따로 추가) 화면을 만드는 게 어렵다면 페이지 빌더를 설치를 해서 이용을 할 수 있습니다.
예를 들어, 워드프레스 기본 테마인 twenty-twenty의 페이지 편집 방식의 보완을 위해 'WPBakery Page Builder'라는 플러그인을 설치해 보겠습니다. 그러면 페이지에 넣을 수 있는 여러 화면 요소들을 마우스 클릭만으로 추가도 할 수 있고, 원하면 복사, 자리 이동도 마우스로 가능해집니다.
( 간단하게 이미지들을 두 개의 칼럼으로 나눠서 페이지에 추가를 해 봤습니다. )빌더에 따라 프런트 앤드에서 화면을 보면서 편집할 수 있는 기능도 제공합니다.
원리는 이렇습니다.
비주얼적인 화면으로 어떤 요소들을 마우스 클릭으로 넣고 빼고 하는 것이지만 편집된 내용을 워드프레스의 기본 편집기인 Classic Editor 화면으로 전환해서 보면 여러 쇼트 코드들의 조합으로 구성된 것을 볼 수 있습니다. 즉 화면을 마우스 클릭으로 구성을 하지만 내부에서는 이러한 쇼트 코드들의 집합으로 페이지가 편집이 되는 것입니다.
이 쇼트 코드들은 페이지가 브라우저를 통해 열릴 때 플러그인에 의해 해석이 되어서, 쇼트 코드가 html 태그로 변경이 되는 과정을 거치게 되고, 최종적으로는 방문자는 html, css, js의 조합을 보게 됩니다.
한 가지 이 twenty-twenty 테마 개발자는 페이지 빌더를 사용하는 것을 염두에 두지 않았기 때문에 콘텐츠가 표시되는 영역을 좁게 스타일 정의를 했고, 그래서 빌더로 편집을 해도 좁은 상태로 표시되는 것을 볼 수 있습니다. 지난번 테마를 만들면서 잠시 언급한 워드프레스의 기본 루프에서 이 페이지 빌더는 기본적으로는 워드프레스의 편집을 쉽게 만드는 것이기 때문에 the_content()로 불러와지는 이 편집 내용만 관여를 하기 때문입니다. 페이지 빌더는 플러그인이고 이걸 내가 사용하는 테마에도 설치해서 쓸 수 있지만, 뭔가 스타일 조정이나 경우의 수에 대한 조치는 필요하구나 라는 걸 알 수 있습니다.
유료 테마의 역할
대개 유료 테마는 페이지 편집을 위한 페이지 빌더를 기반으로 하고, 더하여 플러그인의 기능을 그대로 쓰기보다는 여기에 추가 화면 요소들을 개발해 넣고 이에 대한 스타일 정의나 동작에 필요한 스크립트까지 추가를 해 놓은 형태입니다.
이는 페이지 빌더 플러그인들이 추가 개발을 더 할 수 있는 방법들을 제시해 주고 있어서 가능합니다.
- WPBakery Developers “How To’s”
즉, 지난번 퍼블리싱(html+css+js)이 완료된 화면 요소를 테마 형태로 전환을 했듯이 테마 개발자들이 자주 쓸 레이아웃들을 미리 페이지 빌더의 한 요소로 개발을 해 놓은 것이죠. 여러 경우의 수가 있으니 편집 시 바꿀 수 있는 옵션들도 추가를 하고요.
그래서 테마마다 페이지 빌더를 이용해 보면, 추가된 화면 요소들이 다 제각각 다른 걸 볼 수 있습니다. 개발자가 다르니 같을 수가 없습니다. (기본 페이지 빌더 요소 + 테마에서 개발해 놓은 요소)
추가된 요소도 다르지만 각 편집 화면도 테마마다 차이가 있습니다. 이미지를 하나 넣더라도 편집 화면은 테마에 따라 어떻게 개발을 해 놓았는지에 따라 다르게 됩니다.
이러하니 이런 디자인의 사이트를 만들 땐 이 테마, 저런 디자인의 사이트를 만들 땐 저 테마. 저도 초기에는 이렇게 여러 테마를 알아 두고 활용을 하는 게 노하우라면 노하우겠고 나름 경험이 쌓인다 생각할 때도 있었습니다.
※ 엘리멘토(Elementor)의 경우 짧은 경험이지만 소개를 해 보면 이렇습니다.
Elementor는 무료 플러그인이고, 웹의 기본적인 화면 요소들(이미지와 텍스트의 조합) 외에 콘텐츠를 불러와서 표시하거나 하는 경우에는 Elementor Pro를 설치해야 합니다. 슬라이더나 개발이 더 들어가야 하는 요소들은 애드온 형태로 추가 설치를 하면 편집 화면에 요소들이 더 추가됩니다. 화면을 보면서 편집을 하는 방식만 제공됩니다. 자주 사용되는 레이아웃은 조각조각 불러와서 사용할 수 있는 기능도 제공을 합니다.
여기까지, 페이지 빌더와 테마의 차이, 그리고 연관 관계가 조금이나마 이해가 되시나요? 최근에는 워드프레스 기본 에디터인 Gutenberg 빌더용 요소로도 제작된 테마들도 나오는 듯 하지만 대부분은 유명한 페이지 빌더 또는 자체 빌더를 기반으로 많은 사용자들이 쓸 수 있게 미리 제작을 해 놓은 게 유료 테마들입니다.
어드민 내에서의 운영 방식도 매우 중요함에도 대부분 테마 구매 사이트에서는 외부 모습만 보고(데모 소개들) 선택을 하는 경우가 많습니다. 구매 전에는 사실 어드민 환경을 볼 기회가 거의 없으니까요. 현재 테마 쇼핑몰(themeforest)의 상위권 테마들 중에는 워드프레스의 초기부터 역사를 같이 해 온 테마들도 많아서 다소 복잡한 편집이나 무수히 많은 옵션들로 사이트의 모습을 바꾸는 경우도 꽤 있습니다. 판매수나 순위만으로 선택을 하면 안 되는 이유이기도 합니다.
제가 이 전 두 글로 일반 웹사이트와 워드프레스 사이트의 차이를 소개한 내용을 보면, 결국은 방문자는 html, css, js의 조합으로 화면을 보게 됩니다. 페이지 빌더가 무엇이던, 어떤 테마를 쓰던 결국은 화면을 방문자에게 보여주기 위한 도구일 뿐입니다. 무얼 쓰던 디자인대로 만들어 낼 수 있다면 제작자에게는 그게 최고의 툴이 되는 것이겠지요. Elementor가 최고네, Divi가 최고네, WPBakery는 어떻네 이런 얘기들이 종종 보이지만 저는 이건 그냥 연장 비교하는 것으로 밖에 보이질 않더라고요.
한 가지 꼭 체크해 봐야 할 거라면 페이지 빌더는 차후 운영자를 위한 툴이기도 해야 한다는 생각입니다. 제작자만 익숙하다고 해서 복잡한 것을 쓰면 일반 웹 개발 방식과 다를 게 없을 수도 있습니다. 그래서 경험을 통해 선택한 방식은 제 경우는 Impreza 테마 활용이 되겠고요.
만약 내가 한 번 직접 워드프레스 웹사이트를 만들어서 운영을 하겠다 생각하신 경우라면, 우선은 내 콘텐츠가 얼마나 되는지, 표시할 자료나 사진들은 어느 정도인지 잘 체크해 보신 다음(기획을 직접), 이 정도의 것을 제대로 표시할 테마는 무엇일까(디자인 대체) 검색 및 찾아봐서 대략 90% 이상 부합하는 게 있다면 구매 및 설치해서 그대로 쓰겠다는 생각으로 구매를 해서 쓰시는 게 맞습니다. 이때 가급적 다목적 테마(무지 많은 세팅값이 들어 있는) 보다는 심플하고 목적에 맞는 테마를 쓰실 것을 추천드립니다. 테마부터 사고 내 콘텐츠를 정리하고, 화면 보면서 편집해 보겠다고 하는 순간 거의 99%는 포기합니다. 테마를 잘못 만나서 워드프레스가 불편하고 안 좋다고 오해하는 상황이 발생할 수도 있습니다. 워드프레스는 테마를 통해 콘텐츠를 불러다 보여줄 수 있는 CMS 환경만 제공을 한 것인데도요...
- 끝.
