전통적인 디자인 핸드오프 방식은 디자이너가 정적인 화면(이미지)과 텍스트로 된 정책 문서를 작성하고, 개발자와 QA가 이를 해석하는 과정에서 수많은 질문과 오해가 발생했다. 특히 커머스처럼 복잡한 조건부 UI가 많은 도메인에서는 “쿠폰을 적용했을 때의 버튼 문구는 무엇인가?”와 같은 파편화된 질문이 소통의 병목을 만든다.
Claude Code와 MCP를 활용해 만든 ‘인터랙티브 스펙’은 이 병목을 근본적으로 제거한다. 디자이너가 캡처 이미지를 AI에게 주고 “이걸 토글 가능한 프로토타입으로 만들어줘”라고 요청하면, AI는 실제 코드로 작동하는 시뮬레이터를 뱉어낸다. 이해 관계자들은 문서를 읽고 상상하는 대신, 버튼을 직접 눌러보며 정책을 체득한다. 이는 디자인 산출물이 ‘그림’에서 ‘시스템’으로 진화했음을 의미한다.
근거
오늘의집 PDP(상품 상세 페이지) 가격 정책 커뮤니케이션 과정에서, 조건부 UI를 직접 조작할 수 있는 인터랙티브 스펙을 도입한 결과, 개발/기획/QA로부터 반복되던 확인 질문이 0건이 되었다.
“상품쿠폰, 장바구니쿠폰, 패키지쿠폰 수령 여부를 토글하면 쿠폰할인가, 버튼 상태, 문구가 조건에 따라 즉시 바뀌어요. … PDP 가격 정책 개발/QA 과정에서 반복되던 확인 질문이 0건이 됐습니다.”
연결된 생각
- 20260512-bottleneck-solving-ai-design-workflow — 이 스펙이 산출되는 전체 프로세스.
- 20260512-ai-is-design-verifier-not-creator — 도구의 정체성 변화에 대한 관점.