Lovable 에디터의 채팅, 미리보기, 프로젝트 도구 모음, More 메뉴, 단축키를 안내합니다.
Lovable 에디터 둘러보기
Lovable 에디터를 안내하는 지도입니다. 채팅 패널과 실시간 미리보기부터 프로젝트 툴바, More 메뉴, 키보드 단축키까지 각 도구가 어디에 있는지 알려 줍니다.
프로젝트를 열면 에디터로 이동합니다. 바로 여기서 앱을 빌드합니다. 왼쪽 채팅 패널에 원하는 바를 설명하면 오른쪽 미리보기에서 앱이 완성되어 가는 모습을 볼 수 있습니다. 버전 기록부터 게시까지 나머지 작업은 모두 상단 바에서 한두 번의 클릭이면 됩니다.
이 페이지는 에디터의 지도입니다. 각 기능이 어디에 있는지 언제든 찾을 수 있도록 안내합니다.
여기서 설명하는 레이아웃은 데스크톱 브라우저 환경 기준입니다. 창이 작으면 일부 컨트롤이 오버플로 메뉴로 접히고, Lovable 모바일 앱은 상단 바 대신 같은 영역들을 좌우로 넘기는 화면으로 배치합니다.
두 가지 주요 영역
- Chat 패널(왼쪽): Lovable에게 무엇을 빌드할지 지시하고 진행 상황을 지켜보는 곳입니다. 자세한 내용은 Chat으로 앱 빌드하기를 참고하세요.
- 미리보기(오른쪽): Lovable이 작업하는 동안 갱신되는, 실시간으로 조작할 수 있는 앱 버전입니다. 자세한 내용은 앱 미리 보기를 참고하세요.
나머지 에디터 컨트롤은 상단 바에 있습니다.
사이드바
왼쪽 위 메뉴 아이콘을 누르면 에디터 왼쪽 가장자리에 대시보드 사이드바가 열립니다. 에디터를 떠나지 않고 워크스페이스를 전환하고, 다른 프로젝트나 폴더를 열고, 검색하며, Connectors와 Settings로 이동할 수 있습니다. 아이콘에 마우스를 올리면 사이드바가 잠시 나타나고 클릭하면 열린 상태로 고정됩니다. 닫으려면 사이드바 위쪽의 Close sidebar 아이콘을 클릭하거나 [ 키를 누르세요.
프로젝트 안에서 사이드바는 다음 항목을 제공합니다.
- Workspace switcher: 워크스페이스 이름을 클릭해 워크스페이스를 전환합니다. Free, Pro, Business 플랜에서는 워크스페이스의 남은 크레딧과 자신의 월간 Personal usage(멤버 크레딧 한도가 적용되면 Personal credits)도 표시합니다. Business 플랜의 editor는 대신 Settings → Plans & credit usage에서 개인 사용량을 확인합니다. 크레딧 잔액 확인을 참고하세요.
- Dashboard: 대시보드로 돌아갑니다.
- Search: 명령 팔레트를 엽니다.
- Connectors: 워크스페이스 커넥터 카탈로그를 엽니다. 커넥터를 참고하세요.
- Projects 및 Recents: 에디터를 떠나지 않고 다른 프로젝트나 폴더를 엽니다. Projects 아래의 All projects를 펼치면 폴더와 Starred가 표시됩니다. Recents에는 현재 프로젝트를 포함해 최근 연 프로젝트가 표시됩니다. 프로젝트에 마우스를 올리고 ⋯ 버튼을 누르면 Project actions 메뉴가 열리며, 즐겨찾기, 폴더 이동, 이름 변경, 리믹스, 설정 열기를 할 수 있습니다.
- Settings: 프로젝트 설정을 엽니다. 프로젝트 편집 권한이 필요합니다. 모든 경로는 프로젝트 설정을 찾는 위치를 참고하세요.
- Details: 설명, owner, 생성 날짜 등 프로젝트 정보를 봅니다.
- User menu: 아래쪽의 아바타를 클릭해 계정 설정을 열고, Appearance에서 테마를 바꾸고, 지원 및 커뮤니티로 이동하거나 로그아웃합니다. 전체 항목은 사용자 메뉴를 참고하세요.
사이드바에는 Lovable을 공유해 크레딧을 얻는 추천 카드도 표시됩니다. Enterprise 플랜에서는 제공되지 않습니다. Lovable 공유하기를 참고하세요.
프로젝트 이름과 초안
상단 바의 프로젝트 이름은 현재 보고 있는 버전을 알려 줍니다. 기본 버전에서는 프로젝트 이름만, 초안에서는 프로젝트 이름 옆에 초안 이름이 표시됩니다. 이름을 클릭하면 초안 전환기가 열려 초안을 만들고, 기본 버전과 초안 사이를 전환하고, 초안을 프로젝트에 반영할 수 있습니다. 전환기의 첫 행은 프로젝트의 기본 버전이며, 프로젝트를 편집할 수 있으면 Project settings 버튼이 표시됩니다.
프로젝트 이름은 프로젝트 설정의 Project name에서 바꿉니다. 에디터에서 Cmd+Shift+.(Mac) 또는 Ctrl+Shift+.(Windows/Linux)를 눌러도 됩니다.
버전 기록
프로젝트 이름 옆의 History 토글을 누르면 프로젝트의 버전 기록이 열립니다. 여기서 과거 버전을 살펴보고, 이전 버전으로 복원하고, 북마크를 관리할 수 있습니다. 자세한 내용은 버전 기록을 참고하세요.
채팅 패널 숨기기
Hide chat panel 토글은 채팅 패널을 접어 미리보기에 창 전체를 내주고, Show chat panel을 누르면 패널을 되살립니다. Cmd+B(Mac)나 Ctrl+B(Windows·Linux)를 눌러도 됩니다.
프로젝트 툴바
프로젝트 툴바의 탭은 기본 영역에 표시할 내용을 전환합니다.
- Preview: 홈 탭입니다. 앱이 실시간으로 실행되는 모습을 보여 주므로 사용자와 똑같이 클릭하며 둘러볼 수 있습니다. 앱 미리 보기를 참고하세요.
- Files: 앱과 함께 존재하는 파일입니다. Lovable이 생성해 주는 문서와, 보고서·내보내기 파일·기타 결과물처럼 직접 업로드하는 파일이 여기에 담깁니다.
- Code: 프로젝트 코드를 읽고, 유료 플랜에서는 직접 편집하고, 내려받을 수 있는 전체 코드 에디터입니다. 코드 에디터를 참고하세요.
- More: 아래에 나열한 나머지 프로젝트 도구가 담긴 패널을 엽니다.
More 메뉴
More를 클릭하면 앱을 키우고 운영하는 데 필요한 도구가 담긴 패널이 열립니다.
| 섹션 | 용도 |
|---|---|
| Analytics | 추적 코드를 추가하지 않고도 게시된 앱의 방문자 수, 페이지 조회수, 사용 추세를 확인합니다. 자세한 내용은 애널리틱스를 참고하세요. |
| Cloud | 데이터베이스와 그 레코드, 사용자 계정, 파일 스토리지, 예약 작업, 엣지 함수, secret, 로그, 사용량까지 앱의 백엔드를 한곳에 모아 둡니다. 자세한 내용은 내장 백엔드(Cloud)를 참고하세요. |
| AI | 모델 사용량, 지출 등 앱 내부의 AI 기능을 모니터링하고 관리합니다. 자세한 내용은 AI를 참고하세요. |
| Agent integrations | 앱을 MCP 서버로 게시해 ChatGPT나 Claude 같은 AI 어시스턴트가 사용할 수 있게 합니다. 자세한 내용은 에이전트 통합을 참고하세요. |
| Payments | 내장된 Paddle·Stripe 통합으로 앱에서 결제를 받습니다. Lovable이 제품과 결제 화면을 연결해 줍니다. 자세한 내용은 결제를 참고하세요. |
| Connectors | 프로젝트가 연결된 서비스를 확인하고, 각 연결을 관리하는 링크를 제공합니다. 자세한 내용은 커넥터를 참고하세요. |
| Security | 프로젝트의 보안 발견 사항을 검토하고 Lovable의 도움을 받아 수정합니다. 자세한 내용은 보안과 프로젝트 보안 보기를 참고하세요. |
| SEO & AI search | 검색 엔진과 AI 도구가 앱을 어떻게 인식하는지 확인하고 메타데이터, 인덱싱, 접근성 문제를 해결합니다. 자세한 내용은 SEO 및 AI 검색을 참고하세요. |
| Sensitive data | 워크스페이스에 민감 데이터 검사가 활성화되면 나타나며, 앱이 처리하는 개인 데이터가 무엇인지 보여 줍니다. 자세한 내용은 민감 데이터 검사를 참고하세요. |
| Settings | 프로젝트의 General, Knowledge, Domains, Git 설정을 엽니다. 대부분의 항목에는 프로젝트 편집 권한이 필요합니다. 프로젝트 설정을 참고하세요. |
몇몇 도구는 별도 섹션일 것 같지만 Cloud 안에 들어 있습니다.
- Emails: 가입 확인, 영수증 같은 트랜잭션 이메일을 앱 고유 주소에서 보냅니다. 유료 플랜이 필요하며, React + Vite 프로젝트에서는 내장 백엔드(Cloud)도 필요합니다. 자세한 내용은 이메일 보내기를 참고하세요.
- Supabase: 프로젝트가 외부 Supabase 연결을 사용할 때 그 연결을 관리합니다. 자세한 내용은 Supabase를 참고하세요.
More 메뉴에 표시되는 항목은 프로젝트와 플랜에 따라 다릅니다. 특정 기능을 사용하기 시작하면 그 기능과 연결된 섹션이 나타납니다.
오른쪽 상단 컨트롤
이 컨트롤은 미리보기 위에 있으며 Preview 탭이 활성화된 동안 사용할 수 있습니다. 왼쪽부터 차례로 살펴봅니다.
- 미리보기 툴바 버튼: 숨겨진 미리보기 툴바를 다시 불러옵니다. 요소를 선택하고, 텍스트를 인라인으로 편집하고, 미리보기 위에 그림을 그릴 수 있습니다.
- Comments: 프로젝트 댓글을 열어 협업자의 피드백을 확인합니다. 이 버튼은 미리보기 툴바가 숨겨져 있을 때 표시됩니다. 툴바가 보이면 댓글은 툴바 안에 나타납니다. 프로젝트 댓글을 참고하세요.
- 협업자 아바타: 지금 프로젝트에 누가 있는지 확인하고 다른 사람을 초대합니다.
- Share: 협업자를 초대하고, 프로젝트에 접근할 수 있는 사람을 제어하고, 미리보기 링크를 만듭니다. 프로젝트 공유하기를 참고하세요.
- Publish: 앱을 라이브 URL에 배포하거나 게시된 버전에 업데이트를 반영합니다. Business·Enterprise 플랜에서는 공개 웹 대신 워크스페이스에만 게시할 수 있습니다. 채팅에서 Lovable에게 게시를 요청할 수도 있습니다. 프로젝트 게시하기를 참고하세요.
명령 팔레트
에디터 어디서나 Cmd+K(Mac)나 Ctrl+K(Windows·Linux)를 누르면 명령 팔레트가 열려, 키보드만으로 프로젝트·폴더·설정을 검색할 수 있습니다. Drafts 그룹에는 Main preview와 프로젝트의 모든 초안이 나열됩니다.