지난 1월, Vercel의 CEO 기예르모 라우흐(Guillermo Rauch)가 X를 통해 AI 에이전트를 위한 패키지 관리자 skills를 발표했습니다. 개발자가 npm으로 라이브러리를 설치하듯, AI에게 필요한 능력을 명령어 한 줄로 설치할 수 있는 생태계를 만들겠다는 구상입니다.

그 중 하나인 react-best-practices를 실제 프로젝트에 적용해 성능이 어떻게 달라지는지 직접 확인해 보기로 했습니다. 단순 before/after 비교에 그치지 않도록, GitHub Actions 기반 AI 코드 리뷰에 룰셋을 연결했습니다. 그렇게 PR 단계에서 성능 검증이 자동으로 이루어지는 프로세스를 구축하는 과정까지 함께 다루어 보겠습니다.

1. AI 에이전트의 npm, skills의 등장

본격적으로 적용 예시를 보기 전, Vercel이 발표한 skills가 무엇인지 살펴보겠습니다. Vercel의 Skills는 AI 에이전트가 자동으로 발견하고 사용할 수 있도록 지침, 스크립트, 리소스를 패키징한 재사용 가능한 오픈 포맷의 스킬 패키지입니다. 이 생태계는 크게 세 가지로 구성됩니다. 스킬을 설치하는 CLI 도구, 표준화된 스킬 정의 포맷, 그리고 이를 검색할 수 있는 레지스트리입니다.

그러한 스킬들을 한곳에서 모아볼 수 있는 허브가 skills.sh입니다. 여기에서는 인기 스킬 순위를 실시간으로 확인할 수 있습니다. Vercel Labs가 만든 도구들뿐 아니라, Anthropic 등 다양한 오픈소스와 기업이 공개한 스킬도 함께 올라와 있어 ‘스킬이 하나의 배포 단위가 되는 흐름’을 체감할 수 있습니다.

이 가운데 특히 눈에 띄는 스킬이 오늘 적용해 볼 react-best-practices입니다. 이 스킬을 실제 프로젝트에 적용하면 어떤 변화가 생기는지, 이제 구체적으로 살펴보겠습니다.

2. 스킬 소개: react-best-practices

react-best-practices는 Vercel 엔지니어링 팀이 10년 이상 축적해 온 React/Next.js 성능 최적화 노하우를 57개 규칙으로 정리한 스킬입니다. 각 규칙은 체크리스트와 Do/Don't 예시 코드로 구성되어 있으며, 영향도(Impact) 중심으로 우선순위가 정렬되어 있어 "무엇부터 고쳐야 성능이 가장 좋아지는가"에 대한 명확한 기준을 제공합니다.

최적화 작업의 우선순위는 왜 중요할까?

이 스킬의 백미는 최적화 작업의 순서를 알아서 알려준다는 점입니다. 개발자들은 종종 useMemo, useCallback 같은 마이크로 최적화(Micro-optimizations)에 과도하게 시간을 쏟곤 합니다. 그러나 이들은 문법적으로는 옳을지 몰라도, 실제 성능 지표에는 미미한 영향만 주는 경우가 많습니다. 이처럼 모든 최적화 작업이 동일한 가치를 지니는 것은 아닙니다.

반면 사용자 경험을 해치는 진짜 주범은 눈에 잘 띄지 않는 구조적 병목에 있습니다. 대표적으로 네트워크 워터폴(Waterfalls)이나 거대한 번들 사이즈 같은 문제가 여기 해당합니다. 이 룰셋은 이처럼 개발자의 시선을 ‘사소한 테크닉’에서 ‘성능에 결정적 영향을 미치는 요소(High Impact)’로 돌려놓습니다. 즉, 가장 치명적인 문제부터 해결하도록 방향을 잡아 주며 최적화의 우선순위를 바로 세워 줍니다.

즉, “가장 적은 노력으로 가장 큰 성능 향상을 이끌어낼 수 있는” 순서대로 등급을 나누어 제시합니다.

주요 최적화 사례(Best Practices)

Promise.all()활용: 작업 간 의존성이 없다면 순차 실행을 동시 실행으로 전환
better-all라이브러리: 일부만 의존성이 섞인 비동기 작업을 더 효율적으로 병렬화
RSC 컴포넌트 합성: 서버 사이드 워터폴을 없애기 위한 병렬 데이터 페칭 구조화

특히 RSC(React Server Components) 같은 작업은 제대로 활용하면 큰 이점을 얻을 수 있지만, 구조가 조금만 어긋나도(의존성, 경계, 조합 방식) 기대했던 효과가 쉽게 사라집니다. react-best-practices는 이런 최적화 포인트를 “규칙”으로 고정해, 개발자가 실수하기 쉬운 지점을 반복적으로 교정할 수 있게 해줍니다.

3. 실전 적용: 프로젝트에 바로 도입해보기

“백문이 불여일타”라고 하죠. 이 스킬을 실제 운영 중인 Next.js 프로젝트에 적용해 보았습니다. 설치는 매우 간단합니다.

npx skills vercel-labs/agent-skills

설치가 완료되면 프로젝트 루트의 .claude 폴더 안에 룰 파일과 메타데이터가 생성됩니다. Claude Code 같은 AI 에이전트는 이 폴더를 자동으로 참조해 코드를 분석합니다.

진단 요청

설치가 끝나고 Claude Code 같은 AI 에이전트에게 다음과 같이 진단을 요청합니다.

이 레포 전체를 대상으로 .claude에 설치된 vercel-react-best-practices 스킬 기준 성능 리뷰를 해줘.

AI는 57개 규칙을 기준으로 코드를 스캔합니다. 그리고 위반 사항을 우선순위(Critical → High → Medium → Low)별로 분류해 구체적인 개선안을 제시합니다. 이번 테스트에서는 4개의 Critical 이슈를 포함해 다수의 High, Medium, Low 이슈가 검출되었습니다.

영향도 중심의 최적화를 검증하기 위해 우선 4개의 Critical 이슈만 수정할 것을 요청했습니다.

적용 결과

단 4개의 Critical 이슈를 수정했을 뿐이지만, 성능 지표에서 유의미한 개선 효과를 확인할 수 있었습니다.

1. 초기 로드 크기 감소(Bundle Size)

가장 눈에 띄는 변화는 번들 사이즈의 다이어트였습니다. 페이지별 초기 로드 JavaScript 크기가 최소 19%에서 최대 70%까지 감소했습니다.

무거운 컴포넌트 격리: 덩치가 큰 팝업(Dialog) 컴포넌트를 별도 청크(Chunk)로 분리하면서, 초기 로딩 시 불필요하게 딸려오던 코드가 제거되었습니다.
정교해진 트리 쉐이킹: Dynamic Import를 적용하자 전체 청크 파일 개수는 늘어났습니다. 그러나 그만큼 브라우저가 꼭 필요한 코드만 내려받게 되면서(Tree-shaking 효율 증가) 결과적으로 초기 로딩 속도가 더 빨라졌습니다.

2. Lighthouse 점수 상승 (UX 개선)

사용자가 체감하는 성능 지표(Core Web Vitals)도 전반적으로 개선되었습니다.

특히 체감도가 큰 LCP는 17% 개선되었고, 상호작용 가능 시간(TTI)은 19% 감소했습니다. 또한 메인 스레드 차단 시간(TBT)은 17% 감소했습니다. 그 결과 전체 Performance 점수도 3점 상승해 77점에서 80점으로 올랐습니다.

Critical 4개 수정만으로 이 정도 변화가 생긴 것을 보니, 문득 이런 생각이 들었습니다. 이 검증 방식을 모든 PR에 자동으로 적용하면 어떨까요?

4. CI/CD 통합: ‘개인기’에서 ‘시스템’으로 바꾸기

AI 활용의 진정한 가치는 단발성 질문과 답변이 아니라 지속 가능한 프로세스를 구축하는 데 있습니다. 한 번의 테스트 점검만으로는 충분하지 않습니다. 코드는 매일 쌓이고, 팀원이 바뀌면 같은 실수가 반복됩니다. 성능 검증이 진짜 효과를 발휘하려면 개발 프로세스 안으로 들어와 있어야 합니다.

그래서 react-best-practices 룰셋을 GitHub Actions 기반 Claude Code Review에 연결해 보기로 했습니다. 앞으로 생성되거나 수정되는 코드가 PR(Pull Request) 단계에서 자동으로 성능 관점의 점검을 받도록 구성하는 방식입니다. 즉, 개발자가 신경 쓰면 좋다지만, 안 하면 놓치는 성능 이슈를 리뷰 프로세스 자체에 내장하는 접근입니다.

*아직 Claude Code Review를 도입하지 않았다면, 무신사의 AI 코드 리뷰 프로세스 구축기를 참고해 보세요.

Shift Left: 왜 검증을 앞단(PR)으로 가져와야 하는가

검증을 프로세스 앞단으로 당기는 것, 이른바 Shift Left 전략입니다. 검증 시점을 배포(Right) 단계가 아니라 개발·리뷰(Left) 단계로 앞당겨야 하는 이유는 분명합니다. 뒤에서 고칠수록 비용이 기하급수적으로 늘어나기 때문입니다.

배포 이후 모니터링 도구(Datadog, Sentry 등)에서 경고를 받고야 대응하면, 원인 추적을 위한 로그 분석부터 재현 환경 구성, 핫픽스 적용과 재배포, 그리고 검증까지 긴 사이클을 반복해야 합니다. 반면 검증 시점을 PR 단계로 앞당기면 병합 전에 문제를 해결할 수 있습니다. 대응을 위한 긴 사이클 자체를 줄일 수 있고, 기술 부채가 쌓이는 속도도 크게 늦출 수 있습니다.

한 줄 짜리 적용법

방법은 단순합니다. 현재 사용 중인 Claude Code Review GitHub Action의 프롬프트에 지침을 한 줄 추가하면 됩니다.

.claude/skills/vercel-react-best-practices 가이드라인을 참고해주세요.

리뷰 품질의 변화

결과는 어땠을까요?

1. 규칙 위반 시: 명확한 근거 제시

이제 리뷰 과정에서 AI는 “Vercel Best Practice 위반”이라는 명확한 근거와 함께 구체적인 개선 방향도 안내합니다. 그 결과 리뷰어의 주관적 의견이 아니라, 검증 가능한 기준 기반의 리뷰가 이루어집니다.

2. 규칙 준수 시: 칭찬의 디테일

당연하지만, 잘 작성된 코드에 대해서도 피드백 방식이 달라집니다. “어떤 Rule을 충족했는지”, 그리고 “해당 규칙의 영향도와 참고 링크”가 리뷰에 함께 등장합니다. 그 결과 리뷰가 훨씬 더 구조화됩니다.

이처럼 스킬 기반 리뷰가 프로세스에 내장되면, 성능 최적화는 더 이상 특정 개발자의 ‘개인기’가 아니게 됩니다. 팀 전체가 함께 공유하는 ‘시스템’으로 자리 잡게 됩니다.

마치며: 성능 최적화, 더 이상 ‘값비싼 선택’이 아닙니다

지금까지 성능 최적화 작업은 늘 개발자의 시간을 담보로 하는 트레이드오프에 가까웠습니다. 기능 개발을 잠시 멈추고 원인을 찾아, 개선안을 설계해 적용하고, 리그레션까지 확인해야만 했기 때문입니다. 게다가 시간이 지나 코드가 쌓이거나 팀 구성이 바뀌면 비슷한 문제가 다시 나타나기 쉬웠습니다. 그래서 성능 최적화는 중요하지만 늘 뒤로 밀리는 일이 되곤 했습니다.

이제는 상황이 달라지고 있습니다. npx skills add 한 줄로 검증된 룰셋을 설치하고 CI에 연결하면, 성능 검증이 개발 프로세스 안에 자연스럽게 녹아듭니다. AI가 코드를 만들고, 또 다른 AI가 정해진 기준에 따라 그 코드를 리뷰합니다. 성능 최적화가 별도의 큰 작업이 아니라, PR 단계에서 자동으로 점검되는 기본 절차가 되는 것입니다. AI 시대에 접어든 지금, 성능 최적화 역시 더는 값비싼 선택이 아닐지도 모릅니다.

여기서 한 발 더 나아가면 어떨까요? Vercel이 제공한 스킬은 여러 개입니다. 이 글에서는 react-best-practices를 중심으로 살펴봤지만, skills.sh에는 지금도 다양한 영역의 스킬이 계속 올라오고 있습니다. 어쩌면 앞으로는 프로젝트의 성격과 상황에 맞는 스킬을 골라 조합하고, AI 에이전트가 이를 일관되게 적용하도록 구성하는 일 자체가 개발자의 새로운 역량이 되지는 않을까요?

예전에는 어떤 라이브러리를 선택하느냐가 개발자의 중요한 판단이었다면, 이제는 어떤 스킬을 조합해 사용할지 결정하는 일 또한 그에 못지않은 판단이 되는 시대가 올지도 모르겠습니다.