1124 lines
73 KiB
HTML
1124 lines
73 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0068)https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html -->
|
||
<html lang="ko"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Nuxt FE AI 표준화 로드맵 v1.2</title>
|
||
<link href="./Nuxt FE AI 표준화 로드맵 v1.1_files/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.2</span>
|
||
<span>👥 퍼블리싱웹 FE </span>
|
||
<span>🔒 팀 내부 공유용</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════ TOC ════════════════════ -->
|
||
<div class="toc">
|
||
<h2>목차</h2>
|
||
<ol>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#sec1">개요 및 배경</a></li>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#sec2">전체 프로세스 Overview</a></li>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#sec3">Phase 1 — 요구사항 정의 및 플로우차트</a></li>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#sec4">Phase 2 — 마크업 & Tailwind 컨벤션</a></li>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#sec5">Phase 3 — Nuxt 컴포넌트 아키텍처</a></li>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#sec6">Phase 4 — API 연동 & Pinia 상태관리</a></li>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#sec7">Phase 5 — 검증 (요구사항 + 성능)</a></li>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#sec8">Phase 6 — SEO · GEO · AEO 검증</a></li>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#sec9">Claude Code Skills 통합 체계</a></li>
|
||
<li><a href="https://sandbox-item.smilegatemegaport.com/Webdev01_UI/fe/fe-ai.html#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 개발 전체 라이프사이클의 각 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>
|
||
|
||
<div class="callout warn">
|
||
<span class="callout-icon">🔄</span>
|
||
<div><strong>v1.2 변경사항:</strong> FE개발 단계(Phase 3~4)에 <strong>5개 서브 단계</strong>를 추가했습니다. Phase 3-2(페이지·레이아웃·미들웨어), Phase 3-3(Vue 컴포넌트 생성), Phase 3-4(Composable·데이터 페칭), Phase 4-1(Pinia 스토어), Phase 4-2(Nitro 서버 라우트)로 실제 개발 워크플로우를 세분화합니다.</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>plan-requirement/SKILL.md<br>plan-requirement/references/</code></td></tr>
|
||
<tr><td><span class="phase-tag design">마크업</span></td><td>Phase 2</td><td>HTML 마크업, Tailwind 컨벤션</td><td><code>markup-base/SKILL.md<br>markup-base/references/</code></td></tr>
|
||
<tr><td><span class="phase-tag"></span></td><td>Phase 2-0</td><td>PSD -> 피그마 컨버팅</td>
|
||
<td><code>SKILL 검토 중<br>Codia AI 디자인 (PSD to Figma)<br>PSD Importer for Figma</code></td>
|
||
</tr>
|
||
<tr><td><span class="phase-tag "></span></td><td>Phase 2-1</td><td>피그마 HTML 마크업</td><td><code>markup-base/SKILL.md<br>markup-base/references/</code></td></tr>
|
||
<tr><td><span class="phase-tag "></span></td><td>Phase 2-2</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-3</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-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-reference/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"></span></td><td>Phase 3-2</td><td>페이지·레이아웃·미들웨어 생성</td><td><code>nuxt-page-layout/SKILL.md</code> <span class="new-badge">v1.2</span></td></tr>
|
||
<tr><td><span class="phase-tag"></span></td><td>Phase 3-3</td><td>Vue 컴포넌트 신규 생성</td><td><code>nuxt-component-create/SKILL.md</code> <span class="new-badge">v1.2</span></td></tr>
|
||
<tr><td><span class="phase-tag"></span></td><td>Phase 3-4</td><td>Composable·데이터 페칭</td><td><code>nuxt-composable/SKILL.md</code> <span class="new-badge">v1.2</span></td></tr>
|
||
<tr><td><span class="phase-tag dev">FE개발</span></td><td>Phase 4</td><td>API 연동</td><td><code>api-manager/SKILL.md<br>api-manager/references/</code></td></tr>
|
||
<tr><td><span class="phase-tag"></span></td><td>Phase 4-1</td><td>Pinia 스토어 생성</td><td><code>api-pinia-store/SKILL.md</code> <span class="new-badge">v1.2</span></td></tr>
|
||
<tr><td><span class="phase-tag"></span></td><td>Phase 4-2</td><td>Nitro 서버 라우트 (BFF)</td><td><code>api-server-route/SKILL.md</code> <span class="new-badge">v1.2</span></td></tr>
|
||
<tr><td><span class="phase-tag verify">검증</span></td><td>Phase 5</td><td>검증</td><td><code></code> </td></tr>
|
||
<tr><td><span class="phase-tag"></span></td><td>Phase 5-1</td><td>Phase 1 기획 요구사항 검증</td><td><code>verify-requirement/SKILL.md<br>verify-requirement/references/</code> </td></tr>
|
||
<tr><td><span class="phase-tag"></span></td><td>Phase 5-2</td><td>성능 최적화 (CWV)</td><td><code>verify-performance/SKILL.md<br>verify-performance/references/</code> </td></tr>
|
||
<tr><td><span class="phase-tag seo">검증</span></td><td>Phase 6 </td><td>SEO · GEO · AEO 검증</td><td><code>seo-geo-aeo/SKILL.md<br>seo-geo-aeo/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">plan-requirement</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-base</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>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">PSD → Figma 컨버팅</span>
|
||
<span class="skill-card-trigger">Phase 2-0 · PSD→Figma</span>
|
||
<span class="new-badge">NEW</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> PSD, 피그마 변환, PSD to Figma, 디자인 컨버팅, PSD 임포트</p>
|
||
<p>PSD 디자인 파일을 Figma로 변환하는 프로세스를 지원합니다. <strong>Codia AI 디자인(PSD to Figma)</strong> 및 <strong>PSD Importer for Figma</strong> 도구를 활용하여 레이어 구조를 유지하며 Figma 포맷으로 컨버팅합니다.</p>
|
||
<p style="color: var(--amber-600); font-weight: 600;">⚠️ SKILL 검토 중 — 도구 안정성 및 레이어 정합성 평가 진행 중</p>
|
||
<div class="example">"이 PSD 파일을 Figma로 변환해서 마크업 작업 준비해줘"</div>
|
||
</div>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">markup-base (Figma)</span>
|
||
<span class="skill-card-trigger">Phase 2-1 · 피그마→HTML</span>
|
||
<span class="new-badge">NEW</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> 피그마, Figma, 피그마 마크업, 피그마 HTML, 디자인 시안 마크업, Figma to HTML</p>
|
||
<p>피그마 디자인 시안을 HTML 마크업으로 변환하는 데 특화된 Skill입니다. markup Skill을 기반으로 피그마 레이어 구조 해석, 컴포넌트 매핑, 반응형 브레이크포인트 추출을 포함합니다.</p>
|
||
<div class="example">"이 피그마 디자인 시안을 HTML 마크업으로 변환해줘"</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-2 · 프로모션</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-3 · 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-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-reference</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>
|
||
|
||
<h3>Phase 3-2 — 페이지·레이아웃·미들웨어 생성 <span class="new-badge">v1.2</span></h3>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">nuxt-page-layout</span>
|
||
<span class="skill-card-trigger">Phase 3-2 · 페이지</span>
|
||
<span class="new-badge">v1.2</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> 페이지 만들어줘, 레이아웃 추가, 미들웨어 작성, 라우트 추가, 새 페이지, page, layout, middleware</p>
|
||
<p>Nuxt 3의 파일 기반 라우팅 체계에 맞춰 페이지, 레이아웃, 미들웨어를 생성합니다. <code>definePageMeta</code>로 layout·middleware를 연결하고, <code>useSeoMeta</code>로 SEO 메타태그를 설정합니다.</p>
|
||
<div class="example">"새 페이지를 만들고 레이아웃과 인증 미들웨어를 연결해줘"</div>
|
||
</div>
|
||
|
||
<h4>Skill 동작 절차</h4>
|
||
<ol class="numbered">
|
||
<li><strong>기존 구조 탐색</strong> — <code>pages/</code>, <code>layouts/</code>, <code>middleware/</code> 디렉토리 확인</li>
|
||
<li><strong>라우트 구조 결정</strong> — 파일 기반 라우팅 경로 확인, 동적 파라미터(<code>[id].vue</code>), catch-all(<code>[...slug].vue</code>)</li>
|
||
<li><strong>레이아웃 선택/생성</strong> — 기존 레이아웃 재사용 우선, 필요 시 신규 생성</li>
|
||
<li><strong>페이지 생성</strong> — <code><script setup lang="ts"></code>, <code>definePageMeta</code>, <code>useSeoMeta</code> 적용</li>
|
||
<li><strong>미들웨어 추가</strong> — Named middleware(<code>middleware/auth.ts</code>) 또는 인라인 방식</li>
|
||
<li><strong>검증</strong> — TypeScript 오류 확인, 라우트 인식 확인</li>
|
||
</ol>
|
||
|
||
<h4>동적 라우트 패턴</h4>
|
||
<table>
|
||
<thead><tr><th>파일명</th><th>라우트</th><th>예시 URL</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>pages/users/[id].vue</code></td><td><code>/users/:id</code></td><td><code>/users/123</code></td></tr>
|
||
<tr><td><code>pages/posts/[...slug].vue</code></td><td><code>/posts/:slug(.*)</code></td><td><code>/posts/2026/04/hello</code></td></tr>
|
||
<tr><td><code>pages/[[optional]].vue</code></td><td><code>/:optional?</code></td><td><code>/</code> 또는 <code>/about</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="callout warn">
|
||
<span class="callout-icon">⚠️</span>
|
||
<div><code>definePageMeta</code>에는 <strong>정적/직렬화 가능한 값</strong>만 허용. 런타임 표현식 사용 불가.</div>
|
||
</div>
|
||
|
||
<h3>Phase 3-3 — Vue 컴포넌트 신규 생성 <span class="new-badge">v1.2</span></h3>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">nuxt-component-create</span>
|
||
<span class="skill-card-trigger">Phase 3-3 · 컴포넌트</span>
|
||
<span class="new-badge">v1.2</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> 컴포넌트 만들어줘, 새 컴포넌트, UI 컴포넌트 추가, 버튼 만들어줘, 카드 컴포넌트</p>
|
||
<p>팀 컨벤션에 맞는 새로운 Vue 3 컴포넌트를 생성합니다. 기존 <code>vue-component-review</code> skill과의 <strong>역할 구분</strong>: review는 기존 코드 점검, create는 새 파일 생성입니다.</p>
|
||
<div class="example">"사용자 프로필 카드 컴포넌트를 만들어줘"</div>
|
||
</div>
|
||
|
||
<h4>Skill 동작 절차</h4>
|
||
<ol class="numbered">
|
||
<li><strong>요구사항 확인</strong> — 컴포넌트 목적, props, emits, 사용 위치 파악</li>
|
||
<li><strong>기존 컴포넌트 탐색</strong> — <code>components/</code>에서 유사 컴포넌트 확인, 재활용 검토</li>
|
||
<li><strong>파일 위치 결정</strong> — <code>base/</code> (Atoms), <code>common/</code> (Molecules), <code>domain/</code> (Organisms)</li>
|
||
<li><strong>인터페이스 설계</strong> — <code>defineProps<T>()</code>, <code>defineEmits<{}>()</code> 제네릭 형태</li>
|
||
<li><strong>구현</strong> — <code><script setup lang="ts"></code>, Tailwind 유틸리티 클래스</li>
|
||
<li><strong>검증</strong> — TypeScript 오류, 200줄 이내 확인</li>
|
||
</ol>
|
||
|
||
<h4>분리 기준</h4>
|
||
<table>
|
||
<thead><tr><th>상황</th><th>조치</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>파일 200줄 초과</td><td>하위 컴포넌트로 분리</td></tr>
|
||
<tr><td>script 로직 30줄 초과</td><td>composable로 추출</td></tr>
|
||
<tr><td>Props 5개 초과</td><td>객체 prop으로 그룹핑</td></tr>
|
||
<tr><td>동일 패턴 3회 이상 반복</td><td>공통 컴포넌트로 추출</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Phase 3-4 — Composable·데이터 페칭 <span class="new-badge">v1.2</span></h3>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">nuxt-composable</span>
|
||
<span class="skill-card-trigger">Phase 3-4 · Composable</span>
|
||
<span class="new-badge">v1.2</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> composable 만들어줘, useFetch 패턴, 데이터 페칭, useAsyncData, 커스텀 훅, 로직 추출</p>
|
||
<p>Nuxt 3의 composable 함수와 데이터 페칭 패턴을 생성합니다. 데이터 페칭 composable(서버 상태)과 로직 composable(UI 상태/행동)을 구분합니다.</p>
|
||
<div class="example">"유저 프로필 데이터를 가져오는 composable을 만들어줘"</div>
|
||
</div>
|
||
|
||
<h4>데이터 페칭 판단 기준표</h4>
|
||
<table>
|
||
<thead><tr><th>시나리오</th><th>추천 방식</th><th>이유</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>단순 REST GET</td><td><code>useFetch</code></td><td>자동 key 중복 방지, 간결</td></tr>
|
||
<tr><td>커스텀 key·transform 필요</td><td><code>useAsyncData</code></td><td>캐싱/변환 세밀 제어</td></tr>
|
||
<tr><td>이벤트 핸들러 내 POST/PUT/DELETE</td><td><code>$fetch</code></td><td>SSR 불필요, fire-and-forget</td></tr>
|
||
<tr><td>의존 쿼리 (체이닝)</td><td><code>useAsyncData</code> + <code>watch</code></td><td>실행 순서 제어</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="callout warn">
|
||
<span class="callout-icon">⚠️</span>
|
||
<div><code>$fetch</code>를 <code><script setup></code>에서 직접 사용하면 SSR 시 서버/클라이언트 양쪽에서 실행되어 <strong>이중 요청 발생</strong>. 반드시 <code>useFetch</code> 또는 <code>useAsyncData</code>로 감싸야 합니다.</div>
|
||
</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">api-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>
|
||
|
||
<h3>Phase 4-1 — Pinia 스토어 생성 <span class="new-badge">v1.2</span></h3>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">api-pinia-store</span>
|
||
<span class="skill-card-trigger">Phase 4-1 · Pinia</span>
|
||
<span class="new-badge">v1.2</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> 스토어 만들어줘, Pinia 스토어, 전역 상태, store 추가, 상태관리, useAuthStore, useCartStore</p>
|
||
<p>앱 전역에서 공유하는 상태를 Pinia 스토어로 관리합니다. <strong>Setup Store(Composition API) 문법</strong>을 기본으로 사용하며, 서버 데이터는 composable(<code>useFetch</code>)이 담당합니다.</p>
|
||
<div class="example">"인증 상태를 관리하는 Pinia 스토어를 만들어줘"</div>
|
||
</div>
|
||
|
||
<h4>Skill 동작 절차</h4>
|
||
<ol class="numbered">
|
||
<li><strong>스토어 필요성 판단</strong> — 서버 데이터 → composable, 로컬 상태 → ref, 공유 상태 → 스토어</li>
|
||
<li><strong>기존 스토어 탐색</strong> — <code>stores/</code> 디렉토리 확인, 중복 방지</li>
|
||
<li><strong>상태 설계</strong> — TypeScript 인터페이스, 최소한의 원시 상태만 저장</li>
|
||
<li><strong>Setup Store 구현</strong> — state(<code>ref</code>), getters(<code>computed</code>), actions(함수)</li>
|
||
<li><strong>검증</strong> — TypeScript 오류, SSR hydration 호환성</li>
|
||
</ol>
|
||
|
||
<h4>스토어 필요성 판단 가이드</h4>
|
||
<table>
|
||
<thead><tr><th>상태의 성격</th><th>해결 방법</th><th>예시</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>서버 데이터 (API 응답)</td><td>composable + <code>useFetch</code></td><td>상품 목록, 유저 프로필</td></tr>
|
||
<tr><td>앱 전역 공유 상태</td><td><strong>Pinia 스토어</strong></td><td>인증, 테마, 사이드바</td></tr>
|
||
<tr><td>단일 페이지 폼 상태</td><td>로컬 <code>ref</code>/<code>reactive</code></td><td>회원가입 폼</td></tr>
|
||
<tr><td>부모↔자식 공유 상태</td><td>props/emits, <code>provide/inject</code></td><td>아코디언 그룹</td></tr>
|
||
<tr><td>URL 기반 상태</td><td>라우트 쿼리/파라미터</td><td>필터, 정렬, 페이지</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="callout warn">
|
||
<span class="callout-icon">⚠️</span>
|
||
<div><strong>SSR hydration 주의:</strong> 스토어 상태는 HTML로 직렬화됨. 함수, DOM 참조, 클래스 인스턴스 등 직렬화 불가능한 값 저장 금지.</div>
|
||
</div>
|
||
|
||
<h3>Phase 4-2 — Nitro 서버 라우트 (BFF) <span class="new-badge">v1.2</span></h3>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">api-server-route</span>
|
||
<span class="skill-card-trigger">Phase 4-2 · Nitro</span>
|
||
<span class="new-badge">v1.2</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> API 라우트 만들어줘, 서버 라우트, server/api, BFF, 프록시 API, 서버 미들웨어, Nitro, defineEventHandler</p>
|
||
<p>Nuxt 3의 Nitro 서버 라우트를 생성합니다. BFF 프록시 패턴, API 엔드포인트, 서버 미들웨어, 서버 유틸리티를 포함합니다.</p>
|
||
<div class="example">"유저 조회 API 라우트를 BFF 프록시 패턴으로 만들어줘"</div>
|
||
</div>
|
||
|
||
<h4>Skill 동작 절차</h4>
|
||
<ol class="numbered">
|
||
<li><strong>라우트 목적 파악</strong> — BFF 프록시, 데이터 변환, 인증, 서버 전용 로직</li>
|
||
<li><strong>기존 서버 라우트 탐색</strong> — <code>server/api/</code>, <code>server/utils/</code>, <code>server/middleware/</code> 확인</li>
|
||
<li><strong>HTTP 메서드 및 파일 네이밍</strong> — <code>xxx.get.ts</code>, <code>xxx.post.ts</code>, <code>xxx.delete.ts</code></li>
|
||
<li><strong>요청/응답 타입 정의</strong> — <code>readBody<T>()</code>, <code>getQuery()</code>, <code>getRouterParam()</code></li>
|
||
<li><strong>핸들러 구현</strong> — <code>defineEventHandler</code>, 입력 검증, <code>createError</code> 에러 처리</li>
|
||
<li><strong>클라이언트 연결</strong> — composable에서 <code>useFetch('/api/xxx')</code> 연결 안내</li>
|
||
</ol>
|
||
|
||
<h4>서버 디렉토리 구조</h4>
|
||
<div class="code-block">
|
||
<span class="label">server structure</span>
|
||
<span class="folder">server/</span>
|
||
├── <span class="folder">api/</span>
|
||
│ ├── <span class="folder">auth/</span>
|
||
│ │ ├── <span class="file">login.post.ts</span>
|
||
│ │ └── <span class="file">logout.post.ts</span>
|
||
│ └── <span class="folder">users/</span>
|
||
│ ├── <span class="file">index.get.ts</span> <span class="comment"># GET /api/users</span>
|
||
│ ├── <span class="file">index.post.ts</span> <span class="comment"># POST /api/users</span>
|
||
│ └── <span class="file">[id].get.ts</span> <span class="comment"># GET /api/users/:id</span>
|
||
├── <span class="folder">middleware/</span>
|
||
│ └── <span class="file">auth.ts</span> <span class="comment"># 모든 요청에 적용</span>
|
||
└── <span class="folder">utils/</span>
|
||
└── <span class="file">api-client.ts</span> <span class="comment"># 공유 유틸리티</span>
|
||
</div>
|
||
|
||
<div class="callout warn">
|
||
<span class="callout-icon">⚠️</span>
|
||
<div>비밀키는 <code>useRuntimeConfig()</code> 서버 전용 필드로만 접근. 클라이언트에 노출 금지. 서버 라우트는 Nitro(Node.js) 컨텍스트이므로 Vue 반응성(<code>ref</code>, <code>computed</code>)과 브라우저 API 사용 불가.</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- ════════════════════ 07 — 검증 ════════════════════ -->
|
||
<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>기획 요구사항 검증(5-1)</strong>과 <strong>성능 최적화(5-2)</strong>를 통합한 검증 단계입니다. Phase 1에서 정의한 요구사항 대비 실제 구현 결과를 비교 검증하고, 런타임 퍼포먼스를 최적화합니다.</p>
|
||
|
||
<h3>Phase 5-1 — 기획 요구사항 검증</h3>
|
||
|
||
<div class="skill-card">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">verify-requirement</span>
|
||
<span class="skill-card-trigger">Phase 5-1 · 요구사항 검증</span>
|
||
<span class="new-badge">NEW</span>
|
||
</div>
|
||
<p><strong>트리거:</strong> 요구사항 검증, 기획 대비 구현 비교, 기능 누락 확인, 스펙 검증, 구현 완성도</p>
|
||
<p>Phase 1에서 정의한 요구사항 명세와 실제 구현 결과를 비교 검증합니다. 기능 누락, 스펙 불일치, 미구현 항목을 자동으로 식별하고 개선 방안을 제시합니다.</p>
|
||
<div class="example">"기획서 대비 현재 구현 상태를 검증하고 누락된 기능을 찾아줘"</div>
|
||
</div>
|
||
|
||
<h3>Phase 5-2 — 성능 최적화 (CWV)</h3>
|
||
|
||
<div class="skill-card perf">
|
||
<div class="skill-card-header">
|
||
<span class="skill-card-name">verify-performance</span>
|
||
<span class="skill-card-trigger perf">Phase 5-2 · 성능</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">seo-geo-aeo</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 폴더 구조 가이드 <a href="https://code.claude.com/docs/ko/skills" target="_blank" style="font-size:13px; font-weight:500; color:var(--blue); text-decoration:none; margin-left:4px;">🔗 공식문서</a></h3>
|
||
|
||
<p>Claude Code 공식문서에 따르면, Skill을 저장하는 <strong>위치에 따라 적용 범위</strong>가 결정됩니다.<br>우선순위: Enterprise > Personal > Project 순이며, Plugin Skills는 네임스페이스(<code>plugin-name:skill-name</code>)를 사용하므로 충돌하지 않습니다.</p>
|
||
|
||
<table>
|
||
<thead><tr><th>위치</th><th>경로</th><th>적용 대상</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>Enterprise</strong></td><td>관리 설정(Managed Settings) 참조</td><td>조직의 모든 사용자</td></tr>
|
||
<tr><td><strong>Personal</strong></td><td><code>~/.claude/skills/<skill-name>/SKILL.md</code></td><td>모든 프로젝트에서 사용 가능</td></tr>
|
||
<tr><td><strong>Project</strong></td><td><code>.claude/skills/<skill-name>/SKILL.md</code></td><td>해당 프로젝트에서만 사용</td></tr>
|
||
<tr><td><strong>Plugin</strong></td><td><code><plugin>/skills/<skill-name>/SKILL.md</code></td><td>플러그인이 활성화된 위치</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4>공식 Skill 디렉토리 구조</h4>
|
||
<p>각 Skill은 <code>SKILL.md</code>를 진입점으로 하는 디렉토리입니다. <code>SKILL.md</code>만 필수이며, 나머지 파일은 선택적입니다.</p>
|
||
|
||
<div class="code-block">
|
||
<span class="label">official structure</span>
|
||
<span class="folder">my-skill/</span>
|
||
├── <span class="skill-file">SKILL.md</span> <span class="comment"># 주요 지침 (필수)</span>
|
||
├── <span class="file">template.md</span> <span class="comment"># Claude가 채울 템플릿</span>
|
||
├── <span class="folder">examples/</span>
|
||
│ └── <span class="file">sample.md</span> <span class="comment"># 예상 형식을 보여주는 예제 출력</span>
|
||
└── <span class="folder">scripts/</span>
|
||
└── <span class="file">validate.sh</span> <span class="comment"># Claude가 실행할 수 있는 스크립트</span>
|
||
</div>
|
||
|
||
<h4>공식 네이밍 규칙</h4>
|
||
<table>
|
||
<thead><tr><th>대상</th><th>규칙</th><th>비고</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>name 필드</strong></td><td>소문자, 숫자, 하이픈만 사용 (최대 64자)</td><td><code>/slash-command</code>로 호출 시 사용</td></tr>
|
||
<tr><td><strong>폴더명</strong></td><td>name 미지정 시 디렉토리 이름이 기본 name</td><td>kebab-case 권장</td></tr>
|
||
<tr><td><strong>SKILL.md</strong></td><td>대문자 고정, 폴더당 1개 (필수)</td><td>500줄 이내 권장</td></tr>
|
||
<tr><td><strong>지원 파일</strong></td><td>SKILL.md에서 참조하여 필요 시 로드</td><td>상세 내용은 references/로 분리</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="callout info">
|
||
<span class="callout-icon">📖</span>
|
||
<div><strong>공식문서 참조:</strong> <code>.claude/commands/</code>의 기존 파일도 계속 작동하며 동일한 frontmatter를 지원합니다. 단, Skills가 지원 파일 등 추가 기능을 제공하므로 <strong>Skills 형식이 권장</strong>됩니다. Skill과 명령어가 같은 이름을 공유하면 Skill이 우선합니다.</div>
|
||
</div>
|
||
|
||
<h3>전체 Skills 폴더 구조 (프로젝트 적용)</h3>
|
||
|
||
<div class="code-block">
|
||
<span class="label">skill tree · v1.2</span>
|
||
<span class="folder">nuxt-fe-skills/</span>
|
||
│
|
||
├── <span class="folder">plan-requirement/</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-base/</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">markup-promotion/</span> <span class="comment"># Phase 2-2: 프로모션 마크업 🆕 NEW</span>
|
||
│ ├── <span class="skill-file">SKILL.md</span>
|
||
│ ├── <span class="folder">references/</span>
|
||
├── <span class="folder">markup-edm/</span> <span class="comment"># Phase 2-3: EDM 마크업 🆕 NEW</span>
|
||
│ ├── <span class="skill-file">SKILL.md</span>
|
||
│ ├── <span class="folder">references/</span>
|
||
│
|
||
├── <span class="folder">nuxt-architect/</span> <span class="comment"># Phase 3: 컴포넌트 아키텍처</span>
|
||
│ └── <span class="skill-file">SKILL.md</span>
|
||
│
|
||
├── <span class="folder">nuxt-reference/</span> <span class="comment"># Phase 3-1: Nuxt 공식문서 기반 🆕 v1.1</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-page-layout/</span> <span class="comment"># Phase 3-2: 페이지·레이아웃·미들웨어 🆕 v1.2</span>
|
||
│ └── <span class="skill-file">SKILL.md</span>
|
||
│
|
||
├── <span class="folder">nuxt-component-create/</span> <span class="comment"># Phase 3-3: Vue 컴포넌트 신규 생성 🆕 v1.2</span>
|
||
│ └── <span class="skill-file">SKILL.md</span>
|
||
│
|
||
├── <span class="folder">nuxt-composable/</span> <span class="comment"># Phase 3-4: Composable·데이터 페칭 🆕 v1.2</span>
|
||
│ └── <span class="skill-file">SKILL.md</span>
|
||
│
|
||
├── <span class="folder">api-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">api-pinia-store/</span> <span class="comment"># Phase 4-1: Pinia 스토어 생성 🆕 v1.2</span>
|
||
│ └── <span class="skill-file">SKILL.md</span>
|
||
│
|
||
├── <span class="folder">api-server-route/</span> <span class="comment"># Phase 4-2: Nitro 서버 라우트(BFF) 🆕 v1.2</span>
|
||
│ └── <span class="skill-file">SKILL.md</span>
|
||
│
|
||
├── <span class="folder">verify-requirement/</span> <span class="comment"># Phase 5-1: 요구사항 검증 🆕 v1.1</span>
|
||
│ ├── <span class="skill-file">SKILL.md</span>
|
||
│ └── <span class="folder">references/</span>
|
||
│ └── <span class="file">requirement-checklist.md</span>
|
||
│
|
||
├── <span class="folder">verify-performance/</span> <span class="comment"># Phase 5-2: 성능 최적화 ⚡ 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">seo-geo-aeo/</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>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>plan-requirement</code></td></tr>
|
||
<tr><td><strong>W2–W3</strong></td><td>Phase 2 / 2-0 / 2-1 / 2-2 / 2-3</td><td>마크업 컨벤션 + PSD→Figma·피그마 마크업·프로모션·EDM Skill 개발</td><td><code>markup-base</code>, <code>markup-promotion</code>, <code>markup-edm</code></td></tr>
|
||
<tr><td><strong>W3–W5</strong></td><td>Phase 3 / 3-1 / 3-2 / 3-3 / 3-4</td><td>Nuxt 컴포넌트 아키텍처 + 공식문서 참조 + 페이지·컴포넌트·Composable Skill 개발</td><td><code>nuxt-architect</code>, <code>nuxt-reference</code>, <code>nuxt-page-layout</code>, <code>nuxt-component-create</code>, <code>nuxt-composable</code></td></tr>
|
||
<tr><td><strong>W5–W7</strong></td><td>Phase 4 / 4-1 / 4-2</td><td>API/Pinia 패턴 표준화 + Pinia 스토어 + Nitro 서버 라우트 Skill 개발</td><td><code>api-manager</code>, <code>api-pinia-store</code>, <code>api-server-route</code></td></tr>
|
||
<tr><td><strong>W7–W8</strong></td><td>Phase 5 검증 (5-1)</td><td>요구사항 검증 Skill 개발</td><td><code>verify-requirement</code> <span class="new-badge">NEW</span></td></tr>
|
||
<tr><td><strong>W8–W9</strong></td><td>Phase 5-2</td><td>성능 최적화 Skill 개발 및 파일럿</td><td><code>verify-performance</code> <span class="changed">CHANGED</span></td></tr>
|
||
<tr><td><strong>W9–W10</strong></td><td>Phase 6 <span class="new-badge">NEW</span></td><td>SEO·GEO·AEO 감사 Skill 개발</td><td><code>seo-geo-aeo</code></td></tr>
|
||
<tr><td><strong>W11–W12</strong></td><td>통합</td><td>전체 Skill 통합 테스트 및 팀 교육</td><td>교육 자료, 온보딩 가이드</td></tr>
|
||
<tr><td><strong>W13–</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.04.23 · v1.2
|
||
</p>
|
||
|
||
|
||
|
||
</body></html> |