Gemini Canvas 바이브 코딩: 코드 없이 앱·웹사이트 만드는 5가지 프롬프트 요령과 공유·배포법

핵심 메시지

• Gemini의 Canvas 기능을 쓰면 코드를 몰라도 평이한 문장만으로 앱과 웹사이트를 만들 수 있다.
• "바이브 코딩"은 원하는 것을 일상 언어로 설명하면 AI가 실제 코드를 대신 작성하는 방식이다.
• 좋은 결과의 핵심은 기능 나열이 아니라 느낌·대상·목적·미감을 먼저 설명하는 것이다.
• 작게 시작해 한 번에 한 기능씩 추가하고, 문제가 생기면 이전 버전으로 되돌리는 것이 안전하다.
• 완성한 앱은 링크 공유로 설치 없이 쓸 수 있고, 코드를 내려받아 자체 도메인에 배포할 수도 있다.

쉽게 이해하기

한 번도 코딩을 해 본 적 없다는 진행자가 구글 제미나이의 Canvas 기능으로 앱과 웹사이트를 만드는 과정을 시연한다. gemini.google.com에서 채팅 입력창의 플러스 아이콘을 눌러 Canvas를 선택하면, 제미나이와 함께 웹사이트·앱·문서를 만들 수 있는 협업 환경이 열린다. 모델은 Flash를 권장한다.

핵심 개념은 "바이브 코딩"이다. 무엇을 만들고 싶은지 평이한 영어(또는 일상 언어)로 설명하면 AI가 실제 프로그래밍을 처리한다. 다음 인스타그램을 만들 수는 없어도, 개인용 도구나 간단한 웹사이트, 작은 앱은 경험이 전혀 없어도 만들 수 있다는 것이 그의 주장이다.

그는 좋은 결과를 얻는 다섯 가지 요령을 제시한다. ① 느낌으로 시작하기: 기능보다 대상·목적·미감을 먼저 묘사한다. ② 작게 시작하기: 모든 기능을 한꺼번에 요구하지 않는다. ③ 참조 자료 적극 활용: 마음에 드는 화면 스크린샷이나 스케치를 올린다. ④ 구체적으로 쓰기: "더 예쁘게" 대신 색상 값이나 버튼 모양을 명시한다. ⑤ 한 번에 한 기능씩 추가하기.

작게 시작하고 한 기능씩 더하는 이유는 안정성 때문이다. 한꺼번에 다 넣으면 무언가 깨졌을 때 그 부분만 고치기 어렵지만, 성공한 버전 위에 하나씩 쌓으면 새 기능이 문제를 일으켜도 이전 버전으로 되돌릴 수 있다. 미리보기 모드에서 앱을 실제로 써 보고, "select and ask"로 특정 요소를 골라 수정할 수도 있다. 제미나이는 실제로 끝나기 전에 "완료"라고 표시하는 경우가 많으니 유의해야 한다.

시연에서는 할 일 앱을 시작으로 카테고리 탭과 통계 그래프를 덧붙였고, 피자가게 웹사이트, macOS 느낌의 운영체제, 여러 게임이 든 아케이드, 노트 앱, 여행지 이미지를 생성해 보여 주는 앱 등을 예로 든다. 만든 앱 안에서 이미지 생성 같은 AI 기능을 그대로 쓸 수 있다는 점도 특징이다. 완성 후에는 공유 링크로 설치 없이 배포하거나, 코드를 내려받아 Vercel 같은 서비스로 자체 도메인에 올릴 수 있다.

주요 인사이트

• 프롬프트를 "느낌"으로 시작하라는 조언은, 기능 명세만으로는 완성물의 사용감이 어긋나기 쉽다는 점을 짚는다.
• 작게 시작해 버전을 쌓는 방식은 되돌리기(rollback)를 전제로 한 안전한 반복 개발 습관을 비전문가에게도 적용한 것이다.
• 스크린샷·색상 값 같은 구체적 참조를 주면, 이미지 이해가 강한 모델일수록 의도에 가까운 결과를 낸다.
• 만든 앱 내부에서 이미지 생성 등 AI 기능을 호출할 수 있어, 결과물이 정적인 페이지에 그치지 않는다.

자주 묻는 질문

관련 AI 소식