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