정의
정적인 디자인 화면(Figma 등)을 넘어, 실제 데이터와 비즈니스 로직을 포함하여 사용자가 직접 조건을 조작(Toggle)하며 UI 변화를 즉시 확인할 수 있는 기능 중심의 명세서다.
핵심 속성
- 동적 상태 변화: 텍스트나 이미지 설명 대신 실제 버튼 클릭이나 스위치 조작을 통해 조건부 UI(예: 쿠폰 조합, 가격 정책)를 렌더링함.
- 데이터 바인딩: MCP를 통해 사내 데이터베이스나 API와 연결되어 실제 유저 데이터를 프로토타입에 실시간으로 주입 가능함.
- 코드 기반 검증: Figma의 벡터 데이터가 아닌 HTML/CSS/JS 기반으로 구현되어 실제 제품 환경과 유사한 기술적 제약 사항을 사전에 검증함.
관계
- 20260609-ai-design-bottleneck-solver — 상위개념: 디자인 업무의 병목을 해결하기 위한 구체적인 방법론.
- 20260609-interactive-spec-communication — 연장: 인터랙티브 스펙이 조직 내 커뮤니케이션에 미치는 영향.
- 20260609-data-driven-prototyping-for-ut — 연장: 사용자 테스트(UT) 단계에서의 데이터 활용 전략.
인용
“문서를 읽고 상상하는 방식이 아니라, 원하는 조건을 직접 조작하면서 화면을 확인할 수 있게요. PDP 가격 정책 개발/QA 과정에서 반복되던 확인 질문이 0건이 됐습니다.”