AI가 리액트 레거시 코드를 양산하는 이유 (feat. Vercel Agent Skills & React Best Practices)

AI가 짠 리액트 코드, 왜 늘 찜찜할까

리액트를 막 배우기 시작했거나, Next.js와 함께 실무에 투입된 초보 개발자라면 AI 코딩 도구를 한 번쯤은 사용해 보셨을 겁니다. ChatGPT나 Claude에게 컴포넌트를 만들어 달라고 요청하면, 생각보다 그럴듯한 코드가 빠르게 생성됩니다. 화면도 잘 뜨고, 에러도 없으며, 테스트 역시 통과합니다. 겉으로만 보면 “이 정도면 충분한 것 아닌가?”라는 생각이 들기도 합니다.

하지만 코드를 조금만 더 들여다보면 묘한 불안감이 남습니다. useEffect가 여기저기 붙어 있고, 상태와 로직이 전부 클라이언트 컴포넌트에 몰려 있으며, 데이터 페칭 역시 프론트엔드에서 처리되고 있습니다. 강의나 튜토리얼에서 보던 코드와 크게 다르지 않지만, 최근 React나 Next.js에서 이야기하는 방향과는 어딘가 어긋나 보입니다.

“돌아는 가는데, 이게 정말 좋은 코드일까?”라는 질문이 자연스럽게 떠오르는 순간입니다.

이때 많은 분들이 스스로를 탓합니다. “내가 리액트를 아직 잘 몰라서 그런가”, “AI에게 설명을 더 자세히 해야 하나” 같은 고민이 뒤따릅니다. 그러나 이 문제는 개인의 실력이나 프롬프트 작성 능력보다는, AI가 참고하는 기준 자체가 오래된 경우가 많다는 점에서 출발합니다.

AI가 만드는 ‘레거시 리액트 코드’의 구조적 이유

현재 대부분의 AI 코딩 도구는 방대한 공개 코드와 문서를 학습해 왔습니다. 문제는 그 학습 데이터의 상당 부분이 2020~2021년 시기의 리액트 패턴에 머물러 있다는 점입니다. 당시의 리액트는 지금과 구조적으로 다른 부분이 많았습니다.

대표적인 특징을 정리하면 다음과 같습니다.

• 모든 컴포넌트가 기본적으로 클라이언트 컴포넌트였고
• 데이터 페칭은 useEffect가 사실상 표준처럼 사용되었으며
• 서버는 API를 제공하고, 리액트는 이를 받아 렌더링하는 역할에 집중했습니다

하지만 지금의 리액트, 특히 Next.js 환경에서는 상황이 완전히 달라졌습니다. Server Components가 기본이 되는 구조로 이동했고, 데이터 페칭은 서버에서 먼저 처리하는 것이 자연스러운 흐름이 되었습니다. 클라이언트는 정말 필요한 인터랙션만 담당하는 쪽으로 역할이 정리되었습니다.

AI는 여전히 “useEffect부터 쓰는 React”를 정상적인 패턴으로 인식하고 있지만, 실무 기준은 이미 그 단계를 넘어선 상태입니다.

이 간극을 그대로 둔 채 AI에게 코딩을 맡기면, 결과적으로 “지금은 문제없지만 점점 관리하기 어려워지는 코드”, 즉 레거시 코드가 빠르게 쌓이게 됩니다.

이 문제를 Vercel은 어떻게 바라봤을까

Vercel은 이 현상을 단순히 “AI가 아직 충분히 똑똑하지 않아서 생기는 문제”로 보지 않았습니다. 오히려 문제의 핵심은, React Best Practices에 대한 명확한 ‘공식 기준(Skills)’이 AI에게 주어지지 않았다는 점에 있다고 판단했습니다.

AI에게 코드를 맡기다 보면, 개발자는 비슷한 설명을 계속 반복하게 됩니다.

• “이건 클라이언트 컴포넌트가 아니라 서버 컴포넌트로 작성해 주세요.”
• “데이터 페칭은 useEffect 말고 서버에서 처리하는 게 맞습니다.”
• “번들 사이즈를 고려해서 구조를 다시 잡아 주세요.”

이 상황은 프롬프트를 더 잘 쓰면 해결되는 문제가 아닙니다. AI에게 기본적으로 참고해야 할 교과서가 없기 때문에 생기는 구조적인 반복 작업에 가깝습니다.

그래서 Vercel은 접근 방식을 바꿨습니다.

매번 잔소리를 덧붙이는 대신, 그 잔소리 자체를 하나의 Skill로 정의해 AI에게 처음부터 장착시키자는 선택이었습니다. 그 결과물이 바로 Vercel Agent Skills이며, 그 안에 담긴 핵심 내용이 react-best-practices입니다.

Vercel Agent Skills란 무엇인가

Vercel Agent Skills는 새로운 라이브러리나 프레임워크가 아닙니다.

React와 Next.js 코드를 작성하고 리뷰할 때 참고해야 할 ‘판단 기준의 묶음(Skills)’에 가깝습니다.

조금 더 쉽게 풀어보면, 다음과 같은 질문에 대한 Vercel식 답변을 정리한 자료라고 볼 수 있습니다.

• 이 로직은 서버에서 처리하는 편이 나을까
• 이 상태는 정말 클라이언트에 있어야 할까
• 지금 이 useEffect는 구조적으로 필요한 선택일까

Vercel Agent Skills는 AI에게 “어떻게 코드를 쓰라”고 지시하는 도구가 아니라, “어떤 기준으로 판단하라”고 알려주는 도구입니다.

그리고 그 기준의 핵심에 리액트 베스트 프랙티스와 성능 최적화 관점이 자리하고 있습니다.

Vercel Agent Skills 깃허브 바로가기

react-best-practices에 담긴 핵심 리액트 기준들

이 저장소에는 40개가 넘는 규칙이 정리되어 있지만, 처음부터 모두 이해하려고 할 필요는 없습니다. 초보 개발자라면 아래 기준들만 이해해도, AI가 생성하는 React 코드의 구조와 품질이 눈에 띄게 달라지는 것을 체감할 수 있습니다.

Server Components First: 리액트는 서버에서 시작합니다

AI가 작성한 리액트 코드에서 가장 자주 보이는 문제는, 아무 고민 없이 클라이언트 컴포넌트부터 시작한다는 점입니다. 버셀의 리액트 베스트 프랙티스는 이 흐름을 분명히 뒤집습니다.

기본 원칙은 단순합니다.

• 가능한 한 서버 컴포넌트를 기본값으로 유지할 것
• 클라이언트 컴포넌트는 정말 필요한 경우에만 사용할 것

이 기준을 적용하면 다음과 같은 변화가 자연스럽게 따라옵니다.

• 클라이언트 번들 사이즈가 줄어듭니다
• 초기 로딩 성능이 개선됩니다
• “이 상태가 왜 클라이언트에 있지?” 같은 구조적 혼란이 줄어듭니다

특히 초보 개발자에게 이 기준이 중요한 이유는, 초반에 잘못된 구조를 고착화하지 않도록 도와주기 때문입니다.

useEffect는 만능 도구가 아닙니다

AI가 생성한 리액트 코드를 보면, useEffect가 거의 모든 문제를 해결하는 도구처럼 사용되는 경우가 많습니다. 데이터 페칭, 이벤트 등록, 상태 동기화까지 전부 useEffect 안에서 처리됩니다.

버셀의 리액트 베스트 프랙티스는 이 패턴을 분명히 경계합니다.

• 데이터 페칭은 서버에서 처리
• 이벤트 로직은 명시적인 핸들러로 분리
• 사이드 이펙트는 정말 필요한 경우에만 useEffect 사용

이 기준을 AI에게 주입하면, “일단 useEffect부터 쓰는 코드” 대신 역할이 분리되고 예측 가능한 구조의 코드가 나오기 시작합니다.

성능은 숫자만의 문제가 아닙니다

react-best-practices는 성능을 단순한 로딩 시간이나 점수로만 보지 않습니다. Suspense와 Streaming을 활용해 사용자가 빈 화면을 보지 않도록 설계하는 것 역시 성능의 일부로 다룹니다.

이 기준이 중요한 이유는, AI가 UI 구조를 제안할 때도 자연스럽게 반영되기 때문입니다. 결과적으로 성능 최적화와 사용자 경험이 분리되지 않고 함께 고려됩니다.

초보 개발자를 위한, 가장 쉬운 적용 방법

개념을 이해했다면, 이제는 “그래서 어떻게 써야 하나”라는 질문이 남습니다. 다행히 적용 방법은 생각보다 복잡하지 않습니다.

방법 1. Agent Skills로 바로 추가하기

npx add-skill vercel-labs/agent-skills

이 명령어를 실행하면 Vercel Agent Skills를 사용할 준비가 됩니다. Cursor나 Claude 같은 에이전트가 이 Skills를 참조해 React 코드를 작성하거나 리뷰하게 됩니다.

방법 2. 프롬프트에 기준을 명시적으로 포함하기

아직 Agent Skills를 바로 쓰기 어렵다면, 프롬프트만 바꿔도 충분히 효과를 볼 수 있습니다.

예를 들어 다음과 같이 요청해 보세요.

“이 컴포넌트를
Vercel React Best Practices 기준으로 작성해 주세요.
서버 컴포넌트를 우선으로 사용하고,
useEffect는 꼭 필요한 경우에만 사용해 주세요.”

초보 개발자 입장에서는 이 방법이 가장 빠르게 변화를 체감할 수 있는 접근입니다.

방법 3. Cursor 규칙(.cursorrules)에 추가하기

Cursor를 사용 중이라면, react-best-practices 내용을 .cursorrules 파일에 추가해 두는 것도 좋은 방법입니다. 이렇게 설정해 두면, 매번 설명하지 않아도 AI가 기본적으로 React Best Practices와 Skills를 전제로 코드를 작성합니다.

AI를 탓하기보다, Skills를 장착할 시점입니다

리액트와 프론트엔드 생태계는 생각보다 훨씬 빠르게 변합니다. 어제까지 권장되던 패턴이 오늘은 더 이상 추천되지 않기도 합니다. 이 변화를 AI의 기본 학습만으로 따라가기를 기대하는 것은 현실적이지 않습니다.

이제 중요한 것은 “AI를 쓰느냐”가 아니라, “AI에게 어떤 Skills를 장착했느냐”입니다.

Vercel Agent Skills는 그 출발점으로 삼기 가장 적합한 사례입니다.

지금까지 살펴본 Vercel Agent Skills와 React Best Practices는 단순한 팁 모음이 아닙니다.

AI가 리액트 코드를 작성하고 리뷰할 때 어떤 기준으로 판단해야 하는지를 명확히 정의한 시도이며, 특히 초보 개발자에게는 잘못된 패턴을 초반에 고착화하지 않도록 도와주는 안전장치에 가깝습니다.

리액트 코드를 직접 잘 짜는 것만큼이나, 리액트를 잘 이해하는 AI를 어떻게 세팅하느냐가 중요해진 이유도 여기에 있습니다.

정리하며: 기준을 이해한 다음, 남는 질문

그런데 여기서 한 가지 질문이 자연스럽게 남습니다.

“이 기준을 이해하는 것과, 실제 프로젝트나 외주 환경에서 안전하게 적용하는 것은 또 다른 문제 아닌가?”라는 고민입니다. 실제로 많은 팀이 이 지점에서 방향을 잡지 못하고, AI가 만든 코드를 다시 뜯어고치느라 시간을 쓰게 됩니다.

리트머스는 AI·바이브코딩 기반으로 실제 서비스 수준의 제품을 빠르게 구현해 온 외주개발 팀입니다.

React·Next.js 구조 설계 단계에서부터 성능 기준과 보안 리스크를 함께 고려하고, AI가 생성한 코드 역시 사람의 검증 프로세스 안에서 관리해 왔습니다. 그 덕분에 단순히 “빨리 만드는 개발”이 아니라, 속도와 안정성을 함께 가져가는 방식을 유지할 수 있었습니다.

현재 검토 중인 프로젝트가 있다면, 우리 프로젝트가 바이브코딩 외주에 적합한지 검토해드립니다.

필요하다면 6주 MVP 방식이 적절한지도 함께 진단해 드릴 수 있습니다.

함께 읽으면 좋은 글!

바이브코딩 주의할 점? AI 코딩 현실과 프롬프트 예시까지 한 번에 정리

이 글에서는 AI 코딩을 실무에 도입할 때 어디까지를 AI에 맡기고, 어디부터 사람이 책임져야 하는지를 구체적인 사례와 프롬프트 기준으로 설명합니다. 이번 글이 “AI에게 어떤 리액트 기준을 줄 것인가”를 다뤘다면, 이 글은 “그 기준을 어떻게 운영해야 사고를 줄일 수 있는가”에 대한 다음 판단 기준을 제시합니다.

AI와 함께 개발하는 시대일수록, 중요한 것은 도구 자체가 아니라 기준을 설계하고 운영하는 방식입니다.

지금 바로 리트머스에 문의해 보시고, 무료 견적 상담을 통해 우리 프로젝트가 어디까지 가능한지부터 차분히 확인해 보세요!