DEVOCEAN

안녕하세요! SKT AI Fellowship 6기에 참여하고 있는 엔팁과 아이들🐬 팀입니다.

저희는 C-10번 《이미지 기반 광고 컨텐츠 Layout Generation》을 주제로 연구를 진행하고 있습니다.

이번 글에서는 중간 발표까지의 연구 진행 상황과 향후 계획을 말씀드리고자 합니다.

주제 소개

저희는 MMS 마케팅에 활용되는 광고 포스터 이미지 생성 모델 구축을 목표로 하고 있습니다.

개발된 모델은 SKT AI 디자이너 서비스를 통해 상용화될 예정이며, 저희의 모델이 광고 제작 시간과 비용 단축에 기여할 것으로 기대하고 있습니다.

모델의 예상 INPUT → OUTPUT 형태는 다음과 같습니다.

위와 같이 사용자가 [상품명, 상품 설명, 상품 이미지, 행사가, 브랜드 로고] 등의 입력 요소를 넣으면, 모델은 완성된 포스터를 출력하게 됩니다.

이를 위해 모델 파이프라인에는 ① 입력 요소들의 레이아웃 배치 (Layout Generation), ② 배경 생성 (Background Generation), ③ 폰트 종류와 색상 선정 (Font & Color Selection) 등의 과정이 필요합니다.

이중에서도 Layout Generation 파트의 성능이 가장 중요하기 때문에, 현재는 이 부분에 초점을 맞추어 연구를 진행하고 있습니다.

선행 연구 비교 분석

Layout Generation 분야는 모델의 입력 형태에 따라 Content-aware와 Content-agnostic으로 나뉩니다.

아래 이미지에 각 분야의 주요 특징과 차이점을 정리하였습니다.

여기까지 살펴보셨을 때, 저희 연구 주제가 MMS 마케팅에 활용될 poster를 생성하는 것이니만큼 당연히 Content-aware 모델을 사용하는 게 맞지 않나? 라는 생각이 드실 수도 있는데요.

저희 task에서는 '상품 이미지를 빈 캔버스에 배치하는 과정'까지 모델이 수행해야 합니다.

반면 기존의 Content-aware 모델은 '상품이 이미지 배치된 상태의 배경 이미지'를 고려하여 레이아웃을 생성할 뿐, image 요소를 배치할 수 없다는 한계가 존재합니다.

Content-agnostic 모델의 경우 Content-aware 모델과 달리 image 요소를 배치할 수 있습니다.

그러나 해당 분야의 벤치마크 데이터셋의 특성상 underlay나 decoration 같은 장식적인 요소의 배치가 불가하고, 디자인적 배치에 취약하다는 문제가 있습니다.

이처럼 Content-aware 모델과 Content-agnostic 모델은 각각의 장단점이 존재합니다.

저희는 어떤 모델이 task에 적합할지 파악하기 위해 각 분야의 모델을 모두 검토하였습니다.

PoC with Inference

각 모델들의 inference 결과물을 평가하기 위해, 위와 같은 타겟 이미지 예시를 제작하였습니다.

왼쪽의 포스터 이미지가 타겟 이미지 예시이고, 오른쪽의 요소들이 모델이 배치해야 할 input 요소들입니다.

먼저, Content-agnostic 모델들의 결과물입니다.

모델들의 결과물을 확인해보시면, 저희가 기대하는 형태의 결과물과는 상당히 다르다는 것을 알 수 있습니다.

저희는 해당 모델들의 inference 결과가 좋지 않은 원인이 데이터셋의 도메인 차이에 있다고 판단하였습니다.

Content-agnostic 모델들은 주로 주로 문서나 WebUI 데이터셋으로 학습되었기 때문에, 저희가 원하는 타겟 이미지(포스터)와는 형태가 매우 다릅니다.

이러한 데이터셋의 형태 차이로 인해 모델이 저희의 input에 대해 Layout을 제대로 생성하지 못하는 것으로 파악됩니다.

다음으로, Content-aware 모델들의 결과물입니다.

Content-aware 모델은 Poster Layout 데이터로 학습되었기 때문에, inference 결과물이 Content-agnostic 모델보다는 더 나은 성능을 보이는 것을 확인하실 수 있습니다.

그러나 상품이 이미 배치되어 있는 배경 이미지를 필수적으로 요구한다는 점, 입력된 텍스트나 이미지의 비율을 제대로 고려하지 못한다는 점,

underlay와 text가 같이 배치되어야 하는 경우를 함께 배치하지 못한다는 점 등이 잔존한 문제점이었습니다.

상품 이미지를 필수적으로 요구하는 것은 Content-aware task의 한계이나, input 요소들의 context를 제대로 반영하지 못하는 것은 모델의 한계로 볼 수 있습니다.

저희는 이러한 성능 저하의 원인이 기존 모델들에서 입력 요소들과 결과 간의 대응 관계를 고려하여 레이아웃을 생성하고 있지 않기 때문이라고 판단하였습니다.

기존 모델들은 생성된 Layout의 bounding box가 어떤 category에 대한 것인지만 명시할 뿐, 구체적으로 어떤 개별 element와 상응하는지는 알 수 없습니다.

또, Layout을 생성할 때 text underlay와 넓은 범위의 underlay를 구분하지 않아 생성된 underlay가 전혀 다른 위치에 배치되는 경우가 발생합니다.

결론적으로 저희는 Content-aware 모델을 기반으로 하되, 많은 부분을 변경하거나 개선할 필요가 있다고 판단하였습니다.

모델 구조

Key Challenge

기존 모델에서는 수행하지 못하지만, 타겟 이미지 생성을 위해 저희 모델이 추가적으로 고려할 수 있어야 하는 부분은 다음과 같습니다.

1. 입력된 텍스트 요소를 모델이 임의로 개행 및 정렬, 강조되는 부분 표시

2. 배경 이미지 없이 캔버스 사이즈만 주어진 상태에서 상품 이미지 배치

3. 복수의 상품 그룹을 배치

4. 입력 이미지와 텍스트의 의미를 고려하여 모델이 임의로 사이즈 지정

5. underlay, decoration 등의 요소는 사용자가 개수를 지정하지 않고 모델이 임의로 생성 및 배치

위와 같은 challenge한 요구 사항을 반영하기 위해 LLM 기반 모델을 활용하는 것이 가장 적절하다고 판단하였습니다.

추가적인 검증 과정을 거쳐, LLM 기반의 Layout Generation 모델인 Posterllama를 base model로 삼아 연구를 진행하였습니다.

Model Pipeline

저희가 설계한 파이프라인은 다음과 같습니다.

모델은 아래의 파이프라인을 통해 Layout Generation, Background Generation, Color Selection을 모두 수행합니다.

HTML Template

이전 선행 연구 분석에서는 Layout Generation 모델만 다루었는데, 갑자기 LLM 모델이 Background Generation과 Color Selection까지 수행한다는 말이 의아하실 수 있을 것 같습니다.

LLM 모델은 방대한 양의 데이터를 학습하였고, 여기에는 HTML/CSS 관련 데이터가 다수 포함되어 있습니다.

때문에, LLM이 가지고 있는 HTML 구조에 대한 사전 지식을 활용해 Layout을 생성하기 위해 모델의 input-output을 HTML 형태로 구성하였습니다.

이와 같이 HTML 구조를 빌려 레이아웃을 학습시키는 아이디어는 기존의 LLM 기반 Layout Generation 모델에서 많이 시도되었던 방식입니다.

저희는 이 아이디어를 차용하는 것에 더하여, LLM이 background generation과 color selection을 수행할 수 있도록 HTML 코드에 색상 및 그라데이션 관련 코드를 추가하고자 합니다.

물론 HTML 코드로 복잡한 일러스트 형태의 배경을 표현할 수는 없습니다.

하지만, MMS 광고의 경우 대부분의 배경이 단색이나 그라데이션 형태이기 때문에 HTML 코드로도 충분히 표현이 가능합니다.

결론적으로 LLM만으로 레이아웃, 배경, 그리고 텍스트의 색상까지 결정할 수 있게 되는 것이죠.

Image Processing

텍스트는 HTML template의 일부로 표현될 수 있지만, 이미지는 위와 같이 별도의 encoding 과정을 거쳐야 합니다.

사용자가 입력한 이미지는 pretrained DINOv2와 adapter를 거쳐 vector 형태로 HTML template과 결합되어 LLM에 입력됩니다.

복수의 이미지가 입력될 경우 각각의 이미지를 따로 처리한 뒤 output vector를 결합하여 활용합니다.

데이터셋 구축

선행 연구를 검토하는 과정에서, 기존의 공개 데이터셋으로는 모델이 저희가 목표로 하는 타겟 이미지를 제대로 학습할 수 없다고 판단하였습니다.

따라서 저희는 다음과 같은 요소에 주안점을 두고 task에 적합한 새로운 데이터셋을 구축하였습니다.

• text_underlay와 group_underlay를 구분하는 등 기존에 비해 다양한 element category 구성으로 Tdeal MMS 이미지를 잘 표현할 수 있어야 함

• background color, font color 등 색상 관련 annotation 추가

• text_alignment, text_newline, group 등 기존에 고려하지 않았던 텍스트와 복수의 상품 그룹 배치를 고려할 수 있도록 함

저희가 구축한 데이터셋의 예시는 위와 같습니다.

현재까지 약 100장 정도의 데이터셋을 구축한 상태입니다.

포스터 요소들의 형태나 배치가 다양한 편이라 자동화가 어려운 부분이 많아, 중간 발표까지 image segmentation을 제외한 대부분의 annotation을 수작업으로 진행하였습니다.

데이터셋 구축 기간에 대한 멘토님들의 피드백을 반영하여, 추후 색상이나 텍스트 관련 annotation을 자동화할 계획입니다.

또한 LLM을 활용해 synthesis data를 추가할 예정입니다.

향후 계획

저희의 향후 계획은 다음과 같습니다.

멘토님들의 피드백을 반영하여 데이터셋 구축 기간을 최대한 단축하고, 9월 초까지 1000장 이상의 데이터셋을 확보하고자 합니다.

빠른 시일 내에 전체 데이터셋을 통한 학습을 완료한 뒤, 다양한 prompt engineering 기법과 LLM 모델 변경을 통한 성능 고도화 실험을 진행할 예정입니다.

중간 발표 준비까지 저희를 이끌어주시고 응원해주신 나태영 멘토님, 이경승 멘토님, 정현희 멘토님께 감사의 말씀을 드리고 싶습니다.

최종 발표까지 좋은 결과를 낼 수 있도록, 남은 두 달 간 저희 팀 모두가 최선을 다하겠습니다.

감사합니다!