원티드랩 디자인팀이 디자인 시스템 문서화 사이트 몽타주(Montage)를 오픈했어요. 이번 사이트는 기존에 피그마 라이브러리 형태로 제공되던 원티드 디자인 시스템을 웹 기반 문서에 코드까지 함께 정리해 확장한 형태입니다.
원티드가 이전에 공개했던 피그마 라이브러리는 약 2만 회 다운로드를 기록하며 디자이너들 사이에서 참고 자료로 활용되어 왔는데요, 다만 실제 제품 개발 과정에서는 피그마 파일만으로는 컴포넌트 동작 방식이나 세부 규칙을 전달하기 어려운 점이 있었다고 해요.
예를 들어 팝업 컴포넌트의 시각적인 구조는 확인할 수 있지만, 스크림 영역을 눌렀을 때 어떤 동작이 발생하는지나 내부 스크롤이 생길 때 내비게이션이 어떻게 작동하는지와 같은 인터랙션 규칙까지는 전달하기 어려웠다고 합니다. 또한 70여 개 이상의 컴포넌트를 담은 대형 피그마 파일 자체가 접근 장벽이 되기도 했다고 해요.
원티드랩은 이러한 커뮤니케이션 문제를 해결하기 위해 문서화 사이트를 제작했고, 사이트에서 컴포넌트 시각 구조 및 실제 인터랙션 동작, 사용 상황별 가이드 등을 확인할 수 있게 만들었어요. 그뿐만 아니라 웹, iOS, 안드로이드 세 플랫폼의 구현 코드도 함께 제공된답니다.
원티드랩은 이번 문서화 사이트를 통해 내부 구성원들의 생산성, 디자인 시스템 접근성, 제품 일관성·사용성 향상을 기대하고 있고, AI 기반 UI 제작 환경에 대비한 AX 전환 기반으로도 삼고 있습니다. 프롬프트로 UI를 생성하는 방식이 확산되면서 AI가 참고할 수 있는 구조화된 가이드와 코드 형태의 디자인 시스템이 중요해지고 있는 흐름을 반영한 모습입니다.
