2만 다운로드 피그마 라이브러리에서 코드 공개까지
원티드 디자인 시스템 문서화 사이트 Montage 오픈기
안녕하세요. 원티드랩 플랫폼 디자이너 김도은입니다.
지난 글(컴포넌트만으로는 디자인 시스템이 되지는 않더라고요)에서 디자인 시스템을 공개하며 디자이너·개발자분들께 가능성을 열어주고, 멋진 커리어를 만드는데 도움이 되었으면 좋겠다는 공개 의도를 언급하며 마무리했었습니다. 그리고 그 사이 원티드 라이브러리는 많은 디자이너들에게 디자인 시스템 교본으로 자리 잡았다고 생각해요. 이 글을 작성하는 저 또한 원티드 라이브러리를 통해 플랫폼 디자이너로 커리어를 시작하게 된 수혜자이기도 하고요!
이렇듯 원티드 라이브러리는 피그마 오픈 소스로서 이미 성숙기에 올라 있었어요. 그리고 이제는 그다음 단계로 피그마 밖으로의 확장을 진행하며 저희가 겪은 고민을 나눠보려고 합니다.
2만 명 이상이 다운로드한 원티드 라이브러리피그마 라이브러리만으로 부족했던 것
저희는 디자이너·개발자가 모두 사용하는 툴인 피그마를 기준으로 소통해 왔습니다. 하지만 디자인 시스템을 운영하면서 피그마만으로는 해결하기 어려운 문제들이 보이기 시작했어요. 먼저 디자이너와 개발자 간 컴포넌트 동작에 대한 소통 비용이 지속적으로 발생했어요.
원티드 디자인 시스템은 제작 과정에서 디자이너와 개발자의 원활한 소통을 위해 개발-디자인 간 정합성을 고려하여 설계되었습니다. 하지만, 그럼에도 정적인 디자인 툴이라는 피그마의 한계로 소통 비용을 완전히 극복하긴 어려웠어요.
예를 들어 팝업 컴포넌트의 여백, 모서리 둥글기 같은 시각적인 요소는 명확하게 확인할 수 있었지만, Scrim 영역을 눌렀을 때 어떤 동작들을 지원하는지, 팝업 내부에 스크롤이 발생할 때 내부 내비게이션은 어떻게 동작하는지와 같은 확인은 어려웠습니다. 게다가 피그마 시안에서 컴포넌트 업데이트를 하지 않은 경우, 개발자는 컴포넌트 속성에 대해 혼란을 겪기도 했고요. 그리고 이런 문제는 제품 개발 시 디자이너와 개발자의 질문을 반복시키며 비효율을 야기했어요.
이 문제를 해결하기 위해 저희는 피그마에 컴포넌트 스펙을 작성하고, 내부 디자이너·개발자 분들을 대상으로 교육과 안내를 지속적으로 지원해 왔습니다. 하지만, 70여 개라는 방대한 컴포넌트를 담은 피그마 파일 자체가 진입 장벽이라는 생각이 들었어요. 특정 컴포넌트의 동작을 확인하기 위해 무거운 피그마 파일의 로딩을 참고 들어가, 70여 개 컴포넌트 중 특정 컴포넌트를 찾아 원하는 내용을 읽어야 하는 과정이 가볍지는 않다고 판단했어요. 그래서 이런 소통과 접근성 문제를 해결하는 수단으로 문서화 사이트 제작을 시작하게 되었습니다.
AX 전환기
사실 이번 공개에는 내부 생산성 개선 외에도 AX 전환이라는 이유가 더 있었어요.
AI가 프롬프트만으로 UI를 구성하는 에이전틱 환경이 현실이 되며, 저희는 디자인 시스템의 중요성이 더 커지고 있다고 느꼈어요. 원티드 디자인팀도 다양한 AI툴을 업무에 활용하고 있는데요. 여러 테스트를 거치며 디자인 퀄리티와 일관성 측면에서 현시점 기준 아직은 프로덕트 디자이너의 업무 프로세스를 전환하는데 어려움이 있다고 판단했어요.
그리고 이 퀄리티와 일관성 문제를 해결할 수 있는 방안으로 AI가 읽기 쉬운 디자인 시스템을 만드는 것을 선택했어요. AI의 지침이 될 상세한 가이드라인과 접근 가능한 디자인 시스템을 위해 공개는 필수 불가결한 선택이었어요. 이 방향을 위해 저희는 이번 공개에 코드 레포지토리를 포함하게 되었어요.
문서화 사이트로 기대하는 점
Wanted Design System 문서화 사이트 - Montage문서화 사이트를 통해 앞서 언급했던 문제를 해결함으로써 내부적으로 크게 네 가지 변화를 기대하고 있어요.
내부 구성원들의 생산성 향상
그동안 피그마 파일에서 컴포넌트 속성을 직접 조작해야 했다면, 이제는 실제 동작을 빠르게 눈으로 확인할 수 있습니다. 그리고 이런 변화는 제품 개발 과정에서 반복되는 커뮤니케이션을 줄이고, 크게는 생산성 향상에 도움이 될 거라고 기대해요.
디자인 시스템 접근성 향상
두 번째는 피그마에 익숙하지 않은 구성원의 접근성을 높인다는 점인데요. 개발자·PO 등 다양한 직군의 구성원들이 피그마 계정이 없어도, 피그마 사용법을 잘 몰라도 브라우저만 열면 디자인 시스템을 즉시 확인할 수 있어요. 전 직군의 바이브 코딩과 학습을 적극 지원하는 조직 환경에 맞춰, 조직 전체의 디자인 시스템에 대한 쉬운 접근이 이해도를 높이고 규칙이 잘 지켜지게 도울 거라고 기대해요.
제품 일관성·사용성 향상
그리고 무엇보다 컴포넌트 사용에 대한 디자인 가이드를 상세하게 제공함으로써 제품 전반의 일관성과 사용성을 높일 수 있길 기대하고 있어요. 특정 속성이 어떤 상황에서 권장되는지와 같은 판단 기준이 문서로 명확하게 정리되면 각자 다르게 해석해서 생기던 불일치들이 자연스럽게 줄어들고, 제품 제작자들은 더 주요한 문제에 집중할 수 있을 거라고 생각해요.
AX 전환을 위한 기반 마련
마지막으로 문서화 사이트 내 상세한 가이드는 AI가 컴포넌트의 쓰임과 판단 기준을 이해하는 근거가 되고, 포함된 코드 레포지토리는 AI가 디자인 시스템을 실제로 활용할 수 있도록 합니다. 제품 제작자들과 AI 모두 디자인 시스템을 쓸 수 있는 환경을 만드는 출발점을 이번 공개로 만들어가려 해요.
문서화 사이트 Montage, 피그마 라이브러리와 다른 점
Wanted Design System 문서화 사이트 - Components저는 디자인 시스템은 도구이자 규칙이라고 생각해요. 규칙은 아무리 잘 만들어도 쓰이지 않으면 의미가 없듯, 디자인 시스템도 사용자들의 선택을 받아야 가치가 생긴다고 생각합니다. 그렇기 때문에 이번 공개는 디자인 시스템 사용자들이 더 디자인 시스템을 이해하고 쉽게 사용할 수 있도록 하는데 의미가 있어요.
그리고 이 지점에서 원티드의 디자인 시스템 문서화 사이트는 기존 피그마 라이브러리와 다른 점이 있어요.
상세한 디자인 가이드 제공
디자인 시스템이라는 규칙을 잘 쓰이도록 하기 위해 저희는 사용자의 고민을 덜고, 쉽게 사용하도록 하는 것에 집중하고 있습니다. 그리고 이런 고민을 담아 컴포넌트 별 동작과 쓰임 별 상세한 디자인 가이드를 제공했어요. 제품에서 자주 쓰이는 케이스 별 권장 예시와 피그마에는 표현하기 어려운 동작과 규칙을 확인할 수 있어요.
Web·iOS·Android 세 플랫폼 코드 공개
저희는 하나의 디자인 시스템으로 Web, iOS, Android 세 플랫폼을 대응하고 있습니다. 그리고 이번 공개엔 각 플랫폼에서 같은 컴포넌트가 어떻게 구현되어 있는지 모두 확인할 수 있어요. 가이드라인만 볼 때와 피그마 라이브러리를 직접 뜯어보는 것에서 배울 수 있는 점이 다르듯, 세 플랫폼의 코드를 한 곳에서 비교하며 참고할 수 있다는 건 꽤 의미 있을 거라고 생각해요.
끝으로
이번 공개를 통해 원티드 디자인 시스템은 다음 단계를 시작하게 되었어요. 멀리서 본 원티드 디자인 시스템은 성숙기를 지나고 있겠지만, 여전히 저희는 더 좋은 도구를 만들기 위해 재밌는 여러 가지를 계획하고 있어요. 하나씩 차근차근 풀어나갈 예정이니, 앞으로도 원티드 디자인 시스템의 여정을 지켜봐 주시면 감사하겠습니다.
여기까지 긴 글 읽어주셔서 감사합니다!
Wanted Design System - Montage →
Wanted Design System 피그마 라이브러리 →
추신:
1. 진행 중인 재밌는 작업 힌트: 머신 리더블 디자인 시스템 / 에이전틱 환경 구축 / 지표 기반 거버넌스 확립
2. 디자인 시스템에 관해 더 얘기 나누고 싶다면 커피챗 환영입니다!
제작. 프로덕트 디자인팀