AI로 배너를 만든다 — AI 스킬로 광고 배너 생성 자동화하기

AI로 배너를 만든다 — AI 스킬로 광고 배너 생성 자동화하기

배너 하나 만드는 데 얼마나 걸리나요?

지난 1편에서는 우리 서비스에 자체 배너 시스템을 구축한 이야기를 했습니다. AdBannerSlider 컴포넌트를 만들고, Admin API로 배너를 등록하고, DB에서 동적으로 불러오는 구조였습니다. 시스템은 잘 돌아갔습니다. 문제는 배너 HTML을 작성하는 일 자체였습니다.

배너 하나를 처음부터 만들면 이런 과정을 거칩니다.

1. 그라데이션 배경색 조합을 고릅니다
2. 제목, 설명, CTA 버튼 레이아웃을 잡습니다
3. 클래스명이 다른 배너와 충돌하지 않도록 고유 접두어를 붙입니다
4. 모바일(160px) · 태블릿(180px) · 데스크탑(200px) 3개 breakpoint에 맞춰 폰트 크기와 여백을 조정합니다
5. prefers-reduced-motion, WCAG AA 색상 대비를 확인합니다
6. Admin API로 등록합니다

처음엔 30분, 익숙해지면 15분. 하지만 이 과정은 창의적인 작업이 아닙니다. 규칙이 명확하고, 체크리스트가 있고, 반복됩니다. 반복적이고 규칙이 명확한 작업 — AI에게 딱 맞는 조건입니다.

---

"그냥 프롬프트 주면 되지 않나요?"

처음엔 ChatGPT나 Claude에게 "배너 HTML 만들어줘"라고 해봤습니다. 결과물이 나오긴 했습니다. 그런데 문제가 있었습니다.

• 클래스명 충돌 방지를 모릅니다
• 우리 서비스의 컨테이너 사양(높이, 최대너비, overflow)을 모릅니다
• 기존 배너의 디자인 톤을 모릅니다
• Admin API 엔드포인트와 페이로드 형식을 모릅니다

AI가 능력이 없는 게 아닙니다. 컨텍스트가 없는 것입니다. 일반 프롬프트로는 매번 이 컨텍스트를 다시 설명해야 했고, 결국 프롬프트가 길어지면서 "그냥 내가 짜는 게 낫겠다"는 결론에 도달하게 됩니다.

GitHub Copilot CLI의 커스텀 스킬(SKILL.md)은 이 문제를 구조적으로 해결합니다.

---

SKILL.md — AI에게 역할을 주는 방법

GitHub Copilot CLI의 스킬 시스템은 마크다운 파일 하나로 AI에게 역할 + 제약 + 도구를 부여합니다. 단순한 프롬프트 저장소가 아닙니다. AI가 이 파일을 읽고 전문가처럼 행동하게 만드는 컨텍스트 문서입니다.

create-banner 스킬의 SKILL.md는 크게 세 가지를 정의합니다.

1. 컨테이너 사양 — AI가 알아야 할 물리적 제약

| 뷰포트          | 높이  |
|-----------------|-------|
| 모바일 (<768px) | 160px |
| 태블릿 (768px~) | 180px |
| 데스크탑 (1440px+) | 200px |

배너가 렌더링되는 컨테이너는 width: 100%, overflow: hidden, position: relative로 고정되어 있습니다. AI는 이 제약 안에서만 HTML을 생성합니다. 컨테이너 사양 없이 만든 배너는 실제 환경에서 잘리거나 깨집니다.

2. 디자인 가이드라인 — 일관성의 핵심

- 배경: #EBD1BF, #FDE68A, #1E293B(다크) 계열 그라데이션
- CTA 버튼: #F59E0B → hover: #D97706, pill 형태 (border-radius: 999px)
- 다크 배경 Text Primary: #FFFFFF (12.63:1 대비, WCAG AAA 충족)
- 다크 배경 Accent: #F59E0B (6.15:1 대비, WCAG AA 충족)
- prefers-reduced-motion 대응 필수

WCAG 색상 대비 수치까지 명세에 포함시킨 게 포인트입니다. AI가 임의로 색상을 고르더라도 접근성 기준에서 벗어나지 않습니다.

3. 클래스 네이밍 규칙 — 충돌 방지

배너마다 4자리 고유 접두어를 사용합니다. .bnr-devt-*, .bnr-sprg-* 처럼. 여러 배너가 한 페이지에 슬라이더로 로드될 때 CSS 충돌이 생기지 않도록 AI가 스스로 고유 접두어를 생성합니다.

---

기존 배너가 레퍼런스가 됩니다

create-banner 스킬의 또 다른 핵심은 기존 배너 폴더를 먼저 읽는다는 점입니다.

all-service-banners/
├── typefy-spring-mood.html
├── typefy-pet-mbti.html
├── typefy-second-act-happiness.html
└── typefy-developer-workstyle.html

새 배너를 만들기 전, AI는 이 폴더의 파일을 읽어 그라데이션 방향, 레이아웃 패턴, CTA 버튼 위치, 이모지 활용 방식 등을 파악합니다. 덕분에 새 배너도 기존 배너와 톤이 자연스럽게 맞아떨어집니다. 스타일 가이드를 AI가 스스로 귀납적으로 학습하는 셈입니다.

이게 단순 프롬프트와 가장 크게 다른 점입니다. 프롬프트는 그 순간만 살지만, SKILL.md + 레퍼런스 폴더는 시스템으로 동작합니다.

---

실제 워크플로우: /create-banner 한 줄로

실제 사용은 이렇게 간단합니다.

/create-banner 봄 분위기 Typefy 테스트 홍보 배너

AI는 다음 단계를 자율적으로 실행합니다.

1. all-service-banners/ 기존 파일 4개 확인
   → 레이아웃 패턴: [왼쪽 텍스트 | 오른쪽 CTA] 구조 파악
   → 기존 그라데이션: 다크 계열이 최근 트렌드임을 확인

2. 봄 분위기 → 따뜻한 파스텔 그라데이션 선택
   → #FDE68A → #EBD1BF 방향 그라데이션

3. 고유 클래스 접두어 생성: .bnr-sprg-*

4. 3개 breakpoint 반응형 HTML 작성
   → 모바일: 폰트 17px, 패딩 20px
   → 태블릿: 폰트 21px, 패딩 28px
   → 데스크탑: 폰트 25px, 패딩 36px

5. all-service-banners/typefy-spring-mood.html 저장

6. ADMIN_TOKEN 확인 → Admin API POST 호출
   → POST /api/v1/admin/ad-banners
   → ID: 7 등록 완료

총 소요 시간: 약 40초. 직접 짜면 최소 15분이 걸리던 작업입니다.

---

Admin API 자동 등록

배너 HTML이 저장되면 스킬은 자동으로 DB 등록까지 진행합니다.

# ADMIN_TOKEN 환경변수 확인 후
curl -X POST http://localhost:8080/api/v1/admin/ad-banners \
  -H "Authorization: Bearer ${ADMIN_TOKEN}" \
  -H "Content-Type: application/json" \
  -d @/tmp/banner-payload.json

환경변수 ADMIN_TOKEN이 설정되어 있으면 자동 등록, 없으면 페이로드 파일을 생성하고 수동 등록 안내 메시지를 출력합니다. CI/CD 환경과 로컬 개발 환경 모두 커버합니다.

---

실제로 생성된 배너 HTML

아래는 typefy-developer-workstyle.html — AI가 생성한 다크 테마 배너의 핵심 구조입니다.

이 배너는 다크 테마(#0F172A 배경)이므로, 가이드라인의 앰버(#F59E0B) 대신 인디고(#6366F1)를 사용했습니다. SKILL.md에 ## 테마별 색상 예외 섹션을 두어 이런 의도된 예외를 명시적으로 문서화하면 일관성을 유지할 수 있습니다.

<a href="/typefy/developer-workstyle-archetype-test"
   style="position:relative; display:flex; align-items:center;
          background:linear-gradient(120deg, #0F172A, #1E293B, #0F2744);">
  <style>
    .bnr-devt-title {
      color: #FFFFFF;      /* 12.63:1 대비 - WCAG AAA */
      font-size: 17px;
      font-weight: 800;
    }
    .bnr-devt-cta {
      background: #6366F1;
      border-radius: 999px;
      padding: 8px 16px;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .bnr-devt-cta:hover { background: #4F46E5; transform: translateY(-1px); }
    @media (min-width: 768px)  { .bnr-devt-title { font-size: 21px; } }
    @media (min-width: 1440px) { .bnr-devt-title { font-size: 25px; } }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
  <span class="bnr-devt-deco">&lt;/&gt;</span>
  <!-- 콘텐츠 -->
</a>

prefers-reduced-motion 처리, focus-visible 스타일, WCAG 색상 대비까지 — 직접 짤 때도 놓치기 쉬운 항목들이 빠짐없이 들어가 있습니다.

참고: <style> 태그를 인라인 엘리먼트 내부에 두는 것은 HTML 표준 위반이지만, 배너 HTML이 dangerouslySetInnerHTML로 삽입되는 자기완결 구조이므로 의도된 패턴입니다. 대부분의 브라우저가 관용적으로 처리하며, 고유 접두어 덕분에 다른 스타일과 충돌하지 않습니다. 민감한 환경이라면 <style> 블록을 배너 HTML 최상단(<a> 밖)에 두는 방식도 동작합니다.

---

한계와 개선점

물론 완벽하진 않습니다. 실제로 마주친 한계들을 솔직하게 공유합니다.

1. WCAG 대비율을 가끔 놓친다

SKILL.md에 색상 조합을 명시해도, AI가 창의적인 조합을 시도하다 대비율 기준을 이탈하는 경우가 있습니다. 체크리스트를 SKILL.md 마지막에 추가해서 생성 후 자가 검증하도록 했습니다.

## 생성 완료 체크리스트
- [ ] 모든 텍스트 색상이 WCAG AA (4.5:1) 이상인가?
- [ ] 고유 접두어가 기존 배너와 겹치지 않는가?
- [ ] 3개 breakpoint 모두 확인했는가?
- [ ] prefers-reduced-motion이 포함되어 있는가?

2. 브라우저 렌더링 검증 불가

AI는 HTML을 작성하지만 실제로 렌더링해서 눈으로 확인할 수 없습니다. 이 문제는 .preview.html 파일을 함께 생성하는 방식으로 보완했습니다. 실제 컨테이너 크기를 시뮬레이션하는 미리보기 파일로, 로컬에서 바로 브라우저 열어 확인할 수 있습니다.

3. 토큰 없는 환경에서 자동 등록 불가

ADMIN_TOKEN이 없으면 API 호출이 실패합니다. 이 경우 스킬이 /tmp/banner-payload.json을 생성하고, curl 명령어를 출력해 수동 등록 방법을 안내합니다. 완전 자동화는 아니지만 실수 없이 등록할 수 있습니다.

---

SKILL.md 설계 철학 — "역할 + 제약 + 도구"

이 경험을 통해 AI 자동화 스킬을 설계할 때 세 가지가 핵심이라는 걸 배웠습니다.

역할(Role): AI가 누구인지 명확히 정의합니다. "배너 HTML 생성기"가 아니라 "AdBannerSlider 호환 배너를 만드는 프론트엔드 엔지니어"처럼 구체적으로.

제약(Constraint): 물리적 한계(컨테이너 사양), 디자인 기준(색상 팔레트, 대비율), 네이밍 규칙을 명세합니다. 자유도가 높을수록 결과물의 일관성이 떨어집니다.

도구(Tool): 어떤 파일을 읽고 어디에 저장하고 어떤 API를 호출하는지 정확히 지정합니다. AI가 추측하게 두지 않습니다.

이 세 가지가 갖춰진 SKILL.md는 단순 프롬프트와 차원이 다릅니다. 맥락이 시스템 안에 녹아 있어서, 다음에 새 팀원이 와도, 6개월 뒤 내가 사용해도, 매번 같은 품질의 배너가 나옵니다.

---

마무리 — 반복 작업의 시스템화

디자이너 없는 팀에서 광고 배너를 꾸준히 만드는 건 생각보다 큰 비용입니다. 배너 하나하나는 작아 보이지만, 쌓이면 개발 시간을 잠식합니다.

create-banner 스킬은 그 반복 비용을 제거했습니다. 더 중요한 건, 이 패턴이 배너에만 국한되지 않는다는 점입니다. 규칙이 명확하고 반복적인 모든 작업은 SKILL.md로 자동화할 수 있습니다.

다음에는 퀴즈 콘텐츠 생성 자동화, SEO 메타태그 자동 최적화로 이 패턴을 확장할 계획입니다.

---

비슷한 고민을 하고 계시거나
같이 실험해보고 싶은 분은 커피챗 하고 싶습니다 ☕️
📩 ksy90101@gmail.com