해당 글이 기반하고 있는 홈페이지(https://fse62.sitebuilder.kr)를 따라 만들며 워드프레스를 배울 수 있는 무료 강의와 무료 호스팅을 제공하고 있습니다. 관심 있는 분들의 많은 이용 바랍니다.

FSE 편집기

워드프레스 6.0에 공개된 FSE 에디터가 6.2가 되면서 “베타” 딱지를 벗었습니다. 6.2 정식버전 아닌 베타 테스트 버전으로 이번 제작과 리뷰를 진행했기 때문에, 중간 중간 몇 가지 문제들을 겪었지만, 시간이 해결해 줄 만한 경미한 문제였던 것 같습니다.

이번 후기와 리뷰에서는 이 전 6.0 리뷰에서 다루었던 FSE를 왜 사용해야하는가에 대한 대답으로 장점을 나열하는 것은 제외하겠습니다. FSE를 배우고 사용해야하는 이유는 짧게 말씀드리면: (1) 아무리 안 좋다고 불평해 봐야 플랫폼이 밀고 있는 방향을 거스를 수 없다. 따라가자. (2) 가볍고 빠르다. (3) 업데이트시 타 빌더들 처럼 충돌이나 오류 걱정할 일이 없다 입니다. 본 글에서는 6.2 편집기의 기본적인 사용법을 알려드리면서, 개선된 점, 그리고 여전히 부족한 점, 그리고 제작시 유의해야할 사항들에 대해 나누도록 하겠습니다.

편집기 구성

편집기에 진입하면 위 그림과 같이 우측에 미리보기 화면과 좌측에 “템플릿”과 “템플릿 파트”라는 두개의 메뉴를 확인할 수 있습니다.

템플릿은 워드프레스 홈페이지의 다양한 화면을 보여주는데 사용됩니다. 설정 > 읽기 > 홈페이지 표시 > 정적인 페이지 설정을 한 경우 “홈”이 우리가 생각하는 “홈”이 아니라 “글” 메뉴에서 작성한 글들의 모음을 보여주는 템플릿이라는 것을 잊지 마세요. (필자도 알고도 또 당함. 맨날 당함)

우리가 생각하는 “홈”을 위해서는 + 버튼을 눌러 “프론트 페이지” 템플릿을 만들고 수정해 주어야 합니다. 이외에도 추가할 수 있는 여러 추가 템플릿이 존재합니다. 프론트 페이지 외에 추가 템플릿들은 부수적인 템플릿으로 없을 경우 이미 추가되어 있는 “보관함” 템플릿으로 동일하게 렌더링 됩니다.

템플릿 파트는 템플릿의 하위 개념으로 자주 사용되는 파트들을 미리 만들어 여러 템플릿에서 재사용할 수 있게 해줍니다. 그렇기 때문에 이 템플릿 파트는 한 곳에서 수정하면 사용된 모든 곳에서 동일하게 수정이 됩니다. 물론 연결을 해제하여 독립적으로 수정되게 할 수도 있습니다.

템플릿을 선택해 진입하면 간단한 설명이 있고, 연필 아이콘을 클릭해 편집기 내부로 진입하게 됩니다.

편집기 내부는 크게 3열로 구성됩니다. 왼쪽에 목록 보기, 중앙에 프리뷰, 오른쪽에 설정 패널 입니다. 좌측 상단에 위치한 목록 보기 아이콘을 클릭해 네비게이션을 열어 놓고 작업하시면 훨씬 수월합니다. 프리뷰에서 블락들을 선택했을 때 정확히 선택이 안될 때가 많기 때문에, 좌측 목록 보기를 이용하셔야 할 때가 많습니다.

글로벌 스타일

우측 패널에 대해 살펴 보겠습니다. 우측 패널은 크게 두 가지 기능을 가지고 있습니다. 사이트 전체의 스타일을 컨트롤 하는 “글로벌 스타일” 패널과 현재 선택된 블락의 스타일을 컨트롤하는 “블록 스타일” 패널 입니다. 편집을 시작하기 앞서 글로벌 패널에서 스타일을 대략적으로 잡고 시작하는 것이 편집 시간을 절약하게 해주고, 사이트 전체의 스타일에 통일감을 유지하도록 도움이 될 것 같습니다.

******** “스타일 둘러보기” 안에서 기본으로 2023 테마가 제공하는 여러 기본 스타일이 있습니다. 테마를 수정하신 후로, 다른 스타일을 누르시고 “저장” 누르시면 지금까지 수정하신 것을 잃어버리게 되니 주의 바랍니다.

글로벌 스타일은 크게 서체, 색상, 레이아웃으로 세분되어 있고, 이번 6.2에서 스타일을 한 눈에 보며 편집하는 패널이 아래와 같이 새롭게 추가되었습니다.

상단 탭에 나열된 여러 종류의 스타일을 한 눈에 확인하면서 선택된 블락 종류에 대한 설정을 우측 패널에서 바로 할 수 있습니다. 좋은 기능 같습니다. 다음은 글로벌 스타일 세분 항목들입니다.

서체

텍스트에 관련된 글꼴, 색상, 크기 등을 이 곳에서 모두 정의할 수 있습니다.

색상

색상은 사이트를 만들 때 정말 중요한 부분 중에 하나일 것 같습니다. 팔레트 안에 들어가셔서 색상을 변경하시거나 추가해 사용할 수 있습니다. 한가지 아쉬운 점은 기본으로 설정된 “대비” 색상이 버튼 “호버(마우스를 올렸을 때)” 색상으로 사용되도록 기본설정이 되어있고, 코딩 없이 변경이 불가능하다는 점 입니다. 위 사진에서 팔레트의 2번째 색이 대비 색상 입니다. 어쩔 수 없이 대비색을 버튼 호버색으로 설정할 수 밖에 없었습니다. 앞으로 개선되리라 생각됩니다.

레이아웃

홈페이지를 제작할 때 고민되는 것 중 하나는 얼마나 넓게 화면을 사용할까 입니다. 넓으면 표시할 공간이 많아져 좋지만, 고개를 많이 돌려야 보고 읽을 수 있기 때문에, 컨텐츠 전달에는 썩 좋지가 않습니다. 그렇기 때문에, 사진 위주의 페이지는 전체 화면을 다 쓰고, 일반 페이지는 1200px, 글을 전달하는 블로그는 600-700px정도 폭을 사용 합니다. 위의 650, 1200px은 말씀드린 두 가지 폭의 값을 정하는 설정 입니다. 저는 기본값을 그대로 사용했습니다.

“패딩”은 블락의 내부 여백이고, “블록 간격”은 블락과 블락 사이의 공간의 기본값을 설정합니다.

반지름

이전 글에서도 언급했지만, 반지름은 네 모서리의 둥근 정도를 조절하는 border-radius 값을 의미합니다. 번역이 아직 그대로네요.

블락 스타일

블록 메뉴 안에는 사용가능한 블록들이 나열되어 있어서 각 블록에 대한 스타일을 미리 지정하고 사용할 수 있습니다.

추가 CSS

FSE가 출시되기 전에는 추가 CSS를 커스터마이저 안에서 작성할 수 있었습니다. 6.2 업데이트에서 Global CSS뿐 아니라 블록마다 개별적으로 CSS를 추가할 수 있어 편리해졌습니다.

.wp-site-blocks {
  padding-top: 0;
  padding-bottom: 0;
}

블록과 블록 사이에 기본 패딩(안쪽 여백)이 있습니다. 제가 글로벌 스타일에서 찾지 못한 것인지는 모르겠지만, 찾을 수 없어 코드를 사용했습니다. 블록과 블록 상하단에 흰색의 라인이 거슬리시는 분들은 추가CSS에 위의 CSS 코드를 넣으시면 됩니다.

레이아웃

이제 블록 설정으로 넘어가서 가장먼저 레이아웃에 대해 살펴보겠습니다. FSE에서 레이아웃만 잘 이해하고 사용하셔도 절반은 성공 입니다. 반대로 말하면, 이해하지 못하면 절반은 실패 입니다. 불편하기도 하고 로직을 이해하기도 어렵지만, 처음 파워포인트를 배웠을 때처럼 인내하며 배워 봅시다 (사실 오래되서 기억도 안남). 저도 아직 best practice가 무엇일지 고민중입니다만, 만들며 쌓은 경험치를 나누어 보겠습니다.

세로배열

일단 블록을 처음 다루니, 블록을 추가하는 법을 몇 가지 표시해 봤습니다. 네 가지 방법 참고하셔서 상황에 따라 추가하시면 되겠습니다.

그룹, 행, 세로배열은 상호간에 가변 가능합니다. 어차피 코드에서는 같은 <div> 태그이기 때문에 스타일만 변경된다고 생각하시면 됩니다. 일단은 헤더와 비디오가 백그라운드로 플레이되는 커버를세로로 배치할 것이기 때문에 “세로 배열”을 사용했습니다. 그리고 레이아웃 옵션에서 양쪽으로 늘려서 맞추는 옵션을 사용했습니다. “세로 배열 + 양쪽 맞춤” 조합을 전체 넓이로 블록들을 세로로 쌓을 때 사용하시면 되겠습니다.

레이아웃 스타일 탭에 보시면 크기 항목 아래 “패딩”과 “블록 간격”이 있습니다. 블록들을 가까이 붙이고 싶은데, 원하는대로 조절이 잘 안될 때가 있습니다. 의도치 않은 여백이 보일 때가 있구요. 그럴 때는 이 부분을 살펴 보세요. 저 슬라이더 값이 왼쪽에 있다고 “0” 이 아니라 기본값 입니다. 없애고 싶으실 때는 클릭하셔서 옵션 옆에 “0”이라는 표시가 나오게끔 해 주셔야 합니다.

그룹

저의 케이스를 통해 그룹 블록을 설명해 보겠습니다. 전 상단에 헤더가 필요했고, 헤더는 1200px 넓이 이상으로 넓어지지 않기를 원했습니다. 앞서 사용한 “세로 배열”에 헤더를 넣으면 좌우로 끝까지 늘어나게 됩니다. 이런 상황에서 필요한 것이 “그룹” 블록 입니다. 그룹 블록을 삽입하면 사진 우측에서 볼 수 있듯이, “내부 블록은 콘텐츠 폭을 사용합니다” 라는 체크아웃 인풋이 있습니다. 이 옵션을 선택하면 이 그룹 블록 하위에 있는 블록을 클릭했을 때 앞서 “글로벌 스타일 -> 레이아웃”에서 설정한 “좁은 폭,” 넓은 폭,” 그리고 “전체 폭” 옵션을 선택할 수 있는 아이콘이 생깁니다. 결론적으로, 폭을 선택하고 싶으시면 상위에 그룹 블록을 넣으시면 됩니다.

행

행 또한 저의 케이스로 설명드리자면, 헤더 안에 사이트의 로고와 이름을 가로로 나란히 배치하기 위해 “행” 블록을 사용했습니다. 이 행이 좌측 정렬하도록 “양쪽 맞춤” 옵션에서 좌측을 선택했습니다. “여러 줄로 줄 바꿈 허용” 옵션은 해당 행에 허용된 넓이가 좁고 포함된 하위 블록들이 많을 때 다음 줄로 자동으로 내려가게 할지를 결정하는 옵션 입니다. 저의 경우 체크를 뺏어야 하는데 중앙에 남은 공간이 넓어서 상관은 없을 듯 합니다. “세로 배열”에도 이 옵션이 보이는데, 어차피 세로배열이니 의미가 없습니다.

헤더를 가지고 설명한김에 네이게이션(메뉴) 블록에 대해 설명드리겠습니다. 지금까지는 워드프레스 메뉴는 외모 -> 메뉴에서 설정해왔었습니다. 편집기가 생기면서 바로 메뉴를 생성할 수 있게되었는데요, 표시해드린 + 버튼을 통해 존재하는 페이지를 메뉴에 바로 추가할 수 있습니다. 또한, 모바일 메뉴에 대한 설정을 많은 옵션이 있지는 않지만 블록 안에서 할 수 있습니다.

컬럼

컬럼 블록은 열을 균등히 나누고자 할 때 사용 합니다. 우측 설정에서 몇 열로 나눌지를 변경할 수 있습니다. “모바일에서 수직 배열” 체크박스를 체크하시면 폭이 좁은 모바일환경에서 아래와 같이 자동으로 세로 배열되도록 설정할 수 있습니다.

컬럼 내부의 패딩, 마진, 컬럼 간의 간격은 “크기”에서 조절할 수 있습니다. 컬럼 블록 스타일 설정에서 상 하단에 기본으로 설정되어 있는 여백에 신경 쓰시고, 컬럼 내부 간격을 조절하는 옵션을 원하시는대로 적절히 사용하시면 되겠습니다.

상기에 나열한 레이아웃을 이해하시고 사용하시면 기본적으로 FSE를 이용해 홈페이지를 만드시는데 큰 어려움은 없으실 것으로 생각 됩니다. 직접 해보시면서 익숙해지시면 어렵지 않으실 겁니다.

한가지 팁을 드리자면 컬럼으로 작성한 아래 블록에서 파란 테두리값과 둥근 모서리값(반지름)을 주려고 했으나 컬럼에는 반지름 설정이 없었습니다. 그래서 테두리 안에 그룹을 추가하고 반지름값을 주었습니다. 참고하세요.

크기

홈페이지를 디자인 하기 위해서 레이아웃으로 중요한 부분은 FSE가 “크기” 라고 부르는 부분 입니다. 각 블록들 마다 스타일 탭에 진입하면 하단에 “크기” 섹션이 있습니다. 이 섹션에서는 패딩(안쪽 여백), 마진(바깥 여백), 블록 여백(하위 블록들의 간격), 최소 높이(블록이 갖는 최소 높이)를 조절할 수 있습니다. 앞으로 “넓이”와 “최소 넓이” 옵션이 생겨서 조금 더 자율성이 생기기를 기대 합니다.

크기 설정의 가장 큰 문제는 설정이 너무 깊이 묻혀있다는 겁니다. 사실 크기 조절은 빈번히 하는 작업인데 이렇게 많이 찾아들어가야 하는 것은 해결해야할 문제 입니다.

패딩

이런 긴 스텝을 수 많은 블락들에 하고 있노라면 손목이 저려 옵니다. 최대한 글로벌 스타일을 활용하셔서 이런 작업을 줄여 가시는게 좋겠습니다. 마진도 동일하게 많은 작업을 요구 합니다.

최소높이

최소높이는 작은 블록이 많은 세로 공간을 차지하도록 조절해 사용할 수 있는데, 여의치 않으실 때는 “여백 도구”를 사용하셔서 빈 공간을 채우시는 것도 한 방법이 되겠습니다.

높이의 부재

언급했듯이 사용자가 원하는 “높이”를 정확히 지정할 수 없는 것이 어떤 상황에서는 상당히 답답하게 느껴질 때가 있습니다. 지금까지 부족한 점들이 점진적으로 채워진 것처럼, 더 나아질거라는 생각이 듭니다.

템플릿 파트 저장 및 재사용

템플릿 파트를 적극적으로 사용하는 것이 사이트의 규모가 커질수록 효과적일 것입니다. 헤더나 푸터는 모든 페이지들에게 같은 경우가 많고, 안내문이나, 폼 같은 것도 사이트 전반에 걸쳐 같은 경우가 많기 때문에 템플릿 파트로 만들어 놓고 여러군데 사용하고 한 곳에서 수정이 가능하도록 하는 것이 시간을 절약하는 방법이라고 생각이 듭니다. 템플릿 파트로 저장하는 법은 다음과 같습니다.

이렇게 저장한 파트는 다음과 같이 불러올 수 있습니다.

쿼리 반복문

마지막으로 블로그 기능을 사용하실 분들을 위해 “쿼리 반복문” 이라는 블록의 개념을 설명드리겠습니다. 각종 아카이브 템플릿에서 사용되는 쿼리 반복문은 원하는 조건에 부합하는 데이터들을 불러와서 (여기선 워드프레스 “글”에서 작성된 글들) 정의된 스타일대로 반복해서 보여주는 것을 의미합니다. 위 사진에서 우리는 “글 템플릿” 아래에 하위 블록들을 추가하고 그 블락들의 개별적인 스타일을 지정해 주었습니다. 그리고 그 지정된 스타일에 따라 불러온 데이터들이 프린트되게 했습니다. 예를 들어, 왼쪽 목록 보기 패널에서 “글 날짜” 블록을 지우면 블로그 아카이브에서 날짜가 안 보이게 되는 것입니다. (제가 설명을 알아들을 수 있게 했나 모르겠습니다).

컬럼 수는 쿼리 반복문 블록에서 설정 할 수 있고, 한 페이지에 총 몇 개의 글이 보일지는 워드프레스 관리자화면에서 설정 -> 읽기에서 지정하시면 됩니다.

결론

FSE는 분명 진화하고 있고, 전세계의 개발자들이 빠르지는 않지만 꾸준하게 개발해가고 있습니다. 하루 아침에 없어질 만큼 큰 적수들이 있는 것도 아니구요. 한국형 플랫폼들(카페24, 아임웹 등)이 갖는 미래에 대한 확실성과 생태계의 크기 차이는 워드프레스의 상대가 되지 못한다고 봅니다. 참여하는 개발자의 수가 다른 차원이니까요. 막상 지금은 한국화가 많이 되어 있지 않아 불편할지 모르지만 길게 가지고 갈 스킬 하나 얻는다는 생각이시라면 워드프레스에 투자하시는 것이 맞다고 봅니다. 긴 글 읽으시느라 수고하셨습니다! 아무쪼록 도움이 되었길 바랍니다!

아! 그리고, 사이트빌더의 워드프레스 호스팅도 무료로 체험해 보시고 많이 이용 부탁드리겠습니다 😉