Gemini Canvas는 제미나이의 성격 자체를 바꿔 놓았습니다. Canvas가 없을 때 제미나이는 챗봇입니다. 질문을 입력하면 글이 돌아옵니다. Canvas가 있으면 제미나이는 제작 도구가 됩니다. 원하는 것을 설명하면 제미나이가 직접 만들어 냅니다. 작동하는 웹페이지, 상호작용형 퀴즈, 뒤집기 애니메이션이 붙은 플래시카드, HTML과 SVG로 그린 인포그래픽. 결과물은 설명하는 글이 아니라 결과물 그 자체입니다.

핵심 요약

실행 방법: 전체 대화 창(⌥ ⇧ Space)을 열고 입력창의 ‘Canvas’ 버튼을 누르거나, 질문 끝에 ‘Canvas로 보여줘’를 덧붙입니다
6가지 템플릿: 웹페이지, 인포그래픽, 퀴즈, 플래시카드, 오디오 요약, 맞춤형 앱
출력 형태: 사이드 패널 실시간 미리보기(HTML/CSS/JS를 iframe 샌드박스에서 렌더링)
내보내기: .html 다운로드, 소스 복사, 화면 캡처 저장, 읽기 전용 링크 공유
수정 방식: 대화로 지시. ‘버튼을 초록색으로 바꿔줘’, ‘뒤로 가기 버튼 추가해줘’ 하면 곧바로 다시 렌더링됩니다
지원 모델: Gemini 2.5 Pro 이상(일부 템플릿은 Gemini 3 필요)
용량 상한: 생성되는 HTML은 약 800KB까지이며, 넘으면 잘립니다
경쟁 제품: Claude Artifacts(개발자 지향), ChatGPT Canvas(문서 협업 지향)

데스크톱 앱에서 Canvas는 어떻게 쓰나요?

⌥ ⇧ Space로 전체 창을 여는 것부터 시작합니다. 작은 팝업 창에서는 Canvas를 쓸 수 없습니다.

⌥ ⇧ Space로 제미나이 전체 창을 엽니다(미니 창은 Canvas 미지원)
모델 선택기가 Gemini 2.5 Pro 또는 Gemini 3인지 확인합니다
입력창 오른쪽의 Canvas 아이콘(팔레트 모양)을 눌러 템플릿을 고르거나 자동 판단에 맡깁니다
원하는 내용을 입력합니다. 예: ‘이력서 사이트를 만들어줘. 주요 색상은 짙은 남색이고 이름, 소개, 경력, 프로젝트, 연락처를 넣어줘’
오른쪽에 Canvas 미리보기 패널이 자동으로 펼쳐지고, 코드가 흐르듯 생성된 뒤 렌더링됩니다
대화로 계속 고칩니다. ‘글꼴을 Inter로 바꿔줘’, ‘연락처에 LinkedIn 아이콘 넣어줘’
내보냅니다. 미리보기 상단의 ’⋯‘에서 ‘Download HTML’ 또는 ‘Copy source’를 선택합니다

6가지 템플릿은 각각 무엇을 만들어 주나요?

웹페이지——글로 쓴 설명에서 완성된 HTML 페이지를 만들어 줍니다. 포트폴리오, 랜딩 페이지, 이력서. 자체 완결형이고 반응형입니다. 핵심은 반복입니다. 만든 뒤에 색을 바꾸고 양식을 추가하고 배치를 다시 잡는 일이 모두 실시간 미리보기 안에서 끝납니다.

웹페이지 템플릿은 Tailwind CSS와 순수 JavaScript를 씁니다(React/Vue를 넣지 않아 의존성을 피하는 설계). 모든 코드는 하나의 HTML 파일 안에 인라인으로 들어갑니다. 장점은 ‘받아서 바로 쓸 수 있다’는 점입니다. 내려받아 더블클릭하면 브라우저에서 열리고 빌드 과정이 필요 없습니다. 단점은 복잡한 상호작용이 필요할 때 여러 파일로 직접 쪼개야 한다는 것입니다.

인포그래픽——HTML과 SVG로 데이터를 시각화합니다. 글자는 선택할 수 있고, SVG는 어떤 해상도에서도 선명하게 확대되며, 대화로 데이터 값을 바꾸거나 배치를 다시 짤 수 있습니다.

‘이 분기 실적 데이터를 누적 막대그래프와 추세선이 있는 인포그래픽으로 만들어줘’, ‘전 세계 커피 소비량 지도를 만들어줘’ 같은 요청이 대표적입니다. 만들어진 SVG는 발표 자료나 Figma에 그대로 넣을 수 있습니다. 비트맵(PNG/JPG)과 달리 벡터로 편집할 수 있는 상태가 유지됩니다.

퀴즈——채점과 즉각적인 정오 피드백이 붙은 상호작용형 객관식 문제입니다. 주제를 주거나 자료를 붙여넣으면 만들어집니다. 교사의 연습 문제 출제, 교육 담당자의 이해도 점검, 긴 글을 자가 점검 도구로 바꾸는 데 적합합니다.

퀴즈에는 채점 로직이 들어 있습니다. 문항마다 정답 여부를 보여 주고 마지막에 총점과 틀린 문제 복습을 제공합니다. 학습자는 같은 문제를 여러 번 다시 풀 수 있습니다(문항 순서는 무작위로 섞입니다). 내보낸 HTML은 오프라인에서도 동작해 사내망 교육에도 잘 맞습니다.

플래시카드——CSS 뒤집기 애니메이션을 쓴 학습 카드입니다. 앞면에 질문, 뒷면에 답이 있고 이동과 무작위 섞기를 지원합니다. 교육 외에 신입 사원 온보딩이나 제품 기능 빠른 훑어보기에도 유용합니다.

3D 뒤집기 효과는 순수 CSS(transform: rotateY)로 구현되어 JS 라이브러리가 필요 없습니다. 키보드 조작도 지원해 스페이스로 뒤집고 좌우 키로 이동합니다. 명시적으로 요청하면 Anki 호환 CSV 형식으로 내보낼 수도 있습니다.

오디오 요약——붙여넣은 내용을 음성 요약으로 만들어 줍니다. 먼저 글을 압축한 뒤 음성으로 바꾸는 흐름입니다. 출퇴근길이나 운동 중에 핵심만 들을 수 있습니다. NotebookLM의 오디오 요약과 비슷하지만 제미나이 대화 안에 바로 붙어 있어 제품을 오갈 필요가 없습니다.

오디오 요약은 기본 5~10분 분량이고 한국어, 영어, 중국어, 일본어 등 여러 언어의 내레이션 목소리를 지원합니다. 나온 MP3 파일은 로컬에 내려받거나 휴대폰으로 옮길 수 있습니다. NotebookLM과의 차이는 형식입니다. NotebookLM은 두 사람의 대담 팟캐스트 형식이고, Gemini Canvas는 1인 해설에 가깝습니다.

맞춤형 앱——가장 자유로운 방식으로, 만들고 싶은 앱을 설명하면 제미나이가 HTML/CSS/JS로 구성해 줍니다. Canvas의 본질이 여기서 드러납니다. 실체는 코드 생성 엔진에 실시간 미리보기를 붙인 것이고, 나머지 다섯 템플릿은 그것을 용도별로 제약한 형태입니다.

잘 맞는 것: 할 일 목록, 뽀모도로 타이머, 간단한 게임, 단위 변환기, 마크다운 미리보기. 한계도 분명합니다. 단일 파일 HTML이라 백엔드가 없고 저장도 되지 않습니다(localStorage를 쓰지 않으면 새로고침과 함께 상태가 사라집니다).

Canvas와 Claude Artifacts, ChatGPT Canvas는 무엇이 다른가요?

가장 큰 차이는 결과물의 성격입니다. Gemini Canvas는 ‘보여 줄 완성물’, Claude Artifacts는 ‘컴포넌트 검증’, ChatGPT Canvas는 ‘문서 공동 편집’에 무게가 실려 있습니다.

항목	Gemini Canvas	Claude Artifacts	ChatGPT Canvas
성격	템플릿 기반 제작	코드 생성 + 컴포넌트 샌드박스	문서/코드 협업 편집
기본 출력 형식	HTML + Tailwind + 순수 JS	React + Tailwind(샌드박스 렌더링)	마크다운 문서 / 코드
템플릿 수	명시적 6종 + 맞춤형	명시적 템플릿 없음	명시적 템플릿 없음(글쓰기/코드 중 선택)
상호작용성	높음(퀴즈/플래시카드/맞춤형 앱)	높음(React 컴포넌트)	낮음(문서 위주)
내보내기	단일 파일 HTML	코드 내보내기, React는 직접 빌드	마크다운/코드 복사
코드 실행	iframe 샌드박스, 서버 없음	iframe 샌드박스, 서버 없음	Python 실행기 내장(데이터 분석)
수정 방식	대화형 지시	대화형 지시	문단 단위 인라인 편집
잘 맞는 사용자	’눈에 보이는 결과물’이 필요한 비개발자	컴포넌트를 빠르게 검증하려는 개발자	문서를 깊게 편집하는 작가/개발자

선택 기준:

‘남에게 보여 줄 것’(웹페이지, 인포그래픽, 퀴즈)을 만들고 싶다면 → Gemini Canvas
‘컴포넌트 시제품’(React 버튼, 차트 라이브러리)을 만들고 싶다면 → Claude Artifacts
‘긴 글쓰기와 협업 주석’이 필요하다면 → ChatGPT Canvas
‘데이터 분석 보고서와 그래프’가 필요하다면 → ChatGPT Canvas(Python 실행 기능이 있어서)

용어 사전의 Canvas 문서와는 어떻게 다른가요?

이 글은 데스크톱 앱에서의 사용법에 집중합니다. Canvas라는 개념 전반, 등장 배경, 경쟁 제품 지형은 용어: Canvas를 참고하세요. 요약하면 Canvas는 2024~2025년 주요 AI 제품이 널리 채택한 방식으로, 대화의 출력물을 ‘글’에서 ‘조작하고 미리 보고 편집할 수 있는 결과물’로 넓히는 흐름입니다. 구현은 Artifacts / Canvas / Workbench 세 갈래로 나뉩니다.

생성된 코드는 어디서 실행되고 안전한가요?

생성된 코드는 iframe 샌드박스 안에서 렌더링되므로 호스트 앱이나 사용자의 데이터에는 접근할 수 없습니다.

샌드박스 격리: <iframe sandbox="allow-scripts">. JS는 돌아가지만 부모 페이지의 DOM에 접근할 수 없고, 부모 페이지의 window.parent도 호출할 수 없으며, localStorage도 읽지 못합니다(자기 샌드박스 내부 제외)
교차 출처 제한: Google CDN의 리소스(Tailwind, Google Fonts, Chart.js)만 불러올 수 있고, 외부 API 호출은 CORS에 막힙니다
네트워크: 기본적으로 네트워크가 없습니다. 만들어진 앱은 외부 서비스를 부를 수 없어 재현성이 보장됩니다
로컬 저장: 샌드박스 안의 독립된 localStorage라 브라우저를 다시 켜거나 세션을 바꾸면 사라집니다

그래서 Canvas는 전시, 시제품, 시연에 알맞고 ‘실제 운영 앱’에는 맞지 않습니다. 운영용으로 키우려면 코드를 로컬로 내려받아 백엔드를 붙이고 API를 연결한 뒤 Vercel이나 Cloudflare에 배포하세요.

만든 결과물은 어떤 형식으로 내보낼 수 있나요?

내보내기는 여섯 가지가 있고 용도에 맞춰 고르면 됩니다.

내보내기 방식	결과물	알맞은 상황
Download HTML	단일 파일 `.html`	메일 첨부, USB 배포, 오프라인 열람
Copy source	소스 코드를 클립보드로	VS Code, CodePen, JSBin에 붙여 계속 수정
Export as PNG	스냅숏 이미지	발표 자료에 삽입, SNS 공유, 메신저로 이미지 전송
Share link	읽기 전용 온라인 링크	슬랙 등에 공유. 열람에 Google 로그인 필요
Export to Drive	Google Drive에 저장	기기 간 접근, 팀 협업
Export MP3(오디오 요약 전용)	단일 파일 `.mp3`	휴대폰으로 전송, 팟캐스트 플랫폼 업로드

데스크톱 앱의 가장 큰 가치가 여기 있습니다. 내려받는 순간 그것은 로컬 파일이고, Obsidian이든 Notion이든 iCloud든 원하는 노트 작업 흐름에 넣을 수 있습니다. 대화 기록에 묶이지 않습니다.

더 잘 쓰는 요령이 있나요?

지시를 구체적으로 할수록 되돌아가는 일이 줄어듭니다. 특히 효과가 큰 다섯 가지입니다.

CSS 프레임워크 지정: 기본은 Tailwind지만 ‘Bootstrap 5로’, ‘Pico.css로’, ‘프레임워크 없이 순수 CSS로’라고 지정할 수 있습니다
일부만 고정하기: ‘헤더는 그대로 두고 아래쪽만 바꿔줘’라고 하면 지정한 부분만 다시 그리므로 반복이 빨라집니다
실제 데이터 주기: CSV를 대화에 붙여넣고 ‘이 데이터로 인포그래픽 만들어줘’라고 하는 편이 제미나이에게 숫자를 지어내게 하는 것보다 훨씬 믿을 만합니다
Deep Research와 연계: 먼저 Deep Research로 조사 보고서를 만들고 이어서 ‘이 보고서를 한 장짜리 인포그래픽으로 만들어줘’라고 하면 조사와 시각화가 한 번에 끝납니다
브라우저 새 탭에 붙이기: 내보낸 HTML을 newtab.html로 저장하고 Chrome 시작 페이지로 지정하면 나만의 시작 화면이 됩니다

잘 안 될 때는 어떻게 하나요?

원인은 대부분 모델 선택, 샌드박스 제약, 외부 리소스 로딩 실패 셋 중 하나입니다.

Canvas 버튼이 회색으로 비활성: 모델을 잘못 골랐습니다. Canvas에는 Gemini 2.5 Pro 또는 Gemini 3이 필요하고 Flash 계열에서는 쓸 수 없습니다.
생성된 페이지가 빈 화면: 대개 JS 문법 오류이거나 CDN 리소스 로딩 실패입니다. 브라우저 개발자 도구의 Console에서 빨간 줄을 확인하고 제미나이에게 ‘방금 코드 점검하고 고쳐줘’라고 요청하세요.
글꼴이 이상함: Google Fonts는 네트워크 환경에 따라 불안정합니다. 제미나이에게 ‘시스템 글꼴을 쓰고 Google Fonts는 불러오지 마’라고 하면 해결됩니다.
이미지가 안 보임: 샌드박스는 기본적으로 https:// 이미지만 불러오고 CORS를 허용하는 출처여야 합니다. Unsplash나 Placehold.it처럼 CORS를 지원하는 이미지 소스를 쓰세요.
퀴즈를 제출해도 반응 없음: 브라우저가 폼 제출을 막고 있습니다(샌드박스 정책). ‘폼 제출 대신 순수 JS 이벤트 처리로 바꿔줘’라고 요청하세요.
내려받은 HTML이 Chrome에선 정상인데 Safari에서 깨짐: CSS :has()나 ES2022 기능이 원인인 경우가 많습니다. ‘최신 CSS/JS 기능을 피하고 Safari 15 호환으로 만들어줘’라고 지정하세요.
페이지 로딩이 느림: 생성할 때 큰 라이브러리(Chart.js 전체 버전 등)가 들어갔습니다. ‘Chart.js를 필요한 부분만 남긴 ESM 버전으로’, 또는 ‘순수 SVG로 바꿔줘’라고 요청하세요.
공유 링크를 상대가 못 봄: 읽기 전용 링크는 Google 로그인이 필요합니다. 로그인하지 않을 상대에게는 HTML을 내려받아 직접 보내는 편이 확실합니다.

브라우저 대신 데스크톱에서 쓰면 뭐가 좋나요?

왼쪽에 대화, 오른쪽에 미리보기를 띄워 둔 채 계속 고칠 수 있다는 점이 가장 큽니다. 탭을 오갈 필요가 없습니다. iframe 샌드박스가 안전을 보장해 생성된 코드는 호스트 앱과 격리되고 사용자의 데이터나 시스템 자원에 접근하지 못합니다. 게다가 데스크톱 작업 흐름에 자연스럽게 섞입니다. HTML을 내려받아 배포하고, 소스를 프로젝트에 복사하고, 인포그래픽을 캡처해 발표에 쓰고, 플래시카드를 내보내 오프라인으로 공부합니다. 데스크톱의 파일 시스템과 앱 생태계가 Canvas의 산출물을 일회성 물건에서 다룰 수 있는 산출물로 바꿔 줍니다.

브라우저 버전과의 실제 차이는 세 가지입니다.

드래그 앤 드롭: 데스크톱 앱은 생성된 HTML을 Finder로 끌어다 바로 저장할 수 있지만, 브라우저는 우클릭 다운로드를 거쳐야 합니다
창 배치: 데스크톱 앱의 Canvas 패널은 두 번째 화면으로 따로 뺄 수 있지만, 브라우저는 같은 탭 안에서 분할하는 것이 전부입니다
오프라인 캐시: 데스크톱 앱은 최근 만든 Canvas를 로컬에 캐시해 인터넷이 끊겨도 기록을 볼 수 있습니다. 브라우저는 온라인이 전제입니다

Windows 사용자는 Canvas를 어떻게 쓰나요?

브라우저 버전 gemini.google.com을 쓰는 것이 기본입니다. Google은 Windows용 네이티브 제미나이 대화 클라이언트를 내놓지 않았고, Windows의 Google app for desktop(2026-04-14 공개)은 검색과 파일만 다루며 Canvas는 없습니다. Google이 만들지 않은 Gemini Windows app과 Gemini Windows app과 Google app for desktop 비교를 참고하세요.

Windows에서 Canvas를 쓰는 선택지:

브라우저 버전 gemini.google.com은 Canvas를 온전히 제공하며 Mac과 기능이 같습니다
GeminiDesktop for Windows는 브라우저 Canvas를 네이티브 Tauri 앱으로 감싸 Alt+Space로 불러오고 독립 Canvas 창도 지원합니다. 네이티브 Gemini Windows app과 Gemini Windows 설치 가이드도 함께 보세요

GeminiDesktop의 구현

GeminiDesktop은 Canvas를 핵심 기능으로 다룹니다. Tauri webview 기반 네이티브 사이드 패널과 레티나 렌더링, 지시할 때마다 미리보기를 갱신하며 맥락을 이어 가는 반복 편집, 그리고 로컬 HTML 파일로의 내보내기(옮겨 다닐 수 있고 오프라인에서도 열립니다).

차별점:

Canvas와 Claude Artifacts, ChatGPT Canvas를 함께 쓸 수 있습니다(같은 앱 안에서 모델 전환)
Canvas 기록을 로컬 SQLite에 보관해 과거 결과물을 언제든 검색할 수 있습니다
내보내기 폴더를 직접 지정할 수 있어(기본값 ~/Documents/GeminiDesktop/Canvas/) Obsidian 보관함과 바로 연결됩니다
내보낼 때 마크다운 메타데이터 파일(제목, 생성 시각, 모델, 원래 지시문)을 자동으로 만들어 나중에 관리하기 쉽습니다

자주 묻는 질문

Q1: Canvas로 만든 것을 그대로 실제 서비스에 쓸 수 있나요? 시제품과 시연 자료로는 쓸 수 있습니다. 실제 서비스에는 백엔드 API, 진짜 데이터 연결, 충분한 오류 처리, 브라우저 호환성 테스트, SEO와 접근성 최적화가 더 필요합니다. Canvas가 주는 것은 ‘보여 줄 만한 수준’의 출발점입니다.

Q2: Canvas에 참고 이미지를 올릴 수 있나요? 가능합니다. Canvas로 요청할 때 디자인 참고 이미지를 함께 올리면 제미나이가 색 조합, 배치, 서체 느낌 같은 시각적 분위기를 재현하려 합니다. 재현 정확도는 모델 버전에 따라 달라지며 Gemini 3이 확실히 더 정확합니다.

Q3: 무료 사용자도 Canvas를 쓸 수 있나요? 기본 Canvas 기능은 무료 사용자에게도 열려 있지만 모델 등급 제한을 받습니다(Flash 계열은 Canvas를 지원하지 않거나 기능이 제한됩니다). 6가지 템플릿을 모두 쓰려면 Gemini Advanced 구독이나 AI Studio 사용량이 필요합니다.

Q4: Canvas에서 내 데이터베이스에 연결할 수 있나요? 샌드박스 안에서는 안 됩니다. 로컬로 내보낸 뒤 개조하는 방식은 가능하지만 그것은 Canvas의 범위를 벗어납니다. 사실상 AI가 만든 코드를 내 시스템에 붙이는 일반적인 웹 개발입니다.

Q5: Canvas와 ‘Deep Research 보고서’는 어떻게 다른가요? Deep Research의 결과물은 인용이 달린 긴 문서(마크다운 또는 PDF)이고, Canvas의 결과물은 상호작용형 웹페이지·인포그래픽·퀴즈입니다. 둘은 이어 붙일 수 있습니다. Deep Research가 내용을 만들고 Canvas가 보여 주는 방식을 만듭니다.

Q6: Canvas로 만든 내용이 Google 모델 학습에 쓰이나요? 유료 구독자는 기본적으로 학습에 쓰이지 않고, 무료 사용자는 쓰일 수 있습니다. 자세한 내용은 Google 개인정보 처리방침을 기준으로 합니다.

함께 읽기

Canvas는 데스크톱 AI의 평가 기준을 바꿨습니다. 답변의 품질을 겨루던 단계에서 결과물의 품질을 겨루는 단계로 넘어간 것입니다. 데스크톱 사용자가 원하는 것은 글로 된 답장이 아니라 손에 잡히는 산출물입니다. GeminiDesktop 사용해 보기.

제미나이 데스크톱 Canvas 완전 정리: 대화를 넘어서는 6가지 제작 템플릿