디자인-코드 왕복, 다섯 번 시도했지만 매번 새고 있었다

디자인에서 코드로, 코드에서 디자인으로 아무 손실 없이 오가는 완전한 왕복이 이미 해결됐다는 게 최근 업계의 주장이었다. ReWeaver AI의 Jonathan Gordon은 이 왕복을 다섯 가지 툴 조합으로 직접 테스트했고, 매번 바인딩이 사라지거나 한쪽만 살아남는 손실을 확인했다.

• 계기 — 바이브 코딩 중 스크롤되는 코드 속에서 innerHTML 문장을 발견하고 보안 취약점임을 알아채 에이전트를 멈추고 되돌렸다.
• 정의 — 그가 말하는 디자인-코드 왕복은 양방향 모두 충실도 손실이 없고, 어떤 코드 줄이 지금 보이는 버튼을 만들었는지 항상 알 수 있는 지속적 출처 추적(provenance)이 있는 루프다.
• 30년 경력 — 30년 넘게 개발자 도구와 IDE를 만들어왔지만 디자인과 엔지니어링의 최적화 목표가 달라 이 핸드오프가 한 번도 완전히 닫힌 적이 없었다.
• 업계 주장 검증 — 지난 2월 Anthropic·Figma의 Claude Code→Figma 데모, 그리고 최근 Figma Config에서 코드가 이제 재료(material)다라는 발표까지 나왔지만 직접 파보니 왕복은 해결되지 않았다.
• 다섯 번의 실패 — 양방향 왕복을 위해 다섯 가지 툴 조합을 시도했지만 매번 손실이 발생했다 — 바인딩이 사라지거나, 디자인 변경은 반영돼도 코드는 반영되지 않았다.
• ReWeaver 시연 — 왼쪽엔 AI가 생성한 코드, 오른쪽엔 Figma 캔버스를 두고 show drift 버튼을 누르면 디자인 품질, 코드 품질, 성능, 디자인 토큰 등 여러 차원에서 코드와 디자인 양쪽의 불일치를 동시에 스캔해 보여준다.
• 접근성 문제 — 모델이 생성한 컴포넌트에 ARIA live region이 없어 스크린 리더가 아무것도 읽어주지 않는 문제를 ReWeaver가 발견하고 자동으로 수정했다.
• 12회 반복 실험 — 복잡한 UI를 가진 코드베이스에서 12회 반복 실험 결과, 순수 LLM만으로는 30% 충실도에서 시작해 점점 나빠졌고, 결정론적 가드레일을 적용하면 그 저하를 막았지만 나머지 10%는 인간 판단의 영역이라 100%에는 도달할 수 없었다.
• 세 가지 사각지대 — 모델은 비결정적이라 그 순간의 드리프트는 눈에 보이지만, 시간에 걸쳐 쌓이는 드리프트는 향후 6개월간 겪게 될 새로운 기술부채가 된다고 지적했다.
• ReWeaver 원칙 — ReWeaver는 코드를 직접 쓰지 않고 완전 로컬 LLM으로 작동해 토큰 비용이 전혀 들지 않으며, 비용·코드·디자인 통제권은 항상 인간에게 있어야 한다는 것이 핵심 원칙이다.
• 9가지 가드레일 — 디자인 일관성, 접근성, AI 코드 생성 거버넌스 등 9가지 차원의 결정론적 가드레일을 구축하고 있으며, 병합되기 전 닫힌 루프 안에서 드리프트를 잡아내는 것이 목표다.
• 공개 챌린지 — reweaver.ai/playground에서 자신의 AI 생성 코드를 스캔해볼 수 있고, PDR(production drift ratio) 30% 미만 점수를 받으면 베타 우선 참여 자격과 사이트 하단 노출을 준다.

그가 한 말

저는 속으로 생각했죠, 세상에, 이 루프를 닫을 수 있을지도 모르겠다.i thought to myself, oh my god, i think we might be able to close this loop.3분 17초

업계는 라운드트립이 해결됐다고 말했지만, 직접 만져보니 해결되지 않았다는 걸 깨달았다.but they said the roundtrip was solved and I started messing around and realized it wasn't.6분 53초

클로드 코드에서 피그마로 넘어가는 데모가 있었는데, 마법 같았고 믿을 수 없을 정도였다.there was this demo that showed going from cloud code into Figma. And it was magic. It was incredible.6분 14초

정말 시도해봤습니다. 이 슬라이드가 보여주듯 저는 다섯 가지 다른 툴 세팅으로 코드-디자인 양방향 라운드트립을 시도했는데, 손실 문제가 많았습니다. 바인딩이 사라지거나, 디자인 변경은 살아남았지만 코드는 그렇지 않았죠.I really tried hopefully this slide tells you I tried five different tool setups trying to do code design code roundtrip both directions birectional lots of lossy issues uh you know bindings were lost um design change survived but code didn't11분 13초

30% 품질, 30% 충실도, 즉 진짜 픽셀 완벽도 30%에서 시작했습니다.it started at 30% quality, 30% fidelity, 30%, you know, true pixel perfection.12분 55초

이해관계 · 발화자는 자신이 창업한 ReWeaver AI의 제품을 이 자리에서 처음 공개 시연했고, 베타 참여자를 모집 중이다.

덧붙임 — 여기에 하나 덧붙이면, 업계가 왕복이 해결됐다고 발표할 때와 실무자가 직접 파고들 때의 간극이 이번에도 반복됐다는 점이 눈에 띈다. 30% 충실도라는 수치는 낮아 보이지만, 그 자체보다 시간이 지날수록 저하된다는 사실이 더 무거운 경고다.

오늘 밤 해볼 수 있는 한 가지
reweaver.ai/playground에 최근 AI로 생성한 코드 한 조각을 올려 접근성(ARIA)이나 디자인 토큰 불일치가 얼마나 나오는지 직접 스캔해본다.