Figma 퍼블리싱 파이프라인 06. 패턴 의존 제거와 검증 자동화

2026년 4월 8일·9 min read·6 / 12

figma pattern-agnostic llm validation python automation publishing-pipeline

파이프라인에 세 군데 구멍이 남아 있었다. 화면 패턴 이름이 코드에 박혀 있었고, 시안과 코드 대조는 눈으로 했고, 코드 쪽을 읽는 스크립트가 아예 없었다. 오늘은 이 셋만 봤다.

새 패턴 하나 넣으려면 분기를 전부 고쳐야 했다

코드 생성 단계가 이렇게 생겼다.

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 5.5라는 분석 단계를 새로 넣고, 거기서 LLM이 화면을 보고 레이아웃 성격만 판정하게 했다.

Phase 5.5가 돌려주는 건 패턴 이름이 아니라 처리에 필요한 두 값이다. layout_type은 table, grid, form, page 중 하나고, element_type은 그 안에 반복되는 요소가 columns인지 cards인지 fields인지 items인지다. 컴포넌트 추천도 함께 넘긴다.

덕분에 뒷단이 분기 없이 단일 경로가 됐다.

# 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
    }
 
# Phase 7
def generate(self, design_doc, analysis):
    return _generate_code_from_design(
        design_doc["layout_type"],
        design_doc["element_type"],
        design_doc["elements"]
    )

패턴 이름이 코드에서 완전히 사라졌다. 새 패턴이 들어와도 Phase 5.5의 판정 규칙만 고치면 되고, Phase 6과 7은 건드릴 일이 없다.

코드 쪽을 읽는 스크립트를 만들었다

시안은 Python으로 분석하는데 코드는 내가 읽고 있었다. 그래서 비교 기준이 매번 사람 손을 탔다. 코드를 읽는 스크립트를 먼저 만들었다.

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}
    }
  ]
}

두 JSON을 붙여 불일치를 뽑았다

시안 쪽 JSON과 코드 쪽 JSON이 같은 형태로 나오니, 비교는 스크립트가 할 수 있게 됐다.

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 수준의 미세 차이

심각도를 나눈 건 전부 고칠 수 없기 때문이다. 픽셀 몇 개 차이까지 같은 무게로 올려두면 진짜 문제가 목록에 묻힌다.

노드 4개에 돌려보니 25건이 나왔다

노드	타입	정확도	토큰	불일치
20623:449376	테이블	100%	0	1건
21074:231741	상세 모달	63%	약 3,440	10건
20876:210401	페이지/테이블	82%	약 6,000	6건
21004:72858	상세 모달	55%	약 4,200	8건

평균 정확도 75%, 노드당 약 3,410 토큰이다. 테이블 노드는 토큰 0으로 끝났는데, 구조가 단순해서 LLM 분석 단계를 안 타고 스크립트만으로 판정됐다.

상세 모달 두 개가 55~63%로 낮다. 모달은 조건부 렌더링과 상태 분기가 많아서 시안 한 장에 다 안 담기는 부분이 크다.

나온 불일치를 난이도로 갈랐다

바로 고칠 수 있는 것과 백엔드가 필요한 것을 나눴다. 코드만 고쳐서 되는 건 9.5시간 정도로 잡혔다.

항목	난이도	예상
회사명 API 연동	낮음	1시간
유효성 검증 만료일 너비 수정	낮음	0.5시간
마케터 레벨 배지 추가	중간	2시간
신뢰도 Text를 Badge로 변경	낮음	1시간
adRows 2개 행 추가	중간	2시간
광고제목 CMoveLink와 아이콘	중간	3시간

그다음 주에 볼 것은 전화번호 필드 추가, 광고제목 컬럼 너비 검토, 마케터 등급 로직 개선, 콘텐츠채널 hover 패턴으로 7시간쯤이다.

백엔드 협의가 필요한 건 따로 뺐다. 신뢰도와 광고유입경로 필드, 회사명과 광고기간 필드, 어뷰징 플래그가 우선순위 높음이고, 콘텐츠게시채널 API와 유입로그 확장은 그다음이다. 이건 내가 일정을 정할 수 있는 항목이 아니다.

막힌 지점과 원인

문제	원인	해결
새 패턴 추가 시 세 단계를 모두 수정	패턴 이름이 설계서·코드 생성 양쪽에 if-elif로 박힘	Phase 5.5로 판정을 분리하고 뒷단을 단일 경로로
불일치를 눈으로 찾아 놓침이 생김	자동 대조 수단이 없음	`figma_match_props.py`로 심각도까지 자동 분류
비교 기준 코드 정보를 매번 손으로 읽음	코드 분석 스크립트 부재	`figma_analyze_code.py`로 props·조건부 렌더링·스타일 추출
상세 모달 정확도가 55~63%로 낮음	조건부 렌더링과 상태 분기가 시안 한 장에 안 담김	미해결

if-elif 12개가 0개가 됐고, 노드 하나를 검증하는 데 사람이 붙지 않아도 되게 됐다. 다만 정확도 75%는 넷 중 하나가 여전히 틀린다는 뜻이다. GRID나 FORM, CAROUSEL 같은 다른 레이아웃에서도 Phase 5.5 판정이 버티는지는 아직 안 돌려봤다.