# 워드프레스 테마 생성기 AI: theme.json 무료 만들기

URL: https://noonwp.com/ko/tools/wordpress-theme-generator-ai
Type: tool
Locale: ko
Published: 2026-10-21
Updated: 2026-10-25

---

> 브랜드 컬러 하나로 명암 대비를 검사한 팔레트, 모듈러 타입 스케일, 블록 테마용 theme.json을 만듭니다. 무료이며 브라우저에서 실행됩니다.

## 몇 초 만에 theme.json 팔레트와 타입 스케일 만들기

워드프레스 테마 생성기 AI는 보통 사이트 전체를 약속합니다. 이 도구는 직접 확인할 수 있는 부분을 다룹니다. 명암 대비를 검사한 팔레트, 모듈러 타입 스케일, 블록 테마에 바로 쓰는 theme.json입니다.

## 블록 테마 스타터 생성기

브랜드 색상, 기본 배경, 글꼴 조합을 고르세요. 각 항목을 바꾸면 팔레트, 명암 대비 보고서, theme.json이 함께 갱신됩니다.

*[Interactive widget — see the live page for the full experience]*

## 이 생성기가 실제로 계산하는 것

### 브랜드 컬러 하나로 만드는 팔레트

브랜드 컬러가 Primary가 됩니다. 도구는 그 색의 색조를 읽어 HSL로 Base, Surface, Contrast를 만듭니다. 밝은 기본 배경에서는 명도 97, 93, 11%이고, 어두운 기본 배경에서는 9, 14, 92%입니다. Accent는 색상환에서 150도 떨어진 색입니다.

### 확인할 수 있는 명암 대비

WCAG 2.x 휘도 공식으로 네 쌍을 측정합니다. 본문 텍스트, 링크, 버튼 텍스트, 강조색입니다. 각 쌍은 비율과 등급을 받습니다. 링크가 AA를 통과하지 못하면 명도를 한 단계씩 바꿔 통과할 때까지 조정합니다.

### 모듈러 타입 스케일

Medium은 1rem입니다. Large, Extra large, Huge는 비율을 각각 한 번, 두 번, 세 번 곱하고, Small은 비율로 나눕니다. 비율 1.2에서는 0.833, 1, 1.2, 1.44, 1.728rem이 됩니다.

*여백 메모*

## 패턴보다 디자인 토큰이 먼저인 이유

히어로 패턴, 카드 그리드, 푸터는 모두 같은 팔레트 슬러그를 읽습니다. 그 슬러그 값이 명암 대비에 실패하면 모든 패턴이 그 실패를 물려받고, 결국 고객의 휴대폰에서야 알게 됩니다. 토큰을 먼저 고치면 직접 만들거나 Pattern Forge로 생성한 패턴이 이미 통과하는 색에서 시작합니다. 샌드박스가 아니라 실제 고객 사이트에서 결과를 테스트하세요.

- 팔레트 슬러그는 모든 블록과 패턴이 공유합니다
- 글꼴 크기 슬러그가 템플릿 전체의 제목을 일관되게 유지합니다
- theme.json 한 번 수정으로 사이트 전체가 바뀝니다

## 생성된 파일에서 실제 테마까지

1. **입력값 고르기** — 고객 로고에서 가져온 브랜드 컬러로 시작하세요. 브랜드가 본래 어두운 성격이 아니라면 밝은 기본 배경을 고르고, 분위기에 맞는 글꼴 조합을 선택하세요.
2. **명암 대비 보고서 읽기** — 실패 또는 큰 텍스트만 통과로 표시된 행을 찾으세요. 본문, 링크, 버튼 텍스트가 모두 AA를 통과할 때까지 기본 배경이나 중립 색조를 바꾸세요.
3. **파일을 테마에 복사하기** — theme.json 복사를 누르고 블록 테마의 루트에 붙여 넣은 뒤, 사이트 에디터를 열어 색상 선택기에 팔레트가 나타나는지 확인하세요.
4. **직접 다듬기** — 결과물은 출발점입니다. 슬러그 이름을 디자인 시스템에 맞게 바꾸고, 간격과 레이아웃 설정을 추가한 뒤 나머지 테마 파일과 함께 커밋하세요.

## 이 도구가 하지 않는 것

### 페이지 레이아웃 없음

이 도구는 템플릿이 아니라 토큰을 만듭니다. 헤더, 푸터, 페이지 구조는 블록 테마나 사이트 에디터에서 만든 패턴에서 나옵니다.

### 웹 폰트 없음

두 조합 모두 시스템 글꼴 스택을 써서 글꼴 요청을 피합니다. 브랜드 서체는 직접 호스팅한 가변 폰트와 fontFace 항목을 추가해야 합니다.

### 취향 보장 없음

팔레트가 모든 명암 검사를 통과해도 밋밋해 보일 수 있습니다. 안전한 기준선으로 보고, 실제 페이지에서 강조색과 중립색을 눈으로 조정하세요.

## 생성기에 대한 질문

### 정말 AI 테마 생성기인가요?

아니며, 처음부터 그렇다고 밝힙니다. 팔레트, 명암 검사, 타입 스케일은 고정된 규칙에서 나옵니다. HSL 색 계산, WCAG 명암 공식, 모듈러 스케일입니다. 그래서 결과가 예측 가능하고 검증할 수 있습니다. 언어 모델을 넣고 싶다면 Pattern Forge가 프롬프트로 Gutenberg 패턴을 만듭니다. 이 도구는 그 아래에 있는 디자인 토큰을 다룹니다.

### 무료인가요? 제 색상을 저장하나요?

무료이며 계정이 필요 없습니다. 모든 처리는 브라우저에서 실행됩니다. 전송되는 것은 도구가 사용되었음을 기록하는 익명 카운터뿐이며, 색상 값이나 폼의 텍스트는 포함되지 않습니다.

### 명암 비율은 어디서 나오나요?

WCAG 2.x 상대 휘도 공식에서 나옵니다. 각 sRGB 채널을 선형화한 뒤 0.2126, 0.7152, 0.0722로 가중합니다. 비율은 (밝은 값 + 0.05)를 (어두운 값 + 0.05)로 나눈 값입니다. 본문 텍스트의 AA 기준은 4.5:1, AAA는 7:1, 큰 텍스트의 AA 기준은 3:1입니다.

### 링크 색상이 브랜드 색상과 왜 다른가요?

브랜드 색상은 거의 흰색이나 검은색에 가까운 기본 배경에서 4.5:1을 자주 통과하지 못합니다. 생성기는 브랜드 색상을 버튼과 채움용 Primary로 그대로 두고, 링크 변형은 선택한 기본 배경에서 AA를 통과할 때까지 명도를 한 단계씩 조정합니다.

### 어떤 워드프레스 버전을 대상으로 하나요?

파일은 theme.json 버전 3을 씁니다. 이 버전은 WordPress 6.6(2024년 7월)과 함께 나왔습니다. 오래된 설치 환경에서는 버전 2가 필요할 수 있습니다. 팔레트와 타이포그래피 구조는 같으므로 숫자만 바꾸고 나머지는 그대로 두면 됩니다.

### 글꼴 스택이 웹에서 무엇을 불러오나요?

아무것도 불러오지 않습니다. 두 조합 모두 시스템 및 Georgia 계열 스택을 써서 글꼴 요청도, 늦게 로드되는 글꼴로 인한 레이아웃 이동도 없습니다. 나중에 가변 폰트를 직접 호스팅하면 fontFamily 값만 바꾸고 슬러그는 그대로 두세요.

### 오른쪽에서 왼쪽으로 쓰는 사이트에도 쓸 수 있나요?

출력에는 left나 right 값이 없습니다. 색상, 글꼴 크기, 글꼴 패밀리는 방향과 무관합니다. 아랍어나 히브리어 글꼴 대체는 플랫폼마다 시스템 스택이 달라서 따로 확인하세요.

### 파일은 테마의 어디에 넣나요?

블록 테마의 루트에 theme.json으로 저장한 뒤 사이트 에디터를 여세요. 팔레트 항목은 색상 선택기에, 크기는 타이포그래피 패널에 나타나고, styles 섹션이 사이트 전체의 기본값을 정합니다.

## 빈 페이지가 아니라 패턴에서 시작하세요

theme.json을 넣고 나면 Pattern Forge가 사용자의 팔레트와 타입 스케일을 쓰는 Gutenberg 패턴 초안을 만듭니다. Monk은 무료이고 Scribe는 월 $12입니다.

*Call to action: 사이트에 빛을 더하세요*


## FAQ

### 정말 AI 테마 생성기인가요?

아니며, 처음부터 그렇다고 밝힙니다. 팔레트, 명암 검사, 타입 스케일은 고정된 규칙에서 나옵니다. HSL 색 계산, WCAG 명암 공식, 모듈러 스케일입니다. 그래서 결과가 예측 가능하고 검증할 수 있습니다. 언어 모델을 넣고 싶다면 Pattern Forge가 프롬프트로 Gutenberg 패턴을 만듭니다. 이 도구는 그 아래에 있는 디자인 토큰을 다룹니다.

### 무료인가요? 제 색상을 저장하나요?

무료이며 계정이 필요 없습니다. 모든 처리는 브라우저에서 실행됩니다. 전송되는 것은 도구가 사용되었음을 기록하는 익명 카운터뿐이며, 색상 값이나 폼의 텍스트는 포함되지 않습니다.

### 명암 비율은 어디서 나오나요?

WCAG 2.x 상대 휘도 공식에서 나옵니다. 각 sRGB 채널을 선형화한 뒤 0.2126, 0.7152, 0.0722로 가중합니다. 비율은 (밝은 값 + 0.05)를 (어두운 값 + 0.05)로 나눈 값입니다. 본문 텍스트의 AA 기준은 4.5:1, AAA는 7:1, 큰 텍스트의 AA 기준은 3:1입니다.

### 링크 색상이 브랜드 색상과 왜 다른가요?

브랜드 색상은 거의 흰색이나 검은색에 가까운 기본 배경에서 4.5:1을 자주 통과하지 못합니다. 생성기는 브랜드 색상을 버튼과 채움용 Primary로 그대로 두고, 링크 변형은 선택한 기본 배경에서 AA를 통과할 때까지 명도를 한 단계씩 조정합니다.

### 어떤 워드프레스 버전을 대상으로 하나요?

파일은 theme.json 버전 3을 씁니다. 이 버전은 WordPress 6.6(2024년 7월)과 함께 나왔습니다. 오래된 설치 환경에서는 버전 2가 필요할 수 있습니다. 팔레트와 타이포그래피 구조는 같으므로 숫자만 바꾸고 나머지는 그대로 두면 됩니다.

### 글꼴 스택이 웹에서 무엇을 불러오나요?

아무것도 불러오지 않습니다. 두 조합 모두 시스템 및 Georgia 계열 스택을 써서 글꼴 요청도, 늦게 로드되는 글꼴로 인한 레이아웃 이동도 없습니다. 나중에 가변 폰트를 직접 호스팅하면 fontFamily 값만 바꾸고 슬러그는 그대로 두세요.

### 오른쪽에서 왼쪽으로 쓰는 사이트에도 쓸 수 있나요?

출력에는 left나 right 값이 없습니다. 색상, 글꼴 크기, 글꼴 패밀리는 방향과 무관합니다. 아랍어나 히브리어 글꼴 대체는 플랫폼마다 시스템 스택이 달라서 따로 확인하세요.

### 파일은 테마의 어디에 넣나요?

블록 테마의 루트에 theme.json으로 저장한 뒤 사이트 에디터를 여세요. 팔레트 항목은 색상 선택기에, 크기는 타이포그래피 패널에 나타나고, styles 섹션이 사이트 전체의 기본값을 정합니다.