2만 다운로드 피그마 라이브러리가 코드까지 공개한 진짜 이유 — AI가 읽을 수 있어야 하니까

원티드 디자인 시스템 피그마 라이브러리. 다운로드 수 2만. 디자인 시스템 교본으로 자리 잡았다는 평가까지 받았어요. 그런데 원티드랩 플랫폼 디자이너 김도은은 이 라이브러리의 한계를 정면으로 이야기해요. 피그마만으로는 안 됐다고.

이번에 원티드가 내놓은 건 피그마 밖으로의 확장이에요. 문서화 사이트 Montage, 그리고 Web, iOS, Android 세 플랫폼의 코드 레포지토리 공개. 근데 이 공개의 진짜 이유가 좀 의외예요.

70개 컴포넌트 피그마 파일을 열어야 하는 고통

원티드는 디자이너와 개발자가 모두 피그마를 기준으로 소통해왔어요. 디자인-개발 간 정합성을 고려해서 설계했다고 하는데, 그럼에도 정적 디자인 도구라는 피그마의 한계는 넘을 수 없었거든요.

예를 들어 팝업 컴포넌트의 여백이나 모서리 둥글기 같은 시각적 요소는 확인할 수 있어요. 근데 Scrim 영역을 눌렀을 때 어떤 동작을 지원하는지, 팝업 내부에 스크롤이 생겼을 때 내비게이션은 어떻게 움직이는지 — 이런 건 확인이 안 돼요. 게다가 피그마 시안에서 컴포넌트 업데이트를 안 하면 개발자가 속성에 대해 혼란을 겪기도 했고요. 이런 문제들이 "이 컴포넌트 이 속성 맞아요?" 같은 질문을 반복시켰어요.

컴포넌트 스펙을 피그마에 작성하고, 교육과 안내도 지속적으로 했지만 — 70여 개 컴포넌트가 담긴 무거운 피그마 파일 자체가 진입 장벽이었어요. 특정 컴포넌트의 동작 하나 확인하려고 무거운 파일 로딩을 참고 들어가서 70개 중에 찾아서 읽어야 하는 과정. 가볍다고 할 수 없죠.

AI가 프롬프트로 UI를 만드는 시대에 피그마 파일은 못 읽는다

사실 이번 공개에는 내부 생산성 개선 말고 더 큰 이유가 있었어요. AX 전환.

AI가 프롬프트만으로 UI를 구성하는 에이전틱 환경이 현실이 되면서, 원티드 디자인팀은 디자인 시스템의 중요성이 더 커지고 있다고 느꼈다고 해요. 다양한 AI 도구를 업무에 써봤는데, 디자인 퀄리티와 일관성 측면에서 아직은 프로덕트 디자이너의 업무 프로세스를 전환하기 어렵다고 판단했어요.

그래서 선택한 방향이 "AI가 읽기 쉬운 디자인 시스템"을 만드는 것이었어요. AI의 지침이 될 상세한 가이드라인과, AI가 접근할 수 있는 디자인 시스템. 이걸 위해서는 공개가 필수였고, 코드 레포지토리 포함도 그래서 결정된 거예요. 피그마 파일은 AI가 읽을 수 없잖아요. 근데 코드와 문서화된 가이드라인은 읽을 수 있어요.

결국 사람을 위한 생산성 개선과 AI를 위한 기반 마련이 같은 방향으로 수렴한 거죠.

Montage가 피그마 라이브러리와 다른 점

문서화 사이트를 통해 원티드가 기대하는 변화는 네 가지예요.

첫째, 내부 생산성 향상. 피그마 파일에서 컴포넌트 속성을 직접 조작하는 대신 실제 동작을 빠르게 눈으로 확인할 수 있어요. 반복되는 커뮤니케이션을 줄이고, 제품 개발 속도를 높이겠다는 거죠.

둘째, 디자인 시스템 접근성 향상. 피그마에 익숙하지 않은 개발자나 PO도 브라우저만 열면 바로 확인할 수 있어요. 원티드는 전 직군이 바이브 코딩과 학습을 적극적으로 하는 환경이라, 조직 전체가 쉽게 접근할 수 있어야 한다는 판단이 있었어요.

셋째, 제품 일관성과 사용성 향상. 특정 속성이 어떤 상황에서 권장되는지 같은 판단 기준이 문서로 명확하게 정리되면, 각자 다르게 해석해서 생기던 불일치가 줄어들겠죠.

넷째, AX 전환 기반 마련. 상세 가이드는 AI가 컴포넌트의 쓰임과 판단 기준을 이해하는 근거가 되고, 코드 레포지토리는 AI가 디자인 시스템을 실제로 활용할 수 있게 해줘요.

Montage가 기존 피그마 라이브러리와 확실히 다른 점은 두 가지예요. 하나는 컴포넌트별 동작과 쓰임에 대한 상세한 디자인 가이드. 제품에서 자주 쓰이는 케이스별 권장 예시와, 피그마에서는 표현하기 어려운 동작과 규칙을 확인할 수 있어요.

다른 하나는 Web, iOS, Android 세 플랫폼의 코드 공개. 하나의 디자인 시스템으로 세 플랫폼을 대응하고 있는데, 같은 컴포넌트가 각 플랫폼에서 어떻게 구현되어 있는지 한 곳에서 비교하며 참고할 수 있다는 거죠. 가이드라인만 볼 때와 코드를 직접 뜯어볼 때 배울 수 있는 게 다르듯이, 이건 꽤 의미 있는 리소스예요.

머신 리더블 디자인 시스템이라는 다음 숙제

원티드 디자인 시스템이 다음 단계를 시작한 거예요. 겉으로 보면 성숙기를 지나고 있지만, 안에서는 여전히 재밌는 것들을 계획하고 있다고 해요. 힌트를 살짝 던졌는데 — 머신 리더블 디자인 시스템, 에이전틱 환경 구축, 지표 기반 거버넌스 확립.

디자인 시스템은 도구이자 규칙이에요. 규칙은 아무리 잘 만들어도 쓰이지 않으면 의미가 없잖아요. 이제 그 "쓰는 주체"에 AI가 추가된 거죠. 사람만 읽으면 됐던 시대에서, 사람과 AI 모두 읽고 활용할 수 있어야 하는 시대로. 피그마 라이브러리 공개가 첫 걸음이었다면, 코드와 문서화 사이트 공개는 그다음 걸음인 셈이에요.