매번 @ 붙이기 귀찮으셨죠? '에이전트 스킬'로 AI랑 진짜 팀원처럼 일하기

안녕하세요, 쿼카랩스의 단테입니다! 🐾

요즘 Cursor나 Claude 같은 AI 코딩 어시스턴트 많이들 쓰시죠? 저도 매일 끼고 사는데요. 어느 날 문득 이런 생각이 들더라고요. "아, 매번 똑같은 규칙 알려주기 너무 귀찮은데? 이거 좀 알아서 하면 안 되나?"

파일 하나하나 @로 찍어주면서 "이 규칙 지켜줘", "저 컨벤션 따라줘"라고 말하는 게 가끔은 잔소리처럼 느껴질 때가 있거든요. 그러던 중 Vercel에서 흥미로운 발표를 하나 했어요. 바로 **'React Best Practices Agent Skill'**인데요.

이걸 보고 "아, 이거다!" 싶어서 **프롬프트 멘션(@파일)**과 **에이전트 스킬(Agent Skill)**이 도대체 뭐가 다른지, 왜 우리가 스킬에 주목해야 하는지 가볍게 수다 떨듯 정리해 보려고 합니다.

🔗 궁금하신 분들은 Vercel 공식 블로그도 한번 읽어보세요!

요즘 우리가 AI랑 대화하는 법 (feat. @의 굴레)

우리는 보통 AI에게 이렇게 일을 시키죠.

"React 컴포넌트 하나 짜줘. 아, 그리고 저번에 만들어둔 @react-conventions.md 파일 규칙 꼭 지키고!"

이게 바로 프롬프트 멘션 방식이에요. 직관적이고 편하긴 한데, 쓰다 보면 은근히 손이 많이 가요. 마치 매번 신입 사원에게 "매뉴얼 3페이지 펴고 일하세요"라고 옆에서 지켜보는 기분이랄까요?

반면 에이전트 스킬은 결이 좀 달라요.

npx add-skill react-best-practices

이렇게 한 번만 딱 심어주면 끝이에요. 그다음부터는 AI가 상황을 보고 **"아, 지금 React 짜는구나? 그럼 내 주머니에 있는 React 모범 사례 스킬을 써야지!"**라고 스스로 판단하는 거죠.

프롬프트 멘션: 시키는 대로만 하는 똑똑한 비서

프롬프트 멘션은 AI에게 직접 자료를 쥐여주는 방식이에요.

써보면서 느낀 장단점

• 장점: 정말 쉬워요. 그냥 @ 치고 파일 선택하면 끝! 어떤 규칙을 참고하고 있는지 눈에 딱 보이니까 안심도 되고요.
• 아쉬운 점:
  1. 금방 까먹어요: 대화가 좀만 길어지면 "아까 말한 규칙 뭐였죠?" 하는 순간이 와요. 뇌 용량(컨텍스트)이 꽉 차서 정작 중요한 규칙이 뒤로 밀려나거든요.
  2. 눈치(?)가 없어요: "성능 최적화도 해줘"라고 말 안 하면, 규칙 파일에 써 있어도 대충 넘어갈 때가 있어요.
  3. 토큰이 아까워요: 매 질문마다 똑같은 파일을 통째로 읽어대니, AI 사용료(토큰)가 아깝다는 생각도 슬쩍 들죠. 😅

에이전트 스킬: 알아서 센스 있게 행동하는 팀원

에이전트 스킬은 AI의 '도구함'에 아예 지식을 넣어주는 거예요.

스킬을 쓰면 뭐가 좋아질까요?

1. "나 이거 알아요!" (자율적 판단): 우리가 일일이 파일을 안 줘도 돼요. AI가 코드를 보다가 "어? 이거 React 컴포넌트네? 내가 가진 리액트 스킬 좀 써볼까?" 하고 스스로 꺼내 씁니다. 이게 진짜 '에이전트'답다고 느껴지는 지점이에요.

2. 똑똑한 자원 관리: 규칙 파일을 통째로 들이붓는 게 아니라, 지금 필요한 부분만 골라서 참고해요. 덕분에 대화가 길어져도 중요한 규칙을 놓치지 않고, 토큰도 훨씬 아낄 수 있죠.

3. 진짜 실력이 늘어난 느낌: 단순히 코드 모양만 흉내 내는 게 아니라, 그 규칙이 왜 필요한지를 이해하고 적용하는 느낌을 줘요. 마치 시니어 개발자가 옆에서 가이드 해주는 기분이 듭니다.

한눈에 비교해 볼까요?

예를 들어볼게요 (모달 컴포넌트 만들기)

그냥 "@파일"로 시키면 AI는 겉모양은 그럴싸한 모달을 만들어요. 하지만 에이전트 스킬(예: Vercel React Best Practices)이 장착된 AI는 다릅니다.

• 포커스 트랩(모달 열렸을 때 탭 키 이동 제한)은 넣었는지,
• ESC 키로 닫기는 되는지,
• 스크린 리더를 위해 aria-label은 붙였는지...

이런 '한 끗 차이'를 우리가 일일이 잔소리하지 않아도 알아서 챙겨준다는 게 진짜 감동 포인트예요. 🥹

Cursor 쓰는 분들이라면?

이미 Cursor의 Agent Skills 시스템으로 이걸 체험해 보실 수 있어요. .cursor/skills/ 폴더에 SKILL.md 파일을 만들어두면, Cursor 에이전트가 "아, 이 프로젝트에선 이런 스킬이 필요하구나!"라고 인지합니다.

나만의 스킬을 하나씩 쌓아가는 재미가 꽤 쏠쏠해요.

마치며: 이제 AI를 길들여(?) 봅시다

프롬프트 멘션에서 에이전트 스킬로 넘어가는 건, 단순히 기술이 바뀌는 게 아니라 AI와 일하는 방식이 성숙해지는 과정인 것 같아요.

처음에는 하나하나 가르쳐줘야 하는 '인턴' 같았다면, 이제는 도구함을 가득 채워준 '든든한 파트너'로 대우해주는 거죠. 여러분도 매번 똑같은 파일을 @로 불러오느라 고생하셨다면, 이번 기회에 '스킬'의 세계로 발을 들여보시는 건 어떨까요?

앞으로 프론트엔드뿐만 아니라 테스트, 배포, 인프라까지 다양한 분야의 '스킬'들이 쏟아져 나올 텐데, 벌써부터 기대가 되네요! 🚀

혹시 궁금한 점이 있거나, 나만의 멋진 스킬 활용법이 있다면 댓글로 공유해 주세요! 지금까지 단테였습니다. 감사합니다! :)

💡 짧은 요약

• 프롬프트 멘션: 간단한 일회성 작업, 매번 직접 알려주기.
• 에이전트 스킬: 반복적인 프로젝트 규칙, AI가 알아서 눈치껏 적용하기.
• 결론: 자주 쓰는 규칙은 무조건 '스킬'로 만들어서 AI에게 주자!

• 🔗 Vercel GitHub - agent-skills
• 🔗 이전 포스팅: oh-my-opencode 기여 일기