[Next.js] AI 에이전트가 Vercel 엔지니어처럼 코드 리뷰를 해준다면? (프론트엔드 성능 최적화 가이드, react-best-practices)

들어가며

클로드 코드를 처음 사용하고 3달이 지난 2026년 현재, 개발하는 방식이 또 완전히 달라졌습니다.

챗GPT에게 질문하고 답변을 받아 직접 코딩하던 ‘AI 어시스턴트’ 방식에서

커서나 클로드 코드 같이 스스로 판단하고 행동하며 작업을 자율적으로 수행하는 ‘AI 에이전트 방식’으로 발전했습니다.

 

많은 기업과 개발자들이 AI 에이전트에 관심을 갖고, 실제 업무에 적극적으로 도입하고 있습니다.

실제로 AI를 잘 다루는 개발자와 그렇지 않은 개발자의 생산성 차이는 매우 큽니다.

 

저는 앞으로 “코딩을 얼마나 잘하는가?”보다, “AI 에이전트를 얼마나 더 잘 다루고 활용할 수 있는가?”가

중요한 핵심 역량이 될 것이라고 생각합니다.

 

최근 Vercel에서 React/Next.js 개발 10년의 노하우가 담긴 react-best-practices를 공개했습니다.

뭐 특별한 프로그램이 아니라 실제 코드 사례가 담긴 마크다운 문서입니다.

 

그냥 읽어도 큰 도움이 되지만, 클로드 코드 같은 AI 에이전트에게 Skill로 주입해서 사용하면

프론트엔드 레전드 시니어 개발자에게 코드 리뷰를 무한대로 요청할 수 있게 됩니다. (물론 토큰 내에서요)

함께 알아봅시다. 😀

 

프론트엔드의 성능 최적화에 대해서

출처: https://imgflip.com/i/6ck6k5

 

‘성능 최적화’는 프론트엔드 개발자에게 있어 아마도 골치 아픈 주제입니다.

앱이 느린데 왜 느린지 모르겠고 성능 개선을 위해 코드 스플리팅, 이미지 & 폰트 최적화, memo와 useCallback 등 다양한 방법을 동원해봅니다.

 

하지만 정작 들인 노력에 비해 웹 바이탈 점수는 크게 좋아지지 않는 경우도 많습니다. 🥲

결국 밀려오는 다음 일감을 처리하기 위해 성능 개선은 뒤로 미룹니다.

 

바로 이런 골치아픈 ‘성능 최적화’ 문제를 AI 에이전트와 함께 검토하고 빠르게 개선해볼 수 있습니다.

 

---

React Best Practices

https://vercel.com/blog/introducing-react-best-practices

Introducing: React Best Practices - Vercel

React의 성능 최적화 작업은 대개 사후 대응적입니다.
앱이 출시되고 나면 앱 속도가 느려진 것처럼 느껴지고 그제서야 팀은 원인을 찾기 시작합니다.
우리는 10년 넘게 운영 중인 코드베이스 전반에서 동일한 근본 원인을 목격해 왔습니다.
-Vercel

 

 

핵심 아이디어: 순서 정하기

대부분의 성능 개선 작업은 너무 낮은 단계에서 시작하기 때문에 실패합니다.

요청 워터폴 때문에 대기 시간이 600ms 증가한다면, 최적화가 아무리 잘 되어 있어도 소용 없습니다.

따라서 최적화 우선순위에 따라서 높은 단계에서 아래 단계로 순서로 진행해야 합니다.

1. 워터폴을 제거합니다.
2. 번들 크기를 줄입니다.
...
~ 8.

 

 

주요 카테고리 및 최적화 우선순위

우선순위	카테고리 (Category)	영향도 (Impact)	접두사 (Prefix)	번역 및 설명
1	Eliminating Waterfalls	CRITICAL (치명적)	async-	워터폴(연쇄 지연) 제거: 데이터 요청이 꼬리에 꼬리를 물고 늦어지는 현상 방지
2	Bundle Size Optimization	CRITICAL (치명적)	bundle-	번들 크기 최적화: 자바스크립트 파일 용량을 줄여 초기 로딩 속도 개선
3	Server-Side Performance	HIGH (높음)	server-	서버 사이드 성능: SSR이나 API 응답 등 서버 측 처리 효율화
4	Client-Side Data Fetching	MEDIUM-HIGH (중상)	client-	클라이언트 데이터 페칭: 브라우저에서 데이터를 가져오는 방식 최적화
5	Re-render Optimization	MEDIUM (보통)	rerender-	리렌더링 최적화: 불필요한 컴포넌트 재그리기를 방지하여 반응성 향상
6	Rendering Performance	MEDIUM (보통)	rendering-	렌더링 성능: 브라우저가 화면을 그리는 과정(Layout/Paint)의 효율성
7	JavaScript Performance	LOW-MEDIUM (중하)	js-	자바스크립트 성능: 순수 로직 및 알고리즘 실행 속도 개선
8	Advanced Patterns	LOW (낮음)	advanced-	고급 패턴: 코드의 구조나 확장성을 위한 심화 설계 방식

 

성능 개선의 영향도에 따라 CRITICAL 단계부터 LOW 단계까지 8개 카테고리로 분류됩니다.

현재 8개의 카테고리 속에 57개의 규칙이 존재합니다.

 

react-best-practices/rules/async-api-routes.md

 

각 항목별 자세한 내용은 깃허브 레포에 있는 마크다운 문서를 직접 읽어보는 것을 추천합니다. 👍

 

---

클로드 스킬(Claude Skills)로 사용하기

설치 방법

# 설치
npx add-skill vercel-labs/agent-skills

 

명령어 입력 시 4가지 스킬 선택 화면이 나옵니다.

1. vercel-composition-patterns : 컴포넌트 간의 의존성 복잡도를 깔끔하게 정리하는 방법을 제공합니다.
2. vercel-react-best-practices : 리액트 최적의 실무 관행
3. vercel-react-native-skills : 리액트 네이티브(앱)을 위한 기술 모음
4. web-design-guidelines : UI/UX를 만드는 기준

저희는 2번을 선택할 거지만, 다른 스킬들도 굉장히 매력적이네요. 다음에 기회가 된다면 사용해 보고 포스팅하겠습니다. 😀

 

/skills

폴더에 저장 됨

 

설치가 완료되면 /skills 명령어를 통해 클로드 스킬을 확인할 수 있습니다.

물론 컴퓨터에 마크다운 파일이 설치된 것이기 때문에, 폴더에서도 확인 가능합니다.

 

 

코드 리뷰 요청하기

(컴포넌트 태그) vercel-react-best-practices 코드 리뷰

 

이렇게 명시적으로 스킬 이름을 적어주면 클로드 코드가 SKILL.md 상단의 YAML 프론트 메터를 참조하여 계획을 세우고 작업을 실행합니다.

* YAML 프론트 메터 예시
---
name: my-skill
description: 이 기술이 하는 것
disable-model-invocation: true
allowed-tools: Read, Grep
---

 

코드 리뷰 결과 확인하기

위에서 언급한 성능 최적화 우선순위에 따라 솔루션을 제안합니다.

클로드 코드가 Vercel 시니어 엔지니어로 거듭난 순간입니다. 🥲

 

❯ 1번 2번 적용하고, 전후 측정 결과 얼마나 개선되었는지 알려줘

 

하나의 컴포넌트만 태그해서 테스트한 건데, 번들 크기를 14.8%나 개선할 수 있었습니다.

무엇을, 어떻게, 왜 수정했는지 추가적으로 질문하면 더 좋습니다.

참고로 결과 측정은 약 13분이 걸렸는데, 토큰도 아깝고 CLI나 툴을 따로 사용해 직접 측정하는 것이 좋아 보입니다.

 

이제 시니어 개발자의 코드 리뷰를 눈치 보지 않고 토큰이 허용하는 내에서 무한대로 받아볼 수 있게 되었습니다 ! 🥳

 

마치며

MCP부터 클로드 스킬까지 요즘 LLM을 더 다양하게, 더 잘 활용하는 방법이 굉장히 빠르게 나오고 있습니다.

불과 1~2년 사이에 AI의 발전 속도가 정말 말이 안 되는데요 😂

 

저는 개인적으로 밥그릇 뺏길까 봐 걱정인 건 당연히 있지만, (이미 뺏긴 것 같습니다.)

한편으로는 기술의 경계가 사라지고 아이디어만 있어도 러닝 커브 없이 빠르게 뭔가를 만들 수 있다는 게

설렘으로 다가오는 것 같습니다.

여러분은 어떠신가요?!

---

 

---

참고 문헌:

https://vercel.com/blog/introducing-react-best-practices