디자인 레이아웃 자동 편집을 위한 관계 인식 재구성 프레임워크

초록

ReLayout은 기존 디자인을 입력으로 받아, 사용자가 지정한 ‘추가·삭제·이동·크기변경’ 네 가지 편집 명령을 자동으로 적용하면서, 편집되지 않은 요소들의 상대적 위치·크기 관계를 보존하는 새로운 셀프슈퍼바이즈드 모델이다. 관계 그래프를 구조 제약으로 활용하고, 다중모달 대형 언어 모델을 기반으로 한 Relation‑Aware Design Reconstruction(RADR) 방식을 통해 편집 데이터가 부족한 상황에서도 효과적인 레이아웃 편집을 구현한다.

상세 분석

본 논문은 그래픽 디자인 워크플로우에서 “디자인 레이아웃 편집”이라는 아직 정의되지 않은 작업을 정형화하고, 이를 자동화하기 위한 두 가지 핵심 기술을 제시한다. 첫 번째는 관계 그래프(Relation Graph) 로, 디자인에 포함된 모든 요소와 캔버스를 노드로 두고, 요소 간의 크기 비율과 위치 격자 기반 관계를 엣지로 표현한다. 크기 관계는 면적 비율(AR)을 기준으로 ‘small’, ‘equal’, ‘large’ 세 클래스로 구분하고, 위치 관계는 3×3 격자를 이용해 ‘top‑left’, ‘center’ 등 9가지 클래스로 정의한다. 이러한 그래프는 편집되지 않은 요소들의 레이아웃 구조를 명시적인 제약으로 제공한다는 점에서, 기존의 레이아웃 생성 모델이 단순히 좌표를 예측하는 것과 차별화된다.

두 번째 핵심은 Relation‑Aware Design Reconstruction(RADR) 이다. 편집 데이터(원본‑명령‑편집본 삼중항)가 거의 존재하지 않는 문제를 해결하기 위해, 저자는 셀프슈퍼바이즈드 학습 목표를 설계했다. 구체적으로, 임의의 디자인 D에서 요소 집합 C와 속성 A_in을 추출하고, 위에서 만든 관계 그래프 G를 구성한다. 그 후, 사전에 정의된 네 가지 편집 액션 중 하나와 대상 요소를 무작위로 선택해 편집 명령 O를 합성한다. 이때 목표는 “C, G, O”를 입력으로 받아 새로운 속성 집합 A_out(=편집 후 좌표·크기)을 예측하도록 모델을 학습시키는 것이다. 즉, 모델은 “디자인을 재구성한다”는 일반적인 과업을 수행하면서, 동시에 편집 명령을 반영하고 관계 그래프를 보존하도록 훈련된다.

학습 백본으로는 다중모달 대형 언어 모델(MLLM) 을 사용한다. 텍스트(편집 명령)와 이미지(요소 시각 특징)를 각각 Vision Encoder와 텍스트 토크나이저로 임베딩한 뒤, 이를 하나의 시퀀스로 결합해 LLM에 입력한다. 출력은 JSON 형태의 요소 속성(예: “id”, “x”, “y”, “w”, “h”)이며, NLL 손실을 통해 정답 속성과 비교한다. 이렇게 하면 하나의 모델이 네 가지 액션을 모두 처리할 수 있어, 별도 모델을 구축할 필요가 없으며, 실제 서비스 환경에서 다양한 편집 요구에 즉시 대응할 수 있다.

실험에서는 GPT‑4o 기반 베이스라인과 최신 레이아웃·디자인 생성 모델들을 비교하였다. 평가 지표는 편집 정확도, 레이아웃 구조 보존 점수, 시각적 품질(FID, 사용자 설문) 등이다. ReLayout은 특히 구조 보존 측면에서 15~20% 이상 우수한 성능을 보였으며, 사용자 조사에서도 “편집 결과가 원본 의도를 유지한다”는 높은 만족도를 얻었다. 또한, 언어 기반 편집(자연어 명령)과 복합 편집(여러 액션 동시 적용)에도 확장 가능함을 시연하였다.

핵심 기여는 다음과 같다. 1) 디자인 레이아웃 편집이라는 새로운 문제 정의와 표준화된 명령 포맷 제시, 2) 관계 그래프를 통한 구조 제약 도입, 3) 편집 데이터 부족을 셀프슈퍼바이즈드 재구성 학습으로 극복, 4) 다중모달 LLM을 활용한 범용 편집 모델 구현. 이 접근법은 향후 디자인 자동화, UI/UX 프로토타이핑, 광고 제작 등 다양한 그래픽 분야에 적용될 잠재력을 가진다.