본 문서는 Nuxt 3 기반 FE 개발 프로세스를 Claude Code AI Skills과 통합하여 체계적인 표준화 체계를 구축하기 위한 로드맵입니다. 팀 전체가 동일한 품질과 패턴으로 개발할 수 있도록 각 단계별 지능형 업무 매뉴얼(Skills)을 정의합니다.
+
+
1.1 프로젝트 목적
+
+
개발 프로세스 전 단계(기획~검증)에 걸친 AI 어시스턴트 활용 체계 수립
+
Claude Code Skills을 활용한 반복 작업 자동화 및 코드 품질 균일화
+
신규 인력의 빠른 온보딩 및 팀 간 일관된 코드 컨벤션 유지
+
개발 생산성 향상과 동시에 코드 리뷰 품질 확보
+
+
+
1.2 Claude Code Skills이란?
+
Claude Code Skills은 특정 작업 도메인에 대해 Claude가 전문적으로 수행할 수 있도록 구조화된 업무 지시서입니다. SKILL.md 파일을 중심으로, 트리거 조건·실행 절차·출력 포맷이 정의되어 있어 팀원 누구나 일관된 결과를 얻을 수 있습니다.
+
+
+
구성 요소
설명
예시
+
+
SKILL.md
핵심 지시서 (500줄 이내 권장)
트리거, 절차, 출력 포맷 정의
+
scripts/
반복 작업 자동화 스크립트
컴포넌트 생성기, 린트 검사기
+
references/
도메인별 참조 문서
Nuxt 컨벤션, API 패턴 가이드
+
+
+
+
+
+
+
+
+
02
+
전체 프로세스 Overview 기획 → 디자인 → FE개발 → 검증 워크플로우
+
+
+
FE 개발 전체 라이프사이클의 각 Phase마다 전용 Claude Code Skill을 배치합니다.
+
+
+ 🔄
+
v1.1 변경사항: 기존 Phase 5(성능+SEO)를 Phase 5(성능)과 Phase 6(SEO·GEO·AEO)로 분리했습니다. SEO Skill에 Generative Engine Optimization(GEO)과 Answer Engine Optimization(AEO)을 추가하여 AI 검색 시대에 대응합니다.
+
+
+
+ 🔄
+
v1.2 변경사항: FE개발 단계(Phase 3~4)에 5개 서브 단계를 추가했습니다. Phase 3-2(페이지·레이아웃·미들웨어), Phase 3-3(Vue 컴포넌트 생성), Phase 3-4(Composable·데이터 페칭), Phase 4-1(Pinia 스토어), Phase 4-2(Nitro 서버 라우트)로 실제 개발 워크플로우를 세분화합니다.
기획 문서를 분석하여 Nuxt 프로젝트에 적합한 구조화된 요구사항 명세(페이지 목록, 컴포넌트 트리, 라우팅 맵, 데이터 플로우)를 자동 생성합니다.
+
"이 기획서를 분석해서 Nuxt 페이지 구조와 컴포넌트 목록을 뽑아줘"
+
+
+
Skill 동작 절차
+
+
입력 분석 — 기획서/PRD 문서를 파싱하여 기능 요구사항, 화면 목록, 사용자 플로우를 추출
+
페이지 맵 생성 — Nuxt의 pages/ 디렉토리 구조에 맞는 라우팅 맵을 자동 설계
+
컴포넌트 트리 도출 — Atomic Design 원칙에 따른 컴포넌트 분해
+
데이터 플로우 정의 — 각 페이지/컴포넌트별 필요 데이터, API 엔드포인트 매핑
+
Mermaid 플로우차트 출력 — 화면 전환 흐름, 조건 분기를 시각화
+
+
+
+
💬 프롬프트 템플릿
+
다음 기획서를 분석해서 Nuxt 3 프로젝트 구조를 설계해줘.
+
+[기획서 첨부 또는 내용 붙여넣기]
+
+출력 형식:
+1. pages/ 디렉토리 라우팅 구조
+2. components/ Atomic Design 기반 컴포넌트 트리
+3. 각 페이지별 필요 API 엔드포인트 목록
+4. Mermaid 플로우차트 (화면 전환 흐름)
+5. composables/ 에 필요한 공통 로직 목록
+
+
+
+
+
+
+
04
+
Phase 2 — 마크업 & Tailwind 컨벤션 시멘틱 HTML 구조 확립 및 Tailwind CSS 스타일 표준화
+
+
+
+
+ markup-base
+ Phase 2 · 디자인→마크업
+
+
트리거: 마크업, HTML 구조, 시멘틱, Tailwind, 클래스 순서, 접근성, ARIA, SFC 구조, 반응형
+
디자인 시안을 Nuxt 컴포넌트의 시멘틱 HTML + Tailwind CSS로 변환합니다. 4개 참조 문서(시멘틱 HTML, Tailwind 컨벤션, 접근성, Nuxt SFC 패턴)를 도메인별로 선택 로드합니다.
+
"이 디자인을 시멘틱 마크업으로 변환하고 Tailwind 클래스를 적용해줘"
+
+
+
+
+ PSD → Figma 컨버팅
+ Phase 2-0 · PSD→Figma
+ NEW
+
+
트리거: PSD, 피그마 변환, PSD to Figma, 디자인 컨버팅, PSD 임포트
+
PSD 디자인 파일을 Figma로 변환하는 프로세스를 지원합니다. Codia AI 디자인(PSD to Figma) 및 PSD Importer for Figma 도구를 활용하여 레이어 구조를 유지하며 Figma 포맷으로 컨버팅합니다.
Nuxt 3 프로젝트의 성능 병목을 분석하고 최적화합니다. 코드 스플리팅, 이미지 최적화, SSR/ISR 렌더링 전략, API 캐싱, Payload 최적화를 포함합니다.
+
"이 페이지 LCP가 3초 넘는데 성능 최적화 방안 제시해줘"
+
+
+
성능 최적화 체크리스트
+
+
카테고리
최적화 항목
Nuxt 3 적용 방법
+
+
번들
코드 스플리팅
defineAsyncComponent, lazy 접두사 컴포넌트
+
번들
트리 쉐이킹
nuxt.config의 build.transpile, 사이드이펙트 제거
+
이미지
NuxtImg
<NuxtImg> sizes/format 자동 최적화
+
이미지
Lazy Loading
loading="lazy", NuxtImg placeholder
+
네트워크
API 캐싱
useFetch의 key, getCachedData
+
네트워크
서버 캐싱
routeRules의 swr, isr 설정
+
렌더링
SSR/SSG 전략
routeRules로 페이지별 렌더링 모드 지정
+
렌더링
Payload 최적화
useAsyncData의 transform으로 불필요 데이터 제거
+
CWV
LCP < 2.5s
critical CSS 인라인, 폰트 프리로드, hero 이미지 우선
+
CWV
CLS < 0.1
이미지 width/height 명시, 스켈레톤 UI, font-display: swap
+
CWV
INP < 200ms
이벤트 핸들러 최적화, 메인 스레드 블로킹 제거
+
+
+
+
+
💬 프롬프트 템플릿
+
이 Nuxt 3 프로젝트의 성능을 감사하고 최적화 방안을 제시해줘.
+
+[프로젝트 경로 또는 주요 파일]
+
+감사 범위:
+- Core Web Vitals (LCP < 2.5s, CLS < 0.1, INP < 200ms)
+- 번들 사이즈 분석 (analyze: true로 리포트 확인)
+- 이미지 최적화 상태 (NuxtImg 활용 여부)
+- SSR/SSG/ISR 렌더링 전략 적정성
+- routeRules 캐싱 전략 검증
+- 불필요한 클라이언트 JS hydration 확인
+
+
+
+
+
+
+
08
+
Phase 6 — SEO · GEO · AEO 검증 전통 검색 + AI 검색 + 답변 엔진 통합 최적화
+
+
+
2026년 현재, 전통적 SEO만으로는 디지털 가시성을 확보할 수 없습니다. Gartner는 전통 검색 볼륨이 25% 감소할 것으로 전망하며, ChatGPT·Perplexity·Google AI Overview가 새로운 검색 채널로 부상하고 있습니다. 이 Skill은 SEO + GEO + AEO 3계층 최적화를 통합합니다.
+
+
SEO · GEO · AEO 3계층 이해
+
+
+
+ 🔍 Layer 1 — SEO (Search Engine Optimization)
+ 전통 검색엔진(Google, Bing) 결과 페이지에서 상위 노출. 메타태그, 구조화 데이터, 사이트맵, 기술적 SEO(Core Web Vitals, crawlability)가 핵심.
+
+
+ 💬 Layer 2 — AEO (Answer Engine Optimization)
+ Featured Snippet, Google AI Overview, 음성 검색 등 "직접 답변" 영역에 콘텐츠를 노출. FAQ 구조, 질문형 H2 헤딩, 간결한 정의 문장이 핵심.
+
+
+ 🤖 Layer 3 — GEO (Generative Engine Optimization)
+ ChatGPT, Perplexity, Claude, Gemini 등 AI 생성형 답변에서 콘텐츠가 인용(citation)되도록 최적화. 통계 데이터, 전문가 인용, 구조화된 정보 블록, 원본 리서치가 핵심.
+
+
+
+
+ 💡
+
3계층은 상호 보완적입니다. 탄탄한 SEO 기반 위에 AEO 구조를 얹고, GEO 최적화를 추가하는 것이 가장 효과적입니다. Princeton 연구에 따르면 GEO 최적화 기법(통계 인용, 출처 명시, 전문가 인용문)을 적용하면 AI 검색 가시성이 30~40% 향상됩니다.
+
+
+
+
+ seo-geo-aeo
+ Phase 6 · SEO·GEO·AEO
+ NEW
+
+
트리거: SEO, 메타태그, 구조화 데이터, Schema.org, sitemap, OG태그, GEO, AI 검색, 인용 최적화, AEO, Featured Snippet, FAQ, 음성 검색, useSeoMeta, useSchemaOrg
+
Nuxt 3 프로젝트의 SEO·GEO·AEO를 3계층으로 감사하고 최적화합니다. 메타태그 자동화, JSON-LD 구조화 데이터, AI 인용 친화적 콘텐츠 구조, FAQ 스키마, OG 이미지 자동 생성을 포함합니다.
+
"이 사이트의 SEO 메타태그, GEO 인용 최적화, AEO FAQ 구조를 검증해줘"
+
+
+
Layer 1 — SEO 체크리스트
+
+
영역
점검 항목
Nuxt 3 구현
+
+
메타태그
title, description, canonical, OG, Twitter Card
useSeoMeta() 전역 + 페이지별 오버라이드
+
구조화 데이터
JSON-LD Schema.org (Article, Product, FAQ 등)
@nuxtjs/schema-org 모듈, useSchemaOrg()
+
사이트맵
동적 sitemap.xml 생성
@nuxtjs/sitemap 모듈
+
robots
robots.txt + 크롤 제어
@nuxtjs/robots 모듈 또는 server/routes
+
OG 이미지
페이지별 동적 OG 이미지
nuxt-og-image 또는 Satori 기반 server/api
+
Canonical
중복 URL 방지
useHead({ link: [{ rel: 'canonical' }] })
+
SSR
검색엔진 크롤러 SSR 보장
routeRules로 SSR/ISR 모드 지정
+
i18n
hreflang 태그, lang 속성
@nuxtjs/i18n 모듈
+
+
+
+
Layer 2 — AEO 체크리스트
+
+
영역
점검 항목
구현 전략
+
+
질문형 구조
H2를 실제 사용자 질문 형태로
"제품 가격은?" 대신 "이 제품의 가격은 얼마인가요?"
+
즉답 패턴
질문 직후 200자 이내 직접 답변
TLDR-first 콘텐츠 구조 적용
+
FAQ Schema
FAQPage JSON-LD
useSchemaOrg([defineFAQPage(...)])
+
HowTo Schema
단계별 가이드 구조화
useSchemaOrg([defineHowTo(...)])
+
Breadcrumb
탐색 경로 구조화
useSchemaOrg([defineBreadcrumb(...)])
+
정의 문장
핵심 용어의 명확한 정의 문장
"[용어]는 [정의]입니다" 패턴으로 시작
+
+
+
+
Layer 3 — GEO 체크리스트
+
+
영역
점검 항목
최적화 전략
+
+
통계 인용
구체적 수치 데이터 포함
"매출 20% 증가" → AI가 인용할 확률 ↑
+
출처 명시
데이터·인사이트의 원본 출처 표기
신뢰도 향상 → AI 엔진이 선호
+
전문가 인용
업계 전문가의 직접 인용문
blockquote + 전문가 Schema 활용
+
추출 가능한 블록
독립적으로 의미가 완결되는 정보 단위
각 섹션이 독립적으로 인용 가능하도록 구성
+
E-E-A-T 신호
경험(Experience), 전문성, 권위, 신뢰
저자 프로필, 리뷰 날짜, 인증 배지
+
최신성 유지
정기적 콘텐츠 업데이트
AI 인용 콘텐츠의 50%가 13주 이내 게시된 것
+
토픽 중심
키워드 → 토픽 타겟팅 전환
주제를 포괄적으로 다루는 pillar 콘텐츠
+
브랜드 언급
웹 전체에서 브랜드 언급 확대
외부 인용, 리뷰, 포럼 활동
+
+
+
+
SEO 메타 자동화 패턴
+
+
💬 useSeoMeta + useSchemaOrg 통합 패턴
+
// composables/usePageSeo.ts — SEO·GEO 통합 메타 자동화
+
+
+
+
GEO·AEO 감사 프롬프트
+
+
💬 SEO + GEO + AEO 통합 감사 프롬프트
+
이 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가 최신 상태인가
Claude Code 공식문서에 따르면, Skill을 저장하는 위치에 따라 적용 범위가 결정됩니다. 우선순위: Enterprise > Personal > Project 순이며, Plugin Skills는 네임스페이스(plugin-name:skill-name)를 사용하므로 충돌하지 않습니다.
+
+
+
위치
경로
적용 대상
+
+
Enterprise
관리 설정(Managed Settings) 참조
조직의 모든 사용자
+
Personal
~/.claude/skills/<skill-name>/SKILL.md
모든 프로젝트에서 사용 가능
+
Project
.claude/skills/<skill-name>/SKILL.md
해당 프로젝트에서만 사용
+
Plugin
<plugin>/skills/<skill-name>/SKILL.md
플러그인이 활성화된 위치
+
+
+
+
공식 Skill 디렉토리 구조
+
각 Skill은 SKILL.md를 진입점으로 하는 디렉토리입니다. SKILL.md만 필수이며, 나머지 파일은 선택적입니다.
+
+
+ official structure
+my-skill/
+├── SKILL.md# 주요 지침 (필수)
+├── template.md# Claude가 채울 템플릿
+├── examples/
+│ └── sample.md# 예상 형식을 보여주는 예제 출력
+└── scripts/
+ └── validate.sh# Claude가 실행할 수 있는 스크립트
+
+
+
공식 네이밍 규칙
+
+
대상
규칙
비고
+
+
name 필드
소문자, 숫자, 하이픈만 사용 (최대 64자)
/slash-command로 호출 시 사용
+
폴더명
name 미지정 시 디렉토리 이름이 기본 name
kebab-case 권장
+
SKILL.md
대문자 고정, 폴더당 1개 (필수)
500줄 이내 권장
+
지원 파일
SKILL.md에서 참조하여 필요 시 로드
상세 내용은 references/로 분리
+
+
+
+
+ 📖
+
공식문서 참조:.claude/commands/의 기존 파일도 계속 작동하며 동일한 frontmatter를 지원합니다. 단, Skills가 지원 파일 등 추가 기능을 제공하므로 Skills 형식이 권장됩니다. Skill과 명령어가 같은 이름을 공유하면 Skill이 우선합니다.