디자인 시스템 문서화 도구
디자인 시스템 공개 준비 3편
본 글은 Cloudforet 디자인 시스템인 미리내(Mirinae) 문서화 작업을 위한 자료 조사를 위해 작성했습니다.
디자인 시스템 공개 준비 시리즈
디자인 시스템 문서화 도구 (본편)
다양한 도구를 도입하여, 디자인 시스템의 확장과 유지 관리를 용이하게 할 수 있습니다. 특히, 문서화 도구는 유연하고 확장 가능한 문서 엔진을 제공하여, 문서 작성자가 콘텐츠에만 집중할 수 있도록 돕습니다.
디자인 시스템 문서화가 무엇인지, 왜 필요한지와 그 사례들은 디자인 시스템 공개 준비 1편에서 확인하실 수 있습니다.
목차
1. 4가지 타입의 도구
2. 디자인 시스템 문서화 도구 비교
3. 디자인 시스템 문서화 도구 서비스 톺아보기
1. 4가지 타입의 도구
디자인 도구
사용자 인터페이스를 디자인하고, 모든 에셋을 관리할 수 있습니다.
예: Figma, Sketch, Adobe XD, Framer…
문서화 도구
문서 작성을 위한 도구로, 개발 측면에 초점이 맞춰져 있어 대부분이 코드를 호스팅 하고 표시하는 방법을 제공합니다. 또한 대부분 정보 검색 기능과 버전 제어 기능을 포함합니다. 기본적으로 디자인 도구와 통합은 기본 기능이 아닙니다.
예: Confluence, Notion, Gitbook, VuePress, Fractal…
디자인 문서화 도구
디자인 문서화에 중점을 둔 문서화 도구들로, 브랜드와 디자인 자산을 보여주는데 특화되어 있습니다. 일부는 디자인 도구와 자동으로 동기화되어 쉽게 디자인 시스템을 최신의 상태로 유지할 수 있습니다.
예: Zerohiehgt, Supernova, Frontify, Nuclino, Lucid, Bynder…
커스텀 플랫폼
필요한 플랫폼을 직접 만들어서 사용. 자유도는 높지만 노력과 시간, 기술적인 지식을 많이 필요로 합니다. Google Material이 대표적인 예입니다.
어떤 도구를 사용하여도, 디자인 시스템 문서화는 가능하지만, 이를 위해 지원 가능한 리소스나 사용 중인 디자인 도구 등 팀의 상황에 따라 가장 적합한 문서화 도구는 달라질 것입니다. 따라서 저는 저희 팀에 가장 적합한 도구를 찾기 위해 우선 필요 조건을 나열하여, 해당 도구가 조건에 부합하는지 아닌지 확인해보기로 했습니다.
2. 디자인 시스템 문서화 도구 비교
각 디자인 시스템 문서화 도구를 비교하기 위해 아래의 도구 표를 참고하였습니다.
디자인 시스템 도구 비교 표 (https://hike.one/blog/the-best-tools-for-documenting-design-system)우리팀 상황에 맞게 그린 디자인 시스템 문서화 도구 표입니다. 만약 외부에 디자인 시스템을 공개하려면 아래 세개의 서비스들은 유료버전을 사용해야합니다.
디자인 시스템 문서화 도구 비교 표
타 문서화 도구 비교 표3. 디자인 시스템 문서화 도구 서비스 톺아보기
ZeroHeight
모든 디자인 시스템 리소스와 스타일 가이드(모든 자산)를 문서화 하고 호스팅할 수 있는 통합 플랫폼으로, 즐겨 찾는 도구와 동기화하여 더 빠른 워크플로우를 만드는데 도움을 줍니다.
Lightning, Polaris 등과 유사한 디자인 시스템을 위한 표준 레이아웃 제공
더 빠른 디자인을 위해, 즐겨찾는 도구들과의 동기화
스타일 가이드는 모두가 참여하여 온라인 문서처럼 직관적으로 편집 가능
스토리북 컴포넌트와 코드 예제와 상호작용 가능
프로토타입과 영상, 로드맵 등 다양한 형태의 콘텐츠 추가 가능
작성중인 문서는 패스워드나 숨김 기능으로 보호 가능
Figma에서 링크만으로 바로 Fetch 가능
디자인 도구와의 이전 동기화 기록을 보여주며, 개발자가 상세 내용을 확인할 수 있음
사용 사례 https://zeroheight.com/showcase
ZeroHeight은 이미 꽤 유명하다. (출처: https://uxtools.co/survey/2022/)Supernova
ZeroHeight과 레이아웃과 기능이 유사하지만 조금 더 세부적인 기능이 많습니다. 개인적으로 서비스를 이용할 때 속도가 느리다 느꼈습니다.
모든 기술 스택에 대한 설계 데이터를 코드 또는 자산으로 자동 변환 가능
코드 실시간 렌더링 기능(sandbox)을 제공
모든 Figma를 표기하며, Figma에서 업데이트 되면 문서에도 자동 업데이트
사용 사례 https://compound.supernova-docs.io/compound/latest/
Frontify
디자인 시스템을 포함하여 많은 기능을 포함하고 있는 브랜드 관리 시스템 입니다. 제품 리브랜딩과 재설계 시간을 줄여 워크플로우를 간소화하는데 도움을 줍니다. 이미지 내보내기, 업로드, 교체가 번거롭지 않으며 코드 스니펫 표기가 가능합니다.
버전 제어 기능은 없지만, 프로젝트를 복사하여 새 버전의 이름을 지정 후 해당 프로젝트에서 계속 진행할 수 있습니다.
브랜드 가이드라인
디지털 에셋 관리 용이
반복적 협업을 기반으로 적절한 워크플로우 구현
디지털 & 출력물 템플릿 관리
확장성
Nuclino
다수의 편집자가 동시에 같은 페이지에서 작업하기에 적합한 도구로, 다양한 표현과 시각화가 가능합니다. 문서로 채울 수 있는 워크스페이스로 구성되어 있습니다. Figma 임베딩 기능을 지원하며, 코드 스니펫 또한 지원합니다. 버전 컨트롤 기능이 있습니다.
도메인과 커스텀 테마 기능과 같은 커스텀 기능을 제공하지 않습니다.
Confluence
Confluence는 이미 문서화 도구로 가장 유명한 도구 중 하나 입니다. 페이지를 트리 형태로 구성할 수 있으며, 개발 관련 정보들을 통합 관리할 수 있는 다양한 플러그인과 옵션을 제공합니다. Jira와 통합 사용가능한 점도 강점입니다
Figma 링크를 포함할 수 있는 플러그인을 포함하고 있지만, 문서화를 위해 모든 구성 요소를 하나씩 export하고 import 해야합니다. 대신 자유롭게 페이지를 구성할 수 있습니다.
Notion
Confluence와 마찬가지로 Wiki를 구축할 수 있습니다. 프로젝트 관리, 문서화, 작업 추적 및 설계 문서화 등 다목적 문서화 도구 입니다. Figma, CodePen, Github Gists 등 몇가지 플러그인을 제공합니다. 다양한 템플릿을 제공하여 문서 제작에 필요한 시간을 단축시킬 수 있습니다.
Confluence와 마찬가지로 자유롭게 페이지를 구성할 수 있습니다. 사용자가 원하는 만큼 간단하고 정교하게 만들어서 사용할 수 있습니다.
사용 사례 https://www.nuclino.com/use-cases
Storybook
React, Vue 및 Angular용으로 설계된 UI 컴포넌트를 개발하고 저장할 수 있는 도구 입니다. 컴포넌트에 대한 기본 문서를 자동으로 생성하며, 디자인 시스템의 지침, 사용법, 원칙 등을 포함하도록 편집 할 수 있습니다. Figma 디자인을 포함시킬 수 있습니다.
디자인 시스템 문서화 도구는 아니지만, 디자인 시스템을 개발 프로세스에 포함시키는 데 도움이 될 수 있습니다. ZeroHiehgt과 함께 사용하는 경우가 많습니다.
UI 컴포넌트를 분리하여 설계하기 위한 샌드박스 환경
버전 간의 UI 변경 사항을 감지 기능
생산적인 워크플로우를 위한 애드온 지원
강력한 검색 기능
Catalog
실제 컴포넌트들와 디자인 문서를 한 곳에서 관리할 수 있어, 디자이너와 개발자가 원활한 협업을 가능하게 합니다. 디자이너의 문서 작성은 텍스트 파일 편집처럼 쉽고, 개발자는 어려움 없이 React 애플리케이션과 통합할 수 있습니다.
간단한 스타일 가이드 만들기
Markdown 서식으로 문서 작성 가능
React 애플리케이션과 바로 통합
제로 락인: 오픈소스로 필요한 부분 커스터마이징 가능
반응형 preview 제공
DSK(Design System Kit)
실시간 검색이 가능한 디자인 시스템으로 계층간 구조를 만드는데 도움이 되는 트리를 제공합니다. 오픈소스입니다.
Invision DSM
디자인과 코드를 연결하여 원활한 커뮤니케이션과 협업을 돕습니다. 피그마를 포함하여 수많은 도구와 라이브러리와의 통합을 제공합니다.
유용한 라이브러리나 도구와의 통합
컴포넌트, 원칙, 접근성 등을 팀이 중앙집중식으로 관리하는 방식
엔터프라이즈 레벨에 적합
Sketch 라이브러리에 중점이 맞춰져 있음
버전 관리 가능
Sketch 항목당 간단한 텍스트 단락으로 문서화 제한
React, Vue 등 다양한 프레임워크에 대한 코드 스니펫 지원
https://support.invisionapp.com/hc/en-us/sections/360004449791-Design-System-Manager-DSM-
Specify
디자인부터 코드까지 브랜드를 배포할 수 있는 디자인 데이터 플랫폼입니다. 방대한 제품과 대규모 UI 라이브러리를 유지 관리하는데 도움을 줍니다.
아토믹 디자인 시스템 사용
모든 스타일과 자산을 보관할 수 있는 동적 라이브러리 함께 제공
디자인이 생성되는 즉시 개발자 팀에 디자인을 제공하는 지속적인 전달 시스템
React Native
toolaps
컴포넌트와 토큰 기반의 디자인 시스템 지향 플랫폼으로 프로토타이핑과 디자인, 개발 관련 워크플로우를 지원합니다.
Supported by Adobe
Figma Plugin 지원
UXPin Merge
코드 기반의 디자인 도구 입니다. 엔지니어가 제품을 만들 때 이용하는 UI 코드 컴포넌트를 사용하여 디자인할 수 있습니다. 때문에 최종 제품과 가까운 프로토타입을 만들 수 있으며, 코드 기반으로 컴포넌트를 디자인하고 관리할 수 있으며, 함께 문서도 관리할 수 있습니다.
컴포넌트와 디자인 문서를 하나의 플랫폼에서 관리함으로써 일관성을 유지할 수 있습니다. 또한 WCAG 규격에 따라 콘트라스트 검사기나 색각시뮬레이터 등을 통해 테스트할 수 있습니다. Git Repo과 Storybook과의 Intergration을 지원합니다.
Pattern Lab
디자인 시스템의 컴포넌트를 개발하고, 테스트하고 보기 위한 오픈소스 프론트엔드 환경입니다. 이 플랫폼은 Atomic Design 원칙을 기반으로 합니다. 또한 마크업에서 컴포넌트를 빌드하고 별도의 json파일을 사용하여 변경할 수 있습니다. Pattern lab은 요소들을 자동으로 분류하여 대시보드 스타일로 화면에 표시합니다.
우리 팀에 가장 적합한 디자인 시스템 문서화 도구를 찾기 위한 자료 조사는 여기까지 입니다. 자료를 다 정리하고 나니, Figma에서 디자인 시스템 문서화 도구를 지원해주면 좋았을거란 아쉬움이 남았습니다. Figma 분발해주세요!
※ 이 글은 아래의 글들을 일부 번역, 일부 의역, 참고하여 작성하였습니다.
