이번 글은 Gemini의 Canvas를 활용하여 디자인 시안을 만드는 방법에 대해 소개한다.
⁉️Gemini Canvas 복습
![[AI-Powered PM] Gemini Canvas로 문서/시각화/코딩까지 - ProAgent AI](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffavicon%2F2025-04-30T11%3A30%3A35.118Z-10f31daf-f9f2-4625-b56d-338e001cda5a&w=1920&q=75)
![[AI-Powered PM] Gemini Canvas로 문서/시각화/코딩까지 - ProAgent AI](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-05-03T11%3A40%3A30.755Z-51afcd78-645b-4af5-9787-dd1c39065b2d&w=1920&q=75)
위 콘텐츠에서 Canvas에 대한 기본적인 설명과 Usecase는 아래 콘텐츠에서 충분히 설명하였다. Canvas가 문서작성/시각화/코딩까지 가능한 툴임을 살펴보았다. 그런데 무엇이 더 남았을까?
실제 업무를 하다보니 Canvas로 디자인 산출물의 Variation을 빠르게 탐색해보는 도구로서도 유용함을 발견했다. 해당 기능을 소개해보고자 한다.
📕Canvas로 만드는 시안의 UseCase
AI 프로토타이핑 툴이 많아졌지만, Gemini Canvas 만으로도 충분히 간단한 디자인 산출물을 뽑거나 시안 Variation을 할 수 있다.
아래와 같은 Use Case가 가능하다.
1. 다른 웹사이트를 벤치마크하여 간단히 시안을 그린다.
2. 아예 새로운 시안을 그려달라고 해본다.
3. 무엇보다 가장 유용한건, 현재 내가 고민하고 있는 시안에 대해 Variation을 요청한다.
- PM이 디자이너에게 제안할 수도 있고, 디자이너가 제안한 Variation에 Challenge를 할 수도 있다.
- 혼자 일하는 PM이나 혼자 일하는 디자이너에게는.. AI 동료가 되어준다.
그 중에서도 Gemini Canvas에게 “UX개선사항에 대한 시안 Variation을 요청”해보는 Case를 실행해보았다.
💁♂️실제사례
Gemini에게 “Gemini 화면”의 경험 개선을 요청해보았다. ”추천 프롬프트의 이용율을 높이기 위한 UX 개선”이 해결할 과업이다.
1. 입력
Gemini 채팅창을 보면 입력창 위에 4가지 추천 프롬프트가 나온다(아래 네모박스 영역)
위 이미지를 첨부하여 아래 프롬프트를 적용했다.
- 2.5 Pro, Canvas를 사용했다.
2. 결과
처음에 나온 시안이 입력창 영역이 안보이게 너무 짤려서, 아래와 같이 2차로 요청했다.
4개 시안을 직접 탭을 눌러 비교할 수 있게 인터랙티브한 HTML 결과물이 나왔다.
- 실제 각 탭을 눌러 시안을 비교해볼 수 있다.
- 시안 뿐만아니라 무엇을 변경했는지, 장/단점은 무엇인지 코멘트까지 붙여준다.
코드 메뉴를 누르면 아래와 같이 소스코드를 모두 볼 수 있다. HTML을 안다면, 직접 수정도 가능.
- 물론! 프롬프트로 수정해도 시안을 계속 디벨롭 할 수 있다.
🚚전달은 어떻게?!
URL로 바로 공유할 수 있다. URL 링크만 누르면 아래와 같이 브라우저에서 동료가 확인할 수 있다.
실제 위 Case의 ULR 링크
전체 HTML 파일은 아래 참고
롤백이 안되고, 섬세한 품질은 아니라는 것이 단점이다.
그럼에도 간단한 시각화, 프로토타이핑, Variation에는 충분한 수준이라고 생각한다!
📘마치며
시각화나 프로토타입의 본질은 “커뮤니케이션”이다. 협업자끼리 생각하는 것을 가능하면 빠르고 & 정확하게 표현하여 커뮤니케이션을 효과적으로 하는 것이다.
이러한 본질에 충실하면서도, 가장 비용효과적인 툴 중의 하나가 Canvas라고 생각한다.
Canvas 하나만 잘써도 더할 나위가 없다!
제미나이 시리즈 더보기
Share article
세미나/워크샵/컨설팅 문의사항은 이메일을 남겨주세요.
