[바이브코딩] Gemini 3.5 Flash 바이브코딩 입문 — 코딩 몰라도 앱 만드는 법

Google AI Studio에서 Gemini 3.5 Flash로 앱을 만들려고 하면, 첫 시도에서 막히는 지점이 대체로 비슷해요. 프롬프트가 막연해 AI가 뭘 만들지 잡지 못하거나, 기능을 한꺼번에 너무 많이 요구해 오류가 나거나, 모델 선택이 용도와 어긋나는 경우예요. 동작하는 앱이 나오기까지 확인할 순서는 다음과 같아요.

Gemini 3.5 Flash는 2026년 5월 Google I/O에서 공개됐어요. 단순히 빠른 AI 모델이 아니라, 코딩을 모르는 사람도 앱을 만들 수 있는 바이브코딩 기능이 핵심이에요.

1. Gemini 3.5 Flash가 뭔데요 — 바이브코딩이랑 어떤 관계예요

Google I/O 2026에서 공개된 Gemini 3.5 Flash는 Google의 최신 AI 모델이에요. 이전 2.5 시리즈보다 성능이 크게 올라갔고, 특히 코딩과 에이전트 작업에서 이전 모델 Gemini 3.1 Pro를 거의 모든 벤치마크에서 앞선다고 해요. 그러면서도 다른 프런티어 모델보다 4배 빠르다고 발표했어요.

비개발자한테 중요한 건 성능 벤치마크 숫자가 아니잖아요. 중요한 건 "내가 쓸 수 있냐"는 거죠. 결론부터 말하면: 쓸 수 있어요. 무료로, 브라우저에서요.

4배 빠름

다른 프런티어 모델 대비 출력 속도 (Google I/O 2026 발표)

바이브코딩(Vibe Coding)은 코드를 직접 짜는 대신 말로 설명하면 AI가 코드를 만들어주는 방식이에요. "이런 앱 만들어줘"라고 설명하고, 결과 보고 "이 부분 바꿔줘"라고 대화로 수정하는 식이에요. Gemini 3.5 Flash는 여기서 특히 강점을 보이는데, 손으로 그린 와이어프레임 스케치를 올리면 그걸 React 컴포넌트로 바꿔주는 기능도 있거든요. 개발자한테도 신기한 기능인데, 비개발자한테는 더 신기하죠.

2. 어디서 써요 — Google AI Studio 접속 가이드

Gemini 3.5 Flash로 바이브코딩을 하려면 Google AI Studio가 제일 편해요. 브라우저에서 바로 열리고, 구글 계정만 있으면 무료로 시작할 수 있어요. Google Codelabs 공식 튜토리얼도 있는데, 영어긴 하지만 화면 구조는 그대로 따라할 수 있어요. 분당 60회 요청까지는 API 키 없이도 됩니다.

접속 순서:

1. Google 계정 로그인 상태에서 aistudio.google.com 접속
2. 왼쪽 상단 "Create new prompt" 클릭
3. 오른쪽 설정 패널에서 모델 gemini-3.5-flash 선택 (기본값인지 먼저 확인)
4. 채팅창에 만들고 싶은 것 입력

여기서 주의할 게 있어요. 모델 목록에서 기본값이 Gemini 3.5 Flash가 아닌 경우가 있어요. 꼭 확인하고 선택하세요. 모델이 다르면 결과도 달라지거든요.

❌ 이렇게 하면 실패해요

"앱 하나 만들어줘" — 너무 막연

"할 일 관리, 카테고리, 검색, 다크모드, 공유 기능 전부 해줘" — 한 번에 너무 복잡

✅ 이렇게 해야 돼요

"회의 안건 목록 정리, 체크 표시 가능한 웹앱. 기능은 추가·삭제·체크만. HTML+CSS+JS, 서버 없이."

3. 처음 앱 만들기 — 단계별 실전 흐름

비개발자한테 제일 좋은 접근 방법은 작게 시작해서 늘려가기예요. 처음부터 복잡한 기능 다 요구하면 오류가 나도 뭘 고쳐야 할지 모르거든요.

동작하는 앱이 나오는 기본 흐름:

1. 1단계: 목적 한 줄 정하기
   "팀원 담당 업무 관리표"처럼 구체적으로 딱 하나만 결정하기.
2. 2단계: 프롬프트 작성 — 필수 3가지 포함
   ① 뭘 만들 것인가 (기능 설명, 3개 이하)
   ② 어떻게 생겼으면 좋겠는가 (UI 힌트)
   ③ 기술 제약 ("HTML+CSS+JavaScript만, 서버 없이, 파일 하나로")
3. 3단계: 결과 받고 미리보기 확인
   AI Studio는 생성된 코드 옆에 미리보기 창이 바로 뜨거든요. 거기서 동작 확인.
4. 4단계: 수정 요청을 대화로 진행
   "버튼 색 바꿔줘", "이름 입력칸 추가해줘" — 말로 이어서 수정. 한 번에 하나씩.

제일 중요한 팁: 수정 요청은 한 번에 하나씩이에요. 여러 개 한꺼번에 요청하면 AI가 일부를 놓치거나, 이전에 잘 되던 기능을 지워버리는 경우가 생겨요.

4. 실무 적용 예시 — 사용 전 확인할 항목

비개발자 실무에서 자주 나오는 적용 사례 중 하나는 피드백 분류 도구예요. 엑셀로 수동 분류하던 작업을 웹앱으로 대체할 수 있는지 확인하고 싶을 때 시도해볼 만한 접근법이에요.

피드백 분류 웹앱처럼 요구사항이 복잡한 경우 첫 시도에서 실패하는 경우가 많아요. "리뷰 데이터를 좋음/나쁨/중립으로 분류하고 CSV 업로드되고 카테고리별 집계 보여주는 앱"처럼 조건을 한꺼번에 넣으면, AI가 긴 코드를 생성하다 중간에 오류가 발생해 미리보기가 열리지 않는 상황이 생길 수 있어요.

한 가지 확인할 만한 점은, 실패한 코드를 AI한테 다시 보여주면서 "이 코드에 오류가 있는 것 같아요, 확인해줘"라고 하면 스스로 고쳐주는 경우가 많다는 거예요. 코드를 전혀 몰라도 되는 거예요. 단계적으로 수정 요청을 이어가면 작동하는 앱이 나오는 흐름을 확인할 수 있어요.

완성도 측면에서 한계가 있어요. 모바일에서 레이아웃이 깨지거나, 특정 기능이 예상과 다르게 동작하는 경우가 생길 수 있어요. 그래서 내부 업무 도구, 팀 내부 테스트용으로 쓰는 게 현실적이에요. 외부에 공개하거나 앱 스토어에 올리는 용도로는 아직 한계가 있어요.

비개발자 직장인 관점 추천 대상: 엑셀로 하던 집계를 시각화하는 대시보드, 간단한 팀 체크리스트 앱, 회의록 정리 인터페이스. 이런 내부 도구 만들기에 딱 맞아요.

5. 비개발자에게 특히 유용한 Gemini 3.5 Flash 기능

1M

토큰 컨텍스트 — 긴 문서도 통째로 처리

무료

AI Studio 기본 사용 (분당 60회 요청)

4배

다른 프런티어 모델 대비 출력 속도

비개발자 직장인한테 실용적인 기능을 골라봤어요:

손그림 → 코드 변환
손으로 대충 그린 와이어프레임 사진을 올리면 그걸 기반으로 UI 코드를 만들어줘요. 기획서 스케치를 바로 코드로 연결하는 흐름으로 활용할 수 있어요. MarkTechPost에서도 이 기능을 핵심으로 꼽았고요.

대화형 수정
코드 수정을 말로 할 수 있어요. "버튼 파란색으로", "목록 삭제 기능 추가", "폰트 크게" 같은 식으로요. 코드 직접 못 건드려도 되는 게 비개발자한테 가장 중요한 기능이에요.

멀티모달 이해
텍스트, 이미지, 영상을 동시에 이해해요. 경쟁사 앱 화면 캡처를 올리고 "이거랑 비슷한 UI 구조로 만들어줘"가 가능해요.

Google Search 연동
최신 정보가 필요한 앱을 만들 때 Google Search를 직접 호출해서 데이터를 가져올 수 있어요. 뉴스 집계 대시보드 같은 거요.

API 요금은 입력 100만 토큰당 $1.50, 출력 100만 토큰당 $9.00 (Google 공식 기준, 2026년 5월). 개인 학습·테스트 수준이면 AI Studio 무료 한도 내에서 충분해요.

6. 바이브코딩 실패 없이 시작하는 3가지 원칙

자주 발생하는 실패 패턴을 바탕으로 정리한 원칙이에요:

원칙 1: 기능은 3개 이하로 시작
첫 앱은 기능을 딱 3개 이하로 제한하세요. 많을수록 AI가 오류를 낼 확률이 올라가요. 기능 추가는 나중에 대화로 하나씩 해도 되니까요.

원칙 2: 오류 나면 AI한테 다시 물어봐
오류 메시지나 이상한 동작을 AI한테 그대로 설명해주세요. "이 버튼 눌렀는데 아무 반응이 없어요"라고만 해도 대부분 찾아서 고쳐줘요.

원칙 3: 기술 제약을 명시해
"간단한 앱"은 AI한테 아무 정보도 아니에요. "HTML+CSS+JavaScript만 쓰고, 서버 없이, 파일 하나로 실행되는" 같이 제약 조건을 명시해야 AI가 맞게 만들어요.

7. 지금 바로 할 수 있는 것 (시작 전 챙길 준비물)

• ☐ aistudio.google.com 접속 → Google 계정 로그인 확인
• ☐ 모델 설정에서 gemini-3.5-flash 선택 (기본값이 아닐 수 있으니 먼저 확인)
• ☐ 만들고 싶은 것 한 줄 정리: "기능 3개 이하 + HTML로 + 서버 없이" 형식
• ☐ 첫 프롬프트 입력 → 미리보기 창에서 결과 확인
• ☐ 수정 요청은 한 번에 하나씩 대화로 진행

바이브코딩은 처음엔 낯설어요. 근데 한 번 성공 경험이 생기면 "이거 만들어볼까" 싶은 게 계속 생기거든요. 일단 작은 거 하나 만들어보는 게 중요해요.

---

참고 자료

• Google 공식 블로그 — Gemini 3.5: frontier intelligence with action
• MarkTechPost — Google Introduces Gemini 3.5 Flash at I/O 2026
• Google Codelabs — Vibe Code with Gemini in Google AI Studio
• Geeky Gadgets — A Complete Guide to Google Gemini 3.5 Flash Capabilities