AI는 단 몇 초 만에 기능적인 React 앱을 구축할 수 있으며, GeekyAnts와 같은 도구는 새로 생성된 코드를 디자인 시스템의 구조를 유지하면서 Figma로 다시 가져올 수 있다고 약속합니다. 이 주장이 중요한 이유는 AI가 작성한 코드가 나타날 때마다 디자인 팀이 처음부터 다시 시작해야 했고, 이로 인해 재설계 시간과 비용이 늘어났기 때문입니다.

수년 동안 핸드오프(hand-off) 과정은 서류상으로는 간단해 보였습니다. 디자이너는 Figma에서 화면을 제작하고, 개발자는 해당 화면을 코드로 다시 작성하며, 각 측은 레이아웃의 복사본을 별도로 유지했습니다. 하지만 AI 기반 코드 생성기는 이러한 리듬을 깨뜨렸습니다. AI 엔진은 즉시 실행 가능한 React 프로젝트를 제공하지만, 결과물인 컴포넌트를 원래의 디자인 파일로 다시 가져오는 간단한 방법이 없습니다. 그 결과 "코드 우선, 디자인 후순위"라는 고통스러운 루프가 발생하여, 공유된 디자인 언어가 훼손되고 유지보수 오버헤드가 증가하게 됩니다.

DOM이 가진 한계

대부분의 역공학(reverse-engineering) 도구는 HTML 요소의 브라우저 표현 방식인 DOM(Document Object Model)에서 시작합니다. DOM은 모든 시각적 요소를 일반적인 <div> 또는 <span>으로 취급합니다. 버튼과 카드를 구분할 수 없으며, 특정 요소 세트가 디자인 시스템의 마스터 컴포넌트에 속하는지도 알지 못합니다. 페이지에 버튼이 10개 있다면, DOM은 단순히 10개의 익명 레이어가 있다고 보고할 뿐입니다. 원본 컴포넌트 라이브러리와의 연결이 끊어지면서, 디자이너에게는 그룹화되지 않은 형태들이 뒤엉킨 상태로 남게 되며, 이는 화면을 처음부터 다시 만드는 것보다 정리하는 데 더 많은 작업이 필요할 때가 많습니다.

React Fiber가 제공하는 더 풍부한 지도

Fiber라고 불리는 React의 내부 스케줄러는 이름, 부모-자식 관계, 프로퍼티 묶음(property bags)을 포함한 컴포넌트 트리를 유지합니다. 렌더링된 HTML 대신 Fiber 구조를 읽음으로써, 역공학 도구는 특정 <div>가 실제로는 PrimaryButton 컴포넌트라는 점, 그것이 Header 컴포넌트 내부에 존재한다는 점, 그리고 상태를 정의하는 일련의 props를 가지고 있다는 점을 식별할 수 있습니다. 이러한 통찰력은 원본 개발자(또는 코드를 생성한 AI)가 UI에 부여한 의도를 보존합니다.

GeekyAnts는 React Fiber 추출 기술을 사용하여 라이브 코드를 편집 가능한 Figma 파일로 가져옵니다.

새로운 워크플로우가 실제 문제를 해결하는 방법

베리언트 확장 (Variant expansion)

전통적인 캡처 방식은 컴포넌트의 가시적인 상태(예: 호버되지 않은 기본 버튼 상태)만 스냅샷으로 찍습니다. Fiber 트리에서 컴포넌트 정의를 검사함으로써, 이 도구는 소스 코드에 선언된 모든 베리언트(hover, focused, disabled, loading 등)를 나열합니다. 그런 다음 이 모든 상태를 하나로 묶는 Figma Component Set을 생성하여, 수동으로 복제하지 않고도 디자인 시스템의 의도를 그대로 반영합니다.

레이아웃 매핑 (Layout mapping)

웹 레이아웃은 CSS Flexbox에 크게 의존하는 반면, Figma의 대응 기술은 Auto Layout입니다. Flexbox 속성(direction, justification, alignment, gaps)을 Auto Layout 파라미터에 직접 매핑하는 변환 레이어를 사용하면 간격, 크기 조정 동작, 정렬이 왕복 과정(round-trip) 동안 그대로 유지됩니다. 디자이너는 더 이상 복잡한 flex 컨테이너를 수동으로 다시 만들 필요가 없습니다.

상태 트리거링 (State triggering)

모달, 드롭다운, 아코디언과 같은 많은 UI 요소는 JavaScript가 상태를 변경할 때까지 DOM에서 숨겨져 있습니다. Fiber 트리는 이러한 로직을 기록하고 있기 때문에, 역공학 도구는 프로그래밍 방식으로 해당 상태를 트리거하여 숨겨진 요소를 드러내고 이를 디자인 객체로 캡처할 수 있습니다. 그 결과, 초기 로드 시 눈에 보였던 것뿐만 아니라 모든 상호작용 요소를 포함하는 완전한 디자인 파일을 얻을 수 있습니다.

새롭게 등장하는 도구 모음

  • GeekyAnts – React Fiber를 추출하여 컴포넌트 경계를 준수하는 라이브 편집 가능 Figma 파일을 생성합니다.
  • Anima – Figma 디자인을 React 또는 Vue 코드로 변환하는 순방향 경로에 집중합니다.
  • Locofy.ai – AI를 사용하여 Figma 레이아웃을 반응형 코드로 변환하며, 속도를 강조합니다.
  • Builder.io – HTML 컴포넌트를 Figma로 다시 가져옵니다.
  • Codia AI – 스크린샷을 구조화된 Figma 파일로 변환합니다.

팀과 예산에 미치는 영향

디자인과 개발이 서로 어긋나기 시작하면, 불일치를 수정하는 비용은 빠르게 증가합니다.

반론 및 한계

(이 섹션은 의도적으로 비워둠)

향후 주목할 점

(이 섹션은 의도적으로 비워둠)

요약

표면적인 DOM 대신 React의 내부 Fiber 트리를 읽는 방식은 고통스러운 "코드 우선, 디자인 후순위(code-first, design-later)" 루프를 양방향 통로로 전환해 줍니다. 이제 AI가 생성한 앱을 컴포넌트 구조를 유지한 채 Figma로 다시 불러올 수 있습니다. 디자인 드리프트(design drift)와 증가하는 유지보수 비용으로 어려움을 겪는 팀들에게, 이러한 변화는 혼란스러운 재설계 스프린트와 체계적인 컴포넌트 우선 워크플로우를 가르는 결정적인 차이가 될 수 있습니다.