디자인 시스템

 

 

📍디자인 시스템 

- 하나의 시스템을 구축함으로써 새로운 디자인을 만드는 작업을 줄지만 그만큼 동일한 디자인을 만드는 작업이 줄어듦

- 디자니어들이 더 많은 생각을 하고 더 넓은 비즈니스의 문제를 바라볼 있는 환경을 제공함

 

◼️등장배경 

: 디자이너의 역할이 단순히 스타일을 창조하는 역할에서 비즈니스의 문제를 해결하는 역할로 바뀌게 됨 

 ➡️ 디자인 조직의 규모도 함께 커지면서 디자인 시스템이 대두됨 

 

◼️ 기대효과 

 

* 바우하우스 운동 

‘아름답고 멋진 디자인’ 아닌 삶의 문제 해결하는 예술이 목적

https://artnet.tistory.com/18

창조의 규격화 - 바우하우스(Bauhaus)

https://www.hani.co.kr/arti/culture/culture_general/886170.html

바우하우스 100년, 새로운 삶의 방식 제안한 정신혁명

 

 

*스위스 디자인 운동(인터내셔널 타이포그래픽 스타일) 

: 수학적으로 구축된 그리드 위에서 디자인 요소들의 비대칭적 조합을 통해 달성되는 시각적 통일성

- A Brief Introduction to Swiss Style

https://vimeo.com/55756433?embedded=true&source=vimeo_logo&owner=10285658 

 

 

- This video is about 04 Swiss Design

https://vimeo.com/109583336?embedded=true&source=vimeo_logo&owner=4949463 

 

 

📍디자인 시스템의 6가지 구성요소 

1️⃣  레이아웃 : 간격, grid 시스템

 

2️⃣ 스타일 : 컬러, 아이코노그라피, 타이포그라피(폰트서체, 폰트 크기 등) 

 

* 아이코노그라피

(도상학) 그리스어 ‘eikón’과 ‘graphein’의 합성어로서 ‘형태묘사’라는 의미. 상징성, 우의성, 속성 등 어떤 의미를 가지는 도상을 비교하고 분류하는 미술사의 한 분야

https://terms.naver.com/entry.naver?docId=894069&cid=42642&categoryId=42642 

도상학

 

*타이포그라피 

타이포그래피란 글자를 의미하는 그리스어 ‘typo’에 어원을 두고 있으며, 전통적으로 활판인쇄술과 관련하여 글자의 활자 및 조판의 디자인을 의미하는 말이었으나, 미디어가 확장됨에 따라 볼록판 인쇄나 금속 활자 인쇄가 지배적이지 않은 현대의 디자인에서는 훨씬 넓은 의미를 갖게 되었다.

https://terms.naver.com/entry.naver?docId=785218&cid=41828&categoryId=41828 

타이포그라피

 

 

3️⃣ 컴포넌트 : 버튼, 폼 등의 UI 요소

 

4️⃣ 패턴 : 내비게이션(상단, 사이드), 검색(검색바의 위치, 모양)  등의 패턴

 

5️⃣ 컨텐츠 : 용어, 보이스톤

 

* Tone of Voice 

https://www.nngroup.com/articles/tone-voice-words/

Tone-of-Voice Words

https://www.youtube.com/watch?v=HSpms43ycKg&t=43s 

 

* UX 카피라이팅

https://www.ascentkorea.com/microcopy-ux-writing-case/

UX Writing : 사용자 경험 글쓰기, UX 라이팅

 

* 토스 UX Writing

https://brunch.co.kr/@thinkaboutlove/396

토스가 보이스톤 메이커를 만들게 된 배경

https://blog.toss.im/article/uxwriter-interview

토스가 금융을 더 쉽게 만드는 또 하나의 방법, UX Writing

 

* 브랜드만의 말투

https://brunch.co.kr/@roysday/467

브랜드만의 말투를 만들어 봅시다(1)

 

 

 

 

6️⃣ 사용성  : 접근성, 글로벌 서비스 원칙 

 

 

스타일 가이드	컴포넌트 라이브러리	디자인 시스템
브랜드 요소가 UI에 적용되는 방법을 제공 (컬러, 아이코노그라피, 타이포그라피 등)	디자인팀 내에서 사용되는  공통 스타일과 컴포넌트를 제공  (디자인 틀을 통해 자동 동기화되며 추가적으로 코드 제공)	엘리먼트, 컴포넌트, 영역 등을 문서와 코드로 제공 (디자인 원칙과 규칙 등을 추가적으로 제공)

 

 

**Adele

해외 product의 디자인 시스템을 모아둔 사이트 

https://adele.uxpin.com/

Adele – Design Systems and Pattern Libraries Repository

 

 

 

** storybook - example

https://storybook.js.org/docs/react/why-storybook

Why Storybook?

 

https://carbondesignsystem.com/

Carbon Design System

 

 

✨ 디자인 demo와 언어별 코드도 확인해볼 수 있음 

https://carbondesignsystem.com/components/button/usage/

Carbon Design System

 

* 전체적인 가이드라인 

https://carbondesignsystem.com/guidelines/color/overview/

Carbon Design System

 

 

 

---

 

 

디자인도.. 제대로 하자고 하면 정말... 공부가 끝이 없으니 간단하게만 하고 넘어가자