Lovable에서 Google Docs, Sheets, Slides 편집하기

편집 가능한 Google Docs, Sheets, Slides 파일을 Lovable preview에 embed하기 위한 가벼운 프로젝트 지식을 connector 설정 안내와 iframe URL 패턴과 함께 담았습니다.

Lovable을 사용해 편집 가능한 Google Doc, Sheet, Slides 자료를 중심으로 앱을 만들 수 있습니다. 흔한 패턴은 Google 편집기를 iframe으로 보여주고 주변의 Lovable 앱이 내비게이션, 버튼, 요약, 자동화, 커스텀 워크플로를 더하는 방식입니다.

협업자가 내용을 별도 편집기로 복사하지 않고 원본 Google 파일을 직접 계속 편집하도록 하고 싶을 때 활용하세요.

이 워크플로를 사용하는 이유

Google 편집기를 embed하면 원본을 Google Workspace에 유지합니다. 사용자는 익숙한 Docs, Sheets, Slides 편집 도구를 계속 쓰고 Lovable 앱은 파일 주변에 제품 경험을 더합니다.

가벼운 사내 도구, 리뷰 흐름, 스프레드시트 기반 대시보드, 문서 코파일럿, 슬라이드 덱 도우미에 잘 맞습니다.

흔한 활용 사례와 예시 앱

사전 준비

• 파일에 접근 가능한 Google 계정
• 파일을 embed할 Lovable 프로젝트
• 앱이 API를 통해 Google 파일을 읽기·쓰기·생성·나열해야 한다면 Google Workspace connector
• 앱을 사용하는 사람이 Google 파일을 보거나 편집하도록 허용하는 공유 설정

App connector는 Free, Pro, Business 플랜에서 기본으로 켜져 있습니다. Enterprise 플랜에서는 workspace 관리자와 소유자가 Connectors → Admin settings → App connectors에서 connector 사용 여부를 관리합니다.

Google Workspace connector 설정

앱이 알려진 Google 파일을 embed하기만 한다면 connector가 필요 없을 수 있습니다. 앱이 Google 파일을 읽기·쓰기·생성·나열·업데이트한다면 먼저 해당 Google Workspace 서비스를 연결하세요.

Use my Google Sheets connection to read and update rows in this spreadsheet. Also show the spreadsheet itself in an editable iframe on the right side of the page.

전체 connector 설정 흐름은 Google Workspace를 참고하세요.

올바른 iframe URL 사용

직접 편집하려면 Lovable에 /edit이 붙은 Google 편집기 URL을 사용하도록 요청하세요. 편집을 목표로 할 때는 /preview, /view, /pub, 웹에 게시된 URL을 피하세요.

사용자가 제공한 파일별 유용한 파라미터는 유지하세요.

• Docs: 링크에 tab 파라미터가 있으면 tab=...을 유지합니다.
• Sheets: 특정 시트나 범위를 열려면 gid=... 또는 range=...을 유지합니다.
• Slides: 특정 슬라이드를 열려면 slide=...을 유지합니다.

복사해 쓰는 지식 파일

팀이 Google Workspace 편집 앱을 자주 만든다면 프로젝트 지식, workspace 지식, 또는 집중된 skill에 아래 내용을 붙여 넣으세요.

Google Workspace editing guidance

When I ask to embed or edit a Google Doc, Sheet, or Slides deck directly in Lovable:
- Use an iframe that points to the Google editor URL with /edit, not /preview, /view, /pub, or a published-to-web URL.
- Use these URL patterns:
  - Docs: https://docs.google.com/document/d/FILE_ID/edit?usp=sharing
  - Sheets: https://docs.google.com/spreadsheets/d/FILE_ID/edit?usp=sharing
  - Slides: https://docs.google.com/presentation/d/FILE_ID/edit?usp=sharing
- Preserve useful URL parameters from the pasted link, such as Docs tab, Sheets gid/range, and Slides slide anchors.
- Add an "Open in Google" link near the iframe as a fallback.
- Make the iframe large enough to edit comfortably, usually full height in a split-pane layout.
- Store Google file IDs separately from display names when building file pickers or saved workspaces.
- If the app needs to read, write, create, or list files through APIs, use the matching Google Workspace connector. The iframe itself uses the viewer's Google browser session.
- Do not make a private Google file public unless I explicitly ask for that. Tell me when sharing settings or account access may block editing.
- For Sheets, use the connector for structured row reads and writes, and use the iframe for manual spreadsheet editing.
- If Google shows a sign-in screen or blocks the iframe, keep the Open in Google fallback and explain that Google controls iframe and sign-in behavior.

모범 사례

• 붙여 넣은 Google URL에서 시작하세요. 사용자에게 ID를 직접 찾게 하지 말고 파일 ID를 파싱하고 유용한 파라미터를 유지합니다.
• 분할 화면을 우선하세요. 한쪽에 Google 편집기를 두고 다른 쪽에 Lovable로 만든 컨트롤을 둡니다.
• 데이터 작업에는 connector를 사용하세요. 예를 들어 Google Sheets connector로 Sheet 행을 읽고 수동 검토용으로 Sheet iframe을 보여줍니다.
• 공유 설정을 존중하세요. 파일 공개 범위를 바꾸기 전에 묻고 사용자가 명시적으로 요청하지 않는 한 비공개 파일을 공개로 만들지 않습니다.
• 대안을 항상 보이게 두세요. 외부 링크는 Google이 로그인을 요구하거나 iframe 동작을 막을 때 막다른 길을 피하게 해줍니다.

제한 사항

• Google이 편집기를 iframe 안에서 로드할지 여부를 통제합니다. 사용자는 로그인하거나, 쿠키를 수락하거나, 파일을 새 탭에서 열어야 할 수 있습니다.
• iframe은 앱에 문서 내용에 대한 직접 접근을 주지 않습니다. 앱에 구조화된 접근이 필요하면 Google Workspace connector를 사용하세요.
• connector로 만든 파일은 연결된 Google 계정이 소유하거나 접근합니다. 사용하려는 계정을 인증했는지 확인하세요.
• 게시된 앱은 앱에 접근할 수 있는 누구에게나 embed된 링크를 노출할 수 있습니다. Google 공유 권한을 앱 대상과 맞게 유지하세요.

FAQ