[Agent Skills #1] AI 코딩 에이전트의 새로운 표준
반복되는 컨텍스트 설명 없이, AI 에이전트에게 전문 지식을 전달하는 방법
들어가며
최근 AI 코딩 에이전트 시장이 폭발적으로 성장하고 있습니다. Claude Code, Cursor, GitHub Copilot, Gemini CLI 등 다양한 도구들이 개발자의 생산성을 높여주고 있죠.
하지만 한 가지 문제가 있었습니다.
"매번 같은 맥락을 설명해야 한다"
"우리 팀은 이런 코딩 컨벤션을 써", "Next.js에서는 이렇게 하는 게 좋아", "접근성 체크 꼭 해줘"...
프로젝트마다, 대화마다 반복되는 설명들. 비효율적이죠.
Agent Skills는 이 문제를 해결합니다.
Agent Skills란?
Agent Skills는 AI 코딩 에이전트에게 전문 지식과 워크플로우를 패키징해서 전달하는 오픈 표준입니다.
쉽게 말해, **"AI 에이전트용 플러그인 시스템"**이라고 생각하면 됩니다.
핵심 개념
📁 my-skill/
├── SKILL.md # 에이전트가 읽는 지침서
├── scripts/ # 자동화 스크립트 (선택)
└── references/ # 참고 문서 (선택)
스킬은 단순한 폴더입니다. SKILL.md 파일에 에이전트가 따라야 할 지침을 작성하면, 에이전트가 관련 작업을 할 때 자동으로 이 지식을 활용합니다.
왜 중요한가?
| 기존 방식 | Agent Skills |
|---|---|
| 매번 컨텍스트 설명 | 한 번 설정, 자동 적용 |
| 에이전트마다 다른 포맷 | 오픈 표준으로 호환 |
| 임시적인 지식 | 버전 관리 가능 |
| 개인 노하우 | 팀 전체 공유 |
Progressive Disclosure (점진적 공개)
Agent Skills의 핵심 설계 원칙입니다.
- 시작 시: 스킬의 이름과 설명만 로드 (토큰 절약)
- 필요할 때: 관련 작업 감지 시 전체 지침 로드
- 효율적: 20개 스킬을 등록해도 실제로는 필요한 것만 사용
사용자: "React 컴포넌트 성능 검토해줘"
↓
에이전트: react-best-practices 스킬 감지
↓
에이전트: SKILL.md 전체 내용 로드
↓
에이전트: 40+ 규칙 기반으로 코드 리뷰
Vercel Agent Skills 소개
Anthropic이 Agent Skills 표준을 공개한 후, Vercel이 첫 번째 대형 스킬 패키지를 출시했습니다.
10년 이상의 React/Next.js 최적화 경험이 담긴, 실전에서 검증된 스킬들입니다.
제공되는 스킬 3가지
1️⃣ react-best-practices
React/Next.js 성능 최적화의 정수
- 40개 이상 규칙, 8개 카테고리
- 우선순위별 분류 (Critical → Low)
- Vercel 엔지니어링 팀의 실제 경험 기반
| 우선순위 | 카테고리 | 예시 |
|---|---|---|
| 🔴 Critical | Request Waterfalls | 순차 fetch → 병렬 fetch |
| 🔴 Critical | Bundle Size | barrel import 최적화 |
| 🟠 High | Server Components | RSC 활용 패턴 |
| 🟠 High | Data Fetching | 캐싱 전략 |
| 🟡 Medium | Rendering | useMemo/useCallback |
| 🟢 Low | Advanced | Suspense, streaming |
가장 임팩트 있는 규칙 - Request Waterfall 제거:
// ❌ Before: 순차 실행 = 800ms
const user = await fetch('/api/users')
const posts = await fetch('/api/posts')
const comments = await fetch('/api/comments')
// ✅ After: 병렬 실행 = 200ms
const [user, posts, comments] = await Promise.all([
fetch('/api/users'),
fetch('/api/posts'),
fetch('/api/comments')
])
이것만 고쳐도 상당한 성능 향상을 기대할 수 있습니다.
2️⃣ web-design-guidelines
UI/UX 품질 자동 검수
- 100개 이상 규칙
- 수동 리뷰에서 놓치기 쉬운 이슈들을 자동 감지
다루는 영역:
| 영역 | 검사 항목 예시 |
|---|---|
| 접근성 | ARIA 속성, 레이블 연결, 키보드 네비게이션 |
| 폼 | 유효성 검사, 에러 메시지, 포커스 관리 |
| 애니메이션 | prefers-reduced-motion 대응 |
| 타이포그래피 | 가독성, 줄 간격, 폰트 크기 |
| 이미지 | alt 텍스트, lazy loading, 포맷 최적화 |
| 다크 모드 | 색상 대비, 테마 전환 |
| 국제화 | RTL 지원, 번역 가능성 |
| 터치 | 터치 타겟 크기, 제스처 |
3️⃣ vercel-deploy-claimable
대화에서 바로 배포
사용자: "이거 배포해줘"
↓
에이전트: 프로젝트 패키징 (node_modules 제외)
↓
에이전트: 프레임워크 자동 감지 (40+ 지원)
↓
에이전트: Vercel에 배포
↓
출력:
Preview URL: https://my-app-abc123.vercel.app
Claim URL: https://vercel.com/claim-deployment?code=...
특징:
- 인증 불필요
- "Claimable" 배포 - 나중에 본인 계정으로 소유권 이전 가능
- Next.js, Vite, Astro, SvelteKit 등 40+ 프레임워크 지원
지원 에이전트
Agent Skills는 오픈 표준이라 다양한 에이전트에서 사용 가능합니다.
| 에이전트 | 지원 상태 | 스킬 디렉토리 |
|---|---|---|
| Claude Code | ✅ 정식 | ~/.claude/skills/ |
| Gemini CLI | ✅ 정식 | ~/.gemini/skills/ |
| Cursor | ✅ 지원 | .cursor/skills/ |
| OpenCode | ✅ 지원 | ~/.opencode/skills/ |
| 그 외 | Codex, VS Code, Amp 등 20+ | agentskills.io 참조 |
💡 같은 스킬, 여러 에이전트: 심볼릭 링크로 공유하면 한 번 설치로 모든 에이전트에서 사용 가능합니다. (Part 2에서 자세히 다룹니다)
기존 방식과의 비교
Before: 매번 프롬프트에 포함
"React 컴포넌트 만들어줘.
참고로 우리는 barrel import 안 쓰 고,
Promise.all로 병렬 fetch 하고,
useState 초기값은 lazy init 쓰고,
무거운 컴포넌트는 dynamic import 하고..."
매번 이걸 다 적을 수 없죠.
After: Agent Skills
"React 컴포넌트 만들어줘"
스킬이 알아서 최적화된 코드를 생성합니다.
마무리
Agent Skills는 AI 코딩 에이전트 생태계의 중요한 발전입니다.
- 개인: 반복적인 컨텍스트 설명에서 해방
- 팀: 코딩 표준과 베스트 프랙티스 자동 적용
- 커뮤니티: 전문 지식의 재사용 가능한 패키징
Vercel의 스킬 패키지는 그 첫 번째 사례이며, 앞으로 더 많은 스 킬들이 등장할 것입니다.
다음 편 예고
- Claude Code, Gemini CLI 설치 방법
- 여러 에이전트에서 스킬 공유하기 (심볼릭 링크)
- 트러블슈팅 가이드
참고 자료
- Agent Skills 공식 사이트
- Vercel Agent Skills GitHub
- Vercel Blog: React Best Practices
- Agent Skills Specification