개인 노트 정리) 시각디자인11 - 디자인 시스템 이해하기

완전정복! 시각디자인 기초 올인원 패키지 Online
Part 2. 시각디자인 기초 2 (디지털 매체)
디자인 시스템 이해하기

 

# 디자인 시스템 개념 이해하기

## 디자인 시스템의 등장 배경

- 디자인 시스템은 인쇄쪽 보다는 디지털미디어쪽의 제품.

- 디자이너의 역할이 단순한 스타일을 창조하는 역할에서 비즈니스의 문제를 해결하는 역할로 바뀜.

- 따라서 디자인 조직의 규모도 커지면서 디자인 시스템이 대두됨.

## 디자인 시스템을 통해..

- 커뮤니케이션 효율화

- 컴팩트한 ui 구축 가능

- 일관성 있는 ux 제공

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

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

- 레이아웃 : 간격, 그리드 시스템

- 스타일 : 컬러, 아이코노그라피, 타이포그라피

- 컴포넌트 : 버튼, 폼 등의 UI 요소

- 패턴 : (일종의 탬플릿), 내비게이션, 검색 등의 패턴

- 컨텐츠 : 용어, 보이스톤 (브랜드나 ux에서는 보이스톤 이라는 것을 잡아주어야 한다.)

- 사용성 : 접근성, 글로벌 서비스 원칙

 

디자인 시스템을 모아둔 사이트 : adele.uxpin.com

# 스타일가이드, 컴포넌트 라이브러리, 디자인 시스템의 차이 이해하기

- 많은 사람들이 비슷해서 해깔려한다.

- 스타일 가이드 : 브랜드 요소가 UI에 적용되는 방법 제공. 컬러, 아이코노그라피, 타이포그라피 제공

- 컴포넌트 라이브러리 : 팀 내에서 사용되는 공통 스타일과 컴포넌트 제공. 디자인 툴을 통해 자동 동기화

- 디자인 시스템 : 엘리먼트, 컴포넌트, 영역 등을 문서와 코드로 제공. 참고사이트 : material.io

- 스타일 가이드 정도는 대부분 있고, 컴포넌트 라이브러리는 있는 회사도 없는 회사도 있고, 디자인 시스템까지 만든 회사는 많지 않다.

# 구글의 디자인 시스템 이해하기1

- 컬러, 폰트, 아이콘, 이미지 위주로 알아보기

- material 디자인 : 현실의 사물, 재질, 사람들이 접근하는 등 현실의 것을 그대로 가져옴. 참고 : 유튜브- Making Material Design

# 구글의 디자인 시스템 이해하기2

- 폰트 크기가 크면 클수록 letter-space를 줄여준다. (너무 벙벙해보이니까)

- 메테리얼 디자인은 웹이랑 모바일을 같이 사용한다. 

- 보통 h1(96px) ~ h4(34px) 은 웹에서, h5(24px) ~ 은 앱에서 쓰인다.

# 애플의 디자인 시스템 이해하기

- 컬러, 폰트, 아이콘, 이미지 위주로 알아보기

- 애플의 디자인 시스템은 Human Interface Guidelines 이라고 한다.

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

- 같은 색이라도 light 모드와 dark 모드가 색이 조금 다르다.

- App Icon의 color space는 보통 display p3 로 한다.