5c9b13ed19
- Marked shrimp_data subproject as dirty - Added pre-tool hook configuration to settings.local.json
831 lines
52 KiB
HTML
831 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Nuxt FE AI 표준화 로드맵 v1.1</title>
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--nuxt-green: #00DC82;
|
||
--nuxt-green-dark: #00b368;
|
||
--blue: #1A56DB;
|
||
--blue-light: #EFF6FF;
|
||
--slate-900: #0F172A;
|
||
--slate-800: #1E293B;
|
||
--slate-700: #334155;
|
||
--slate-600: #475569;
|
||
--slate-500: #64748B;
|
||
--slate-400: #94A3B8;
|
||
--slate-300: #CBD5E1;
|
||
--slate-200: #E2E8F0;
|
||
--slate-100: #F1F5F9;
|
||
--slate-50: #F8FAFC;
|
||
--emerald-50: #ECFDF5;
|
||
--emerald-100: #D1FAE5;
|
||
--emerald-600: #059669;
|
||
--amber-50: #FFFBEB;
|
||
--amber-600: #D97706;
|
||
--red-50: #FEF2F2;
|
||
--red-600: #DC2626;
|
||
--purple: #7C3AED;
|
||
--purple-light: #F5F3FF;
|
||
--purple-100: #EDE9FE;
|
||
--white: #FFFFFF;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
||
color: var(--slate-800);
|
||
background: var(--white);
|
||
line-height: 1.7;
|
||
font-size: 15px;
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
padding: 40px 32px 80px;
|
||
}
|
||
|
||
/* ── Cover ── */
|
||
.cover { padding: 48px 0 40px; border-bottom: 3px solid var(--nuxt-green); margin-bottom: 48px; }
|
||
.cover-badge { display: inline-block; background: var(--nuxt-green); color: var(--slate-900); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; margin-bottom: 20px; }
|
||
.cover h1 { font-size: 36px; font-weight: 800; color: var(--slate-900); line-height: 1.2; margin-bottom: 8px; }
|
||
.cover h1 span { color: var(--nuxt-green-dark); }
|
||
.cover .subtitle { font-size: 17px; color: var(--slate-500); margin-bottom: 24px; }
|
||
.cover-meta { display: flex; gap: 24px; font-size: 13px; color: var(--slate-400); }
|
||
.cover-meta span { display: flex; align-items: center; gap: 6px; }
|
||
|
||
/* ── TOC ── */
|
||
.toc { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 8px; padding: 28px 32px; margin-bottom: 48px; }
|
||
.toc h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-400); margin-bottom: 16px; }
|
||
.toc ol { list-style: none; counter-reset: toc; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
|
||
.toc li { counter-increment: toc; font-size: 14px; line-height: 1.6; }
|
||
.toc li::before { content: "0" counter(toc) "."; font-weight: 700; color: var(--nuxt-green-dark); margin-right: 8px; font-variant-numeric: tabular-nums; }
|
||
.toc li:nth-child(n+10)::before { content: counter(toc) "."; }
|
||
.toc a { color: var(--slate-700); text-decoration: none; }
|
||
.toc a:hover { color: var(--blue); text-decoration: underline; }
|
||
|
||
/* ── Section Headers ── */
|
||
.section-header { display: flex; align-items: center; gap: 16px; margin: 56px 0 24px; padding-bottom: 12px; border-bottom: 2px solid var(--nuxt-green); }
|
||
.section-num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--nuxt-green); color: var(--slate-900); font-size: 16px; font-weight: 800; border-radius: 8px; flex-shrink: 0; }
|
||
.section-header h2 { font-size: 22px; font-weight: 700; color: var(--slate-900); line-height: 1.3; }
|
||
.section-header h2 small { display: block; font-size: 13px; font-weight: 500; color: var(--slate-400); margin-top: 2px; }
|
||
|
||
/* ── Sub headings ── */
|
||
h3 { font-size: 17px; font-weight: 700; color: var(--blue); margin: 32px 0 12px; padding-left: 12px; border-left: 3px solid var(--blue); }
|
||
h4 { font-size: 15px; font-weight: 700; color: var(--slate-700); margin: 24px 0 8px; }
|
||
|
||
p { margin-bottom: 14px; color: var(--slate-600); }
|
||
p strong { color: var(--slate-800); }
|
||
|
||
/* ── Tables ── */
|
||
table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
|
||
thead th { background: var(--slate-800); color: var(--white); padding: 10px 14px; text-align: left; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
|
||
thead th:first-child { border-radius: 6px 0 0 0; }
|
||
thead th:last-child { border-radius: 0 6px 0 0; }
|
||
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--slate-200); color: var(--slate-700); vertical-align: top; }
|
||
tbody tr:nth-child(even) td { background: var(--slate-50); }
|
||
tbody tr:hover td { background: var(--blue-light); }
|
||
table.green thead th { background: var(--emerald-600); }
|
||
table.purple thead th { background: var(--purple); }
|
||
|
||
/* ── Code / Tree blocks ── */
|
||
.code-block { background: var(--slate-900); color: #E2E8F0; border-radius: 8px; padding: 20px 24px; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.7; overflow-x: auto; margin: 16px 0 24px; position: relative; white-space: pre; }
|
||
.code-block .label { position: absolute; top: 8px; right: 12px; font-size: 10px; font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Pretendard', sans-serif; }
|
||
.code-block .comment { color: var(--slate-500); }
|
||
.code-block .folder { color: var(--nuxt-green); font-weight: 600; }
|
||
.code-block .file { color: #93C5FD; }
|
||
.code-block .skill-file { color: #FDE68A; font-weight: 600; }
|
||
|
||
/* ── Skill Cards ── */
|
||
.skill-card { border: 1px solid var(--slate-200); border-left: 4px solid var(--nuxt-green); border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 16px 0 24px; background: var(--emerald-50); }
|
||
.skill-card.perf { border-left-color: var(--amber-600); background: var(--amber-50); }
|
||
.skill-card.seo { border-left-color: var(--purple); background: var(--purple-light); }
|
||
.skill-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
|
||
.skill-card-name { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; color: var(--slate-900); }
|
||
.skill-card-trigger { font-size: 11px; font-weight: 600; background: var(--nuxt-green); color: var(--slate-900); padding: 2px 8px; border-radius: 4px; }
|
||
.skill-card-trigger.perf { background: #FDE68A; }
|
||
.skill-card-trigger.seo { background: var(--purple-100); color: var(--purple); }
|
||
.skill-card p { font-size: 14px; color: var(--slate-600); margin-bottom: 8px; }
|
||
.skill-card .example { font-size: 13px; color: var(--slate-500); font-style: italic; padding-left: 12px; border-left: 2px solid var(--slate-300); }
|
||
|
||
/* ── Prompt boxes ── */
|
||
.prompt-box { border: 1px solid var(--slate-200); border-top: 3px solid var(--blue); border-radius: 0 0 8px 8px; background: var(--blue-light); padding: 20px 24px; margin: 16px 0 24px; }
|
||
.prompt-box .prompt-title { font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
|
||
.prompt-box pre { font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.65; color: var(--slate-700); white-space: pre-wrap; word-break: break-word; }
|
||
|
||
/* ── Lists ── */
|
||
ul.checklist { list-style: none; margin: 12px 0 20px; padding: 0; }
|
||
ul.checklist li { padding: 6px 0 6px 28px; position: relative; font-size: 14px; color: var(--slate-700); }
|
||
ul.checklist li::before { content: "✓"; position: absolute; left: 4px; color: var(--emerald-600); font-weight: 700; }
|
||
ol.numbered { margin: 12px 0 20px; padding-left: 24px; }
|
||
ol.numbered li { padding: 4px 0; font-size: 14px; color: var(--slate-700); }
|
||
|
||
/* ── Phase tags ── */
|
||
.phase-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: 0.03em; }
|
||
.phase-tag.plan { background: #DBEAFE; color: #1E40AF; }
|
||
.phase-tag.design { background: var(--emerald-100); color: var(--emerald-600); }
|
||
.phase-tag.dev { background: #E0E7FF; color: #4338CA; }
|
||
.phase-tag.verify { background: #FEF3C7; color: var(--amber-600); }
|
||
.phase-tag.seo { background: var(--purple-100); color: var(--purple); }
|
||
|
||
/* ── Callouts ── */
|
||
.callout { border-radius: 8px; padding: 16px 20px; margin: 16px 0 24px; font-size: 14px; display: flex; gap: 12px; align-items: flex-start; }
|
||
.callout-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
|
||
.callout.info { background: var(--blue-light); border: 1px solid #BFDBFE; }
|
||
.callout.tip { background: var(--emerald-50); border: 1px solid var(--emerald-100); }
|
||
.callout.warn { background: var(--amber-50); border: 1px solid #FDE68A; }
|
||
.callout.purple { background: var(--purple-light); border: 1px solid var(--purple-100); }
|
||
|
||
hr { border: none; height: 1px; background: var(--slate-200); margin: 40px 0; }
|
||
|
||
/* ── Comparison / Layered blocks ── */
|
||
.layer-stack { display: flex; flex-direction: column; gap: 0; margin: 16px 0 24px; }
|
||
.layer { padding: 14px 20px; font-size: 14px; }
|
||
.layer:first-child { border-radius: 8px 8px 0 0; }
|
||
.layer:last-child { border-radius: 0 0 8px 8px; }
|
||
.layer strong { font-size: 13px; letter-spacing: 0.02em; }
|
||
.layer.l-seo { background: #DBEAFE; border: 1px solid #BFDBFE; }
|
||
.layer.l-aeo { background: var(--emerald-50); border: 1px solid var(--emerald-100); border-top: none; }
|
||
.layer.l-geo { background: var(--purple-light); border: 1px solid var(--purple-100); border-top: none; }
|
||
|
||
/* ── KPI ── */
|
||
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 24px; }
|
||
.kpi-card { border: 1px solid var(--slate-200); border-radius: 8px; padding: 20px; text-align: center; }
|
||
.kpi-card .label { font-size: 12px; color: var(--slate-500); margin-bottom: 8px; }
|
||
.kpi-card .before { font-size: 20px; font-weight: 700; color: var(--slate-400); }
|
||
.kpi-card .arrow { font-size: 16px; color: var(--nuxt-green-dark); margin: 4px 0; }
|
||
.kpi-card .after { font-size: 24px; font-weight: 800; color: var(--nuxt-green-dark); }
|
||
|
||
/* ── Changed badge ── */
|
||
.changed { display: inline-block; font-size: 10px; font-weight: 700; background: var(--red-50); color: var(--red-600); border: 1px solid #FECACA; padding: 1px 6px; border-radius: 3px; margin-left: 8px; vertical-align: middle; letter-spacing: 0.03em; }
|
||
.new-badge { display: inline-block; font-size: 10px; font-weight: 700; background: var(--purple-light); color: var(--purple); border: 1px solid var(--purple-100); padding: 1px 6px; border-radius: 3px; margin-left: 8px; vertical-align: middle; letter-spacing: 0.03em; }
|
||
|
||
@media print { body { max-width: 100%; padding: 20px; } .section-header { break-after: avoid; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ════════════════════ COVER ════════════════════ -->
|
||
<div class="cover">
|
||
<div class="cover-badge">퍼블리싱웹 FE Wiki</div>
|
||
<h1>Nuxt FE AI <span>Standardization</span></h1>
|
||
<p class="subtitle">Claude Code Skills 기반 지능형 업무 매뉴얼 — FE 개발 프로세스 표준화 로드맵</p>
|
||
<div class="cover-meta">
|
||
<span>📋 Version 1.1</span>
|
||
<span>📅 2026.03.30</span>
|
||
<span>👥 퍼블리싱웹 FE </span>
|
||
<span>🔒 팀 내부 공유용</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════ TOC ════════════════════ -->
|
||
<div class="toc">
|
||
<h2>목차</h2>
|
||
<ol>
|
||
<li><a href="#sec1">개요 및 배경</a></li>
|
||
<li><a href="#sec2">전체 프로세스 Overview</a></li>
|
||
<li><a href="#sec3">Phase 1 — 요구사항 정의 및 플로우차트</a></li>
|
||
<li><a href="#sec4">Phase 2 — 마크업 & Tailwind 컨벤션</a></li>
|
||
<li><a href="#sec5">Phase 3 — Nuxt 컴포넌트 아키텍처</a></li>
|
||
<li><a href="#sec6">Phase 4 — API 연동 & Pinia 상태관리</a></li>
|
||
<li><a href="#sec7">Phase 5 — 성능 최적화 (Core Web Vitals)</a></li>
|
||
<li><a href="#sec8">Phase 6 — SEO · GEO · AEO 검증</a></li>
|
||
<li><a href="#sec9">Claude Code Skills 통합 체계</a></li>
|
||
<li><a href="#sec10">실행 로드맵 & 일정</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- ════════════════════ 01 ════════════════════ -->
|
||
<div class="section-header" id="sec1">
|
||
<div class="section-num">01</div>
|
||
<h2>개요 및 배경 <small>왜 AI 기반 FE 표준화가 필요한가</small></h2>
|
||
</div>
|
||
|
||
<p>본 문서는 <strong>Nuxt 3 기반 FE 개발 프로세스</strong>를 Claude Code AI Skills과 통합하여 체계적인 표준화 체계를 구축하기 위한 로드맵입니다. 팀 전체가 동일한 품질과 패턴으로 개발할 수 있도록 각 단계별 <strong>지능형 업무 매뉴얼(Skills)</strong>을 정의합니다.</p>
|
||
|
||
<h3>1.1 프로젝트 목적</h3>
|
||
<ul class="checklist">
|
||
<li>개발 프로세스 전 단계(기획~검증)에 걸친 AI 어시스턴트 활용 체계 수립</li>
|
||
<li>Claude Code Skills을 활용한 반복 작업 자동화 및 코드 품질 균일화</li>
|
||
<li>신규 인력의 빠른 온보딩 및 팀 간 일관된 코드 컨벤션 유지</li>
|
||
<li>개발 생산성 향상과 동시에 코드 리뷰 품질 확보</li>
|
||
</ul>
|
||
|
||
<h3>1.2 Claude Code Skills이란?</h3>
|
||
<p>Claude Code Skills은 특정 작업 도메인에 대해 Claude가 전문적으로 수행할 수 있도록 구조화된 <strong>업무 지시서</strong>입니다. SKILL.md 파일을 중심으로, 트리거 조건·실행 절차·출력 포맷이 정의되어 있어 팀원 누구나 일관된 결과를 얻을 수 있습니다.</p>
|
||
|
||
<table>
|
||
<thead><tr><th>구성 요소</th><th>설명</th><th>예시</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>SKILL.md</strong></td><td>핵심 지시서 (500줄 이내 권장)</td><td>트리거, 절차, 출력 포맷 정의</td></tr>
|
||
<tr><td><strong>scripts/</strong></td><td>반복 작업 자동화 스크립트</td><td>컴포넌트 생성기, 린트 검사기</td></tr>
|
||
<tr><td><strong>references/</strong></td><td>도메인별 참조 문서</td><td>Nuxt 컨벤션, API 패턴 가이드</td></tr>
|
||
<tr><td><strong>assets/</strong></td><td>템플릿, 아이콘 등 리소스</td><td>컴포넌트 보일러플레이트</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<hr />
|
||
|
||
<!-- ════════════════════ 02 ════════════════════ -->
|
||
<div class="section-header" id="sec2">
|
||
<div class="section-num">02</div>
|
||
<h2>전체 프로세스 Overview <small>기획 → 디자인 → FE개발 → 검증 워크플로우</small></h2>
|
||
</div>
|
||
|
||
<p>FE 개발의 전체 라이프사이클을 <strong>4개 대단계, 6개 세부 Phase</strong>로 구분하고, 각 Phase마다 전용 Claude Code Skill을 배치합니다.</p>
|
||
|
||
<div class="callout warn">
|
||
<span class="callout-icon">🔄</span>
|
||
<div><strong>v1.1 변경사항:</strong> 기존 Phase 5(성능+SEO)를 <strong>Phase 5(성능)</strong>과 <strong>Phase 6(SEO·GEO·AEO)</strong>로 분리했습니다. SEO Skill에 Generative Engine Optimization(GEO)과 Answer Engine Optimization(AEO)을 추가하여 AI 검색 시대에 대응합니다.</div>
|
||
</div>
|
||
|
||
<table>
|
||
<thead><tr><th>대단계</th><th>Phase</th><th>핵심 활동</th><th>Claude Skill</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><span class="phase-tag plan">기획</span></td><td>Phase 1</td><td>요구사항 정의, 플로우차트</td><td><code>nuxt-requirement-analyzer/SKILL.md<br>nuxt-requirement-analyzer/references/</code></td></tr>
|
||
<tr><td><span class="phase-tag design">디자인</span></td><td>Phase 2</td><td>HTML 마크업, Tailwind 컨벤션</td><td><code>markup/SKILL.md<br>markup/references/</code></td></tr>
|
||
<tr><td><span class="phase-tag "></span></td><td>Phase 2-1</td><td>프로모션 HTML 마크업</td><td><code>markup/promotion/SKILL.md<br>markup/promotion/references/</code></td></tr>
|
||
<tr><td><span class="phase-tag "></span></td><td>Phase 2-2</td><td>EDM HTML 마크업</td><td><code>markup/edm/SKILL.md<br>markup/edm/references/</code></td></tr>
|
||
<tr><td><span class="phase-tag dev">FE개발</span></td><td>Phase 3</td><td>Nuxt 컴포넌트 아키텍처</td><td><code>nuxt-component-architect<br>https://github.com/onmax/nuxt-skills/tree/main</code></td></tr>
|
||
<tr><td><span class="phase-tag "></span></td>
|
||
<td>Phase 3-1</td>
|
||
<td>Nuxt 공식문서 기반</td>
|
||
<td><code>
|
||
nuxt/SKILL.md<br>references/
|
||
<ul style="list-style: none;text-indent: 1rem;">
|
||
<li>server.md - API routes, server middleware</li>
|
||
<li>middleware.md - middleware, File-based routing</li>
|
||
<li>plugins.md - plugins, app lifecycle</li>
|
||
<li>nuxt-composables.md - Nuxt composables </li>
|
||
<li>nuxt-components.md - NuxtLink, NuxtImg, NuxtTime </li>
|
||
<li>nuxt-config.md - Config, modules, auto-imports, layers</li>
|
||
</ul>
|
||
</code></td>
|
||
</tr>
|
||
<tr><td><span class="phase-tag dev">FE개발</span></td><td>Phase 4</td><td>API 연동, Pinia 상태관리</td><td><code>nuxt-api-state-manager/SKILL.md<br>nuxt-api-state-manager/references/</code></td></tr>
|
||
<tr><td><span class="phase-tag verify">검증</span></td><td>Phase 5</td><td>성능 최적화 (CWV)</td><td><code>nuxt-perf-optimizer/SKILL.md<br>nuxt-perf-optimizer/references/</code> </td></tr>
|
||
<tr><td><span class="phase-tag seo">검증</span></td><td>Phase 6 </td><td>SEO · GEO · AEO 검증</td><td><code>nuxt-seo-geo/SKILL.md<br>nuxt-seo-geo/references/</code> </td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<hr />
|
||
|
||
<!-- ════════════════════ 03 ════════════════════ -->
|
||
<div class="section-header" id="sec3">
|
||
<div class="section-num">03</div>
|
||
<h2>Phase 1 — 요구사항 정의 및 플로우차트 <small>기획 단계에서 개발 가능한 형태로 변환</small></h2>
|
||
</div>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">nuxt-requirement-analyzer</span>
|
||
<span class="skill-card-trigger">Phase 1 · 기획</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> 요구사항, 기획서, 플로우차트, 화면정의서, 유저스토리</p>
|
||
<p>기획 문서를 분석하여 Nuxt 프로젝트에 적합한 구조화된 요구사항 명세(페이지 목록, 컴포넌트 트리, 라우팅 맵, 데이터 플로우)를 자동 생성합니다.</p>
|
||
<div class="example">"이 기획서를 분석해서 Nuxt 페이지 구조와 컴포넌트 목록을 뽑아줘"</div>
|
||
</div>
|
||
|
||
<h3>Skill 동작 절차</h3>
|
||
<ol class="numbered">
|
||
<li><strong>입력 분석</strong> — 기획서/PRD 문서를 파싱하여 기능 요구사항, 화면 목록, 사용자 플로우를 추출</li>
|
||
<li><strong>페이지 맵 생성</strong> — Nuxt의 pages/ 디렉토리 구조에 맞는 라우팅 맵을 자동 설계</li>
|
||
<li><strong>컴포넌트 트리 도출</strong> — Atomic Design 원칙에 따른 컴포넌트 분해</li>
|
||
<li><strong>데이터 플로우 정의</strong> — 각 페이지/컴포넌트별 필요 데이터, API 엔드포인트 매핑</li>
|
||
<li><strong>Mermaid 플로우차트 출력</strong> — 화면 전환 흐름, 조건 분기를 시각화</li>
|
||
</ol>
|
||
|
||
<div class="prompt-box">
|
||
<div class="prompt-title">💬 프롬프트 템플릿</div>
|
||
<pre>다음 기획서를 분석해서 Nuxt 3 프로젝트 구조를 설계해줘.
|
||
|
||
[기획서 첨부 또는 내용 붙여넣기]
|
||
|
||
출력 형식:
|
||
1. pages/ 디렉토리 라우팅 구조
|
||
2. components/ Atomic Design 기반 컴포넌트 트리
|
||
3. 각 페이지별 필요 API 엔드포인트 목록
|
||
4. Mermaid 플로우차트 (화면 전환 흐름)
|
||
5. composables/ 에 필요한 공통 로직 목록</pre>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- ════════════════════ 04 ════════════════════ -->
|
||
<div class="section-header" id="sec4">
|
||
<div class="section-num">04</div>
|
||
<h2>Phase 2 — 마크업 & Tailwind 컨벤션 <small>시멘틱 HTML 구조 확립 및 Tailwind CSS 스타일 표준화</small></h2>
|
||
</div>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">markup</span>
|
||
<span class="skill-card-trigger">Phase 2 · 디자인→마크업</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> 마크업, HTML 구조, 시멘틱, Tailwind, 클래스 순서, 접근성, ARIA, SFC 구조, 반응형</p>
|
||
<p>디자인 시안을 Nuxt 컴포넌트의 시멘틱 HTML + Tailwind CSS로 변환합니다. 4개 참조 문서(시멘틱 HTML, Tailwind 컨벤션, 접근성, Nuxt SFC 패턴)를 도메인별로 선택 로드합니다.</p>
|
||
<div class="example">"이 디자인을 시멘틱 마크업으로 변환하고 Tailwind 클래스를 적용해줘"</div>
|
||
</div>
|
||
|
||
<h3>HTML 시멘틱 태그 가이드</h3>
|
||
<table class="green">
|
||
<thead><tr><th>영역</th><th>시멘틱 태그</th><th>규칙</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>레이아웃</strong></td><td><header>, <nav>, <main>, <aside>, <footer></td><td>페이지 대구조 정의, div 남용 금지</td></tr>
|
||
<tr><td><strong>섹션</strong></td><td><section>, <article></td><td>의미 단위 그룹핑, aria-label 필수</td></tr>
|
||
<tr><td><strong>제목</strong></td><td><h1>~<h6></td><td>페이지당 h1 1개, 건너뛰기 금지</td></tr>
|
||
<tr><td><strong>목록</strong></td><td><ul>, <ol>, <dl></td><td>나열형 데이터는 반드시 리스트 태그</td></tr>
|
||
<tr><td><strong>폼</strong></td><td><form>, <fieldset>, <label></td><td>모든 input에 label 연결 필수</td></tr>
|
||
<tr><td><strong>인터랙티브</strong></td><td><button>, <a>, <dialog></td><td>클릭 가능 요소는 반드시 시멘틱 태그</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Tailwind 클래스 순서 컨벤션</h3>
|
||
<table>
|
||
<thead><tr><th>순서</th><th>카테고리</th><th>대표 클래스</th><th>기억법</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>1</strong></td><td>Layout</td><td>flex, grid, block, hidden</td><td>"어떻게 배치?"</td></tr>
|
||
<tr><td><strong>2</strong></td><td>Position</td><td>relative, absolute, fixed, z-*</td><td>"어디에 놓을까?"</td></tr>
|
||
<tr><td><strong>3</strong></td><td>Box Model</td><td>w-*, h-*, p-*, m-*, gap-*</td><td>"얼마나 크게?"</td></tr>
|
||
<tr><td><strong>4</strong></td><td>Typography</td><td>text-*, font-*, leading-*</td><td>"글자를 어떻게?"</td></tr>
|
||
<tr><td><strong>5</strong></td><td>Visual</td><td>bg-*, border-*, rounded-*, shadow-*</td><td>"어떻게 보이게?"</td></tr>
|
||
<tr><td><strong>6</strong></td><td>State</td><td>hover:*, focus:*, sm:*, md:*</td><td>"상태가 바뀌면?"</td></tr>
|
||
<tr><td><strong>7</strong></td><td>Motion</td><td>transition-*, duration-*, animate-*</td><td>"움직임은?"</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">markup/promotion</span>
|
||
<span class="skill-card-trigger">Phase 2-1 · 프로모션</span>
|
||
<span class="new-badge">NEW</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> 프로모션, 랜딩페이지, 이벤트 페이지, 프로모션 마크업, 캠페인 페이지</p>
|
||
<p>프로모션 및 랜딩페이지에 특화된 HTML 마크업을 생성합니다. 캠페인 성격에 맞는 시멘틱 구조, 반응형 레이아웃, CTA 배치 패턴을 포함합니다.</p>
|
||
<div class="example">"이 프로모션 디자인을 랜딩페이지 HTML 마크업으로 변환해줘"</div>
|
||
</div>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">markup/edm</span>
|
||
<span class="skill-card-trigger">Phase 2-2 · EDM</span>
|
||
<span class="new-badge">NEW</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> EDM, 이메일, 뉴스레터, 메일 템플릿, 이메일 마크업</p>
|
||
<p>EDM(Email Direct Marketing) 및 뉴스레터용 HTML 마크업을 생성합니다. 이메일 클라이언트 호환성, 테이블 기반 레이아웃, 인라인 스타일 패턴을 포함합니다.</p>
|
||
<div class="example">"이 디자인을 이메일 뉴스레터 HTML로 변환해줘"</div>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- ════════════════════ 05 ════════════════════ -->
|
||
<div class="section-header" id="sec5">
|
||
<div class="section-num">05</div>
|
||
<h2>Phase 3 — Nuxt 컴포넌트 아키텍처 <small>Nuxt 3 공식 가이드 기반 컴포넌트 설계 표준</small></h2>
|
||
</div>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">nuxt-component-architect</span>
|
||
<span class="skill-card-trigger">Phase 3 · FE개발</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> Nuxt 컴포넌트, 페이지, composable, 레이아웃, 미들웨어, 플러그인</p>
|
||
<p>Nuxt 3 공식 가이드를 기반으로 컴포넌트를 설계합니다. auto-import, composables 패턴, server/ 디렉토리 활용, 레이아웃 전략을 포함한 전체 아키텍처를 제안합니다.</p>
|
||
<div class="example">"이 기능을 Nuxt 3 Best Practice에 맞게 컴포넌트로 설계해줘"</div>
|
||
</div>
|
||
|
||
<h3>Phase 3-1 — Nuxt 공식문서 참조 구조 (references/)</h3>
|
||
<table>
|
||
<thead><tr><th>참조 파일</th><th>Nuxt 공홈 출처</th><th>로드 트리거</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>server.md</code></td><td>API routes, server middleware</td><td>서버 API, 미들웨어 작업 시</td></tr>
|
||
<tr><td><code>middleware.md</code></td><td>Middleware, File-based routing</td><td>미들웨어, 라우팅 설계 시</td></tr>
|
||
<tr><td><code>plugins.md</code></td><td>Plugins, app lifecycle</td><td>플러그인, 앱 라이프사이클 작업 시</td></tr>
|
||
<tr><td><code>nuxt-composables.md</code></td><td>Nuxt composables</td><td>composable 작성 시</td></tr>
|
||
<tr><td><code>nuxt-components.md</code></td><td>NuxtLink, NuxtImg, NuxtTime</td><td>Nuxt 내장 컴포넌트 사용 시</td></tr>
|
||
<tr><td><code>nuxt-config.md</code></td><td>Configuration, modules, auto-imports, layers</td><td>Nuxt 설정, 모듈 구성 시</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">nuxt</span>
|
||
<span class="skill-card-trigger">Phase 3-1 · Nuxt 공식문서</span>
|
||
<span class="new-badge">NEW</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> Nuxt 공식문서, Nuxt 가이드, Nuxt API, NuxtLink, NuxtImg, definePageMeta, useFetch, server/api</p>
|
||
<p>Nuxt 공식문서를 기반으로 Best Practice에 맞는 코드를 생성합니다. 6개 참조 문서(server, routing, middleware-plugins, composables, components, config)를 컨텍스트에 따라 선택적으로 로드합니다.</p>
|
||
<div class="example">"Nuxt 공식 가이드 기반으로 이 기능을 구현해줘"</div>
|
||
</div>
|
||
|
||
<h3>디렉토리 구조 표준</h3>
|
||
<div class="code-block">
|
||
<span class="label">project structure</span>
|
||
<span class="folder">project-root/</span>
|
||
├── app.vue <span class="comment"># 루트 컴포넌트</span>
|
||
├── nuxt.config.ts <span class="comment"># Nuxt 설정</span>
|
||
├── <span class="folder">pages/</span> <span class="comment"># 파일 기반 라우팅</span>
|
||
├── <span class="folder">components/</span> <span class="comment"># Auto-import 컴포넌트</span>
|
||
│ ├── <span class="folder">base/</span> <span class="comment"># Atoms (BaseButton, BaseInput)</span>
|
||
│ ├── <span class="folder">common/</span> <span class="comment"># Molecules (SearchBar, Card)</span>
|
||
│ └── <span class="folder">domain/</span> <span class="comment"># Organisms (ProductList)</span>
|
||
├── <span class="folder">composables/</span> <span class="comment"># Auto-import 로직</span>
|
||
├── <span class="folder">layouts/</span> <span class="comment"># 레이아웃 템플릿</span>
|
||
├── <span class="folder">middleware/</span> <span class="comment"># 라우트 미들웨어</span>
|
||
├── <span class="folder">plugins/</span> <span class="comment"># 플러그인</span>
|
||
├── <span class="folder">server/</span> <span class="comment"># 서버 API (Nitro)</span>
|
||
├── <span class="folder">stores/</span> <span class="comment"># Pinia 스토어</span>
|
||
├── <span class="folder">types/</span> <span class="comment"># TypeScript 타입</span>
|
||
└── <span class="folder">utils/</span> <span class="comment"># 유틸리티 함수</span>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- ════════════════════ 06 ════════════════════ -->
|
||
<div class="section-header" id="sec6">
|
||
<div class="section-num">06</div>
|
||
<h2>Phase 4 — API 연동 & Pinia 상태관리 <small>데이터 페칭 패턴과 전역 상태 설계 표준화</small></h2>
|
||
</div>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">nuxt-api-state-manager</span>
|
||
<span class="skill-card-trigger">Phase 4 · FE개발</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> API 연동, useFetch, useAsyncData, Pinia, 스토어, 상태관리, 에러 핸들링</p>
|
||
<p>Nuxt 3의 데이터 페칭 유틸리티와 Pinia 스토어를 조합한 표준 패턴을 생성합니다.</p>
|
||
<div class="example">"이 API를 Nuxt에서 연동하고 Pinia 스토어로 상태관리해줘"</div>
|
||
</div>
|
||
|
||
<h3>데이터 페칭 패턴 가이드</h3>
|
||
<table>
|
||
<thead><tr><th>패턴</th><th>사용 시점</th><th>특징</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong><code>useFetch()</code></strong></td><td>컴포넌트에서 직접 API 호출</td><td>SSR 지원, 자동 캐싱, key 기반 중복 방지</td></tr>
|
||
<tr><td><strong><code>useAsyncData()</code></strong></td><td>복잡한 데이터 변환 필요 시</td><td>커스텀 fetch 로직, transform 지원</td></tr>
|
||
<tr><td><strong><code>$fetch()</code></strong></td><td>이벤트 핸들러 내 API 호출</td><td>클라이언트 사이드만, SSR 미지원</td></tr>
|
||
<tr><td><strong><code>server/api/</code></strong></td><td>BFF 패턴, 서버 사이드 로직</td><td>Nitro 기반, API 키 보호</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Pinia 스토어 설계 규칙</h3>
|
||
<ul class="checklist">
|
||
<li>Setup Store 문법 사용 (Option Store 대비 composable 호환성 우수)</li>
|
||
<li>스토어 네이밍: use[Domain]Store (useAuthStore, useCartStore)</li>
|
||
<li>상태 최소화 원칙: 파생 가능한 값은 computed로 처리</li>
|
||
<li>Action에서 API 호출 금지: composable(useApi)에서 호출 후 결과만 저장</li>
|
||
<li>스토어 간 의존성 최소화: 순환 참조 금지</li>
|
||
</ul>
|
||
|
||
<hr />
|
||
|
||
<!-- ════════════════════ 07 — PERFORMANCE ════════════════════ -->
|
||
<div class="section-header" id="sec7">
|
||
<div class="section-num">07</div>
|
||
<h2>Phase 5 — 성능 최적화 <small>Core Web Vitals 달성 및 런타임 퍼포먼스 최적화</small></h2>
|
||
</div>
|
||
|
||
<p>기존 Phase 5에서 <strong>성능 최적화</strong> 영역만 분리하여 전담 Skill로 구성합니다. 번들 최적화, 이미지 처리, 캐싱, 렌더링 전략 등 <strong>런타임 퍼포먼스</strong>에 집중합니다.</p>
|
||
|
||
<div class="skill-card perf">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">nuxt-perf-optimizer</span>
|
||
<span class="skill-card-trigger perf">Phase 5 · 성능</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> 성능, 최적화, Lighthouse, Core Web Vitals, LCP, CLS, INP, 번들, 로딩 속도, 캐싱, lazy loading</p>
|
||
<p>Nuxt 3 프로젝트의 성능 병목을 분석하고 최적화합니다. 코드 스플리팅, 이미지 최적화, SSR/ISR 렌더링 전략, API 캐싱, Payload 최적화를 포함합니다.</p>
|
||
<div class="example">"이 페이지 LCP가 3초 넘는데 성능 최적화 방안 제시해줘"</div>
|
||
</div>
|
||
|
||
<h3>성능 최적화 체크리스트</h3>
|
||
<table>
|
||
<thead><tr><th>카테고리</th><th>최적화 항목</th><th>Nuxt 3 적용 방법</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>번들</strong></td><td>코드 스플리팅</td><td>defineAsyncComponent, lazy 접두사 컴포넌트</td></tr>
|
||
<tr><td><strong>번들</strong></td><td>트리 쉐이킹</td><td>nuxt.config의 build.transpile, 사이드이펙트 제거</td></tr>
|
||
<tr><td><strong>이미지</strong></td><td>NuxtImg</td><td><NuxtImg> sizes/format 자동 최적화</td></tr>
|
||
<tr><td><strong>이미지</strong></td><td>Lazy Loading</td><td>loading="lazy", NuxtImg placeholder</td></tr>
|
||
<tr><td><strong>네트워크</strong></td><td>API 캐싱</td><td>useFetch의 key, getCachedData</td></tr>
|
||
<tr><td><strong>네트워크</strong></td><td>서버 캐싱</td><td>routeRules의 swr, isr 설정</td></tr>
|
||
<tr><td><strong>렌더링</strong></td><td>SSR/SSG 전략</td><td>routeRules로 페이지별 렌더링 모드 지정</td></tr>
|
||
<tr><td><strong>렌더링</strong></td><td>Payload 최적화</td><td>useAsyncData의 transform으로 불필요 데이터 제거</td></tr>
|
||
<tr><td><strong>CWV</strong></td><td>LCP < 2.5s</td><td>critical CSS 인라인, 폰트 프리로드, hero 이미지 우선</td></tr>
|
||
<tr><td><strong>CWV</strong></td><td>CLS < 0.1</td><td>이미지 width/height 명시, 스켈레톤 UI, font-display: swap</td></tr>
|
||
<tr><td><strong>CWV</strong></td><td>INP < 200ms</td><td>이벤트 핸들러 최적화, 메인 스레드 블로킹 제거</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="prompt-box">
|
||
<div class="prompt-title">💬 프롬프트 템플릿</div>
|
||
<pre>이 Nuxt 3 프로젝트의 성능을 감사하고 최적화 방안을 제시해줘.
|
||
|
||
[프로젝트 경로 또는 주요 파일]
|
||
|
||
감사 범위:
|
||
- Core Web Vitals (LCP < 2.5s, CLS < 0.1, INP < 200ms)
|
||
- 번들 사이즈 분석 (analyze: true로 리포트 확인)
|
||
- 이미지 최적화 상태 (NuxtImg 활용 여부)
|
||
- SSR/SSG/ISR 렌더링 전략 적정성
|
||
- routeRules 캐싱 전략 검증
|
||
- 불필요한 클라이언트 JS hydration 확인</pre>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- ════════════════════ 08 — SEO · GEO · AEO ════════════════════ -->
|
||
<div class="section-header" id="sec8">
|
||
<div class="section-num">08</div>
|
||
<h2>Phase 6 — SEO · GEO · AEO 검증 <small>전통 검색 + AI 검색 + 답변 엔진 통합 최적화</small></h2>
|
||
</div>
|
||
|
||
<p>2026년 현재, 전통적 SEO만으로는 디지털 가시성을 확보할 수 없습니다. Gartner는 전통 검색 볼륨이 25% 감소할 것으로 전망하며, ChatGPT·Perplexity·Google AI Overview가 새로운 검색 채널로 부상하고 있습니다. 이 Skill은 <strong>SEO + GEO + AEO 3계층 최적화</strong>를 통합합니다.</p>
|
||
|
||
<h3>SEO · GEO · AEO 3계층 이해</h3>
|
||
|
||
<div class="layer-stack">
|
||
<div class="layer l-seo">
|
||
<strong>🔍 Layer 1 — SEO (Search Engine Optimization)</strong><br />
|
||
전통 검색엔진(Google, Bing) 결과 페이지에서 상위 노출. 메타태그, 구조화 데이터, 사이트맵, 기술적 SEO(Core Web Vitals, crawlability)가 핵심.
|
||
</div>
|
||
<div class="layer l-aeo">
|
||
<strong>💬 Layer 2 — AEO (Answer Engine Optimization)</strong><br />
|
||
Featured Snippet, Google AI Overview, 음성 검색 등 "직접 답변" 영역에 콘텐츠를 노출. FAQ 구조, 질문형 H2 헤딩, 간결한 정의 문장이 핵심.
|
||
</div>
|
||
<div class="layer l-geo">
|
||
<strong>🤖 Layer 3 — GEO (Generative Engine Optimization)</strong><br />
|
||
ChatGPT, Perplexity, Claude, Gemini 등 AI 생성형 답변에서 콘텐츠가 인용(citation)되도록 최적화. 통계 데이터, 전문가 인용, 구조화된 정보 블록, 원본 리서치가 핵심.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout purple">
|
||
<span class="callout-icon">💡</span>
|
||
<div><strong>3계층은 상호 보완적입니다.</strong> 탄탄한 SEO 기반 위에 AEO 구조를 얹고, GEO 최적화를 추가하는 것이 가장 효과적입니다. Princeton 연구에 따르면 GEO 최적화 기법(통계 인용, 출처 명시, 전문가 인용문)을 적용하면 AI 검색 가시성이 30~40% 향상됩니다.</div>
|
||
</div>
|
||
|
||
<div class="skill-card seo">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">nuxt-seo-geo</span>
|
||
<span class="skill-card-trigger seo">Phase 6 · SEO·GEO·AEO</span>
|
||
<span class="new-badge">NEW</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> SEO, 메타태그, 구조화 데이터, Schema.org, sitemap, OG태그, GEO, AI 검색, 인용 최적화, AEO, Featured Snippet, FAQ, 음성 검색, useSeoMeta, useSchemaOrg</p>
|
||
<p>Nuxt 3 프로젝트의 SEO·GEO·AEO를 3계층으로 감사하고 최적화합니다. 메타태그 자동화, JSON-LD 구조화 데이터, AI 인용 친화적 콘텐츠 구조, FAQ 스키마, OG 이미지 자동 생성을 포함합니다.</p>
|
||
<div class="example">"이 사이트의 SEO 메타태그, GEO 인용 최적화, AEO FAQ 구조를 검증해줘"</div>
|
||
</div>
|
||
|
||
<h3>Layer 1 — SEO 체크리스트</h3>
|
||
<table class="green">
|
||
<thead><tr><th>영역</th><th>점검 항목</th><th>Nuxt 3 구현</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>메타태그</strong></td><td>title, description, canonical, OG, Twitter Card</td><td>useSeoMeta() 전역 + 페이지별 오버라이드</td></tr>
|
||
<tr><td><strong>구조화 데이터</strong></td><td>JSON-LD Schema.org (Article, Product, FAQ 등)</td><td>@nuxtjs/schema-org 모듈, useSchemaOrg()</td></tr>
|
||
<tr><td><strong>사이트맵</strong></td><td>동적 sitemap.xml 생성</td><td>@nuxtjs/sitemap 모듈</td></tr>
|
||
<tr><td><strong>robots</strong></td><td>robots.txt + 크롤 제어</td><td>@nuxtjs/robots 모듈 또는 server/routes</td></tr>
|
||
<tr><td><strong>OG 이미지</strong></td><td>페이지별 동적 OG 이미지</td><td>nuxt-og-image 또는 Satori 기반 server/api</td></tr>
|
||
<tr><td><strong>Canonical</strong></td><td>중복 URL 방지</td><td>useHead({ link: [{ rel: 'canonical' }] })</td></tr>
|
||
<tr><td><strong>SSR</strong></td><td>검색엔진 크롤러 SSR 보장</td><td>routeRules로 SSR/ISR 모드 지정</td></tr>
|
||
<tr><td><strong>i18n</strong></td><td>hreflang 태그, lang 속성</td><td>@nuxtjs/i18n 모듈</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Layer 2 — AEO 체크리스트</h3>
|
||
<table>
|
||
<thead><tr><th>영역</th><th>점검 항목</th><th>구현 전략</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>질문형 구조</strong></td><td>H2를 실제 사용자 질문 형태로</td><td>"제품 가격은?" 대신 "이 제품의 가격은 얼마인가요?"</td></tr>
|
||
<tr><td><strong>즉답 패턴</strong></td><td>질문 직후 200자 이내 직접 답변</td><td>TLDR-first 콘텐츠 구조 적용</td></tr>
|
||
<tr><td><strong>FAQ Schema</strong></td><td>FAQPage JSON-LD</td><td>useSchemaOrg([defineFAQPage(...)]) </td></tr>
|
||
<tr><td><strong>HowTo Schema</strong></td><td>단계별 가이드 구조화</td><td>useSchemaOrg([defineHowTo(...)]) </td></tr>
|
||
<tr><td><strong>Breadcrumb</strong></td><td>탐색 경로 구조화</td><td>useSchemaOrg([defineBreadcrumb(...)]) </td></tr>
|
||
<tr><td><strong>정의 문장</strong></td><td>핵심 용어의 명확한 정의 문장</td><td>"[용어]는 [정의]입니다" 패턴으로 시작</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Layer 3 — GEO 체크리스트</h3>
|
||
<table class="purple">
|
||
<thead><tr><th>영역</th><th>점검 항목</th><th>최적화 전략</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>통계 인용</strong></td><td>구체적 수치 데이터 포함</td><td>"매출 20% 증가" → AI가 인용할 확률 ↑</td></tr>
|
||
<tr><td><strong>출처 명시</strong></td><td>데이터·인사이트의 원본 출처 표기</td><td>신뢰도 향상 → AI 엔진이 선호</td></tr>
|
||
<tr><td><strong>전문가 인용</strong></td><td>업계 전문가의 직접 인용문</td><td>blockquote + 전문가 Schema 활용</td></tr>
|
||
<tr><td><strong>추출 가능한 블록</strong></td><td>독립적으로 의미가 완결되는 정보 단위</td><td>각 섹션이 독립적으로 인용 가능하도록 구성</td></tr>
|
||
<tr><td><strong>E-E-A-T 신호</strong></td><td>경험(Experience), 전문성, 권위, 신뢰</td><td>저자 프로필, 리뷰 날짜, 인증 배지</td></tr>
|
||
<tr><td><strong>최신성 유지</strong></td><td>정기적 콘텐츠 업데이트</td><td>AI 인용 콘텐츠의 50%가 13주 이내 게시된 것</td></tr>
|
||
<tr><td><strong>토픽 중심</strong></td><td>키워드 → 토픽 타겟팅 전환</td><td>주제를 포괄적으로 다루는 pillar 콘텐츠</td></tr>
|
||
<tr><td><strong>브랜드 언급</strong></td><td>웹 전체에서 브랜드 언급 확대</td><td>외부 인용, 리뷰, 포럼 활동</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>SEO 메타 자동화 패턴</h3>
|
||
<div class="prompt-box">
|
||
<div class="prompt-title">💬 useSeoMeta + useSchemaOrg 통합 패턴</div>
|
||
<pre>// composables/usePageSeo.ts — SEO·GEO 통합 메타 자동화
|
||
</pre>
|
||
</div>
|
||
|
||
<h3>GEO·AEO 감사 프롬프트</h3>
|
||
<div class="prompt-box">
|
||
<div class="prompt-title">💬 SEO + GEO + AEO 통합 감사 프롬프트</div>
|
||
<pre>이 Nuxt 3 프로젝트의 SEO·GEO·AEO를 3계층으로 감사해줘.
|
||
|
||
[프로젝트 경로 또는 주요 파일]
|
||
|
||
Layer 1 — SEO 감사:
|
||
- useSeoMeta 적용 완성도 (title, description, OG, canonical)
|
||
- JSON-LD 구조화 데이터 (Schema.org 타입 적정성)
|
||
- sitemap.xml, robots.txt 설정
|
||
- OG 이미지 동적 생성 여부
|
||
|
||
Layer 2 — AEO 감사:
|
||
- H2 헤딩이 질문형으로 작성되었는가
|
||
- 각 섹션이 질문 직후 즉답(200자 이내)을 제공하는가
|
||
- FAQPage, HowTo, Breadcrumb 스키마 적용 여부
|
||
|
||
Layer 3 — GEO 감사:
|
||
- 통계·수치 데이터가 출처와 함께 포함되었는가
|
||
- 각 콘텐츠 블록이 독립적으로 AI에 인용 가능한 구조인가
|
||
- 저자(Author) 정보와 E-E-A-T 신호가 충분한가
|
||
- dateModified가 최신 상태인가</pre>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- ════════════════════ 09 — SKILLS 통합 ════════════════════ -->
|
||
<div class="section-header" id="sec9">
|
||
<div class="section-num">09</div>
|
||
<h2>Claude Code Skills 통합 체계 <small>Skills 폴더 구조, 네이밍, 설계 원칙</small></h2>
|
||
</div>
|
||
|
||
<h3>전체 Skills 폴더 구조</h3>
|
||
|
||
<div class="code-block">
|
||
<span class="label">skill tree · v1.1</span>
|
||
<span class="folder">nuxt-fe-skills/</span>
|
||
│
|
||
├── <span class="folder">nuxt-requirement-analyzer/</span> <span class="comment"># Phase 1: 요구사항 분석</span>
|
||
│ ├── <span class="skill-file">SKILL.md</span>
|
||
│ ├── <span class="folder">scripts/</span>
|
||
│ │ └── <span class="file">generate-flowchart.js</span>
|
||
│ └── <span class="folder">references/</span>
|
||
│ └── <span class="file">requirement-template.md</span>
|
||
│
|
||
├── <span class="folder">markup/</span> <span class="comment"># Phase 2: 마크업 컨벤션</span>
|
||
│ ├── <span class="skill-file">SKILL.md</span>
|
||
│ ├── <span class="folder">references/</span>
|
||
│ │ ├── <span class="file">semantic-html.md</span>
|
||
│ │ ├── <span class="file">tailwind-convention.md</span>
|
||
│ │ ├── <span class="file">accessibility.md</span>
|
||
│ │ └── <span class="file">nuxt-sfc-pattern.md</span>
|
||
│ ├── <span class="folder">promotion/</span> <span class="comment"># Phase 2-1: 프로모션 마크업 🆕 NEW</span>
|
||
│ │ ├── <span class="skill-file">SKILL.md</span>
|
||
│ │ └── <span class="folder">references/</span>
|
||
│ └── <span class="folder">edm/</span> <span class="comment"># Phase 2-2: EDM 마크업 🆕 NEW</span>
|
||
│ ├── <span class="skill-file">SKILL.md</span>
|
||
│ └── <span class="folder">references/</span>
|
||
│
|
||
├── <span class="folder">nuxt-component-architect/</span> <span class="comment"># Phase 3: 컴포넌트 아키텍처</span>
|
||
│ └── <span class="skill-file">SKILL.md</span>
|
||
│
|
||
├── <span class="folder">nuxt/</span> <span class="comment"># Phase 3-1: Nuxt 공식문서 기반 🆕 NEW</span>
|
||
│ ├── <span class="skill-file">SKILL.md</span>
|
||
│ └── <span class="folder">references/</span>
|
||
│ ├── <span class="file">server.md</span>
|
||
│ ├── <span class="file">middleware.md</span>
|
||
│ ├── <span class="file">plugins.md</span>
|
||
│ ├── <span class="file">nuxt-composables.md</span>
|
||
│ ├── <span class="file">nuxt-components.md</span>
|
||
│ └── <span class="file">nuxt-config.md</span>
|
||
│
|
||
├── <span class="folder">nuxt-api-state-manager/</span> <span class="comment"># Phase 4: API·상태관리</span>
|
||
│ ├── <span class="skill-file">SKILL.md</span>
|
||
│ ├── <span class="folder">scripts/</span>
|
||
│ │ └── <span class="file">generate-store.js</span>
|
||
│ └── <span class="folder">references/</span>
|
||
│ ├── <span class="file">pinia-patterns.md</span>
|
||
│ └── <span class="file">api-error-handling.md</span>
|
||
│
|
||
├── <span class="folder">nuxt-perf-optimizer/</span> <span class="comment"># Phase 5: 성능 최적화 ⚡ CHANGED</span>
|
||
│ ├── <span class="skill-file">SKILL.md</span>
|
||
│ ├── <span class="folder">scripts/</span>
|
||
│ │ └── <span class="file">lighthouse-runner.js</span> <span class="comment"># Lighthouse CI 자동 실행</span>
|
||
│ └── <span class="folder">references/</span>
|
||
│ ├── <span class="file">cwv-checklist.md</span> <span class="comment"># Core Web Vitals 체크리스트</span>
|
||
│ ├── <span class="file">bundle-optimization.md</span> <span class="comment"># 번들 최적화 전략</span>
|
||
│ ├── <span class="file">image-optimization.md</span> <span class="comment"># NuxtImg 활용 가이드</span>
|
||
│ └── <span class="file">caching-strategy.md</span> <span class="comment"># routeRules 캐싱 가이드</span>
|
||
│
|
||
└── <span class="folder">nuxt-seo-geo/</span> <span class="comment"># Phase 6: SEO·GEO·AEO 🆕 NEW</span>
|
||
├── <span class="skill-file">SKILL.md</span>
|
||
├── <span class="folder">scripts/</span>
|
||
│ ├── <span class="file">seo-meta-checker.js</span> <span class="comment"># 메타태그 완성도 자동 검사</span>
|
||
│ └── <span class="file">schema-validator.js</span> <span class="comment"># JSON-LD 구조화 데이터 검증</span>
|
||
└── <span class="folder">references/</span>
|
||
├── <span class="file">seo-meta-guide.md</span> <span class="comment"># useSeoMeta 패턴 가이드</span>
|
||
├── <span class="file">schema-org-guide.md</span> <span class="comment"># useSchemaOrg JSON-LD 가이드</span>
|
||
├── <span class="file">aeo-patterns.md</span> <span class="comment"># AEO: FAQ, HowTo, 즉답 패턴</span>
|
||
├── <span class="file">geo-optimization.md</span> <span class="comment"># GEO: AI 인용 최적화 전략</span>
|
||
└── <span class="file">og-image-generation.md</span> <span class="comment"># 동적 OG 이미지 자동 생성</span>
|
||
</div>
|
||
|
||
<h3>파일 네이밍 컨벤션</h3>
|
||
<table>
|
||
<thead><tr><th>대상</th><th>컨벤션</th><th>예시</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Skill 폴더명</td><td><code>{도메인}</code> 또는 <code>nuxt-{도메인}-{역할}</code> kebab-case</td><td><code>markup</code>, <code>nuxt</code>, <code>nuxt-seo-geo</code></td></tr>
|
||
<tr><td>SKILL.md</td><td>대문자 고정, 폴더당 1개</td><td><code>SKILL.md</code></td></tr>
|
||
<tr><td>참조 문서</td><td><code>{도메인}-{주제}.md</code> kebab-case</td><td><code>geo-optimization.md</code></td></tr>
|
||
<tr><td>스크립트</td><td><code>{동사}-{대상}.js</code> kebab-case</td><td><code>schema-validator.js</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Skill 설계 3원칙</h3>
|
||
|
||
<div class="callout tip">
|
||
<span class="callout-icon">📐</span>
|
||
<div><strong>원칙 1: Progressive Disclosure (점진적 공개)</strong> — SKILL.md는 500줄 이내. 상세 내용은 references/에 분리. Claude는 컨텍스트에 따라 필요한 참조만 선택적으로 로드합니다.</div>
|
||
</div>
|
||
<div class="callout tip">
|
||
<span class="callout-icon">🎯</span>
|
||
<div><strong>원칙 2: Pushy Description (적극적 트리거)</strong> — Skill description에 다양한 트리거 키워드를 포함하여 관련 상황에서 누락 없이 활성화. 언더트리거보다 오버트리거가 낫습니다.</div>
|
||
</div>
|
||
<div class="callout tip">
|
||
<span class="callout-icon">📋</span>
|
||
<div><strong>원칙 3: Deterministic Output (결정적 출력)</strong> — 동일한 입력에 대해 일관된 구조의 출력을 보장. 출력 포맷(디렉토리 구조, 코드 패턴, 체크리스트)을 명확히 정의합니다.</div>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- ════════════════════ 10 — 로드맵 ════════════════════ -->
|
||
<div class="section-header" id="sec10">
|
||
<div class="section-num">10</div>
|
||
<h2>실행 로드맵 & 일정 <small>단계별 도입 타임라인 및 마일스톤</small></h2>
|
||
</div>
|
||
|
||
<h3>도입 타임라인</h3>
|
||
<table>
|
||
<thead><tr><th>주차</th><th>Phase</th><th>핵심 활동</th><th>산출물</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>W1–W2</strong></td><td>Phase 1</td><td>요구사항 분석 Skill 개발 및 테스트</td><td><code>nuxt-requirement-analyzer</code></td></tr>
|
||
<tr><td><strong>W2–W3</strong></td><td>Phase 2 / 2-1 / 2-2</td><td>마크업 컨벤션 + 프로모션·EDM Skill 개발</td><td><code>markup</code>, <code>markup/promotion</code>, <code>markup/edm</code></td></tr>
|
||
<tr><td><strong>W3–W5</strong></td><td>Phase 3 / 3-1</td><td>Nuxt 컴포넌트 아키텍처 + 공식문서 참조 Skill 개발</td><td><code>nuxt-component-architect</code>, <code>nuxt</code></td></tr>
|
||
<tr><td><strong>W5–W7</strong></td><td>Phase 4</td><td>API/Pinia 패턴 표준화 및 Skill 개발</td><td><code>nuxt-api-state-manager</code></td></tr>
|
||
<tr><td><strong>W7–W8</strong></td><td>Phase 5</td><td>성능 최적화 Skill 개발 및 파일럿</td><td><code>nuxt-perf-optimizer</code> <span class="changed">CHANGED</span></td></tr>
|
||
<tr><td><strong>W8–W10</strong></td><td>Phase 6 <span class="new-badge">NEW</span></td><td>SEO·GEO·AEO 감사 Skill 개발</td><td><code>nuxt-seo-geo</code></td></tr>
|
||
<tr><td><strong>W10–W11</strong></td><td>통합</td><td>전체 Skill 통합 테스트 및 팀 교육</td><td>교육 자료, 온보딩 가이드</td></tr>
|
||
<tr><td><strong>W12–</strong></td><td>운영</td><td>실 프로젝트 적용 및 피드백 기반 개선</td><td>Skill 버전 업데이트 로그</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>성공 지표 (KPI)</h3>
|
||
|
||
<div class="kpi-grid">
|
||
<div class="kpi-card">
|
||
<div class="label">코드 리뷰 반려율</div>
|
||
<div class="before">35%</div>
|
||
<div class="arrow">→</div>
|
||
<div class="after">15%↓</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="label">컴포넌트 재사용률</div>
|
||
<div class="before">30%</div>
|
||
<div class="arrow">→</div>
|
||
<div class="after">70%↑</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="label">신규 온보딩 기간</div>
|
||
<div class="before">3주</div>
|
||
<div class="arrow">→</div>
|
||
<div class="after">1주</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="label">Lighthouse 성능 점수</div>
|
||
<div class="before">65~75</div>
|
||
<div class="arrow">→</div>
|
||
<div class="after">90+</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="label">SEO 메타 누락률</div>
|
||
<div class="before">40%</div>
|
||
<div class="arrow">→</div>
|
||
<div class="after">5%↓</div>
|
||
</div>
|
||
<div class="kpi-card" style="border-color: var(--purple-100);">
|
||
<div class="label">AI 검색 인용률 <span class="new-badge">NEW</span></div>
|
||
<div class="before">미측정</div>
|
||
<div class="arrow">→</div>
|
||
<div class="after" style="color: var(--purple);">측정 체계 구축</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<p style="text-align: center; color: var(--slate-400); font-size: 13px; margin-top: 40px;">
|
||
본 문서는 퍼블리싱웹 FE 내부 공유용이며, 프로젝트 진행에 따라 지속 업데이트됩니다.<br />
|
||
문의: 퍼블리싱웹 FE · 최종 수정: 2026.03.30 · v1.1
|
||
</p>
|
||
|
||
</body>
|
||
</html>
|