해외 디자인 시스템 70개 총정리
디자인 시스템 시리즈
Apple · Microsoft · Adobe해외 디자인 시스템 총정리
70여 개의 글로벌 디자인 시스템의 종류와 특징에 대해 총정리하였습니다. 유명하고 참고할 만한 디자인 시스템을 먼저 소개하고, 기타 디자인 시스템을 정리하였습니다. 그 전에 참고할 만한 좋은 디자인 시스템이란 무엇일지 그 기준을 알아보겠습니다.
좋은 디자인 시스템의 기준
좋은 디자인 시스템은 일관성과 효율성을 높이고, 개발자와 디자이너 간의 협업을 원활하게 만들어 줍니다. 주요 조건은 다음과 같습니다.
일관성: 디자인 요소가 다양한 제품에서 동일하게 적용되어야 합니다.
확장성: 시스템이 쉽게 확장 가능하고 새로운 요소 추가에 무리가 없어야 합니다.
사용성: 디자이너와 개발자가 직관적으로 이해할 수 있도록 문서화되어야 합니다.
유연성: 다양한 요구 사항에 맞게 디자인 시스템을 조정할 수 있어야 합니다.
접근성: 모든 사용자, 특히 장애인을 위한 접근성 기준을 따라야 합니다.
효율성: 반복 작업을 줄이고 재사용성을 극대화하여 빠른 프로세스를 지원해야 합니다.
일관된 커뮤니케이션: 각 컴포넌트의 목적과 사용 방법에 대한 명확한 가이드가 필요합니다.
최고의 해외 디자인 시스템
다음은 좋은 디자인 시스템의 기준을 만족시키는 대표적인 기업들의 디자인 시스템입니다.
01 애플 | Human Interface Guideline
직관적이고 유려한 사용자 경험을 중시하며, 애니메이션과 제스처 기반의 상호작용을 강조하며, iOS, macOS, watchOS와 같은 애플의 모든 플랫폼 및 애플리케이션에 적용됩니다.
02-1 구글 | Material Design 3
사용자의 개별 경험을 반영하여 개인화된 인터페이스를 제공하며, 다이내믹 컬러와 같은 새로운 커스터마이징 기능을 강조하며, Android와 웹 애플리케이션 등 다양한 구글 제품에 적용됩니다.
02-2 구글 | Material Design 2
Material Design 3의 이전 버전입니다. 현실 세계의 물리적 속성을 디지털 디자인에 반영하여 입체적이고 직관적인 사용자 경험을 제공하며, 일부 요소들은 여전히 참고하기 좋습니다.
03 마이크로소프트 | Fluent 2
적응형 인터페이스를 강조하고 모듈식 디자인을 통해 사용 환경에 맞춰 유연하게 변화하며, Windows, Office, Microsoft Teams 등 다양한 마이크로소프트 제품에 적용됩니다.
04 삼성전자 | One UI 6
사용자 친화적이고 간결한 인터페이스를 제공하며 한 손 조작을 최적화하여, Galaxy S, Galaxy Z 및 Galaxy Tab 시리즈와 같은 다양한 모바일 기기에 적용됩니다.
05 IBM | Carbon Design System
모듈화 된 디자인을 통해 다양한 애플리케이션에서 일관성을 제공하며, IBM Cloud, Watson, Red Hat OpenShift와 같은 기업용 소프트웨어에 적용됩니다.
06 Salesforce | Lightning Design System
고객 맞춤형 애플리케이션 개발을 지원하는 직관적인 컴포넌트와 일관된 스타일 가이드를 제공하며, Salesforce의 Sales Cloud와 Service Cloud 등 다양한 서비스에 적용됩니다.
07 Atlassian | Atlassian Design System
팀 협업 도구에 최적화된 사용자 인터페이스 구성 요소와 가이드라인을 제공하여, Jira, Confluence 및 Trello와 같은 제품에 일관된 경험을 보장합니다.
08 Adobe | Spectrum
Adobe 제품 간의 통합성을 높이는 데 중점을 두며, Adobe Creative Cloud와 Experience Cloud 등 다양한 제품에 적용됩니다.
09 Shopify | Polaris
상점 운영과 관리에 최적화된 디자인 언어와 컴포넌트를 제공하여 사용자 경험을 향상시키며, Shopify Admin, Shopify POS 및 Shopify App Store와 같은 제품에 적용됩니다.
10 UBER | Base Web
Base Web은 Uber의 사용자 경험을 일관되게 유지하기 위해 모듈식 컴포넌트와 디자인 시스템을 제공하며, Uber Eats, Uber Freight와 같은 다양한 서비스에 적용됩니다.
기타 해외 디자인 시스템
다음은 해외 기타 유명 기업들의 디자인 시스템입니다. 위 디자인 시스템에 비하여 인지도가 낮으나, 기업 규모 및 특성이 따라 어떤 특징을 지니는지 확인할 수 있습니다.
11 Spotify | Backstage
Uber의 사용자 경험을 일관되게 유지하기 위해 모듈식 컴포넌트와 디자인 시스템을 제공하며, Uber Eats, Uber Freight와 같은 다양한 서비스에 적용됩니다.
12 GitHub | Primer
Primer는 GitHub의 사용자 경험을 일관되게 유지하기 위해 모듈식 컴포넌트와 디자인 원칙을 제공하며, GitHub 웹사이트와 다양한 애플리케이션에 적용됩니다.
13 GitLab | Pajamas
Pajamas는 GitLab의 사용자 경험을 개선하기 위해 디자인 원칙과 UI 컴포넌트를 제공하며, GitLab의 웹 애플리케이션 및 제품에 적용됩니다. (GitHub와는 다른 기업입니다.)
14 SAP | Fiori Design System
비즈니스 애플리케이션에 최적화된 사용자 경험을 제공하며, SAP S/4HANA와 같은 다양한 솔루션에 적용됩니다.
15 Cisco | Momentum
Momentum은 협업과 커뮤니케이션을 중시하며, Cisco Webex와 같은 플랫폼에 최적화된 사용자 친화적인 경험을 제공합니다.
16 Pinterest | Gestalt
Gestalt는 시각적 요소와 콘텐츠 중심의 디자인으로 사용자가 영감을 쉽게 얻을 수 있도록 하며, Pinterest의 웹사이트와 모바일 앱에 최적화되어 적용됩니다.
17 Wix | Wix Design System
Wix Design System은 사용자가 웹사이트를 손쉽게 만들 수 있도록 직관적이고 유연한 UI 컴포넌트를 제공하며, Wix 플랫폼의 웹사이트 빌더와 다양한 애플리케이션에 적용됩니다.
18 Mailchimp | Mailchimp Design System
Mailchimp Design System은 친숙한 색상과 일관된 비주얼 스타일을 통해 브랜드 아이덴티티를 강화하며, Mailchimp의 마케팅 플랫폼과 다양한 애플리케이션에 적용됩니다.
19 Audi | Audi Design Guidelines
브랜드의 고유한 미학을 강조하며, 차량의 디지털 인터페이스와 웹사이트에 일관된 사용자 경험을 제공합니다.
20 LINE | LINE Design System
사용자 친화적인 커뮤니케이션 경험을 제공하며, LINE의 메시징 앱과 다양한 서비스에 최적화된 디자인 원칙과 컴포넌트를 지원합니다.
21 Brainly | Pencil
Pencil은 사용자 친화적인 교육 경험을 위해 직관적인 UI 요소와 디자인 원칙을 제공하며, Brainly 플랫폼과 관련된 다양한 교육 서비스에 적용됩니다.
22 Nederlandse Spoorwegen | Nessie Design System
Nessie Design System은 대중교통 서비스를 위한 사용자 경험을 최적화하며, Nederlandse Spoorwegen의 웹사이트와 모바일 애플리케이션, 그리고 전반적인 고객 인터페이스에 적용됩니다.
23 Skyscanner | Backpack
여행 검색 경험을 향상시키기 위해 직관적인 디자인 요소와 사용자 친화적인 컴포넌트를 제공하며, Skyscanner의 웹사이트와 모바일 애플리케이션에 적용됩니다.
24 Red Hat | PatternFly
Red Hat은 오픈 소스 소프트웨어 솔루션을 제공하는 기업으로, PatternFly는 Red Hat의 클라우드 및 컨테이너 플랫폼에 적용되어 일관된 사용자 경험을 지원합니다.
25 Instructure | Instructure Design System
Instructure는 교육 기술 솔루션을 제공하는 기업으로, Instructure Design System은 Canvas와 같은 플랫폼에 적용되어 사용자 친화적인 경험을 제공합니다.
26 Ant Group | Ant Design
Ant Group은 디지털 결제 및 금융 서비스 플랫폼을 제공하는 기업으로, Ant Design은 Alibaba의 웹 및 모바일 애플리케이션에 적용되어 일관된 사용자 경험을 지원합니다.
27 Elastic | Elastic UI
Elastic은 데이터 검색 및 분석 솔루션을 제공하는 기업으로, Elastic UI는 Elastic의 웹 애플리케이션과 대시보드에 적용되어 사용자 인터페이스를 일관되게 유지합니다.
28 Pegasystems | Bolt Design System
Pegasystems는 비즈니스 프로세스 자동화 및 고객 경험 솔루션을 제공하는 기업으로, Bolt Design System은 Pegasystems의 애플리케이션에 적용되어 일관된 사용자 경험을 제공합니다.
29 GE | Edison Design System
GE는 다양한 산업 분야에서 혁신적인 기술 솔루션을 제공하는 기업으로, Edison Design System은 GE의 제품과 서비스에 적용되어 사용자 경험을 최적화합니다.
30 Kiwi.com | Orbit Design System
Kiwi.com은 여행 예약 플랫폼을 제공하는 기업으로, Orbit Design System은 Kiwi.com의 웹사이트와 애플리케이션에 적용되어 사용자 친화적인 경험을 지원합니다.
31 Talend | Storybook
Talend는 데이터 통합 및 관리 솔루션을 제공하는 기업으로, Storybook은 Talend의 웹 애플리케이션에 적용되어 개발자와 디자이너 간의 협업을 촉진합니다.
32 Nordhealth | Nord Design System
Nordhealth는 디지털 헬스케어 솔루션을 제공하는 기업으로, Nord Design System은 Nordhealth의 플랫폼에 적용되어 사용자 친화적인 경험을 제공합니다.
33 British Gas | The British Gas Design System
British Gas는 에너지 및 가스 서비스 공급업체로, The British Gas Design System은 고객 서비스 웹사이트와 애플리케이션에 적용되어 일관된 사용자 경험을 지원합니다.
34 Wonderflow | Wanda Design System
Wonderflow는 고객 피드백 분석 플랫폼을 제공하는 기업으로, Wanda Design System은 Wonderflow의 제품에 적용되어 직관적인 사용자 경험을 제공합니다.
35 Vercel | Vercel Geist
Vercel은 프론트엔드 개발 플랫폼을 제공하는 기업으로, Vercel Geist는 Vercel의 웹사이트와 애플리케이션에 적용되어 일관된 디자인 언어를 지원합니다.
36 Office for National Statistics | Design System
Office for National Statistics는 영국의 통계 기관으로, ONS의 웹사이트와 데이터 시각화 도구에 적용되어 접근성과 일관성을 제공합니다.
37 Morningstar | Design System
Morningstar는 투자 리서치 및 데이터 서비스를 제공하는 기업으로, Morningstar의 애플리케이션과 웹사이트에 적용되어 사용자 경험을 최적화합니다.
38 Skandinaviska Enskilda Banken | DesignLibrary
Skandinaviska Enskilda Banken는 스웨덴의 금융 기관으로, DesignLibrary는 SEB의 다양한 디지털 서비스에 적용되어 사용자 경험을 향상시킵니다.
39 uSwitch | uStyle styleguide
uSwitch는 가격 비교 서비스 플랫폼을 제공하는 기업으로, uStyle styleguide는 uSwitch의 웹사이트와 애플리케이션에 적용되어 브랜드 일관성을 유지합니다.
40 VMware | Clarity Design System
VMware는 클라우드 및 가상화 솔루션을 제공하는 기업으로, Clarity Design System은 VMware의 제품에 적용되어 사용자 경험을 개선합니다.
41 Recreational Equipment | Cedar Design System
Recreational Equipment은 아웃도어 장비와 의류를 제공하는 기업으로, Cedar Design System은 REI의 웹사이트와 앱에 적용되어 자연 친화적인 사용자 경험을 제공합니다.
42 Fremtind Forsikring | Jøkul Designsystem
Fremtind Forsikring은 보험 서비스를 제공하는 기업으로, Jøkul Designsystem은 고객 서비스 포털에 적용되어 고객 맞춤형 경험을 지원합니다.
43 Dell | Design System
Dell은 컴퓨터 및 기술 솔루션을 제공하는 기업으로, Dell의 제품 페이지와 서비스에 적용되어 일관된 브랜드 경험을 제공합니다.
44 Sprout Social | Seeds
Sprout Social은 소셜 미디어 관리 플랫폼을 제공하는 기업으로, Seeds는 Sprout Social의 애플리케이션에 적용되어 직관적인 사용자 경험을 제공합니다.
45 Quicken Loans | Spark design system
Quicken Loans는 주택 담보 대출 서비스를 제공하는 기업으로, Spark design system은 Quicken Loans의 웹사이트와 애플리케이션에 적용되어 원활한 사용자 경험을 제공합니다.
46 Segment | Evergreen
Segment는 고객 데이터 플랫폼을 제공하는 기업으로, Evergreen은 Segment의 API와 대시보드에 적용되어 일관된 사용자 경험을 보장합니다.
47 News Corp | NewsKit design system
News Corp는 미디어 및 뉴스 서비스를 제공하는 기업으로, NewsKit은 News Corp의 다양한 뉴스 플랫폼에 적용되어 독창적인 디자인 언어를 형성합니다.
48 Design System AU | GOLD Design System
Design System AU는 호주 정부의 디자인 시스템으로, GOLD Design System은 공공 서비스 웹사이트에 적용되어 사용자 친화성을 높입니다.
49 Wise Design | design system
Wise Design은 금융 서비스 기업으로, Wise의 웹사이트와 모바일 애플리케이션에 적용되어 일관된 사용자 경험을 제공합니다.
50 Sainsbury’s | Luna
Sainsbury’s는 영국의 대형 소매업체로, Luna는 Sainsbury’s의 온라인 쇼핑 플랫폼에 적용되어 사용자 친화적인 경험을 제공합니다.
51 JSTOR | Pharos
JSTOR는 디지털 학술 자료 플랫폼으로, Pharos는 JSTOR의 웹사이트에 적용되어 연구자에게 직관적인 탐색 경험을 제공합니다.
52 City of Helsinki | Helsinki Design System
Helsinki시는 핀란드의 수도로, Helsinki Design System은 시 정부의 디지털 서비스에 적용되어 접근성과 일관성을 강화합니다.
53 LocalTapiola | Duet Design System
LocalTapiola는 핀란드의 보험 및 금융 서비스 기업으로, Duet Design System은 LocalTapiola의 서비스 플랫폼에 적용되어 사용자 경험을 최적화합니다.
54 Alaska Airlines | Auro Design System
Alaska Airlines는 미국의 항공사로, Auro Design System은 Alaska Airlines의 예약 및 고객 서비스 웹사이트에 적용되어 일관된 사용자 경험을 제공합니다.
55 Hashicorp | Helios Design System
Hashicorp는 클라우드 인프라 및 관리 도구를 제공하는 기업으로, Helios Design System은 Hashicorp의 제품에 적용되어 개발자 친화적인 경험을 지원합니다.
56 Thumbtack | Thumbprint
Thumbtack은 서비스 제공자를 연결하는 플랫폼을 운영하는 기업으로, Thumbprint는 Thumbtack의 웹사이트와 애플리케이션에 적용되어 사용자 경험을 개선합니다.
57 Twilio | Paste
Twilio는 커뮤니케이션 API 서비스를 제공하는 기업으로, Paste는 Twilio의 애플리케이션에 적용되어 일관된 디자인 언어를 형성합니다.
58 WorkOS | Radix UI
WorkOS는 기업 소프트웨어 솔루션을 제공하는 기업으로, Radix UI는 WorkOS의 플랫폼에 적용되어 개발자 친화적인 사용자 경험을 제공합니다.
59 GOV.UK | Design System
GOV.UK는 영국 정부의 공식 웹사이트로, 정부 서비스 웹사이트에 적용되어 접근성과 일관성을 높입니다.
60 Government of Canada | Aurora Design System
Government of Canada는 캐나다 정부 기관으로, Aurora Design System은 정부 서비스 웹사이트에 적용되어 사용자 경험을 최적화합니다.
61 FutureLearn | Design System
FutureLearn는 온라인 교육 플랫폼을 제공하는 기업으로, FutureLearn의 웹사이트와 앱에 적용되어 일관된 학습 경험을 제공합니다.
62 United States government | USWDS
United States government는 미국 정부의 공식 웹사이트로, USWDS는 정부 서비스와 웹사이트에 적용되어 접근성과 사용자 친화성을 강화합니다.
63 Ontario Government | Ontario Design System
Ontario Government는 캐나다 온타리오 주 정부로, Ontario Design System은 주 정부의 웹사이트와 서비스에 적용되어 일관된 사용자 경험을 제공합니다.
64 Tailwind Labs | Headless UI
Tailwind Labs는 유틸리티 퍼스트 CSS 프레임워크를 제공하는 기업으로, Headless UI는 Tailwind의 구성 요소에 적용되어 접근성과 사용자 친화성을 제공합니다.
65 The Guardian | Source
The Guardian는 영국의 주요 신문사로, Source는 The Guardian의 웹사이트와 애플리케이션에 적용되어 독창적인 디자인 언어를 제공합니다.
국내 디자인 시스템
다음은 국내 기업 중 공개된 일부 디자인 시스템입니다. 디자인 시스템 구축과 관련된 콘텐츠는 일부 기업에서 공개하였으나, 디자인 시스템 자체가 공개된 기업이 비교적 많지 않아 추후 업데이트되는 대로 추가 예정입니다.
66 11번가 | Design System
67 Gmarket | Design System
68 Spoqa | Design Guidelines
69 Wanted | Design Library (Figma)
https://www.figma.com/community/file/1355516515676178246
70 Millie | Design Library 2.0 (Figma)
https://www.figma.com/community/file/1054670787974508295
SAP · The Guardian · Skyscanner마치며
디자인 시스템 구축에서 중요한 점은 적용할 프로덕트의 특성과 기업 환경에 맞춰 최적화하는 것입니다. 비록 유명하지 않은 디자인 시스템일지라도, 자사 프로덕트에 어떻게 적용되었는지 고민한 과정을 살펴보면 유용한 인사이트를 얻을 수 있을 것입니다. 잘못된 정보나 추가하고 싶은 디자인 시스템이 있다면 댓글로 남겨주시기 바랍니다.
