Figma 퍼블리싱 파이프라인 11. diff를 버리고 처음부터 구현하기

Figma 시안과 기존 코드를 비교해서 다른 곳만 고치는 방식으로 계속 밀어붙였는데, 오늘 그 전제를 버렸다.

diff가 수천 개 나오면 diff가 아니다

비교 방식이 실제로 굴러가지 않은 이유가 몇 겹이었다.

diff 결과가 수백에서 수천 개로 나왔다. 이 정도 양이면 목록에서 중요한 항목을 골라내는 것 자체가 다시 일이 된다. 노이즈에 핵심이 묻혔다.

시안에는 있는데 코드에 없는 항목, 즉 새로 만들어야 하는 것들이 일부만 처리됐다. Phase 11이 missing_in_code 항목을 상위 20개로 잘라내고 있었기 때문이다. 21번째부터는 조용히 사라졌다.

가장 근본적인 건 실행 규칙 자체였다. Phase 11의 첫 번째 규칙이 "diff에 있는 항목만 수정"이었다. 이건 기존 코드가 거의 완성돼 있고 몇 군데만 어긋난 상황을 전제한 규칙이다. 그런데 새 화면을 만드는 상황에서는 사실상 전부가 diff고, 그럼 이 규칙은 아무 제약도 못 한다. 상황과 규칙이 어긋나 있었다.

그래서 비교를 그만두기로 했다. 기존 코드가 있든 없든 선택한 섹션은 항상 처음부터 새로 구현한다.

코드를 안 읽으니 단계 다섯 개가 통째로 빠졌다

코드 쪽 IR을 만들고 정규화하고 매칭하고 비교하던 단계가 전부 필요 없어졌다. Design IR 전체가 그대로 구현 대상이 된다.

diff.json에는 "mode": "fresh"를 찍어두고, Phase 11이 이 값을 보고 규칙을 바꾼다. missing_in_code 상위 20개 제한을 없애고, 첫 번째 규칙을 "Design IR 전체 구현, 처음부터 작성"으로 갈아끼웠다.

스킬도 독립형으로 바꿨다. 이전 세대 스킬의 스크립트를 경로로 참조하고 있었는데, 그 스킬이 바뀌면 이쪽이 같이 깨졌다. 필요한 스크립트를 전부 로컬로 복사하고 sys.path도 자기 디렉토리만 보게 했다.

섹션 이름을 미리 알아야 실행할 수 있었다

이전에는 --sections "메인 콘텐츠"처럼 섹션 이름을 알고 넘겨야 했다. 그 이름을 알려면 Figma를 먼저 열어봐야 하는데, 그럴 거면 도구를 쓰는 의미가 줄어든다.

--sections 없이 실행하면 Phase 1이 끝난 뒤 선택 UI를 띄우게 했다.

퍼블리싱할 섹션을 선택하세요
 
  ↑↓ 이동  |  Space 선택/해제  |  Enter 확인  |  a 전체선택
 
  ▶ [ ]  헤더
    [x]  메인 콘텐츠
    [ ]  푸터

비대화형 환경에서는 이게 문제가 된다. CI에서 돌리거나 출력을 파이프로 넘기면 키 입력을 받을 표준 입력이 없어서 그대로 멈춘다. 터미널이 아닌 걸로 판단되면 전체 선택으로 넘어가게 해뒀다.

색상이 원본 값 그대로 설계서에 들어가고 있었다

비교를 없애면서 정규화 단계도 같이 빠졌는데, 그게 문제를 만들었다. Fresh diff가 design_ir.json을 그대로 복사해서 넘기니 색상과 간격이 Figma 원본 값 그대로였다. 설계서에 #374151이 그대로 박혀 나왔다.

Phase 6을 Design IR만 대상으로 다시 넣었다. Chakra 토큰 맵을 보고 정규화하니 설계서에 토큰 이름이 들어간다. 비교를 위해 만들었던 정규화가 비교를 없앤 뒤에도 여전히 필요했다.

Fresh diff 단계가 실행 리포트에 안 잡히던 것도 orch._record() 호출을 넣어 고쳤다. 리포트에 없으면 이 단계가 돌았는지 안 돌았는지 알 수가 없다.

최종 흐름

실행은 이렇게 한다.

python3 ~/.claude/skills/publish/scripts/orchestrate.py \
  --file-key <FILE_KEY> \
  --node-id <NODE_ID> \
  --app marketer \
  --report

막힌 지점과 원인

비교를 정교하게 만드는 데 여러 버전을 썼는데, 정작 실무에서 필요한 건 비교가 아니라 그냥 다시 만드는 것이었다. 기존 코드를 존중하려던 설계가 오히려 시안대로 만드는 걸 방해하고 있었다.