본문 바로가기
👩🏻‍💻 Front-end/🌐 Web

디자인 시스템의 필요성과 사례

by su-no 2024. 5. 17.

디자인 시스템이란?

  • 디자인 시스템은 웹/모바일 인터페이스 디자인 시 반복되어 활용되는 컴포넌트, 스타일, 리소스 등을 모아 만든 일종의 가이드라인입니다. [2], [3]
  • 디자인 시스템에는 컬러, 타이포그래피, 아이콘, 버튼, 레이아웃 등의 디자인 요소와 이를 활용하는 원칙이 포함됩니다. [2], [4]

디자인 시스템의 필요성

  • 일관된 사용자 경험 제공: 디자인 시스템을 통해 웹/모바일 서비스의 일관성 있는 디자인을 유지할 수 있습니다. [4]
  • 개발 효율성 향상: 디자인 시스템의 컴포넌트와 리소스를 재사용함으로써 개발 시간과 비용을 절감할 수 있습니다. [1], [4]
  • 협업 및 유지보수 용이: 디자인 시스템은 디자인과 개발 팀 간 원활한 협업을 가능하게 하며, 서비스 유지보수를 용이하게 합니다. [3], [4]

기업들의 디자인 시스템 사례

  1. Atlassian의 디자인 시스템 - 'Atlassian Design System'

    • Atlassian은 협업 도구 제공 기업으로, 자사의 디자인 시스템을 공개하고 있습니다. [3]
    • 이 시스템은 브랜드 가이드라인, 디자인 원칙, UI 컴포넌트, 코드 스니펫 등을 포함하고 있습니다.
  2. 토스의 디자인 시스템 - 'Toss Design System'

    • 토스는 금융 서비스 기업으로, 자사의 디자인 시스템을 공개하고 있습니다. [2]
    • 이 시스템은 브랜드 아이덴티티, 컬러 팔레트, 타이포그래피, UI 컴포넌트 등을 포함하고 있습니다.
  3. 구글의 디자인 시스템 - 'Material Design'

    • 구글은 자사의 디자인 언어인 '머티리얼 디자인'을 제안했습니다. [1]
    • 이 시스템은 웹, 안드로이드, iOS 등 다양한 플랫폼에 적용될 수 있는 디자인 가이드라인을 제공합니다.
  4. IBM의 디자인 시스템 - 'Carbon Design System'

    • IBM은 자사의 디자인 시스템인 '카본 디자인 시스템'을 공개하고 있습니다. [4]
    • 이 시스템은 브랜드 아이덴티티, UI 컴포넌트, 개발 가이드라인 등을 포함하고 있습니다.