Blocksy 테마 메인페이지

Blocksy 테마에서 메인 페이지 디자인하기

Blocksy 테마는 최근에 출시된 워드프레스 테마인데요. (아직은) 무료이면서 왠만한 프리미엄 테마급의 기능과 성능을 갖추고 있어 출시된지 얼마 되지 않았음에도 많은 인기를 끌고 있죠.

최근 출시되고 있는 많은 테마들이 그러하듯 Blocksy 역시 구텐베르크 블록 에디터를 전제로 만들어진 블록 기반의 테마입니다.

하지만 강력한 기능, 좋은 평가와는 다르게 처음 테마를 설치하고 메인 화면을 보면 다음과 같이 글 목록 박스만 달랑있는 횡한 화면이 나와서 당황하게 되는데요.

오늘은 이 Blocksy 테마를 기준으로, 새로 설치한 테마에 메인 페이지를 디자인해서 추가하는 방법을 소개하려 합니다.

사실 테마에서 메인 페이지 설치하는 방법은 일반적인 방법이라서, 굳이 Blocksy 테마 아니어도 어떤 테마에도 통용되는 방법이라. 다른 테마를 사용하시는 분들도 참고하시면 도움이 될 듯 합니다.

Getwid Blocks

우선 플러그인을 하나 설치하겠습니다. Getwid – Gutenberg Blocks 플러그인을 다운로드 받아 내 워드프레스에 설치합니다.

알다시피 워드프레스 블록 편집기에는 설치와 동시에 사용할 수 있는 기본 블록들이 제공되지만, 이들 블록만으로는 아무래도 복잡한 레이아웃이나 다양한 UI를 구현해 내기엔 한계가 있죠.

그래서 다양한 블록 라이브러리들이 나와 있고 Getwid도 그 중 하나입니다.

그 밖에 워드프레스 블록 편집기에서 사용 가능한 블록 플러그인들은 아래 페이지를 참조하시구요.

구텐베르크 블록 플러그인

메인 페이지 와이어프레임

먼저 우리가 만들 페이지를 한번 구성해 보겠습니다.

아래는 우리가 만들려는 메인페이지의 모양인데요. 대략 다음과 같은 모양의 페이지를 만들어 보려고 합니다.

전체 페이지는 각각 영역(section)들로 나눠져 있구요. 각각의 영역은 위로부터 헤더(Header) 영역, 히어로(Hero) 영역, 특징(Features) 영역, 평가(Testimonials) 영역, CTA 영역, 그리고 푸터(Footer) 영역이 맨 마지막에 오게끔 말이죠.

그냥 일반적인 제품 소개 사이트나 스타트업 홈페이지의 메인 화면 정도로 생각하면 되겠습니다.

메인 페이지 만들기

우선 페이지를 하나 만들어야 겠죠.

워드프레스 관리자 대시보드에서 “새 페이지” 만들기를 선택하여 페이지 편집기를 엽니다.

제목은 아무렇게나 줘도 상관 없지만 여기서는 그냥 “메인 페이지”로 주겠습니다.

템플릿 라이브러리

일단 헤더 영역과 푸터 영역은 Blocksy 테마에 맡기기로 하겠습니다. 헤더와 푸터 부분은 전체 사이트와 같은 디자인을 가져가는 게 좋기 때문에 굳이 페이지에서 이 부분까지 건드릴 필요는 잘 없으니까요.

우선 Hero 영역부터 시작하죠. Hero 영역은 사용자가 내 사이트에 방문했을 때 가장 처음 마주하게 되는 영역이자 내가 사용자에게 말하고 싶은 분명한 메시지를 담고 있는 영역입니다.

우선 페이지에서 블록 검색창을 열어 보세요. “Getwid Blocks” 메뉴가 보이나요?

이 Getwid Blocks 중 “Template Library”를 찾아 클릭하세요. (또는 편집기 우측 상단에 있는 “Template Library” 버튼을 클릭해도 됩니다)

템플릿 라이브러리는 우리가 페이지에 가져다 쓸 각종 템플릿들이 유형별로 나눠져 있기 때문에 쉽게 선택할 수 있습니다.

우리가 사용할 히어로(Here) 템플릿들입니다.

템플릿 라이브러리(Template Library)는 Getwid에서 미리 만들어 놓은 ‘템플릿’입니다. 그러니 이 템플릿을 그냥 내 페이지 속에 가져다 붙여 넣기만 하면 되죠.

그 중 아무거나 하나 골라 내 페이지 속에 넣어 보세요. 저는 “Hero-4” 템플릿을 한번 골라 봤습니다.

템플릿이 페이지 속에 들어 왔네요.

그럼 이제 이 템플릿을 내 니즈에 맞춰 수정해 주기만 하면 됩니다.

특히 Getwid 블록 중에는 “섹션(Section)” 이라는 블록이 있는데, 이 블록은 페이지를 섹션 단위로 나눠 레이아웃을 조정하고 배경(background)을 디자인하고 애니메이션 효과를 주는 등 다양한 작업을 쉽게 처리할 수 있도록 해주는 아주 유용한 블록입니다.

우리가 사용한 Getwid 템플릿 역시 이 섹션 블록 기반으로 되어 있기 때문에 블록 편집기에서 여백(padding) 값을 조정하거나 위치를 변경하는 등의 다양한 작업을 화면에서 직접 처리할 수 있기 때문에 매우 편리합니다.

Hero 영역이 완성되었네요!

이런 식으로 나머지 영역들도 Getwid 템플릿 라이브러리를 사용하면 간단하게 디자인할 수 있습니다.

물론 템플릿 라이브러리 없이 직접 Getwid 블록들을 사용해 처리할 수도 있습니다. 템플릿 라이브러리로 Getwid 블록에 어느 정도 익숙해 졌다거나 혹은 템플릿 라이브러리로는 구현하기 어려운 디자인이 필요한 경우라면 직접 Getwid 블록으로 만들어 쓰면 되겠죠.

나머지 영역들도 이런 식으로 디자인하면 됩니다.

템플릿 라이브러리에서 템플릿을 하나 선택하여 페이지로 가져온 다음, 내게 맞게 수정하는 작업은 동일하기 때문에 지면 관계상 설명은 생략합니다.

어쨌거나 이런 식으로 메인 페이지가 만들어 졌습니다.

나머지 작업들

앞서도 말했듯, 헤더와 푸터는 Blocksy 테마의 헤더와 푸터를 사용하기로 했기 때문에 여기서는 따로 구현하지 않았습니다.

페이지 제목 숨기기

페이지를 보면 아직 제목이 남아 있는 것을 알 수 있습니다. 메인 페이지에 제목이 보이는 것은 어딘지 좀 어색하니 제목은 숨기도록 합니다.

페이지에 제목을 숨기는 방법은 여러가지가 있지만, 여기서는 Blocksy 테마에서 사용하는 방법으로 처리합니다. (다른 테마를 사용하시는 분들은 각자의 테마에 맞는 방법을 쓰면 되겠습니다)

Blocksy 테마에서는 페이지 단위로 다양한 커스터마이징을 할 수 있는 방법들을 제공하는데요. 블록 편집기 메뉴에서 “플러그인 > Blocksy Page Settings” 메뉴로 들어가면 다음과 같이 페이지별로 설정을 할 수 있는 창이 우측에 펼쳐 집니다.

여기서 “Page Tiele”을 클릭하여 “Disabled”로 잡아 주면 되겠죠?

메인페이지 설정하기

이제 마지막으로 한 가지 작업만 남았죠? 바로 지금까지 우리가 만든 페이지를 실제 사이트의 메인 페이지로 지정해 주는 일입니다.

이건 간단하죠? 대시보드 “설정 > 읽기”로 메뉴로 가서 “정적인 페이지”의 “홈페이지” 부분을 방금 우리가 만든 “메인 페이지”로 잡아 주면 됩니다.

휴~ 다 왔습니다.

마무리는 생략할게요.

여기까지, 긴 글 읽어 주셔서 감사합니다. 🙂

0 thoughts on “Blocksy 테마에서 메인 페이지 디자인하기”