2021. 10. 10. 20:02ㆍDesign/Archive
요즘 UI 디자이너의 필수 덕목(?)이자 스킬이 된 디자인 시스템.
디자인 시스템이 매우 핫하다 못해 기본이 되었다.
나 또한 회사에서 디자인 시스템 구축에 참여하고 있다.
이에 국내외의 여러 회사에서 이 디자인 시스템에 관한 컨퍼런스를 개최하고, 아티클을 발행하고, 원본 파일을 배포하기도 한다.
꼭 한 프로덕트를 구축하기 위함의 목적 이상으로,
이 시스템을 공부하면 확실히 UI에 대한 이해도가 높아져 설계하고 디자인하기 수월해지는 것 같다.
그래서 내가 보기 위한 국내외의 다자인 시스템 공유 자료들을 아카이브하였다!
☄️디자인 시스템이 필요한 이유
디자인팀과 개발팀 간의 효율적인 협업은 물론, 일관된 브랜드 경험으로 프로덕트의 브랜드 아이덴티티를 살릴 수 있다.
디자인 시스템 1편 - 디자인 가이드/디자인 시스템은 왜 필요한가
디자인 시스템은 총 8편의 시리즈로 구성되어 있습니다. 1편 - 디자인 가이드라인/디자인 시스템은 왜 필요한가(현재글) 2편 - 디자인 가이드라인/디자인 시스템의 종류 3편 - 디자인 가이드라인/
story.pxd.co.kr
🌎 해외 디자인 시스템
https://designsystemsrepo.com/design-systems
Design Systems Repo
An organized and frequently updated collection of Design System examples, resources, tools, articles and videos.
designsystemsrepo.com
🔷위 사이트에서 더 다양한 해외의 디자인 시스템 사례들을 살펴볼 수 있다.
Google - Material Design
: 아무래도 구글의 디자인 가이드인 만큼, 정석 of 정석이지 않을까 싶다.
UI 디자이너라면 무조건 ! 필독 사이트. 다 정독했다 해도, 직접 실무 디자인을 하다보면 초면인 컴포넌트도 수두룩 .. .
https://material.io/components?platform=web
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
Apple - Human Interface Guideline
: 애플 가이드라인 역시, iOS 를 개발하고 디자인한다면 정말x100 필수.
https://developer.apple.com/design/resources/
Apple Design Resources
Design apps quickly by using Sketch and Photoshop templates, plug-ins, and preconfigured UI elements.
developer.apple.com
IBM - Carbon Design System
: IBM의 디자인 시스템이다. 주로 웹 컴포넌트 위주이고 개인적으로 디자인과 정리된 사이트 모두 정말 깔끔하다고 생각된다.
https://www.carbondesignsystem.com/components/overview/
Overview – Carbon Design System
Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products. Each component has been designed and coded to solve a specific UI problem, such as presenting a li
www.carbondesignsystem.com
Microsoft - Fluent Deisgn System
: 마이크로소프트의 다양한 OS와 소프트웨어에 적용되는 디자인시스템인 만큼,
사이트 내 링크된 사이트들을 통해 다양한 옵션들을 볼 수 있다.
https://www.microsoft.com/design/fluent/#/
Microsoft Design
Fluent brings the fundamentals of principled design, innovation in technology, and customer needs together as one. It’s a collective approach to creating simplicity and coherence through a shared, open design system across platforms.
www.microsoft.com
Adobe - Spectrum
: 디자이너가 모르면 간첩 그 이상인 어도비 사의 디자인 시스템, 스펙트럼이다.
다양한 컴포넌트들을 권장 사항과 함께 제공해서 알기 쉽다. 아무래도 Adobe 사의 시스템이기에, 파일도 Adobe XD로 제공한다.
Spectrum, Adobe’s design system
Spectrum provides interface components, resources, and tools to help teams work more efficiently and to make applications more consistent.
spectrum.adobe.com
Atlassian - Atlassian Design System
: IT 계열 종사자라면 들어봤을법한 Jira, Trello 등의 툴을 만드는 아틀라시안의 디자인 시스템이다.
코드와 함께 다양한 컴포넌트들이 있다.
https://atlassian.design/components/
Atlassian Design System
Design, develop, deliver. Use Atlassian's end-to-end design language to create simple, intuitive, and beautiful experiences.
atlassian.design
Salesforce - Lightning Design System
: 슬랙을 인수한 세일즈포스의 디자인 시스템이다. 웹, 데이터 대시보드 기반의 서비스일수록 정말 수많은 디자인 컴포넌트들이 존재한다.
https://www.lightningdesignsystem.com/
Lightning Design System
Component Blueprints Ready-to-use HTML and CSS UI elements provide the foundation for Salesforce experience development Go to Blueprints Tokens Visual design values and attributes that ensure branding and UI consistency at scale View Tokens Design Guidelin
www.lightningdesignsystem.com
Uber - Base Web Design
: 우버의 시스템이다. 코드 위주로 작동한다.
https://baseweb.design/
baseweb.design
Ant Financial - Ant Deisgn
: 중국 알리바바의 핀테크 자회사 앤트 그룹의 디자인 시스템이다.
Ant Design - The world's second most popular React UI framework
ant.design
https://www.figma.com/community/file/831698976089873405/Ant-Design-Open-Source
Figma - Ant Design Open Source | Ant Design Open Source is a free and easy to use Figma library that's always up to date with th
Figma Community file — Ant Design Open Source is a free and easy to use Figma library that's always up to date with the latest changes to the official repo. Ant design provides plenty of UI components to enrich your web applications, and we will improve
www.figma.com
Elastic - Elastic UI
: Elastic Search를 만드는 Elastic의 Elastic UI 이다. (데이터와 개발에 대해 서당개처럼 몇 번 흘려들은 적이 있다면 들어봤을 듯한?)
앱 모바일 구축 이상으로, 데이터 시각화 디자인을 하게 된다면 어떻게 시스템화 할 지 어려운데
정말 모든 것이 담긴 ..이 시스템을 참고하면 좋을 듯 하다.
아무래도 너무 개발자스러운 (?) UI들이 있어 주의해야 하지만 그래도 실시간 Demo와 코드를 통해 학습하기 좋다.
https://elastic.github.io/eui/#/
Elastic UI
The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics. It distributes UI React components and static assets for use in building web layouts.
elastic.github.io
🇰🇷 국내 디자인 시스템
토스 - TDS(TOSS Design System)
: 디자인 시스템이 자리잡기 초창기부터 토스는 토스만의 디자인시스템, 'TDS'를 구축해서 프로덕트를 만들어 나가고, 컨퍼런스도 개최했었는데 최근 토스의 온라인 디자인 컨퍼런스, Simplicitiy 에서 최근 Framer로 구축한 TDS에 대해 설명하였다.
정말... 충격 그 자체였다.. ㅠㅠ.. 굿.. 이게 바로 찐 효율이구나..
관련 직무도 따로 있다고 한다.
https://www.youtube.com/watch?v=N01eljB646E&t=85s
라인 - LDS(LINE Design System)
: LINE DEVELOPER DAY 2020에서 박제호 님이 발표하신 LDS enhances the work efficiency of Developers and Designers 세션을 정리한 글로, 디자이너와 개발자가 디자인 시스템을 구축하는 과정과 시스템을 소개한다.
https://engineering.linecorp.com/ko/blog/line-design-system/
개발자와 디자이너의 협업을 위한 LINE 디자인 시스템, LDS 소개 - LINE ENGINEERING
안녕하세요. LINE Plus에서 LDS(LINE Design System)의 전체 PM을 맡고 있는 시니어 리드 박제호라고 합니다. 이번 글에서는 LINE의 업무 효율과 제품 완성도를 향상시키고 있는 LDS에 대해 말씀드리겠습니
engineering.linecorp.com
리디북스 - LDS(LINE Design System) 삭제되었습니다
: 리디의 디자인 시스템과 가이드가 담긴 웹사이트다.
RIDI Design System
리디를 디자인하기 위한 단 하나의 시스템
ridi.design
클래스 101 - OPS (One Product System)
: 클래스 101 디자인 시스템 구축 프로세스와 피그마 공유 파일이다.
클래스101의 디자인 시스템, One Product System
엔지니어링 관점에서 바라본 디자인 시스템
medium.com
https://www.figma.com/community/file/995265899930701059
Figma - CLASS101 - Product System Component | CLASS101 OPS 2.0 OPS, also known as One Product System, is developed to support
Figma Community file — CLASS101 OPS 2.0 OPS, also known as One Product System, is developed to support product makers of CLASS101 and to promote agility and creativity in our culture. We aim to resolve various challenges that may arise from the fast-pace
www.figma.com
SOCAR - Socar Frame
: 쏘카의 디자인 시스템 웹사이트다. 깔끔하게 정리되어 있다.
https://socarframe.socar.kr/8bb3aba4a/p/5857a5-socar-frame
Melon - Melon 2.0 UI kit
: 따로 웹이나 파일로 배포한 것 같진 않지만 그래도 고민과 프로세스를 충분히 볼 수 있는 브런치 글이다.
https://brunch.co.kr/@design-melon/83
멜론 Admin 2.0 개편 프로젝트
체계적인 디자인 시스템 가이드 UI Kit 제작 이야기 | 멜론의 기존의 노후화된 어드민 페이지에서 이번에 새롭게 제작한 체계적인 디자인 시스템 가이드인 UI Kit 제작기를 소개드리고자 합니다.
brunch.co.kr
Millie - Mille Design Library
: 모바일 앱 디자인 컴포넌트의 기본 요소들을 잘 보여주는 듯 하다. 피그마 파일까지 제공한다!
https://brunch.co.kr/@milliedesign/5
millie Design Library
밀리의 서재 디자인 시스템 | 밀리 디자인 라이브러리 (a.k.a. 밀디라) 밀리 디자인 라이브러리는 개발자와 디자이너뿐만 아니라 디자이너 사이의 협업을 수월하게 해 주며, 시각 및 경험 자산의
brunch.co.kr
https://www.figma.com/file/SRvwU2CSrqLjV7y1huHh2P/millie-Design-Library_v1?node-id=0%3A1
Figma
Created with Figma
www.figma.com
Gmarket - Gmarket Design System (GDS)
: 지마켓 산스 폰트도 인상깊게 보고 자주 쓰는 중인데, 지마켓 디자인 시스템 또한 유용할 듯 하다.
Gmarket Design System
G마켓의 브랜드 정체성, 사용성, 일관성을 고려한 디자인 시스템의 가이드라인을 소개합니다.
gds.gmarket.co.kr
디자이너와 개발자를 위한 도구, G마켓 디자인 시스템
G마켓 디자인 시스템 구축 배경 및 문서화 과정 공유
medium.com
Spoqa - Spoqa Design Gudielines
: 스포카 한 산스 서체로 알게된 스포카..! 그만큼 실력 좋은 디자이너분들이 계시고, 거쳐간 기업이다.
디자인 가이드라인은 물론, 디자인 툴킷도 제공한다.
Spoqa Design Guidelines
우리는 건강한, 스마트한, 발전하는 기업을 지향합니다. 스포카 비주얼 디자인팀은 디자인 가이드라인을 마련하여 모든 서비스와 소통 채널에서 스포카의 가치를 일관되게 표현하도록 돕습니
bi.spoqa.com
https://spoqa.github.io/design-toolkit/
Spoqa Design Toolkit – 스포카 디자인 툴킷
스포카 디자인 툴킷은 사용자 리서치, 제품 기획, 프로젝트 킥오프 등을 도와줄 템플릿 종합 세트입니다. 모든 템플릿은 디자인팀이 직접 주도하여 실행한 프로젝트에 기반했으며 예시를 함께
spoqa.github.io
🏃🏻♂️ 추후 계속 추가 예정입니다. 🏃🏻♂️ 🏃🏻♂️ 🏃🏻♂️