디자인 시스템 문서화로 효율 높이기
디자인 시스템 공개 준비 1편
Cloudforet 디자인 시스템인 미리내(Mirinae) 문서화 작업의 자료 조사를 위해 본 글을 작성했습니다.
디자인 시스템 공개 준비 시리즈
디자인 시스템 문서화로 효율 높이기 (본편)
목차
- 디자인 시스템이란?
- 디자인 시스템 문서화란?
- 디자인 시스템 문서화의 필요성
디자인 시스템이란?
디자인 원칙, 규격, 다시 사용할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 총 집합체로 조직의 스타일 또는 방향에 따라 단순 스타일 가이드, 패턴 라이브러리 역할만 하는 디자인 시스템도 있고 브랜드 원칙, UX 원칙에 이르기까지 하나의 철학을 구성하는 시스템도 있습니다.
어떤 제품을 만들 때 표준 규칙을 세우고 이에 따라 작업을 효율적이고, 일관되며, 나아가 확장할 수 있도록 하기위함에 그 목적이 있습니다.
디자인 시스템에 대해 좀 저 상세히 알고 싶으시다면, 제가 몸담고 있는 CloudONE팀 블로그의 Design System 포스팅을 확인해보세요. 위 정의는 해당 포스팅의 글을 일부 발췌, 수정하여 작성하였습니다.
디자인 시스템 문서화란?
디자인 시스템 문서는 프로덕트 디자인에 도움이 되는 중요한 자원입니다. 또한 디자인 시스템 문서는 디자인 규칙을 공유하고, 적용하는데 도움이 됩니다. 궁극적으론 디자이너와 개발자가 UI를 디자인하고 개발할 때 필요한 것들을 명시적으로 가시화하는데 도움이 됩니다.
일반적인 디자인 시스템은 워크플로와 함께 UI 디자인 컴포넌트와 기타 컴포넌트를 포함하는 컴포넌트 라이브러리로 구성됩니다. 따라서 디자인 시스템은 패턴 라이브러리와 스타일 가이드를 모아 디지털 경험을 통합하는데 도움을 줍니다.
Blink UX의 수석 UX 디자이너이자 파트너인 Heidi Adkisson에 따르면 다양한 디자인 문서 유형이 있지만, 그 문서들은 다음의 공통 사항을 포함하고 있습니다.
디자인 시스템 문서가 가지는 공통 사항
사용자 스토리 - 사용자 관점 접근 방식으로 디자인 하도록 돕습니다.
화면 흐름 도표 - 사용자가 화면과 화면 사이를 탐색하는 플로우를 보여주는 데 유용합니다.
활용 사례 - 막대한 이점을 제공할 수 있는 길고 객관적인 내러티브를 제공합니다.
페이지 수준(Page-level)의 문서 - 페이지의 기능, 목적, 그리고 데모에 대한 지침에 대한 개요를 포함합니다.
시나리오 서술 - 특정 작업(task)을 수행하는 방법을 개략적으로 서술합니다.
구조적 관점에서 디자인 시스템 문서가 공통적으로 포함하는 내용
객체 모델(Object Model) - 시스템의 구조적인 관점을 제공합니다.
아키텍쳐 맵 – 앱 또는 사이트가 어떻게 구성되어 있는지 알려줍니다.
표준화된 컴포넌트 – 시스템 전체에서 공유되는 표준화된 요소에 대해 이야기합니다.
시스템 어휘 – 시스템과 연관된 단어, 문구 등을 리스트로 제공합니다.
네비게이션 프레임워크 – 메뉴 아이템, 네비게이션 요소 및 제어 방식을 서술합니다.
Photo by UX Indonesia on Unsplash디자인 시스템 문서화의 필요성
디자인 시스템 문서는 오늘날 모든 디자인 시스템의 필수 요소입니다. 팀 조직을 설명하고 시스템의 구성 요소 라이브러리에 대한 명확한 기록을 유지하기까지, 컴포넌트 문서화는 성공적인 디자인을 위한 필수 요소 입니다.
한때 디자인 시스템 문서는 중요하지 않은 것으로 간주되었으나, 이는 디자인 시스템 문서화의 잠재력 느낄 수 없던 이해 관계자들이 가치를 몰라 봤기 때문입니다.
하지만, Google의 Material Design 등장 후 디자인 문서는 분명히 중요해졌습니다. 그 전엔 대부분의 디자인 문서는 체계화되어 있지 않았지만, Material Design은 구조화된 문서를 제공함으로써 디자인 문서화의 필요성을 상기시켰고, 이 모든 것을 변화 시켰습니다.
디자인 시스템을 문서화하면 다음과 같은 많은 이점이 있습니다
비전을 제공합니다.
단순한 기술적인 지침이 아닌 사람에 초점을 맞춘 디자인 문서를 제공함으로써, 팀이 문제 해결 과정에서 집중력을 잃었을 때 참고할 수 있는 명확한 비전을 설정할 수 있습니다.
명확하고 실질적인 구조를 제공합니다.
프로세스를 유지함으로써 디자이너와 개발자는 그들 앞에 놓인 계획에 좀 더 집중 할 수 있습니다.
리소스 절약에 도움이 됩니다.
우수한 품질의 디자인 문서는 시행착오와 실수를 줄이고, 필요한 시간과 노력을 최적화할 수 있습니다. 또한 재사용 가능한 디자인 패턴을 기록하고 복제할 수 있도록 합니다.
참여와 만족을 유도합니다.
큰 프로젝트일 수록 팀에서 투자해야하는 리소스는 막대합니다. 효율적인 디자인 문서는 팀원들이 난관에 직면했을 때, 실질적으로 도움이되는 지침을 제공합니다.
효율성과 생산성이 향상됩니다.
팀에서 필요한 모든 것을 문서화하고 이용가능하게 따라, 모든 사람들이 같은 문서를 바라보고 작업할 수 있어 작업을 빠르게 마칠 수 있습니다.
Photo by Balázs Kétyi on Unsplash효과적인 디자인 문서가 없다면 제품을 성공적으로 디자인하고, 시장에 공급하는 것은 거의 불가능합니다. 디자인 시스템 문서는 디자인 의사결정에 대한 이론적 근거를 제공하며, 사용자가 모델을 이해하고 상호 작용할 수 있도록 도와줌으로써 제품 디자인과 제작에서 필수 요소가 되었습니다.
※ 이 글은 아래의 글들을 일부 번역, 일부 의역, 참고하여 작성하였습니다.
