워드프레스 FSE(Full Site Editing)가 무엇인가요?

사용자 시각으로 FSE 쉽게 이해하기

이전 글에서는 1986년 8비트 컴퓨터 시절부터 컴퓨터를 다루기 시작해 학교전산화에 기여하고, 퇴직 후 워드프레스를 만나고, FSE를 접하면서 비로소 워드프레스의 전체적인 구조를 이해하게 된 저의 경험을 나눴습니다.

오늘은 도대체 ‘FSE(Full Site Editing, 전체 사이트 편집)’가 무엇이길래 오랜 시간 코딩과 웹사이트 제작을 혼자 해오던 제게 구세주처럼 느껴졌는지, 사용자 시각에서 쉽고 명확하게 설명해보려고 합니다.

1. 기존 워드프레스 편집 방식과 FSE의 차이

예전의 워드프레스는 역할이 철저히 나누어져 있었습니다.

본문 내용(글/페이지)은 클래식 에디터나 구텐베르크 블록 에디터나 로 작성하고, 헤더, 푸터, 사이드바, 레이아웃, 메뉴 등은 테마(Theme)의 설정에 따르거나, 커스터마이저, 위젯(Widget), 혹은 PHP 코딩이나 템플릿 파일의 수정이 필요했습니다.

즉, 본문 글은 내가 직접 쓸 수 있지만, 사이트 전체의 모양새나 틀(Header, Footer, Single Post Layout 등)을 바꾸려면 개발 지식이 있거나 테마가 제공하는 복잡한 옵션 메뉴를 헤매야 했습니다.

하지만 FSE(Full Site Editing)는 이름 그대로 “사이트의 모든 요소를 하나의 편집기(블록 에디터) 안에서 전부 만들고 수정할 수 있는 방식”을 말합니다.

2. FSE를 구성하는 4가지 핵심 개념 (사용자 관점)

개발자들의 매뉴얼을 보면 어렵고 복잡한 용어가 가득하지만, 실제로 사용해보면 핵심은 다음 3가지 개념입니다.

① 블록 (Block)

글자, 이미지, 버튼, 그룹, 열(Column) 등 웹페이지를 구성하는 최소 단위의 ‘조각’입니다. 마치 레고 블록을 쌓듯 내가 원하는 위치에 배치해 놓기만 하면 됩니다.

② 패턴 / 템플릿 파트 (Template Part)

헤더(Header), 푸터(Footer)처럼 사이트의 여러 페이지에서 공통으로 반복 사용되는 조각입니다. 예전에는 테마 코드를 고쳐야 했던 상단 메뉴나 하단 저작권 표시를, 이제는 FSE 편집기에서 블록 옮기듯 간편하게 디자인하고 수정할 수 있습니다.

③ 템플릿 (Template)

템플릿은 ‘개별 글’, ‘페이지’, ‘카테고리 목록’ 등이 화면에 어떻게 표시되게 할지 결정하는 틀입니다. 탬플릿은 화면의 맨위에 헤더, 중간에 컨텐츠, 맨아래 푸터를 보여지게 하는 것이 일반적입니다.

④ 쿼리 루프 (Query Loop)

쿼리 반복문(Query Loop)는 코딩 없이 데이터베이스에서 특정 조건에 맞는 글, 페이지, 또는 커스텀 포스트(상품, 포트폴리오 등)를 동적으로 불러와 반복 출력하는 블록입니다. ‘글 탬플릿’을 선택하여 보여주고자 하는 글, 페이지, 또는 커스텀 포스트 등의 컨텐츠를 화면에 보기좋게 배치 할 수 있고, 한화면에 출력할 양이 넘치면 페이지네이션을 자동으로 만들어줍니다.

FSE에서는 이 모든 것을 사용자가 코딩 한 줄 없이 블록 배치만으로 만들어낼 수 있습니다.

3. 사용자가 체감하는 FSE의 진짜 장점

4. 마치며 : 도구는 쓰는 사람의 창의력에 달려 있다

한국인이 가위를 음식 자르는 데 유용하게 쓰듯, FSE라는 도구 역시 홈페이지를 제작하는데 창의적으로 활용할 수 있습니다. 어려운 코딩을 배울 필요가 없습니다. 블록을 배치하는 것 자체가 코딩이라고 할 수 있습니다. 미국 MIT에서 개발한 세계에서 가장 유명한 어린이용 무료 블록 코딩 플랫폼 스크래치(Scratch)처럼 FSE는 워드프레스용 블록 코딩 스크래치라고 할 수 있습니다.

“헤더에 로고와 메뉴를 붙이고, 본문 영역을 만들고, 밑에 푸터 조각을 붙인다.”라는 직관적인 원리만 이해하면 누구나 나만의 멋진 홈페이지를 완성할 수 있습니다.

다음 글에서는 워드프레스를 설치후 초기 세팅하고, FSE를사용하기 위한 글로벌 준비세팅, FSE의 다양한 블록을 조합하여 글과 페이지를 만들고, 각종 템플릿을 만들어가는 실전 과정을 하나씩 쉽게 공유해 보겠습니다.