Lovable와 채팅하며 앱 빌드하기

Lovable의 채팅 패널에서 할 수 있는 모든 것. 프롬프트를 작성하거나 음성으로 받아쓰고, 파일을 첨부하고, 메시지를 대기열에 추가하고, Lovable의 질문에 답하고, 변경 사항을 실행 취소하고, 오류를 수정합니다.

에디터 왼쪽에 있는 채팅 패널은 Lovable에게 무엇을 빌드할지 알려주는 곳입니다. 원하는 것을 평범한 말로 설명하면 Lovable이 작업을 수행하고, 각 응답이 무엇이 바뀌었는지 보여 주므로 이를 검토하고 방향을 잡거나 실행 취소할 수 있습니다.

모든 메시지 뒤에서 Lovable의 에이전트는 루프로 작동합니다. 대화와 프로젝트에서 컨텍스트를 모으고, 도구로 작업을 실행하고, 다음으로 넘어가기 전에 결과를 확인합니다. 활동 카드부터 Lovable이 던지는 질문까지, 아래의 모든 항목에 그 루프가 반영되어 있습니다.

프롬프트 상자

채팅 패널 하단의 텍스트 필드에 메시지를 입력한 다음 Enter 키를 누르거나 보내기 버튼을 클릭합니다. 특별한 표현은 필요하지 않습니다. 구현 방법보다는 원하는 결과를 설명합니다.

Add a sign-up form with email and password fields.

더 자세한 안내는 프롬프트 작성 모범 사례를 참조하세요.

텍스트 필드 주변에는 다음이 있습니다.

• 마이크: 입력하는 대신 메시지를 음성으로 받아씁니다. 클릭해 녹음을 시작하거나 Option+V(Mac) 또는 Alt+V(Windows/Linux)를 누릅니다. 끝나면 체크 표시를 클릭합니다. 그러면 Lovable이 말한 내용을 프롬프트 상자에 옮겨 적어 주므로, 검토한 뒤 보내면 됩니다. 녹음을 버리려면 대신 X를 클릭합니다.
• 모드 토글: 빌드 모드와 플랜 모드를 전환하거나 Option+P(Mac) 또는 Alt+P(Windows/Linux)를 누릅니다.
• 버튼: 채팅 작업 메뉴를 열어 파일을 첨부하고, 참조를 추가하고, 자주 쓰는 프로젝트 도구에 접근합니다.

모드

채팅 입력 옆에 있는 모드 토글은 Lovable이 응답하는 방식을 전환합니다.

• Build: Lovable이 프로젝트를 직접 변경합니다. 기본값이며, 작은 조정부터 전체 기능까지 대부분의 요청에 알맞은 선택입니다. 비용은 사용량 기준이며, 많은 요청이 1크레딧 미만입니다. 빌드 모드를 참조하세요.
• Plan: Lovable이 코드를 건드리지 않고 논의하고, 조사하고, 계획합니다. 더 큰 기능을 구상하거나, 문제를 안전하게 디버그하거나, 빌드 전에 여러 접근 방식을 비교할 때 사용합니다. 플랜 모드 메시지는 하나당 1크레딧입니다. 플랜 모드를 참조하세요.

언제든 모드를 전환할 수 있으며, 대화는 두 모드 사이에서 그대로 이어집니다.

채팅 작업

채팅 입력 옆에 있는 버튼을 클릭해 Chat actions 메뉴를 엽니다. 컨텍스트를 첨부하고 자주 쓰는 프로젝트 도구에 접근하는 가장 빠른 경로입니다.

• Settings: 프로젝트의 General 탭에서 설정 대화 상자를 엽니다. 여기에서 프로젝트 이름을 바꾸고, 게시 옵션을 관리하는 등의 작업을 합니다. 프로젝트 설정을 참조하세요.
• History: 프로젝트의 버전 기록을 열어 이전 버전을 둘러보고 복원합니다.
• Knowledge: 제품 컨텍스트나 디자인 규칙처럼 Lovable이 모든 요청에서 따르는 지속적인 지침을 작성합니다. 지식을 참조하세요.
• GitHub: 프로젝트를 양방향 동기화로 GitHub 저장소에 연결해 변경 사항이 양쪽으로 흐르게 합니다. GitHub를 참조하세요.
• GitLab: 프로젝트를 양방향 동기화로 GitLab 저장소에 연결해 변경 사항이 양쪽으로 흐르게 합니다. GitLab을 참조하세요.
• Project connectors: 프로젝트가 연결된 서비스와 사용할 수 있는 채팅 커넥터를 확인하고, 연결을 클릭해 관리합니다. 커넥터를 참조하세요.
• Take a screenshot: 현재 미리보기를 캡처해 메시지에 첨부합니다. 논의 중인 부분을 가리키는 데 유용합니다.
• Add reference: @ 선택기를 열어 Lovable이 다음을 가리키게 합니다.
  • Code: 프로젝트 코드베이스의 파일.
  • Files: 사용자가 업로드했거나 Lovable이 생성한 문서.
  • Connectors: 콘텐츠를 가져올 수 있는 인기 커넥터 모음.
  • Projects: 워크스페이스에 있는 다른 프로젝트.
• Add skill: 워크스페이스의 스킬, 즉 재사용 가능한 지침 세트를 둘러보고 실행합니다. 스킬을 고르면 / 명령이 자동으로 입력됩니다.
• Attach: 컴퓨터에 있는 파일을 메시지에 추가합니다. 컨텍스트로 파일 첨부하기를 참조하세요.

컨텍스트로 파일 첨부하기

첨부 파일은 사용자가 무엇을 뜻하는지 Lovable에게 보여 줍니다. 맞춰야 할 디자인 목업, 고쳐야 할 버그의 스크린샷, 또는 빌드의 바탕이 될 문서, 예를 들어 제품 브리프, 데이터 스프레드시트, 오디오 메모 등을 첨부합니다. 대시보드에서 프로젝트를 생성할 때도 첨부 파일은 똑같이 작동합니다. 맨 처음 프롬프트에 파일을 첨부하면 됩니다.

파일을 추가하려면 Chat actions 메뉴에서 Attach를 사용하거나, 파일을 채팅으로 드래그하거나, 붙여넣습니다. Lovable이 첨부한 내용을 읽습니다. 이미지, PDF, Word, Excel, PowerPoint 파일은 물론 오디오 녹음까지 읽습니다. 첨부한 문서에 대해 질문하거나, Lovable에게 그 내용을 앱에 활용하도록 지시할 수 있습니다.

각 파일은 Free 플랜에서 최대 20MB, 유료 플랜에서 256MB, Enterprise에서 1GB까지 가능합니다. 메시지당 최대 10개의 파일을 첨부할 수 있습니다. 이미지는 메시지당 합쳐서 최대 15MB까지 가능하며, Lovable이 큰 이미지는 자동으로 압축합니다. 업로드가 실패하면 파일 수를 줄이거나 더 작은 파일로 다시 시도하세요.

이미지를 첨부한 뒤 그 이미지를 클릭하면 미리보기가 열리고, 그 위에 그림을 그릴 수 있습니다. 예를 들어 바꾸고 싶은 부분에 동그라미를 칠 수 있습니다. Lovable이 주석이 달린 이미지를 메시지와 함께 받습니다.

이미지나 동영상을 Lovable에게 보여 주는 대신 앱 자체에 넣으려면 다음 섹션을 참조하세요.

앱에 이미지와 동영상 추가하기

빌드 중인 앱에 미디어를 배치하려면 다음 중 상황에 맞는 방법을 사용합니다.

• Lovable에게 생성 요청하기: Lovable이 이미지를 생성하고, 기존 이미지를 편집하고(배경을 투명하게 만드는 것 포함), 짧은 동영상까지 생성할 수 있습니다. 원하는 것을 설명하세요.

  Generate a hero image of a mountain at sunrise.

• 채팅에 이미지 첨부하기: 이미지를 업로드하고 Lovable에게 어디에 넣을지 알려 주세요.

  Replace the logo in the navbar with this image.

• 기존 이미지 가리키기: 미리보기에서 미리보기 툴바의 Select elements로 바꾸려는 이미지를 선택하고, 대체 이미지를 첨부하거나 그 URL을 붙여넣은 뒤 업데이트를 설명합니다.

• 호스팅된 URL 참조하기: 이미지가 이미 온라인 어딘가에 있다면 그 URL을 채팅에 붙여넣고 Lovable에게 어디에 쓸지 알려 주세요. 저작권에 유의하세요.

• Git 저장소에 업로드하기: 프로젝트가 GitHub나 GitLab에 연결되어 있다면 미디어 파일을 저장소의 public 폴더에 업로드한 뒤 경로로 참조합니다.

  Add public/hero-image.jpg to the hero section.

• 동영상 임베드하기: YouTube 같은 호스팅 서비스에 연결하고 Lovable에게 임베드하도록 요청합니다. 예를 들면 다음과 같습니다.

Embed this video https://www.youtube.com/watch?v=your-video-id in the hero section.

Lovable이 작업하는 동안

Lovable이 요청 하나를 처리하는 동안에도 사용자의 작업이 막히지 않습니다. 그동안 할 수 있는 일은 다음과 같습니다.

다음 프롬프트를 대기열에 추가하기

다음 요청을 보내기 전에 Lovable이 끝날 때까지 기다릴 필요가 없습니다. 빌드 모드와 플랜 모드 모두에서 새 메시지는 채팅 입력 위에 보이는 대기열에 들어가 한 번에 하나씩 순서대로 실행됩니다. 대기열을 일시 중지하고 재개하거나, 프롬프트 순서를 바꾸거나, 편집·복사·제거하거나, 대기열의 프롬프트를 최대 50회까지 반복할 수 있습니다. 대기 중인 프롬프트는 첨부한 파일, 요소, 참조를 그대로 유지합니다.

활동 카드로 작업 따라가기

Lovable의 개별 작업은 확장 가능한 활동 카드로 채팅에 나타납니다. 파일 편집, 명령, 웹 검색, 브라우저 테스트, 그리고 조사를 위임하는 서브에이전트까지 표시됩니다. 세부 내용을 살펴보려면 카드를 확장하세요. 규모가 큰 빌드 모드 요청에서는 Lovable이 처리 중인 작업 목록도 함께 보여 줍니다. 빌드 모드를 참조하세요.

작업 도중 중지하기

방향을 바꿔야 한다면 Lovable이 응답하는 동안 stop button을 클릭하세요. Lovable이 지금까지 완료한 작업은 유지하며, 이미 수행한 작업에 대해서는 메시지 요금이 부과됩니다. 그런 다음 더 나은 방향을 담아 새 메시지를 보낼 수 있습니다.

Lovable의 질문에 답하기

Lovable이 더 많은 방향이 필요할 때는 추측하는 대신 잠시 멈추고 질문 카드를 보여 줄 수 있습니다. 카드에는 최대 4개의 질문이 담기고 각 질문에는 답변 옵션이 있으며, 옵션을 고르거나 직접 답을 작성할 수 있습니다.

얼마나 답할지는 사용자가 조절합니다.

• 제출하기 전에 질문 사이를 오가며 앞선 답변을 바꿀 수 있습니다.
• 질문 하나를 건너뛰거나 전부 건너뛸 수 있습니다. 전부 건너뛰면 Lovable이 합리적인 기본값을 골라 계속 진행합니다.
• 초안 답변은 브라우저에 보관되므로 페이지를 새로 고쳐도 답변이 사라지지 않습니다.

정해진 답이 없는 시각 작업의 경우, Lovable이 채팅에서 바로 고를 수 있는 디자인 방향을 제시하기도 하므로 빌드하기 전에 모양을 잡을 수 있습니다. 디자인 가이드를 참조하세요.

Lovable의 응답에 대응하기

Lovable이 작업을 마치면 응답이 수행한 일과 바뀐 내용을 요약하며, 한 줄로 늘어선 작업 버튼으로 타이핑 없이 반응할 수 있습니다.

• Undo latest edit(최신 응답에만 해당): 확인 없이 한 번의 클릭으로 Lovable의 가장 최근 변경을 되돌립니다.
• Revert to this version(이전 응답): 확인을 거치면 프로젝트를 해당 시점으로 복원합니다. 버전 기록에서 되돌리는 것과 똑같이 작동합니다.
• Copy: 응답 텍스트를 복사합니다. 예를 들어 Lovable이 준 설명을 저장할 때 씁니다.
• Helpful / Not helpful: 결과에 대한 피드백을 주려면 응답을 평가합니다.

응답의 More options 메뉴에는 다음이 표시됩니다.

• Copy message link: 그 메시지로 바로 가는 링크를 복사합니다. 협업자나 지원 담당자에게 정확히 어느 단계에서 무슨 일이 일어났는지 알려 줄 때 유용합니다.
• Preview: 아무것도 되돌리지 않고, 그 메시지 직후 시점의 앱을 확인합니다.
• Lovable이 작업한 시간과 Credits used: 그 메시지가 든 비용입니다. 크레딧과 사용량을 참조하세요.

완료된 변경의 활동 카드에서 Bookmark in history 토글을 켜면 해당 버전이 북마크에 저장되어 나중에 쉽게 찾아 복원할 수 있습니다. 버전 기록을 참조하세요.

메시지 편집 후 다시 시도하기

앞선 요청이 일을 엉뚱한 방향으로 이끌었다면, 사용자가 보낸 이전 메시지 중 하나 위에 마우스를 올리고 Edit message를 선택하세요. 메시지를 다시 작성하고 Revert and resend로 확인하면, 프로젝트가 그 메시지 이전 상태로 돌아가고 Lovable이 대신 새 버전을 실행합니다.

이 기능은 사용자가 보낸 텍스트 전용 메시지에서만 작동합니다. 자세한 내용은 버전 기록에서 알아보세요.

오류 수정과 막힘 해결

Lovable이 작업하는 동안 빌드 오류가 나타나면 활동 카드에 Try to fix 버튼이 나타납니다. 클릭하면 Lovable이 로그를 훑어 문제를 찾고 수정을 시도합니다. Try to fix를 클릭해도 크레딧은 쓰이지 않습니다.

오류가 계속 반복되거나, 앱이 오류 없이 실행되지만 의도한 대로 동작하지 않는다면, 같은 프롬프트를 다시 시도하는 대신 다음 단계를 밟으세요.

The login form does nothing on mobile. Walk me through what's happening.

유료 플랜을 사용 중인데 문제가 Lovable 자체에 있다고 판단되면 지원에 문의하세요.

Lovable의 제안

응답 후 Lovable이 다음에 빌드할 만한 기능을 채팅 입력 근처에 클릭 가능한 칩으로 제안할 수 있습니다. 칩을 클릭하면 프롬프트 상자가 채워지므로 보내기 전에 문구를 다듬을 수 있고, 칩을 무시하고 직접 작성해도 됩니다. 제안은 프로젝트와 방금 빌드한 내용을 바탕으로 합니다. 계정 설정에서 Chat suggestions 토글로 이 기능을 끌 수 있습니다.

FAQ