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

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

지난 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