프론트엔드 작업 단계별 AI 참조 흐름도

실제 작업 사례 기준

예시: 게임 카드 컴포넌트에 신규 출시 뱃지 추가 (Vue 3 + Nuxt)

CASE 1

자연어 업무 요청

AI가 claude-workflow.md에 따라 탐색 → 계획 → 구현 → 검증 순서로 전체 흐름을 주도하며 진행합니다. 모호한 부분은 질문합니다.

CASE 2

@rules 직접 지정 · 단계 분리

개발자가 각 작업 단계마다 필요한 rules/ 파일을 직접 지정하고 탐색 · 계획 · 구현 · 검증을 나누어 요청합니다.

공통 자동 로드 구조 — 모든 대화에서 항상 적용

구분	파일	주요 내용	로드 시점
공통 지침 진입점	CLAUDE.md	rules/* 전체를 @import. 공통 지침 우선순위 및 skill 사용 안내	세션 1회
코딩 컨벤션	rules/coding-conventions.md	포맷팅(스페이스 2칸·싱글 쿼터·세미콜론), 네이밍(camelCase·PascalCase), any 금지, import 순서	매 대화 턴
프레임워크 규칙	rules/framework-rules.md	Vue 3 <script setup lang="ts">, Pinia, useFetch, Tailwind 유틸리티 우선, clsx 조건부 클래스	매 대화 턴
커밋 / PR 규칙	rules/commit-pr.md	Conventional Commits 형식, subject 50자·명령형, Squash merge, CI + 1인 승인 필수	매 대화 턴
작업 방식 지침	rules/claude-workflow.md	탐색→계획→구현→검증 순서, 최소 변경 원칙, 모호 시 질문, 임의 기능 추가 금지	매 대화 턴

CASE 1 자연어 업무 요청 — 자동 참조 흐름 (Tree)

"게임 카드 컴포넌트에 신규 출시 뱃지 추가해줘."

0자동 로드

모든 대화 시작 시 CLAUDE.md와 rules/* 4개 파일을 자동으로 참조합니다.

CLAUDE.md coding-conventions.md framework-rules.md commit-pr.md claude-workflow.md

1요구사항 분석 — 모호한 부분 질문

claude-workflow.md 원칙에 따라 추측 대신 사용자에게 확인합니다.

claude-workflow.md framework-rules.md

예상 질문

뱃지는 어떤 조건(출시일 기준 N일 이내 등)일 때 표시하나요?
뱃지 디자인은 기존 디자인 시스템 컴포넌트를 사용하나요?
GameCard 컴포넌트는 여러 페이지에서 공유 중인가요?

2탐색 — 관련 파일 파악 · 유사 패턴 확인

GameCard 컴포넌트와 주변 컨벤션을 먼저 읽고 유사 뱃지 구현 패턴을 찾습니다.

coding-conventions.md framework-rules.md

탐색 항목

GameCard.vue 현재 구조 파악
기존 뱃지 컴포넌트(Badge.vue 등) 존재 여부 확인
props 타입 정의 위치 확인 (types/ 또는 도메인 types.ts)

3계획 — 할 일 목록 작성 · 승인

변경 파일 목록과 구현 순서를 공유하고, 아키텍처 영향이 있으면 승인을 받습니다.

claude-workflow.md framework-rules.md

계획 산출물

GameCard.vue — isNew prop 추가, 뱃지 렌더링 조건 분기
types/game.ts — isNew: boolean 필드 추가
기존 뱃지 컴포넌트 재사용 or 인라인 처리 결정

4구현 — 코드 작성

계획에 따라 Vue 컴포넌트와 타입을 수정합니다. 요청 범위를 벗어나는 리팩토링은 하지 않습니다.

coding-conventions.md framework-rules.md

구현 항목

defineProps<T>()에 isNew?: boolean 추가
Tailwind 유틸리티 클래스로 뱃지 스타일 적용
조건부 클래스에 clsx 사용, 200줄 초과 시 분리 검토

5검증 — 린트 · 빌드 · 커밋 / PR 작성

타입체크와 빌드를 확인한 뒤 Conventional Commits 형식으로 커밋과 PR을 작성합니다.

coding-conventions.md commit-pr.md claude-workflow.md

최종 산출물

lint / tsc / build 통과 확인
커밋: feat(game-card): add new-release badge
PR 본문: 변경 사항·배경·테스트·체크리스트 작성

CASE 2 @rules 직접 지정 · 단계별 업무 요청 — 직접 참조 흐름 (Tree)

개발자가 각 작업 단계마다 필요한 rules/ 파일 또는 skill을 직접 지정해 요청합니다.

1탐색 단계

"GameCard 컴포넌트 구조 파악해줘. @rules/framework-rules.md 참고해서"

coding-conventions.md framework-rules.md

산출 내용

컴포넌트 파일 구조 및 props 정리
재사용 가능한 유사 패턴 목록
영향받는 파일 범위 파악

2계획 단계

"뱃지 추가 구현 계획 잡아줘. @rules/claude-workflow.md 참고해서"

claude-workflow.md framework-rules.md

산출 내용

수정 파일 목록 및 변경 순서
아키텍처 영향 범위 정리
사용자 승인 필요 항목 명시

3구현 단계

"계획대로 구현해줘. @rules/coding-conventions.md @rules/framework-rules.md 참고해서"

coding-conventions.md framework-rules.md

산출 내용

Vue 컴포넌트 코드 수정
TypeScript 타입 추가 · 수정
Tailwind 클래스 적용 및 clsx 처리

4검증 단계

"변경 코드 검증하고 커밋·PR 작성해줘. @rules/commit-pr.md 참고해서"

coding-conventions.md commit-pr.md

산출 내용

lint / tsc / build 통과 확인
Conventional Commits 커밋 메시지 작성
PR 템플릿(변경사항·배경·테스트·체크리스트) 작성

Skill 활용 팁 — 반복 업무는 스킬 명령으로 더 빠르게 처리할 수 있습니다.
/conventional-commit · /verify-component-review · /plan-analyzer · /markup-edm

범례

공통 자동 CLAUDE.md — 세션 1회 자동 로드 rules/* — 매 대화 턴 자동 로드 (4개 파일) 단계별 주요 참조 파일 @rules — 직접 지정 (CASE 2) 검증 · 커밋 / PR 단계