Usecase: 마케팅 팀이 AI로 게임 캠페인 랜딩 페이지 제작하기

마케팅/게임 팀이 AI 코딩 에이전트를 사용하여 캠페인을 브레인스토밍하고, 완전한 랜딩 페이지를 설계 및 빌드할 수 있습니다 — 아이디어부터 제품까지 ~17분 만에, "생성하고 기도하기" 대신 규율 있는 프로세스로.

배경

MOBA 게임 **"The Ended World"**의 미니 게임 룰렛 (spin-to-win) 기능을 위한 캠페인을 런칭해야 합니다 — 게임은 이미 출시되었고 안정적인 플레이어 수를 보유하고 있습니다. 필요한 것은:

캠페인 전용 랜딩 페이지, 포스트 아포칼립스 게임에 맞는 dark & epic 톤
독점 한정판 히어로 스킨 하이라이트
CTA "게임 다운로드" → App Store / Google Play 연결
팀에 개발자가 없음 — AI가 전부 빌드해야 함

도구:

AI 코딩 에이전트 (Claude Code) + Superpowers
Skill: Brainstorming, UI/UX Pro Max, Writing Plans, Subagent-Driven Development
Tech: HTML/CSS/JS 순수 — 프레임워크 불필요

배울 수 있는 것

Brainstorming skill — AI가 한 번에 하나씩 질문하여 요구사항을 명확히 파악
UI/UX Pro Max skill — 프로젝트에 적합한 디자인 인텔리전스 (컬러 팔레트, 타이포그래피, 레이아웃 패턴) 탐색
Writing Plans skill — 구체적인 task별 상세 implementation plan 생성
Subagent-Driven Development — 여러 agent를 병렬 dispatch하여 구현 속도 향상
자동 Code Review — 완료 후 코드 품질 검사

1단계: Brainstorming — 요구사항 탐색

AI에게 말합니다:

"MOBA 게임 'The Ended World'의 미니 게임 룰렛 기능을 위한 캠페인을 런칭해야 합니다. 랜딩 페이지를 함께 브레인스토밍합시다."

AI가 한 번에 하나씩 질문합니다 (7개):

AI가 서두르지 않고 한 번에 하나씩 질문하여 컨텍스트를 정확히 파악합니다:

질문 1 — 게임 단계:

"게임은 어느 단계이고 주요 타겟 플레이어는 누구인가요?"

A. 이미 출시, 안정적인 플레이어 수 보유

B. 방금 출시

C. Pre-launch/beta

D. 기타

답변: "A"

질문 2 — 미니 게임 메커니즘:

"룰렛 기능은 어떻게 작동하나요?"

A. Spin-to-win 클래식 — 회전하여 랜덤 보상 수령

B. 포인트/토큰을 모아서 회전

C. 시즌/이벤트별 룰렛

D. 복합

답변: "A"

질문 3 — 랜딩 페이지 목표:

"주요 목표는 무엇인가요?"

A. 하이프 & 공지 생성

B. 사전 등록 수집

C. 웹에서 직접 플레이

D. 복합

답변: "A"

(질문 4-7에서 AI가 유사한 A/B/C/D 선택지로 계속 질문합니다:)

질문 4 — 비주얼 스타일: A 선택 — Dark & epic, 어두운 톤, 네온/글로우, 포스트 아포칼립스

질문 5 — 보상: A 선택 — 독점 한정판 히어로 스킨

질문 6 — 기술 스택: A 선택 — HTML/CSS/JS 순수

질문 7 — CTA: B 선택 — 아직 게임이 없는 사용자의 다운로드에 초점을 맞춘 "게임 다운로드" (App Store / Google Play), 이미 게임이 있는 사용자를 위한 "지금 플레이" 대신. 이것은 전략적 결정입니다: 신규 사용자 유입을 우선시합니다.

AI가 종합하여 3가지 approach를 제안합니다:

충분한 정보를 수집한 후, AI가 3가지 방향을 제안합니다:

Approach	설명	장점	단점
A. "The Wheel of Fate" — Single-page Cinematic (권장)	긴 스크롤 페이지, 각 섹션이 스크롤 애니메이션으로 하나의 "영화 장면"	몰입감, 에픽, 스토리텔링 용이	애니메이션이 더 복잡
B. "Neon Arena" — Hero-focused Compact	짧고 간결한 페이지, 룰렛 + 네온이 있는 큰 히어로 섹션 중심	빠른 로드, 모바일 효율적	"와우 팩터" 적음
C. "Apocalypse Spin" — Interactive Showcase	룰렛 데모 시뮬레이션, 스크롤 시 각 보상 슬롯으로 줌인	인터랙티브, 호기심 유발	가장 복잡

선택: Approach A — "The Wheel of Fate"

좋은 점: AI가 모든 질문을 한꺼번에 하지 않습니다. 각 답변이 AI가 다음 질문을 조정하는 데 도움이 됩니다. 그리고 AI가 장단점 분석이 포함된 여러 옵션을 제시하여 스스로 결정하는 것이 아니라 여러분이 선택합니다.

2단계: 디자인 — 컬러 팔레트, 타이포그래피 & 페이지 구조

AI가 UI/UX Pro Max skill을 결합합니다:

AI가 적합한 디자인 인텔리전스를 자동으로 검색합니다: 게이밍 MOBA, dark epic, post-apocalyptic, neon glow.

컬러 팔레트 — "Neon Apocalypse":

역할	Hex	설명
Background	`#0F0F23`	Deep dark — 어두운 메인 배경
Primary	`#7C3AED`	Violet neon — 룰렛 메인 색상
Secondary	`#00FFFF`	Cyan neon — 액센트, 글로우 이펙트
CTA	`#F43F5E`	Rose 레드 — "게임 다운로드" 버튼 강조
Text	`#E2E8F0`	Light gray — 어두운 배경에서 읽기 쉬움
Gold accent	`#FFD700`	골드 — 스킨 보상 하이라이트

타이포그래피:

Heading: Russo One — 볼드, 게이밍 느낌, 대문자
Body: Chakra Petch — 읽기 쉬우면서 sci-fi/게이밍 분위기 유지

페이지 구조 — 6 Sections Cinematic Scroll:

#	Section	목적	효과
1	Hero — "The Wheel Awaits"	시선 끌기	애니메이션 룰렛, 파티클 이펙트, 네온 글로우 펄싱
2	Storyline — "Fate Calls"	룰렛 로어 전달	스크롤 시 텍스트 페이드인, 패럴랙스 배경
3	How It Works	3단계 플레이 방법 설명	아이콘 스텝 reveal 애니메이션
4	Rewards Showcase	독점 스킨 하이라이트	hover 글로우가 있는 카드 그리드, Legendary에 골드 쉬머
5	Countdown/Urgency	FOMO 생성 — 기간 한정 이벤트	카운트다운 타이머 애니메이션
6	CTA Final — "Claim Your Fate"	전환 — 게임 다운로드 유도	글로우가 있는 큰 CTA 버튼, App Store/Google Play 링크

고정 요소: 상단에 게임 로고 + 작은 "게임 다운로드" 버튼이 있는 얇은 Navbar (스크롤 시 항상 표시).

Visual Companion: AI가 브라우저 (localhost)에서 컬러 팔레트, 타이포그래피, 와이어프레임 페이지 구조의 프리뷰를 직접 보여줍니다 — 텍스트를 읽는 것보다 훨씬 시각화하기 쉽습니다.

3단계: Design Spec & Implementation Plan

AI가 Design Spec을 작성합니다:

디자인을 승인한 후, AI가 docs/superpowers/specs/에 완전한 design spec document를 종합합니다. Spec은 별도의 reviewer agent가 자동 리뷰합니다.

Spec 리뷰 결과: 3가지 작은 제안과 함께 Approved (blocking 아님):

Countdown은 이벤트 종료일 기본값 설정 필요 (예: 배포 후 14일)
아이콘 라이브러리 명확화 필요 (SVG 커스텀 또는 Font Awesome)
Particles: 파일 구조에 particles.js가 있으므로 JS 기반으로 확인

AI가 Implementation Plan을 작성합니다 (11 tasks):

# Wheel of Fate Landing Page — Implementation Plan

**Architecture:** 6개 스크롤 애니메이션 섹션이 있는 정적 HTML/CSS/JS 페이지.
CSS가 비주얼 스타일링 처리 (네온 글로우, 다크 테마, 반응형).
JS가 스크롤 트리거 애니메이션 (Intersection Observer),
캔버스 기반 파티클 시스템, 카운트다운 타이머 처리.

## Tasks:
1. Project Scaffold & Design System CSS
2. Sticky Navbar
3. Hero Section + Spinning Wheel SVG
4. Storyline Section
5. How It Works (3 steps)
6. Rewards Showcase (card grid)
7. Countdown Timer + JS
8. CTA Final + Footer
9. Particle Effects (Canvas)
10. Scroll Animations + Navbar Show/Hide
11. Responsive & Accessibility Polish

Plan도 자동 리뷰 — 2가지 작은 참고와 함께 Approved:

실제 스킨 이미지가 있으면 loading="lazy" 추가 기억
Task 11에서 git add -A 대신 구체적 git add 사용

4단계: 구현 — Subagent-Driven Development

AI가 각 task를 별도 agent에 dispatch합니다:

순차적으로 코딩하는 대신, AI가 Subagent-Driven Development를 사용합니다 — 각 task가 독립적인 agent에게 할당됩니다:

Task	Agent	시간	Commit
1. Scaffold & Design System	Agent 1	~1m	`fc24707`
2. Sticky Navbar	Agent 2	~36s	`00fbae5`
3. Hero Section	Agent 3	~50s	`8cae0a5`
4. Storyline	Agent 4	~42s	`e150e17`
5. How It Works	Agent 5	~46s	`77b7624`
6. Rewards Showcase	Agent 6	~54s	`1009a42`
7. Countdown Timer	Agent 7	~58s	`d4d61f9`
8. CTA Final + Footer	Agent 8	~1m	`5ef6e78`
9. Particle Effects	Agent 9	~36s	`54c7749`
10. Scroll Animations	Agent 10	~36s	`68829fc`
11. Polish	Agent 11	~1m30s	`dd53c9a`

Task 9과 10은 병렬 실행 — 별도의 JS 파일을 생성하므로 서로 의존하지 않습니다.

각 task = 1개 커밋. 필요하면 쉽게 롤백, 각 부분 쉽게 리뷰.

5단계: Code Review & 수정

AI가 최종 code reviewer를 dispatch합니다:

11개 task 완료 후, AI가 자동으로 전체 구현 code review를 실행합니다.

결과: 수정이 필요한 1가지 중요 이슈와 함께 Approved:

이슈	설명	수정
Media query 순서	태블릿 breakpoint `(min-width: 768px)`가 `max-width` 없이 Desktop까지 override	`and (max-width: 1023px)` 추가
Cursor 오해 소지	rewards card에 `cursor: pointer`가 있지만 card는 클릭 불가	`cursor: pointer` 제거

AI가 바로 수정하고 커밋: 15cc895

AI가 polish 과정에서 자체 발견한 개선사항:

카운트다운 타이머에 시간 종료 시 clearInterval (메모리 누수 방지)
파티클 시스템에 resize 디바운스 (윈도우 리사이즈 시 렉 방지)
카운트다운에 aria-live (스크린 리더 지원)
navbar CTA에 44px 터치 타겟 (모바일 접근성 표준)

최종 결과

AI와 ~17분 작업 후, 다음을 확보합니다:

산출물	상태
완전한 디자인 spec	Approved
Implementation plan (11 tasks)	Approved
완전한 랜딩 페이지 (HTML/CSS/JS)	Done — 12개 커밋
"Neon Apocalypse" 컬러 팔레트	6가지 색상, 2가지 폰트
6 sections cinematic scroll	애니메이션, 반응형
Particle effects (Canvas)	성능 최적화
카운트다운 타이머	접근성, 자동 정지
Code review & 수정	2가지 이슈 수정

총계: 12개 커밋, 브레인스토밍부터 완전한 랜딩 페이지까지.

적용된 Superpowers 원칙

원칙	적용 방법
먼저 Brainstorming	디자인 전에 요구사항을 정확히 파악하기 위한 7가지 순차 질문
UI/UX Pro Max	추측 대신 적합한 디자인 인텔리전스 탐색
Structured plans	Design spec → Implementation plan → Review → Execute
Subagent-Driven	각 task = 1개 agent, 독립적인 task는 병렬 실행
자동 리뷰	Spec 리뷰, plan 리뷰, code review 자동화
YAGNI	캠페인 페이지에 프레임워크 불필요 — HTML/CSS/JS 순수

마케팅/게임 팀을 위한 팁

Brainstorming에 구체적으로 답하세요 — AI가 한 번에 하나씩 질문하는 데는 이유가 있습니다. 답변이 명확할수록 결과가 더 적합합니다. 서두르지 마세요.
Visual Companion을 활용하세요 — AI가 브라우저에서 프리뷰를 보여줄 수 있습니다. 시각적 목업을 보면 텍스트를 읽는 것보다 훨씬 빠르게 결정할 수 있습니다.
리뷰 프로세스를 신뢰하세요 — AI가 spec, plan, code를 자동 리뷰합니다. 하지만 최종 산출물은 직접 확인해야 합니다 — AI가 좋은 틀을 만들지만, 브랜드 보이스에는 사람의 손길이 필요합니다.
각 task = 1개 커밋 — 어떤 섹션이 마음에 들지 않으면, 나머지에 영향을 주지 않고 쉽게 롤백할 수 있습니다.
코드를 알 필요가 없습니다 — 원하는 것이 무엇인지만 알면 됩니다. AI가 모든 기술적 결정 (컬러 시스템, 반응형 breakpoints, 접근성, 애니메이션 성능)을 처리합니다.

핵심: "게임 캠페인용 랜딩 페이지가 필요하다"는 아이디어에서 6 sections 애니메이션, 파티클 이펙트, 카운트다운 타이머가 있는 완전한 제품까지 — 모두 ~17분 만에. Superpowers가 AI를 "코드 생성 도구"에서 "프로세스가 있는 팀"으로 변환합니다: brainstorm → design → plan → implement → review.