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

Q: 커스터마이저가 안 보여요.

블록 테마(FSE) 사용 중. 외모 > 편집기 사용.

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

커스터마이저 진입

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

화면 구성:

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

흔한 섹션 — 테마마다 다름

사이트 식별 (Site Identity)

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

색상 (Colors)

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

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

컬럼 수 (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+ 블록 테마는 외모 > 편집기가 새 표준. 전통 테마는 사용자 정의 계속 사용.

	커스터마이저	사이트 편집기 (FSE)
대상	클래식 테마	블록 테마
편집 영역	옵션 위주	모든 요소 블록으로
자유도	제한적	매우 높음
학습 곡선	낮음	중간

⚠️ 자주 하는 실수

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

❓ FAQ

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

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

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

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

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