요약

이 워드프레스 AI 테마 생성기는 브랜드 컬러 하나로 theme.json을 만듭니다. 팔레트를 계산하고, 본문 텍스트, 링크, 버튼의 WCAG 명암 대비를 검사하며, 모듈러 타입 스케일을 설정합니다. AI가 아니라 고정 규칙으로 동작하므로 결과가 예측 가능하고 검증할 수 있습니다. 파일을 블록 테마에 복사한 뒤 사이트 에디터에서 다듬으세요.

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

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

설정 시작하기

블록 테마 스타터 생성기

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

팔레트

기본 배경
표면
대비 텍스트
주요 색
강조

명암 대비 검사 (WCAG 2.x)

기본 배경 위 본문 텍스트
기본 배경 위 링크
주요 색 위 버튼 텍스트
기본 배경 위 강조색

미리보기

설정한 스케일의 제목

본문은 기본 배경 색 위에 놓입니다. 링크 색상으로 표시된 링크가 본문 흐름을 이어 갑니다.

theme.json

작동 방식

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

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

브랜드 컬러가 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. 1

    입력값 고르기

    고객 로고에서 가져온 브랜드 컬러로 시작하세요. 브랜드가 본래 어두운 성격이 아니라면 밝은 기본 배경을 고르고, 분위기에 맞는 글꼴 조합을 선택하세요.

  2. 2

    명암 대비 보고서 읽기

    실패 또는 큰 텍스트만 통과로 표시된 행을 찾으세요. 본문, 링크, 버튼 텍스트가 모두 AA를 통과할 때까지 기본 배경이나 중립 색조를 바꾸세요.

  3. 3

    파일을 테마에 복사하기

    theme.json 복사를 누르고 블록 테마의 루트에 붙여 넣은 뒤, 사이트 에디터를 열어 색상 선택기에 팔레트가 나타나는지 확인하세요.

  4. 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입니다.

사이트에 빛을 더하세요
Noon