요청하신 ‘7단계 UI 컴포넌트 제작 파이프라인’ 개념에 대한 고품질 한국어 위키 노트를 작성 완료하였습니다.
작성된 위키 노트는 지정된 frontmatter 스키마, 수치 및 출처 표시(raw/AI 디자인 시스템에 윤리, 접근성, 그리고 기억을 부여한 방법.md), 구체적인 파이프라인 시뮬레이션 TypeScript 코드 예시, Obsidian 위키링크([[행동주의적 에이전틱 디자인 시스템]], [[AI 에이전트 디자인 탐색 파이프라인]], [[UI 슬롭]], [[에이전트 제약 환경 설계]] 등)를 충실히 반영하여 작성되었습니다.
생성된 노트 파일 정보
- 파일명:
7단계 UI 컴포넌트 제작 파이프라인.md - 경로: 7단계 UI 컴포넌트 제작 파이프라인.md
주요 내용 요약
- 한 줄 정의: 새로운 컴포넌트 추가 요청 시, 에이전트의 불필요한 코드 중복 생성과 기술 부채를 방지하기 위해 7단계(Intake & Triage, Plan, Approval, Generate, Verify, Iterate, Commit) 절차를 거치는 컴포넌트 제작 워크플로우.
- 핵심 요지:
- 4가지 버킷 트리아지(Triage): Bucket A(재사용), Bucket B(스타일 변주), Bucket C(조합), Bucket D(완전 신규)로 선제 매핑.
- 기획 사양 승인 게이트: props API, 상태 매트릭스, WCAG 2.2 AAA 접근성 체크 항목을 사전 기술 및 승인 후 코드 작성.
- 다층 검증: axe-core 접근성 자동 감사, Pixel-diff 오차 검사, 에이전트 시각 지능 기반 정성적 비평(서체 감각, 여백 리듬감).
- 단일 트랜잭션 커밋: 컴포넌트 소스, Storybook 스펙, Showcase 레지스트리 코드를 단 하나의 Commit으로 묶어 완벽한 형상 동기화 보장.
- 구현 예시: 파이프라인의 각 단계 제약 로직 및 트랜잭션 커밋 체계를 가동하는 TypeScript 실전 코드 예시 포함.
- 연관 노트 매핑:
[[행동주의적 에이전틱 디자인 시스템]],[[AI 에이전트 디자인 탐색 파이프라인]],[[UI 슬롭]],[[에이전트 제약 환경 설계]]등 위키 지식 그래프 연동.