The Design-Code Roundtrip That Isn't — Jonathan Gordon, ReWeaver AI

한 줄 핵심

AI로 디자인과 코드의 양방향 왕복을 완전하게 닫을 수 있다는 기대를 검증해보면, 실제로는 드리프트를 감지·수정하는 결정적 가드레일과 인간의 통제가 핵심이다.

시간별 요약

1. 0:00
   스피커 노트 유실과 ‘라운드트립’의 의미 발표 자료에서 스피커 노트를 Claude로 복원한 경험을 계기로, 디자인과 코드가 손실 없이 왕복하며 출처까지 추적되는 이상적인 roundtrip 개념을 정의한다. 현재의 도구는 디자인을 쉽게 만들게 해주지만 코드의 실제 상태는 잘 보이지 않는다는 문제의식을 제기한다.
2. 2:10
   30년 동안 닫히지 않았던 핸드오프 수십 년 동안 디자인과 엔지니어링 사이의 인수인계는 늘 어긋났고, 협상과 관계 관리로 결과를 맞춰왔지만 루프 자체는 닫히지 않았다. AI와 LLM은 같은 지능이 의도와 코드를 모두 다룰 수 있게 만들어 이 문제를 닫을 가능성을 처음으로 열었다.
3. 3:37
   바이브 코딩에 전부 걸다 April 2025 이후 Cursor 사용량 상위 0.1%에 들 정도로 바이브 코딩에 몰입하며, 디자인→코드와 코드→디자인을 손실 없이 오가는 도구를 직접 만들기 시작한다. 그러나 출력이 흐르는 동안 무심코 넘기던 코드 조각이 마음에 걸리면서, 막연한 자동화만으로는 충분하지 않다는 불안이 생긴다.
4. 5:27
   innerHTML 순간이 코드를 읽게 만들다 코드가 `innerHTML`을 사용하는 장면을 보고 보안 취약점을 즉시 떠올리면서, LLM이 생성한 코드를 무비판적으로 믿을 수 없다는 사실을 체감한다. 그 뒤로는 단순히 생성 결과를 받는 대신 직접 코드를 읽고, 어디가 잘못됐는지 확인하며 개입하는 쪽으로 태도가 바뀐다.
5. 6:20
   라운드트립이 해결됐다는 주장 검증하기 Claude Code에서 Figma로, 그리고 Figma Config의 “code is now material” 같은 발표를 보며 roundtrip이 정말 해결됐는지 의심하고 직접 파고든다. 여러 툴 조합을 실험한 결과, 양방향 동기화는 여전히 손실이 있고 바인딩과 변경 내용이 깨지며, 완전한 해법은 아니라고 결론짓는다.
6. 7:40
   코드와 디자인을 양쪽에 둔 하네스 왼쪽에는 AI가 생성한 코드, 오른쪽에는 Figma나 Sketch의 디자인을 놓고 서로를 왕복시키는 하네스를 만든다. 디자인 시스템과 코드베이스를 연결해 버튼 추가나 스타일 변경이 양쪽에 반영되게 만들지만, 이것만으로는 진정한 양방향 완결성을 보장하지 못한다.
7. 9:33
   드리프트, 접근성, 그리고 실제로 잡히는 문제들 show drift 기능은 코드와 디자인을 동시에 검사해 design quality, code quality, performance, design tokens 같은 여러 차원의 문제를 드러낸다. 특히 `aria live region` 누락처럼 접근성 이슈를 찾아내고 고치는 사례를 통해, LLM이 기본적으로 놓치기 쉬운 품질 결함을 체계적으로 잡아낼 수 있음을 보여준다.
8. 11:50
   결정적 가드레일과 순수 모델 출력의 차이 AI를 끼우면 같은 입력에도 결과가 달라지는 비결정성이 생기므로, 개발 도구는 deterministic guardrails로 drift를 찾아내고 고쳐야 한다. 순수 LLM만 쓰면 품질이 서서히 무너지고, 가드레일을 넣어도 인간 판단이 필요한 10%는 남기 때문에 완전 자동화는 목표가 아니다.
9. 14:06
   루프 안의 인간이 아니라 통제하는 인간 모델의 비결정성, 시간에 따라 쌓이는 drift, 그리고 출처 추적 문제를 세 가지 blind spot으로 보고, lossless한 양방향 편집과 provenance 보존이 필요하다고 정리한다. Reweaver는 고칠 수 있으면 수정안을 적용하고, 아니면 문제를 알려주며, 최종적으로 비용·코드·디자인의 통제권은 인간이 가져야 한다는 원칙을 세운다.
10. 16:25
    9개 차원과 직접 써보는 방법 최종적으로 design consistency, accessibility, AI code generation governance를 포함한 9개 차원의 deterministic guardrails를 구축하고, merge 전에 drift를 잡는 것이 목표라고 설명한다. 사용자는 reweaver AI playground에서 직접 AI 생성 코드를 검사해볼 수 있고, production drift ratio가 낮은 결과를 만들면 베타 참여 기회도 얻을 수 있다.

실무 인사이트

• 디자인-코드 자동화의 핵심은 ‘생성’보다 ‘드리프트 탐지와 복구’이며, 양방향 동기화의 품질을 수치화해 관리해야 한다.
• 접근성처럼 모델이 자주 놓치는 영역은 별도 차원으로 가드레일화해야 실제 제품 품질을 안정적으로 끌어올릴 수 있다.
• AI를 쓰더라도 최종 의사결정과 수정 승인 권한은 인간이 가져야 하며, 도구는 제안을 넘어 통제 가능한 복구 수단을 제공해야 한다.