[비개발자 입문용 실습] Gemini Canvas로 바이브 코딩 시작하기

'바이브 코딩'의 폭발적 붐이 살짝 지나간 느낌이 들긴 하지만, 저는 여전히 바이브 코딩이 자신만의 작은 프로그램을 쉽게, 직접 만들 수 있게 해주는 도구로서 아주 유용하게 쓰인다고 생각합니다. 하지만 비개발자 분들께는 여전히 막연한 두려움이 있죠. 그래서 저는 비개발자 분들을 대상으로 바이브 코딩을 교육할 때, '나도 할 수 있네?'라는 효능감을 느낄 수 있도록 Gemini Canvas로 이상형 월드컵을 만드는 걸 첫 실습으로 하곤 합니다.

Claude.ai, ChatGPT 등 다른 LLM 챗봇에서도 코딩이 가능하지만 제가 Gemini를 사용하는 이유는:

• 무료 플랜에서도 어느정도 사용할 수 있고
• 회사용 구글 계정에서는 대개 Google Workspace를 통해 유료 플랜에 가깝게 사용 가능하며
• 무엇보다 Gemini API를 무료로 써볼 수 있기 때문입니다. (자세한 내용은 후술)

바이브 코딩 교육자 분들과 입문자 분들을 위해 제가 사용하는 실습 얼개를 공유드립니다.

1) 주제 선정하기

Gemini에 가서 모델을 2.5 Pro 로 설정하고 이런 식으로 입력합니다. (Gemini의 새 모델이 나온다면 그걸로 하시면 더 좋겠네요. 아무튼 Flash만 아니면 됩니다) 저는 음식으로 했지만 당연히 원하시는 대로 vs 대결을 펼치셔도 됩니다.

최근 일주일의 서울 날씨를 바탕으로, 요즘 먹을만한 음식 8개를 창의적으로 제안해줘.

2) 구현시키기

다음, Canvas 모드를 켜고 이런 식으로 입력합니다.

네가 제안한 음식 8개에 대해 이상형 월드컵을 만들어줘. 음식 이름이 크게 나오고, 아래에는 추천 이유를 간단하게 적어줘. 음식 이미지는 안 나와도 돼. 빠른 선택을 종용하는 박진감 요소도 추가해줘.

잠깐 기다리면 프로그램 하나가 뚝딱 만들어집니다. '바이브 코딩으로 웹앱(더 정확히는 하나의 HTML 페이지) 만들기'가 벌써 성공했네요. 이 Canvas 모드에서는 '미리보기'로 생성된 웹앱을 즉시 실행해볼 수 있습니다. 그리고 '공유'를 통해 다른 사람도 이 웹앱을 써보도록 링크를 전달할 수 있습니다.

이런 간단한 명령만으로 웹앱 하나가 나오는 건 Gemini가 '이상형 월드컵'이라는 개념을 잘 알고 있기 때문에 가능합니다. 원래는 프로그램이 어떻게 동작해야 하는지, 어떤 목적을 달성하기 위한 프로그램인지 등을 설명해야 하죠.

어쨌든 이와 같이 '상태 저장'이 필요치 않고, 아주 간단한 규칙/알고리즘만으로 이루어진 프로그램은 Gemini Canvas만으로도 손쉽게 만들 수 있다는 걸 비개발자 분들께 알려드리기에는 충분합니다.

3) Gemini 기능 추가하기

Canvas 미리보기의 우하단을 보시면 별 모양 아이콘이 보이고, 마우스를 올려보면 'Gemini 기능 추가'라고 뜨는 게 보입니다.

이걸 클릭하면 자동으로 현재의 코드의 어디에 Gemini API를 연결할지 분석해서 기능을 추가해줍니다. 아래 예시를 보면 이해가 빠르실텐데, 일단 제가 누르니 '메뉴 추천' 기능을 만들어줬습니다.

예시대로 '쌀쌀하고 비 오는 날'을 입력하니 추천 메뉴를 생성하여 해물파전과 카레라이스를 대결시키네요.

실제로 Gemini Canvas에서 생성된 코드 내부를 보면 gemini-2.5-flash-preview-09-2025 모델에게 API를 호출하여, 사용자 입력에 맞는 메뉴를 추천받게 되어있습니다. 이게 가능한 이유는 Gemini에서 무료로 API Key를 제공하기 때문입니다. 원래는 이러한 LLM 기능을 사용하려면 API의 사용 비용을 지불해야 하는데, (아마도 고객 유치의 일환으로) 구글은 Gemini Canvas의 '미리보기'에서는 API를 체험해볼 수 있도록 해주는 거죠.

4) 원하는대로 변경하기

당연히 Gemini 기능 추가 를 클릭하지 않고, 내가 원하는대로 Gemini 기능을 추가해달라고 하는 것도 가능합니다. 예를 들어, 저는 추가 채팅으로 이렇게 요청했습니다.

Gemini API를 호출해서 우승한 음식의 추천 레시피를 생성해줘.

그랬더니 아래와 같이 우승 메뉴 레시피 보기 버튼이 생겼고, 클릭해서 잠깐 기다리니 레시피를 주네요.

당연히 Gemini 기능이 아닌 다른 변경(색깔 변경, 문구 변경, 다양한 기능 추가 등)도 원하는대로 채팅으로 요청할 수 있습니다. 단, 이쯤 되면 무료 버전에서는 Pro 모델을 특정 시점까지는 더 쓸 수 없다는 메시지가 떴을지도 모르겠네요.

맺으며

실습의 2단계까지는 '이렇게 쉽게 간단한 앱을 만들 수 있구나' 정도를 단순히 보여주는 것이었지만, 이렇게 3단계에서 LLM API를 호출할 수 있다는 걸 보여주면 교육 참가자 분들의 눈이 반짝거리기 시작하는 걸 느끼실 겁니다. 돌아가서 뭘 할 수 있을지 상상의 나래가 펼쳐질 테니까요. LLM이 연결됨으로써 Gemini Canvas가 '장난감'에서 '유용한 도구'로 탈바꿈한 셈이죠.

꼭 Cursor나 Claude Code, Lovable 같은 도구를 사용하지 않더라도 이렇게 무료로, 손쉽게 바이브 코딩을 시작할 수 있습니다. 나아가, 꼭 웹페이지를 만들어야만 바이브 코딩은 아닙니다. 간단한 스크립트를 만드는 것도 아주 좋습니다. 예를 들어 Google Apps Script를 통해 구글 스프레드시트나 Gmail 등 구글 제품군과 연동된 간단한 자동화를 하는 것도 가능합니다. 사실 나의 문제만 잘 해결된다면 GPTs나 Gem을 위한 프롬프트를 생성하는 것도 저는 바이브 코딩이라고 봅니다.

이 실습으로 비개발자 분들의 바이브 코딩에 대한 막연한 두려움이 해소될 수 있길 바랍니다. 해피 바이브 코딩!