[Apps in Toss] Phase 2. TDS

1. TDS의 핵심 개념

TDS는 토스의 디자이너와 개발자가 공유하는 **'공통 언어'**입니다. 텍스트 크기, 색상, 버튼의 모양, 애니메이션 수치 등이 모두 정의되어 있어, 개발자는 복잡한 CSS나 UI 로직을 직접 짤 필요 없이 컴포넌트를 호출하는 것만으로 토스 특유의 사용자 경험(UX)을 그대로 구현할 수 있습니다.

"TDS는 가이드라인이 아니라 시스템입니다."

가이드라인이 "이렇게 만드세요"라는 규칙이라면, TDS는 "이미 만들어진 이 부품을 쓰세요"라는 도구 모음입니다.

---

2. TDS의 주요 구성 요소

앱인 토스 개발자 센터에서는 크게 두 가지 라이브러리를 제공합니다.

분류	명칭	상세 내용
Foundation	TDS Foundation	폰트(Typography), 컬러 팔레트, 아이콘, 여백(Spacing) 등 가장 기초적인 디자인 요소
Components	TDS Components	버튼, 리스트(List), 입력창(Input), 바텀 시트(Bottom Sheet) 등 실제 화면을 구성하는 단위

---

3. 왜 TDS를 써야 하나요?

사용자 입장과 개발자 입장 모두에서 명확한 장점이 있습니다.

• 일관된 사용자 경험: 사용자가 토스 앱을 쓰다가 미니 앱으로 들어왔을 때 이질감을 느끼지 않게 합니다.
• 개발 속도 향상: 커스텀 UI를 직접 만드는 것보다 3~5배 빠르게 화면을 구성할 수 있습니다.
• 품질 보장: 토스에서 이미 검증된 인터랙션과 접근성이 적용되어 있어, 별도의 UI 최적화 고민을 덜어줍니다.

---

4. 앱인 토스에서의 특징

이미 .ait 번들 요구사항 등을 알고 계시겠지만, 앱인 토스 환경에서 TDS는 더욱 강력하게 작동합니다.

• 피그마(Figma) 연동: 피그마에서 [🔵 파란색 원] 표시가 된 컴포넌트는 개발 문서에 코드가 이미 준비되어 있다는 뜻입니다. 디자이너가 배치하면 개발자는 해당 코드를 그대로 복사해 쓸 수 있습니다.
• 제한적 커스텀: [🔴 빨간색 원] 표시가 된 컴포넌트는 토스의 브랜드 아이덴티티를 위해 디자인 커스텀이 허용되지 않습니다.