Lovable 웹사이트를 호스팅하는 방법
Lovable은 React/Vite 앱을 만들어요. 원하는 곳에 호스팅하려면 먼저 정적 파일로 빌드한 뒤 그 결과물을 게시해요. SiteDrop이 빌드 폴더를 받아 라이브 링크를 만들어 줘요.
무료로 사이트 게시하기 →4단계로 게시하기
- Lovable에서 프로젝트 코드를 내보내거나 내려받으세요(또는 GitHub을 연결해 저장소를 내려받으세요).
- 컴퓨터에서 npm install, 이어서 npm run build를 실행해 정적 출력 폴더(보통 dist)를 만드세요.
- dist 폴더 안의 내용을 zip으로 묶으세요. index.html은 zip의 최상위에 있어야 해요.
- zip을 SiteDrop에 업로드하세요.
사용할 수 있는 파일 형식
Lovable은 React/Vite 앱을 만들기 때문에, 호스팅하는 건 빌드된 결과물, 즉 npm run build 이후의 정적 dist 폴더예요. 순수 HTML/CSS/JS라서 문제없이 업로드돼요. 정적으로 호스팅할 수 없는 건 라이브 백엔드에 연결된 것(인증, 데이터베이스, 서버 라우트)인데, 마케팅 사이트나 포트폴리오라면 보통 없어요.
문제가 생기는 경우와 해결 방법
- 프로젝트를 zip으로 묶었더니 빈 페이지가 나와요.
빌드가 아니라 소스를 zip으로 묶었어요. npm install, 이어서 npm run build를 실행하고 dist 폴더 안의 내용을 index.html이 최상위에 오도록 zip으로 묶으세요.
- 빈 페이지가 나오고 콘솔에 /assets/* 404가 보여요.
Vite는 기본적으로 에셋에 절대 경로를 써요. 빌드 전에 vite.config에서 base: './'를 설정해 에셋이 zip 루트에서 찾아지게 한 뒤 다시 빌드하세요.
- 게시하면 Supabase나 인증 기능이 작동하지 않아요.
그 기능들은 정적 호스팅이 실행하지 않는 라이브 백엔드와 환경 키가 필요해요. 정적 프런트엔드는 여기에 게시하고, 동적 기능은 서버를 실행하는 서비스에 두세요.
SiteDrop vs 그냥 Netlify 쓰기
Netlify는 git 저장소에서 Vite 빌드를 대신 실행해 줄 수 있어서 자동 배포를 원한다면 편리해요. 대신 git 연결, 빌드 설정, 환경 변수 관리가 필요해요. 로컬에서 한 번 빌드하고 dist 폴더만 호스팅하고 싶다면, SiteDrop이 그 zip을 바로 받아 파이프라인 없이 링크(유료 플랜에서는 커스텀 도메인도)를 만들어 줘요.
Lovable 호스팅 — 자주 묻는 질문
왜 먼저 빌드해야 하나요?
Lovable 앱은 순수 HTML이 아니라 React 프로젝트예요. 빌드하면 브라우저가 제공할 수 있는 정적 파일로 바뀌어요. dist 폴더가 생기면 호스팅은 zip 업로드면 끝이에요.
명령줄은 전혀 건드리고 싶지 않아요. 방법이 있을까요?
빌드 후 완전히 정적인 프로젝트라면, Lovable(또는 다른 AI 어시스턴트)에게 빌드된 정적 버전 하나를 만들어 달라고 한 뒤 zip으로 묶어 업로드하세요. 서버가 필요한 동적 기능은 정적 호스팅에 맞지 않아요.
Lovable 사이트를 게시할 준비가 됐나요?
.zip을 업로드하면 1분 안에 공유할 수 있는 라이브 링크가 생겨요. 7일 무료 미리보기, 카드는 필요 없어요.
지금 공개하기 →