[온라인] UX 기초 : 스타일 가이드와 디자인 시스템

출처 : unsplash.com

 

1.

디자인 시스템은 무엇인가?

---

스타일 가이드	디자인 시스템
콘텐츠, 브랜딩 어떻게 커뮤니케이션을 해야하는지에 대해 톤을 정리한 것	구조, 틀 서비스가 행동해야 하는 방법에 대해 규칙, 가이드 라인을 정의 한 것

스타일 가이드와 디자인 시스템은 단순히 몇 장의 문서가 아닌 그 이상으로 언제 어떻게 문서를 사용해야 하는지에 대해 정의한 것이다. 초기 단계에 수립하는 것이 좋으며 명확한 커뮤니케이션과 리뷰 과정을 통해 수립하는 것이다. 

 

 

 

 

 

2.

스타일 가이드의 기본

---

지속적인 신뢰와 톤을 유지하기 위해 스타일가이드가 필요하다. 또한, 새로 온 직원이나 에이전시에 넘길 때에도 빨리 알아차릴 수 있는 시간을 절약할 수 있으며 디자인을 하는데에 있어서 논쟁을 막을 수가 있다. 

스타일 가이드는 지속해서 진화하는 것이다. 한명이서 하는 것이 아니라 여러 명이서 시간을 투자해서 진행을 하는 것이 좋다. 그리고 정의한 스타일 가이드를 지속해서 유지하고 사용하는 것이 중요하다. 

처음부터 외부 에이전시나 프리랜서에게 스타일 가이드를 요청하는 것은 좋지 않는 방법일 수 있다.

 

 

 

 

 

3. 

스타일 가이드의 구성

---

브랜드 가이드라인을 정리하는 것에서 부터 시작을 하는 것이 좋다. 브랜드의 철학, 미션, 가치를 정의하면서 브랜드의 성격을 결정하는 것이다. 브랜드는 고객에게 약속한 것이고 브랜딩은 그 약속을 어떻게 커뮤니케이션으로 풀어나갈지에 대한 것이다.

그다음, 회사의 페르소나, 성격, 목소리를 통해 타깃 유저를 정하는 것이다. 사용자들에게 보여주고 싶은 회사의 성격을 레퍼런스로 삼을 수 있는 예시와 함께 스타일 가이드에 포함시키면 좋다. 다양한 시나리오에 회사의 성격이 맞는 톤, 억양을 예시로 제시하는 것이다. 

시각적인 요소로는 컬러, 타이포그래피, 레이아웃, 사진, 일러스트 스타일, 그리고 애니메이션과 이미지 등을 언제 어떻게 사용하는지에 대한 가이드가 있다.

각각의 자료에 관련된 담당자에 대한 정보, 자료에 대한 출처 등을 남겨놔야 나중에도 다른 사람들이 보면서 궁금한 사항들을 물어보거나 찾아서 볼 수 있으므로 리소스의 출처를 남기는 것이 좋다.

 

 

 

 

 

4. 

스타일 가이드 만들기

---

지금 가지고 있는 자료들을 확인하고 관련된 그룹으로부터 정보들을 수집하는 것을 먼저 시작하는 것이 좋다. 이후, 브랜드의 철학, 사용자, 성격과 톤, 시각적 요소, 그리고 자료의 출처를 써내려 가는 것이다. 찾은 정보들을 한 곳에 모아둔 후 일관성이 없는 부분부터 고쳐 나가는 것이다. 

스타일 가이드를 권장하기 위해서는 가이드가 사람들의 업무를 쉽게 만들어서 실제로 사용하고 싶게끔의 유용한 정보들을 담고 있는지를 확인하고 조직원 모두가 브랜드가 내포하고 있는 의미를 알 수 있도록 노력해야 한다. 시각적인 요소와 글 콘텐츠의 일관성이 더욱더 나아져야 하고 회사 내부의 자원을 쉽게 찾을 수 있는 곳이 되도록 만들어야 한다.

 

 

 

 

 

5.

디자인 시스템의 기본

---

디자인 시스템은 사용자의 경험을 지속적으로 가능하게 해준다. 디자인 시스템으로 인해 비용이 줄어들 수 있으며, 디자이너들은 더 나은 디자인을 할 수 있도록 도와준다. 픽셀을 고민하는 것보다 흐름에 대해서 더 고민할 수 있으며, 접근성과 지역화에 더 집중할 수 있다. 디자인 시스템으로 인해 인터페이스의 구현, 그리고 코드를 작성하는 것 모두가 쉽고 빠르게 진행할 수 있다. 품질 보증을 위한 검수 작업도 줄어들며 빠른 유지보수가 가능하다. 

 

 

 

 

 

6.

디자인 시스템의 구성

---

디자인 시스템은 디자인 시스템만의 철학과 시각적인 스타일, 코드 예제, 그리고 완성된 제품으로 구성이 된다. 디자인 시스템은 디자이너 뿐만이 아닌 개발자, 콘텐츠 크리에이터, 브랜드 매니저, 마케팅, 서비스 지원 팀 등 제품에 관여된 모든 사람들을 위해서 만들어진 시스템이다.

 

https://github.com/alexpate/awesome-design-systems

alexpate/awesome-design-systems

findguidelin.es/

Find guidelines

 

1) 디자인 시스템 철학

디자인 시스템의 목적을 미션, 가치, 그리고 철학을 통하여 설명할 수 있어야 한다. 또한, 컬러 체계, 폰트 체계 그리고 스타일 가이드가 여기에 포함될 수 있다.

 

2) 디자인 시스템 구성 요소

Brad Frost의 Atomic Design에 나와있는 것 처럼 가장 작은 단위에서부터 시작을 해서 나아가는 것을 권장한다.

atomicdesign.bradfrost.com/

Atomic Design by Brad Frost

3) 디자인 시스템 관리

디자인 시스템은 지속적으로 관리를 하고 업데이트를 해야 한다. 버전 관리를 통해 디자인 시스템을 관리하는 것이 좋다.

 

 

 

 

 

7.

디자인 시스템 만들기

---

우선 디자인 시스템의 필요성에 대해서 회사 모두가 알고 있어야 한다. 일관성 있는 인터페이스, 더 나은 커뮤니케이션, 깔끔한 코드, 그리고 시장에 출시한 시간을 줄여주는 등의 장점에 대해서 임원급들에게도 전달해야 한다. 임원급들에게는 비용적인 측면에서 절약할 수 있는 장점, 그리고 현재의 일관성이 없는 부분을 바꾼다면 어떻게 보일 수 있는지에 대해서 언급하면서 설득을 할 수 있다.

 

보통 디자인 시스템을 구축하기 위해서 4명에서 8명의 팀을 구성한다. 개발팀에서의 프론트엔드 개발자, 그리고 풀스텍 경험자, 디자인팀에서의 비주얼 디자이너, UX 리서처, 그리고 콘텐츠 전략가등으로 구성할 수 있다. 디자인 언어 (폰트, 컬러, 레이아웃)를 정의하고 인터페이스를 디자인한 후 프론트엔드 코드를 입히고 콘텐츠 전략을 더해서 문서화를 진행한다.

 

현재 나와있는 디자인 시스템을 참고로 어떤 플랫폼을 사용하여 디자인 시스템을 구축할지, 어떤 플랫폼이 회사에 맞는지 파악을 한 후에 플랫폼을 선정할 수 있다. 참고할 수 있는 플랫폼에는 Bootstrap, Patternlab.io, Lingoapp.com, Patternfly.org등이 있다.

 

디자인 시스템을 구축하고 출시하기 위해서는 우선 파일럿 버전을 출시하고 리뷰를 통해서 베타 테스트를 진행을 한다. 그 후, 테스트를 통한 피드백을 문서화로 하여 제한된 인원들에게만 먼저 출시를 하여 피드백을 받고 정식으로 출시를 하여 유지하고 버그를 픽스하는 과정으로 진행한다. 

 

 

 

 

8.

마무리

---

디자인 시스템은 회사의 문화와 분리해서 생각할 수는 없다. 먼저, 현재 있는 패턴을 조사하고 팀원들의 업무 과정에 대해서 알아가는 것이 좋다. 팀의 일하는 문화가 함께 일을 하는 문화인지 각자 일을 하는 문화인지를 파악하고 사용자 경험을 조사할 때에는 정량적인지 정성적인지에 대해서도 알면 좋다. 디자인 시스템 도입을 위해서의 변화는 힘들지만 대화를 통해서 팀, 그리고 회사를 설득할 수 있어야 한다. 

 

 

 

 

 

강의 출처 :

UX Foundations : Style guides and design systems

By. Chris Nodder @ LinkedIn Learning

www.linkedin.com/learning/ux-foundations-style-guides-and-design-systems