디자인 시스템이란?
- 디자인 시스템은 웹/모바일 인터페이스 디자인 시 반복되어 활용되는 컴포넌트, 스타일, 리소스 등을 모아 만든 일종의 가이드라인입니다. [2], [3]
- 디자인 시스템에는 컬러, 타이포그래피, 아이콘, 버튼, 레이아웃 등의 디자인 요소와 이를 활용하는 원칙이 포함됩니다. [2], [4]
디자인 시스템의 필요성
- 일관된 사용자 경험 제공: 디자인 시스템을 통해 웹/모바일 서비스의 일관성 있는 디자인을 유지할 수 있습니다. [4]
- 개발 효율성 향상: 디자인 시스템의 컴포넌트와 리소스를 재사용함으로써 개발 시간과 비용을 절감할 수 있습니다. [1], [4]
- 협업 및 유지보수 용이: 디자인 시스템은 디자인과 개발 팀 간 원활한 협업을 가능하게 하며, 서비스 유지보수를 용이하게 합니다. [3], [4]
기업들의 디자인 시스템 사례
Atlassian의 디자인 시스템 - 'Atlassian Design System'
- Atlassian은 협업 도구 제공 기업으로, 자사의 디자인 시스템을 공개하고 있습니다. [3]
- 이 시스템은 브랜드 가이드라인, 디자인 원칙, UI 컴포넌트, 코드 스니펫 등을 포함하고 있습니다.
토스의 디자인 시스템 - 'Toss Design System'
- 토스는 금융 서비스 기업으로, 자사의 디자인 시스템을 공개하고 있습니다. [2]
- 이 시스템은 브랜드 아이덴티티, 컬러 팔레트, 타이포그래피, UI 컴포넌트 등을 포함하고 있습니다.
구글의 디자인 시스템 - 'Material Design'
- 구글은 자사의 디자인 언어인 '머티리얼 디자인'을 제안했습니다. [1]
- 이 시스템은 웹, 안드로이드, iOS 등 다양한 플랫폼에 적용될 수 있는 디자인 가이드라인을 제공합니다.
IBM의 디자인 시스템 - 'Carbon Design System'
- IBM은 자사의 디자인 시스템인 '카본 디자인 시스템'을 공개하고 있습니다. [4]
- 이 시스템은 브랜드 아이덴티티, UI 컴포넌트, 개발 가이드라인 등을 포함하고 있습니다.
'👩🏻💻 Front-end > 🌐 Web' 카테고리의 다른 글
Flutter vs React Native 선택 방법. 뭐가 더 좋을까? (0) | 2024.05.18 |
---|---|
챗지피티, 퍼플렉시티, 포 특징/장단점 비교 (Chat GPT, Perplexity, Poe) (0) | 2024.05.18 |
GPT-4o (omni) 모델의 특징, 활용 방안 (0) | 2024.05.17 |
[React Native Xcode에러] Command PhaseScriptExecution failed with a nonzero exit code (0) | 2024.05.07 |
구글의 플러터 팀 해체와 프론트엔드의 미래 (0) | 2024.05.03 |