왜 중요한가
디자이너 워크플로에서는 스크린샷이나 래스터 내보내기로만 존재하는 자산을 편집 가능한 형식으로 되돌리는 과정이 반복 작업의 병목이다. ReDesign은 편집에 필요한 텍스트, 벡터 경로, 레이어 순서 등의 멀티모달 속성을 복원하고, 노드 수준의 검증을 통해 도구 오류가 트리 전체로 번지는 것을 막음으로써 실제 편집 작업을 자동화 가능한 형태로 확보한다. 따라서 단순한 시각적 재현 대신 재생 가능한 편집 동작을 보장하여 실무 편집 비용을 낮출 수 있음이 확인됐다.
핵심 기여
에이전틱 트리 확장 구조를 통한 래스터→편집 가능 복원
ReDesign은 전체 캔버스를 루트로 삼아 VLM 컨트롤러가 특정 노드를 선택하고 그 노드에 맞는 도구(action) 체인을 호출해 자식 노드를 생성하는 방식으로 레이어 계층을 점진적으로 확장한다. 입력 이미지가 루트이고 각 확장은 해당 부모의 지역화된 렌더링과 이전 확장 이력을 입력으로 받아 도구 체인을 결정한다. 이 구조는 병렬로 여러 단말 노드를 동시에 확장할 수 있게 하여 처리량을 높였다.
노드 단위의 그레이스풀 검증으로 국소적 수복을 보장
각 부모→자식 확장마다 검증기를 실행하여 자식들의 합집합이 부모를 덮는지와 자식이 부모를 넘어 확장되지는 않았는지를 검사한다. 검증 결과에 따라 수용(accept), 가지치기(prune), 재시도(retry)를 반환하여 잘못된 분기만 고치게 하고 전체 트리 재실행을 피한다. 이 설계는 도구 출력 불완전성과 컨트롤러 오류가 누적되어 발생하는 하드 실패를 현저히 줄였음이 실험에서 확인됐다.
Figma Edit Replay Benchmark 구성 및 편집 재생 평가
909개의 실제 Figma 파일에서 원본 레이어 계층과 속성을 그대로 확보하고 각 파일에 평균 15개의 제어된 편집(총 14,796개)을 적용하여 편집 재생(Edit Replay) 프로토콜을 구축했다. 각 방법은 래스터 입력에서 편집 가능한 출력을 생성하고 동일 편집을 재생한 뒤 렌더링 간 SSIM과 텍스트 리콜로 일치도를 측정했다. 이 벤치마크는 단순 시각 복원 지표를 넘어 실전 편집 가능성을 정량화하는 근거가 되었다.
핵심 아이디어 이해하기
디자인 편집 파일은 텍스트, 벡터, 색상, 그룹, z-order 같은 명확한 객체와 속성을 가진 레이어 계층으로 표현되며, 래스터화는 이러한 계층을 픽셀로 합성하는 many-to-one 매핑이므로 역문제는 불안정하다. ReDesign은 이 불안정성을 완화하기 위해 루트에서 시작해 노드별로 적절한 도구 체인을 선택하여 지역적으로 분해하고, 각 분해를 로컬 검증으로 확인해 잘못된 분기가 더 깊게 쌓이는 것을 방지한다. 입력→프로세스→출력 관점에서, 입력 래스터 이미지는 VLM 컨트롤러의 노드 선택과 도구 호출(예: OCR→텍스트 분할→인페인팅, 레이어 분해, 검출+SAM 분할, 벡터화)을 통해 부분 트리로 변환되고, 검증 결과에 따라 수용·가지치기·재시도가 반복되어 최종적으로 편집 가능한 JSON 계층을 출력한다.
방법론
시스템은 고정된 액션 집합(action space)을 정의하고 각 액션이 OCR, 레이어 분해, 연결 컴포넌트 분리, 검출·분할, 벡터화 등 도구 체인을 캡슐화하도록 구성되었다. 컨트롤러는 각 단말 노드의 부분 렌더링과 해당 노드의 선형 이력(lineal memory)을 입력으로 받아 다음 액션을 선택하고 도구를 실행해 자식 노드를 생성한다. 각 부모→자식 제안에는 검증기를 적용하여 자식들의 합집합이 부모를 설명하는지와 자식이 부모를 넘어서는지를 검사하고, 실패 시에는 prune 또는 retry 신호를 주어 로컬 수리를 수행하도록 시스템이 재설정되게 했다. 노드별 선형 메모리는 각 확장의 입력·출력·하이퍼파라미터·검증 결과를 저장해 이후 재시도에서 재활용하고 실패 구성을 피하도록 하였다.
관련 Figure

그림은 루트 이미지에서 시작해 VLM 컨트롤러가 노드를 선택하고 도구 체인을 조합해 자식 노드를 생성하는 프로세스를 좌→우로 보여준다. 각 확장 단계마다 로컬 검증(graceful verification)이 개입해 잘못된 자식을 prune하거나 retry 하여 오류 누적을 막는 흐름이 도식화되어 있다. 또한 우측 하단의 편집 예시는 복원 결과가 텍스트 교체, 테마 전환, 레이아웃 재배치 같은 실제 편집 작업을 지원함을 나타낸다.
시스템의 전체 흐름과 디자인 편집 예시를 보여주는 개요 그림이다. 우상단에는 'Rewrite text', 'Swap theme', 'Reflow layout' 같은 실시간 편집 결과 예시가 배치되어 있고 중앙에는 ReDesign 프레임워크 개념도가 위치해 있다. 이 그림은 입력 래스터에서 단계별로 레이어 트리를 복원해 편집 가능한 출력으로 만드는 파이프라인 구성을 시각적으로 요약하고 있다.

왼쪽은 잘못된 확장(예: 깨진 손)을 표시하고 중앙의 검증 절차가 이를 인식해 prune 또는 retry 신호를 반환하는 과정을 보여준다. 오른쪽에는 텍스트·폰트 예시로서 폰트 예측과 텍스트 레이어의 추출·매칭 과정이 연결된 흐름이 그려져 있어 텍스트 관련 액션 체인의 역할을 확인할 수 있다. 이 그림은 오류가 지역적으로 한정되어 수리될 수 있음을 도식적으로 증명하는 근거로 사용되었다.
그레이스풀 검증과 도구 파이프라인의 상호작용을 예시로 보여주는 그림으로, 좀비 손과 관, 주문서 같은 객체의 분해와 유효성 판정 사례가 포함되어 있다. 그림 중앙에는 'Graceful Verification' 박스가 있고 각 분기별로 VALID/INVALID 판정과 그 이유가 적혀 있다. 이 이미지는 로컬 검증이 어떻게 중복·파손·불완전 커버리지를 감지하고 해당 분기만 재시도하거나 가지치기하는지를 시각화한다.
주요 결과
Figma 데이터셋과 Crello 데이터셋 모두에서 ReDesign은 객체 수준 L1, PSNR, LPIPS, PQ, F1 등 표준 재구성 지표에서 경쟁력을 보였고, 특히 레이아웃(PQ)과 편집 재현성(편집 재생 SSIM, 텍스트 리콜)에서 가장 높은 성능을 기록했다. 편집 재생(protocol) 결과는 총 14,796개의 제어된 편집에 대해 ReDesign이 색상·불투명도·재배치·텍스트 편집 등에서 모든 편집 유형에 대해 최고의 SSIM을 달성했음을 나타냈다. 또한 노드 단위 검증은 종단 검증보다 더 낮은 도구 호출 수와 높은 PSNR을 동반하여 비용-정확도 관점에서 우수함이 확인됐다.
관련 Figure

막대 그래프는 Figma가 Crello 대비 요소당 평균 레이어 깊이에서 1.35×, 텍스트 요소 수에서 2.45×, 요소 총합에서 2.62× 더 복잡함을 수치로 보여준다. 도넛 차트는 909 디자인과 15K 편집 지시가 편집 유형별로 고르게 분포되어 편집 재생 실험이 다양한 편집 커버리지를 가진다는 것을 증명한다. 이 통계는 벤치마크가 실무 수준의 복잡도를 포함한다는 근거로 제시되었다.
Figma 데이터셋 통계와 Edit Replay 벤치마크 구성 요약을 포함한 그림이다. 좌측 그래프는 Figma 샘플이 Crello 대비 평균 레이어 깊이, 텍스트 요소 수, 요소 총 개수에서 더 복잡함을 보여주며 우측 도넛 차트는 편집 유형별 분포(편집 텍스트, 삭제, 재배치, 색변경 등)를 시각화했다. 이 이미지는 데이터셋의 규모와 다양성이 평가 지표로 사용되었음을 나타낸다.

레이더 차트에서 ReDesign은 대부분 축에서 최상위 값을 기록하며 특히 Delete(0.869), Z-Order(0.802), Opacity(0.819)에서 우수한 숫자를 보였다. 텍스트 리콜 막대그래프에서 ReDesign은 Qwen-Image보다 높은 리콜을 기록했고 VTracer는 낮은 값을 보였다. 이 수치는 노드 단위 검증과 계층적 분해가 텍스트·속성 편집의 재현성에 직접 기여했음을 시사한다.
편집 재생 후 SSIM 성능 레이더 및 텍스트 리콜 막대그래프를 보여주는 결과 그림이다. 레이더는 Recolor, Opacity, Delete, Z-Order, Transition, Rotation에서의 SSIM 값을 비교하고 막대그래프는 텍스트 편집 후 텍스트 리콜을 모델별로 비교한다. 이 그림은 ReDesign이 다양한 편집 유형에서 높은 SSIM과 텍스트 리콜을 달성했음을 시각적으로 나타낸다.

각 열은 Ground-truth, ReDesign, Qwen-Image-Layered, LayerD, Tool Agent 순서로 정렬되어 있어 동일 편집의 영향 차이를 관찰하기 쉽다. ReDesign 열은 대상 요소만 정확히 수정된 결과를 자주 보였고 Tool Agent 열은 편집이 여러 요소에 번지거나 왜곡되는 사례가 잦았다. 이러한 정성적 예시는 편집 재생 SSIM과 텍스트 리콜에서 관찰된 정량적 우위를 뒷받침한다.
기준 편집(그라운드 트루스)과 각 방법의 재구성 후 편집 결과를 예시로 나열한 정성적 비교 이미지 모음이다. 여러 행에 걸쳐 위치 이동, 회전, 색상 변경, 크롭 등 다양한 편집이 적용된 사례를 각 방법별로 정렬해 비교 가능하게 배치했다. 이 이미지는 수치 지표뿐 아니라 실제 편집 적용 시의 실패 모드(예: 편집이 의도와 다른 대상에 적용되는 경우)를 확인할 수 있게 한다.

각 사례에서 ReDesign은 대상 객체의 형태와 배경 보존을 균형있게 유지하는 경우가 많았고 다른 방법들은 과도한 잘림, 동시 객체 손상, 또는 불필요한 벡터화로 편집성 손실을 보였다. 특히 Tool Agent는 직렬 도구 호출의 오류 누적으로 원소가 왜곡되거나 누락되는 사례가 다수 관찰되었다. 이 정성 비교는 수치 지표의 원인을 구체적인 시각적 실패 예시로 연결했다.
원본 이미지 대비 ReDesign과 비교 방법들의 재구성 세부를 보여주는 큰 비교 표로, 특히 복잡한 요소의 잘림·변형·누락 사례를 항목별로 정리했다. 각 행은 다른 사례 유형(예: 손 이미지, 아바타, 일러스트, 감자튀김 등)을 포함하며 열별로 각 방법의 결과를 비교한다. 이 이미지는 도구별 실패 모드(예: 벡터화 실패, 잘못된 분리, 배경 훼손)를 상세히 보여준다.
기술 상세
액션 스페이스는 텍스트 추출(OCR → hisam 기반 세분화 → lama 인페인팅), 멀티-레이어 분해(Qwen-Image-Layered), 연결 컴포넌트 레이블링, 검출+SAM 기반 분할(gdino로 탐지 후 SAM으로 분할), 벡터화(VTracer)와 글꼴 인식(WhatFont API) 같은 전용 도구 체인으로 구성되었다. 컨트롤러는 VLM(gemini-3-flash 등)을 사용해 각 노드의 부분 이미지와 선형 메모리를 토대로 다음 액션과 하이퍼파라미터를 선택하고 비동기 병렬로 여러 리프 노드를 확장할 수 있게 설계되었다. 그레이스풀 검증기는 자식 마스크의 합집합과 부모 마스크의 포함관계, 중복·허상 여부를 계산하고 prune/retry/succeed 신호를 반환하며 실패 원인은 선형 메모리에 기록되어 향후 재시도에서 하이퍼파라미터 조정에 활용된다.
한계점
ReDesign은 Figma와 Crello의 레이어 분해 기준과 항상 하나 대 하나로 정렬되지 않을 수 있으며, 렌더링이 정확해도 분해 그레인(granularity)이 원본과 다를 수 있다. 사진처럼 복잡한 텍스처를 벡터 경로로 억지로 표현하면 편집성이 떨어질 수 있어 벡터화 적용 여부는 선택적으로 수행되며 이 선택이 완벽하지 않을 수 있다. 또한 시스템은 외부 도구들의 한계(예: OCR 오류, SAM 분할 실패)에 의존하므로 도구별 도메인 갭이 성능 저하로 이어지는 경우가 관찰되었다.
실무 활용
ReDesign은 스크린샷이나 래스터 내보내기만 존재하는 디자인 자산을 Figma나 유사한 편집 가능한 JSON 계층으로 자동 복원하여 디자이너가 즉시 텍스트, 색상, 레이아웃을 조정할 수 있게 한다. 입력 이미지를 받아 노드별 도구 체인과 검증 루프를 통해 편집 가능한 출력으로 변환하므로 실무에서 반복 편집과 크로스 플랫폼 재사용을 단축시킬 수 있다. 또한 사용자 요구에 따라 재분해(granularity)를 더 세밀하거나 거칠게 조정할 수 있는 인터랙티브한 제어가 가능하다.
- 스마트폰 스크린샷이나 광고 배너 이미지에서 원본 Figma 파일 수준의 편집 가능한 자산 복원
- 대량의 마케팅 자산을 플랫폼별 크기와 색상으로 자동 재구성하는 파이프라인
- 디자이너가 제공한 래스터 시안에서 텍스트·색상·레이아웃만을 빠르게 교정하는 작업흐름
코드 공개 여부: 공개
코드 저장소 보기키워드
추가 이미지 분석

산점도에서 ReDesign(Graceful)은 낮은 도구 호출 수와 높은 PSNR 군집을 형성하여 검증의 로컬화가 전체 비용을 줄였음을 나타냈다. 병렬성 실험은 병렬 트리 확장이 순차 실행 대비 최대 7.1× 속도 개선을 달성했음을 막대그래프로 보여주었다. 이 결과는 트리 구조의 독립 노드 확장이 병렬화와 이력 관리 측면에서 이득을 제공했음을 증명한다.
검증 비용-정확도 트레이드오프 산점도와 병렬 실행으로 인한 런타임 속도up 막대그래프를 포함한 분석 그림이다. 좌측 산점도는 도구 호출 수(# Tool Calls) 대비 PSNR을 점들로 보여주고 우측 막대그래프는 병렬 확장으로 얻는 속도 이득을 시연했다. 이 이미지는 그레이스풀 검증이 종단 검증보다 비용 대비 더 정확하고 분산이 작음을 수치로 보여준다.

세 가지 편집 중 ReDesign은 대상 객체의 위치와 회전을 지시대로 유지하면서 주변의 비대상 픽셀을 보존하여 일관된 결과를 냈다. Nano Banana 2는 지시가 지역적임에도 전체 이미지의 종횡비를 변경하거나 인접 요소를 변형하는 경향을 보여 편집 반복 가능성과 예측성이 낮음을 드러냈다. 이 예시는 편집 가능한 표현이 반복적이고 정확한 공간 편집을 위해 왜 여전히 필요성이 큰지를 강조했다.
원본에서 특정 객체(종이 가방)를 이동·배치·회전하는 세 가지 공간 편집 지시를 ReDesign과 Nano Banana 2의 결과로 비교한 예시이다. 각 행은 동일 지시를 각 방법에 적용한 결과를 병렬로 보여주며, Nano Banana 2가 의도치 않은 영역 변형이나 크기 변경을 일으키는 사례를 보여준다. 이 이미지는 편집 모델의 자유도와 정확도 간의 차이를 시각적으로 논증한다.
용어 해설
- 그레이스풀 검증(Graceful Verification)
- — ReDesign에서 부모 노드 확장마다 실행되는 로컬 검증 메커니즘으로, 자식 노드들의 합집합이 부모를 덮는지와 자식이 부모 범위를 넘어서는지를 검사하여 accept, prune, retry 중 하나의 신호를 반환하는 절차이다. 검증 실패 시에는 해당 분기만 재시도하거나 불필요한 자식을 잘라내어 오류 전파를 막는다. 이로써 전체 트리 재실행을 피하고 병렬 확장을 안전하게 유지하는 역할을 수행한다.
- 에이전틱 분해(Agentic Decomposition)
- — 비전-언어 모델 컨트롤러가 노드별로 도구(action) 체인을 선택하여 이미지의 계층적 레이어 트리를 점진적으로 확장하는 접근법이다. 각 액션은 OCR, 레이어 분해, 검출·분할, 벡터화 등 전용 도구 체인을 포함하며, 노드 확장 결과를 로컬 검증으로 검증한 뒤 수용 또는 재시도한다. 이 방식은 일직선형 툴 파이프라인의 오류 누적을 방지하고 병렬 확장을 가능하게 한다.
- Figma 편집 재생 벤치마크(Figma Edit Replay Benchmark)
- — 실제 Figma 원본 파일 909개에서 파생한 데이터셋으로, 각 파일에 대해 14,796개의 제어된 편집 명령(reposition, recolor, text edit 등)을 생성하여 재구성 결과의 편집 가능성을 평가하도록 설계된 벤치마크이다. 각 편집은 원본 파일과 재구성물에 동일하게 적용되어 렌더링 간 비교(SSIM, 텍스트 리콜)를 수행한다. 이를 통해 단순한 시각 유사성뿐 아니라 재구성물이 실제 편집 작업을 얼마나 정확히 재현하는지를 측정한다.
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.