종이에 그린 앱 화면을 사진으로 찍어 AI에게 보여주면 간단한 웹앱의 초안을 만들 수 있습니다. Google은 2026년 11월 5일 공식 블로그에서 Gemini의 Canvas를 이용해 손그림을 실제로 조작 가능한 작은 도구로 바꾸는 방법을 소개했습니다. 필요한 것은 간단한 스케치 이미지, Gemini의 Canvas 기능, 그리고 원하는 동작에 대한 구체적인 설명입니다.
이 과정이 완성된 상용 앱을 자동으로 배포하거나, 프로그래밍 지식 없이 모든 오류를 해결해 준다는 의미는 아닙니다. 이번 글은 스케치 업로드 → Canvas 선택 → 코드 생성 → 미리보기 → 수정 요청의 흐름을 설명하고, 실제 서비스에 사용하기 전에 확인해야 할 점을 함께 정리합니다.
Gemini Canvas는 무엇을 해주는 기능일까?
Canvas는 Gemini와 함께 문서나 코드를 만들어 수정하는 작업 공간입니다. 손그림으로 만든 앱 화면의 요소와 배치를 해석해 코드 초안을 작성하도록 요청할 수 있고, 미리보기에서 결과를 확인하며 색상·글꼴·버튼 동작·화면 구성을 다시 바꾸도록 지시할 수 있습니다. 한 번의 프롬프트로 최종 결과를 확정하는 것보다, 작은 단위로 수정과 테스트를 반복하는 데 적합합니다.
예를 들어 종이에 날짜, 체크박스, 달성률을 배치한 습관 관리 화면을 그렸다면 Gemini가 이를 참고해 인터랙티브한 웹 도구의 기본 UI를 구성하도록 요청할 수 있습니다. 그리기만 하면 어떤 종류의 앱이든 반드시 작동한다는 보장은 없으므로 요구사항을 글로 명확히 써 주는 것이 중요합니다.
1단계: 종이에 앱 화면을 간단히 그리기
처음에는 화면을 복잡하게 설계하지 않는 편이 좋습니다. 예를 들어 ‘오늘의 습관 체크’ 앱이라면 상단에 제목, 중간에 습관 항목 세 개와 체크박스, 하단에 완료율을 보여주는 작은 상자를 그려봅니다. 버튼 위치, 사용자가 입력할 항목, 클릭했을 때 바뀌어야 할 내용을 메모해 두면 생성된 결과를 평가하기 쉽습니다.
사진을 찍을 때는 글자가 읽히도록 밝게 촬영하고, 주변의 개인 정보가 함께 찍히지 않도록 주의하세요. 계정 비밀번호, 실명 명단, 결제정보, 고객 연락처가 적힌 메모를 스케치와 함께 업로드할 필요는 없습니다.
2단계: Gemini에 스케치 올리고 Canvas 선택
Gemini 앱 또는 웹사이트에서 스케치 이미지를 업로드하고 Canvas 도구를 선택합니다. Google은 공식 예시에서 사진을 올린 뒤 “Can you code this app?”과 같은 요청을 사용하는 흐름을 소개했습니다. 한국어로는 다음과 같이 더 구체적으로 요청할 수 있습니다.
이 스케치대로 습관 체크 웹앱을 만들어 줘. 각 항목을 체크하면 완료율이 바로 바뀌게 하고, 모바일 화면에서도 버튼이 잘 눌리도록 해줘. 외부 로그인이나 서버 저장은 필요 없어. Canvas 미리보기에서 테스트할 수 있게 만들어 줘.
같은 화면을 그려도 요구사항에 따라 만들어지는 결과가 달라집니다. 처음부터 서버 데이터베이스, 로그인, 결제 기능을 함께 요청하기보다는 프런트엔드 화면과 단순한 상태 변경부터 확인하는 것이 효율적입니다.
3단계: 미리보기에서 버튼과 화면을 테스트
코드 초안이 만들어지면 Canvas의 미리보기 화면을 열어 그린 화면의 배치가 비슷한지 확인합니다. 체크박스를 눌렀을 때 완료율이 바뀌는지, 항목을 추가했을 때 목록이 정상 반영되는지, 글씨가 화면 밖으로 튀어나오지 않는지 확인합니다. 겉모양이 비슷하다고 모든 기능이 제대로 구현됐다고 볼 수는 없습니다.
스케치에서 빠진 기능이나 모호한 버튼이 있다면 “완료율 계산이 틀릴 때 0~100% 범위로 수정해 줘”, “좁은 화면에서는 버튼을 한 줄로 배치해 줘”처럼 한 번에 하나의 수정 작업을 요청하는 편이 좋습니다. 실제로 코드를 실행해 보기 전에는 작동을 확정하지 않는 것이 안전합니다.
4단계: 디자인과 기능을 후속 요청으로 다듬기
Google은 색상, 글꼴, 기능 등을 대화로 수정할 수 있다고 소개했습니다. 간단한 앱이라면 ‘체크 완료 시 색 변경’, ‘오늘 날짜를 상단에 표시’, ‘입력칸에 공백만 넣으면 저장하지 않기’ 등의 요청을 순서대로 추가할 수 있습니다. 변경할 때마다 기존에 동작하던 기능이 고장 나지 않았는지 다시 테스트해야 합니다.
미리보기는 개발 중인 결과를 평가하는 도구입니다. 인터넷에서 누구나 사용할 수 있는 정식 서비스를 운영하려면 코드 검토, 호스팅, 접근성, 개인정보 보호, 오류 처리, 기기별 테스트가 추가로 필요할 수 있습니다. 개인적으로 쓰는 간단한 도구와 실제 고객이 사용하는 서비스는 요구되는 품질이 다릅니다.
Canvas가 보이지 않거나 스케치를 제대로 해석하지 못한다면?
먼저 로그인한 계정에서 Canvas 기능이 제공되는지 확인하고, 사용 중인 앱과 웹 인터페이스를 최신 상태로 갱신할 수 있는지 살펴봅니다. 계정 종류나 지역에 따라 도구의 표시 위치와 제공 범위가 다를 수 있습니다. 스케치에 글씨가 작거나 버튼 사이 관계가 불명확하면 이미지를 다시 촬영하거나 텍스트 설명을 추가하는 것이 도움이 됩니다.
앱 결과가 원하는 대로 작동하지 않으면 “체크박스를 눌러도 상태가 바뀌지 않아. 어떤 코드가 문제인지 확인하고 고쳐 줘”처럼 실제 증상을 알려주세요. 특정 기능이 항상 성공한다고 가정하기보다 확인 가능한 테스트 결과를 제공할수록 수정이 정확해질 가능성이 높습니다.
어떤 사람에게 유용할까?
아이디어를 빠르게 확인하고 싶은 학생, 동아리, 소상공인, 개인 프로젝트 개발자에게 특히 도움이 될 수 있습니다. 할 일 목록, 공부 타이머, 간단한 설문 화면, 작은 업무 도구 등을 손그림에서 시작해 프로토타입으로 만드는 용도입니다. 다만 AI가 작성한 코드를 검증하지 않은 상태로 결제·개인정보 처리 앱에 바로 적용해서는 안 됩니다.
Gemini의 모델 선택과 사용량에 관심이 있다면 AI 도구 활용 읽기 안내와 Gemini 사용량 한도 정리도 참고할 수 있습니다. Canvas의 현재 세부 이용 조건은 일반 채팅의 모델별 사용량 안내와 다를 수 있으므로 실제 설정 화면을 기준으로 확인하세요.
Google 공식 가이드와 확인일
이 글의 근거는 Google 공식 블로그의 ‘손그림을 앱으로 변환’ 사용 가이드(2026.11.05)입니다. 발표된 내용은 기존 Canvas를 활용하는 방법이지 별도의 새 AI 모델 출시가 아닙니다. 본문은 2026년 11월 6일 기준으로 작성했으며 기능과 화면은 이후 달라질 수 있습니다.