워드프레스 클래식 테마를 블록테마로 쉽게 전환하는 방법

클래식 테마의 style.css를 블록테마로 옮기는 핵심은
“색·폰트·간격·라운드”를 데이터화하고,
“hover와 예외”만 CSS로 남기는 것이다.
theme.json이 곧 디자인 시스템의 뼈대가 된다.

워드프레스 블록테마를 만들다 보면 클래식 테마 시절의 style.css를 그대로 들고 오고 싶은 순간이 많다.
하지만 블록테마에서는 CSS가 아니라 theme.json이 디자인의 중심이다.
이 문서는 내가 직접 테스트하며 정리한 변환 개념 + AI에게 지시할 때 사용할 프롬프트 예시다.

1. 변환의 핵심 개념

theme.json은 스타일시트가 아니다.
워드프레스가 이 파일을 읽고 자동으로 CSS 변수를 생성해주는 설정서다.
→ 즉, 사람이 작성하던 CSS 규칙을 데이터로 구조화한 형태.
style.css의 내용을 세 가지로 분류해야 한다.

전역 토큰(색, 폰트, 간격, 라운드 등) → settings
전역 기본값(본문 글자색, 배경색, 라인하이트 등) → styles
블록별 기본값(버튼, 헤딩, 단락 등) → styles.blocks

hover, focus, animation 등 CSS 선택자가 필요한 부분은 여전히 style.css에 남긴다.

2. 전역 설정과 블록 설정의 구분

구분	설정 위치	대표 항목	비고
전역 설정	`settings`, `styles`	색상 팔레트, 폰트, 간격, 기본 텍스트 색, 배경색	테마 전체에 적용
블록 설정	`styles.blocks["core/..."]`	버튼, 문단, 헤딩, 그룹, 칼럼, 커버 등	특정 블록에만 적용

전역 설정은 “기본 톤 & 리듬”을 정의하는 부분이다.
블록 설정은 “각 블록의 형태”를 정의한다.
예: 버튼의 패딩, 헤딩의 폰트크기, 그룹의 배경색.

3. 변환 절차 요약

기존 CSS에서 반복되는 값(색상, 폰트, 여백, 둥근 모서리)을 표로 정리한다.
그 값을 프리셋(slug 기반 변수) 로 등록한다.
전역 글꼴, 본문색, 기본 간격을 styles 상단에 지정한다.
주요 블록(core/button, core/paragraph 등)에 기본값을 매핑한다.
hover·transition·animation은 남은 style.css에 둔다.

4. 변환 작업 시 AI에게 내릴 프롬프트 예시

기존 클래식 테마의 style.css를 분석해서 블록테마용 theme.json으로 전환해줘.
1) 색상, 폰트, 간격, 라운드 값을 전역 프리셋으로 등록한다.
2) 본문/배경/기본폰트를 전역 styles에 지정한다.
3) 버튼, 헤딩, 단락, 그룹, 칼럼 등 주요 core 블록의 기본 스타일을 styles.blocks에 포함시킨다.
4) hover, focus, animation 관련 코드는 제외하고 따로 목록화한다.
5) JSON은 완전한 형식으로 작성하되, 주석은 넣지 않는다.

아래 style.css를 theme.json으로 바꿔줘.
색상, 폰트, 간격, 라운드 값을 전역 프리셋으로 만들고,
core/button, core/paragraph, core/heading, core/group 블록의 기본 스타일을 구성해.
hover, nth-child, transition, animation 관련 부분은 변환하지 말고 무시해.
출력은 JSON 한 파일 형태로 완성해줘.