아티클

영감을 주는 최고의 디자인 시스템

박종민| 2022.07.18

10가지 맥락, 10개의 디자인 언어

디자인 시스템은 사용자가 동일한 경험을 할 수 있도록 언제나 일관된 원칙이 적용될 수 있도록 사용하는 규칙입니다. 일관된 원칙으로 같은 목소리로 같은 인상을 줄 수 있고, 불필요한 커뮤니케이션을 없애 효율적이죠. 이 시스템을 적용하는 범위에 따라 디자인 언어, 디자인 시스템에 대한 정의가 다릅니다. 시각적인 형태에 대한 가이드라인, 개발에 사용하는 코드, 구체적인 ux 패턴, 연관된 생태계의 모든 경험까지 회사에 따라 다양한 영역에 적용됩니다. 더 나은 디자인 언어를 만들 수 있도록 영감을 받을 수 있는 최고의 디자인 시스템에 대해 조사해봤습니다.



Apple Human Interface Guideline

매끄러운 사용자 경험의 교과서라 불리는 애플의 디자인 가이드라인입니다. 디자인뿐만 아니라 개발에도 필요한 상세한 가이드라인을 제공합니다. 플랫폼 특성에 알맞은 일관된 경험을 제공하기 위한 디자인 원칙과 애플이 제공하는 다양한 디바이스의 UI Kit을 제공합니다.

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

Google Material Design

구글이 디자인에 있어 진정한 표준으로써 미래를 제시할 수 있다는 신호였던 머티리얼 디자인입니다. 이 디자인 시스템이 발표된 이후 디자인 시스템의 기초에 대해 세상 모든 사람들이 알 수 있게 되었습니다. 전 세계 다양한 서비스, 브랜드가 이 언어를 기반으로 다양한 표현을 할 수 있는 단단한 기초 중의 기초인 디자인 시스템입니다. 현재는 버전 3까지 나왔으며 Material You라는 더 진보된 디자인 언어를 제안하고 있습니다.

https://material.io/

Microsoft Fluent

마이크로소프트의 디자인 시스템입니다. 복잡한 세계를 위한 설득력 있는 디자인 시스템을 지향합니다. 스큐어모피즘에서 플랫 디자인으로 옮겨가는데 큰 역할을 했던 마이크로소프트의 메트로 디자인의 후계입니다. 플루언트는 빛, 깊이, 움직임, 재질, 규모라는 구성요소를 중심으로 시스템을 구축했습니다.

https://www.microsoft.com/design/fluent/#/

IBM Carbon Design Language

세계적인 공룡 기업 IBM의 디자인 언어입니다. 모든 컴포넌트가 접근성 체크리스트를 준수합니다. 사용자의 시력, 청력, 신체, 인지적 장애 등으로 구분하고 일반 사용자에게 어떤 연관이 있는지도 설명합니다. 전 세계 다양한 영역에 끼치는 영향이 상당한 대규모 회사인 만큼 광범위한 범위의 모두를 위한 디자인 언어를 제안합니다.

https://www.ibm.com/design/language/

Ant Design

알리바바그룹의 디자인 시스템입니다. 거대한 기업단위 프로덕트가 많기 때문에 이를 포괄하기 위한 디자인 시스템을 제공합니다. 트위터에서 제공하는 부트스트랩처럼 다양한 웹 컴포넌트를 제공합니다.

https://ant.design/

Atlassian’s Design Language

호주의 엔터프라이즈 소프트웨어 회사인 아틀라시안의 아틀라시안의 디자인 언어입니다. 이슈 추적 앱 지라, 협업용 위키 컨플루언스로 유명합니다. 설계 패턴, 코드 구성, UI 리소스를 제공합니다.

Atlassian Design System

SalesForce Lightning Design System

세일즈포스의 디자인 언어입니다. 맥락은 Shopify와 비슷하며 visualforce, heroku 등 다른 곳에서는 제공할 일이 없는 플랫폼의 가이드를 제공합니다. 상당한 숫자의 컴포넌트 가이드라인을 제공합니다.

https://www.lightningdesignsystem.com/

Airbnb Design

업계의 디자인 문화를 이끌고 있는 에어비앤비의 디자인. 구현을 위한 디자인 이상의 디자인 문화에 대한 이야기를 구축했습니다. 디자인과 연관된 다양한 주제를 바탕으로 에어비앤비만의 문제 해결 방식에 대해 블로그 형식으로 풀었습니다.

https://airbnb.design/



Adobe Spectrum

포토샵, 프리미어 등을 서비스하는 어도비의 디자인 언어입니다. 다양한 플랫폼을 위한 커뮤니티와 함께 성장하는 디자인 시스템을 목표로 합니다. 디자인 토큰과 같은 디자인 시스템의 토대에 대한 정의와 설명이 자세합니다. 또 콘텐츠에 쓰이는 글에 대한 가이드라인이 사려 깊게 정돈되어 있습니다.

https://spectrum.adobe.com/

Uber Design system

우버의 디자인 시스템입니다. 우버의 디자인 시스템 발표는 항상 화제를 불러일으켰었습니다. Wolff Olins가 디자인한 우버 브랜드가 담겨있습니다. 볼드하고 단단한 디자인 언어로 유명합니다. 특히 모션에 대한 섬세한 가이드라인이 인상적입니다.

https://brand.uber.com

Audi Design System

세계적인 명차를 생산하는 아우디의 디자인 시스템입니다. 아우디라는 브랜드 아이덴티티가 어떻게 전달되야하는지 중심으로 전달합니다. 자동차부터 애플리케이션까지 아우디를 접하는 모든 터치포인트에서의 일관된 사용자 경험을 전달하는 것이 목표입니다.

https://www.audi.com/ci/en/renewed-brand.html

디자인 나침반

좋아요 1
공유하기

박종민

누구나 디자인 언어를 이해하고 말할 수 있는 세상을 꿈꿉니다. 스스로 생각하고 자신만의 언어를 만들 수 있는 지침이 되는 나침반이 되길 바라며 글을 중심으로 블로그, 브런치, 뉴스레터를 운영하고 있습니다.
목록으로

TOP