Lovable로 만든 사이트 수정이 안 될 때: 비개발자 체크리스트
Lovable로 만든 사이트가 원하는 대로 수정되지 않거나 모바일, 데이터, 배포 단계에서 막힐 때 비개발자가 먼저 확인할 수 있는 기준을 정리했습니다.
Lovable은 비개발자가 서비스를 처음 만들 때 꽤 편한 도구입니다. 프롬프트를 넣으면 화면이 빠르게 나오고, 기본 디자인도 나쁘지 않습니다. 그래서 랜딩페이지, 예약 폼, 작은 SaaS의 첫 버전을 만드는 데 많이 씁니다.
문제는 "처음 만드는 것"보다 "원하는 대로 고치는 것"에서 자주 생깁니다. 버튼 하나만 바꾸고 싶은데 전체 레이아웃이 달라지거나, 모바일만 고치려 했는데 데스크톱이 깨지거나, 데이터 저장이 안 되는데 어디를 봐야 할지 모르겠는 상황입니다.
이 글은 Lovable을 더 잘 쓰는 팁이라기보다, 수정이 안 먹힐 때 어디서부터 확인하면 좋을지 정리한 체크리스트입니다.
1. 수정 요청이 너무 넓지 않은지 보기
Lovable에서 가장 흔한 실수는 한 번에 너무 많은 것을 시키는 것입니다.
"전체적으로 더 예쁘게 만들고, 모바일도 고치고, 예약 기능도 안정적으로 해줘" 같은 요청은 사람에게도 넓습니다. AI는 이걸 해결하려고 여러 파일과 구조를 동시에 바꾸다가 잘 되던 부분까지 건드릴 수 있습니다.
수정 요청은 작게 잘라야 합니다.
- 모바일에서 카드가 화면 밖으로 나가는 문제만 고쳐줘.
- 예약 완료 버튼을 누른 뒤 완료 메시지만 보이게 해줘.
- 헤더 문구와 CTA 버튼 문구만 바꿔줘.
- 기존 색상과 레이아웃은 유지하고 간격만 줄여줘.
Lovable이 계속 엉뚱하게 고친다면 도구가 나쁜 것이 아니라, 요청 범위가 너무 클 수 있습니다.
2. 잘 되던 상태를 저장해뒀는지 확인
AI 빌더에서 수정하다 보면 어느 순간 이전이 더 나았다는 생각이 듭니다. 그런데 어디서부터 망가졌는지 기억이 안 납니다.
그래서 큰 수정 전에는 반드시 저장 지점이 있어야 합니다. Lovable 안의 버전 히스토리나 GitHub 연동을 활용할 수 있다면 좋습니다. 적어도 중요한 화면은 캡처로 남겨두는 편이 낫습니다.
특히 아래 작업 전에는 저장 지점이 필요합니다.
- 로그인, 결제, 예약 같은 핵심 흐름 수정
- 데이터베이스 연결 변경
- 여러 페이지에 걸친 디자인 변경
- 배포 설정 변경
되돌릴 수 없는 상태에서 AI에게 계속 고치라고 하면, 코드는 점점 더 낯선 모양이 됩니다. 잘 되던 상태를 알고 있어야 안전하게 실험할 수 있습니다.
3. 모바일만 깨지는지, 전체 구조가 깨진 건지 구분
Lovable로 만든 사이트에서 자주 들어오는 문제가 모바일 깨짐입니다. 데스크톱에서는 괜찮은데 휴대폰에서 버튼이 잘리거나, 카드가 너무 넓거나, 폼이 화면 밖으로 나갑니다.
이때 "반응형으로 고쳐줘"라고만 하면 AI가 전체 레이아웃을 다시 짤 수 있습니다. 먼저 문제가 모바일만의 CSS 문제인지, 애초에 구조가 너무 넓게 잡힌 것인지 구분해야 합니다.
확인할 것:
- 특정 섹션만 깨지는가, 모든 페이지가 깨지는가
- 긴 문구가 버튼이나 카드 밖으로 나가는가
- 이미지나 표처럼 고정 너비 요소가 있는가
- 모바일에서 가로 스크롤이 생기는가
가로 스크롤이 생긴다면 보통 어딘가에 화면보다 넓은 요소가 있습니다. 이 경우 전체 디자인을 바꾸기보다 해당 요소의 너비와 줄바꿈만 잡아도 해결되는 경우가 많습니다.
4. 데이터 문제인지 화면 문제인지 나누기
사용자가 폼을 제출했는데 관리자에 데이터가 없으면 모두 "기능이 안 된다"고 느껴집니다. 하지만 원인은 둘 중 하나입니다.
첫째, 실제로 데이터가 저장되지 않는 경우입니다. Supabase나 Firebase 설정, 권한, 환경 변수, 테이블 이름 문제일 수 있습니다.
둘째, 데이터는 저장됐는데 화면이 다시 불러오지 못하는 경우입니다. 이 경우 데이터베이스에는 값이 있는데 관리자 화면만 비어 있습니다.
비개발자도 Supabase 테이블을 열어보면 어느 쪽인지 알 수 있습니다. 테이블에 데이터가 없다면 저장 로직을 봐야 하고, 데이터가 있다면 화면 조회 로직을 봐야 합니다.
이 구분 없이 AI에게 "저장 안 돼"라고 하면, 이미 잘 되는 저장 코드를 건드리고 화면 문제를 더 키울 수 있습니다.
5. 배포된 사이트와 Lovable 미리보기가 같은지 확인
Lovable 미리보기에서는 잘 보이는데 실제 도메인에서는 다르게 보이는 경우가 있습니다. 이때는 수정이 안 된 것이 아니라 배포가 반영되지 않았거나, 운영 환경 설정이 다를 수 있습니다.
확인할 것:
- 마지막 수정 후 실제로 배포를 했는가
- 보고 있는 주소가 최신 운영 도메인인가
- 브라우저 캐시 때문에 예전 화면이 보이는 것은 아닌가
- 환경 변수가 미리보기와 운영 배포에 모두 들어 있는가
특히 로그인, 데이터 저장, 결제는 미리보기와 운영 환경이 다를 수 있습니다. 화면만 보는 문제가 아니라 설정까지 같이 확인해야 합니다.
6. AI가 계속 다른 곳을 바꾸면 멈추기
Lovable에게 같은 문제를 세 번 이상 말했는데 매번 다른 부분을 바꾼다면 잠깐 멈추는 편이 좋습니다.
이때는 보통 AI가 문제 원인을 정확히 잡지 못한 상태입니다. 계속 시키면 작은 버그 하나를 잡으려다 전체 구조가 흔들릴 수 있습니다.
멈춰야 하는 신호는 분명합니다.
- 수정할 때마다 새 문제가 생긴다
- 원래 되던 페이지가 깨진다
- AI가 같은 설명을 반복하지만 결과가 없다
- 데이터, 결제, 로그인처럼 운영에 중요한 영역이다
- 코드가 점점 더 복잡해지는 느낌이 든다
이럴 때는 "더 좋은 프롬프트"보다 현재 상태를 정리하는 것이 먼저입니다.
문의 전에 정리하면 좋은 것
Lovable 사이트 수정을 개발자에게 맡기려면 아래 정보가 있으면 좋습니다.
- Lovable 프로젝트 또는 배포된 사이트 주소
- 문제가 보이는 화면 URL
- 원하는 수정 전후 설명
- 모바일/데스크톱 중 어디에서 깨지는지
- Supabase 등 외부 서비스 사용 여부
- 최근 AI가 수정한 내용
- 이미 시도한 프롬프트나 결과
완벽하게 정리하지 않아도 됩니다. 다만 "이 화면에서 이 버튼을 누르면 이렇게 됩니다" 정도만 있어도 원인 파악이 빨라집니다.
정리
Lovable로 만든 사이트가 수정되지 않을 때는 먼저 문제를 작게 나누세요.
- 요청 범위가 너무 넓은가
- 되돌릴 수 있는 저장 지점이 있는가
- 모바일 CSS 문제인가, 전체 구조 문제인가
- 데이터 저장 문제인가, 화면 조회 문제인가
- 미리보기와 운영 배포가 같은 상태인가
- AI가 세 번 이상 엉뚱한 수정을 반복하는가
Lovable은 빠르게 시작하기 좋은 도구입니다. 다만 운영 중인 사이트를 안정적으로 고치는 일은 다른 문제입니다. 지금 막힌 지점이 분명하다면, 전체를 다시 만들기보다 작은 수정 범위로 해결하는 편이 훨씬 안전합니다.
관련 글: AI로 만든 서비스 유지보수 맡기기 전 확인할 것, 바이브코딩 중 AI가 멈췄을 때 할 수 있는 5가지