디자인 시스템 만들기
디자인 정책, 디자인 시스템
도대체 디자인시스템이 무엇이냐 묻는다면?
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
https://developer.apple.com/design/
http://www.design.samsung.com/kr/contents/one-ui/download/oneui_design_guide_kor.pdf
Pxd 디자인 가이드 article
정말 도움 많이 되었던 글이었다. 디자인 시스템 8편으로다가 구성이 되어있는데 강추한다.
1편 - 디자인 가이드라인/디자인 시스템은 왜 필요한가
4편 - 디자인 가이드라인/시스템 작업 프로세스 및 유의할 점
5편 - GUI 디자인 리서치
6편 - 기본 시각 요소 설계 시 알아 두어야 할 것들
디자인 가이드 운영
아래 모바일 커머스 상품명 UX 가이드를 작성하신 최철호님이 작성하신 걸 보면, 사용성에 대한 가이드를 잡기 수월하다. 참고 사례도 많아서 이런 형태로 디자인 가이드를 만드는 걸 추천한다. 여러사람들이 확인해야하는데 성경책처럼 하나하나 해석을 할 필요 있는게 아니라, 직관적인 것이 중요하다. 말그대로 보여지는 것이기 때문이다.
모바일 커머스 상품명 UX 가이드 (가이드 사례 모음집)
https://brunch.co.kr/@chulhochoiucj0/21
디자인가이드 종류
https://brunch.co.kr/@jaehyun-design/23
(어투, 접근성,모션,브랜드철학, 데이터시각화 등) 나와있습니다.
리메인 디자인가이드
http://styleguide.co.kr/content/resolution-grid/resolution-rasterized.php
UI 디자인 가이드
http://uidesignguides.com/category/gui-design/
개발 환경별 애니메이션 지원 속성
그 밖의 국내 디자인시스템
토스 디자인 시스템
https://www.notion.so/toss-design-system-959822692bec4f879450e361c623cf2a
마이리얼트립 디자인시스템 구축
리디
쏘카
https://socarframe.socar.kr/8bb3aba4a/p/8246da-button
벤치마킹 참고자료
APPLE
https://developer.apple.com/design/human-interface-guidelines/
매터리얼 디자인
마이크로소프트
https://www.microsoft.com/design/fluent/#/
Spoqa
IBM CARBON DESIGN SYSTEM
https://www.carbondesignsystem.com/
UBER
https://www.evernote.design/categories/design-systems/
https://www.designsystems.com/
RAY
https://p-j-m.github.io/design-compass/design-system.html
https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421
https://www.wedesignx.com/knowledge/design-system
책
디자인 가이드 작성할때 참고했던 책이 있다. (고급편 참조)
https://brunch.co.kr/@sylviasolution/5
