프리뷰에서 편집하기

앱 프리뷰에서 직접 요소를 선택하고, 편집하고, 주석을 달고, 코멘트를 남길 수 있습니다.

**프리뷰 툴바(preview toolbar)**를 사용하면 앱을 빌드하면서 동시에 상호작용할 수 있습니다. 모드를 고르고, 페이지에서 동작을 취한 뒤, 직접 편집하거나, 변경 내용을 설명하거나, 주석을 그리거나, 코멘트를 남기세요.

설명하기보다 가리키는 편이 빠를 때, 작은 수정을 연달아 하고 싶을 때, 또는 시각적 주석이 텍스트보다 변경 내용을 더 잘 설명할 때 툴바를 사용하세요. 별도의 편집기가 열리기를 기다릴 필요 없이, 앱 프리뷰가 나타나는 즉시 툴바를 사용할 수 있습니다.

프리뷰 툴바 모드

각 툴바 모드는 프리뷰와 상호작용하는 방식을 바꿉니다.

언제든지 모드를 전환할 수 있습니다. 현재 모드에 보내지 않은 그림이나 저장하지 않은 텍스트 변경처럼 끝내지 않은 작업이 있으면, 변경 내용을 보내거나 취소하기 전까지 다른 모드를 사용할 수 없습니다.

요소 선택

페이지의 특정 부분을 Lovable에 가리키고 무엇을 바꿔야 하는지 설명하고 싶을 때 **요소 선택(Select elements)**을 사용하세요.

1. 툴바에서 Select elements 버튼을 클릭하거나 S를 누릅니다.
2. 바꾸려는 요소를 클릭합니다. 한 번에 여러 요소를 선택할 수 있습니다. Cmd(Mac) 또는 Ctrl(Windows)을 누른 채 다른 요소를 클릭하면 선택에 추가됩니다. 선택한 각 요소는 메인 채팅 입력창에 참조로 첨부되며, 프롬프트가 모든 요소에 적용됩니다.
3. 바꾸고 싶은 내용을 일상 언어로 입력합니다.
4. 메시지를 보냅니다.

예시 프롬프트:

이 버튼을 기본 브랜드 색상으로 바꾸고 모서리를 더 둥글게 해줘.

Lovable은 선택한 요소를 컨텍스트로 사용해 설명에 따라 변경을 적용합니다.

이는 표준 채팅 사용으로 간주되며 크레딧을 소비합니다.

인라인 텍스트 편집

프롬프트를 작성하지 않고 페이지의 단어를 바꾸려면 **인라인 텍스트 편집(Edit text inline)**을 사용하세요. 오타를 고치거나, 헤드라인을 바꾸거나, 레이블을 업데이트하는 가장 빠른 방법입니다.

1. Edit text inline 버튼을 클릭하거나 T를 누릅니다.
2. 페이지의 아무 텍스트나 클릭합니다.
3. 그 자리에서 텍스트를 직접 편집합니다.
4. Send를 클릭하면 Lovable이 변경을 적용합니다.

인라인 텍스트 편집은 사용자당 하루 100회까지 무료입니다. 그 이후 추가 인라인 텍스트 편집은 워크스페이스의 크레딧을 사용합니다. 한도는 24시간마다 초기화됩니다.

주석 그리기

앱 프리뷰 위에 스케치해 그 스케치를 메시지와 함께 이미지로 보내려면 **주석 그리기(Draw annotation)**를 사용하세요. 카드 묶음을 옮기거나, 섹션을 제거하거나, 새 요소를 어디에 둘지 보여줄 때처럼 말로는 충분히 정확하지 않을 때 유용합니다.

1. Draw annotation 버튼을 클릭하거나 D를 누릅니다.
2. 프리뷰 위에 그립니다. 스케치는 메인 채팅 입력창에 주석으로 첨부됩니다.
3. Lovable에게 시키고 싶은 내용을 설명하는 메시지를 입력합니다.
4. 메시지를 보냅니다.

자유롭게 그리거나 선, 화살표, 사각형, 원, 타원을 그릴 수 있습니다. 대략적인 도형은 자동으로 인식·정리되어, 빠르게 그린 원이 깔끔한 원으로 바뀝니다.

원으로 표시한 섹션이 있는 예시 프롬프트:

이 원 안에 있는 모든 것을 제거하고 "시작하기"라고 적힌 하나의 콜투액션 버튼으로 교체해줘.

Lovable은 메시지와 주석이 달린 스크린샷을 함께 받습니다.

이는 표준 채팅 사용으로 간주되며 크레딧을 소비합니다.

코멘트 추가

앱의 특정 부분에 고정된 메모를 남기려면 **코멘트 추가(Add a comment)**를 사용하세요. 코멘트는 위치를 별도 채널에서 설명하는 대신, 맥락 안에서 프로젝트를 논의할 수 있게 해줍니다.

1. Add a comment 버튼을 클릭하거나 C를 누릅니다.
2. 코멘트를 남길 위치를 클릭합니다. 핀이 나타나고, 그 옆에 Add a comment 양식이 있는 코멘트 스레드가 열립니다.
3. 코멘트를 입력하고 보냅니다.

코멘트는 핀을 꽂은 요소에 계속 붙어 있습니다. 팀원이 답글을 달 수 있으며, 읽지 않은 답글이 있으면 Add a comment 버튼에 빨간 배지가 표시됩니다.

프리뷰 툴바가 숨겨져 있을 때는 코멘트 버튼이 프리뷰 상단의 프로젝트 툴바로 이동해, 스레드·답글·읽지 않은 배지를 계속 볼 수 있습니다.

코멘트 추가는 크레딧을 사용하지 않습니다. 코멘트 스레드를 Lovable에 보내는 것은 표준 채팅 사용으로 간주되어 크레딧을 소비합니다.

자세한 내용은 프로젝트 코멘트를 참고하세요.

툴바 다루기

프리뷰 툴바는 작업하는 동안 계속 표시되지만, 프리뷰에서 더 넓은 공간이 필요할 때는 위치를 옮기거나, 모양을 바꾸거나, 숨길 수 있습니다.

위치, 최소화, 숨기기

툴바 옵션 메뉴에는 Dock, Minimize, Hide가 있습니다.

툴바는 프리뷰 하단 가운데에 도킹된 상태로 시작합니다. 다음을 할 수 있습니다:

• 프리뷰 안 어디로든 드래그합니다. 배치를 쉽게 하도록 모서리와 하단 가운데 기본 위치에 스냅되지만, 원하는 곳 어디에나 놓을 수 있습니다.
• 프리뷰 가장자리의 작은 탭으로 최소화합니다. 탭에 마우스를 올리거나 탭하면 다시 펼쳐집니다.
• 깔끔한 프리뷰를 원할 때 숨깁니다. 프로젝트 툴바 옵션에서 Show toolbar를 클릭하면 다시 불러올 수 있습니다.

툴바는 자신의 상태와 위치를 기억합니다. 다음에 프로젝트를 열면 마지막으로 두었던 자리에 나타납니다.

테마

옵션 메뉴에서 툴바를 Auto, Light, Dark로 고정할 수 있습니다. Auto 모드에서는 스크롤할 때 뒤 배경에 맞춰 툴바가 조정되어, 어떤 배경에서도 읽기 좋게 유지됩니다. Light와 Dark는 고정된 모양을 유지합니다.

변경 사항 대기열

하나의 변경이 끝날 때까지 기다린 뒤 다음 변경을 시작할 필요가 없습니다. Lovable이 아직 작업 중일 때 툴바에서 새 요청을 보내면, 요청이 대기열에 추가됩니다. Lovable은 대기열의 요청을 순서대로 처리합니다.

대기열을 비우거나 그대로 끝까지 실행되게 둘 수 있습니다.

최상의 결과를 위한 팁

• 먼저 가리키고, 그다음 설명하세요. 바꾸려는 대상을 클릭할 수 있다면 요소 선택을 사용해 Lovable에 페이지 컨텍스트를 제공하세요.
• 공간적 변경에는 주석 그리기를 사용하세요. 요소를 옮기거나, 콘텐츠를 묶거나, 영역을 삭제하거나, 새 레이아웃을 스케치하는 일은 글로 설명하기보다 그림으로 그리는 편이 더 빠른 경우가 많습니다.
• 요소를 선택했을 땐 프롬프트를 짧게 유지하세요. Lovable은 이미 선택한 것을 알고 있습니다. "이걸 기본 색상으로 만들어줘" 정도면 충분합니다.
• 모호한 변경에는 그림과 말을 결합하세요. 스케치는 어디를 보여주고, 설명은 무엇을 알려줍니다.
• 작은 텍스트 변경은 직접 고치세요. 오타, 레이블, 짧은 문구 변경에는 인라인 텍스트 편집을 사용하세요.
• 이미지 변경에는 채팅을 사용하세요. 이미지를 교체하려면 이미지를 선택하고 새 이미지를 첨부하거나 이미지 URL을 추가한 뒤 변경 내용을 설명하세요. 기존 이미지를 편집하려면 이미지를 선택하거나 그 위에 그린 다음 무엇을 바꿀지 Lovable에게 알려주세요.
• 여러 편집을 연달아 보내세요. Lovable이 이전 요청을 처리하는 동안에도 계속 작업할 수 있습니다.

FAQ