Figma 퍼블리싱 파이프라인 06. Pattern-Agnostic 설계 + 검증 자동화
·7 min read·6 / 6
V05에서 남은 문제
1. 패턴 하드코딩
# V05 Phase 6-7
if pattern == "TABLE":
return _generate_table_design(...)
elif pattern == "CARD":
return _generate_card_design(...)
elif pattern == "FORM":
return _generate_form_design(...)
# ... if-elif 12개 (TABLE, CARD, FORM, GRID, DETAIL_PAGE, ...)새로운 패턴(CAROUSEL, TIMELINE 등) 추가 시 Phase 6-7 전체를 수정해야 했다.
2. 검증 자동화 부재
V05는 제품 관리 탭 하나만 수동으로 Figma vs Code를 비교했다. 매번 새로운 페이지를 퍼블리싱할 때마다 수동 검증해야 했고, 불일치 항목을 놓칠 가능성이 컸다.
3. Python 스크립트 부족
V05는 섹션 분할만 자동화했다. 코드 구조를 분석하는 스크립트와 Figma vs Code를 비교하는 스크립트가 없었다.
V06에서 추가된 것
1. Python 스크립트 3개
Phase 2.2: figma_analyze_code.py
python3 .claude/scripts/figma_analyze_code.py \
--component-path apps/admin/.../dialog.tsx \
--app admin \
→ /tmp/current_code.json추출 내용:
- 컴포넌트명, Props
- 조건부 렌더링 (&&, ?)
- 스타일 정보 (색상, 간격, 레이아웃)
예시:
{
"componentName": "ExplanationRequestDetailDialog",
"sections": [
{
"sectionName": "검토 결과",
"properties": {
"headerBar": {"width": "4px", "color": "primary.4"},
"radioGroup": ["VALID", "INVALID", "INVALID_EXCLUDE"],
"textarea": {"minH": "160px", "maxH": "160px"}
},
"conditionalRender": {"condition": true}
}
]
}Phase 2.3: figma_match_props.py
python3 .claude/scripts/figma_match_props.py \
--figma /tmp/figma_deep.json \
--code /tmp/current_code.json \
→ /tmp/figma_deep_mismatches.json비교 결과:
{
"mismatches": [
{
"severity": "HIGH",
"section": "검토 결과",
"field": "radioGroup",
"figma": ["유효", "무효", "유효제외"],
"code": ["VALID", "INVALID", "INVALID_EXCLUDE"],
"status": "라벨 불일치"
},
{
"severity": "MEDIUM",
"section": "검토 결과",
"field": "textarea",
"figma": "160px",
"code": "160px",
"status": "일치"
}
]
}분류:
- HIGH: 필드 누락, 구조 변경, 조건부 로직 차이
- MEDIUM: 색상/간격/스타일 불일치
- LOW: 미세 차이 (1-27px)
2. Phase 5.5 (LLM 구조 분석)
문제: V05에서 패턴을 어떻게 판정했나?
설계서 쓰기 전 → 패턴 먼저 판정 (TABLE? FORM? GRID?)
→ 설계서 (패턴별 다른 로직)
→ 코드 생성 (패턴별 다른 로직)
새 패턴 추가 시 → 패턴 판정 로직 + 설계서 로직 + 코드 로직 모두 수정해결책: Phase 5.5 추가
V05: [분석] → [패턴 판정] → [설계서] (if-elif) → [코드] (if-elif)
V06: [분석] → [Phase 5.5: LLM] → [설계서] (단일) → [코드] (단일)
↓
layout_type: "table" | "grid" | "form" | "page"
element_type: "columns" | "cards" | "fields" | "items"
component_recommendations: {...}V06 Phase 6-7
# V06 Phase 6
def generate(self, analysis, llm_guidance):
# 패턴 이름 없음
layout_type = llm_guidance["layout_type"]
element_type = llm_guidance["element_type"]
# 동일한 로직
elements = figma_structure.get(element_type + "s")
return {
"layout_type": layout_type,
"element_type": element_type,
"elements": elements
}
# V06 Phase 7
def generate(self, design_doc, analysis):
# 패턴 이름 없음
# 단일 메서드
return _generate_code_from_design(
design_doc["layout_type"],
design_doc["element_type"],
design_doc["elements"]
)장점:
- TABLE, CARD, FORM, GRID, ... 패턴명 완전 제거
- 새 패턴 추가 시 Phase 5.5의 규칙만 업데이트
- Phase 6-7은 영구 불변
검증 결과 (V06 실제 적용)
4개 노드 분석
| Node | 타입 | 정확도 | 토큰 | 불일치 |
|---|---|---|---|---|
| 20623:449376 | TABLE | 100% | 0 | 1건 |
| 21074:231741 | DETAIL_MODAL | 63% | ~3,440 | 10건 |
| 20876:210401 | PAGE/TABLE | 82% | ~6,000 | 6건 |
| 21004:72858 | DETAIL_MODAL | 55% | ~4,200 | 8건 |
평균: 75% 정확도, ~3,410 토큰/노드
작업 방향
즉시 (1-2일)
예상: 9.5시간
| 항목 | 난이도 | 시간 |
|---|---|---|
| 회사명 API 연동 (20623) | 낮음 | 1시간 |
| 유효성검증만료일 너비 수정 (20876) | 낮음 | 0.5시간 |
| 마케터 레벨 배지 추가 (21074, 21004) | 중간 | 2시간 |
| 신뢰도 Text → Badge 변경 (21074, 21004) | 낮음 | 1시간 |
| adRows 2개 행 추가 (21074, 21004) | 중간 | 2시간 |
| 광고제목 CMoveLink/아이콘 (20876, 21074, 21004) | 중간 | 3시간 |
결과: 3개 노드 배포 가능
1주일 내
예상: 7시간
| 항목 | 난이도 | 시간 |
|---|---|---|
| 전화번호 필드 추가 (21074) | 중간 | 2시간 |
| 광고제목 컬럼 너비 검토 (20876) | 낮음 | 1시간 |
| 마케터 등급 로직 개선 (20876) | 높음 | 3시간 |
| 콘텐츠채널 hover 패턴 (21074) | 낮음 | 1시간 |
결과: 4개 노드 모두 80%+ 정확도
2주일-3주일 (백엔드 협의)
| 항목 | 우선순위 | 담당 |
|---|---|---|
| 콘텐츠게시채널 API | MEDIUM | 백엔드 |
| 신뢰도, 광고유입경로 필드 | HIGH | 백엔드 |
| 회사명, 광고기간 필드 | HIGH | 백엔드 |
| 유입로그 확장 (IP, UA) | MEDIUM | 백엔드 |
| 어뷰징 플래그 필드 | HIGH | 백엔드 |
V06 핵심 성과
Before (V05)
제품 관리 탭 1개만 수동 퍼블리싱
→ 매번 다른 결과 (AI가 매번 새로 판단)
→ 불일치 항목 수동 발견
→ 새 패턴 추가 시 코드 대대적 수정After (V06)
4개 노드 자동 검증
→ Figma vs Code 불일치 자동 감지 (25건)
→ 심각도별 분류 (HIGH/MEDIUM/LOW)
→ 새 패턴도 Phase 5.5만 수정지표
- 패턴 하드코딩 제거 (if-elif 12개 → 0개)
- 검증 자동화 (수동 → Python 스크립트)
- 75% 정확도 달성
- 토큰 효율화 (0~6,000 토큰/노드)
코드 변경 목록
추가된 파일
.claude/scripts/figma_analyze_code.py(300+ 줄).claude/scripts/figma_match_props.py(350+ 줄)StructureAnalyzerWithLLM클래스 (Phase 5.5)
수정된 파일
figma_publishing_engine_v2.pyDesignDocumentGenerator.generate()→ llm_guidance 추가CodeGenerator._generate_code_from_design()→ 단일 메서드PublishingPipeline.publish()→ Phase 5.5 통합
제거됨
- Phase 6:
_generate_table_design(),_generate_card_design(), ... (5개) - Phase 7:
_generate_table_code(),_generate_form_code(), ... (5개) - if-elif 체인 12개
다음 방향 (V07?)
파이프라인 최적화
- 헬퍼 함수 자동 감지 (detailColumn(), actionColumn())
- LLM 프롬프트 튜닝 (불필요 토큰 감소)
- API 스펙 자동 검증
실제 적용
- 즉시 수정 9개 항목 (1-2일)
- 1주일 우선순위 (백엔드 협의 병행)
- 4개 노드 배포 (3주일 내)
패턴 테스트
- GRID (다중 컬럼 카드)
- FORM (입력 필드)
- CAROUSEL (스크롤)
- TIMELINE (수직 시간축)