Gemini Canvas로 신청 페이지 시제품을 만들 때 검토할 오류와 공유 조건

Canvas로 만들 수 있는 결과물을 정리하고, 교육 신청 페이지 요청 예시로 필수값·중복 등록·좁은 화면 오류를 검토하는 기준과 공개 링크의 데이터 조건을 설명합니다.

LinkedIn 공유Threads 공유

겹쳐 놓인 작업 화면 위로 코드 괄호와 미리보기 화면이 둥근 화살표로 이어지는 선화 표지

Canvas로 만들 수 있는 것

Google은 2025년 3월 18일 Keyword 블로그에서 Canvas를 Gemini 안의 대화형 작업 공간으로 소개했습니다. 대화 옆에서 문서나 코드를 쓰고 고치며, HTML·React 코드로 만든 웹 앱 시제품을 미리보기로 확인할 수 있다고 설명했습니다. 발표문은 웹 앱, Python 스크립트, 게임, 시뮬레이션을 시제품 예로 들었고, 이메일 구독 양식을 만든 뒤 입력 칸이나 버튼을 바꿔 달라고 요청하면 바뀐 미리보기를 바로 볼 수 있다고 적었습니다.

2026년 10월 3일 확인한 Gemini 앱 도움말은 문서, 앱, 슬라이드, 코드를 Canvas에서 만들고 고칠 수 있다고 안내합니다. 만든 문서는 Audio Overview, 퀴즈, 인포그래픽, 웹 페이지 같은 다른 형식으로 바꿀 수 있고, 문서는 Google 문서로, 슬라이드는 Google Slides나 PDF로, Python 코드는 Colab으로 내보낼 수 있습니다. 앱에는 텍스트·이미지 생성 같은 Gemini 기능을 넣을 수도 있습니다.

업무에서 먼저 써 볼 만한 것은 눌러 봐야 판단할 수 있는 결과물입니다. 신청 양식, 점검표, 간단한 계산기는 문장으로 설명하기보다 시제품을 보여 주는 편이 합의가 빠릅니다. 반대로 시제품이 그럴듯하게 동작하면 빠진 조건을 놓치기 쉽습니다. 그래서 요청 문장에 검토 기준을 미리 넣어 두는 것이 좋습니다.

예시: 사내 교육 신청 페이지 요청

사내 AI 교육 신청 페이지를 시제품으로 만든다고 가정한 예시 요청입니다.

“사내 AI 교육 신청 페이지를 HTML 파일 하나로 만들어 줘. 입력 칸은 이름, 사번, 부서, 희망 일정(10월 14일 오전, 10월 14일 오후, 10월 21일 오전 중 하나), 사전 질문(선택 입력, 300자 이내)이야. 이름·사번·부서·희망 일정은 필수로 하고, 비어 있으면 그 칸 아래에 안내 문구를 보여 줘. 같은 사번으로 다시 제출하면 새로 추가하지 말고 이미 신청했다고 알려 줘. 제출한 내용은 화면 아래 표에 한 줄씩 추가하고, 일정별 신청 인원을 표 위에 보여 줘. 외부 서버로 데이터를 보내지 말고, 새로고침하면 표가 비어도 괜찮아. 휴대폰 화면 폭에서는 입력 칸이 한 줄에 하나씩 보이게 해 줘.”

요청에 적은 조건은 그대로 검토 목록이 됩니다. 필수 입력 4개, 일정 선택지 3개, 사번 중복 처리, 일정별 인원, 외부 전송 금지, 좁은 화면 배치를 적어 두었으므로 결과를 받았을 때 하나씩 맞는지 확인하면 됩니다. “깔끔한 신청 페이지”만 요청하면 무엇을 확인할지도 정해지지 않습니다.

미리보기에서 확인할 오류

시제품이 화면에 뜨면 정상 입력보다 잘못된 입력부터 넣어 봅니다. 모두 빈칸으로 제출하기, 사번만 비우기, 같은 사번으로 두 번 제출하기, 사전 질문에 300자를 넘게 쓰기, 이름에 공백만 넣기를 차례로 시험합니다. 조건이 여러 개인 요청은 그중 일부가 빠질 수 있으므로, 조건마다 따로 확인해야 빠진 것을 찾을 수 있습니다.

휴대폰 폭에서 입력 칸과 버튼이 화면 밖으로 밀리지 않는지도 봅니다. 일정별 신청 인원이 제출할 때마다 바뀌는지, 중복으로 막힌 제출이 인원에 더해지지 않는지도 확인합니다. 문제가 보이면 증상과 기대한 동작을 한 문장씩 적어 다시 요청합니다. 예를 들어 “같은 사번으로 제출하면 표에 두 줄이 생깁니다. 두 번째 제출은 추가하지 말고 ‘이미 신청한 사번입니다’라고 보여 주세요”처럼 씁니다.

요청, 코드, 실행 결과, 변경 내역 영역을 나눠 그리고 필수값, 중복 등록, 좁은 화면, 일정별 인원, 외부 전송, 한 번에 한 가지 변경 같은 검토 항목을 번호로 표시한 도식
앱을 검토할 영역 예시(작성자 도식, 실제 화면이 아닙니다). 코드·실행 결과·변경 내역에서 각각 확인할 항목을 표시했습니다. 이미지를 열어 확대할 수 있습니다. 화면이 좁으면 도식을 가로로 스크롤해 글자를 확인하세요.
작성자 예시. 요청 문장의 조건을 검토 항목으로 옮긴 표입니다.
검토할 오류확인 방법다시 요청할 문장 예시
필수값 누락빈칸 제출, 공백만 입력공백만 입력한 칸도 빈칸으로 처리해 주세요
중복 등록같은 사번으로 두 번 제출두 번째 제출은 표와 인원에 더하지 마세요
글자 수 제한사전 질문에 300자 초과 입력300자를 넘으면 남은 글자 수를 보여 주고 제출을 막아 주세요
집계 오류일정을 바꿔 여러 번 제출일정별 인원이 표의 행 수와 맞게 계산되게 해 주세요
좁은 화면 배치휴대폰 폭 화면에서 보기폭이 좁으면 버튼을 입력 칸 아래 전체 폭으로 배치해 주세요
외부 전송코드에서 외부 주소 호출 여부 확인입력값을 어떤 서버로도 보내지 않게 해 주세요

Google 출시 영상에 나온 코드와 미리보기 화면

아래 이미지는 Google이 2025년 3월 18일 발표문에 넣은 Canvas 코딩 시연 영상의 17초 장면입니다. 같은 결과물을 코드와 실행 화면으로 번갈아 보며 고치는 흐름을 보여 줍니다. 버튼 이름은 캡션에 적었습니다.

영상 아래쪽에는 “Sequences shortened and screen images simulated. Results for illustrative purposes and may vary.”라는 문구가 있습니다. 시연 과정을 줄이고 화면을 재현했으며, 실제 결과는 달라질 수 있다는 안내입니다. 1년 반 전 발표 영상이므로 지금 화면의 모양과 배치와는 다를 수 있습니다.

어두운 코드 화면 위쪽에 Code와 Preview 전환 버튼이 있고 아래에 시연 화면이 재현됐다는 영문 안내가 적힌 Google 시연 영상 장면
Google Keyword 2025년 3월 18일 발표문의 Canvas 코딩 시연 영상 17초 장면 캡처(원본 그대로). 위쪽에 Code·Preview 전환 버튼이 보이며, 영상 하단 문구대로 축약·재현된 화면입니다. 출처 Google Keyword

변경은 한 번에 한 가지씩, 기록은 대화에

도움말에 따르면 Canvas의 변경 내용은 자동 저장되고, 문서는 저장된 이전 버전을 다시 볼 수 있으며, 앱은 최근 바뀐 코드를 확인할 수 있습니다. 저장이 자동으로 되더라도 어떤 요청 뒤에 무엇이 바뀌었는지는 따로 남겨야 나중에 찾을 수 있습니다.

요청 하나에 변경 하나만 담으면 기록이 쉬워집니다. 중복 등록 수정과 색상 변경을 한 요청에 섞으면, 집계가 틀어졌을 때 어느 변경 때문인지 가리기 어렵습니다. 수정을 마칠 때마다 대화에 “1차: 필수값 처리, 2차: 사번 중복 차단, 3차: 좁은 화면 배치”처럼 한 줄씩 적어 두면, 팀에 넘길 때 이 목록을 변경 기록으로 함께 보낼 수 있습니다. 이전 결과가 더 나았을 때도 몇 번째 수정으로 돌아갈지 바로 정할 수 있습니다.

공개 링크를 만들면 앱 데이터도 함께 열립니다

도움말은 Canvas 결과물을 g.co/gemini/share 형식의 공개 링크로 공유할 수 있다고 안내합니다. 앱을 공개 링크로 공유하면 그 링크를 가진 사람은 누구나 앱과 연결된 데이터를 보고 수정할 수 있다고 적혀 있습니다. 공유 전 확인하는 앱 정보에는 사용자 간 데이터 공유, Gemini 기반 기능 사용, 세션과 기기를 넘는 데이터 저장 여부가 표시됩니다. 공유받은 사람은 사본을 만들어 이어서 고칠 수 있고, 공유 링크는 gemini.google.com에서 열립니다.

예시 요청에 외부 전송을 막고 새로고침하면 비어도 된다는 조건을 넣은 이유가 여기에 있습니다. 이름과 사번을 받는 앱이 데이터를 저장하고 사용자끼리 공유하는 상태로 공개되면, 링크를 받은 사람이 다른 사람의 입력을 보고 고칠 수 있는 구조가 됩니다. 시제품은 가상의 이름과 사번으로 시험하고, 실제 신청은 조직이 이미 쓰는 신청 양식으로 받는 편이 안전합니다. 공유하기 전에는 앱 정보의 데이터 공유와 저장 항목이 의도와 맞는지 확인합니다.

이번 주에는 업무 화면 1개를 골라 필수 입력, 중복 처리, 좁은 화면 배치, 데이터를 저장하지 않는다는 조건을 넣은 요청 문장을 써 보십시오. 결과를 받으면 위 표의 오류부터 하나씩 시험하고, 수정 내역을 대화에 한 줄씩 남긴 뒤 공유 여부를 정합니다.

확인한 공식 출처

  1. New ways to collaborate and get creative with Gemini (Google Keyword, 2025-03-18)
  2. Create docs, apps & more with Canvas (Gemini 앱 도움말, 2026-10-03 확인)