AI로 어도비 XD용 플러그인 만들기

이번에는 지난번의 포토샵, 일러스트레이터에 이어서 어도비 XD 자동화 작업을 해봤습니다. 작업 배경을 잠깐 설명드리면요, AI에게 신발 이미지 한 장을 만들어 달라고 하는 작업은 이제 어렵지 않고, 요즘은 광고 배너로도 잘 만들어주지만, 텍스트 한글자 바꾸려고 해도 프롬프트 넣어야하는 건 오히려 불편하죠. 제목 위치, 제품을 얼마나 크게 잘라낼지, CTA가 읽히는지, 색이 이미지와 충돌하지 않는지까지 차라리 직접하고 말지 하는 생각이 들 수 있습니다. 아직은 이미지 한 장이 있다고 광고 작업물 완성을 기대하기 어렵죠. 베리에이션을 많이 해야하는 경우는 더 그렇구요. 그래서 어도비의 레이아웃도구인 XD에 플러그인을 만들어서 자동화를 시도해봤습니다.

 

 

크리에이티브 클라우드 학생 65% 할인

제휴 활동으로 소정의 수수료를 지급받습니다. 어도비 구독료에는 영향을 미치지 않습니다.

 

 

어도비 XD에 투명 배경 스니커즈 이미지를 넣고, Adobe XD 안에서 1200 x 300 배너를 만드는 작은 플러그인입니다. 정확히는 제가 코드를 직접 작성한 것이 아니라, 클로드 코드에게 시켜 XD를 제어하게 했습니다. 목표도 멋진 결과를 자동으로 뽑아내는 것이 아니라, 사람이 판단할 부분과 코드가 반복해도 되는 부분을 나누는 것이었습니다.

 

작업에 사용한 누끼 이미지

 

목차

1. 최종 배너 결과
2. XD 플러그인의 입력과 동작
3. 현재 플러그인의 한계
4. Photoshop, XD, Express의 역할
5. 마치며
6. 공식 문서

 

최종 배너 결과

최종 시안은 아래와 같습니다. 카피는 "스니커즈 런칭 캠페인", CTA는 "제작 과정 보기"로 잡았습니다. 제품은 우측에서 크게 잘리고, 카피와 CTA는 좌측 안전 영역에 남겼습니다. 원형 배지는 존재하지 않는 할인율을 꾸며내지 않기 위해 AI + CREATIVE로 적었습니다.

 

 

 

이 배너가 처음부터 이렇게 나온 것은 아닙니다.  처음엔 다른 이미지를 사용했는데, 이미지는 둘째 치고 텍스트 정렬 문제도 많았습니다.

 

 

여러가지 비율도 만들었지만 우선은 와이드포멧 하나만 집중해서 개선하기로 했죠.

 

XD 플러그인의 입력과 동작

초기 버전이라 요소들을 단순하게 해봤습니다.

• 제목, 본문, CTA
• 기본색, 강조색, 배경색, 텍스트색, 폰트
• 투명 PNG 제품컷 또는 일반 사진

요즘 XD를 많이 사용하는 분들이 없을 것 같긴하지만 제가 XD로 테스트를 해본 이유는 어도비 프로그램이기도 하고, 기능이 피그마보다 단순해서 사용하기도 좋구요. 무엇보다 xd는 어도비 크리에이티브 클라우드에 포함되어 있기 때문에 별도 비용도 들지 않거든요. 

 

 

플러그인은 XD 문서에 새 아트보드를 만들고 배경, 로고성 텍스트, 제목, 본문, CTA, 원형 배지, 이미지 레이어를 순서대로 올립니다. Adobe XD의 UXP scenegraph는 아트보드, 도형, 텍스트 같은 문서 노드를 만들고 고치는 API이며, 이미지도 ImageFill로 도형에 넣을 수 있습니다. 그래서 PNG만 뱉어내는 스크립트와 달리, 생성 후에도 XD에서 문구나 위치를 계속 손볼 수 있습니다.

다만 이미지 상태에 따라 레이아웃을 나눴습니다. 투명 PNG는 제품을 우측 원형 배경 위로 크게 배치합니다. 배경이 함께 들어간 사진은 억지로 누끼처럼 보이게 하지 않고 우측 사진 패널로 넣었습니다. 이 구분이 없으면 제품 이미지는 잘려 보이고, 사진은 흰 사각형처럼 떠 보였습니다.

 

 

 

현재 만들어진 플러그인을 실행시키면 이렇게 각 요소들을 자동으로 배치하게 됩니다. 

 

 

현재 플러그인의 한계

이 버전은 1200 x 300 배너 한 종류만 검증했습니다. 블로그 썸네일, 인스타그램, 스토리, 유튜브 썸네일을 바로 뽑아낸다고 말할 단계는 아닙니다. 한 규격을 그대로 줄여 다른 규격으로 옮기면 제목이 길어지거나 CTA가 작아지고, 제품이 중요한 부분에서 잘릴 수 있습니다.

배경이 복잡한 사진은 먼저 정리해야 합니다. 이번에 쓴 신발 이미지는 애초에 투명 PNG였습니다. 일반 사진을 쓸 때는 Photoshop 배경 제거 기능으로 마스크를 만든 다음 가장자리를 한 번 확인하는 편이 안전합니다. Adobe도 대비가 높은 이미지에서 결과가 더 잘 나온다고 안내하며, 필요하면 레이어 마스크를 수동으로 다듬으라고 권합니다.

 

 

Photoshop, XD, Express의 역할

이 워크플로우는 Creative Cloud 앱을 이미 쓰는 사람이 반복 작업을 줄이려는 용도입니다. 투명 제품컷을 준비하고, XD 문서에서 편집 가능한 배너를 만들고, 필요하면 Photoshop에서 마스크와 색을 손보는 흐름입니다. 단순 리사이즈만 필요하면 Adobe Express의 Resize 기능이 더 빠를 수 있습니다. 다만 여러 요소를 계속 바꿔가며 편집 가능한 작업 파일을 남겨야 한다면, Photoshop이나 XD 같은 데스크톱 흐름이 더 적합합니다.

Adobe XD에는 미리 알아둘 점이 있습니다. Adobe가 XD Marketplace에서 신규 플러그인을 더 이상 받지 않습니다. 그래서 이 글의 플러그인도 Marketplace에 올릴 제품이 아니라, 설치된 XD에서 개인이나 팀이 쓰는 개발용 자동화 실험입니다. 새 도구를 처음 들이는 분에게 XD를 권하는 글도 아닙니다.

 

 

마치며

이번 실험에서 가장 크게 느낀 점은, AI가 만든 이미지는 끝이 아니라 시작점이라는 것이었습니다. 완벽한 자동화보다는 사람이 마지막에 손댈 여지를 남겨두는 쪽이 결국 더 쓸 만한 결과로 이어졌습니다.

제휴 고지: 이 글에는 Adobe 제휴 링크가 포함될 수 있습니다. 링크를 통해 결제하면 운영자에게 수수료가 지급될 수 있지만, 글의 실험 결과와 평가는 바뀌지 않습니다.

 

Creative Cloud 플랜과 현재 제공 범위 확인하기

 

 

공식 문서

• Adobe XD UXP documentation
• Adobe XD scenegraph reference
• Adobe XD ImageFill reference
• Photoshop Remove Background
• Adobe Express Resize image