색상

읽는 방법#

• 화면 오른쪽 아래의 서비스 색 선택기(Mordy, Morit)를 바꾸면 이 페이지의 모든 색 견본과 HEX 값이 바로 바뀐다.
• 모든 토큰에는 라이트(밝은 화면)와 다크(어두운 화면) 값이 있다. 두 값을 같은 줄에 나란히 적었다.
• 토큰 이름은 코드의 color.primary와 같다. 웹에서는 CSS 변수 --tds-primary로 쓴다.
• 웹 확장 표시가 있는 토큰은 앱 코드(tokens.ts)에는 없고, 웹에서 글자 대비를 맞추려고 TDS가 더한 토큰이다.
• 앱 미사용 표시가 있는 토큰은 앱 코드에 정의만 있고 아직 읽는 곳이 없다.

서비스별 주요 색#

선택기와 상관없이 두 서비스의 값을 한눈에 비교하는 표다. 나머지 모든 토큰은 아래 그룹별 표에 있다.

배경과 면#

화면, 패널, 입력 칸처럼 넓은 면에 쓰는 색이다.

선#

구분선과 테두리에 쓰는 색이다.

글자#

글자와 아이콘에 쓰는 색이다.

주색#

서비스마다 값이 가장 크게 달라지는 색이다. 버튼, 링크, 선택 표시에 쓴다.

탭과 구분 컨트롤#

탭, 칩, 구분 컨트롤의 바탕에 쓰는 색이다.

상태#

성공, 주의, 오류를 알리는 색이다. 색만으로 알리지 않고 아이콘과 글자를 함께 쓴다.

덮개와 고정색#

화면을 덮거나, 어떤 서비스에서도 바뀌지 않는 색이다.

과목 팔레트#

과목을 구분하는 8가지 색이다. 데이터를 구분하는 색이라서 서비스가 바뀌어도 값이 같다. 각 색은 다섯 값으로 이루어진다. 글리프는 아이콘과 링의 색, 옅은 면은 아이콘 바탕, 채움은 아이콘 타일의 그라데이션(왼쪽 위에서 오른쪽 아래), 막대는 차트 막대의 색이다.

각 칸에서 위쪽 값이 라이트, 아래쪽 값이 다크다. 채움과 막대는 라이트와 다크가 같다. 다크의 옅은 면은 글리프 색을 16% 투명도로 얹은 값이다.

글자 색 대비#

글자와 바탕의 밝기 차이를 숫자로 나타낸 값이다. 작은 글자(굵은 18.66px 미만)는 4.5:1 이상이어야 읽기 쉽다. 아래 표는 선택한 서비스와 모드의 실제 값으로 계산한 결과다.

Morit 값의 출처#

Morit은 Flutter의 Material 3 색 체계를 쓴다. TDS 토큰은 Mordy의 이름을 기준으로 하므로, Morit의 각 값이 어디에서 왔는지 세 가지로 나누어 적는다.

• 코드 값 Morit 코드에 있는 값을 그대로 가져왔다. Flutter가 자동으로 만드는 색 역할(colorScheme.primaryContainer 같은 것)도 실제 앱을 실행해서 읽은 값이다.
• 계산 Morit에 같은 역할이 없어서, 코드 값 둘을 섞어 만들었다. 섞는 비율을 같이 적었다.
• 공통 Morit 코드에 정한 값이 없어서 Mordy와 같은 값을 쓴다. 어둠막, 흰색, 검정이 여기에 속한다.

코드에서 쓰기#

앱 (React Native, Mordy)

import { color } from '@/ui/tokens';

// 현재 라이트·다크 모드의 값을 돌려준다.
<View style={{ backgroundColor: color.surface }}>
  <Text style={{ color: color.text }}>제목</Text>
</View>

웹 (CSS 변수)

tokens.css를 불러오고, 서비스는 data-tds-service로, 다크 모드는 data-tds-scheme="dark"로 정한다.

@import url('https://developers.moring.co/tds/tokens.css');

.card {
  background: var(--tds-surface);
  color: var(--tds-text);
  border: 1px solid var(--tds-line);
}

<html data-tds-service="morit" data-tds-scheme="dark">

값 전체가 필요하면 tokens.json을 읽는다. Flutter에서 Morit을 만들 때는 위 “Morit 값의 출처” 표에서 코드 값(colorScheme.*)을 그대로 쓴다.

새 서비스 추가#

서비스를 추가하려면 색 값만 정하면 된다. 간격, 글자, 모서리, 그림자, 컴포넌트 코드는 그대로 쓴다.

1. 값을 정한다. src/tds/data/services.ts의 services 목록에 항목을 하나 더한다. 라이트와 다크 모두 이 페이지의 53개 토큰(과 웹 확장 토큰)을 빠짐없이 채운다.

2. 확인한다. npm run tds:check를 실행한다. 빠진 토큰이나 글자 대비가 4.5:1에 못 미치는 웹 확장 값이 있으면 알려 준다.

3. 끝이다. 서비스 색 선택기, CSS 변수, 이 페이지의 표, tokens.json, tokens.css, 마크다운 문서가 목록을 읽고 자동으로 늘어난다.