Theming, Style guide, Lexicon

Theming

같은 컴포넌트를 다른 시각으로 보여주는 시스템입니다. 보통 CSS 변수로 색, 폰트, 간격을 정의하고 변수만 바꿉니다.

:root {
  --primary: #1589EE;
}
[data-theme="dark"] {
  --primary: #4DB8FF;
}

Dark mode가 가장 흔한 theming 사례입니다. 그 외 사용자 맞춤 색, 화이트 라벨링이 있습니다.

Style guide

브랜드의 시각 정체성을 정리한 문서입니다. 1923년 New York Times Style Book에서 어원이 옵니다. 원래는 글쓰기 가이드였지만 디자인에도 확장됐습니다.

내용입니다.

• 로고 사용법.
• 색 팔레트.
• 폰트 시스템.
• 톤 앤 매너.
• 사진 스타일.

Component library보다 상위 개념입니다. 추상적 원칙.

Lexicon

라틴어/그리스어 lexikon (단어)에서 유래합니다. 어휘집, 사전입니다.

UI에서는 Liferay가 본인 디자인 시스템을 Lexicon이라 명명했습니다. 다른 회사도 비슷한 이름을 사용합니다. Microsoft의 Fluent도 비슷한 발상입니다.

용어집(lexicon)이라는 의미가 디자인 시스템의 본질을 잘 표현합니다. 공통 어휘로 디자인을 통일하는 것입니다.

셋의 관계

Style guide (추상적 원칙)
  ↓
Design system (구체적 패턴 + 컴포넌트)
  ↓
Theming (구체적 변형)

바이브 메이커가 챙길 한 가지

처음부터 거대한 style guide 만들 필요 없습니다. 5~10가지 핵심 규칙(색, 폰트, 간격, 톤)을 한 페이지로 정리하면 충분합니다. 그게 자라면서 design system이 됩니다.

관련

Design tokens · Material Design · Component library