본 문서는 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 패턴 가이드
+
assets/
템플릿, 아이콘 등 리소스
컴포넌트 보일러플레이트
+
+
+
+
+
+
+
+
02
+
전체 프로세스 Overview 기획 → 디자인 → FE개발 → 검증 워크플로우
+
+
+
FE 개발의 전체 라이프사이클을 4개 대단계, 6개 세부 Phase로 구분하고, 각 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 검색 시대에 대응합니다.
기획 문서를 분석하여 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
+ Phase 2 · 디자인→마크업
+
+
트리거: 마크업, HTML 구조, 시멘틱, Tailwind, 클래스 순서, 접근성, ARIA, SFC 구조, 반응형
+
디자인 시안을 Nuxt 컴포넌트의 시멘틱 HTML + Tailwind CSS로 변환합니다. 4개 참조 문서(시멘틱 HTML, Tailwind 컨벤션, 접근성, Nuxt SFC 패턴)를 도메인별로 선택 로드합니다.
+
"이 디자인을 시멘틱 마크업으로 변환하고 Tailwind 클래스를 적용해줘"
+
+
+
HTML 시멘틱 태그 가이드
+
+
영역
시멘틱 태그
규칙
+
+
레이아웃
<header>, <nav>, <main>, <aside>, <footer>
페이지 대구조 정의, div 남용 금지
+
섹션
<section>, <article>
의미 단위 그룹핑, aria-label 필수
+
제목
<h1>~<h6>
페이지당 h1 1개, 건너뛰기 금지
+
목록
<ul>, <ol>, <dl>
나열형 데이터는 반드시 리스트 태그
+
폼
<form>, <fieldset>, <label>
모든 input에 label 연결 필수
+
인터랙티브
<button>, <a>, <dialog>
클릭 가능 요소는 반드시 시멘틱 태그
+
+
+
+
Tailwind 클래스 순서 컨벤션
+
+
순서
카테고리
대표 클래스
기억법
+
+
1
Layout
flex, grid, block, hidden
"어떻게 배치?"
+
2
Position
relative, absolute, fixed, z-*
"어디에 놓을까?"
+
3
Box Model
w-*, h-*, p-*, m-*, gap-*
"얼마나 크게?"
+
4
Typography
text-*, font-*, leading-*
"글자를 어떻게?"
+
5
Visual
bg-*, border-*, rounded-*, shadow-*
"어떻게 보이게?"
+
6
State
hover:*, focus:*, sm:*, md:*
"상태가 바뀌면?"
+
7
Motion
transition-*, duration-*, animate-*
"움직임은?"
+
+
+
+
+
+ markup/promotion
+ Phase 2-1 · 프로모션
+ NEW
+
+
트리거: 프로모션, 랜딩페이지, 이벤트 페이지, 프로모션 마크업, 캠페인 페이지
+
프로모션 및 랜딩페이지에 특화된 HTML 마크업을 생성합니다. 캠페인 성격에 맞는 시멘틱 구조, 반응형 레이아웃, CTA 배치 패턴을 포함합니다.
+
"이 프로모션 디자인을 랜딩페이지 HTML 마크업으로 변환해줘"
+
+
+
+
+ markup/edm
+ Phase 2-2 · EDM
+ NEW
+
+
트리거: EDM, 이메일, 뉴스레터, 메일 템플릿, 이메일 마크업
+
EDM(Email Direct Marketing) 및 뉴스레터용 HTML 마크업을 생성합니다. 이메일 클라이언트 호환성, 테이블 기반 레이아웃, 인라인 스타일 패턴을 포함합니다.
+
"이 디자인을 이메일 뉴스레터 HTML로 변환해줘"
+
+
+
+
+
+
+
05
+
Phase 3 — Nuxt 컴포넌트 아키텍처 Nuxt 3 공식 가이드 기반 컴포넌트 설계 표준
+
+
+
+
+ nuxt-component-architect
+ Phase 3 · FE개발
+
+
트리거: Nuxt 컴포넌트, 페이지, composable, 레이아웃, 미들웨어, 플러그인
+
Nuxt 3 공식 가이드를 기반으로 컴포넌트를 설계합니다. auto-import, composables 패턴, server/ 디렉토리 활용, 레이아웃 전략을 포함한 전체 아키텍처를 제안합니다.
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% 향상됩니다.
+
+
+
+
+ nuxt-seo-geo
+ 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가 최신 상태인가