v0로 만든 UI를 상용 서비스 코드로 바꾸는 리팩토링 절차

v0가 뱉어주는 코드는 첫눈에 근사해 보입니다. 하지만 그 코드를 그대로 프로젝트에 복사해 넣는 순간, 관리가 불가능한 쓰레기 코드가 쌓이기 시작합니다. 한 파일에 수백 줄의 JSX가 엉겨 붙어 있고, 기존 프로젝트의 색상이나 폰트와는 따로 노는 경우도 허다합니다. 1인 개발자가 AI의 속도를 온전히 내 것으로 만들려면, 단순히 코드를 복제하는 게 아니라 엔지니어링 관점에서 다시 조립하는 과정이 필요합니다.

globals.css와 v0 테마 변수 일치시키기

v0 코드를 가져올 때 가장 먼저 터지는 문제는 디자인 불일치입니다. 내 프로젝트는 분명 검은색인데 v0가 가져온 버튼은 미묘하게 푸른빛이 도는 식입니다. Tailwind CSS v4.0으로 넘어오면서 설정 방식이 CSS 변수 중심으로 바뀌었기 때문에, 이제는 tailwind.config.js를 수정하는 대신 프로젝트의 globals.css를 손봐야 합니다.

1. v0 설정 창에서 테마 JSON 데이터를 확인합니다.
2. globals.css의 :root 섹션에 --primary나 --background 같은 변수값을 v0 값으로 덮어씁니다.
3. 다크모드 대응을 위해 .dark 선택자 안의 변수들도 함께 옮깁니다.

이 작업을 거쳐야 수동으로 색상 코드를 일일이 수정하는 노가다를 멈출 수 있습니다. 브랜드 컬러가 시스템 전체에 자연스럽게 스며드는 지점입니다.

덩어리 코드를 원자 단위로 쪼개기

v0는 대시보드 전체를 하나의 파일로 그려버리는 경향이 있습니다. 이걸 그대로 두면 나중에 버튼 하나 고치려고 수천 줄의 코드를 헤매야 합니다. GitHub의 2024년 조사에 따르면 AI가 작성한 코드의 60% 정도를 인간이 구조적으로 리팩토링할 때 가장 높은 생산성이 유지됩니다.

먼저 components/ui 폴더에 버튼, 입력창 같은 최소 단위 컴포넌트(Atoms)를 분리합니다. 이때 tailwind-merge와 clsx를 합친 cn() 유틸리티를 사용하면 인라인 스타일 충돌을 깔끔하게 정리할 수 있습니다. 그다음으로 할 일은 데이터 주입입니다. AI가 박아넣은 가짜 텍스트를 제거하고, Zod로 정의한 Props 인터페이스를 통해 외부에서 데이터를 받도록 구조를 바꿉니다. 일회용 소모품 같던 코드가 재사용 가능한 자산으로 바뀌는 순간입니다.

API 호출과 에러 처리 로직 주입

디자인이 끝났다면 이제 실제 데이터가 흐르게 만들어야 합니다. v0에 프롬프트를 던질 때부터 구체적인 기술 스택을 명시하는 게 유리합니다. "Next.js App Router에서 react-hook-form과 zod를 사용하는 폼을 짜줘"라고 주문하면 훨씬 쓸만한 뼈대가 나옵니다.

1. v0가 만든 가짜 핸들러 함수를 TanStack Query(React Query)나 SWR로 교체합니다.
2. 로딩 상태와 에러 UI를 실제 API 응답과 연결합니다.
3. SWR의 mutate 기능을 써서 사용자가 버튼을 누르자마자 UI가 변하는 낙관적 업데이트를 구현합니다.

정적인 그림에 불과했던 UI가 실제 백엔드와 통신하며 살아 움직이는 서비스가 됩니다. 네트워크 지연을 사용자에게 들키지 않는 매끄러운 경험은 여기서 결정됩니다.

검증 파이프라인으로 코드 품질 지키기

v0와 GitHub을 연동했다고 해서 AI가 만든 코드를 main 브랜치에 바로 꽂는 짓은 위험합니다. 2024년 말 기준 전체 코드의 약 30%가 AI로 작성되고 있지만, 무분별한 통합은 오히려 디버깅 시간을 20% 가까이 늘린다는 통계도 있습니다.

일단 v0/feature-ui 같은 별도 브랜치로 코드를 보낸 뒤 Pull Request를 올립니다. 여기서 GitHub Actions를 활용해 eslint와 prettier를 강제로 돌려야 합니다. 내 프로젝트의 코딩 규칙에 맞지 않는 코드가 잠입하는 걸 막기 위해서입니다. 마지막으로 VS Code의 Diff 기능을 켜고 기존 로직을 덮어쓰지는 않는지 눈으로 확인하며 필요한 부분만 골라 담습니다. AI를 부리되, 최종 승인권은 끝까지 개발자가 쥐고 있어야 프로젝트가 망가지지 않습니다.