[워드프레스 도전 7일차 특별편] Astra 테마 완벽 커스터마이징 가이드 (로고, 색상, 폰트, 레이아웃 변경 A to Z)

 

 

7일차 본편 강의를 통해 우리는 최고의 무료 테마 중 하나인 Astra를 성공적으로 설치했습니다. 이제 당신의 블로그는 기본 뼈대 위에 전문가가 설계한 멋진 옷을 입은 상태입니다. 하지만 이 옷은 아직 기성복일 뿐, 당신의 개성을 완벽하게 담아내지는 못합니다.

 

이번 특별편의 목표는, 이 멋진 기성복을 당신의 몸에 꼭 맞는 '맞춤 정장'으로 만드는 것입니다. 우리는 워드프레스의 가장 강력한 디자인 도구인 '사용자 정의하기' 기능을 활용하여, Astra 테마가 제공하는 모든 가능성을 탐험해 볼 것입니다.

 

✨ Astra 테마 디자인 마스터하기 ✨

• 1. '사용자 정의하기' 화면 접속하기 (디자인의 시작)
• 2. 전역 (Global): 블로그의 기본 규칙 정하기
• 3. 헤더 빌더 (Header Builder): 블로그의 얼굴 꾸미기
• 4. 블로그 (Blog): 포스트 디자인하기
• 5. (보너스) 스타터 템플릿 100% 활용하기

1. '사용자 정의하기 (Customize)' 화면 접속하기 🎨

Astra 테마 디자인의 모든 것은 '사용자 정의하기' 화면에서 이루어집니다. 접속 방법은 간단합니다.

- 방법 1: 관리자 메뉴에서 `외모 (Appearance)` → `사용자 정의하기 (Customize)` 클릭
- 방법 2: 블로그에 접속한 상태에서 상단 관리자 바(Admin Bar)의 `사용자 정의하기 (Customize)` 클릭

화면에 접속하면 왼쪽에는 설정 메뉴가, 오른쪽에는 변경 사항이 실시간으로 반영되는 내 블로그 미리보기가 나타납니다.

 

2. 전역 (Global): 블로그의 기본 규칙 정하기 🌍

'전역' 설정은 블로그 전체에 일관되게 적용될 기본 디자인 '규칙'을 정하는 곳입니다. 여기서 기초를 잘 잡아두면 디자인에 통일성이 생깁니다.

- 색상 (Colors)

블로그의 전체적인 색감을 결정합니다. '글로벌 팔레트'에서 테마 색상, 링크 색상 등을 지정해두면, 모든 요소에 일관된 색이 적용됩니다.

- 타이포그래피 (Typography)

블로그의 기본 글꼴(폰트)과 크기를 설정합니다. 가독성이 좋은 `Noto Sans KR` 같은 본고딕 계열 폰트를 추천합니다. '본문'과 '제목' 폰트를 각각 지정할 수 있습니다.

[디자인 꿀팁]

디자인에 자신 없다면, 'Coolors'나 'Adobe Color' 같은 무료 색상 조합 사이트에서 전문가가 만들어놓은 팔레트를 참고하세요. 세련된 색상 조합만으로도 블로그가 1.5배는 더 예뻐 보입니다.

 

3. 헤더 빌더 (Header Builder): 블로그의 얼굴 꾸미기 ✨

'헤더'는 블로그 최상단에 위치한 로고와 메뉴 영역입니다. Astra의 헤더 빌더는 레고처럼 요소를 끌어다 놓는 것만으로 헤더를 디자인할 수 있는 강력한 기능입니다.

- 사이트 제목 및 로고 (Site Title & Logo)

이곳에서 블로그의 정체성을 보여줄 로고 이미지를 업로드할 수 있습니다. 로고가 없다면 사이트 제목이 텍스트로 표시됩니다. `로고 너비 (Logo Width)`를 조절하여 적절한 크기로 만드세요.

- 주 메뉴 (Primary Menu)

블로그의 카테고리 등을 보여주는 핵심 메뉴입니다. `외모 (Appearance)` → `메뉴 (Menus)`에서 생성한 메뉴를 이곳에 배치할 수 있습니다.

 

4. 블로그 (Blog): 포스트 디자인하기 📖

글 목록 페이지와 실제 글 페이지의 디자인을 제어하는 곳입니다.

- 블로그 / 보관 (Blog / Archive)

글 목록 페이지의 레이아웃을 설정합니다. 글의 전체 내용 대신 일부만 보여주는 `요약 (Excerpt)`을 활성화하면 훨씬 깔끔해 보입니다. 작성자, 날짜 같은 `메타 (Meta)` 정보 표시 여부도 선택할 수 있습니다.

- 단일 게시물 (Single Post)

독자가 최종적으로 읽게 될 글 페이지의 디자인을 설정합니다. 제목과 특성 이미지(대표 이미지)의 위치나 표시 여부 등을 제어할 수 있습니다.

 

5. (보너스) 스타터 템플릿 100% 활용하기 🚀

만약 이 모든 개별 설정이 너무 복잡하고 어렵게 느껴진다면, Astra의 필살기인 '스타터 템플릿'을 활용하세요.

[한 방에 전문가 디자인 따라하기]

1. `플러그인 (Plugins)` 메뉴에서 `Starter Templates`를 검색하여 설치하고 활성화합니다.
2. `외모 (Appearance)` → `스타터 템플릿 (Starter Templates)`으로 이동합니다.
3. 마음에 드는 디자인을 고른 후, 로고와 색상만 내 것으로 바꾸고 `Import` 버튼을 누릅니다.
4. 몇 분 안에 전문가가 디자인한 사이트가 내 블로그에 그대로 복제됩니다.
5. 주의: 이 기능은 기존 내용을 덮어 쓸 수 있으므로, 글이 없는 초기 상태에서 시도하는 것이 가장 안전합니다.

다음 도전 예고: 내 입맛대로 블로그 꾸미기 🎨

• ➡️[워드프레스 도전 8일차] 코딩 없이 클릭만으로 블로그 로고와 대표 색상 바꾸기

질문: 오늘 배운 '사용자 정의하기' 기능 중에서 어떤 부분이 가장 흥미로웠나요? 직접 로고나 대표 색상을 바꿔보셨나요? 당신의 블로그가 어떻게 변신했는지 궁금합니다! ✨