워드프레스 구텐베르크 에디터 서식 사용하기 재활용 가능한 블록 사용법

대부분의 노트앱이나 에디터에서는 템플릿 기능을 활용해 자주 사용하는 서식이나 레이아웃을 저장하고 쉽게 재사용 할 수 있는데요.

기존 워드프레스^WordPress의 클래식 에디터에서는 기본적으로 템플릿 기능을 지원하지 않았지만 워드프레스 5.0 버전부터 적용된 구텐베르크 에디터^{Gutenberg Editor}에서는 특정 콘텐츠 블록을 저장하고, 다른 페이지나 게시물에서 다시 사용할 수 있는 재활용 가능한 블록^{Reusable Block}기능을 사용할 수 있어 일반적인 템플릿 기능과 유사하게 활용할 수 있습니다.

이 기능을 사용하면 특정한 형식이나 디자인의 콘텐츠 블록을 여러 곳에서 반복해서 사용할 수 있으므로, 작업 시간을 절약하고 일관된 디자인을 유지할 수 있는데요. 이렇게 워드프레스의 구텐베르크 블록 에디터에서 템플릿 기능을 사용하고 싶다면 다음에 안내하는 방식으로 재활용 가능한 블록을 활용해보세요.

아래 설명은 iboxcomein.com 에서 테스트 및 검증 후 작성 된 내용이지만 이것이 본문의 내용의 정확성이나 신뢰성에 대해 보증을 하는 것은 아니니 단순 하게 참고용으로 확인바랍니다.

튜토리얼 환경: 크롬, 워드프레스 6.2.2v

재활용 가능한 블록으로 등록하기

특정 블록을 다시 사용하기 위해서는 해당 블록을 재활용 가능한 블록으로 등록하는 과정이 필요합니다.

아무 블록에 템플릿처럼 사용할 텍스트 또는 블록을 생성 후 옵션 아이콘을 클릭해 컨텍스트 메뉴를 열고 재활용 가능한 블록 생성 을 선택합니다.

재활용 가능한 블록 생성이라고 표시된 대화상자가 팝업되는데 여기서 재활용 가능한 블록의 이름을 지정 후 저장버튼을 클릭하면 해당 블록이 재활용 가능한 블록에 정상적으로 등록됩니다. 다만, 아래 주의해야 할 사항에도 설명할 내용인데 작성한 이름은 추후 해당 블록을 찾을때 사용되기 때문에 직관적으로 정하는 것이 좋습니다.

재활용 가능한 블록 사용하기

위 방식으로 재활용 가능한 블록으로 등록 한 뒤 저장 된 재활용 가능한 블록을 활용하기 전 알아두면 좋을 내용과 기본적인 사용 방법에 대해서 알아봅니다.

재활용 가능한 블록 사용시 주의할 사항

재활용 가능한 블록은 그냥 사용해도 큰 문제가 되는 것은 아닙니다. 하지만, 재활용 가능한 블록을 사용할 때에는 몇 가지 주의해야 할 점이 있습니다. 재활용 가능한 블록으로 등록된 블록이 다른 페이지나 게시물에서 이미 사용 중인 경우, 이 블록을 수정하게 되면 다른 페이지나 게시물에도 영향을 미치게 된다는 것입니다.

이 부분은 다른 템플릿 방식과는 큰 차이가 있는 것으로 이해가 필요한데, 재활용 가능한 블록으로 저장된 블록은 블록 라이브러리에서 가져와서 사용하므로, 해당 블록을 수정하면 해당 블록이 적용된 페이지나 게시물의 모든 블록이 동시에 변경됩니다.
이런 불상사를 막기위해서는 재사용 가능 블록을 불러온 뒤 다르게 수정해야 한다면 일반 블록으로 변환해야 합니다.
이런 이유들로 재활용 가능한 블록을 사용하면 해당 블록이 어디서 가져온 것인지, 어떻게 사용되는 것인지 쉽게 파악할 수 없습니다. 따라서, 재활용 가능한 블록을 사용할 때에는 블록 이름과 설명을 명확하게 작성하여, 다른 사용자가 해당 블록을 쉽게 이해하고 사용할 수 있도록 하는 것이 좋습니다.

재활용 가능한 블록 삽입하기

재활용 가능한 블록에 저장 후 저장된 블록을 특정 포스트나 페이지에 다시 추가하고 싶다면 다음의 과정을 따릅니다.

참고: 기본적으로 워드프레스 구텐베르크 에디터의 재활용 가능한 블록은 템플릿과 결을 달리하는 기능이지만 본문에서는 재활용 가능한 블록을 템플릿처럼 사용하는 방식으로 안내합니다.

재활용 가능한 블록으로 등록 된 템플릿 블록을 삽입할 위치에 커서를 두고 상단의 블록 삽입기 토글 아이콘 을 클릭합니다.

재사용 또는 저장한 블록 이름으로 검색 시 결과에 등록한 블록이 표시 되는 것을 볼 수 있습니다.

또는 슬래시( / ) 를 입력 해 컨텍스트 메뉴를 열면 목록 상단에 재활용 가능한 블록 이름이 표시 되어 좀 더 빠르게 본문에 삽입할 수 있습니다.

위 과정으로 등록한 재활용 가능한 블록은 수정하면 해당 재활용 가능한 블록으로 삽입된 모든 영역에 동일하게 반영되기 때문에 꼭 옵션 컨텍스트 메뉴를 열고 일반 블록으로 전환^{Convert to regular blocks} 를 통해 등록 된 재활용 가능한 블록의 기본 폼이 변경되지 않도록 해 주어야 합니다.

재활용-가능한-블록으로-등록-된-블록-일반-블록으로-삽입-완료 — 재활용 가능한 블록으로 등록 된 블록 일반 블록으로 삽입 완료

저장해둔 블록이 정상적으로 일반적인 블록 형태로 삽입되었습니다.

재활용 가능한 블록 수정하기

재활용 가능한 블록을 수정하는 방식도 삽입하는 방식과 크게 다르지 않으므로 일반 블록으로 변환 후 수정 후 다시 등록하면 됩니다. 엄밀히 따지면 수정이 아닌 그냥 새로 만드는 것이라고 보면 됩니다.

다시-재활용-가능한-블록-생성-메뉴-클릭 — 다시 재활용 가능한 블록 생성 메뉴 클릭

일반 블록으로 삽입된 블록을 선택 후 다시 재활용 가능한 블록 생성 메뉴를 선택합니다.

재활용-가능한-블록-생성-이름-지정-후-저장 — 재활용 가능한 블록 생성 이름 지정 후 저장

재활용 가능한 블록 생성 창에서 다시 블록 이름을 작성 후 저장을 클릭합니다.

재활용 가능한 블록 관리 메뉴

위와 같은 방식으로 수정하는 것은 불편하고 기존 블록이 남아 다시 삭제를 해야 하니 권장하지 않습니다. 이 경우 재활용 가능한 블록 관리 메뉴를 이용하면 삭제 및 수정 등을 보다 효율적으로 진행할 수 있습니다. 개인적으로 이 방식으로 관리하는 것을 권장합니다.

재사용-가능한-블록-관리-메뉴-클릭 — 재사용 가능한 블록 관리 메뉴 클릭

수정하고자 하는 재활용 가능한 블록을 선택 후 옵션 컨텍스트 메뉴에서 재사용 가능한 블록 관리 를 클릭합니다.

대시보드의 재사용 가능 블록 페이지로 이동되는데 여기서 재활용 가능한 블록의 편집, 삭제를 진행할 수 있고 JSON 내보내기 옵션으로 백업 해 JSON에서 가져오기로 복원할 수도 있습니다.

FAQ

재활용 가능한 블록을 편집하면 원래 블록도 영향을 받나요

예, 재활용 가능한 블록을 편집하면 해당 블록을 사용한 모든 페이지나 게시물에 영향을 미칩니다. 전술한 주의할 사항에도 설명되어 있지만, 재활용 가능한 블록은 모든 곳에서 일관성 있는 디자인과 콘텐츠를 유지하기 위해 연결되어 있으므로 주의해서 수정해야 합니다.

페이지 빌더와 재활용 가능한 블록 사용의 차이점은 무엇인가요

페이지 빌더는 전체 페이지의 디자인과 레이아웃을 생성하는데 사용되며, 재활용 가능한 블록은 특정 섹션을 여러 페이지에 반복적으로 사용하는 데에 초점을 맞추고 있습니다. 페이지 빌더와 함께 사용하면 더 효율적이고 유연한 웹사이트 구축이 가능합니다.

재활용 가능한 블록에 동적인 데이터를 넣을 수 있나요

재활용 가능한 블록은 기본적으로 정적인 데이터를 저장하고 사용합니다. 하지만 추가 플러그인 또는 개발자의 도움을 받아 숏코드, 사용자 메타데이터 등 동적인 데이터를 넣을 수는 있습니다.

마치며

워드프레스의 구텐베르크 에디터에서 재활용 가능한 블록 기능이라는 일종의 템플릿¹ 사용법에 대해 알아보았습니다. 구텐베르크 에디터는 기존의 클래식 에디터와는 달리 블록^Block이라는 개념을 중심으로 구성되어 있으며 대중적으로 사용되는 노션^Notion의 형태와 유사하다고 할 수 있는데 개인적으로 블록 방식을 좋아해 편하게 사용하고 있는데요.

워드프레스에서의 템플릿 기능은 일반적인 서식 방식이 아니기 때문에 처음시작하는 사용자는 어렵다고 생각할 수 있는데요. 그래도 잠시 둘러보면 익숙하게 사용할 수 있으니 워드프레스에서 구텐베르크 블록 에디터를 메인 편집기로 사용하고 있다면 위 방식처럼 자주 사용하는 형태의 서식이나 블록이 존재하는 경우 위 안내한 과정에 따라 재사용 가능 블록에 등록 후 필요할 때 불러와서 사용해 보시길 바랍니다.