“많이 넣는 게 아니라 잘 고르는 것.”
상용 블록 테마는 기능보다 일관된 디자인과 빠른 제작 동선이 성패를 가릅니다. 이 글은 최소 구성으로도 바로 팔 수 있는 테마를 만들기 위한 필수 템플릿과 패턴 체크리스트를 정리했습니다.
최소가 정답이라고 생각하는 이유
- 구매자는 “바로 써도 예쁜” 기본값을 원합니다.
- 템플릿은 헤더/푸터 + 패턴 1개로 구성하면 유지보수와 확장이 쉬워집니다.
- 전역 토큰(theme.json: 색/폰트/간격/레이아웃)만 탄탄하면 코드 없이도 일관성이 살아납니다.
필수 템플릿
아래 템플릿들은 대부분의 상용 테마에서 실사용 빈도와 기대치가 높은 페이지입니다.
- front-page.html: 홈(바이오/링크 인바이오 중심)
- index.html: 블로그 기본 목록
- archive.html: 카테고리/태그/작성자/날짜 목록
- single.html: 단일 글
- page.html: 소개/회사/일반 페이지
- 404.html: 에러 페이지
- (선택) search.html: 검색 결과
패턴 그룹 & 필수 패턴 세트 (MVP 코어)
Hero/프로필
- 홈 히어로 + 링크스택
구성: group, avatar(선택), site-title, site-tagline, buttons+button(세로 3~5개)
포인트: 모바일 퍼스트(버튼 100% 폭), CTA 1개 강조
링크/네비
- 빠른 링크 리스트
구성: buttons+button(가로/세로 토글), separator(선택)
CTA / 배너
- 심플 CTA 배너
구성: cover 또는 group, heading, paragraph, buttons - 이미지/비디오 배너
구성: cover(배경), heading, paragraph, button
블로그 카드/목록
- 단일 카드(포스트 카드)
구성: group, post-featured-image, post-terms, post-title, post-excerpt, post-date - 카드 그리드(목록/아카이브 공용)
구성: query + post-template(내부에 카드 구성 반복), No Results 메시지
싱글 본문
- 싱글 아티클 기본
구성: post-title, post-date(+terms 선택), post-featured-image, post-content, comments
소개/회사
- 소개 컴팩트
구성: group, heading, paragraph, buttons
소셜/신뢰도
- 소셜 아이콘 스트립
구성: social-links(+ social-link), 짧은 설명문(선택) - 파트너 로고 스트립
구성: group, columns, image 반복
폼/구독
- 뉴스레터 구독 박스
구성: group, heading, paragraph, 폼 자리표시(플러그인 연동 지점)
검색/404
- 검색 결과 헤더
구성: search, paragraph(검색 안내), separator - 404 심플
구성: group, heading, paragraph, buttons(“홈으로”)
팁: 데모 텍스트/버튼은 에디터 전용 클래스로 표시하고(프론트 숨김), 사용자가 바로 교체할 수 있게 UX를 설계하세요.
템플릿 ↔ 추천 패턴 매칭(예시)
- front-page.html → 홈 히어로+링크스택 · (선택) 이미지/비디오 배너 · (선택) 최신글 카드 그리드 · 심플 CTA
- index.html / archive.html → 카드 그리드
- single.html → 싱글 아티클 기본
- page.html(소개) → 소개 컴팩트 · (선택) 소셜 스트립/뉴스레터
- 404.html → 404 심플
- search.html(선택) → 검색 결과 헤더 · 카드 그리드
반드시 스타일링할 코어 블록 (기본값만으로 예쁘게)
- 문단/제목: 본문 글자크기·줄간, 제목 대비/간격
- 버튼/버튼스택: 라운드(pill/md), 배경·글자색(역할 색), 그림자(경량), 세로 스택 간격
- 이미지: 기본 라운드(md), 캡션 여백
- 커버: 내부 텍스트 색 상속, 패딩, space-between 레이아웃 스타일
- 소셜 링크: 아이콘 크기/간격, 모양(라운드/사각형)
- 쿼리/카드 구성요소: 카드 간격·제목/발췌 스케일·날짜 muted 색
- 탐색: 폰트 크기·간격, 활성 링크 처리
- 구분선/스페이서: 두께·색·마진 기본값
전역 토큰(theme.json)으로 잡아야 ‘상용의 느낌’
- 색 팔레트(역할 기반): bg/fg/accent/muted — 라이트/다크 변형은 같은 슬러그로 스킨 전환
- 타이포 스케일: 폰트군 1~2개, 사이즈(XS~3XL), 줄간
- 간격 스케일: 8/12/16/24/32 + 전역 blockGap
- 모서리/그림자: none/sm/md/lg/pill, none/sm/md
- 레이아웃 폭: contentSize(640~768), wideSize(960~1200), Root Padding Aware
- 요소 공통값: link(색/밑줄), button(라운드/색/글자크기), heading(폰트/색)
제작 플로우(현실적인 3단계)
- 전역 토큰 완성 → 빈 페이지도 균형감 있게
- 블록 기본값 & 패턴 배치 → “삽입만 해도 예쁜” 사용자 경험
- 스타일 변형 & 블록 스타일(is-style-*) 소수만 추가 → 체감 품질 상승
