디자인 시스템 문서화 9단계
디자인 시스템 공개 준비 4편
Cloudforet 디자인 시스템인 미리내(Mirinae) 문서화 작업의 자료 조사를 위해 본 글을 작성했습니다.
디자인 시스템 공개 준비 시리즈
디자인 시스템 문서화로 효율 높이기 (1편)
디자인 시스템 문서 사이트 사례 (2편)
디자인 시스템 문서화 도구 (3편)
디자인 시스템 문서화 9단계 (본편)
목차
1. 최종 사용자 이해
2. 컴포넌트별 문서 요구사항 개요 설정
3. 스타일 가이드라인 만들기
4. 재사용 가능한 템플릿 생성
5. 신뢰할 수 있는 단일 소스 개발
6. 스타터 키트 포함시키기
7. 피드백 수집
8. 담당자 지정
9. 정기적인 업데이트
1. 최종 사용자 이해
디자인 시스템 문서화의 첫 번째 단계는 시장, 즉 사용자를 살펴보는 것입니다. 사용자가 원하는 것이 무엇인지 이해하지 못한다면, 디자인 목표와 결과가 잘못될 수 있습니다.
문서를 하나의 제품으로 분류하고, 당신의 팀을 제품의 고객으로 생각해 보세요. 누가 이 문서를 사용할지, 그들이 원하는 콘텍스트 제공을 위해 무엇을 문서에 포함해야 하는지, 그들이 사용하기 쉬운 방식으로 구성하는 방식에 초점을 맞춰야 합니다.
2. 컴포넌트별 문서화 요구사항 개요 설정
다음으로 각 컴포넌트의 요구 사항을 다루는 개요를 만듭니다. 문서는 다음의 디자인 가이드를 포함해야 합니다.
패턴 (Patterns)
코드 스니펫 (Code Snippets)
컬러 (Colours)
이미지 (Images)
폰트 (Fonts)
컴포넌트 문서는 다른 디자인 요소의 맥락에서 개요를 고려하기 전에, 조직의 요구사항을 가장 먼저 고려해야 합니다.
3. 스타일 가이드라인 만들기
스타일 가이드는 문서에 대한 시각적 표현을 위한 기초를 확립하고, 디자인 시스템의 시각적 요소와 콘텐츠에 대한 지침을 제공하는데 도움이 됩니다. 스타일 가이드는 디자인 문서 요소들을 살펴보는 것에서부터 시작하여, 색깔, 로고, 전반적인 보이스톤을 설명합니다. 궁극적으로 다른 사람들이 상용할 수 있는 템플릿을 제공하는 역할을 합니다.
4. 재사용 가능한 템플릿 생성
그다음 반복해서 재사용할 수 있는 템플릿 초안을 작성해야 합니다. 재사용 가능한 문서 템플릿을 사용하면, 팀의 시간을 절약하고 문서의 일관성을 유지할 수 있습니다.
5. 신뢰할 수 있는 단일 소스 개발
신뢰할 수 있는 단일 소스(Single source of trusth, 이하 SSOT)를 설정, 설명, 문서화하는 것은 제품 디자인 요소 중 가장 중요한 것입니다. SSOT는 보편적으로 디자인팀이 하는 모든 작업의 중심이 되기 때문입니다. 아이콘부터 색 구성표, 스케일 종류, 버튼까지 모든 사람들이 SSOT를 알고 이해하고 있다면, 모든 작업은 자연스럽고 매끄럽게 진행될 것이며, 회사 전체 작업에서 일관성을 유지할 수 있습니다.
컴포넌트 라이브러리에 있는 기본 디자인 컴포넌트로 시작하거나, React 컴포넌트로 시작하여 개발을 시작하세요.
6. 스타터 키트 포함시키기
디자인 키트는 디자인 시스템 문서에서 종종 간과되는 구성 요소이지만, 이 리소스는 "시작점" 나타내 좋은 사용자 경험을 위해 필수적이며, 완벽한 온보딩 도구입니다. 스타터 키트는 단계별 가이드라인을 제공하여 고급 사용자까지 커버할 만큼 유연해야 합니다.
7. 피드백 수집
디자인 시스템이 잘 작동하는지 아닌지를 피드백을 통해 파악할 수 있습니다. 피드백을 Github의 이슈를 통해서만 받을 경우, Github에 익숙하지 않은 디자이너와 비교적 덜 기술적인 역할을 하는 사용자들이 피드백의 수집에 어려움을 겪을 수 있습니다.
웹사이트의 피드백 수집 상자를 문서 사이트에 배치하여, 사용자가 그들이 겪는 문제를 설명하고 접수할 수 있도록 해야 합니다. Github 이슈 생성 없이, 간소화된 피드백 채널을 통해 문서 플랫폼을 통해 누구나 쉽고 빠르게 피드백을 제공할 수 있도록 해야 합니다.
8. 담당자 지정
문서화는 사람들이 자원하지 않는 경우, 노동집약적인 업무가 될 수 있습니다. 팀원들과 업무를 분담하여, 팀원들과 문서화의 중요성과 가치를 공유할 수 있어야 합니다. 이 업무를 한 사람이 짊어지고 가는 대신, 팀원들과 책임을 분배하는 것을 고려하십시오. 이를 통해 다양한 통찰력을 얻고, 작업을 더 쉽게 수행할 수 있습니다.
9. 정기적인 업데이트
디자인 시스템은 유지보수를 필요로 합니다. 또한, 깔끔하고 적절하게 유지되어야 합니다. 잠재적인 문제 영역을 식별하고, 불일치를 줄이며, 활성 시스템(active systems)의 수를 간소화하는데 지속적으로 주의를 기울여야 합니다.
좋은 디자인 시스템은 풍부한 컴포넌트 라이브러리와 SSOT를 중심으로 명확한 컴포넌트 문서를 갖춰야 합니다. 이를 통해 사람들이 디자인 시스템 자체를 이해하고 잘 따를 수 있도록 해야 합니다. 하나의 좋은 예로 문서 사이트와 디자인 시스템 컴포넌트의 코드 예제에 대한 SSOT를 설정하고, 이들이 서로 일치하도록 정기적으로 업데이트하는 것입니다.
※ 이 글은 아래의 글들을 일부 번역, 일부 의역, 참고하여 작성하였습니다.
