WordPress 테마 커스터마이저 — 라이브 미리보기로 디자인 조정

테마 커스터마이저는 코드 없이 디자인을 변경하면서 실시간 미리보기할 수 있는 도구입니다. 외모 > 사용자 정의(Customize)에서 접근. 색·폰트·로고·메뉴·위젯 등을 GUI로 조정할 수 있어 입문자에게 가장 친화적.

커스터마이저 진입

좌측 메뉴 외모 > 사용자 정의(Customize) 클릭.

화면 구성:
– 왼쪽: 설정 패널 (섹션·옵션)
– 오른쪽: 라이브 미리보기

흔한 섹션 — 테마마다 다름

사이트 식별 (Site Identity)

• 사이트 제목·태그라인
• 로고: 이미지 업로드 (PNG·SVG 권장)
• 사이트 아이콘 (Favicon): 512×512 PNG

색상 (Colors)

• 배경색
• 본문 텍스트 색
• 링크 색
• 헤더·푸터 색
• 강조 색 (테마마다 다양)

헤더 (Header)

• 헤더 레이아웃 (좌·중·우)
• 헤더 배경·여백
• 모바일 헤더 (햄버거 메뉴)
• 헤더 위 광고 바

푸터 (Footer)

• 컬럼 수 (1·2·3·4)
• 컬럼 비율
• 푸터 배경
• 카피라이트 텍스트

메뉴 (Menus)

• 메뉴 위치 (Primary·Footer·Mobile)
• 외모 > 메뉴에서 만든 메뉴 할당
• 자세한 건 메뉴 만들기 참고

위젯 (Widgets)

• 사이드바·푸터 위젯 영역
• 클래식 위젯과 동일 인터페이스

홈페이지 설정 (Homepage Settings)

• 첫 페이지를 “최신 글” vs “고정 페이지”
• 고정 페이지로 할 경우 어느 페이지 선택

추가 CSS (Additional CSS)

자식 테마 없이 빠른 CSS 추가:

.site-title {
  font-family: 'Pretendard';
  letter-spacing: -0.04em;
}

.entry-title {
  font-size: 2rem;
}

작은 디자인 보정에 적합. 복잡한 코드는 자식 테마 권장.

테마별 특화 옵션

Astra

• 헤더 빌더 (고급)
• 글로벌 색상 팔레트
• 컨테이너 폭·여백
• Spectra 블록 통합

GeneratePress

• 컨테이너 디자인
• 블로그 레이아웃 (그리드·리스트)
• 푸터 widget 영역
• Premium에서 헤더·후크 추가

Kadence

• 글로벌 팔레트 색·폰트
• 헤더·푸터 빌더
• 블록 통합

기본 테마 (Twenty Twenty-Five)

• FSE (Full Site Editing)
• 외모 > 편집기로 블록 기반 편집

실시간 미리보기 활용

데스크탑·태블릿·모바일 전환

미리보기 하단 아이콘:
– 모바일
– 태블릿
– 데스크탑

각 화면에서 디자인 점검.

페이지 이동

미리보기 영역에서 메뉴·링크 클릭 → 다른 페이지로 이동하며 디자인 점검.

변경 후 — 게시

좌상단 게시 (Publish) 클릭.

저장 안 누르면 변경 사항 모두 무효. 새로고침하면 사라짐.

스케줄 게시·임시 저장 (선택)

게시 옆 톱니바퀴 클릭:

• 게시: 즉시 적용
• 임시 저장: 작업 중인 상태 유지 (관리자만 미리보기)
• 예약: 특정 시점 자동 게시

변경 사항 되돌리기

즉시 되돌리기

미리보기에서 어색한 변경 시:
– 게시 안 하고 닫기 → 변경 사항 폐기
– 또는 개정판(Revisions) 활용 (테마 지원 시)

게시 후 되돌리기

전체 백업으로 복구. 자주 미리보기로 확인 후 게시 권장.

추가 CSS — 자주 쓰는 스니펫

메인 폰트 변경

body {
  font-family: 'Pretendard Variable', sans-serif;
  letter-spacing: -0.02em;
}

본문 폭 조정

.entry-content {
  max-width: 760px;
  margin: 0 auto;
}

헤딩 스타일

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0a0a0a;
}

버튼 디자인

.wp-block-button__link {
  border-radius: 6px;
  padding: 12px 24px;
  font-weight: 600;
}

사이드바 위젯 박스

.widget {
  padding: 1.5rem;
  background: #fafafa;
  border-radius: 8px;
  margin-bottom: 2rem;
}

커스터마이저 vs 사이트 편집기

WordPress 6+ 블록 테마는 외모 > 편집기가 새 표준. 전통 테마는 사용자 정의 계속 사용.

자주 하는 실수

• 변경 후 게시 안 함: 모든 작업 무효
• 추가 CSS에 큰 코드 우겨넣기: 자식 테마가 정답
• 모바일 안 확인: PC만 보면 모바일 깨짐
• 테마 변경 후 옛 추가 CSS 그대로: 새 테마와 충돌
• 이미지 로고 너무 큰 파일: 사이트 속도 ↓

FAQ

Q. 커스터마이저가 안 보입니다.
A. 블록 테마(FSE) 사용 중. 외모 > 편집기 사용.

Q. 어떤 색이 어디에 적용되는지 모르겠습니다.
A. 미리보기에서 해당 요소 클릭 → 우측 패널이 해당 옵션으로 이동 (테마 지원 시).

Q. 옵션이 너무 많아 헷갈립니다.
A. 자주 쓰는 5~6개 (사이트 식별·색상·홈페이지·메뉴·추가 CSS)만 익히면 충분.

Q. 추가 CSS 코드가 자꾸 사라집니다.
A. 테마 변경 시 추가 CSS는 테마별 분리됨. 자식 테마에 옮기는 게 안전.

Q. 변경 사항이 일부만 적용됩니다.
A. 브라우저 캐시 또는 캐시 플러그인 캐시. 캐시 비우기.

관련 가이드

• 테마 설치·전환
• 자식 테마 만들기
• 위젯·사이드바
• 메뉴 만들기
• 홈페이지 유지보수 비용 안내 — 직접 관리가 부담될 때의 선택지와 비용 기준