디자인시스템 Documentation

디자인시스템 요모조모

디자인시스템 문서는 왜 필요할까? 이 문서는 컬러, 타이포그래피와 같은 파운데이션이나 컴포넌트를 개발한 후 그것을 디자인시스템 밖의 사용자들이 파운데이션이나 컴포넌트의 사용법을 잘 이해할 수 있도록 돕는 가이드라인이다.

이 문서의 구성에 정답은 없지만 보통 이 문서를 소비하는 사용자들은 디자이너, 엔지니어, 프로덕트매니저 등이 될 것이라고 예상해 본다. 그리고 그들이 보통 궁금해할 것들을 몇 가지 적어보았다.

-Usage(언제, 왜, 어떻게 사용하는지)

Usage에서는 예를 들어 버튼 컴포넌트의 경우라면, [사용자의 행동을 유도하고자 하는 경우, 주의를 집중시키기 위해서 버튼을 사용할 수 있다]라고 설명할 수 있다.

출처: Google Material Design

Properties

어떤 States이 있고 Interaction은 어떻게 이루어질지 등 이 컴포넌트에 해당하는 종류들에 대하여 상세히 설명해 준다. 이 부분은 엔지니어에게도 중요하고 피그마와 같은 디자인툴에서 디자인 키트를 만들 때에도 유용하다.

출처: eBay Playbook Design System

Best Practices 베스트 사용법

베스트사용법에 대해서 이야기하는 구간으로 정말 정말 중요하다. 할 것과 하지 말아야 할 것에 대하여 이미지와 함께 보여주면 사용자가 이해하기에 더욱 쉽다.

출처: eBay Playbook Design System

나는 이 부분이 가장 중요하다고 생각한다. 디자인시스템 밖 디자이너들이 가장 많이 궁금해하는 부분이 이곳에 있을 것이고 나 또한 그들에게 이 부분에 대해 많은 질문을 받아왔다. 특히 시각적인 규칙 외에도 우리 제품의 소비자를 고려한 부분에 대한 이야기가 빠지면 안 된다는 것을 배웠다. eBay의 디자인 시스템이 이 부분을 잘 설명해 주어서 예시로 가져와 보았다.

출처: eBay Playbook Design System

'사용자를 Overwelming 하게 만드는 복잡한 인터랙션을 피하라'라고 권한다.

나는 이에 한발 더 나아가 더 자세히 가이드를 줄 수도 있지 않을까 생각했다.

'Modal에서는 사용자가 쉽게 이해하고 사용할 수 있도록(인지과부하를 피하기 위해) 동작을 4개 이하로 제한하세요' 등 좀 더 구체적인 숫자를 제시하고 그 이유를 UX적인 접근으로 설명하면 디자이너가 이해하기 좀 더 쉬울 것이다. (물론 그 숫자는 팀원들과 함께 정의 내려야 한다)

-Spec

스펙 부분은 엔지니어들이 가장 많이 찾는 페이지일 것이다. Size, Spacing, Typography, Color 등에 대한 부분을 상세히 보여준다.

출처: eBay Playbook Design System

디자인시스템 문서화에서 꼭 필요한 부분들이라고 생각한 부분들만 적어보았다. 시간이 꽤 오래 걸릴 때도 있지만 디자인시스템에서 가장 중요한 일중 하나다. 이 문서를 소비자들의 곁으로 보낸 뒤에는 많은 피드백들을 받을 것이다. 계속 업데이트할 것이 생길 때마다, 부족한 부분이 보일 때마다 계속해서 고쳐나간다. 더 나은 디자인 문서를 만들기 위해서!