Google AI Studio - Starter Apps 사용기

(stdy.blog)

(원글에는 시스템 프롬프트, 코드 스니펫과 gif들이 포함되어 있습니다)

Google AI Studio가 업데이트되면서 Gemini를 활용한 다양한 미니 앱들(Starter Apps)을 가지고 노는 공간이 추가됨
10+개의 데모를 코드 수정해가며 실행 가능. 내장된 Gemini API Key를 사용하기 때문에 공짜
- 대신 너무 많이 쓰면 400 에러남. 일일 호출 제한 같은 게 있지 않나 싶음.
- 다른 계정으로 하면 실행 가능

최근 Gemini는 텍스트를 넘어 이미지나 영상도 이해하고 생성하는 멀티모달(multi-modal) 기능과 훌륭한 코딩 능력으로 주목받고 있음.
그러나 대부분은 LLM 챗봇 안에서만 사용되고, 일반인이 API 레벨로 활용하는 일은 많지 않았음
구글은 이런 기능들이 API로도 많이 쓰이면서 돈을 버는 걸 기대하며 이 데모들을 선보인 게 아닐까?
- 모든 데모가 Gemini의 기능들을 코드 레벨로, 다른 구글 API와 엮어가며 어떻게 웹앱으로 구현하면 되는지 보여주는 쇼케이스이기 때문

복잡도 높은 거 2개 살펴봄

유튜브 영상을 Gemini 2.5로 분석하여, 간단한 인터랙티브 교육자료 앱을 바이브 코딩해서 만들어주는 데모
- "인터랙티브 웹앱으로 교육 경험을 만드는 데 전문성이 있는 교육학자이면서 프로덕 디자이너"로서 영상을 분석시키고, 그 웹앱의 스펙을 만들고, 그걸 구현함
샘플 영상은 이미 내용을 분석해놔서 교육자료 앱을 바로 실행해볼 수 있음
파일 몇 개로 된 다른 데모 앱과 달리 React로 구성
Gemini가 만들어준 바이브 코딩용 스펙과 만들어진 코드를 사용자가 모두 수정할 수 있음
영상을 기반으로 한 서비스, 코드를 생성하는 서비스를 만들려는 분들께 추천

지명을 주면 그에 대해 설명해주고, Day Planner Mode를 켜면 하루동안의 여행 계획을 짜주는 데모. 여행에 걸리는 시간도 추산함
General Explorer Mode와 Day Planner Mode 2가지를 하나의 시스템 프롬프트로 지원함
- 유저가 어떤 모드를 선택했는지에 따라 시스템 프롬프트를 미묘하게 바꾸는 게 인상적
지도 데이터를 정확하게 입출력하고, 두 위치 사이의 선을 정확하게 그려주는 함수를 정의하고 Gemini가 호출하게 함
- MCP를 통해 이루고 싶은 게 이런 확장성일 것
프롬프트도 좋지만 지도 API와 위치 데이터를 다루는 방법도 잘 나와있음. 지도 관련 서비스를 만들려는 분들께 추천

데모 앱을 복사해서 커스터마이즈 가능. 처음부터 만드는 사람들을 위한 템플릿도 많이 있음
Explain Things with Lots of Tiny Cats라는 이미지 생성 데모를 복사해서 내 걸 만들어봄
- 개념에 대한 설명을 부탁하면 여러 고양이들의 메타포로 일종의 웹툰을 만들어주는 데모
- 이미지 생성을 계속 하게 만드는 프롬프트(No commentary, just begin your explanation. Keep going until you're done.)와, 그렇게 생성된 이미지를 스트림으로 하나씩 보여주는 코드가 인상적
한글 + 하마 버전으로 바꿔서 하마는 모르는 게 없어요를 만듦
- 구글 폰트에서 적당한 한글폰트를 가져오고, HTML 코드와 프롬프트를 살짝 수정
내 앱을 공유하는 기능이 있지만 잘 작동하지 않음
- 모든 관련 파일이 구글 드라이브에 저장되기 때문에, 그냥 구글 드라이브 가서 파일 공유하는 것처럼 하면 됨

스타터 앱들은 재미있는 웹앱 예제들이었는데 반해 여기에는 다양한 파이썬 예제들이 나와있음
- 몇시간 전 공개된 Gemini 2.5 Flash 예제도 있음
생성형 AI 서비스 만드실 분들이 참고하기에 좋음