AI와 함께 성장하는 PM들을 위한 AI-Powered Product Manager 시리즈입니다. 이번 글은 Gemini의 Canvas 기능에 대한 간략한 소개와 실제 사용 사례를 공유합니다.
⁉️Canvas는 대체 무엇인가
Canvas는 한마디로 빠른 작업을 위한 인터랙티브한 작업 도구이다.
보고서, 콘텐츠 작성, 프로토타입, HTML 코드 등의 결과물을 확인하면서 빠르게 수정하고 완성할 수 있는 도구이다.
아래는 Gemini Canvas에 대한 홈페이지 설명이다.
작성하고, 코딩하고, 만들고 - 이 모든 것을 하나의 상호작용 공간에서.
Gemini와 협력하여 보고서, 블로그 게시물, 학습 가이드, 시각적 타임라인, 인터랙티브 프로토타입, 코드 스니펫 및 스크립트 등을 만드세요. 이제 백지 상태에서 시작하여 동적 미리보기를 거쳐 단 몇 분 만에 공유할 만한 결과물을 만들 수 있습니다.
캔버스는 문서 작성이나 코딩 등 빠른 반복 작업을 위한 상호작용 공간입니다. 편집 내용과 Gemini의 제안을 실시간으로 확인하며 프로젝트를 훨씬 효율적으로 진행할 수 있습니다.
문서 공동 작업
- 초안을 생성한 다음, 톤, 길이 또는 서식에 대한 빠른 편집 도구로 다듬으세요. 특정 섹션이나 전체 문서에 대한 피드백을 Gemini에게 요청하고 변경 사항이 즉시 나타나는 것을 확인하세요. 보고서부터 학습 가이드, 블로그 게시물 등에 이르기까지 Canvas에서 글쓰기 수준을 높여보세요.
코드 생성 및 반복 작업
- 아이디어를 작업 가능한 프로토타입으로 더 빠르게 변환하세요. Gemini의 성능을 활용하여 익숙한 코드 편집기 내에서 코드를 직접 생성하고, 다듬고, 미리보기할 수 있습니다. 원하는 기능을 설명하기만 하면 Canvas가 다양한 프로그래밍 언어에 대한 관련 코드 스니펫을 생성합니다. 작업 중인 미리보기를 공유하거나 Python 코드를 Google Colab으로 내보낼 수 있습니다.
📕Canvas 사용하는 법
Gemini에서 프롬프트 입력창에 보면 [Canvas]나 [Deep Research] 버튼이 보일거나
- Canvas 버튼을 누르면 Canvas 기능이 활성화되고
- 결과물이 채팅 답변이 아닌 Canvas 화면으로 변환되면 생성된다.
Canvas 옵션설정시
💁♂️Canvas 활용 Usecase
“Product Manager와 Product Owner의 차이를 설명하는 블로그 콘텐츠”를 사례로 Canvas를 활용하는 몇가지 Usecase를 살펴보자. 참고로 모델은 Gemini 2.5 Flash를 사용했다.
1. 콘텐츠 수정하기
수정 제안 확인 및 적용하기
어조 변경하기
텍스트 직접 수정
- 간단한 에디터를 활용해 함께 텍스트를 직접 수정할 수 있다.
2. Google Docs로 내보내기
3. 인터랙티브 콘텐츠로 만들어보기
“인터랙티브한 콘텐츠로 변경해줘” 프롬프트를 입력하면 아래와 같이 웹페이지로 만들어준다.
실제 CSS 코드를 확인할 수도 있다.
수정 하고 싶은 프롬프트를 입력하면, 실제 웹페이지 수정을 실행한다.
4. HTML 소스 활용하기
소스를 복사해서 원하는 곳에 붙여넣고 활용한다.
HTML을 파일로 저장해둘 수도 있다.
위 예시에서 저장했던 실제 HTML 파일
브라우저에서 열면 아래와 같이 생성된다. 간단한 발표로도 손색없다.
마치며
Gemini Canvas는 프롬프트 입력창의 작은 버튼이라 그런지 잘 모르는 분들이 있다. 알고 실행을 해봤어도, 막상 어떤 Usecase로 활용할지 몰라서 못쓰는 경우도 많을 것이다.(Notebook LM처럼 시각적으로 활용법이 잘 드러나지 않는다)
하지만 알고보면 다재다능한 기능이 Canvas이다. 코드작성은 쓸일이 없을것 같지만, “인터랙티브”한 콘텐츠나 도식화를 요청하는 것만으로도 비개발자인 PM에게도 활용도를 넓혀준다.
앞으로 Canvas에 어떤 기능이 더 고도화 될지 기대하며…!
Share article
세미나/워크샵/컨설팅 문의사항은 이메일을 남겨주세요.
