문제 해결AI로 만든 앱이 막히는
AI로 만든 앱이 막히는
흔한 지점들
코드·기획, 배포·실행, 디자인 — 바이브코딩에서 자주 막히는 지점을 모았어요. AI한테 물어도 계속 같은 자리라면, 진짜 원인은 대개 눈에 안 보이는 곳에 있습니다.
코드 · 기획
AI가 고치면 다른 기능이 깨짐AI한테 코드 고쳐달라고 하면 다른 데가 깨질 때AI에게 "이 버그 고쳐줘" 하면 그 부분은 되는데, 어제까지 잘 되던 다른 화면이나 기능이 갑자기 안 됩니다. 고치고 깨지고를 반복하며 점점 더 엉킵니다.useEffect 무한 루프화면이 계속 깜빡이거나 무한 로딩될 때 (무한 렌더링)페이지가 계속 깜빡이거나, 네트워크 탭에 같은 요청이 끝없이 쌓이거나, 탭이 느려지다 멈춥니다. 콘솔에 "Maximum update depth exceeded"가 뜨기도 합니다.AI 코드 한 파일에 다 몰림AI가 만든 코드가 한 파일에 다 몰려 손댈 수 없을 때기능은 도는데 page.tsx 하나가 몇백~몇천 줄입니다. 어디에 뭐가 있는지 모르겠고, 한 줄 고치기가 무서워서 새 기능 추가를 못 하겠습니다.
배포 · 실행
supabaseUrl is requiredVercel 배포하면 "supabaseUrl is required" 에러가 날 때로컬(npm run dev)에서는 잘 되는데, Vercel에 배포하면 "Error: supabaseUrl is required."로 빌드가 실패하거나 페이지가 500 에러가 납니다.redirect_uri_mismatchSupabase 구글 로그인 redirect_uri_mismatch 해결로컬에서는 구글 로그인이 되는데, 배포한 사이트에서는 "redirect_uri_mismatch" 또는 콜백에서 인증 실패가 납니다.supabase RLS 데이터 안 보임Supabase에서 데이터가 에러 없이 빈 배열로 올 때 (RLS)supabase.from(...).select() 했는데 error는 null인데 data가 빈 배열([])로 옵니다. 분명 테이블에는 행이 있습니다.로컬은 되는데 Vercel 배포 실패로컬은 되는데 Vercel 배포만 실패할 때 체크리스트로컬에서는 멀쩡히 도는데 Vercel 배포에서만 빌드가 깨지거나, 배포된 사이트에서만 특정 기능이 안 됩니다.Toss 결제 주문 상태 안 바뀜결제는 성공했는데 주문 상태가 안 바뀔 때 (웹훅)결제창에서는 결제가 성공했다고 뜨는데, 내 DB의 주문 상태는 여전히 대기(pending)이고 완료로 안 바뀝니다.
디자인
AI가 만든 UI 촌스러움AI로 만든 화면이 밋밋하고 어디서 본 듯할 때기능은 도는데 화면이 밋밋하고 어딘가 촌스럽습니다. 보라색 그라데이션·둥근 카드·가운데 정렬 등 "AI가 만든 티"가 나고, 잘 만든 서비스처럼 안 보입니다.모바일에서 레이아웃 깨짐PC는 멀쩡한데 모바일에서 레이아웃이 깨질 때PC에서는 잘 보이는데 폰에서 보면 글자·버튼이 화면 밖으로 삐져나가거나, 가로 스크롤이 생기거나, 요소가 겹칩니다.Tailwind 스타일 안 먹음Tailwind 클래스를 넣었는데 스타일이 안 먹을 때className="bg-red-500" 같은 걸 넣었는데 화면에 전혀 반영이 안 됩니다. 어떤 클래스는 되고 어떤 클래스는 무시되기도 합니다.
내 문제가 목록에 없거나 AI한테 물어도 안 풀렸다면 — 에러 로그를 붙여넣으면 AI가 진짜 원인을 짚어드려요.
무료 AI 진단 받기