brunch

매거진 디자인 나침반

라이킷 103 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Jongmin Park Jan 23. 2022

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

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

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

Apple Human Interface Guideline

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

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

Themes, Interface Essentials

App Architecture

User Interaction

System Capabilities

Visual Design

Icons and Images

Bars

Views

Controls

Extensions

Google Material Design

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

https://material.io/

구성

Foundation: Design Tokens, Adaptive Design...

Style: Color, Typography

Components: Buttons, Cards, Chips...

Microsoft Fluent

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

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

플랫폼별 가이드라인 제공

Controls and Patterns

Layout

Style

Controls

Resources

IBM Carbon Design Language

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

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

Philosophy

Typography

Color

Grid

Logos

Iconography

Illustration

Photography

Data Visualization

Layout

Animation

Resource

Ant Design

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

https://ant.design/

Global Styles

Design Patterns

Visualization

Motion

Illustrations

Atlassian’s Design Language

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

Atlassian Design System

Brand

Foundations

Content

Resource

SalesForce Lightning Design System

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

https://www.lightningdesignsystem.com/

Platforms

Design Guidelines

Accessibility

Component Blueprints

Utilities

Design Tokens

Icons

Tools

Resource

Airbnb Design

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

https://airbnb.design/

Adobe Spectrum

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

https://spectrum.adobe.com/

Foundation

Content

Components

Patterns

Tools and Resources