Lovable에서 앱 미리 보고 테스트하기

빌드하는 동안 앱이 실시간으로 실행되는 모습을 확인합니다. 휴대폰, 태블릿, 데스크톱 크기를 테스트하고, 게시하기 전에 전체 흐름을 시도하며, 미리보기 링크로 진행 상황을 공유합니다.

미리보기는 에디터 오른쪽에서 실행되는 앱의 실시간 대화형 버전입니다. Lovable이 빌드하는 대로 업데이트되므로 변경 사항이 나타나는 모습을 지켜보고, 앱을 클릭해 보며, 실제 사용자와 똑같은 방식으로 테스트할 수 있습니다.

미리보기는 앱의 스테이징 환경, 즉 항상 최신 작업물을 실행하는 비공개 테스트 공간이라고 생각하면 됩니다. 방문자에게는 대신 게시된 버전이 보이는데, 이는 게시할 때만 바뀌는 스냅샷입니다. 이렇게 분리해 두면 방문자가 결과를 보기 전에 충분히 다듬을 여유가 생깁니다. 단, 미리보기와 게시된 앱은 동일한 백엔드와 데이터를 공유하므로 데이터베이스를 변경하면 양쪽 모두에 영향을 준다는 점을 유의합니다.

미리보기가 중요한 이유

미리보기는 Lovable의 작업 결과를 확인하는 곳입니다. 변경 사항이 제대로 적용되었는지 추측하는 대신, 앱을 이리저리 클릭해 보고 요청한 흐름을 직접 시도하면서 곧바로 피드백을 줄 수 있습니다. 게시하기 전에 미리보기에서 테스트하면 완성되지 않은 작업이 라이브 사이트에 올라가는 일을 막을 수 있습니다.

미리보기를 활용하는 일반적인 방법

• 변경 사항이 적용될 때마다 확인하기: 요청을 보낸 뒤 미리보기가 업데이트되는 모습을 지켜보고 결과가 요청한 내용과 일치하는지 확인합니다.
• 전체 흐름을 처음부터 끝까지 테스트하기: 사용자보다 먼저 미리보기에서 직접 가입하고, 양식을 작성하고, 결제를 완료해 봅니다.
• 다양한 화면 크기에서 검토하기: 미리보기 위쪽의 기기 토글을 사용해 노트북뿐 아니라 휴대폰에서도 앱이 제대로 작동하는지 확인합니다.
• 피드백 모으기: Share 메뉴에서 보기 전용 미리보기 링크를 공유하면 친구, 고객, 팀원이 진행 상황을 볼 수 있습니다. 미리보기 공유를 참조합니다.

미리보기 컨트롤

미리보기 위쪽 바에는 앱을 이리저리 이동하는 데 쓰는 컨트롤이 있습니다.

• 기기 토글: 미리보기를 Desktop view, Tablet view, Mobile view 사이에서 전환하여, 공유하기 전에 휴대폰과 태블릿 크기에서 앱을 확인할 수 있습니다.
• 페이지 선택기: 현재 보고 있는 페이지를 표시합니다. 클릭하면 앱의 모든 페이지를 볼 수 있고, Find page or enter path 필드에 입력해 페이지를 찾거나, 경로를 직접 입력해 해당 페이지로 바로 이동할 수 있습니다.
• 새로고침: 미리보기를 다시 로드합니다.
• 새 탭에서 열기: 개발용 미리보기를 별도의 브라우저 탭에서 열어, 전체 화면으로 테스트하거나 채팅하는 동안 계속 띄워 둘 수 있습니다. 이 URL을 사용하려면 해당 프로젝트에 접근 권한이 있는 계정으로 Lovable에 로그인해야 합니다. 접근 권한이 없는 사람에게 앱을 보여주려면 대신 미리보기 링크를 사용합니다.

미리보기 위쪽, 오른쪽 상단 구석에는 컨트롤이 몇 개 더 있습니다.

• 미리보기 툴바 토글: 미리보기 툴바를 숨긴 경우 다시 불러와, 요소를 선택하고 텍스트를 편집하고 미리보기 위에 그림을 그릴 수 있습니다.
• 댓글: 프로젝트의 댓글을 열어 미리보기에 고정된 피드백을 확인합니다.
• 협업자 아바타: 지금 프로젝트에 누가 함께 있는지 보여줍니다.
• Share와 Publish: 사람을 초대하거나 미리보기 링크를 만들고, 앱을 라이브로 게시합니다. 프로젝트 공유와 프로젝트 게시를 참조합니다.

에디터 지도에서 상단 바 전체를 설명합니다.

미리보기 일시중지

미리보기는 작업하는 동안 Lovable이 프로젝트를 위해 시작하는 임시 클라우드 환경에서 실행됩니다. 프로젝트에서 한동안 자리를 비우면 리소스를 아끼기 위해 이 환경이 일시중지되고, 미리보기에는 Lovable이 일시중지했음을 알리는 Still building? 메시지가 표시됩니다.

Keep building을 클릭하면 다시 시작됩니다. 환경이 재개되고 미리보기는 중단했던 지점부터 정확히 이어집니다. 일시중지는 정상적인 동작이며 프로젝트에는 아무런 변화도 주지 않습니다. 게시된 사이트는 전혀 영향을 받지 않고, 미리보기가 일시중지된 동안에도 방문자는 라이브 앱에 계속 접근할 수 있습니다.

미리보기에서 직접 편집하기

미리보기 안에 떠 있는 툴바인 미리보기 툴바는 미리보기를 편집 화면으로 바꿔 줍니다. 네 가지 모드는 각각 클릭했을 때의 동작을 다르게 만듭니다.

• 요소 선택: 특정 요소를 Lovable에 지정하고 변경할 내용을 평이한 말로 설명합니다.
• 인라인 텍스트 편집: 프롬프트 없이 페이지에서 오타와 문구를 직접 수정합니다.
• 주석 그리기: 앱 위에 스케치하여 말로 설명하기 어려운 레이아웃 변경을 보여줍니다.
• 댓글 추가: 특정 요소에 피드백을 고정해 두어 본인이나 협업자가 확인하게 합니다.

페이지에서 바꾸려는 부분을 정확히 알고 있다면, 채팅으로 설명하기보다 그 부분을 직접 지정하는 편이 대개 더 빠르고 정확합니다. 전체 안내는 미리보기에서 편집을 참조합니다.

앱 테스트하기

미리보기에서 중요한 흐름을 직접 테스트합니다. 모든 버튼을 클릭하고, 양식을 제출하고, 사용자가 밟을 경로를 따라가 봅니다.

Lovable에 테스트를 맡길 수도 있습니다. Lovable은 실제 브라우저에서 앱을 열어 페이지를 탐색하고, 버튼을 클릭하고, 양식을 채우고, 발견한 내용을 보고할 수 있으며, 앱 로직에 대한 자동화 테스트도 실행할 수 있습니다. 채팅으로 이렇게 요청합니다.

Test the sign-up flow and fix anything that's broken.

앱 테스트 및 검증과 브라우저 테스트를 참조합니다.

미리보기 공유

프로젝트 접근 권한을 주지 않으면서 다른 사람이 작업 중인 버전을 볼 수 있게 하려면, 에디터 오른쪽 상단의 Share 메뉴에서 Share preview 링크를 만듭니다. 링크가 유효한 동안에는 링크를 가진 사람이라면 누구나 Lovable 계정 없이 열 수 있습니다.

게스트는 아무것도 편집할 수 없습니다. 기본적으로 게스트는 미리보기에 댓글을 남길 수 있으며, 링크를 복사하기 전에 Share 메뉴에서 게스트 댓글을 끌 수 있습니다. 링크는 7일 후에 만료되고, 엔터프라이즈 워크스페이스에서는 미리보기 공유 링크를 아예 비활성화할 수 있습니다.

자세한 내용은 프로젝트 공유에서 알아봅니다.

FAQ