워드프레스 무료 테마 추천 및 상세설정 : 블록시(Blocksy) | 블로그 구축 #03

안녕하세요, 생산적 회계사(PROCPA) 입니다.

지난 글에서는 블로그의 기획부터 도메인, 호스팅, 로고까지 ‘뼈대’를 세우는 과정을 다뤘습니다. 내 집 마련으로 치면 땅을 사고 기초 공사까지 마친 셈입니다. 이제는 본격적으로 인테리어를 할 차례입니다. 워드프레스에서는 이 과정을 ‘테마(Theme)’ 설정이라고 부릅니다.

이번 글에서는 제가 선택한 ‘블록시(Blocksy)’ 테마를 중심으로, 블로그를 제 입맛에 맞게 꾸미는 과정을 상세히 공유해 드리겠습니다.

1. 4단계 : 테마 결정

1.1. 워드프레스 테마란?

워드프레스 테마는 사이트의 전체적인 디자인과 레이아웃을 결정하는 템플릿입니다.
여기에는 헤더와 푸터 뿐만 아니라 타이포그래피, 색상, 단일 페이지의 레이아웃 등 다양한 요소를 포함합니다.
또한 단순히 예쁜 스킨을 넘어서 사이트의 기능과 속도에도 큰 영향을 미칩니다.
일반적으로 가장 많이 사용되는 테마로는 Astro, Generatepress 등이 있습니다.

1.2. 블록시(Blocksy) 테마를 선택한 이유

수많은 무료/유료 테마를 비교해 본 결과, 저는 블록시(Blocksy) 테마를 선택했습니다. 그 이유는 다음과 같습니다.

1. 압도적인 속도: 워드프레스 테마 중 가장 가볍고 빠른 편입니다.
2. 강력한 무료 기능: 무료 버전임에도 불구하고 유료 테마에서나 볼 수 있는 수준의 자유도를 상당 부분 제공합니다. 현재 제 블로그도 Blocksy 무료버전으로 운영하고 있습니다.
3. 직관적인 설정: 코딩을 몰라도 드래그앤 드롭만으로 레이아웃의 헤더와 푸터를 디자인 할 수 있도록 직관적인 UI를 제공합니다.

저의 경우 각 페이지에 대해서 직접 코딩한 템플릿을 적용할 계획이었기 때문에 무료이고 가볍고 헤더와 푸터를 쉽게 설정할 수 있는 것이 가장 중요했습니다.

1.3. 테마 설치방법

테마 설치는 매우 간단합니다. 워드프레스 관리자 화면에서 몇 번의 클릭만으로 가능합니다.

1. 워드프레스 관리자 대시보드에서 모양 > 테마 로 이동합니다.
2. 상단의 새로 추가 버튼을 클릭합니다.
3. 검색창에 ‘Blocksy’ 를 입력합니다.
4. 블록시 테마가 나오면 설치 후 활성화 버튼을 누릅니다.

1.4. 자식 테마 (Must)

여기서 테마를 활성화했다고 끝이 아닙니다. 반드시 ‘자식 테마(Child Theme)’ 를 설치해야 합니다.

자식 테마란 부모 테마(Blocksy)의 기능을 그대로 물려받으면서, 사용자가 수정한 코드(CSS, php 등)만 따로 저장하는 테마입니다. 만약 자식 테마 없이 부모 테마를 직접 수정하면, 나중에 테마 업데이트 시 수정 사항이 모두 초기화되는 대참사가 발생할 수 있습니다.

블록시는 공식 홈페이지에서 자식 테마 파일을 제공합니다.
블록시 자식 테마 다운로드 및 설치방법

zip 파일을 다운로드 후 모양 - 테마 - 테마 추가 - 테마 업로드 기능을 통해 설치하고 자식 테마를 ‘활성화’ 해주시면 됩니다.

2. 5단계 : 메뉴 만들기

테마를 입혔다면 사이트의 네비게이션, 즉 ‘메뉴’ 를 만들어야 합니다. 기획 단계에서 정했던 5가지 핵심 메뉴(Home, About, Docs, Blog, Contact)를 실제 사이트에 적용해 보겠습니다.

1. 글 > 카테고리 또는 페이지 > 새로 추가 에서 메뉴에 연결할 페이지/카테고리를 미리 생성합니다.
2. 모양 > 메뉴 로 이동합니다.
3. 새 메뉴 이름을 입력(예: Main Menu)하고 메뉴 생성 을 클릭합니다.
4. 왼쪽 목록에서 원하는 페이지나 카테고리를 체크하고 메뉴에 추가 합니다.
5. 드래그 앤 드롭으로 메뉴 순서를 조정합니다. (하위 메뉴는 살짝 오른쪽으로 밀어주면 됩니다)
6. 메뉴 설정 에서 표시할 위치를 헤더 메뉴 1 (테마마다 명칭 상이)으로 체크하고 저장합니다.

3. 6단계 : 사용자 정의 설정 (Customizer)

이제 본격적인 디자인 설정입니다. 워드프레스의 강력한 장점 중 하나인 ‘사용자 정의하기(Customizer)’ 기능을 활용합니다.

모양 > 사용자 정의하기 를 클릭하면, 왼쪽에는 설정 패널이, 오른쪽에는 실시간 미리보기 화면이 나타납니다.

3.1. 사용자 정의 설정이란?

워드프레스의 ‘사용자 정의하기(Customizer)’ 는 코드를 건드리지 않고도 사이트의 거의 모든 시각적 요소를 수정할 수 있는 중앙 통제실입니다. 로고, 헤더, 푸터, 색상, 글꼴 등을 실시간으로 변경하며 눈으로 직접 확인할 수 있다는 점이 가장 큰 매력입니다.

저는 페이지 내부의 디자인은 별도 템플릿으로 자유롭게 구성할 계획이었기에, 이곳에서는 사이트의 공통 요소인 헤더/푸터 , 타이포그래피 , 컬러 , 홈페이지 설정 에만 집중했습니다.

3.2. 헤더 및 푸터 설정

3.2.1. 로고 설정

먼저 브랜드를 상징하는 로고를 설정합니다.

1. 미디어 - 미디어 파일 추가 를 통해 미리 제작한 로고 파일을 업로드합니다.
2. 모양 - 사용자 정의 - 헤더 - 로고 로 이동하여 로고를 선택합니다.
3. 로고 높이 를 조절하여 PC와 모바일에서 로고 크기가 적절하게 보이도록 맞춥니다.

3.2.2. 헤더(Header) 만들기

헤더는 방문자가 처음 마주하는 네비게이션 영역입니다. 블록시 테마의 헤더 빌더는 상단(Top), 메인(Main), 하단(Bottom)의 3단 구조로 되어 있어, 레고 블록을 쌓듯이 원하는 요소를 드래그 앤 드롭으로 배치하면 됩니다.

저는 복잡한 기능을 빼고 핵심만 남겼습니다.

• 좌측 : 로고 (브랜드 정체성)
• 중앙 : 메인 메뉴 (네비게이션)
• 우측 : 검색 아이콘 (편의성)

또한 모바일 환경을 고려해 반응형 설정을 다르게 가져갔습니다. 데스크톱에서는 메뉴를 펼쳐두지만, 공간이 좁은 모바일에서는 ‘트리거(햄버거 버튼)’ 를 배치하여 클릭 시 메뉴가 열리도록(Off Canvas) 설정했습니다.

3.2.3. 푸터(Footer) 만들기

푸터 설정 방식도 헤더와 동일합니다. 저는 여러 위젯을 과감히 생략하고, 신뢰감을 줄 수 있는 저작권 정보(Copyright) 만 중앙에 깔끔하게 배치하여 마무리를 지었습니다.

3.3. 타이포그래피 (Typography)

가독성은 블로그의 생명입니다. 타이포그래피에서는 사이트 전역에 설정되는 글꼴, 글자크기, 굵기를 설정할 수 있습니다.

• 위치 : 일반 옵션 - 타이포그래피
• 글꼴 : 한글 가독성이 우수한 Noto Sans KR 을 기본 글꼴로 적용했습니다.
• 크기 : 본문(Base Font) 크기는 16px 로 설정하여 시원시원하게 읽히도록 했습니다.

3.4. 컬러 (Colors)

기획 단계에서 정한 브랜드 컬러(Indigo & Blue )를 시스템 전반에 이식하는 과정입니다. 여기서 ‘글로벌 컬러 팔레트’를 잘 잡아두면 추후 유지보수가 획기적으로 편해집니다.

• 위치 : 일반 옵션 - 색상

3.5. 홈페이지 설정

블로그에 접속했을 때 가장 먼저 보여줄 ‘대문’을 결정합니다.

• 위치 : 코어 - 홈페이지 설정
• 최신 글 : 일반적인 블로그 형태. 새 글이 피드처럼 나열됨.
• 정적 페이지 : 기업 홈페이지처럼 별도로 디자인된 대문 페이지를 보여줌.

저는 제가 원하는 디자인으로 커스터마이징 하기 위해 ‘정적 페이지’ 를 선택하고, 미리 만들어둔 ‘Home’ 페이지를 연결했습니다.

4. 마치며

테마를 설치하고 기본 설정을 마치는 것만으로도 이제 제법 ‘웹사이트’ 다운 모습이 갖춰졌습니다. 블록시 테마의 직관적인 설정 덕분에 복잡한 코드나 CSS 수정 없이도 기본 레이아웃을 구현할 수 있었습니다.

하지만 진정한 커스터마이징은 이제부터입니다. 테마 설정만으로는 구현하기 힘든 디테일한 페이지 디자인(대문, 문서함 등)이 남았습니다.

다음 글에서는 본 프로젝트의 하이라이트인 ‘페이지 빌드’ 과정을 다뤄보겠습니다. 특히 Gemini와 Antigravity를 활용하여 디자인부터 코딩까지 효율적으로 구현하는 저만의 노하우를 상세히 공개하겠습니다.

블로그 운영을 고민하시는 분들께 작은 도움이 되기를 바랍니다.