Vibe Coding의 문제점: AI 코드 생성기가 항상 배포하는 7가지 시각적 버그

당신은 Lovable 앱을 배포했습니다. 작동도 잘 됩니다. 버튼은 클릭되고, 양식은 제출되며, 데이터는 흐릅니다.

그런데 휴대폰으로 앱을 열어보니 히어로 섹션(hero section)이 내비게이션(nav)과 겹칩니다. 혹은 브랜드 블루 색상이 아닌 버튼을 눈을 가늘게 뜨고 쳐다보게 됩니다. 아니면 스크린 리더(screen reader)가 아무런 유용한 정보도 읽어주지 않습니다.

이것은 당신의 문제가 아닙니다. Jason Arbon의 테스트에 따르면 AI가 생성한 앱당 약 160개의 문제가 발견되었으며, 그중 대다수는 기능적 버그가 아닙니다. 그것들은 레이아웃(layout), 간격(spacing), 접근성(accessibility), 색상(color)과 같은 시각적 문제입니다.

어떤 도구로 만들었든 상관없이, 모든 AI 생성 코드베이스에서 나타나는 7가지 카테고리는 다음과 같습니다.

1. 간격 드리프트 (Spacing Drift)

AI는 디자인을 근사치로 구현하는 Tailwind 유틸리티를 기본값으로 사용합니다. 24px 사양은 한 곳에서는 gap-4(16px)가 되고, 다른 곳에서는 gap-8(32px)이 됩니다.

모델은 정확한 값이 아니라 사용 가능한 가장 가까운 클래스를 선택합니다. 이를 50개 이상의 컴포넌트(component)에 적용하면, 단일 요소가 명백히 잘못되지 않았음에도 레이아웃이 "어딘가 어색한" 느낌을 줍니다.

2. 색상 불일치 (Color Inconsistency)

표준 팔레트를 벗어난 브랜드 색상은 가장 유사한 색상으로 대체됩니다. 당신의 브랜드 블루(#2563EB)가 버튼, 링크, 내비게이션 요소 전반에 걸쳐 세 가지 다른 색조로 나타납니다.

이는 모델이 단일 진실 공급원(single source of truth)을 참조하기보다 문맥(context)으로부터 색상을 추론하기 때문에 발생합니다. 매 생성 단계마다 새로운 근사치가 도입됩니다.

3. 누락된 반응형 중단점 (Missing Responsive Breakpoints)

AI는 Tailwind의 기본값인 640px, 768px, 1024px, 1280px를 사용합니다. 레이아웃은 834px(iPad 세로 모드) 또는 900px(사이드바가 있는 일반 노트북 뷰포트)와 같은 중간 너비에서 깨집니다.

사용자가 커스텀 중단점(custom breakpoints)을 명시적으로 프롬프트(prompt)하지 않는 한, 실제 사용자가 해당 지점에 도달했을 때만 이러한 간극을 발견하게 될 것입니다.

4. 접근성 실패 (Accessibility Failures)

WebAIM Million 연구에 따르면 홈페이지의 95.9%가 WCAG 실패를 겪고 있으며, 페이지당 평균 56.8개의 오류가 발생합니다. AI 생성 코드는 명시적인 프롬프트가 없는 한 모델이 시맨틱 HTML(semantic HTML)과 ARIA를 후순위로 미루기 때문에 이 기준치보다도 성능이 낮습니다.

누락된 alt 텍스트, 불충분한 색상 대비, 레이블이 없는 폼 입력(form inputs), 깨진 포커스 순서(focus order). 이것들은 예외적인 사례가 아닙니다. 이것들이 기본 출력값입니다.

5. 타이포그래피 불일치 (Typography Mismatches)

AI는 text-base (16px/24px)를 생성하지만 자간(letter-spacing), 글꼴 두께(font weights), 또는 커스텀 글꼴 임포트(custom font imports)는 무시합니다. 당신의 디자인 사양(spec)이 Inter 글꼴을 두께 500과 -0.02em의 트래킹(tracking)으로 지정했을 수도 있습니다. 하지만 결과물은 기본 트래킹을 가진 두께 400의 시스템 글꼴을 받게 될 것입니다.

6. 호버 및 포커스 상태의 공백 (Hover and Focus State Gaps)

AI는 기본 컴포넌트 상태를 생성하지만, 호버(hover), 포커스(focus), 액티브(active), 비활성화(disabled) 변형(variants)은 빈번하게 누락합니다. 호버에 반응하지 않는 버튼은 고장 난 것처럼 느껴집니다. 포커스 상태가 누락되면 키보드 내비게이션(keyboard navigation)이 불가능해집니다.

7. Z-Index 혼돈 (Z-Index Chaos)

Z-index 값에는 전역적인 스태킹 전략(stacking strategy)이 결여되어 있습니다. 모달(Modals)이 내비게이션 바(navbars) 뒤에 렌더링됩니다. 툴팁(Tooltips)이 인접한 섹션 뒤로 잘려 나갑니다. 드롭다운(Dropdowns)이 히어로 이미지(hero images) 아래로 사라집니다.

모든 컴포넌트가 조정된 시스템 대신 임의의 z-index를 부여받습니다.

모든 도구에서 이런 일이 발생하는 이유

Arbon의 테스트 결과, Bolt.new와 Lovable의 버그 수 사이의 p-value는 0.7199로 나타났습니다. 통계적으로 동일한 수준입니다. 어떤 단일 AI 도구도 다른 도구보다 유의미하게 뛰어난 성능을 보이지 않는데

AI 코드 생성기(AI code generators)를 사용하면서 어떤 시각적 버그(visual bugs)를 경험하셨나요? 다른 분들도 동일한 패턴을 보고 계신지 궁금합니다.