Design System
디자인 시스템
한 회사·서비스의 화면을 일관되게 유지하기 위해 색·글꼴·버튼·간격 같은 디자인 요소를 표준으로 정리한 '디자인의 약속집'으로, 디자이너와 개발자가 같은 부품을 공유해 빠르게 작업할 수 있게 해 줍니다.
쉽게 말하면?
회사 화면이 100개라면 버튼이 100가지 모양이면 안 됩니다. 디자인 시스템은 '우리 회사 버튼은 이 모양, 이 색, 이 폰트' 같은 약속을 한 곳에 모은 라이브러리입니다. 한국 토스의 'TDS', 카카오의 'Kakao Design System', 미국 IBM의 'Carbon', Google의 'Material Design'이 대표적입니다. AI 시대에는 v0·Cursor 같은 도구가 디자인 시스템 컴포넌트를 가져다 화면을 자동 생성합니다.
한 줄로 비유하면?
디자인 시스템은 레고 부품 세트입니다. 정해진 부품으로 무엇이든 빠르게 조립할 수 있고, 새로 만든 작품들이 자연스럽게 같은 분위기를 갖습니다.
어디에 쓰이나?
토스 TDS
토스는 1,200개 이상의 Figma 컴포넌트와 React 코드를 함께 관리합니다.
결과: 디자이너·개발자가 회의 없이 같은 부품을 가져다 씁니다.
shadcn/ui · 오픈소스 표준
미국 1인 개발자 Shadcn이 만든 오픈소스 디자인 시스템.
결과: 비전공자도 검증된 디자인 시스템을 무료로 가져다 쓸 수 있습니다.
주의할 점은?
디자인 시스템이 AI 시대에 더 중요해진 이유는 세 가지입니다.
첫째, AI 코드 생성의 정확도가 높아집니다. v0·Cursor에게 '버튼' 만들어 달라고 하면 디자인 시스템 패턴을 따라 일관된 결과를 줍니다.
둘째, 회사 규모를 막론하고 표준이 됐습니다. 1인 스타트업도 shadcn/ui 같은 오픈소스를 가져다 쓰면 디자인 시스템을 운영하는 것과 같은 효과를 봅니다.
셋째, 한국에서 운영하는 디자인 시스템이 늘었습니다. 토스 TDS, 당근 Seed, 카카오 KDS가 모두 오픈소스 또는 일부 공개로 한국 IT 생태계 자산이 됐습니다.
어떻게 발전해 왔나?
관련 태그
참고 자료
- shadcn/ui — 오픈소스 디자인 시스템 공식 대표 페이지 · shadcn · 2026 접속 — https://ui.shadcn.com/
- Material Design — Google 표준 · Google · 2025 — https://m3.material.io/
- 토스 디자인 — 한국 대표 사례 · 토스 · 2024 — https://design.toss.im/
- IBM Carbon Design System — 기업급 표준 · IBM · 2025 — https://carbondesignsystem.com/
- Atomic Design 책 — 디자인 시스템 표준 교과서 · Brad Frost · 2016 — https://atomicdesign.bradfrost.com/
대표 출처
shadcn/ui · Material Design · 토스 TDS이 페이지에 대한 의견을 남겨주세요
여러분의 의견은 다음 갱신에 반영됩니다.