작은 블록 테마를 기획하면서 고른 구성 후보입니다. 판매 실적이나 사용자 조사를 통해 검증한 필수 목록은 아닙니다. 템플릿 계층에 따라 기본 템플릿으로 대체되는 화면도 있으므로 아래 파일이 모두 있어야 하는 것은 아닙니다.
“많이 넣는 게 아니라 잘 고르는 것.”
상용 블록 테마는 기능보다 일관된 디자인과 빠른 제작 동선이 성패를 가릅니다. 이 글은 작은 범위에서 시험해볼 테마를 만들기 위한 필수 템플릿과 패턴 체크리스트를 정리했습니다.
최소가 정답이라고 생각하는 이유
- 구매자는 “바로 써도 예쁜” 기본값을 원합니다.
- 템플릿은 헤더/푸터 + 패턴 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-*) 소수만 추가 → 체감 품질 상승
뉴스레터 영역은 필요한 경우의 선택 예시이며 이 사이트에서 구독을 다시 모집한다는 뜻은 아닙니다. 실제 판매 전에는 접근성, 긴 제목·빈 목록·모바일 화면과 업데이트 대응도 확인해야 합니다.