디자인 자동화 AI 에이전트로 SaaS 서비스 템플릿을 만든 과정

Figma처럼 채팅으로 디자인을 완성하는 기능을 만들었습니다

Figma처럼 채팅으로 지시하면 알아서 디자인을 완성해주는 기능을 만들고 싶었습니다. 그리고 최근에 그 기능을 완성했습니다.

 

저는 디지털사이니지와 키오스크 컨텐츠를 쉽게 생성해서 운영하는 CMS 서비스를 운영 중입니다. 이 서비스에서 가장 중요한 건 컨텐츠 템플릿입니다. Canva처럼 사용자들이 템플릿을 선택하고 수정해서 나만의 컨텐츠를 만들어야 하기 때문입니다.

 

템플릿의 수와 퀄리티가 서비스의 경쟁력을 결정합니다. 하지만 템플릿을 만드는 과정은 생각보다 비용과 시간이 많이 드는 작업이었습니다. 이 문제를 디자인 자동화로 해결한 과정을 공유합니다.

템플릿 하나 만드는 데 10만원이 들었습니다

처음에는 외주 디자이너를 이용했습니다. 디자인부터 에디터 툴 작업까지 컨텐츠 1개당 10만원씩 지불했습니다. 퀄리티는 괜찮았지만 비용이 문제였습니다. 템플릿이 10개면 100만원, 50개면 500만원입니다. 서비스 초기에 이 비용을 감당하기는 쉽지 않았습니다.

 

그래서 직접 만들기로 했습니다. 피그마에서 디자인을 만들고, 그 디자인을 서비스 에디터로 옮기는 작업을 했습니다. 디자인 비용은 줄었지만 시간이 문제였습니다. 피그마에서 만든 디자인을 에디터로 옮기는 데 컨텐츠 1개당 1시간이 걸렸습니다.

 

10만원짜리 작업이 1시간짜리 작업으로 바뀐 거지만, 여전히 템플릿 수십 개를 만들려면 수십 시간이 필요했습니다. 이 시간을 쓰기가 쉽지 않았습니다.

단순 AI API로는 디자인 자동화가 안 됐습니다

시간과 비용을 줄이기 위해 AI를 활용하고 싶었습니다. 채팅으로 "카페 메뉴판 만들어줘"라고 지시하면 알아서 디자인이 완성되는 기능을 만들고 싶었습니다.

 

하지만 이건 단순 인공지능 API로는 구현이 어려웠습니다. 디지털사이니지 컨텐츠는 단순한 이미지가 아닙니다. 절대 좌표로 배치된 컴포넌트 구조이고, 텍스트, 이미지, 컬러 블록, 스위처 등 16가지 컴포넌트 타입이 있습니다. 이 구조를 이해하고 정확한 좌표와 속성을 가진 JSON을 만들어야 합니다.

 

AI한테 "메뉴판 만들어줘"라고 하면 이미지는 만들어줄 수 있습니다. 하지만 에디터에서 사용자가 텍스트를 바꾸고, 이미지를 교체하고, 색상을 변경할 수 있는 구조화된 템플릿을 만드는 건 전혀 다른 문제입니다. 이미지 생성 AI가 만든 결과물은 예쁘긴 하지만, 사용자가 편집할 수 없는 그냥 그림입니다. 디자인 자동화라고 부르려면 편집 가능한 구조화된 데이터가 나와야 합니다.

에이전트 SDK로 스킬을 만들었습니다

그러다 에이전트 SDK가 나온 걸 확인했습니다. 에이전트 SDK를 쓰면 AI가 파일을 읽고, 코드를 분석하고, 스킬에 따라 구조화된 결과물을 만들어낼 수 있습니다.

 

로컬에서 서비스의 에디터와 렌더링 로직을 분석하게 하고, 디자인을 생성하는 스킬을 만들었습니다. 처음에는 당연히 결과물이 어설펐습니다. 레이아웃이 깨지고, 텍스트가 잘리고, 색상 조합이 이상했습니다. 이런 문제들을 하나씩 수정해가면서 스킬을 고도화시켰습니다.

 

스킬에 규칙을 추가했습니다. 텍스트 영역은 현재 내용의 2~3배 여유를 확보해야 한다. 이건 템플릿이기 때문입니다. 카페명이 "모카" 2글자여도 "스타벅스 리저브" 7글자가 들어갈 수 있어야 합니다. 가격이 "5,000원"이어도 "150,000원"까지 수용 가능해야 합니다.

 

반복 항목은 하나의 텍스트에 뭉치지 말고 각각 개별 컴포넌트로 분리해야 한다는 규칙도 넣었습니다. 메뉴 3개를 줄바꿈으로 한 텍스트에 넣으면 사용자가 개별 수정할 수 없습니다. 각각 독립된 컴포넌트여야 에디터에서 자유롭게 편집이 가능합니다.

 

하나의 텍스트 컴포넌트에 여러 색상을 혼합하지 않는다는 규칙도 중요했습니다. 서비스의 텍스트 컴포넌트는 단일 색상만 지원하기 때문입니다. 이런 서비스 고유의 제약 조건들을 스킬에 녹여넣을수록 결과물의 퀄리티가 올라갔습니다.

결국 만족스러운 퀄리티를 만드는 데 성공했습니다. 디자인 자동화에서 가장 중요한 건 AI의 성능이 아니라 스킬에 녹여넣는 규칙의 정밀도였습니다.

스킬 7개를 파이프라인으로 연결했습니다

디자인 자동화를 위해 만든 스킬은 총 7개입니다. 각 스킬이 파일을 생성하고, 다음 스킬이 그 파일을 읽어서 작업하는 파이프라인 구조입니다.

 

스킬 1은 주제 생성입니다. 업종, 컨셉, 해상도를 정해서 topic.md 문서에 저장합니다. 카페 메뉴판인지, 병원 대기 현황판인지, 부동산 매물 안내인지 주제를 확정하는 단계입니다.

 

스킬 2는 콘텐츠 기획입니다. 컬러 팔레트, 폰트, 레이아웃, 화면별 구성 요소를 기획서(md)로 작성합니다. 어떤 컴포넌트 타입을 쓸지, 각 요소의 위치와 크기를 어떻게 잡을지 미리 설계합니다.

 

스킬 3은 이미지 생성입니다. Gemini API로 디자인에 필요한 배경 이미지와 소재 이미지를 만듭니다. 텍스트가 없는 순수 비주얼 이미지만 생성합니다.

 

스킬 4는 HTML 파일 생성입니다. 기획서를 기반으로 가로형(1920x1080)과 세로형(1080x1920) HTML을 코딩합니다. 모든 요소는 절대 좌표(px)로 배치하고, 각 요소에 data-component-type 속성을 달아서 나중에 JSON으로 변환할 수 있게 합니다. 가로형을 먼저 만들고 세로형은 같은 요소를 세로 비율에 맞게 재배치합니다. 단순 회전이 아니라 레이아웃을 새로 잡는 겁니다.

 

스킬 5는 검증입니다. Playwright로 HTML을 렌더링해서 스크린샷을 찍고, 기획서와 비교해서 문제가 없는지 시각적으로 확인합니다. 텍스트가 잘리지 않는지, 요소가 화면 밖으로 나가지 않는지, 색상 대비가 충분한지, 사이니지 가독성 기준(제목 40px 이상, 본문 24px 이상)을 충족하는지 체크합니다.

 

스킬 6은 수정입니다. 검증에서 발견된 문제를 피드백 반영해서 HTML을 수정합니다. 모든 파일이 통과할 때까지 검증과 수정을 반복합니다.

 

스킬 7은 JSON 변환입니다. 완성된 HTML을 스크립트로 파싱해서 서비스 DB에 넣을 수 있는 JSON 데이터로 변환합니다. 컨텐츠명, 해상도, 화면별 컴포넌트 목록이 포함된 3계층 구조의 JSON이 생성됩니다.

HTML을 중간 산출물로 쓴 이유가 있습니다

AI가 직접 JSON을 만들면 되지 않느냐고 생각할 수 있습니다. 실제로 처음에는 그렇게 시도했습니다.

 

하지만 JSON으로 바로 만들면 문제가 있습니다. 결과물을 눈으로 확인할 수가 없습니다. 좌표가 맞는지, 텍스트가 잘리는지, 색상 조합이 적절한지 JSON만 보고는 판단할 수 없습니다.

 

그래서 일부러 HTML을 중간 산출물로 사용했습니다. HTML이면 브라우저에서 바로 열어서 디자인을 확인할 수 있습니다. Playwright로 스크린샷을 찍어서 자동 검증도 가능합니다. 문제가 있으면 HTML을 수정하고 다시 확인하면 됩니다.

 

퀄리티 검증이 끝난 HTML은 스크립트 한 줄로 JSON으로 변환됩니다. HTML에서 data-component-type 속성과 CSS 스타일을 파싱해서 서비스가 이해하는 JSON 구조로 자동 변환합니다. 사람이 JSON을 직접 만질 필요가 없습니다.

 

디자인 자동화에서 중간 산출물의 선택은 매우 중요합니다. AI가 바로 최종 결과물을 만들게 하면 검증이 어렵고, 사람이 처음부터 끝까지 하면 자동화 의미가 없습니다. HTML은 그 중간 지점을 정확히 잡아주는 포맷이었습니다.

19개 업종 템플릿을 만들었습니다

이 디자인 자동화 파이프라인으로 19개 업종의 템플릿을 만들었습니다. 카페, 병원, 부동산, 음식점, 호텔, 피트니스, 교육, 뷰티, 주얼리, 문화센터, 골프장, 전시, 박물관, 기업, 리테일 등 다양한 업종을 커버합니다. 각 템플릿은 가로형과 세로형 두 가지로 제작했습니다.

 

클로드 MAX를 사용 중인데, 컨텐츠 10개 정도를 병렬처리하면 4시간 사용량이 다 찹니다. 기본적인 서비스의 템플릿은 당분간 이렇게 채워나갈 생각입니다.

 

외주로 하면 19개 × 10만원 = 190만원이었을 작업입니다. 직접 피그마로 하면 19개 × 1시간 = 19시간이었을 작업입니다. 디자인 자동화 파이프라인으로는 스킬을 한 번 만들어놓으니까 업종명만 바꿔서 반복 생산이 가능해졌습니다. 비용도 시간도 압도적으로 줄어들었습니다.

 

물론 자동 생성된 결과물을 그대로 쓴 건 아닙니다. 업종별로 레이아웃이 적절한지, 텍스트 크기가 사이니지에서 잘 보이는지, 색상 대비가 충분한지 검토하고 수정했습니다. 하지만 0에서 시작하는 것과 80%가 완성된 상태에서 다듬는 건 완전히 다른 일입니다.

 

가로형 템플릿 결과물

세로형 템플릿 결과물

로컬 스킬을 서비스 에이전트에 탑재했습니다

여기서 끝이 아닙니다. 로컬에서 검증된 스킬들을 서버 에이전트에 탑재했습니다. 에디터에서 채팅으로 디자인을 생성하고 부분 수정하는 기능까지 완료했습니다.

 

로컬에서 디자인 자동화 스킬을 만들고 퀄리티를 안정화시킨 뒤, 그 스킬을 서버 에이전트에 이식하는 방식입니다. 이전 글에서 공유했던 이메일 템플릿 자동화와 같은 패턴입니다. 로컬에서 충분히 검증한 스킬을 서비스에 올리면 안정성이 높아집니다.

 

단점은 서비스에 탑재한 에이전트가 아직 느리다는 겁니다. 속도 개선이 필요해서 현재는 관리자만 사용할 수 있게 처리했습니다. 문제를 해결하고 안정화가 되면 이 기능도 일반 고객분들이 사용할 수 있도록 오픈할 예정입니다.

디자인 자동화를 하면서 느낀 것

이번 경험에서 가장 크게 느낀 건 디자인 자동화의 핵심은 결국 스킬의 상세한 요구사항이었습니다.

 

처음에 AI한테 "카페 메뉴판 만들어줘"라고 했을 때 결과물은 쓸 수 없는 수준이었습니다. 하지만 스킬에 규칙을 하나씩 추가할 때마다 퀄리티가 올라갔습니다. 눈으로 보며 지속적으로 스킬을 보강하는 규칙들이 쌓이면서 점점 더 정확한 결과물을 만들어냈습니다.

 

결국 중요한 건 서비스를 얼마나 깊이 이해하고, 그 이해를 스킬에 얼마나 정밀하게 녹여넣느냐였습니다. 같은 AI를 써도 스킬의 규칙이 다르면 결과물의 퀄리티가 완전히 달라집니다.

반복되는 디자인 작업이 있다면, AI한테 매번 시키지 말고 한 번 스킬로 만들어두세요. 그리고 결과물이 어설프면 버리지 말고 규칙을 추가하세요. 스킬은 쓸수록 정밀해지고, 정밀해질수록 사람 손이 줄어듭니다.

다음 글에서 나머지 SaaS 서비스의 에이전트 고도화 사례를 이어서 공유하겠습니다.