Technote

테마 · 플러그인 실무

연재 워드프레스에 디자인 시스템 심기 8부 중 6부

편집자에게 임의 색을 주지 않는 설정

색 선택기를 열어 두면 6개월 뒤 브랜드색과 미묘하게 다른 색이 사이트에 쌓입니다. 편집자의 잘못이 아니라 시스템이 물어봤기 때문입니다.

팔레트를 theme.json 으로 넘겨도 기본 설정에서는 편집자가 여전히 임의의 색을 고를 수 있습니다. 우리 스와치 아래에 색상환과 헥스 입력란이 함께 열립니다.

6개월쯤 지나면 사이트에는 브랜드색과 한 단계 다른 초록, 반 단계 다른 초록이 함께 존재하게 됩니다. 이것은 편집자의 부주의가 아닙니다 — 시스템이 물어봤기 때문에 답한 것입니다. 물어보지 않으면 어긋나지 않습니다.

무엇을 닫는가

{
  "version": 3,
  "settings": {
    "color": {
      "custom": false,
      "customGradient": false,
      "defaultPalette": false,
      "defaultGradients": false,
      "palette": [ /* 우리 스와치 */ ]
    },
    "typography": { "customFontSize": false },
    "spacing":    { "customSpacingSize": false }
  }
}

custom 을 끄면 임의 색 입력이 사라지고, defaultPalette 를 끄면 워드프레스가 기본 제공하는 팔레트가 목록에서 빠집니다. 두 번째를 빠뜨리는 경우가 많은데, 그대로 두면 우리 스와치 아래에 테마와 무관한 색이 여러 개 남아 있습니다. 글자 크기와 간격도 같은 방식으로 척도 안에 가둡니다.

선택지를 줄이면 편집이 느려지는 것이 아니라 빨라진다

제약이 편집자를 돕는 이유

자유도를 줄인다고 하면 편집자에게 불친절한 결정처럼 들립니다. 실제로는 반대입니다. 무한한 색상환 앞에서 색을 고르는 일은 디자인 결정이고, 그것은 편집자의 일이 아닙니다. 스와치 여섯 개 중에서 고르는 일은 결정이 아니라 선택이고, 훨씬 빠릅니다.

여기에 하나를 더하면 효과가 커집니다. 팔레트의 이름을 색이 아니라 역할로 짓는 것입니다. 목록에 “청록” 이라고 적혀 있으면 편집자는 색으로 고르고, “강조” 라고 적혀 있으면 역할로 고릅니다. 후자가 시스템에 맞는 선택을 훨씬 자주 만듭니다.

잠근 뒤에 남는 것

설정을 닫아도 이미 저장된 콘텐츠 안의 색은 사라지지 않습니다. 블록 마크업에 인라인 스타일로 박혀 있기 때문입니다. 그래서 잠그는 작업은 두 단계입니다 — 설정을 닫고, 그다음 기존 콘텐츠를 훑어 인라인 색이 남은 화면을 찾아 정리합니다.

팔레트 잠금 점검 — 마지막 줄이 빠지면 우회 요청이 들어온다

마지막 줄이 중요합니다. 이유를 설명하지 않고 선택지를 없애면 편집자는 우회 경로를 찾습니다 — 커스텀 CSS 를 요구하거나, 색이 박힌 이미지를 올리거나 합니다. “왜” 를 한 번 공유하는 것이 설정 열 줄보다 오래갑니다.

사이트 구성 점검과 정리 절차는 작업 과정에 정리돼 있고, 무료로 배포하는 진단 도구는 무료 도구에 있습니다.

다음 회차

이제 우리 토큰이 프론트와 편집 화면 양쪽을 덮습니다. 남은 문제는 테마가 이미 자기 토큰을 갖고 있을 때입니다. 다음 회차는 그 경계를 브릿지 한 파일로 고정하는 방법입니다.

이 주제의 다른 글

노하우 목록으로

테마 · 플러그인 실무

편집 가능한 영역을 디자인 전에 정합니다

CMS 가 표현할 수 없는 디자인은 배포된 뒤에도 계속 협상 대상으로 남습니다. 어디까지 편집자가 바꿀 수 있는지를 먼저 정하면 그 협상 자체가 사라집니다.

디자이너 3분 읽기

테마 · 플러그인 입문

업데이트가 멈춘 플러그인을 판별하는 기준

마지막 업데이트 날짜 하나로는 방치를 판정할 수 없습니다. 판별 신호 다섯 개를 함께 보고, 대체 불가라면 격리 조건이라도 걸어야 합니다.

기획자 · 운영 · 관리자 2분 읽기

테마 · 플러그인 심화

JS 없이 만드는 상호작용과 그것을 안전하게 하는 규칙

details · :target · :focus-within · :has() · 스크롤 타임라인으로 상당수의 상호작용이 스타일시트 안에서 끝납니다. 안전하게 만드는 규칙은 하나입니다 — 기본값이 완성된 상태여야 합니다.

디자이너 6분 읽기

₩270,000 · 신청하기