TDS 디자인 시스템

Mordy와 Morit이 함께 쓰는 디자인 규칙이다. 화면을 만드는 데 필요한 값(토큰)과 부품(컴포넌트)을 이름으로 정해 두었다. 서비스가 달라도 이름과 모양은 같고, 색 값만 바뀐다.

이 페이지의 목차

이 문서는 사람과 AI가 모두 읽고 바로 쓸 수 있게 썼다. 모든 값은 코드에 있는 그대로이고, 모든 컴포넌트는 같은 순서로 설명한다.

같은 컴포넌트에 서비스 색만 입혔다. 아래 선택기로 바꿔 본다.

TDS가 무엇인가#

토큰은 색, 글자 크기, 간격 같은 값에 붙인 이름이다. 예: primary는 “주 행동에 쓰는 색”이다. 코드에 HEX 값을 직접 쓰지 않고 이름을 쓴다.
컴포넌트는 버튼, 입력 칸, 시트처럼 토큰으로 만든 부품이다. 현재 82개 문서에 101개 컴포넌트를 담았다.
규칙은 색 조합, 간격, 정렬을 어떻게 쓰는지에 대한 기준이다. 모든 규칙은 숫자와 조건으로 적었다.

서비스는 같은 디자인 시스템에서 색 토큰 값만 바꿔 쓴다. 간격, 글자, 모서리, 그림자, 모션과 컴포넌트의 모양은 모든 서비스에서 같다.

서비스 목록
서비스	설명	주색 (라이트)	색 값을 읽은 곳
Mordy	사진으로 찍은 학습 자료를 문제로 바꿔 복습하게 해 주는 앱	#1F7BFF	`Mordy/apps/mobile/src/ui/tokens.ts` (React Native 토큰(tokens.ts))
Morit	메모, 파일, AI, 플러그인을 한곳에 모으는 개인 작업 앱	#00856A	`Moring_Morit/lib/core/morit_theme.dart` (Flutter Material 3 ColorScheme)

화면 아래의 서비스 색 선택기에서 서비스를 고르면, 이 문서의 모든 색 견본과 컴포넌트 미리보기가 새로고침 없이 바로 바뀐다. 선택은 주소(?service=morit)와 브라우저 저장소에 남는다. 링크를 공유하면 같은 색으로 열린다.

서비스를 더 추가하는 방법은 색상 페이지의 “새 서비스 추가”에 있다.

서비스를 정한다. 만드는 화면이 Mordy인지 Morit인지 정한다. 색 값은 이것으로 정해진다.
토큰을 불러온다. 웹은 tokens.css를 불러오고 data-tds-service를 붙인다. 값 전체는 tokens.json에 있다.
웹 시작 코드
```
<link rel="stylesheet" href="https://developers.moring.co/tds/tokens.css">
<html data-tds-service="mordy">
```
컴포넌트를 찾는다. 컴포넌트 목록에서 필요한 부품을 찾아 “사용 방법”의 코드를 복사한다. 앱 코드는 React Native(@/ui/...) 기준이다.
규칙을 확인한다. 사용 규칙에서 색 조합, 간격, 정렬 기준을 확인한다.

토큰 값과 컴포넌트 속성은 손으로 옮기지 않고 코드를 읽어서 만든 파일에서 가져온다. 옮겨 적다가 생기는 오타가 없다.
속성 표의 이름, 타입, 기본값은 코드에서 읽은 것이다. 설명이 빠진 속성이 있으면 빌드가 실패한다(npm run tds:check).
코드와 설계 문서가 다를 때는 코드를 따른다. 예를 들어 설계 문서는 아이콘 선 두께를 1.75로 적었지만 코드는 2.2를 쓰므로 2.2를 적었다.
앱에서 쓰지 않는 토큰과 4.5:1에 못 미치는 색 조합도 숨기지 않고 표시한다.