이 글은 일본어 원문을 현지화한 버전입니다. 일본어 원문 보기
Blocksy는 무료로 쓸 수 있는 다기능 WordPress 테마입니다. 설정의 대부분을 "외관(Appearance) → 사용자 정의(Customize)"(커스터마이저)에서 미리보기를 보며 할 수 있고, 헤더와 푸터는 드래그 앤 드롭으로 구성할 수 있습니다. 이 글에서는 테마와 보조 플러그인 "Blocksy Companion"의 설치, 처음에 정해 둘 색상과 글꼴, 헤더 만드는 법, 블로그 목록과 글 페이지의 표시 설정, 자식 테마 준비까지를 설정 순서에 따라 설명합니다.
Blocksy의 구성 파악하기
Blocksy는 다음 세 가지로 구성되어 있습니다.
- Blocksy(테마 본체): WordPress.org에서 무료로 받을 수 있다. 커스터마이저에서의 디자인 설정, 헤더·푸터 빌더를 갖추고 있다
- Blocksy Companion(무료 플러그인): 스타터 사이트(데모 데이터) 불러오기와 확장 기능 추가를 담당한다
- Blocksy Pro(유료): 추가 헤더 요소, 조건부 표시, 더 세밀한 레이아웃 기능 등이 더해진다
우선 테마 본체와 Companion의 조합으로 시작하고, 필요한 기능이 무료 범위로는 부족하다는 것을 알게 되었을 때 Pro를 검토하는 것이 순서입니다(기능 구분이나 가격은 바뀔 수 있으므로 2026년 10월 현재 공식 사이트의 정보로 확인하세요).
또한 Blocksy는 클래식 테마에 가까운 구조이며 블록 편집기에도 대응합니다. 사이트 편집기(Site Editor, "외관 → 편집기")로 전체를 구성하는 블록 테마와는 조작하는 곳이 다르므로, "전체 디자인은 커스터마이저, 글과 페이지의 내용은 블록 편집기"라고 기억해 두면 헷갈리지 않습니다.
설치와 Companion 설치하기
- "외관 → 테마(Themes) → 새로 추가(Add New)"에서 "Blocksy"를 검색해 설치하고 활성화한다
- 활성화한 뒤 표시되는 안내, 또는 관리자 화면에 추가되는 Blocksy 대시보드에서 Blocksy Companion을 설치·활성화한다
WP-CLI에서는 다음과 같이 설치할 수 있습니다.
wp theme install blocksy --activate
wp plugin install blocksy-companion --activate기존 사이트의 테마를 전환하는 경우에는 사전에 사이트 전체의 백업을 만들어 두세요. 테마를 바꾸면 이전 테마 고유의 숏코드나 위젯, 메뉴 표시 위치 등이 이어지지 않는 경우가 있습니다.
스타터 사이트를 사용할지 여부
Companion을 설치하면 Blocksy 대시보드에서 "스타터 사이트"를 불러올 수 있게 됩니다. 디자인이 완성된 페이지, 커스터마이저 설정, 필요한 플러그인이 한꺼번에 들어오므로 새 사이트에서는 완성된 모습을 빨리 파악할 수 있습니다.
다만 기존 글이 있는 사이트에서 불러오는 것은 피하는 편이 무난합니다. 데모용 페이지와 이미지, 메뉴가 추가되고 커스터마이저 설정도 덮어써지므로 어디까지가 원래 설정이었는지 알 수 없게 됩니다. 사용한다면 새 사이트의 초기 단계나 스테이징 환경에서 시험해 본 뒤 필요한 설정만 따라 하는 방법을 권합니다.
처음에 정해 둘 전체 설정
"외관 → 사용자 정의"를 열면 Blocksy의 설정 항목이 늘어서 있습니다. 항목 이름은 번역되어 있는 경우가 많지만 버전에 따라 표기가 바뀔 수 있습니다. 처음 손댈 것은 전체에 영향을 주는 다음 두 가지입니다.
색상(컬러 팔레트)
전체 설정 안에 있는 색상 설정에서 사이트에서 사용할 기본 색상 팔레트를 정합니다. Blocksy에서는 글자색, 링크 색, 버튼 색 등이 이 팔레트의 색을 참조하는 구조이므로, 팔레트를 바꾸면 사이트 전체의 배색이 한꺼번에 바뀝니다.
개별 위치에서 색을 직접 지정하면 나중에 배색을 바꾸고 싶을 때 하나씩 고쳐야 합니다. 기본은 팔레트로 정하고, 꼭 다른 색으로 하고 싶은 부분만 개별 지정하는 것이 관리하기 쉬운 방법입니다.
글꼴(타이포그래피)
타이포그래피 설정에서 본문과 제목의 글꼴, 글자 크기, 줄 간격을 정합니다. 일본어 사이트에서 주의할 점은, 로마자 글꼴을 선택해도 일본어 글자에는 적용되지 않는다는 것입니다. 일본어 부분은 열람자 기기의 글꼴로 표시되므로, 본문 글꼴은 "시스템 글꼴" 등 기본값 그대로 두거나 일본어를 지원하는 글꼴을 지정합니다.
웹 폰트로 일본어 글꼴을 불러오면 파일이 커서 표시 속도에 영향을 줄 수 있습니다. 사용한다면 굵기 종류를 줄이고, PageSpeed Insights 등으로 표시 속도에 미치는 영향을 확인하세요.
헤더 구성하기
커스터마이저의 헤더 항목을 열면 화면 하단에 헤더 빌더가 표시됩니다. 헤더는 상단·중단·하단 행으로 나뉘어 있으며, 로고(사이트 제목), 메뉴, 검색, 버튼 등의 요소를 각 행의 왼쪽·가운데·오른쪽으로 드래그하여 배치합니다.
헷갈리기 쉬운 점은 PC용과 스마트폰용 헤더가 따로 설정되어 있다는 것입니다. 빌더의 표시를 스마트폰으로 전환하면 다른 배치가 나타납니다. 스마트폰에서는 메뉴를 햄버거 아이콘(트리거)으로 여는 "오프캔버스" 안에 두는 구성이 기본입니다. PC용만 설정하고 공개하면 스마트폰에서 메뉴가 나오지 않는 일이 생기므로, 양쪽 표시에서 모두 확인합니다.
요소를 클릭하면 그 요소의 설정(글자 크기, 색상, 여백 등)이 왼쪽에 표시됩니다. 메뉴에 표시할 항목 자체는 "외관 → 메뉴(Menus)"에서 만들어 헤더의 메뉴 요소에 지정합니다.
푸터도 같은 방식의 푸터 빌더로 구성합니다. 위젯 영역이나 저작권 표기의 배치를 바꾸고 싶다면 푸터 항목에서 편집합니다.
블로그 목록과 글 페이지 표시
커스터마이저에는 글 목록(블로그), 개별 글, 페이지 등 페이지 종류별 설정 항목이 마련되어 있습니다.
- 글 목록: 카드형·리스트형 등의 배열 방식, 한 줄당 열 수, 대표 이미지(Featured image) 비율, 요약(Excerpt)의 길이, 표시할 글 정보(게시일·카테고리 등)
- 개별 글: 콘텐츠 영역의 너비, 사이드바의 유무와 위치, 제목 부분의 표시 방법, 관련 글과 저자 정보의 표시
- 페이지: 개별 글과 마찬가지로 너비와 사이드바의 유무를 설정
글 페이지의 가독성에 크게 영향을 주는 것은 본문의 가로 너비입니다. 일본어 장문은 한 줄이 너무 길면 읽기 어려워지므로, 사이드바를 붙이지 않을 때는 본문 너비를 좁게 설정하고 스마트폰에서도 글자가 너무 작아지지 않는지 확인합니다.
특정 글만 레이아웃을 바꾸고 싶다면, 글 편집 화면의 사이드바에 표시되는 Blocksy 설정에서 그 글만 사이드바를 없애는 등의 지정을 할 수 있습니다.
자식 테마 준비하기
테마 파일을 직접 편집하면 테마 업데이트로 변경 사항이 사라집니다. CSS를 조금 추가하는 정도라면 커스터마이저의 "추가 CSS"로 충분합니다. PHP 커스터마이징이나 템플릿 덮어쓰기가 필요해지면 자식 테마를 만듭니다.
Blocksy 공식 사이트에서는 자식 테마 템플릿이 배포되고 있습니다. 직접 만들 때는 wp-content/themes/blocksy-child/에 다음 style.css를 두고,
/*
Theme Name: Blocksy Child
Template: blocksy
*/같은 폴더의 functions.php에서 자식 테마의 스타일을 불러옵니다.
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'blocksy-child-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}, 20 );자식 테마로 전환하면 커스터마이저 설정이 부모 테마와는 별도로 저장되므로, 부모 테마에서 설정한 내용이 보이지 않게 될 수 있습니다. 커스터마이저 설정은 Companion을 설치했다면 내보내기·가져오기(Export·Import) 기능으로 옮길 수 있으므로, 자식 테마로 전환하기 전에 내보내 두면 다시 작업하는 수고를 막을 수 있습니다.
업데이트와 운영 시 주의점
Blocksy와 Companion은 자주 업데이트됩니다. 업데이트하기 전에는 백업을 만들고, 업데이트한 뒤에는 헤더, 글 페이지, 스마트폰 표시를 한 차례 확인합니다. 표시가 깨졌다면 캐시 계열 플러그인이나 CDN의 캐시를 삭제한 뒤 다시 확인하세요. CSS 결합·압축을 하는 속도 향상 플러그인을 사용 중이라면 오래된 CSS가 남아 깨져 보이는 경우가 있습니다.
정리
- Blocksy는 테마 본체와 Blocksy Companion의 조합으로 시작하고, 부족한 기능을 알게 된 뒤에 Pro를 검토한다
- 스타터 사이트는 새 사이트나 스테이징 환경에서 사용하고, 기존 사이트에서는 설정이 덮어써지는 점에 주의한다
- 색상은 컬러 팔레트, 글자는 타이포그래피로 전체를 정한다. 로마자 글꼴은 일본어에 적용되지 않는 점에 주의한다
- 헤더 빌더는 PC용과 스마트폰용이 따로 있다. 양쪽 표시에서 확인하고, PHP를 만진다면 자식 테마를 사용한다
WordPress에 대해 궁금한 점이 있으신가요? 이 사이트의 운영사는 일본에 있으며 일본어로 답변합니다. 문의하기(일본어)