Design System 4장 카드뉴스

한 회사·서비스의 화면을 일관되게 유지하기 위해 색·글꼴·버튼·간격 같은 디자인 요소를 표준으로 정리한 '디자인의 약속집'으로, 디자이너와 개발자가 같은 부품을 공유해 빠르게 작업할 수 있게 해 줍니다.

회사 화면이 100개라면 버튼이 100가지 모양이면 안 됩니다. 디자인 시스템은 '우리 회사 버튼은 이 모양, 이 색, 이 폰트' 같은 약속을 한 곳에 모은 라이브러리입니다. 한국 토스의 'TDS', 카카오의 'Kakao Design System', 미국 IBM의 'Carbon', Google의 'Material Design'이 대표적입니다. AI 시대에는 v0·Cursor 같은 도구가 디자인 시스템 컴포넌트를 가져다 화면을 자동 생성합니다.

[토스 TDS] 구분: 토스는 1,200개 이상의 Figma 컴포넌트와 React 코드를 함께 관리합니다. 수치: 토스 디자인 컨퍼런스 2024 발표 기준 신규 화면 출시 시간 60% 단축 {{src:토스 디자인|https://design.toss.im/}}. 결과: 디자이너·개발자가 회의 없이 같은 부품을 가져다 씁니다. [shadcn/ui · 오픈소스 표준] 구분: 미국 1인 개발자 S