Vercel 공식 「React Best Practices」 Skills로 코드가 어떻게 변하는지 시도해 보았다

AI를 사용한 프론트엔드 개발이 당연해지는 가운데, "일단 돌아가는 코드"는 누구나 순식간에 생성할 수 있게 되었습니다. 하지만 불필요한 재렌더링 (Re-rendering) 방지나 접근성 (Accessibility) 확보 등, 실제 운영에 견딜 수 있는 "품질 높은 코드"를 AI에게 한 번에 쓰게 하는 것은 의외로 어렵다고 느끼고 있습니다.

그러던 중, Vercel에서 「React Best Practices」가 발표되었습니다. AI 에이전트(AI Agent)나 LLM을 위해 최적화된 구조화된 리포지토리(Repository)입니다.

우리는 10년 이상에 걸친 React와 Next.js의 최적화에 관한 지식을 react-best-practices, AI 에이전트와 LLM을 위해 최적화된 구조화된 리포지토리에 집약했습니다.

(Introducing React Best Practices 중에서)

이 공식 Skill을 활용함으로써, AI가 "Vercel의 탑 엔지니어의 지견"을 가진 상태로 코드를 작성해 주게 됩니다.

이것을 사용하면 React에 익숙하지 않은 팀이라도 개발이 편해지지 않을까? 라는 생각이 들어서, 범용적인 Button 컴포넌트를 만들어 비교해 보았습니다.

이번에는 프론트엔드 개발에서도 친숙한 "범용적인 Button 컴포넌트"를 예로 들어, 일반적인 AI 생성 코드와 Vercel의 Skill을 적용한 AI 생성 코드를 비교해 보았습니다.

※ 이번 검증 환경

• 도구: GitHub Copilot CLI
• 모델: Claude 4.6 Sonnet

npx skills add vercel-labs/agent-skills

먼저, 특별히 아무런 컨텍스트 (Context)를 주지 않고 "범용적인 Button 컴포넌트를 만들어줘"라고 지시했을 경우의 코드 (Button1)입니다.

import type { ButtonHTMLAttributes } from "react";
type Variant = "primary" | "secondary" | "danger";
type Size = "sm" | "md" | "lg";
...

다음으로, Vercel의 React Best Practices Skill을 읽어들인 상태에서 동일한 지시를 내렸을 때의 코드 (Button2)입니다.

import { memo } from "react";
export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
export type ButtonSize = "sm" | "md" | "lg";
...

실제로 이 두 가지 코드를 Vercel Skill을 가진 AI 스스로 리뷰 및 비교하도록 했습니다.

리뷰 결과에서도 알 수 있듯이, 단순한 스타일링의 차이뿐만 아니라 React의 설계 사상에 기반한 명확한 차이가 나타났습니다.

훌륭한 점 (타입의 재사용성과 접근성)

Button2는 Props뿐만 아니라 ButtonVariant 등의 타입도 export하고 있어, 부모 컴포넌트로부터의 확장성이 고려되어 있습니다. 또한, focus:outline-none으로 인한 마우스 조작 시의 포커스 링 (Focus Ring) 문제를 focus-visible을 사용하여 적절히 해결하고 있습니다.

찬반양론인 점 (과도한 최적화)

Button2는 React.memo를 사용하고 있습니다. Vercel Skill은 이를 "최적화"로서 높게 평가하지만, 범용적인 작은 컴포넌트에 대해서는 "과잉 (Over-engineering)\

AI에게 처음부터 모든 것을 작성하게 하면, 프로젝트 규모에 따라서는 약간 오버스펙 (Over-specification, 과잉 최적화)이라고 느껴지는 코드가 출력될 수도 있습니다. 따라서 우선은 자신들이 작성한 심플한 코드에 대해, "접근성 (Accessibility) 측면에서 부족한 부분은 없는가?", "최적화할 수 있는 포인트는 있는가?"와 같이 AI에게 리뷰를 요청하는 방식의 활용법도 궁합이 좋을 것 같습니다.

AI가 제시해 주는 Vercel의 고도화된 지견을 참고하면서, 실제 프로젝트의 유지보수성 (Maintainability)에 맞춰 필요한 항목을 유연하게 도입해 나가는 것. 그런 활용법도 좋을지도 모릅니다.

매우 간단하게 도입할 수 있으므로, 관심이 있는 분들은 꼭 자신의 프로젝트에서 시도해 보시기 바랍니다.