사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
SEED Design (당근) vs Toss Design System (TDS)
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — SEED Design (당근) 0, Toss Design System (TDS) -1. 온도감 — SEED Design (당근) 1, Toss Design System (TDS) 0. 시대감 — SEED Design (당근) 0, Toss Design System (TDS) 0. 격식 — SEED Design (당근) 1, Toss Design System (TDS) 2.
나란히 놓고 보기
SEED Design (당근)
- YEAR
- 2021
- BY
- 당근마켓 (Karrot)
- MOOD
- 따뜻한 · 친근·발랄 · 신뢰감
Toss Design System (TDS)
- YEAR
- 2018
- BY
- Toss (비바리퍼블리카)
- MOOD
- 미니멀 · 신뢰감
주요 특징
SEED Design (당근)
- Radix 기반 시맨틱 컬러 토큰 시스템
- Stackflow 네비게이션 프레임워크
- React·React Native·iOS·Android 멀티 플랫폼
- 접근성(a11y) 내장 컴포넌트
- 오픈소스 (MIT 라이선스)
Toss Design System (TDS)
- OKLCH 기반 균일 명도 컬러 시스템
- 파생 가능한 테마 시스템
- 시맨틱 토큰 자동화 파이프라인
- 모바일 우선 접근성 설계
- 11개 핵심 TDS 컴포넌트
장점과 한계
SEED Design (당근)
장점
- MIT 오픈소스 — 자유로운 커스터마이징 및 상업적 사용 가능
- React·React Native·iOS·Android 4개 플랫폼 동시 지원
- Stackflow로 앱 같은 네비게이션 경험 제공
- Radix 기반 시맨틱 토큰으로 라이트/다크 모드 자동 대응
- 접근성(WCAG 2.1 AA) 기본 내장
한계
- 하이퍼로컬/커뮤니티 도메인에 최적화되어 B2B에는 커스터마이징 필요
- Stackflow 의존성으로 네비게이션 패턴 변경 시 제약
- 자체 폰트(Karrot Sans) 미공개로 대체 폰트 필요
Toss Design System (TDS)
장점
- OKLCH 명도 시스템으로 모든 색상 조합에서 균일한 대비 보장
- 디자이너가 Figma → GitHub PR로 직접 토큰 배포 가능
- 커스텀 UI 대비 3~5배 빠른 개발 속도
- 라이트/다크모드 자동 전환 + 저해상도 디바이스 대응
- 테마 파생으로 브랜드 컬러만 바꿔도 접근성 보장
한계
- 오픈소스가 아닌 내부 시스템 — 앱인토스 파트너만 제한적 사용 가능
- 토스 Product Sans 등 자체 폰트 의존도 높음
- 금융 도메인 최적화로 타 도메인 적용 시 커스터마이징 필요
역사와 배경
SEED Design (당근)
2021년 당근마켓이 하이퍼로컬 서비스 확장에 따라 seed-design v1을 오픈소스로 공개하였고, 2024년 seed-design v2로 전면 리뉴얼하며 React Aria 기반 접근성 강화, Stackflow 네비게이션, 멀티 플랫폼 토큰 시스템을 도입했습니다.
Toss Design System (TDS)
2018년 비바리퍼블리카가 간편송금앱에서 금융 슈퍼앱으로 확장하며 구축한 디자인 시스템. 2024년 7년 만에 OKLCH 기반 컬러 시스템을 전면 개편하고, Style Dictionary 기반 토큰 자동화 파이프라인과 파생 가능한 테마 시스템을 도입하며 System of System으로 진화했습니다.
접근성
SEED Design (당근)
React Aria 기반으로 키보드 네비게이션, 스크린 리더, 포커스 관리가 컴포넌트에 내장되어 있으며, 시맨틱 컬러 토큰으로 라이트/다크 모드에서 WCAG 2.1 AA 기준 명도 대비를 자동으로 충족합니다.
Toss Design System (TDS)
OKLCH 색공간으로 모든 색상 스케일에서 인지적으로 균일한 명도를 보장하며, APCA(Advanced Perceptual Contrast Algorithm) 기준의 다크모드 명도 보정, 저해상도 디바이스 대응, iOS/Android '더 큰 텍스트' 접근성 설정을 지원합니다.
자주 묻는 질문
SEED Design (당근) vs Toss Design System (TDS), 무엇이 다른가요?
SEED Design (당근) — 당근(Karrot)이 개발한 오픈소스 디자인 시스템으로, 하이퍼로컬 커뮤니티 서비스를 위한 따뜻하고 친근한 UX를 제공합니다. React·React Native·iOS·Android 멀티 플랫폼을 지원하며, Radix 기반 시맨틱 컬러 토큰, Stackflow 네비게이션, 접근성 내장 컴포넌트를 갖추고 있습니다. Toss Design System (TDS) — OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다. 무드 좌표에서 가장 벌어지는 축은 밀도입니다 — SEED Design (당근) 쪽은 중간 쪽에, Toss Design System (TDS) 쪽은 여백 쪽에 서 있습니다.
언제 SEED Design (당근) 쪽, 언제 Toss Design System (TDS) 쪽을 골라야 하나요?
모바일 중심 C2C 커뮤니티 서비스 · 따뜻하고 친근한 브랜드 경험이 필요한 앱 · 멀티 플랫폼 동시 출시가 필요한 스타트업 같은 화면이라면 SEED Design (당근) 쪽이 오래 버팁니다. 반대로 모바일 중심 B2C 금융 서비스 · 다수 브랜드를 수용하는 슈퍼앱 플랫폼 · 접근성과 일관성이 핵심인 대규모 프로덕트 쪽 그림이라면 Toss Design System (TDS) 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
SEED Design (당근) vs Toss Design System (TDS), 장단점은 어떻게 갈리나요?
SEED Design (당근) 쪽 — 강점은 MIT 오픈소스 — 자유로운 커스터마이징 및 상업적 사용 가능 · React·React Native·iOS·Android 4개 플랫폼 동시 지원, 짚고 갈 한계는 하이퍼로컬/커뮤니티 도메인에 최적화되어 B2B에는 커스터마이징 필요 · Stackflow 의존성으로 네비게이션 패턴 변경 시 제약입니다. Toss Design System (TDS) 쪽 — 강점은 OKLCH 명도 시스템으로 모든 색상 조합에서 균일한 대비 보장 · 디자이너가 Figma → GitHub PR로 직접 토큰 배포 가능, 짚고 갈 한계는 오픈소스가 아닌 내부 시스템 — 앱인토스 파트너만 제한적 사용 가능 · 토스 Product Sans 등 자체 폰트 의존도 높음입니다.