ReDesign: 단 한 장의 평면 이미지를 편집 가능한 레이어로 복원

ReDesign은 한 장의 평면 이미지를 다시 편집 가능한 레이어 계층 구조로 복원해 주는 오픈소스 도구입니다. 원본 디자인 파일이 유실되어 납작한 PNG 스크린샷만 남았을 때, 실제 폰트 속성이 담긴 텍스트, 벡터 도형, RGBA 레이어, 레이어 순서를 분석해 구조화된 JSON 형태로 추출해 줍니다.

이렇게 복원된 데이터는 피그마나 포토샵 프로젝트처럼 글자를 수정하거나, 특정 도형의 색상을 바꾸고, 요소의 크기와 위치를 개별적으로 재배치할 수 있습니다.

이미지를 레이어로 분해하는 원리

ReDesign은 이미지 전체를 하나의 계층 트리로 보고, 모든 말단 노드가 독립적인 단일 편집 요소가 될 때까지 위에서 아래로 점진적으로 분해해 나갑니다.

전체 과정을 지휘하는 것은 VLM 컨트롤러입니다. 화면 영역을 관찰한 뒤 다섯 가지 시각 도구 중 하나를 골라 작업을 지시합니다. 글자가 감지되면 PaddleOCR, 폰트 인식, Hi-SAM, LaMa 인페인팅을 결합해 수정 가능한 텍스트 레이어를 떼어내고 뒷배경을 깔끔하게 채워 넣습니다. 겹쳐진 디자인 요소는 Qwen-Image-Layered를 통해 깊이 순서가 반영된 RGBA 레이어로 쪼개며, 단순한 도형은 VTracer를 거쳐 벡터 패스로 변환합니다. 단계마다 검증 모듈이 개입해 잘못 쪼개진 브랜치를 정리하고 필요 시 도구를 바꿔 재시도합니다.

하드웨어 요구 사양과 설정

프로젝트 전체 코드는 깃허브에 공개되어 있으며, 909개의 실제 디자인 프레임으로 구성된 Figma-909 벤치마크 데이터셋도 CC BY 4.0 라이선스로 함께 배포되었습니다.

로컬 구동 시 가장 많은 리소스를 차지하는 부분은 Qwen-Image-Layered 모델입니다. bf16 기준 약 55GB의 VRAM이 필요해 80GB GPU 1장, 40GB GPU 2장, 혹은 24GB GPU 4장으로 분산해야 안정적으로 돌아갑니다. SAM 2와 GroundingDINO 등 보조 시각 툴에는 약 10~16GB의 VRAM이 추가로 필요하며, PaddleOCR은 CPU에서 실행됩니다. 에이전트 판단을 담당하는 컨트롤러는 OpenAI 호환 API 규격을 사용하므로, 기본값인 gemini-3-flash-preview 외에도 설정 파일을 통해 GPT-4o나 자체 구축한 vLLM 모델로 변경할 수 있습니다.

왜 중요한가

과거 프로젝트의 소스 코드가 유실되어 완성된 배너나 스크린샷만 붙잡고 씨름해야 했던 디자이너와 프론트엔드 개발자에게 ReDesign은 가뭄의 단비 같은 도구입니다. 단순히 생성형 확산 모델로 그럴싸한 이미지를 다시 그려내는 것이 아니라, 실제 워크플로에서 바로 재활용할 수 있는 텍스트 박스와 벡터 외곽선, 투명 레이어를 정밀하게 되살려내기 때문입니다.

단일 모델 하나로 모든 것을 처리하려 욕심내지 않고, 글자 인식은 PaddleOCR, 분할은 SAM 2, 레이어 분리는 Qwen-Image-Layered처럼 검증된 전용 툴들을 에이전트로 엮어낸 점이 영리합니다. 실제 Figma와 Crello 데이터셋 평가에서도 단일 레이어 생성 모델들을 가볍게 앞서는 성과를 입증했습니다. 고사양 다중 GPU 환경을 갖춰야 한다는 하드웨어 문턱만 넘을 수 있다면 즉시 파이프라인에 도입해 볼 만합니다.