game-fe-agent/skills/markup-promotion/SKILL.md

name, description

name	description
markup-promotion	프로모션/랜딩 페이지용 표준 마크업을 생성합니다. 캠페인 유형별 섹션 템플릿(히어로, 특징, CTA, 이벤트 일정 등)을 제공하고 반응형·접근성·SEO 메타를 일관되게 적용합니다. 다음 상황에서 반드시 사용하세요: - "프로모션 페이지 만들어줘", "랜딩 페이지 마크업해줘" - "이벤트 페이지 퍼블리싱", "캠페인 HTML 만들어줘" - 반복적인 프로모션 구조를 빠르게 구현해야 할 때

프로모션 마크업 가이드 (markup-promotion)

캠페인 / 이벤트 / 랜딩 페이지의 표준 섹션 구조를 자동 생성합니다.

언제 사용하는가

• 신규 프로모션/이벤트 랜딩 페이지를 제작할 때
• 기존 캠페인 구조를 재사용해 빠르게 개발할 때
• 팀 표준 프로모션 레이아웃이 필요할 때

입력

• 캠페인 명칭, 기간, 주요 메시지
• 포함할 섹션 목록 (없으면 기본 구성으로 제안)
• 이미지/에셋 경로 또는 플레이스홀더 여부
• 다국어 지원 여부

---

작업 순서

Phase 1: 캠페인 유형 분석

1. 제공된 정보에서 아래 유형을 판별한다.

   유형	특징
   이벤트	기간, 참여 조건, CTA 버튼
   상품 출시	제품 특징, 스펙, 구매 링크
   신규 서비스	혜택 강조, 가입 유도
   콘텐츠/미디어	영상/갤러리 중심, SNS 공유

2. 필요한 섹션을 제안한다. 사용자가 별도 지정하지 않으면 기본 구성 사용.

기본 섹션 구성:

Hero → 특징/혜택 → 이벤트 규칙/일정 → FAQ → CTA → Footer

Phase 2: 섹션별 마크업 생성

각 섹션은 독립 Vue 컴포넌트로 작성한다.

Hero 섹션

<section class="relative w-full [height] bg-[color] ...">
  <div class="...">
    <h1 class="...">{{ title }}</h1>
    <p class="...">{{ description }}</p>
    <a :href="ctaLink" class="...">{{ ctaText }}</a>
  </div>
</section>

특징/혜택 섹션

<section aria-labelledby="features-heading">
  <h2 id="features-heading" class="...">{{ heading }}</h2>
  <ul class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <li v-for="item in features" :key="item.id" class="...">
      ...
    </li>
  </ul>
</section>

CTA 섹션

• 버튼 타입: <a> (외부 링크) 또는 <NuxtLink> (내부 라우팅)
• aria-label로 버튼 목적 명시

Phase 3: 반응형 + SEO + 접근성

반응형: 모바일 우선 (base → md: → lg:)

SEO 메타 (Nuxt useSeoMeta):

useSeoMeta({
  title: '캠페인명 | 브랜드명',
  description: '캠페인 한 줄 설명',
  ogTitle: '...',
  ogImage: '이미지 URL',
})

접근성:

• 이미지 alt 텍스트 (장식용이면 alt="")
• 섹션 제목 계층 (h1 → h2 → h3)
• 카운트다운 타이머: aria-live="polite"

Phase 4: 다국어 처리

다국어 지원 시 i18n 키로 텍스트 분리:

<h1>{{ $t('HERO-title') }}</h1>

키 명명은 plan-translation-generator 스킬의 카테고리 가이드 참조.

---

출력 형식

## 프로모션 마크업: <캠페인명>

### 섹션 구성
1. Hero
2. 특징/혜택
3. CTA

### 파일 구조
pages/promotion/<slug>.vue
components/promotion/
  ├── PromoHero.vue
  ├── PromoFeatures.vue
  └── PromoCta.vue

### 코드
[각 컴포넌트 코드]

### 체크리스트
- [ ] 이미지 alt 텍스트 확정
- [ ] CTA 링크 URL 확정
- [ ] useSeoMeta 값 확정