워드프레스 사이트 편집기(구텐베르크 에디터), 개발자가 활용하면 더 좋은 이유

개발자가 워드프레스 사이트 편집기를 활용해서 드래그 앤 드롭으로 사이트를 구축하는 것은 어떤 장점이 있을까요? 누구나 할 수 있는 것을 개발자가 하는 것은 어떤 의미가 있을까요?

오늘은 이에 대해 이야기해보려 합니다. (영상으로 보기)

블록을 쌓고 있는 모습
Photo by La-Rel Easter on Unsplash

3일만에 뚝딱

3일만에 뚝딱 일러스트 작가의 작품 전시 사이트를 하나 만들었습니다. 코드는 거의 쓰지 않았고요(CSS 몇 줄 사용했고, 카카오톡 오픈챗 버튼은 플러그인으로 만들었습니다).

워드프레스의 사이트 편집기를 이용했습니다. 기반 테마는 Twenty Twenty-Four 테마였는데요. 아래 두 이미지를 한 번 비교해 보세요. 앞의 것은 테마 기본 디자인이고, 뒤의 것은 이걸 제가 커스터마이징한 것입니다.

워드프레스 사이트 편집기를 사용하지 않고 코딩했으면 훨씬 오래 걸렸을 겁니다.

특히 갤러리 라이트박스와 문의 양식 작업같은 범용 기능은 구현하기 편했습니다. 드래그 앤 드롭으로 쭉쭉 만들었으니까요. 이메일 전송 서비스를 연동하는 것도 플러그인으로 처리했습니다.

관리 페이지야 워드프레스에선 이미 만들어져 있으니 말할 것도 없죠.

아래는 구현한 라이트박스 모습입니다.

사이트 성능 튜닝도 쉬운 편입니다. 캐시 플러그인(W3 Total Cache)을 설치하니까 거의 모든 것이 한 방에 됐습니다. 200ms쯤 걸리던 서버측 시간은 거의 20ms로 줄었습니다.

이미지 레이지 로딩처럼 간단한 것은 설치한 플러그인을 이용해 코드 없이 클릭 한 번으로 완료됐습니다. 반면 홈 화면에서 다운받는 용량은 드라마틱하게 줄었죠.

제작사 플러그인인 젯팩이 무료로 제공해 주는 보안 기능도 쓸만합니다.

사이트 백업도 쉽고, 도메인 마이그레이션도 그리 어렵지 않습니다. UpdraftPlus 같은 플러그인이 무료로 제공해 주는 기능입니다.

검색엔진에 알리는 것과 통계를 보는 것도 매우 편리합니다. 통계는 특히 관리자단에 통합하는 게 일반 코딩으로는 상당히 손이 가는데, 워드프레스에서는 플러그인으로 처리됩니다.

아래는 이 블로그의 대시보드인데요. 통계가 바로 나오고 있죠.

핵심 필요를 충족하는 사이트

워드프레스 사이트 편집기로 아주 고품질의 디테일한 세공이 들어간 사이트를 만드는 것은 비효율적입니다. 예컨대 Figma 같은 앱을 만드는 것은 부적절하죠. 뉴스 사이트도 규모가 커지고 복잡해지면 공수가 꽤 들어가 워드프레스를 사용하는 장점이 많이 상쇄될 겁니다.

그러나 핵심 필요를 충족하면서도 천편일률적인 사이트가 나오지 않게 할 수 있는다는 점이 중요합니다. 제가 만든 세 사이트는 모두 사이트 편집기를 이용했는데요. 같은 테마를 이용해 만들었다는 것을 눈치채기 쉽지 않습니다.

몇가지 예외를 빼면 사이트 수요의 대부분을 차지하는 중소 규모 개인·상업 사이트들은 워드프레스에 딱입니다.

워드프레스 테마 편집기로 구현한 또다른 사이트. 역시 Twenty Twenty-Four 테마입니다.

물론 타협은 필요할 것입니다. 중소규모 사이트라도 워드프레스에서 구현하기 까다로운 요구가 나올 수는 있거든요. 그런 것은 꼭 필요한 기능인지 가려서 협의를 잘 해야 할 겁니다. 구현이 불가능하지 않지만, 시간을 들 테니까요. 구현에 드는 시간을 고려해 비용을 제시하면 됩니다. 적절한 수준에서 협의할 수 있다면 클라이언트는 매우 싸게 원하는 사이트를 얻는 것이고, 개발자는 효율적으로(즉, 단가 높게) 일을 하게 되니 좋습니다.

핵심은 평균 이상의 품질을 가지고, 핵심 필요 충족하면서, 비용 대비 매우 효과적인 사이트를 만들 수 있다는 것입니다.

클라이언트에게 좋은 점

워드프레스 사이트 편집기는 당연히 클라이언트에게도 좋습니다. 클라이언트가 유지보수 비용 없이 사이트를 손볼 수 있기 때문입니다. 이 점은 중요한데요. 메인 페이지의 배너 하나 교체하는 데, 글자 몇 자 교체하는 데도 유지보수 비용을 들여야 하는 경우가 의외로 많기 때문입니다.

그러나 클라이언트가 이것을 직접 수정할 수 있게 된다면 여러 장점이 생깁니다. 신속하게 이슈에 대응해 웹사이트를 바꿀 수 있다는 점이 가장 중요하고요. 비용이 줄어든다는 점도 중요합니다.

이렇게 손쉽게 메인 화면의 텍스트를 수정할 수 있습니다

개발자가 유리한 점

도구가 손쉬운 만큼 이제 개발자가 필요없을까요? 아닙니다. 개발자는 디테일을 다듬을 수 있습니다. 고품질은 디테일에 좌우됩니다.

예컨대 프론트엔드 개발자는 부족한 것들을 CSS 코딩으로 간단히 해결할 수 있습니다. 예컨대, 아래는 이 블로그에 제가 넣은 추가 CSS중 일부입니다.

* {
  word-break: keep-all!important;
}

html {
  scroll-behavior: smooth;
}

우리 개발자 입장에서는 별거 아니지만 비개발자는 정말 하기 힘든 일입니다. 무슨 기능이 있는지조차 모르기 때문입니다.

PHP로 워드프레스로 개발을 할 줄 알면 더욱 유리합니다. 부족한 게 있을 때 테마에 코드를 추가하거나 플러그인을 만들어서 해결할 수 있기 때문입니다. 이건 비개발자에게 장벽이 매우 높은 부분이죠.

저는 카카오톡 오픈채팅 문의 플로팅 버튼이 필요해서 PHP 코딩으로 집어넣었습니다.

ChatGPT 활용이 효과적이라는 점도 장점입니다. 워드프레스는 정형화돼있고, 학습 자료도 많기 때문에 ChatGPT가 코드를 아주 잘 짜줍니다.

플러그인 남용을 막을 수 있다는 점도 개발자의 장점입니다. 꼭 필요하고 성능 이슈가 적은 플러그인과 그렇지 않은 플러그인을 개발자는 좀더 쉽게 가려낼 수 있습니다.

마지막으로 개발자는 더이상 워드프레스로 감당이 안 되는 시점도 가려낼 수 있습니다. 이건 정말 개발자가 아니라면 할 수 없는 판단입니다.

서버 세팅과 튜닝

서버 세팅을 하고 성능 튜닝을 하는 과정도 비개발자에게는 매우 힘든 일입니다. 워드프레스가 쉽다 해도 그걸 설치하고 잘 사용하는 것은 또다른 문제니까요.

개발자들은 개발자 도구를 이용해 성능 튜닝을 쉽게 할 수 있습니다

그러나 개발자들은 서버를 기본적으로 알고, 성능 튜닝도 할 수 있기 때문에 유리합니다.

결론

정리해서 말하면 워드프레스는 웹사이트를 만드는 효과적인 도구라는 점이고, 개발자들이 이 좋은 도구를 활용한다면 좋은 퍼포먼스를 낼 수 있다는 것입니다.

관련해 워드프레스 사이트 편집기를 익힐 수 있는 학습 자료를 두 개 추천해 드립니다.

누구나 할 수 있는 워드프레스 홈페이지 만들기 수업에서
기획부터 출시까지 홈페이지 제작의 모든 것을 한 방에 얻으실 수 있습니다

카테고리

대표글

댓글 남기기