Lovable 코드 에디터에서 프로젝트 소스 코드를 탐색·검색·편집하고, 정확한 줄을 채팅에서 참조하거나 전체 코드베이스를 다운로드합니다.
프로젝트 코드 보기 및 편집
Lovable 코드 에디터에서 앱의 소스 코드를 탐색·검색하고, 직접 편집하며, 채팅에서 정확한 줄을 참조하거나 코드베이스를 다운로드합니다.
Lovable이 만드는 모든 결과물은 실제 표준 코드이며, 코드 에디터에서 이를 확인할 수 있습니다. 프로젝트 툴바의 Code 탭을 열면 프로젝트 파일을 탐색하고 직접 편집하거나, 채팅에서 특정 파일과 줄을 지정하고 코드를 다운로드할 수 있습니다.
Lovable로 빌드할 때 코드 에디터를 반드시 사용할 필요는 없습니다. Lovable이 무엇을 만들었는지 정확히 확인하거나, 빠르게 직접 수정하거나, 개발자와 함께 작업할 때 선택적으로 사용하면 됩니다.
파일 탐색 및 검색
왼쪽 패널에는 프로젝트의 파일 구조가 표시됩니다. 폴더를 클릭해 펼치거나 접을 수 있으며, 패널 위쪽의 Expand all 및 Collapse all 버튼으로 모든 폴더를 한 번에 펼치거나 접을 수 있습니다. 연 파일은 코드 영역 위쪽에 탭으로 표시됩니다. 여러 파일을 열어 두고 탭 순서를 드래그해 바꾸거나 작업이 끝난 탭을 닫을 수 있습니다.
파일이나 폴더를 마우스 오른쪽 버튼으로 클릭하면 다음 메뉴가 표시됩니다.
- Open: 에디터에서 파일을 엽니다.
- Reference in chat: 다음 메시지가 해당 파일을 가리키도록 채팅 입력창에 파일 참조를 추가합니다.
프로젝트 전체에서 항목을 찾으려면 파일 패널 위쪽의 Search code 상자를 사용하거나 Cmd+Shift+F(Mac) 또는 Ctrl+Shift+F(Windows/Linux)를 누릅니다. 결과는 파일 이름이 일치하는 Files와 파일 내용이 일치하는 In files로 구분됩니다. 현재 열린 파일 안에서 텍스트를 찾으려면 Cmd+F(Mac) 또는 Ctrl+F(Windows/Linux)를 누릅니다. 유료 플랜에서는 같은 패널에서 텍스트를 바꿀 수도 있습니다.
파일 보기
파일을 읽을 때 위쪽 툴바에서 다음 기능을 사용할 수 있습니다.
- Preview markdown:
.md및.markdown파일에서 눈 아이콘을 클릭해 원본 소스와 렌더링된 텍스트를 전환합니다. 프리뷰는 표, 작업 목록, 링크, 코드 블록 등 일반적인 Markdown 형식을 지원하므로 에디터를 벗어나지 않고 README와 문서를 읽기 쉽습니다. - Copy file content: 파일 전체 내용을 클립보드에 복사합니다.
- Download: 열린 파일을 컴퓨터에 저장합니다. 프로젝트 접근 권한이 있는 모든 사용자가 이용할 수 있습니다.
코드 편집
코드 편집은 유료 플랜에서 사용할 수 있습니다. Free 플랜에서는 에디터가 읽기 전용이며 Read only 라벨과 Upgrade 옵션이 표시됩니다.
일반 코드 에디터처럼 파일을 클릭하고 입력해 편집합니다. 작업 중에는 다음 기능을 사용할 수 있습니다.
- Save 버튼 또는 Cmd+S(Mac), Ctrl+S(Windows/Linux)로 변경 사항을 저장하거나 Discard로 취소합니다. 저장하지 않은 변경 사항이 있는 상태에서 코드 에디터를 나가면 Lovable이 먼저 확인합니다.
- 저장할 때마다 프로젝트의 버전 기록에 버전이 생성되므로 Lovable의 다른 변경 사항처럼 직접 편집한 내용도 쉽게 되돌릴 수 있습니다.
- 파일 툴바의 포맷 버튼으로 들여쓰기와 스타일을 정리합니다.
- Lovable이 프로젝트에서 작업하는 동안에는 작업이 끝날 때까지 Save 버튼이 비활성화됩니다.
저장한 변경 사항은 Lovable이 만든 변경 사항처럼 프로젝트에 즉시 적용됩니다. Lovable은 직접 편집한 내용을 검토하지 않습니다. 변경으로 문제가 생기면 버전 기록에서 되돌리거나 채팅에서 Lovable에게 수정을 요청하세요.
채팅에서 코드 참조
코드 에디터를 사용하면 채팅 메시지의 대상을 더 정확하게 지정할 수 있습니다.
-
파일 참조: 파일 툴바의 Reference file in chat 버튼이나 파일의 마우스 오른쪽 버튼 메뉴에 있는 Reference in chat을 사용하거나, 채팅 입력창에
@를 입력합니다.@src/components/UserProfile.tsx 여기에 로딩 상태를 추가해줘 -
정확한 줄 참조: 줄 번호에 마우스를 올리고 + 칩을 클릭해 파일과 줄 참조를 채팅 입력창에 추가합니다. 칩을 드래그하면 여러 줄 범위를 참조할 수 있습니다. 커서가 있는 줄이나 선택 영역은 Cmd+Shift+L(Mac) 또는 Ctrl+Shift+L(Windows/Linux)로 참조할 수도 있습니다. 참조는
Button.tsx:42같은 pill로 표시되며, pill을 클릭하면 코드 에디터의 해당 줄로 돌아갑니다.
파일이나 줄을 정확히 지정하는 편이 설명만 하는 것보다 빠를 때가 많습니다. Lovable이 정확한 컨텍스트를 받아 의도한 위치를 별도로 찾을 필요가 없습니다.
프로젝트 코드베이스 다운로드
프로젝트의 전체 소스 코드는 언제든 다운로드할 수 있습니다. 유료 플랜에서는 프로젝트 편집 권한이 있는 모든 사용자가 파일 패널 아래쪽의 Download codebase를 클릭해 전체 프로젝트를 .zip 파일로 저장할 수 있습니다. 파일 하나만 저장하려면 모든 플랜에서 파일 툴바의 Download 버튼을 사용하세요.
Enterprise 워크스페이스에서는 admin이 코드베이스 다운로드를 제한해 워크스페이스 admin과 owner만 사용하도록 설정할 수 있습니다. 그 밖의 사용자에게는 Download codebase 옵션이 비활성화되어 표시됩니다. 개인정보 및 보안 설정을 참조하세요.
Lovable 외부에서 계속 작업하려면 스냅샷을 다운로드하는 대신 프로젝트를 GitHub 또는 GitLab에 연결하세요. Git sync는 저장소와 프로젝트를 양방향으로 동기화하므로 개발자가 어떤 도구에서든 편집하고 변경 사항을 다시 push할 수 있습니다.