소유한 웹사이트를 URL로 가져와 채팅으로 편집할 수 있는 Lovable 프로젝트로 다시 빌드하세요. Lovable이 페이지에서 읽는 내용과 페이지를 더 추가하는 방법을 알아봅니다.

이미 운영 중인 웹사이트에서 프로젝트를 시작할 수 있습니다. URL을 붙여 넣으면 Lovable이 해당 페이지를 편집할 수 있는 프로젝트로 다시 빌드합니다. Lovable은 요청 한 번에 한 페이지씩 가져오며, 프로젝트당 사이트 하나에서 최대 10개 페이지까지 가져올 수 있습니다. 페이지 더 추가하기를 참고하세요.

방문자에게 보이는 텍스트, 이미지, 글꼴, 색상, 레이아웃이 프로젝트의 구성 요소가 되어, 프로젝트 채팅에서 수정하고 Lovable에서 게시할 수 있습니다. 소유한 사이트를 웹사이트 빌더에서 옮겨 오거나, 빈 프롬프트에서 시작하지 않고 기존 사이트를 새로 디자인할 때 활용하세요.

웹사이트 가져오기는 모든 플랜에서 사용할 수 있으며, 워크스페이스에서 프로젝트를 만들 수 있는 사람이라면 누구나 이용할 수 있습니다. 가져오기는 일반 빌드 사용량으로 처리되어 크레딧을 소비합니다. 페이지를 읽는 일은 전체 작업에서 작은 부분이고, 비용 대부분은 Lovable이 프로젝트를 빌드하고 확인하는 데 듭니다. 빌드 비용을 참고하세요.

Lovable이 웹사이트에서 읽는 내용

Lovable은 방문자와 마찬가지로 로그인하지 않은 상태에서 페이지를 열고 화면에 보이는 내용을 읽습니다. 사이트에는 아무 변경도 생기지 않습니다. Lovable이 읽는 항목은 다음과 같습니다.

• 텍스트
• 페이지가 불러오는 이미지와 글꼴
• 라이트 색 구성표와, 사이트에 정의된 다크 모드 각각의 색상과 간격
• 데스크톱 너비 기준의 레이아웃과, 휴대폰·태블릿 너비에서 페이지 스타일이 바뀌는 방식
• 브라우저 탭에 표시되는 페이지 제목

Lovable은 글꼴, 이미지, 색상, 간격을 살려 새 프로젝트에 페이지를 다시 빌드하고, 비교 기준으로 쓸 원본 스크린샷을 저장합니다.

Lovable은 방문자가 볼 수 있는 것만 읽습니다. 로그인 기능, 데이터베이스를 비롯해 원본 사이트의 서버에서 실행되던 것은 가져오지 않습니다. 로그인이 필요한 페이지는 로그인하지 않은 방문자에게 보이는 화면, 대개 로그인 페이지 자체로 가져옵니다.

양식은 모양만 유지되고, 제출된 내용을 이메일로 보내는 것처럼 원본 사이트가 제출 내용을 처리하던 방식은 유지되지 않습니다. 페이지가 프로젝트에 들어온 뒤 Lovable에게 그 부분을 다시 만들고 필요한 기능을 추가해 달라고 요청하세요. 예를 들어 제출 내용을 Lovable Cloud에 저장하는 문의 양식을 요청할 수 있습니다.

Make the contact form work: store each submission in Lovable Cloud and show me the submissions on a page only I can open.

웹사이트 가져오기

대시보드에서 다음과 같이 가져오기를 시작합니다.

대시보드의 프롬프트 입력창이나 새 프로젝트의 프로젝트 채팅에서 원하는 내용을 설명해 가져오기를 시작할 수도 있습니다.

Import https://www.yourdomain.com and keep the design as close to the original as possible.

페이지 더 추가하기

프로젝트마다 사이트 하나에서 최대 10개 페이지를 가져올 수 있고, 요청 한 번에 페이지 하나가 추가됩니다. 처음 가져온 페이지가 프로젝트의 홈페이지가 되므로 홈페이지를 먼저 가져오세요. 추가하는 각 페이지는 원본 사이트에서 쓰던 경로를 그대로 유지합니다. 예를 들면 /about입니다.

페이지를 추가하려면 프로젝트 채팅에서 Lovable에게 해당 페이지의 URL을 알려 주세요.

Add https://www.yourdomain.com/about as a new page in this project.

새 페이지의 헤더, 푸터, 내비게이션이 첫 페이지와 똑같으면 Lovable이 이를 재사용하므로 페이지들이 하나의 디자인을 공유합니다. 가져온 페이지를 편집했다면 Lovable은 헤더, 푸터, 내비게이션의 별도 사본을 갖춘 새 페이지를 추가하고 기존 편집 내용은 유지합니다.

가져온 페이지를 편집하지 않았다면 Lovable에게 페이지를 다시 가져오라고 요청해 해당 페이지를 교체할 수 있습니다. 페이지를 편집한 뒤에는 Lovable이 다시 가져오기를 거부하고 아무것도 변경하지 않습니다. 이때는 채팅에서 원하는 변경을 요청하세요.

다른 웹사이트의 페이지는 같은 프로젝트에 추가할 수 없으며, blog.yourdomain.com 같은 하위 도메인도 다른 웹사이트로 간주됩니다. 두 번째 사이트는 새로 가져오기를 시작하세요.

결과를 원본과 비교하기

가져오는 동안 Lovable은 다시 빌드한 페이지의 스크린샷을 원본에서 찍어 둔 스크린샷과 비교합니다. 편집을 한 차례 마친 뒤처럼 언제든지 비교를 요청할 수 있습니다. Lovable은 페이지의 위쪽, 중간, 아래쪽 중 어느 부분이 가장 많이 다른지 알려 줍니다.

Compare the imported homepage with the original site and fix the differences you find.

작은 차이는 생길 수 있습니다. Lovable은 원본 코드를 복사하지 않고 자체 컴포넌트로 디자인을 다시 만들기 때문에 간격, 애니메이션, 스크롤할 때 불러오는 콘텐츠가 다를 수 있습니다. 바꾸고 싶은 부분을 구체적으로 짚어 요청하세요.

내 도메인에 사이트 게시하기

사이트가 원하는 모습이 되면 게시하고 프로젝트에 도메인을 연결하세요. 도메인이 Lovable을 가리키면 방문자는 Lovable 버전의 사이트로 접속합니다. 그 전까지 방문자에게는 원본 사이트가 표시됩니다.

제한 사항

웹사이트 가져오기에는 다음과 같은 제한이 있습니다.

• 사설 네트워크나 내 컴퓨터에 있는 주소는 가져올 수 없습니다. 로그인이 필요한 페이지는 로그아웃한 방문자에게 보이는 페이지로 가져옵니다.
• 레이아웃은 데스크톱 너비 기준으로 읽으므로 휴대폰, 태블릿, 다크 모드에서는 페이지가 다르게 보일 수 있습니다. 휴대폰과 다크 모드에서 미리보기를 확인하고, 다른 부분이 있으면 Lovable에게 고쳐 달라고 요청하세요.
• 사이트 하나당 프로젝트에 가져올 수 있는 페이지는 최대 10개입니다.
• 페이지 경로가 일반 소문자, 숫자, 하이픈, 밑줄로만 이루어진 경우에만 경로가 유지됩니다. /About.html처럼 대문자, 악센트 부호가 붙은 문자, 점이 들어간 경로는 프로젝트에서 다른 주소를 받게 되므로, 원래 주소를 쓰는 링크를 업데이트하세요.
• Lovable은 페이지 제목은 복사하지만, 검색 엔진이 제목 아래에 보여 주는 설명은 복사하지 않습니다.
• 아주 큰 페이지는 가져올 수 없습니다. Lovable은 1.5MB를 넘는 개별 스타일시트(페이지의 모양을 정의하는 파일)를 건너뜁니다. 페이지의 HTML(콘텐츠와 구조)이 5MB를 넘거나, 나머지 스타일시트를 합친 크기가 5MB를 넘으면 가져오기가 중단됩니다.
• 10MB를 넘는 이미지, 글꼴, 동영상은 제외됩니다. Lovable은 이미지, 글꼴, 동영상을 최대 300개, 총 30MB까지 가져옵니다. 로고나 아이콘처럼 페이지가 별도 파일로 불러오는 SVG 형식 이미지는 복사되지 않습니다.
• 계정마다 시간당 최대 30개 페이지를 읽을 수 있습니다. 모든 읽기가 이 횟수에 포함되며, 원본과 비교할 때도 다시 빌드한 페이지의 스크린샷을 새로 찍으므로 비교할 때마다 횟수가 차감됩니다.
• PDF처럼 페이지에 있는 다운로드용 문서는 프로젝트로 복사되지 않습니다. 필요하다면 프로젝트에 다시 업로드하세요.

문제 해결

사용자가 가장 자주 막히는 지점입니다. 각 답변의 첫 줄에서 해당 동작이 의도된 것인지 알 수 있습니다.

FAQ

관련 주제

• Replit, Bolt, v0 등 다른 도구에서 프로젝트 가져오기
• Lovable의 프로젝트
• FAQ
• Firecrawl을 연결해 앱에서 쓸 웹 데이터 스크래핑하기
• 대시보드 개요