v0으로 프론트엔드 만들기, 어디까지 되나

"이거 그냥 v0한테 시키면 안 되나?"

회사에서 어드민 대시보드를 새로 만들 일이 생겼다. 디자이너가 피그마로 준 시안이 18페이지. 이걸 보고 있으니까 옆 자리 동료가 말했다. "요즘 v0 좋다던데, 그냥 넣어볼래?"

솔직히 반신반의했다. AI가 프론트엔드를 만들어준다? 근데 마침 마감까지 시간이 있어서 실험을 해보기로 했다. 피그마 시안 중 가장 복잡한 대시보드 메인 페이지를 v0에 넣어봤다.

프롬프트를 꽤 자세하게 썼다. "사이드바가 있는 대시보드 레이아웃, 상단에 KPI 카드 4개, 중간에 차트 2개, 하단에 최근 주문 테이블. 다크 테마. shadcn/ui 사용." 이 정도.

7초 만에 결과물이 나왔다. 레이아웃은 맞았다. KPI 카드도 있고 차트도 있었다. 전체적인 구조가 피그마 시안이랑 70% 정도 비슷했다. "오?" 하는 감탄이 나왔다.

근데 여기서부터 문제가 시작됐다.

색상이 달랐다. 피그마에서 primary가 #2563eb인데 v0이 만든 건 #3b82f6이었다. 미묘하게 다른데 디자이너 눈에는 확 보인다. 폰트 사이즈도 달랐다. 카드 간격, 패딩, 보더 라디우스. 이런 것들이 전부 "비슷하지만 다르다."

피그마 URL을 직접 넣어봤다. "이 디자인과 정확하게 같게 만들어줘." 결과가 조금 나아지긴 했는데, 여전히 픽셀 퍼펙트는 아니었다. 차이를 수정하는 데 2시간이 걸렸다. 처음부터 직접 짰으면 3시간이었을 것 같다. 절약한 시간은 1시간. (이게 의미가 있나.)

데스크탑 레이아웃은 나쁘지 않았다. 근데 모바일 뷰가 엉망이었다. 사이드바가 그냥 사라져버리거나, 차트가 화면 밖으로 삐져나오거나. "모바일에서도 잘 동작하게 해줘"라고 추가 프롬프트를 넣으면 데스크탑 레이아웃이 깨졌다.

결국 반응형은 전부 직접 했다. Tailwind 브레이크포인트를 하나하나 잡는 게 가장 정확하다. 이건 아직 AI가 잘 못하는 영역인 것 같다.

생성된 코드를 뜯어봤다. 일단 TypeScript 타입이 거의 any거나 없다. 컴포넌트 분리도 하나의 파일에 다 때려넣은 수준이었다. 400줄짜리 단일 컴포넌트. 이걸 프로덕션에 그대로 쓸 수는 없다.

좋은 점은, shadcn/ui 컴포넌트를 적절하게 가져다 쓴다는 거다. Button, Card, Table 같은 걸 잘 활용한다. 근데 커스텀 로직이 들어가면 품질이 급격히 떨어진다. 특히 상태 관리. useState를 남발하고 불필요한 리렌더링이 곳곳에 있다.

내 결론은 이렇다.

프로토타입. 기획자한테 "대충 이런 느낌입니다" 보여주는 용도로는 완벽하다. 5분 만에 그럴듯한 화면이 나오니까. 우리 팀에서 실제로 기획 미팅 전에 v0으로 프로토타입을 뽑아서 보여줬는데 반응이 좋았다.

디자인 시스템 탐색. "이런 레이아웃은 어떨까?" 하고 아이디어를 빠르게 확인하는 용도. 여러 가지 변형을 빠르게 만들어볼 수 있다.

프로덕션 코드. 아직 아니다. 코드 품질, 반응형, 접근성. 이런 것들이 전부 수동 작업이 필요하다.

어드민 대시보드는 결국 90%를 직접 코딩했다. v0이 준 건 초기 레이아웃 아이디어와 일부 UI 패턴 정도. 솔직히 v0 없이도 만들 수 있었다.

근데 하나 인정할 건, 시작하기가 쉬워진다는 거다. 빈 파일을 앞에 놓고 "어디서부터 시작하지" 하는 순간이 사라진다. 일단 v0이 뭔가를 만들어주고 거기서 고치는 방식은 심리적으로 편하다. (빈 캔버스 공포증 같은 거.)

6개월 뒤에 다시 써봐야겠다. 발전 속도가 빠르니까. 근데 지금 당장은 내 손이 더 빠르고 정확하다.