디자인 시스템 만들기

디자인 정책, 디자인 시스템

도대체 디자인시스템이 무엇이냐 묻는다면?

UI 패턴, 컴포넌트, 코드를 포괄하는 종합 세트입니다. 디자인시스템이 UI, UX 가이드라인은 포괄하지만 디자인 시스템 마다 상이합니다. 개인적으로 굉장히 이상적이다 생각하는 디자인 시스템은 어떤 기업의 UX 방향성, 원칙에 대한 철학에 대한 것들로 이루어진 디자인 시스템입니다. 사실 이러한 디자인시스템은 UI+디자인정책으로 함께 나오는 부분이기 때문에 정립하는 단계가 매우 중요합니다.

실무에서는 어떻게 만들었는가? 기억남는 건?

일단 목차 잡기가 굉장히 어려웠습니다. 목차만 몇번씩이나 수정하고, 반복해서 수정했습니다.

 UX 방향성이 나오고 방향성에 따른 컴포넌트를 제작해야했습니다.

컴포넌트, 컬러, 폰트스타일, 상태 등 고려할 것도 굉장히 많았는데요.

이게 어떤 것을 나타내는 것이다라는 '사전'같은 의미보다는 어떤 케이스에서는 '이것'(Component) 이 사용되어야 하고, 어떤 때(case)는 이게 사용되면 안되는지에 대해서 중점을 두고 만들려고 했습니다.

많은 UX책을 봐왔지만, 다시하여금 '정말 아무것도 모르는 거구나..'란 생각도 참 많이 들 정도록, 어려운 작업이였습니다.

어떻게 만드는 것이 가장 효과적인가?

설계를 할 때 모든 이해관계자가 참여할 수는 없어서 모든 디자인 컴포넌트를 100% 모듈화해서 커버하는건 이상적이기보단 비효율적입니다. 원래 기존에 있었던 앱에서 룰을 만들었던  것이기 때문에 모든 것을(All the cases) 커버해야한다는 압박감이 있었기 때문이었습니다.  MVP를 정하거나 Case별을 먼저 선별적으로 정한 후  점차적으로 범위를 넓혀가는게 좀 더 나을 것 같습니다.

목차로 필요한것들을 잡아봄 (UX GUIDE 만 넣은 부분)

+디자인시스템으로 총체적인 시스템을 만들려면 컬러나 브랜드까지 더 포괄되어야 합니다.

Introduction

UX Philosophy and Principle

UX fundamental - Layout, component, contents로 나뉠 수 있음

Layout에는 Structure, Header(App bar, tab, back, search) , Navigation, Footer, Bottom sheet, Alert, Pop-up(Warning, completion, notice, confirmation, toast, contents) 이 있음

Component에는 Input field, fixed search field, picker(Date picker, Time picker), Notification, Rating, slider, stepper, Divider, chip, Accordion, view more, Rearrange, Button(Body button, command button, select button, Radio button, checkbox, switch toggle button, favorite button, top button, pagination button, floating button),

디자인 시스템에 필수적인 요소

(필독) 안드로이드 애플 가이드 디자인

https://developer.android.com/design

Android 개발자 | Android Developers

https://developer.apple.com/design/

Design - Apple Developer

http://www.design.samsung.com/kr/contents/one-ui/download/oneui_design_guide_kor.pdf

Pxd 디자인 가이드 article

https://story.pxd.co.kr/1434

디자인 시스템 1편 - 디자인 가이드/디자인 시스템은 왜 필요한가

정말 도움 많이 되었던 글이었다. 디자인 시스템 8편으로다가 구성이 되어있는데 강추한다.

1편 - 디자인 가이드라인/디자인 시스템은 왜 필요한가

2편 - 디자인 가이드라인/디자인 시스템의 종류

3편 - 디자인 가이드라인/디자인 시스템의 운영

4편 - 디자인 가이드라인/시스템 작업 프로세스 및 유의할 점

5편 - GUI 디자인 리서치

6편 - 기본 시각 요소 설계 시 알아 두어야 할 것들 

7편 - 컴포넌트를 디자인할 때 고려해야 할 것들

8편 - 특수한 목적을 고려한 컴포넌트 디자인하기

디자인 가이드 운영

https://story.pxd.co.kr/1437 

디자인 시스템 3편 - 디자인 가이드라인/디자인 시스템의 운영

아래 모바일 커머스 상품명 UX 가이드를 작성하신 최철호님이 작성하신 걸 보면, 사용성에 대한 가이드를 잡기 수월하다. 참고 사례도 많아서 이런 형태로 디자인 가이드를 만드는 걸 추천한다. 여러사람들이 확인해야하는데 성경책처럼 하나하나 해석을 할 필요 있는게 아니라, 직관적인 것이 중요하다. 말그대로 보여지는 것이기 때문이다.

모바일 커머스 상품명 UX 가이드 (가이드 사례 모음집)

https://brunch.co.kr/@chulhochoiucj0/21

모바일 커머스-상품명 UX가이드

디자인가이드 종류

https://brunch.co.kr/@jaehyun-design/23

디자인 가이드라인/디자인 시스템의 종류

(어투, 접근성,모션,브랜드철학, 데이터시각화 등) 나와있습니다.

리메인 디자인가이드

http://styleguide.co.kr/content/resolution-grid/resolution-rasterized.php

리메인 스타일가이드

UI 디자인 가이드

http://uidesignguides.com/category/gui-design/

개발 환경별 애니메이션 지원 속성

http://uidesignguides.com/%ea%b0%9c%eb%b0%9c-%ed%99%98%ea%b2%bd%eb%b3%84-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98-%ec%a7%80%ec%9b%90-%ec%86%8d%ec%84%b1/ 

iOS, Android, Web 개발 환경별 애니메이션 지원 속성 - UI Design Guide

그 밖의 국내 디자인시스템

토스 디자인 시스템

https://www.notion.so/toss-design-system-959822692bec4f879450e361c623cf2a

toss, design, system.

마이리얼트립 디자인시스템 구축

https://publy.co/content/2829

마이리얼트립 배재민 디자이너 인터뷰: 분석하는 디자인

리디

https://ridi.design/

RIDI Design System

쏘카

https://socarframe.socar.kr/8bb3aba4a/p/8246da-button

벤치마킹 참고자료

APPLE

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

Human Interface Guidelines - Design - Apple Developer

매터리얼 디자인

https://material.io/design/

마이크로소프트

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

Spoqa

https://bi.spoqa.com/

Spoqa Design Guidelines

IBM CARBON DESIGN SYSTEM

https://www.carbondesignsystem.com/

Carbon Design System

UBER

https://brand.uber.com/guide

https://www.evernote.design/categories/design-systems/

Design Systems - Evernote.Design

https://www.designsystems.com/

Design Systems articles on building and maintaining design systems

RAY

https://ray.wework.com/

Ray - Documentation

https://p-j-m.github.io/design-compass/design-system.html

디자인 나침반 - 디자인 시스템

https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421

Tokens in Design Systems

https://www.wedesignx.com/knowledge/design-system

디자인 시스템, 제대로 알고 제대로 만들어야 한다 — 위디엑스

책

디자인 가이드 작성할때 참고했던 책이 있다. (고급편 참조)

https://brunch.co.kr/@sylviasolution/5

UX 디자이너를 위한 필독서 추천