Build 기능으로 AI 웹앱 프로토타입 만들기
Build는 아이디어를 앱 모양으로 바꾸는 공간
Google AI Studio의 Build 모드는 Gemini를 이용해 AI 앱을 빠르게 만들고 테스트하는 작업 공간입니다. 코드를 한 줄씩 직접 쓰기보다, 만들고 싶은 앱을 자연어로 설명하면 초기 웹앱 구조를 생성해 줍니다. Google AI Studio 자체가 Gemini API를 빠르게 실험하고 빌드하도록 만든 환경이므로, Build는 "프롬프트를 앱으로 바꾸는 입구"라고 이해하면 됩니다.1
처음 요청할 때는 멋진 문장보다 구체적인 요구가 중요합니다. 다음 다섯 가지를 넣으면 결과가 안정적입니다.
앱의 목적: "냉장고 재료로 저녁 메뉴를 추천한다."
입력값: "재료, 알레르기, 조리 시간, 선호 맛을 받는다."
출력 형태: "레시피 3개를 카드 형태로 보여준다."
화면 구성: "상단 입력 영역, 하단 추천 결과, 저장 버튼을 둔다."
사용할 Gemini 기능: "사용자 조건을 분석해 이유와 함께 추천한다."
예를 들어 이렇게 시작할 수 있습니다.
냉장고 재료를 입력하면 30분 안에 만들 수 있는 한식 저녁 메뉴를 추천하는 웹앱을 만들어줘. 입력값은 재료, 못 먹는 음식, 조리 가능 시간이고, 출력은 메뉴명·필요 재료·조리 순서·추천 이유를 카드 UI로 보여줘. 모바일에서도 보기 쉽게 만들어줘.
예제 앱을 리믹스하는 방식
처음부터 빈 화면에서 시작하지 않아도 됩니다. Build에는 레시피 생성기, 코드 리뷰 도구, 텍스트 게임 같은 템플릿이나 예제 앱을 기반으로 시작하는 흐름이 있습니다.2 좋은 예제를 고른 뒤 "이 앱을 여행 플래너로 바꿔줘", "코드 리뷰 기준을 보안 중심으로 바꿔줘", "문서 요약 결과를 표와 체크리스트로 나눠줘"처럼 요청하면 됩니다.
리믹스할 때는 기능 이름만 바꾸지 말고 사용자의 상황을 바꿔야 합니다. "여행 플래너"라고만 쓰면 평범한 일정표가 나옵니다. "부모님과 2박 3일 부산 여행, 걷는 시간은 하루 2시간 이하, 맛집보다 휴식 중심"처럼 조건을 넣으면 앱의 입력창과 결과 화면도 더 쓸 만해집니다.
Advanced settings로 코드 방향 정하기
Build가 마음대로 코드를 만들게 두기보다, Advanced settings에서 기본 방향을 정하면 수정 시간이 줄어듭니다. 코드 생성에 사용할 모델을 선택하고, 시스템 지침으로 앱의 말투와 설계 원칙을 지정할 수 있습니다. 예를 들어 "초보자도 이해할 수 있는 문구를 사용한다", "오류가 나면 사용자가 고칠 수 있는 안내를 보여준다", "결과는 항상 근거와 함께 제시한다" 같은 규칙을 넣습니다.
템플릿도 중요합니다. 기본적으로 React와 TypeScript 기반 구성을 활용하면 컴포넌트 단위로 화면을 나누기 좋고, 나중에 개발자가 이어받아 수정하기도 쉽습니다. React는 화면을 작은 조각으로 나눠 만드는 방식이고, TypeScript는 JavaScript에 타입 검사를 더해 오류를 줄이는 방식입니다. 코딩 경험이 적다면 이 용어를 몰라도 괜찮습니다. 다만 "나중에 수정 가능한 구조로 만들어줘"라고 요청하면 Build가 더 정돈된 형태로 작성할 가능성이 높습니다.
미리보기에서 고치고 다시 대화하기
앱이 생성되면 바로 완성품으로 보지 말고 미리보기에서 흐름을 점검합니다. 입력창에 실제 값을 넣어 보고, 버튼을 눌러 보고, 빈 값이나 이상한 값을 넣었을 때 오류 메시지가 나오는지 확인합니다. AI 앱은 화면보다 응답 품질이 더 중요하므로, 같은 입력을 여러 번 실행해 결과가 일관적인지도 봐야 합니다.
수정 요청은 한 번에 많이 하지 않는 편이 좋습니다.
"결과 카드에 예상 조리 시간을 추가해줘."
"알레르기 입력값이 비어 있으면 '없음'으로 처리해줘."
"추천 이유가 너무 길어. 두 문장 이내로 줄여줘."
"모바일 화면에서 버튼이 아래로 밀리지 않게 정리해줘."
이렇게 작은 단위로 고치면 어떤 변경이 문제를 만들었는지 추적하기 쉽습니다. Build와의 대화는 개발자에게 수정 요청을 보내는 과정과 비슷합니다. 차이는 결과를 몇 분 안에 다시 실행해 볼 수 있다는 점입니다.
AI Studio 안의 실행과 외부 배포의 차이
프로토타입이 쓸 만해지면 소스 코드나 ZIP 파일을 내려받아 로컬 브라우저 또는 로컬 개발 서버에서 실행할 수 있습니다. 일부 정적 화면은 Netlify, Vercel, Firebase Hosting 같은 서비스에 올려 보여줄 수 있습니다. 단, 여기서 중요한 차이가 있습니다. AI Studio 안에서 실행하는 것은 실험과 검증에 가깝습니다. 공유 링크로 보여줄 수는 있지만, 정식 서비스처럼 도메인, 권한, 비용, API 키 보안을 모두 관리하는 단계는 아닙니다.
외부 배포는 앱을 실제 웹사이트처럼 운영하는 단계입니다. React·TypeScript 앱은 보통 빌드 과정이 필요하고, Gemini API 키는 브라우저 코드에 직접 넣지 않는 것이 안전합니다. 단순한 안내 페이지라면 정적 호스팅만으로 충분할 수 있지만, 사용자가 입력한 내용을 Gemini API로 보내는 앱이라면 서버나 서버리스 함수를 중간에 두는 구조가 필요합니다. 사용자는 내 앱의 API 엔드포인트를 호출하고, 서버가 Gemini API를 대신 호출한 뒤 결과만 돌려주는 방식입니다.3
Build의 목적은 완벽한 제품 출시가 아닙니다. 아이디어가 실제로 쓸모 있는지 빠르게 확인하는 것입니다. 먼저 작동하는 작은 앱을 만들고, 미리보기에서 사용자 흐름을 검증한 뒤, 필요한 경우 코드 다운로드와 안전한 배포 단계로 넘어가면 됩니다.
참고
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.