테마 · 플러그인 입문
디자인 토큰이란 무엇인가 — 색 목록과 토큰의 차이
시안에 붙은 색 견본과 디자인 토큰은 값이 같아도 다른 물건입니다. 차이는 값이 아니라 이름에 있고, 그 이름이 6개월 뒤의 수정 비용을 정합니다.
Technote
워드프레스에 디자인 시스템 심기
색과 간격을 매번 다시 정하지 않는 구조 만들기. 디자인 토큰을 워드프레스 테마에 실제로 앉히고, 편집자가 무너뜨릴 수 없게 만드는 방법을 다룹니다.
글 8편
테마 · 플러그인 입문
브랜드색 하나에서 필요한 변형을 전부 뽑는 법
브랜드색 하나로는 화면을 그릴 수 없습니다. 호버 · 눌림 · 틴트 배경 · 비활성까지 필요한 변형을 규칙으로 뽑아내면, 화면마다 색을 새로 고르는 일이 없어집니다.
테마 · 플러그인 입문
간격 척도 — 4의 배수가 만드는 리듬과 예외의 비용
간격을 매번 눈으로 정하면 12 · 13 · 14 · 15 가 한 화면에 섞입니다. 척도를 정하면 선택이 빨라지고, 화면이 저절로 정돈됩니다.
테마 · 플러그인 실무
CSS 커스텀 프로퍼티로 토큰 심기
토큰 목록을 :root 한 곳에 두고 컴포넌트가 그것만 참조하게 만들면, 사이트 전체의 색과 간격이 파일 하나에서 움직입니다.
테마 · 플러그인 실무
theme.json 이 하는 일 — 블록 에디터로 팔레트를 넘기는 통로
theme.json 은 스타일 파일이 아니라 통로입니다. 우리 팔레트를 편집 화면에 넘겨서, 편집자가 자유 색상환 대신 우리 시스템에서 고르게 만듭니다.
테마 · 플러그인 실무
편집자에게 임의 색을 주지 않는 설정
색 선택기를 열어 두면 6개월 뒤 브랜드색과 미묘하게 다른 색이 사이트에 쌓입니다. 편집자의 잘못이 아니라 시스템이 물어봤기 때문입니다.
테마 · 플러그인 심화
테마가 가진 토큰과 우리 토큰의 경계 — 브릿지 한 파일
요즘 테마는 자기 토큰을 수백 개 갖고 옵니다. 그것을 직접 고치면 업데이트마다 사라지고, 무시하면 화면이 두 시스템으로 갈립니다. 답은 브릿지 한 파일입니다.
개발 워크플로우 심화
디자인 시스템 문서 — 코드와 함께 사는 문서만 살아남습니다
따로 만든 디자인 문서는 두 달이면 코드와 어긋납니다. 문서가 살아남는 조건은 분량이 아니라 위치이고, 적어야 할 것은 값이 아니라 이유입니다.