캔버스란? 제미나이로 문서와 앱을 만드는 대화형 제작 모드
Gemini Canvas는 구글 제미나이의 대화형 제작 모드로, 텍스트 지시에서 곧바로 작동하는 결과물——웹페이지, 인포그래픽, 퀴즈, 플래시카드, 맞춤 앱——을 만들어 냅니다. 돌아오는 것은 설명하는 문장이 아니라 샌드박스 iframe 안에서 실제로 움직이는 완성품입니다.
TL;DR 핵심 요약
- 정체: 제미나이에 내장된 시각적 제작 패널. AI를 ‘질문에 답하는 도구’에서 ‘결과물을 납품하는 작업대’로 바꿉니다.
- 여섯 가지 템플릿: 웹페이지, 인포그래픽, 퀴즈, 플래시카드, 오디오 요약, 맞춤 앱——학습 카드부터 대화형 계산기까지 폭넓게 커버합니다.
- 반복 작업 흐름: 생성 후 대화로 고칩니다(“제목을 남색으로”, “비교표에 열 하나 추가”, “모바일에 맞게”). 각 수정은 직전 버전의 맥락을 이어받습니다.
- 샌드박스 보안: 생성된 코드는 iframe 격리 환경에서 실행되며 본 앱의 쿠키, localStorage, 시스템 자원에 접근하지 못합니다.
- 아티팩트 계열과의 관계: Claude Artifacts, ChatGPT Canvas와 같은 범주이지만 훨씬 템플릿 중심이고 비개발자 친화적입니다.
- 데스크톱 큰 화면이 유리: 좌우 분할(왼쪽 대화, 오른쪽 실시간 미리보기) 레이아웃은 데스크톱에서 가장 잘 살아나고 모바일에서는 제약이 큽니다.
캔버스로 무엇을 만들 수 있나요?
캔버스는 제미나이를 질의응답 도구에서 제작 도구로 바꿉니다. 준비된 템플릿은 여섯 가지입니다.
웹페이지: 설명만으로 완성된 반응형 HTML 페이지를 생성합니다. CSS 스타일과 기본 동작용 JavaScript가 포함되며 제품 랜딩 페이지, 이력서, 행사 초대장, 한 장짜리 문서로 쓸 수 있습니다.
인포그래픽: HTML과 SVG로 만드는 데이터 시각화입니다. 텍스트를 선택할 수 있어 검색에 유리하고, 벡터라 확대해도 깨지지 않습니다. 발표 자료 삽입이나 사내 보고에 적합합니다.
퀴즈: 자동 채점, 즉시 피드백, 오답 힌트가 붙은 객관식 문제입니다. 수업, 사내 교육, 커뮤니티 행사에 잘 맞습니다.
플래시카드: CSS 뒤집기 애니메이션이 들어간 학습 카드로 키보드 이동, 순서 섞기, 진도 추적을 지원합니다. 어학 학습, 시험 대비, 개념 암기용입니다.
오디오 요약: 선택한 내용을 음성 요약으로 만듭니다. 제미나이가 먼저 텍스트를 압축한 뒤 합성 음성으로 읽어 줍니다. NotebookLM 오디오 요약의 경량 버전에 가깝습니다.
맞춤 앱: 가장 자유로운 모드입니다. HTML/CSS/JavaScript로 원하는 대화형 앱——계산기, 단위 변환기, 추첨 도구, 미니 게임, 데이터 대시보드——을 만들 수 있어 사실상 프로토타입 수준의 MVP를 뽑아낼 수 있습니다.
캔버스는 어떻게 작동하나요?
캔버스를 실행하면 제미나이가 HTML, CSS, JavaScript를 생성하고 이를 샌드박스 iframe 안에서 렌더링합니다. 이 샌드박스가 보안 경계이며, 생성된 코드는 사용자의 쿠키, localStorage, 시스템 자원에 접근할 수 없습니다. 지시문에 악의적인 명령이 섞여 들어와도 주입된 코드는 격리 환경 안에서만 실행되므로 호스트 앱은 보호됩니다.
핵심 작업 흐름은 반복입니다. 생성한 뒤 대화로 고쳐 나갑니다——“제목을 남색으로”, “비교표에 열을 하나 더”, “모바일에 맞게”, “표에 설명 행을 하나 추가”. 각 지시는 기존 결과물을 수정할 뿐 처음부터 다시 만들지 않습니다. 캔버스는 이미 만들어진 HTML 구조, 데이터, 스타일이라는 전체 맥락을 유지한 채 제작 대화를 계속 이어 갑니다. 대부분의 경우 5~10회 주고받으면 배포 가능한 수준에 가까워집니다.
기술 스택 면에서 캔버스는 기본적으로 순수 HTML/CSS/JavaScript를 사용하며 프레임워크가 필요 없습니다. 복잡한 앱에서는 CDN으로 Tailwind, Chart.js, Alpine.js 같은 가벼운 라이브러리를 불러올 수 있습니다. 결과물은 단독 HTML 파일로 내려받아 자기 서버에 올리거나, 제미나이 계정에 저장해 계속 다듬을 수 있습니다.
맞춤 앱에서는 어떤 언어가 실행되나요?
맞춤 앱 모드에서 실행되는 것은 대부분 브라우저 기본 언어입니다. HTML/CSS가 구조와 스타일을 맡고, **JavaScript(ES2020 이상)**가 주 로직 언어로 Fetch API, Canvas 2D, SVG 조작, localStorage(샌드박스 안에서는 동작하지만 새로고침하면 사라집니다)를 쓸 수 있습니다. WebGL로 간단한 3D 장면도 그릴 수 있습니다. 계산량이 많은 작업에는 pyodide(브라우저에서 도는 파이썬 실행 환경)를 불러 파이썬을 돌리거나 Lua, Wasm 같은 경량 스크립트를 쓸 수 있습니다. 지원하지 않는 것은 Node.js 서버 로직과 백엔드 데이터베이스를 전제로 하는 언어(Java/Go/Rust의 서버 코드)입니다. 이런 요구는 Deep Research로 기술 검토를 먼저 한 뒤 정식 개발 환경으로 옮기는 편이 맞습니다.
주요 아티팩트 도구들과 무엇이 다른가요?
| 제품 | 제조사 | 코드 스택 | 템플릿 | 내보내기 | 공유 | 가격 |
|---|---|---|---|---|---|---|
| Gemini Canvas | 구글 | HTML/CSS/JS | 6종 + 자유 모드 | HTML 파일 / Docs / Drive | 공유 링크 | 기본 기능 무료, Advanced에서 전체 해제 |
| Claude Artifacts | Anthropic | React + HTML | 자유 모드 위주 | 코드 복사 / 공유 링크 | 공유 링크 | Claude Pro 월 $20 |
| ChatGPT Canvas | OpenAI | 문서 편집 위주 | 문서 + 코드 | 마크다운/코드 내보내기 | 공유 링크 | ChatGPT Plus 월 $20 |
| GitHub Spark | GitHub | React Native | 풀스택 앱 | GitHub 저장소 | GitHub 협업 | Copilot Pro 월 $10 |
방향성 차이는 분명합니다. Claude Artifacts는 개발자 지향으로 React 컴포넌트 기반의 구조화 능력이 강해 복잡한 데이터 시각화와 도구 프로토타입에 강합니다. ChatGPT Canvas는 협업 글쓰기 도구에 가까워 긴 문서 편집(부분 재작성, 버전 비교)에 강한 대신 대화형 콘텐츠 생성은 약합니다. Gemini Canvas는 템플릿 중심이라 비개발자에게 친절해 교사, 마케터, 중소기업이 코드 없이 결과물을 얻습니다. GitHub Spark는 더 무거운 풀스택 AI 앱 쪽으로 가고 있습니다.
캔버스와 Claude Artifacts 중 무엇을 골라야 하나요?
판단 기준은 네 가지입니다.
코드 복잡도: Artifacts는 기본적으로 React 컴포넌트를 쓰기 때문에 React 경험이 있는 개발자에게 매우 매끄럽고, 상태 관리가 필요한 복잡한 앱(localStorage를 쓰는 할 일 목록, 차트가 있는 대시보드)을 바로 만들 수 있습니다. 캔버스는 순수 JavaScript에서 출발하므로 React 배경은 없지만 간단한 스크립트는 쓸 수 있는 기획자와 마케터에게 맞습니다.
템플릿 충실도: 캔버스에는 바로 쓰는 여섯 가지 템플릿(퀴즈, 플래시카드, 인포그래픽 등)이 있어 한마디면 결과물이 나옵니다. Artifacts는 사실상 프리셋이 없어 원하는 바를 직접 서술해야 합니다. 어디서 시작할지 모르는 초심자에게는 캔버스의 템플릿이 진입 장벽을 낮추는 핵심입니다.
수정 단위: 캔버스의 대화형 반복은 ‘덩어리 교체’에 가까워 “페이지 전체 분위기를 바꿔 줘” 같은 지시가 잘 통합니다. Artifacts는 더 세밀해서 “세 번째 카드의 버튼 색만 바꾸고 나머지는 유지”가 가능합니다.
공유와 연동: 둘 다 공유 링크를 제공하지만 캔버스는 구글 문서/드라이브 생태계와 잘 붙고, Artifacts는 Claude 프로젝트 작업 공간과 잘 붙습니다.
Deep Research와 어떻게 조합하나요?
캔버스와 Deep Research의 조합은 제미나이 생태계에서 가장 강한 복식조입니다. 전형적인 흐름은 먼저 Deep Research로 조사 보고서(예: “전기차 시장 경쟁사 분석”)를 만들어 15쪽 분량의 마크다운과 수십 개의 인용을 얻는 것입니다. 그다음 그 보고서를 캔버스에 붙여 넣고 “이 보고서를 바탕으로 인포그래픽을 만들어 줘. 상위 5개사의 점유율과 핵심 차이를 강조해서”라고 말합니다. 캔버스는 데이터를 해석해 SVG로 비교 막대그래프와 브랜드 타임라인을 그립니다. 글자뿐이던 조사가 몇 분 만에 고객에게 보내거나 채널에 올릴 수 있는 시각 콘텐츠로 바뀝니다.
또 하나 자주 쓰는 조합은 ‘조사 + 퀴즈’입니다. Deep Research로 기술 주제를 조사한 뒤 캔버스로 핵심을 정답 포함 20문항 퀴즈로 바꾸면 팀 학습이나 채용 필기 문제로 쓸 수 있습니다.
구글 문서나 노션으로 어떻게 내보내나요?
캔버스 결과물이 가장 많이 향하는 곳은 구글 문서, 노션, 옵시디언 세 곳이고 방법이 각각 다릅니다.
구글 문서로: 캔버스 오른쪽 위의 “Export to Docs”를 누르면 텍스트 계열 내용(웹페이지 본문, 인포그래픽의 글자 부분)이 Docs 형식으로 바뀌며 제목 계층과 링크가 유지됩니다. SVG 인포그래픽은 Docs 내장 이미지로 변환되어 상호작용은 사라지지만 시각 요소는 남습니다.
노션으로: 현재 원클릭 내보내기가 없어 수동입니다. 오른쪽 위 “Copy as Markdown”으로 마크다운을 복사해 노션 페이지에 붙여 넣습니다. 표, 코드 블록, 링크는 정확히 변환되지만 맞춤 CSS 효과는 사라집니다.
옵시디언으로: 노션과 같은 수동 절차로 마크다운을 복사해 붙여 넣습니다. 옵시디언은 로컬 파일과 궁합이 좋아 캔버스를 ‘한 번 쓰고 버리는 외부 작업 공간’으로 두고 알맹이만 로컬 지식 베이스로 옮기는 방식에 어울립니다.
실제로 누가 어떻게 쓰나요?
교사와 강사: 개념마다 20문항 퀴즈를 즉석에서 만들어 배포하고, 복습용 플래시카드를 생성하고, 수업 자료용 인포그래픽을 만듭니다. 슬라이드 템플릿도 디자인 소프트웨어도 필요 없이 “중학교 수학 도형 문제 20개를 정답과 해설과 함께”라고 말하면 결과물이 나옵니다.
콘텐츠 창작자: 글에 붙일 맞춤 인포그래픽(데이터 시각화), 영상 예고용 대화형 웹페이지, 한 장짜리 행사 초대장을 만듭니다. 디자이너를 찾거나 소재를 촬영하는 것보다 한 자릿수 이상 빠릅니다.
프로덕트 매니저와 창업자: MVP 수준의 도구 시제품——“체중과 목표로 하루 칼로리 적자를 계산하는 도구”, “입력한 제품 분류에 따라 경쟁 제품을 추천하는 카드형 웹 앱”. 실사용자에게 배포할 수준은 아니어도 팀 시연이나 초기 가설 검증에는 충분합니다.
마케팅과 운영: 캠페인 랜딩 페이지(“창립 기념일용 카운트다운 축하 페이지”), 사내 교육 퀴즈, 이메일 구독 폼, 간단한 데이터 대시보드를 빠르게 만듭니다.
학생과 독학자: 교재 단원을 플래시카드로 바꾸고, 어려운 개념을 인포그래픽으로 만들어 암기를 돕고, 맞춤 앱 모드로 모의 문제나 코딩 연습을 만듭니다.
캔버스가 못 하는 일은 무엇인가요?
지금 못 하는 것은 다섯 가지입니다. 진짜 백엔드(데이터베이스도 영속 저장도 없어 새로고침하면 사라집니다. 백엔드가 필요하면 캔버스 결과물을 프런트 프로토타입으로만 쓰고 서버는 따로 붙입니다), 복잡한 외부 서비스 연동(API 키가 필요한 서비스는 직접 호출할 수 없고 공개 CDN 라이브러리만 가능), 픽셀 단위 정밀 디자인(피그마나 스케치 수준의 정밀도는 여전히 약점), 다중 페이지 앱(한 번에 한 페이지만 렌더링하므로 페이지 이동은 직접 이어 붙여야 합니다), 실시간 공동 편집(구글 문서 같은 동시 편집이 아니라 혼자 대화하며 만드는 방식입니다).
알려진 제약도 있습니다. 무료 등급은 템플릿 사용 횟수에 제한이 있고, 맞춤 앱과 오디오 요약은 대체로 Advanced가 필요합니다. 수백 줄짜리 JavaScript가 들어가는 복잡한 맞춤 앱은 한 번의 생성에서 시간 초과가 날 수 있어 나눠서 반복해야 합니다. 내보내기 선택지도 제한적이라 기본은 HTML 파일이나 계정 내 저장이며, 워드프레스나 윅스 같은 CMS로 옮기려면 수작업이 필요합니다.
윈도우에서는 어떻게 쓰나요?
구글은 지금까지도 네이티브 제미나이 윈도우 앱을 내놓지 않았습니다. 2026-04-14에 공개된 “Google app for desktop”은 Alt+Space 검색 오버레이일 뿐이며, 캔버스 같은 다중 패널 제작 흐름은 지원하지 않고 업로드도 20MB로 막혀 있습니다. 윈도우에서 캔버스로 웹페이지, 인포그래픽, 대화형 앱을 만들고 HTML을 로컬로 내보내려면 GeminiDesktop을 권합니다. 네이티브 윈도우 바이너리로 좌우 분할 큰 화면 제작이 가능해 브라우저 탭을 오가는 것보다 반복이 빠릅니다. 자세한 내용은 윈도우 설치 가이드와 Google app 비교를 참고하세요.
자주 묻는 질문
Q: 캔버스와 Claude Artifacts 중 무엇을 고를까요? A: 용도에 달렸습니다. 교육/마케팅/비개발 결과물(플래시카드, 인포그래픽, 퀴즈, 랜딩 페이지)이라면 템플릿을 바로 쓰는 캔버스, 개발자용 시제품(React 컴포넌트, 복잡한 데이터 시각화, 도구 앱)이라면 React 기반으로 구조를 잡는 Artifacts가 낫습니다.
Q: 만든 웹페이지를 내 도메인에 올릴 수 있나요? A: 가능합니다. 단독 HTML 파일로 내보낸 뒤 Vercel, Netlify, Cloudflare Pages, GitHub Pages 같은 정적 호스팅이나 자체 서버에 올리면 됩니다. CDN 라이브러리 등 외부 의존성의 가용성만 확인하세요.
Q: 생성된 코드를 바로 프로덕션에 써도 되나요? A: 일반적으로 권하지 않습니다. 캔버스는 프로토타입과 중저 복잡도 결과물에 적합하고, 프로덕션 수준의 보안·유지보수성·성능 최적화는 사람의 검토가 필요합니다. Deep Research로 기술 검토를 먼저 해 두면 안전합니다.
Q: 캔버스에 이미지를 넣을 수 있나요? A: 됩니다. Nano Banana 2로 만든 이미지를 대화에 올려 웹페이지나 인포그래픽에 넣을 수 있고, 외부 이미지 URL을 붙여 넣을 수도 있습니다.
Q: 만든 결과물의 권리는 누구에게 있나요? 상업적으로 쓸 수 있나요? A: 구글 약관상 캔버스로 생성한 내용은 상업적 이용을 포함해 사용자가 쓸 수 있습니다. 다만 생성 코드가 제3자 라이브러리(MIT/Apache 계열 CDN 자원)를 불러오면 각 라이선스를 따라야 합니다.
Q: 구글 문서와 연동되나요? A: 됩니다. 캔버스 결과물 중 특히 텍스트 계열 내용은 구글 문서로 내보내 계속 편집할 수 있어 “캔버스에서 만들고 Docs에서 다듬는” 흐름이 만들어집니다.
더 읽어보기
- Deep Research란?——캔버스와 나란히 서는 제미나이의 또 다른 에이전트 능력
- Nano Banana란?——캔버스 웹페이지와 인포그래픽에 넣을 이미지 만들기
- Personal Intelligence란?——캔버스에 브랜드 템플릿과 취향을 기억시키기
- Veo란?——캔버스 웹페이지에 동영상 더하기
- Gemini for Mac 100일 100기능 리뷰
- 윈도우 네이티브 제미나이 앱 완전 가이드
- 구글이 만들지 않은 제미나이 윈도우 클라이언트
데스크톱 경험
GeminiDesktop은 macOS(인텔·애플 실리콘), 윈도우, 리눅스 바이너리로 크로스 플랫폼 네이티브 캔버스 경험을 제공합니다. 좌우 분할 큰 화면 레이아웃(왼쪽 대화, 오른쪽 캔버스 미리보기) 덕분에 브라우저 탭을 오갈 때보다 반복 리듬이 촘촘해지고, 레티나·고해상도 렌더링으로 더 선명하며, 생성한 HTML·인포그래픽·앱을 로컬 파일 시스템으로 바로 내보낼 수 있습니다. 영어 위주에 20MB 상한이 있는 구글의 윈도우 검색 클라이언트(비교)와 달리 GeminiDesktop은 한국어·중국어·일본어 UI와 완전한 캔버스 작업 흐름을 지원합니다. 내려받기: geminidesktop.app.