Twenty Twenty 테마 100% 활용하기

Twenty Twenty 테마는 최근 업데이트된 워드프레스 5.3 버전에서 기본 테마로 새로 추가된 테마입니다. 알다시피 워드프레스는 해마다 하나의 기본 테마를 만들어 출시하고 있는데요. 이번에 새로 추가된 Twenty Twenty 테마는 구텐베르크 블록 에디터 탄생 1주년에 맞춰 출시된 만큼 그 의미와 성격이 조금 더 색다르다 할 것입니다.

오늘은 이 Twenty Twenty 테마의 주요 특징과 기능들에 대해 알아보겠습니다.

우선, Twenty Twenty 테마는 지금까지 워드프레스 기본 테마 제작 방식과는 달리 기존에 있던 테마를 기반으로 제작된 테마입니다. 이번 5.3 버전 판올림에서 테마 디자인 리드를 맡은 Anders Norén이 그가 제작했던 Chaplin이란 테마를 기반으로 만든 테마죠.

Chaplin이 블록 에디터 기반으로 제작된 테마이니 Twenty Twenty 테마 역시 블록 에디터를 기본으로 지원하는 건 당연할테구요. 특별히 유연성(flexibility)을 염두에 두고 설계되었다 하네요.

Twenty Twenty is designed with flexibility at its core. If you want to use it for an organization or a business, you can combine columns, groups, and media with wide and full alignments to create dynamic layouts to show off your services or products. If you want to use it for a traditional blog, the centered content column makes it perfect for that as well. — Anders Norén

여기에 Rasmus Andersson이 제작한 오픈소스 폰트인 Inter를 적용하여 좀더 가독성을 높였습니다. 이 폰트는 특히 헤더 영역에서 큰 글자를 부각시키려고 할 때 높은 강조 효과를 나타낸다고 하는군요.

이런 외양적인 특징들도 좋지만, Twenty Twenty 테마가 특히 돋보이는 부분은, 제 생각엔 아마도, 구텐베르크 블록 에디터를 완전히 지원한다는 데 있는 것 같습니다.

위지윅(WYSIWYG) 콘텐츠 편집

예를 들어, 블록 편집기를 열어 새 글을 작성할 때 편집기의 배경 색상이 테마의 기본 배경 색상에 맞춰져 있습니다. 테마 옵션에서 배경 색상을 조정하면 이에 맞춰 편집기의 배경 색상도 변경되어 좀더 위지윅(WYSIWYG) 방식에 가깝게 콘텐츠를 편집할 수 있습니다.

배경 뿐 아니라 개별 블록들도 테마의 속성을 따라 전개됩니다. 예를 들어, “그룹” 블록 내에 “미디어 및 텍스트” 블록을 추가하고 “그룹” 블록의 폭을 전체 폭(full-width)로 줄 경우, 블록 에디터 상에서도 이 레이아웃이 그대로 반영되는 식입니다.

이미지를 전체폭으로 사용하는 경우도 마찬가지구요.

다른 페이지 빌더(Page Builder)의 도움 없이도 유연한 콘텐츠 구성이 가능해 졌고, 블록 편집기 내에서 바로 보고 바로 편집하는 방식으로 콘텐츠를 만드는 것도 훨씬 쉬워 졌습니다.

Cover Template

Twenty Twenty 테마에는 기본 템플릿 외에 디폴트로 다음 2개의 템플릿이 추가로 제공됩니다.

• Cover Template
• Full Width Template

이 중 Full Width Template은 제목 그대로 전체폭 페이지를 만들 때 사용할 수 있는 템플릿이며, Cover Template은 커버 이미지가 있는 페이지를 만들 때 사용하는 템플릿입니다.

“테마 디자인 > 사용자 정의하기” 메뉴에서는 이 “Cover Template”에 대한 다양한 설정 옵션을 지원합니다. 오버레이(overlay) 배경 색상이나 오버레이 텍스트 색상, 불투명도를 조정할 수 있으며 커버 이미지를 고정시켜 패럴렉스(parallax) 효과를 줄 건지도 선택할 수 있습니다.

다양한 메뉴 지원

Twenty Twenty는 다음 5가지 메뉴 위치를 지원합니다.

• Desktop Horizontal Menu
• Desktop Expanded Menu
• Mobile Menu
• Footer Menu
• Social Menu

데스크톱(desktop) 모드의 메뉴와 모바일(mobile) 메뉴를 분리시켜 적용할 수 있을 뿐만 아니라 같은 데스크톱 모드에서도 기본 메뉴(horizontal menu)와 확장 메뉴(expanded menu) 중 하나(또는 둘 모두)를 선택해서 사용할 수 있습니다.

아래는 Desktop Horizontal Menu 이며,

아래는 같은 메뉴 구조를 Desktop Expanded Menu로 표시한 것입니다.

차이가 느껴지나요?

여기서는 Twenty Twenty의 여러 특징들 중 제 개인적으로 가장 인상깊고 또 특이하다고 생각되는 기능 몇 가지를 골라 소개했습니다.

물론 Twenty Twenty 테마에는 이 밖에도 참신하고 웹사이트 디자인에 도움이 되는 좋은 기능들이 깨알같이 녹아 있습니다. 그러니 지금 당장 Twenty Twenty 테마를 내 사이트에 적용하지 않더라도 시간을 내어 한번 살펴보면 워드프레스 테마 디자인의 흐름이 어떤 식으로 변하고 있고 또 블록 에디터가 워드프레스 콘텐츠 제작에 어떻게 도움을 줄 수 있는지를 확인해 볼 수 있을 듯 합니다.

그러고 보니 어느덧 2020년이네요. 2019년 한해 동안 WordPress 가이드를 좋아해 주시고 관심가져 주신 분들께 감사드리며 2020년 새해에도 좀더 좋은 내용으로 여러분들과 함께 할 것을 약속드립니다.

새해 복 많이 받으세요! 🙂