컴포넌트 하나 고치는 데, 온 MCP가 다 필요하다
핵심 요약
원티드랩 디자인 시스템 팀에서 소수 인원의 한계를 극복하고 디자인 시스템 개선 생산성을 높이기 위해, 클로드 코드와 MCP를 활용해 컴포넌트 수정 작업 프로세스를 자동화한 경험을 공유한 글입니다.
주요 내용
- 기존 문제점: 단순 속성 변경(예: 아바타 모서리 둥글기 수정) 작업도 현행 파악, 리서치, 피그마 반영, 문서화, 지라 티켓 발급, 슬랙 공유 등 6단계를 거치며 약 5일이 소요되는 등 '판단'보다 '실행'에 과도한 시간이 낭비됨.
- 워크플로우 스킬 자동화 (클로드 코드 + MCP):
- 현행 파악: GitHub 연동을 통해 Web·iOS·Android 레포지토리를 병렬로 분석하여 스펙 및 플랫폼 간 불일치 파악
- 시중 리서치: 서브 에이전트로 시중 디자인 시스템 조사 및 인사이트 도출 (최종 결정은 디자이너가 수행)
- Figma MCP: 작업 브랜치에서 레이어 네이밍, 토큰 적용 등 반복 작업 자동 처리
- 문서 갱신: 피그마 내 업데이트 내역 및 핸드오프 문서 작성, 커스텀 공식 제안 지원
- Atlassian MCP: 지라 티켓 및 플랫폼별 하위 티켓 자동 발급
- Slack MCP: 담당자 태그 및 알림 메시지 자동 전송
- 도입 효과: 컴포넌트 수정에 소요되던 작업 시간이 기존 5일에서 1일로 대폭 단축되었으며, 반복 실행 업무를 위임하고 사람의 의사결정과 시각적 검수에 집중할 수 있게 됨.
