[1주차 - Day4] 8. 디자인 시스템

Chapter 8. 디자인 시스템

8-1) 디자인 시스템의 이해

 

디자인 시스템: 다양한 페이지와 채널을 걸쳐 공통의 언와 시각적 일관성을 만들고 반복되는 작업을 줄임으로써, 규모에 맞게 디자인을 관리하기 위한 표준 집합

디지털 제품의 사용 기준을 명확하게 정의한 재사용 가능한 구성 요소의 모음

 

디자인 시스템은 디자이너 만을 위한 것이 아니다. 여기서 디자인은 시각적인 아웃풋이 아니라 '설계하다'의 어원으로

디자이너 뿐만 아니라 전체 조직 구성원을 대상으로 제품을 만드는 방법을 다루는 결과물들이다.

디자인 원칙, 브랜드 정체성, 스타일 가이드, 관리 정책 등이 포함된다.

 

제품이나 서비스가 처음 시작될 때 규칙들이 잘 반영되지만 시간이 지나고 프로젝트가 커지면 규칙이 잘 지켜지지 않게 된다. 

이러한 혼란을 방지하고 질서를 세우는 것이 디자인 시스템이다. 디자인 시스템이 표준 규칙이 되어 작업을 효율적이고 일관되게 만들어준다.

 

- 디자인 시스템의 역사

1970년대 : 애플이 만든 디자인언어, 스노우화이트

2000년대 : 웹이 활발하게 만들어진 시기. UI 디자인 패턴을 모아서 보여주거나 예시들을 모아 분류해둔 라이브러리를 확장하는 시도들이 많았음

2009년 : 우리나라에 처음으로 아이폰이 도입되면서 UI 기술들이 급속도로 발전하게 됨. 단순한 수집에서 시스템으로 변화함. 애플의 휴먼 인터페이스 가이드라인 없이는 디자인이 어려웠기 때문에 iOS에 의존적이었음

현재 : 구글의 Material Design이 파급력을 가짐. 안드로이드는 물론이고 iOS에도 영향을 끼침. 이 덕분에 디자인이 더욱 심플해지고 반응성과 직관성을 향상시켜 높은 수준의 사용자 경험을 만들었음

 

 

- 디자인 시스템의 장점

1. 일관성: 디자인의 일관성을 유지 -> 일관된 사용자 경험

2. 효율성: 재사용 가능한 컴포넌트의 사용

3. 협업: 이해 관계자들의 소통 -> 디자이너, 개발자, PM 사이의 격차를 줄임 -> 생산성 향상

4. 향상성: 효율성과 일관성 확보

 

 

---

 

8-2) 디자인 시스템의 구조

 

스타일 가이드 : 작은 요소인 컬러, 폰트, 아이콘 등을 어떻게 디자인할지에 대한 가이드

- 나침반의 역할

- 컬러: 시간적 연속성과 정보의 위계질서를 주는 데에 기본색상과 보조색상을 두고 채도와 명도를 조절함

- 타이포그래피: 사용되는 글꼴 모음, 두께, 줄간격, 텍스트 조건 등이 포함

- 아이콘: 서비스에서 아이콘이 처음부터 기획에 맞춰서 제작된 아이콘세트일 수도 있고 시스템 자체에서 제공하는 아이콘일 수도 있음. 기존에 사용하는 아이콘에 일치하는 새 아이콘을 만들 수 있는 가이드도 포함. 색상 및 크기도 포함

- 모양: 어떤 상황에서 모서리의 정도나 크기 등을 조절

- 컴포넌트: 종류가 매우 많음. 화면을 이루는 앱바, 카드, 입력 필드 등을 말함. 

 

 

패턴 라이브러리: 컴포넌트를 활용한 패턴등을 모아둔 것

- 타이틀: 컴포넌트나 패턴의 명칭을 짧게 작성해야함. 복잡한 패턴은 디자이너와 개발자 모두 이해하기 쉽도록 명칭을 정해야함.

- 사용법과 원리: 언제 어떻게 어떤 상황에서 사용하는 건지 규칙이 작성되어야 함.

- 베리에이션: 상황에 맞추어 작성

 

 

시스템 가이드: 디자인 시스템을 실무에서 실용적으로 활용하고, 관리하는데 필요한 업무적인 가이드

- 목적 : 이루고자 하는 목적을 정의해야함. 문제사항과 개선방향 등을 기술

- 사람: 부서와 담당자, 검토 권한이 있는 사람, 이해관계자를 작성해야함

- 공유: 새로운 업데이트에 대한 배포 및 교육 일정 등을 숙지하도록 작성해야함