AI 활용팁
구글 AI 스튜디오 무료 사용법｜코딩 없이 웹앱 만드는 바이브 코딩 프롬프트 10개
가계부나 장보기 계산기, 공부용 퀴즈 프로그램이 필요할 때 꼭 개발자를 찾거나 유료 앱을 구입해야 할까요? 간단한 기능이라면 자신이 원하는 방식으로 직접 만들어보는 방법도 있습니다.구글의 Google AI Studio(구글 AI 스튜디오)에는 만들고 싶은 프로그램을 말...
이 글에서 다루는 내용
AI 도구 모음 보기
AI 도구를 실제 업무와 일상에서 더 쉽게 활용할 수 있도록 핵심 방법과 예시를 중심으로 정리했습니다.
본문
가계부나 장보기 계산기, 공부용 퀴즈 프로그램이 필요할 때 꼭 개발자를 찾거나 유료 앱을 구입해야 할까요? 간단한 기능이라면 자신이 원하는 방식으로 직접 만들어보는 방법도 있습니다.
구글의 Google AI Studio(구글 AI 스튜디오)에는 만들고 싶은 프로그램을 말로 설명하면 AI가 코드를 작성하고 실제 작동하는 화면까지 보여주는 Build 기능이 있습니다. 이런 제작 방식을 바이브 코딩(Vibe Coding)이라고 부릅니다.
이번 글에서는 코딩을 전혀 모르는 초보자를 기준으로 Google AI Studio 무료 사용법부터 생활비 계산기 만들기, 디자인 수정, 오류 해결, 만든 앱을 공유하는 방법까지 정리하겠습니다. 마지막에는 장보기 계산기·구독료 관리·공부 퀴즈 등 생활에 바로 활용할 수 있는 무료 프롬프트 10개도 제공합니다.
구글의 Google AI Studio(구글 AI 스튜디오)에는 만들고 싶은 프로그램을 말로 설명하면 AI가 코드를 작성하고 실제 작동하는 화면까지 보여주는 Build 기능이 있습니다. 이런 제작 방식을 바이브 코딩(Vibe Coding)이라고 부릅니다.
이번 글에서는 코딩을 전혀 모르는 초보자를 기준으로 Google AI Studio 무료 사용법부터 생활비 계산기 만들기, 디자인 수정, 오류 해결, 만든 앱을 공유하는 방법까지 정리하겠습니다. 마지막에는 장보기 계산기·구독료 관리·공부 퀴즈 등 생활에 바로 활용할 수 있는 무료 프롬프트 10개도 제공합니다.
이 글에서 다루는 내용
Google AI Studio · 구글 AI 스튜디오 · 바이브 코딩 · 무료 앱 만들기 · 코딩 없이 웹앱 제작 · Build Mode · 생활비 계산기 · AI 프롬프트 · 앱 공유 · 무료 배포 조건
목차
1. 구글 AI 스튜디오와 바이브 코딩이란?
2. Google AI Studio 무료 시작 방법
3. 코딩 없이 생활비 계산기 만들기
4. 만든 앱의 디자인과 기능 수정하기
5. 웹앱 저장·공유·배포하는 방법
6. 무료 이용 제한과 오류 해결 방법
7. 바로 사용하는 웹앱 제작 프롬프트 10개
1. 구글 AI 스튜디오와 바이브 코딩이란?
바이브 코딩은 사람이 프로그램의 모든 코드를 직접 작성하는 대신, AI에게 만들고 싶은 기능을 자연어로 설명하고 결과물을 확인하며 수정하는 제작 방식입니다.
예를 들어 “매달 생활비를 입력하면 항목별 지출 합계를 보여주는 웹앱을 만들어줘”라고 요청하면 AI가 화면과 계산 기능을 포함한 프로그램을 구성하도록 할 수 있습니다.
예를 들어 “매달 생활비를 입력하면 항목별 지출 합계를 보여주는 웹앱을 만들어줘”라고 요청하면 AI가 화면과 계산 기능을 포함한 프로그램을 구성하도록 할 수 있습니다.
기존 코딩과 바이브 코딩의 차이
기존 방식: 개발 언어 학습 → 직접 코드 작성 → 오류 수정 → 실행
바이브 코딩: 만들고 싶은 기능 설명 → AI 코드 생성 → 실행 화면 확인 → 말로 수정 요청
바이브 코딩: 만들고 싶은 기능 설명 → AI 코드 생성 → 실행 화면 확인 → 말로 수정 요청
Google AI Studio에서 무엇을 만들 수 있나요?
구글 AI 스튜디오는 Gemini 모델을 시험하는 개발자용 도구이면서, Build 모드에서 앱 제작을 지원하는 서비스이기도 합니다.
간단한 웹 계산기부터 일정 관리, 학습 퀴즈, 정보 정리 도구까지 다양한 프로그램을 만들 수 있습니다. 2026년에는 웹앱뿐 아니라 Android 앱 제작 기능도 공식적으로 확대됐습니다.
간단한 웹 계산기부터 일정 관리, 학습 퀴즈, 정보 정리 도구까지 다양한 프로그램을 만들 수 있습니다. 2026년에는 웹앱뿐 아니라 Android 앱 제작 기능도 공식적으로 확대됐습니다.
초보자가 만들기 좋은 프로그램
생활비 계산기 · 장보기 가격 계산기 · 구독료 관리표 · 여행 준비물 체크리스트 · 공부 퀴즈 · 청소 일정표 · 주간 식단표 · 쇼츠 제작 일정표 · 상품 비교표
프로그램을 만든다고 모두 완성되는 것은 아닙니다
AI가 코드를 생성했다고 해서 기능이 반드시 정확하게 작동하는 것은 아닙니다. 계산 결과가 틀리거나 버튼이 작동하지 않고, 저장한 정보가 사라지는 문제도 발생할 수 있습니다.
따라서 바이브 코딩에서는 프로그램을 만드는 과정만큼 직접 사용해보고 오류를 찾아 수정하는 과정이 중요합니다.
따라서 바이브 코딩에서는 프로그램을 만드는 과정만큼 직접 사용해보고 오류를 찾아 수정하는 과정이 중요합니다.
2. Google AI Studio 무료 시작 방법
Google AI Studio는 구글 계정으로 시작할 수 있습니다. 무료로 이용 가능한 모델과 기능이 제공되지만 모든 AI 모델과 생성 작업이 무제한 무료인 것은 아닙니다.
처음에는 별도의 유료 API나 클라우드 배포 기능을 연결하지 않고, Build 모드에서 간단한 웹앱을 제작해 미리보기로 작동시키는 방법을 추천합니다.
처음에는 별도의 유료 API나 클라우드 배포 기능을 연결하지 않고, Build 모드에서 간단한 웹앱을 제작해 미리보기로 작동시키는 방법을 추천합니다.
처음 시작하는 순서
① Google AI Studio 공식 웹사이트 접속
② 구글 계정으로 로그인
③ 왼쪽 메뉴에서 Build 또는 앱 제작 메뉴 선택
④ 제작 플랫폼에서 웹앱 확인
⑤ 만들고 싶은 프로그램 설명 입력
⑥ AI가 생성한 코드와 미리보기 확인
⑦ 버튼을 눌러 기능 테스트
⑧ 필요한 부분을 추가 요청해 수정
② 구글 계정으로 로그인
③ 왼쪽 메뉴에서 Build 또는 앱 제작 메뉴 선택
④ 제작 플랫폼에서 웹앱 확인
⑤ 만들고 싶은 프로그램 설명 입력
⑥ AI가 생성한 코드와 미리보기 확인
⑦ 버튼을 눌러 기능 테스트
⑧ 필요한 부분을 추가 요청해 수정
Build 모드를 선택하세요
AI Studio에는 모델을 직접 시험하는 기능과 앱을 만드는 Build 기능이 있습니다. 웹앱 제작이 목적이라면 Build 모드로 이동하세요.
Build 모드에서는 원하는 프로그램을 설명한 뒤 AI가 코드를 작성하고 실제 앱 화면을 미리보기로 보여줍니다. 생성된 코드는 별도의 Code 화면에서 확인할 수 있습니다.
Build 모드에서는 원하는 프로그램을 설명한 뒤 AI가 코드를 작성하고 실제 앱 화면을 미리보기로 보여줍니다. 생성된 코드는 별도의 Code 화면에서 확인할 수 있습니다.
PC 브라우저에서 시작하는 것이 편합니다
처음 사용하는 경우에는 컴퓨터에서 Chrome 같은 웹브라우저로 접속하는 것을 추천합니다.
앱 제작 화면과 미리보기, 오류 메시지를 동시에 확인하기 쉽고 버튼·입력창의 위치도 자세하게 볼 수 있기 때문입니다. 앱을 완성한 뒤에는 휴대전화 화면에서도 정상적으로 보이는지 확인하면 됩니다.
앱 제작 화면과 미리보기, 오류 메시지를 동시에 확인하기 쉽고 버튼·입력창의 위치도 자세하게 볼 수 있기 때문입니다. 앱을 완성한 뒤에는 휴대전화 화면에서도 정상적으로 보이는지 확인하면 됩니다.
무료 사용과 실제 배포 비용은 구분하세요
AI Studio에서 앱을 생성해 시험하는 것과 인터넷에 공개해서 다른 사람들이 계속 사용하도록 배포하는 것은 서로 다른 단계입니다.
무료 생성에는 모델별 사용량 제한이 있고, 외부 배포에는 별도의 이용 조건이나 비용이 적용될 수 있습니다. 특히 AI 기능이 포함된 앱은 사용자가 늘어날수록 API 사용량도 함께 늘 수 있으므로 주의해야 합니다.
무료 생성에는 모델별 사용량 제한이 있고, 외부 배포에는 별도의 이용 조건이나 비용이 적용될 수 있습니다. 특히 AI 기능이 포함된 앱은 사용자가 늘어날수록 API 사용량도 함께 늘 수 있으므로 주의해야 합니다.
3. 코딩 없이 생활비 계산기 만들기
가장 먼저 연습할 프로그램으로는 생활비 계산기를 추천합니다. 복잡한 회원가입이나 외부 데이터가 필요하지 않고, 숫자를 입력한 뒤 계산 결과가 정확하게 나오는지 직접 확인하기 쉽기 때문입니다.
이번 실습에서는 식비·교통비·통신비·생활용품·기타 지출을 입력하고 월간 지출 합계를 계산하는 웹앱을 만들어보겠습니다.
이번 실습에서는 식비·교통비·통신비·생활용품·기타 지출을 입력하고 월간 지출 합계를 계산하는 웹앱을 만들어보겠습니다.
먼저 필요한 기능을 정합니다
프로그램 제작을 시작하기 전에 화면에 무엇이 있어야 하는지 간단하게 정리하세요. 막연하게 “예쁜 가계부 만들어줘”라고 요청하면 AI가 불필요한 기능을 추가하거나 원하는 계산 방식을 놓칠 수 있습니다.
생활비 계산기에 필요한 기능
지출 항목 선택 · 날짜 입력 · 사용 금액 입력 · 내역 추가 · 지출 내역 삭제 · 월간 합계 자동 계산 · 항목별 합계 표시 · 휴대전화 화면 지원
다음 프롬프트를 그대로 입력하세요
생활비 계산기 제작 프롬프트
한국어로 사용하는 간단한 생활비 관리 웹앱을 만들어줘.
1. 사용자가 날짜·지출 항목·금액·메모를 입력할 수 있게 해줘.
2. 지출 항목은 식비·교통비·통신비·생활용품·기타로 구성해줘.
3. 추가 버튼을 누르면 지출 내역 목록에 저장되도록 해줘.
4. 월별 전체 지출 합계와 항목별 합계를 자동으로 계산해줘.
5. 각 내역에 삭제 버튼을 넣어줘.
6. 금액에는 천 단위 구분 기호와 원 표시를 적용해줘.
7. 금액이 비어 있거나 잘못 입력된 경우 오류 안내를 보여줘.
8. 휴대전화에서도 사용하기 편한 반응형 디자인으로 만들어줘.
9. 첫 버전은 회원가입·로그인·외부 데이터베이스·유료 API 없이 작동하도록 해줘.
10. 입력 데이터는 현재 브라우저의 로컬 저장소에 저장하고 다른 기기와 동기화되지 않는다는 안내를 표시해줘.
전체 디자인은 밝은 배경과 깔끔한 카드 형태로 구성해줘. 한국어 버튼과 안내문을 사용하고 실제 계산이 정확하게 동작하도록 만들어줘.
1. 사용자가 날짜·지출 항목·금액·메모를 입력할 수 있게 해줘.
2. 지출 항목은 식비·교통비·통신비·생활용품·기타로 구성해줘.
3. 추가 버튼을 누르면 지출 내역 목록에 저장되도록 해줘.
4. 월별 전체 지출 합계와 항목별 합계를 자동으로 계산해줘.
5. 각 내역에 삭제 버튼을 넣어줘.
6. 금액에는 천 단위 구분 기호와 원 표시를 적용해줘.
7. 금액이 비어 있거나 잘못 입력된 경우 오류 안내를 보여줘.
8. 휴대전화에서도 사용하기 편한 반응형 디자인으로 만들어줘.
9. 첫 버전은 회원가입·로그인·외부 데이터베이스·유료 API 없이 작동하도록 해줘.
10. 입력 데이터는 현재 브라우저의 로컬 저장소에 저장하고 다른 기기와 동기화되지 않는다는 안내를 표시해줘.
전체 디자인은 밝은 배경과 깔끔한 카드 형태로 구성해줘. 한국어 버튼과 안내문을 사용하고 실제 계산이 정확하게 동작하도록 만들어줘.
프롬프트를 입력하면 AI가 필요한 파일을 만들고 프로그램 화면을 표시합니다. 이때 앱이 생성되는 중에는 결과가 완성될 때까지 기다린 뒤 미리보기에서 실제로 사용해보세요.
생성 후에는 반드시 직접 계산해보세요
예를 들어 식비 12,000원과 교통비 8,000원을 각각 입력하고 전체 합계가 20,000원으로 나오는지 확인합니다.
그다음 한 내역을 삭제했을 때 합계가 다시 계산되는지, 다른 달을 선택했을 때 해당 월의 지출만 표시되는지도 확인하세요.
그다음 한 내역을 삭제했을 때 합계가 다시 계산되는지, 다른 달을 선택했을 때 해당 월의 지출만 표시되는지도 확인하세요.
기본 테스트 체크리스트
① 지출 내역 추가가 되는가?
② 금액 합계가 정확한가?
③ 항목별 합계가 맞는가?
④ 내역 삭제 후 합계가 바뀌는가?
⑤ 빈 금액 입력을 막는가?
⑥ 월을 바꾸면 목록도 바뀌는가?
⑦ 새로고침 후 저장한 내역이 유지되는가?
⑧ 모바일 화면에서 버튼을 누르기 편한가?
② 금액 합계가 정확한가?
③ 항목별 합계가 맞는가?
④ 내역 삭제 후 합계가 바뀌는가?
⑤ 빈 금액 입력을 막는가?
⑥ 월을 바꾸면 목록도 바뀌는가?
⑦ 새로고침 후 저장한 내역이 유지되는가?
⑧ 모바일 화면에서 버튼을 누르기 편한가?
저장 기능의 한계도 알아두세요
위 예시에서는 별도의 서버 없이 브라우저의 로컬 저장소를 사용하는 방법을 요청했습니다.
이 방식은 간단하지만 브라우저 데이터가 삭제되거나 다른 기기로 이동하면 정보가 보이지 않을 수 있습니다. 따라서 중요한 금융 기록을 장기간 보관하는 용도로 사용하기보다는 간단한 개인 연습용 도구로 시작하는 것이 좋습니다.
이 방식은 간단하지만 브라우저 데이터가 삭제되거나 다른 기기로 이동하면 정보가 보이지 않을 수 있습니다. 따라서 중요한 금융 기록을 장기간 보관하는 용도로 사용하기보다는 간단한 개인 연습용 도구로 시작하는 것이 좋습니다.
4. 만든 앱의 디자인과 기능 수정하기
첫 번째 앱이 만들어졌다면 이제 수정하는 방법을 익혀볼 차례입니다. 바이브 코딩의 장점은 화면에 있는 버튼이나 기능을 변경할 때 코드를 직접 찾아 고치지 않고 자연어로 요청할 수 있다는 점입니다.
하지만 한 번에 너무 많은 부분을 수정하면 기존에 잘 작동하던 기능이 달라질 수 있으므로 변경할 부분을 하나씩 지정하는 편이 좋습니다.
하지만 한 번에 너무 많은 부분을 수정하면 기존에 잘 작동하던 기능이 달라질 수 있으므로 변경할 부분을 하나씩 지정하는 편이 좋습니다.
앱의 색상과 글씨 크기 수정
화면이 너무 복잡하거나 버튼이 작다면 현재 기능을 유지하면서 디자인만 바꾸도록 요청하세요.
디자인 수정 프롬프트
현재 생활비 계산기의 기능과 데이터 저장 방식은 유지하고 디자인만 수정해줘.
전체 배경은 밝은 회색으로 바꾸고 주요 버튼은 차분한 파란색으로 만들어줘.
모바일에서 입력창과 버튼을 쉽게 누를 수 있도록 크기를 키워줘.
숫자 합계는 화면 상단에 크게 표시하고 불필요한 장식은 줄여줘.
기존 계산·추가·삭제 기능이 그대로 작동해야 해.
전체 배경은 밝은 회색으로 바꾸고 주요 버튼은 차분한 파란색으로 만들어줘.
모바일에서 입력창과 버튼을 쉽게 누를 수 있도록 크기를 키워줘.
숫자 합계는 화면 상단에 크게 표시하고 불필요한 장식은 줄여줘.
기존 계산·추가·삭제 기능이 그대로 작동해야 해.
원하는 화면을 선택해서 수정하기
Google AI Studio Build 모드에서는 미리보기 화면에서 특정 영역을 지정하고 변경할 내용을 설명하는 방식도 지원합니다.
예를 들어 합계 카드가 너무 작다면 해당 영역을 선택한 뒤 “이 카드의 숫자 크기를 키우고 위쪽에 배치해줘”라고 요청할 수 있습니다.
예를 들어 합계 카드가 너무 작다면 해당 영역을 선택한 뒤 “이 카드의 숫자 크기를 키우고 위쪽에 배치해줘”라고 요청할 수 있습니다.
필요한 기능 하나만 추가하기
생활비 계산기가 정상적으로 작동한다면 다음 단계로 예산 설정 기능을 추가해볼 수 있습니다.
기존 기능이 잘 작동하는지 먼저 확인한 뒤 새로운 기능을 한 가지씩 추가하면 문제가 생겼을 때 원인을 찾기 쉽습니다.
기존 기능이 잘 작동하는지 먼저 확인한 뒤 새로운 기능을 한 가지씩 추가하면 문제가 생겼을 때 원인을 찾기 쉽습니다.
월간 예산 기능 추가
현재 앱에 월간 예산 설정 기능을 추가해줘.
사용자가 원하는 월 예산을 입력하고 저장할 수 있게 해줘.
지출이 추가되면 남은 예산을 자동 계산해줘.
예산을 초과한 경우에는 초과 금액을 안내해줘.
기존 지출 내역과 계산 기능은 유지하고 수정 후 전체 기능이 정상 작동하는지 검토해줘.
사용자가 원하는 월 예산을 입력하고 저장할 수 있게 해줘.
지출이 추가되면 남은 예산을 자동 계산해줘.
예산을 초과한 경우에는 초과 금액을 안내해줘.
기존 지출 내역과 계산 기능은 유지하고 수정 후 전체 기능이 정상 작동하는지 검토해줘.
코드를 직접 수정해야 하나요?
단순한 앱은 자연어 수정 요청만으로도 상당 부분 제작할 수 있습니다. AI Studio에는 생성된 코드를 확인하는 화면도 있으므로 코딩을 공부하고 싶은 경우 어떤 파일과 코드가 만들어졌는지 살펴볼 수 있습니다.
다만 기능이 복잡해지면 코드 구조나 데이터 저장 방식 등을 이해해야 하는 상황이 생길 수 있습니다. 공개 서비스나 결제 기능이 있는 앱은 별도의 기술 검토가 필요합니다.
다만 기능이 복잡해지면 코드 구조나 데이터 저장 방식 등을 이해해야 하는 상황이 생길 수 있습니다. 공개 서비스나 결제 기능이 있는 앱은 별도의 기술 검토가 필요합니다.
5. 웹앱 저장·공유·배포하는 방법
프로그램이 마음에 들게 완성되면 다른 사람에게 보여주거나 실제 웹사이트로 공개할 수 있습니다. 다만 AI Studio 내부에서 공유하는 것과 인터넷에 정식 배포하는 것은 다릅니다.
처음에는 미리보기로 충분히 테스트하고, 다른 사람도 사용해야 할 때 배포 방식을 선택하는 것이 좋습니다.
처음에는 미리보기로 충분히 테스트하고, 다른 사람도 사용해야 할 때 배포 방식을 선택하는 것이 좋습니다.
앱 공유하기
AI Studio는 만든 앱을 다른 사용자와 공유하는 기능을 제공합니다. 앱을 공유받은 사람은 지원되는 권한에 따라 앱을 실행하거나 코드를 확인하고 복사할 수도 있습니다.
따라서 비밀번호·개인정보·회사 내부자료를 포함한 앱을 무심코 공유하지 않아야 합니다. 다른 사람이 앱을 사용할 때 발생하는 AI 모델 요청은 소유자 측 사용 한도에 반영될 수 있습니다.
따라서 비밀번호·개인정보·회사 내부자료를 포함한 앱을 무심코 공유하지 않아야 합니다. 다른 사람이 앱을 사용할 때 발생하는 AI 모델 요청은 소유자 측 사용 한도에 반영될 수 있습니다.
인터넷에 정식 공개하기
Google AI Studio는 Build 모드에서 만든 웹앱을 Google Cloud Run에 배포하는 기능을 지원합니다.
일부 적격 개인 계정은 Google Cloud Starter Tier를 통해 결제 계정을 등록하지 않고 최대 2개의 앱을 배포할 수 있습니다. 하지만 모든 계정에 적용되는 것은 아니며 기존 유료 클라우드 이용 이력이나 회사·학교 계정 여부 등에 따라 대상에서 제외될 수 있습니다.
일부 적격 개인 계정은 Google Cloud Starter Tier를 통해 결제 계정을 등록하지 않고 최대 2개의 앱을 배포할 수 있습니다. 하지만 모든 계정에 적용되는 것은 아니며 기존 유료 클라우드 이용 이력이나 회사·학교 계정 여부 등에 따라 대상에서 제외될 수 있습니다.
적격 계정의 Starter Tier 배포 순서
① 완성된 웹앱 열기
② 오른쪽 위 Publish 선택
③ Get Started 선택
④ 배포 대상과 이용 조건 확인
⑤ Publish App 선택
⑥ 생성된 공개 주소 확인
⑦ 다른 브라우저에서도 정상 작동하는지 테스트
② 오른쪽 위 Publish 선택
③ Get Started 선택
④ 배포 대상과 이용 조건 확인
⑤ Publish App 선택
⑥ 생성된 공개 주소 확인
⑦ 다른 브라우저에서도 정상 작동하는지 테스트
무료 배포라고 무제한 운영은 아닙니다
무료 Starter Tier는 적격 계정에만 제공되며 개수·지역·사용량 등의 제한이 있습니다. 더 많은 자원이나 기능이 필요하면 일반 Google Cloud 결제 설정으로 전환해야 할 수 있습니다.
AI 기능을 사용하는 앱은 모델 호출에 별도 비용이 발생할 가능성도 있으므로 공개 전 계정의 결제 설정과 이용 한도를 반드시 확인하세요.
AI 기능을 사용하는 앱은 모델 호출에 별도 비용이 발생할 가능성도 있으므로 공개 전 계정의 결제 설정과 이용 한도를 반드시 확인하세요.
프로젝트 코드 다운로드
완성된 앱의 코드는 ZIP 파일로 다운로드하거나 GitHub 저장소와 연동해 관리할 수 있습니다.
다만 AI Studio 밖으로 가져가 실행하려는 앱에 Gemini API 기능이 포함돼 있다면 서버 환경변수 설정이 추가로 필요할 수 있습니다. 코드를 내려받았다고 모든 서비스가 별도 설정 없이 작동하는 것은 아닙니다.
다만 AI Studio 밖으로 가져가 실행하려는 앱에 Gemini API 기능이 포함돼 있다면 서버 환경변수 설정이 추가로 필요할 수 있습니다. 코드를 내려받았다고 모든 서비스가 별도 설정 없이 작동하는 것은 아닙니다.
6. 무료 이용 제한과 오류 해결 방법
무료 계정은 생성 횟수가 제한될 수 있습니다
AI Studio는 무료 사용 가능한 모델을 제공하지만 모델별 요청 횟수와 생성량에는 제한이 있습니다. 복잡한 프로젝트를 여러 차례 수정하다 보면 해당 모델의 사용 한도에 도달할 수 있습니다.
따라서 처음에는 필요한 기능을 한 번에 명확하게 설명하고 작은 수정은 묶어서 요청하는 것이 좋습니다. 정확한 사용량은 AI Studio 대시보드의 이용량 안내에서 확인하세요.
따라서 처음에는 필요한 기능을 한 번에 명확하게 설명하고 작은 수정은 묶어서 요청하는 것이 좋습니다. 정확한 사용량은 AI Studio 대시보드의 이용량 안내에서 확인하세요.
무료 플랜과 유료 API는 다릅니다
무료 AI Studio 이용과 결제 계정에 연결된 Gemini API 이용은 구분해야 합니다.
무료 이용 한도 안에서 사용할 때와 달리 유료 모델이나 결제 설정을 연결하면 실제 사용량에 따라 요금이 발생할 수 있습니다. 비용이 걱정된다면 처음에는 유료 API와 외부 서비스를 연결하지 않은 간단한 앱부터 만들어보세요.
무료 이용 한도 안에서 사용할 때와 달리 유료 모델이나 결제 설정을 연결하면 실제 사용량에 따라 요금이 발생할 수 있습니다. 비용이 걱정된다면 처음에는 유료 API와 외부 서비스를 연결하지 않은 간단한 앱부터 만들어보세요.
버튼을 눌러도 반응이 없을 때
버튼이 보이는데 눌러도 아무 변화가 없다면 화면만 만들어지고 실제 동작이 제대로 연결되지 않았을 수 있습니다.
이럴 때는 어떤 버튼을 눌렀고 어떤 결과를 기대했는지 구체적으로 알려주는 것이 좋습니다.
이럴 때는 어떤 버튼을 눌렀고 어떤 결과를 기대했는지 구체적으로 알려주는 것이 좋습니다.
버튼 오류 수정 프롬프트
현재 앱에서 지출 추가 버튼이 작동하지 않아.
날짜·항목·금액을 입력하고 추가 버튼을 누르면 지출 목록에 새로운 항목이 표시돼야 해.
현재 코드를 검토해 문제가 되는 부분만 수정해줘.
기존 디자인과 다른 기능은 유지하고 수정 후 추가·삭제·합계 계산까지 다시 확인해줘.
날짜·항목·금액을 입력하고 추가 버튼을 누르면 지출 목록에 새로운 항목이 표시돼야 해.
현재 코드를 검토해 문제가 되는 부분만 수정해줘.
기존 디자인과 다른 기능은 유지하고 수정 후 추가·삭제·합계 계산까지 다시 확인해줘.
수정했더니 다른 기능이 고장난 경우
AI가 새 기능을 추가하는 과정에서 기존 기능이 달라질 수 있습니다. 특히 저장 방식이나 데이터 구조를 크게 변경하면 이전에 입력한 기록이 제대로 보이지 않는 문제가 생길 수 있습니다.
중요한 변경 전에는 프로젝트를 복사하거나 원본 코드를 백업해두고, 변경 후에는 기존에 사용하던 버튼도 다시 테스트하는 것이 좋습니다.
중요한 변경 전에는 프로젝트를 복사하거나 원본 코드를 백업해두고, 변경 후에는 기존에 사용하던 버튼도 다시 테스트하는 것이 좋습니다.
기존 기능 유지 프롬프트
방금 수정한 뒤 기존 기능에 문제가 생겼어.
새로 추가한 기능과 기존 기능 사이의 충돌을 확인해줘.
기존 데이터 저장과 계산 방식을 변경하지 않는 방향으로 문제를 해결해줘.
수정한 파일과 문제 원인을 간단히 설명하고 전체 기능을 다시 점검해줘.
새로 추가한 기능과 기존 기능 사이의 충돌을 확인해줘.
기존 데이터 저장과 계산 방식을 변경하지 않는 방향으로 문제를 해결해줘.
수정한 파일과 문제 원인을 간단히 설명하고 전체 기능을 다시 점검해줘.
개인정보가 들어가는 앱은 주의
AI가 만든 앱은 로그인·저장·공유 기능이 있다고 해도 자동으로 안전하다는 뜻은 아닙니다.
개인정보·은행 계좌·비밀번호·회원정보 등을 다루는 앱은 보안 검토가 필요합니다. 처음에는 실제 개인정보 대신 테스트용 데이터를 사용하고, 공개 서비스로 운영할 계획이라면 인증·권한·저장 방식 등을 별도로 점검하세요.
개인정보·은행 계좌·비밀번호·회원정보 등을 다루는 앱은 보안 검토가 필요합니다. 처음에는 실제 개인정보 대신 테스트용 데이터를 사용하고, 공개 서비스로 운영할 계획이라면 인증·권한·저장 방식 등을 별도로 점검하세요.
공개 전 반드시 확인
AI가 생성한 앱이라도 개인정보 유출·계산 오류·저작권 문제·예상치 못한 요금이 발생할 수 있습니다. 특히 실제 고객이 이용하거나 결제 기능이 있는 앱은 보안과 기능을 충분히 검증한 뒤 공개해야 합니다.
7. 바로 사용하는 웹앱 제작 프롬프트 10개
아래 프롬프트는 Google AI Studio Build 모드에서 사용할 수 있도록 구성했습니다. 처음 사용하는 사람도 따라 하기 쉽도록 서버·회원가입·유료 API가 필요한 기능은 가능한 한 제외했습니다.
프로그램이 완성되면 직접 버튼을 눌러 테스트하고, 데이터가 저장되는 범위와 계산 결과가 정확한지 확인하세요.
프로그램이 완성되면 직접 버튼을 눌러 테스트하고, 데이터가 저장되는 범위와 계산 결과가 정확한지 확인하세요.
01. 장보기 가격 계산기
장보기 계산기
한국어 장보기 계산기 웹앱을 만들어줘.
사용자가 상품명·개당 가격·수량을 입력하면 상품별 합계와 전체 금액이 자동으로 계산되도록 해줘.
상품을 추가하거나 삭제할 수 있게 만들고 예상 예산을 입력하면 남은 금액도 보여줘.
금액은 원 단위로 표시하고 모바일에서도 편리하게 사용하도록 디자인해줘.
회원가입과 외부 API 없이 작동하도록 해줘.
사용자가 상품명·개당 가격·수량을 입력하면 상품별 합계와 전체 금액이 자동으로 계산되도록 해줘.
상품을 추가하거나 삭제할 수 있게 만들고 예상 예산을 입력하면 남은 금액도 보여줘.
금액은 원 단위로 표시하고 모바일에서도 편리하게 사용하도록 디자인해줘.
회원가입과 외부 API 없이 작동하도록 해줘.
02. 월간 구독료 관리 앱
구독료 정리
매달 결제하는 구독 서비스를 관리하는 웹앱을 만들어줘.
서비스 이름·월 결제 금액·결제일·메모를 입력하고 수정하거나 삭제할 수 있게 해줘.
월간 총구독료와 연간 환산 금액을 자동 계산해줘.
결제일이 가까운 서비스를 목록에서 강조하되 실제 푸시 알림이나 자동 결제 기능은 구현하지 마.
정보는 현재 브라우저에만 저장되도록 해줘.
서비스 이름·월 결제 금액·결제일·메모를 입력하고 수정하거나 삭제할 수 있게 해줘.
월간 총구독료와 연간 환산 금액을 자동 계산해줘.
결제일이 가까운 서비스를 목록에서 강조하되 실제 푸시 알림이나 자동 결제 기능은 구현하지 마.
정보는 현재 브라우저에만 저장되도록 해줘.
03. 여행 준비물 체크리스트
여행 준비
여행 준비물을 관리하는 한국어 웹앱을 만들어줘.
여권·옷·세면도구·전자제품·기타 항목으로 분류하고 각 물건에 체크박스를 넣어줘.
사용자가 새로운 준비물을 추가하거나 기존 항목을 삭제할 수 있게 해줘.
전체 준비물 중 몇 퍼센트를 챙겼는지 진행률을 보여줘.
모바일 화면에 최적화하고 회원가입 없이 사용할 수 있게 해줘.
여권·옷·세면도구·전자제품·기타 항목으로 분류하고 각 물건에 체크박스를 넣어줘.
사용자가 새로운 준비물을 추가하거나 기존 항목을 삭제할 수 있게 해줘.
전체 준비물 중 몇 퍼센트를 챙겼는지 진행률을 보여줘.
모바일 화면에 최적화하고 회원가입 없이 사용할 수 있게 해줘.
04. 냉장고 식재료 목록 관리
식재료 관리
우리 집 냉장고에 있는 식재료를 정리하는 웹앱을 만들어줘.
식재료명·보관 위치·수량·표시된 소비기한을 사용자가 직접 입력할 수 있게 해줘.
목록을 날짜순으로 정렬하고 입력한 기한이 가까워진 항목은 화면에서 강조해줘.
날짜는 단순 참고용이며 식품의 안전한 섭취 여부를 자동 판단하지 않는다는 안내를 넣어줘.
정보는 브라우저에 저장하고 외부 서버는 사용하지 마.
식재료명·보관 위치·수량·표시된 소비기한을 사용자가 직접 입력할 수 있게 해줘.
목록을 날짜순으로 정렬하고 입력한 기한이 가까워진 항목은 화면에서 강조해줘.
날짜는 단순 참고용이며 식품의 안전한 섭취 여부를 자동 판단하지 않는다는 안내를 넣어줘.
정보는 브라우저에 저장하고 외부 서버는 사용하지 마.
05. 공부용 객관식 퀴즈 앱
공부 퀴즈
한국어로 사용하는 객관식 퀴즈 웹앱을 만들어줘.
사용자가 문제·보기 4개·정답·해설을 직접 등록할 수 있게 해줘.
퀴즈를 시작하면 문제를 하나씩 보여주고 정답을 선택한 뒤 맞았는지 알려줘.
마지막에는 정답 개수와 점수를 보여주고 틀린 문제를 다시 확인할 수 있게 해줘.
예시 문제만 제공하고 외부 AI API를 호출하지 않도록 해줘.
사용자가 문제·보기 4개·정답·해설을 직접 등록할 수 있게 해줘.
퀴즈를 시작하면 문제를 하나씩 보여주고 정답을 선택한 뒤 맞았는지 알려줘.
마지막에는 정답 개수와 점수를 보여주고 틀린 문제를 다시 확인할 수 있게 해줘.
예시 문제만 제공하고 외부 AI API를 호출하지 않도록 해줘.
06. 가족 청소 일정표
집안일 관리
가족이 함께 사용하는 집안일 일정표 웹앱을 만들어줘.
청소 항목·담당자 이름·요일을 등록하고 완료 여부를 체크할 수 있게 해줘.
이번 주 완료한 집안일 수를 보여주고 미완료 항목만 따로 확인할 수 있게 해줘.
간단하고 읽기 쉬운 한국어 디자인을 적용하고 첫 버전은 브라우저에만 저장하도록 해줘.
여러 기기 동기화 기능은 포함하지 마.
청소 항목·담당자 이름·요일을 등록하고 완료 여부를 체크할 수 있게 해줘.
이번 주 완료한 집안일 수를 보여주고 미완료 항목만 따로 확인할 수 있게 해줘.
간단하고 읽기 쉬운 한국어 디자인을 적용하고 첫 버전은 브라우저에만 저장하도록 해줘.
여러 기기 동기화 기능은 포함하지 마.
07. 주간 식단표 만들기
식단 계획
일주일 식단표를 직접 작성하는 웹앱을 만들어줘.
월요일부터 일요일까지 아침·점심·저녁 식사 메뉴를 입력하고 수정할 수 있게 해줘.
식사 준비에 필요한 재료를 장보기 목록으로 따로 정리하는 기능도 넣어줘.
깔끔한 달력형 디자인을 사용하고 인쇄하기 편한 화면을 제공해줘.
칼로리나 영양성분을 임의로 계산하지 말고 외부 API 없이 작동하도록 해줘.
월요일부터 일요일까지 아침·점심·저녁 식사 메뉴를 입력하고 수정할 수 있게 해줘.
식사 준비에 필요한 재료를 장보기 목록으로 따로 정리하는 기능도 넣어줘.
깔끔한 달력형 디자인을 사용하고 인쇄하기 편한 화면을 제공해줘.
칼로리나 영양성분을 임의로 계산하지 말고 외부 API 없이 작동하도록 해줘.
08. 유튜브 쇼츠 제작 일정 관리
콘텐츠 일정표
유튜브 쇼츠 제작 일정을 관리하는 한국어 웹앱을 만들어줘.
영상 제목·주제·업로드 예정일·제작 상태를 입력할 수 있게 해줘.
제작 상태는 기획 중·원고 작성·영상 편집·업로드 완료로 구분해줘.
달력과 목록에서 작업 상태를 확인하고 제목 검색과 날짜 정렬이 가능하도록 해줘.
실제 유튜브 계정 연결이나 자동 업로드 기능은 포함하지 마.
영상 제목·주제·업로드 예정일·제작 상태를 입력할 수 있게 해줘.
제작 상태는 기획 중·원고 작성·영상 편집·업로드 완료로 구분해줘.
달력과 목록에서 작업 상태를 확인하고 제목 검색과 날짜 정렬이 가능하도록 해줘.
실제 유튜브 계정 연결이나 자동 업로드 기능은 포함하지 마.
09. 상품 가격 비교표
쇼핑 비교
여러 상품의 가격과 특징을 비교하는 웹앱을 만들어줘.
상품명·판매처·가격·배송비·주요 특징을 직접 입력할 수 있게 해줘.
상품별 총구매 비용을 계산하고 가격이 낮은 순서로 정렬할 수 있게 해줘.
표 형태와 카드 형태를 선택해 볼 수 있도록 해줘.
가격 정보는 사용자가 직접 입력한 값이며 실시간 최저가가 아니라는 안내를 넣어줘.
외부 쇼핑몰 자동 검색 기능은 만들지 마.
상품명·판매처·가격·배송비·주요 특징을 직접 입력할 수 있게 해줘.
상품별 총구매 비용을 계산하고 가격이 낮은 순서로 정렬할 수 있게 해줘.
표 형태와 카드 형태를 선택해 볼 수 있도록 해줘.
가격 정보는 사용자가 직접 입력한 값이며 실시간 최저가가 아니라는 안내를 넣어줘.
외부 쇼핑몰 자동 검색 기능은 만들지 마.
10. 개인 목표 달성 체크리스트
목표 관리
매일 실천할 목표를 기록하는 간단한 웹앱을 만들어줘.
목표 이름과 반복 요일을 설정하고 날짜별 완료 여부를 체크할 수 있게 해줘.
한 주의 실천 횟수와 달성률을 보여주고 목표를 추가·수정·삭제할 수 있게 해줘.
모바일에서 쉽게 사용할 수 있는 큰 버튼과 밝은 카드형 디자인으로 만들어줘.
개인정보 입력이나 회원가입 없이 작동하도록 해줘.
목표 이름과 반복 요일을 설정하고 날짜별 완료 여부를 체크할 수 있게 해줘.
한 주의 실천 횟수와 달성률을 보여주고 목표를 추가·수정·삭제할 수 있게 해줘.
모바일에서 쉽게 사용할 수 있는 큰 버튼과 밝은 카드형 디자인으로 만들어줘.
개인정보 입력이나 회원가입 없이 작동하도록 해줘.
어떤 앱이든 만들 수 있는 만능 프롬프트
앞서 소개한 앱 외에도 자신에게 필요한 프로그램이 있다면 아래 템플릿을 활용해보세요. 중요한 것은 프로그램의 이름보다 실제로 어떤 작업을 수행해야 하는지 명확하게 정하는 것입니다.
바이브 코딩 만능 프롬프트
Google AI Studio에서 실행할 한국어 웹앱을 만들어줘.
앱 이름: [이름 입력]
사용 목적: [어떤 문제를 해결하는지]
사용 대상: [누가 사용하는지]
필수 기능 1: [기능 입력]
필수 기능 2: [기능 입력]
필수 기능 3: [기능 입력]
화면 디자인: [원하는 스타일]
사용 기기: PC와 스마트폰
저장 방식: [저장하지 않음 또는 브라우저 로컬 저장]
처음에는 회원가입·외부 데이터베이스·유료 API 없이 만들 수 있는 범위로 구현해줘.
모든 버튼이 실제로 작동하도록 하고 잘못된 입력은 사용자에게 안내해줘.
사용자가 직접 테스트할 수 있는 예시 데이터와 테스트 방법도 제공해줘.
확실하게 구현할 수 없는 기능은 완성된 것처럼 표시하지 말고 한계를 설명해줘.
앱 이름: [이름 입력]
사용 목적: [어떤 문제를 해결하는지]
사용 대상: [누가 사용하는지]
필수 기능 1: [기능 입력]
필수 기능 2: [기능 입력]
필수 기능 3: [기능 입력]
화면 디자인: [원하는 스타일]
사용 기기: PC와 스마트폰
저장 방식: [저장하지 않음 또는 브라우저 로컬 저장]
처음에는 회원가입·외부 데이터베이스·유료 API 없이 만들 수 있는 범위로 구현해줘.
모든 버튼이 실제로 작동하도록 하고 잘못된 입력은 사용자에게 안내해줘.
사용자가 직접 테스트할 수 있는 예시 데이터와 테스트 방법도 제공해줘.
확실하게 구현할 수 없는 기능은 완성된 것처럼 표시하지 말고 한계를 설명해줘.
초보자가 가장 많이 하는 실수
처음부터 회원가입·결제·AI 챗봇 등 복잡한 기능을 모두 요청하기 · 앱 화면만 보고 실제 계산 기능을 확인하지 않기 · 브라우저 저장과 서버 저장을 혼동하기 · 수정 전 원본을 백업하지 않기 · 무료 생성과 유료 배포를 구분하지 않기 · 개인정보가 포함된 앱을 그대로 공유하기 · AI가 작성한 코드는 오류가 없다고 믿기
처음에는 이 순서대로 연습하세요
AI 웹앱 제작 순서
① 만들고 싶은 기능 3개 정하기 → ② Build 모드 열기 → ③ 프롬프트 입력 → ④ 미리보기 확인 → ⑤ 계산·입력·삭제 테스트 → ⑥ 디자인 수정 → ⑦ 기능 추가 후 재검사 → ⑧ 프로젝트 백업 → ⑨ 공유·배포 조건 확인
자주 묻는 질문
Q. Google AI Studio는 무료인가요?
무료로 이용할 수 있는 모델과 앱 제작 기능이 제공됩니다. 다만 무료 모델의 요청 횟수에는 제한이 있으며 유료 API나 클라우드 배포 기능을 이용하면 비용이 발생할 수 있습니다.
Q. 코딩을 몰라도 앱을 만들 수 있나요?
간단한 계산기나 체크리스트처럼 기능이 명확한 프로그램은 자연어로 설명해 제작을 시도할 수 있습니다. 다만 생성된 앱이 정확하게 작동하는지 확인하고 오류를 수정하는 과정은 필요합니다.
Q. 휴대전화에서도 사용할 수 있는 앱을 만들 수 있나요?
가능합니다. 스마트폰 화면에 맞는 반응형 웹앱을 만들 수 있으며 AI Studio는 별도의 Android 앱 제작 기능도 지원합니다. 웹앱과 설치형 Android 앱은 제작·배포 방식이 다릅니다.
Q. 만든 앱을 다른 사람에게 공유할 수 있나요?
AI Studio 내부 공유 기능을 이용하거나 지원되는 배포 방식으로 공개할 수 있습니다. 공유 권한과 코드 노출 범위, 사용량·비용 조건은 미리 확인해야 합니다.
Q. 웹앱을 2개까지 무료로 배포할 수 있나요?
구글은 적격 계정을 대상으로 최대 2개의 앱을 결제 계정 없이 배포하는 Starter Tier를 제공합니다. 모든 계정에 자동 적용되는 것은 아니며 이용 자격과 무료 한도를 확인해야 합니다.
Q. 만든 앱의 코드를 다운로드할 수 있나요?
가능합니다. 앱 코드를 ZIP 파일로 다운로드하거나 GitHub에 연동해 관리할 수 있습니다. 앱에 외부 API나 데이터베이스가 포함되면 별도의 실행 설정이 필요할 수 있습니다.
Q. AI가 만든 앱을 실제 서비스로 운영해도 되나요?
기술적으로 배포할 수 있지만 실제 이용자가 사용하는 서비스는 별도의 검증이 필요합니다. 계산 정확도·개인정보 보호·보안·서버 비용·유지보수 등을 확인한 뒤 운영해야 합니다.
정리
Google AI Studio의 Build 기능을 이용하면 전문 개발 언어를 몰라도 원하는 프로그램을 말로 설명하고 AI가 만든 웹앱을 직접 실행하며 수정할 수 있습니다.
처음부터 복잡한 서비스를 만들 필요는 없습니다. 장보기 계산기나 생활비 관리표처럼 기능이 단순하고 결과를 직접 확인할 수 있는 프로그램부터 시작해보세요.
가장 중요한 것은 앱을 만드는 속도가 아니라 제대로 작동하는지 확인하는 것입니다. 작은 프로그램 하나를 만들어 기능을 테스트하고 수정하는 경험을 쌓으면 필요한 생활용품 관리표나 공부 도구도 자신의 방식에 맞춰 제작할 수 있습니다.
처음부터 복잡한 서비스를 만들 필요는 없습니다. 장보기 계산기나 생활비 관리표처럼 기능이 단순하고 결과를 직접 확인할 수 있는 프로그램부터 시작해보세요.
가장 중요한 것은 앱을 만드는 속도가 아니라 제대로 작동하는지 확인하는 것입니다. 작은 프로그램 하나를 만들어 기능을 테스트하고 수정하는 경험을 쌓으면 필요한 생활용품 관리표나 공부 도구도 자신의 방식에 맞춰 제작할 수 있습니다.
같이 보면 좋은 글
#구글AI스튜디오 #GoogleAIStudio #바이브코딩 #바이브코딩사용법 #무료앱만들기 #AI웹앱 #코딩없이앱만들기 #Gemini #AI프롬프트 #AI도구사용법
댓글목록
등록된 댓글이 없습니다.