워드프레스 6.0 블록 테마에서 전면 사이트 편집(FSE) 사용하기

최근에 새로 워드프레스를 설치해 보신 적 있나요?

최근 워드프레스가 버전 6.0으로 업그레이드되었죠. 그러면서 워드프레스의 기본 테마로 “Twenty Twenty-Two” 테마가 적용되었습니다.

Twenty Twenty-Two 테마

이 Twenty Twenty-Two 테마는 워드프레스 6.0 버전에서 새로 추가된 전면 사이트 편집(Full Site Editing, FSE) 기능을 사용할 수 있도록 제작된 블록 방식의 워드프레스 기본 테마죠.

얼핏 겉보기엔 기존의 워드프레스 테마들과 별반 다른 게 없는 것처럼 느껴질 지도 모릅니다. 하지만 기존에 워드프레스를 사용하던 사용자라면, 조금만 살펴보면 무언가 달라진 점이 있다는 것을 느끼셨을 텐데요.

뭐가 달라졌을까요?

테마 편집기

우선 워드프레스를 설치하면 나오는 관리자 대시보드의 메뉴가 약간 달라졌죠.

기존에 존재하던 “외모 > 사용자 정의하기”, “외모 > 위젯”, “외모 > 메뉴” 등의 메뉴는 온데간데 없고 대신 “외모 > 편집기” 메뉴 하나만 떡하니 버티고 있네요. 게다가 메뉴명 옆에는 “베타”라는 표시가 선명합니다.

“편집기” 메뉴를 한번 클릭해 보면 지금껏 워드프레스에서는 볼 수 없었던 화면이 하나 펼쳐 집니다. (물론 구텐베르크 플러그인을 통해 미리 이 기능을 경험해 보신 분들은 제외하구요)

이 화면이 바로 전면 사이트 편집을 할 수 있도록 만들어진 편집기 화면입니다.

얼핏 보기엔 기존에 워드프레스 글 편집기와 비슷한 사용자 UI를 갖고 있지만, 기존의 글 편집기의 편집 영역이 글(포스트)이나 페이지 같은 콘텐츠 내에 국한되었다면 이제는 콘텐츠 영역 밖, 그러니까 사이트의 헤더나 푸터, 그리고 네비게이션 메뉴나 사이드바 위젯 영역으로까지 블록 편집기의 적용 영역이 확대되었다고 할 수 있습니다.

이제 사용자들은 직접 헤더 영역과 푸터 영역을 포함한 사이트 전반에 대한 UI를 자신의 입맛에 맞게 변경할 수가 있죠.

사실 이 부분은 기존에는 워드프레스 테마 파일을 직접 수정해야만 가능한 일이었는데, 이제는 테마 파일을 건드릴 일 없이 바로 프론트 단에서 사용자가 직접 조작 가능하게 된 것입니다.

헤더 변경하기

테스트 삼아 한번 헤더 영역을 변경해 볼까요?

블록 편집기에서 헤더 영역을 선택하고 “교체” 링크를 클릭하면 다음과 같이 이 테마에서 선택 가능한 헤더들의 목록이 표시됩니다. (워드프레스에서는 이런 구성요소를 “템플릿 파트”라고 부릅니다)

아무거나 하나 마음에 드는 것으로 골라 교체해 보세요. 저는 “어두운 배경이 있는 큰 이미지”로 한번 변경해 보았습니다.

그런 다음 “저장”하거나 “미리보기”를 통해 사이트가 어떻게 변경되었는지 한번 확인해 보세요.

처음 워드프레스를 설치했을 때와는 다는 모양으로 사이트의 헤더가 변경된 것을 확인할 수 있을 것입니다.

이런 식으로 사용자가 직접 헤더나 푸터는 물론, 사이트 전체의 모든 영역을 블록 방식으로 변경할 수 있게끔 하는 것이 바로 워드프레스 6.0부터 도입된 전면 페이지 편집(FSE) 기능입니다.

템플릿 탐색하기

비단 헤더나 푸터 같은 일부 영역만 변경 가능한 것은 아닙니다. 블록 편집기 상단 중앙의 “홈” 메뉴를 클릭해 보면 다음과 같이 편집하고 싶은 “템플릿”을 선택할 수 있는 기능이 나오는데요.

여기서 “모든 템플릿 탐색하기”를 한번 클릭해 보세요. 그러면 아래와 같이 이 테마에서 편집 가능한 템플릿들이 표시됩니다.

앞서 우리는 “홈” 템플릿을 변경했는데요. (“홈” 템플릿은 사용자가 사이트에 처음 들어왔을 때 보게되는 메인 템플릿입니다) “홈” 템플릿 말고도 “단일 글” 템플릿, “페이지” 템플릿 등 사용자가 변경하고 싶은 템플릿을 지정하여 해당 템플릿의 UI를 변경할 수 있습니다.

예를 들어, 블로그 글을 보여주는 화면의 UI를 변경하려면 “단일 글” 템플릿을 선택하면 되겠죠.

그러면 아래와 같이 “단일 글” 템플릿이 표시되고 이번에도 역시 앞서와 동일한 블록 편집 방식으로 필요한 부분은 내 입맛에 맞게 직접 변경할 수가 있습니다.

만약 내가 원하는 템플릿이 없거나 또는 나만의 템플릿을 추가하고 싶은 경우에는 템플릿 탐색기에서 우측 상단에 있는 “새로 추가” 버튼을 클릭하여 새 템플릿을 직접 추가해 넣을 수도 있구요.

그림에서 보듯 “프론트 페이지” 템플릿, “글쓴이” 템플릿, “카테고리”나 “태그” 템플릿 등을 추가할 수가 있습니다.

여기서 “템플릿”은 기존에 워드프레스를 사용하신 분들이라면 익숙하게 들어 보셨을 바로 그 테마 속 템플릿(template) 과 같은 개념이라고 생각하시면 되겠습니다. (물론 기술적으로 내부적인 구현 방법은 다르지만, 이건 사용자가 굳이 신경쓸 부분은 아니구요)

“블록 테마”와 “고전 테마”

이런 식으로 블록 기반으로 사이트 편집을 지원하는 테마를 일컬어 워드프레스에서는 “블록 테마(Block Theme)”라고 부릅니다. 그리고 기존의 전통적 방식의 테마는 자연스레 고전 테마(Classic Theme)가 되었죠.

이제 워드프레스 테마는 “블록 테마”와 “고전 테마”로 나뉩니다. 물론 아직은 블록 테마 보다는 고전 테마가 월등히 많습니다. 그리고 블록 테마 중에 전면 사이트 편집 기능까지 갖춘 테마의 수는 훨씬 더 적구요.

워드프레스 테마 디렉터리에서 확인해 보니, 이 글을 쓰는 시점 현재 전면 사이트 편집이 가능한 블록 테마의 수는 106개로 잡히네요.

그 중 하나가 방금 소개한 워드프레스 기본 테마 중 하나인 Twenty Twenty-Two 테마이구요.

이제 어디로 가나요?

익숙한 것과의 결별은 늘 어렵습니다. 고전 테마의 사용법에 익숙하던 사용자라면 블록 방식의 테마, 특히 전면 사이트 편집 방식의 외모 편집 기능이 불편하고 마음에 들지 않을 수 있습니다.

여기서 두 가지 갈래 길이 생기죠. 적응하거나 아니면 가던 길을 계속 가거나. 워드프레스 5.0에 블록 편집이라는 기능이 도입되고서 꽤 많은 시간이 흘렀죠. 그리고 이제 많은 사용자들이 블록 편집기 방식에 어느 정도 익숙해 지기도 했구요.

그래서 워드프레스 6.0에서는 드디어 사이트 전체를 블록 방식으로 편집할 수 있는 기능을 과감하게 선보이게 된 거겠죠. “베타”라는 딱지까지 붙여 가면서요.

하지만 굳이 지금 당장 갈아탈 필요는 없습니다. 그럴 때는 조용히 “테마” 메뉴에 들어가서 테마를 변경하세요. 고전 테마 중 하나를 선택해 활성화시키면 됩니다.

당장 “Twenty Twenty-One” 테마로 변경만 해도 익숙한 “그때 그 방식”으로 메뉴들이 돌아온 것을 알 수 있을테니까요!