바이브 코딩 실력을 높여 줄 Builds의 신규 기능들

Google AI Studio의 업그레이드 따라잡기

그동안 Gemini App Builds를 통해 프롬프트를 기반으로 다양한 어플리케이션들을 설계하과 개발하는 내용들을 소개해드렸는데요. 그동안 Gemini App Builds도 여러가지 기능들이 업그레이드되어 이전과는 다르게 사용성과 편의성이 많이 개선되었는데요. 오늘은 이 내용들을 중심으로 소개해 드리고자 합니다. 바이브 코딩을 더 빠르고 쉽게 수행해볼 수 있어 엄청 많은 도움이 되실 것 같아요.

1. Gemini 3.0 Pro 모델 지원

최근 Google에서 Gemini 3.0이 공개되면서, Gemini App Builds에서도 신규 모델인 3.0 Pro Preview가 지원되기 시작했습니다. 그동안은 2.5 Pro와 2.5 Flash만 사용할 수 있었는데, 최신 모델 탑재로 더 높은 성능의 앱 개발이 가능해질 것 같아요. 특히 3.0 Pro에서는 UI 디자인 이해와 기능 구현 능력이 크게 향상되어, Vibe Coding을 통해 생성되는 애플리케이션의 완성도와 정교함이 이전보다 한층 높아질 것으로 기대됩니다.

모델 선택은 프롬프트 입력 창 아래의 “모델 선택 메뉴”에서 변경할 수 있으며, 우측에 “Advanced settings”가 함께 표시됩니다. 여기에서는 모델 선택뿐만 아니라 애플리케이션 개발을 위한 템플릿(React, Angular) 선택, 그리고 애플리케이션의 동작 논리를 제어하기 위한 시스템 프롬프트 입력도 가능합니다.
또한 음성 입력 기능이 필요한 경우에는 “Microphone selector” 옵션을 활성화해 음성 입력 기반 애플리케이션도 손쉽게 제작할 수 있답니다.

2. I'm feeling lucky

램덤으로 어플리케이션을 위한 아이디어 자동으로 생성해 주는 기능입니다. 어떤 어플리케이션을 개발하면 좋을지 막막하다면, 버튼 클릭을 통해 멋진 어플리케이션 생성을 위한 프롬프트와 필요한 API들이 자동으로 추가됩니다. 이후 "Build"버튼을 클릭하면, 바로 AI기반의 어플리케이션이 생성됩니다. 생성된 어플리케이션의 모습과 기능을 테스트해보면서, 알맞게 프롬프트들을 추가해 빠르게 나만의 어플리케이션을 만들어 볼 수 있답니다.

3. 버전 이력(Version history)

어플리케이션의 버전 관리 기능이 추가되었습니다. 이전까지는 새로운 프롬프트 입력으로 인한 실행 후, 어플리케이션의 오동작이나 레이아웃이 완전히 바뀌는 경우 "되돌리기"기능이 없어서 다시 처음부터 시작하거나 중간에서 "어플리케이션 복사"기능을 활용해서 일종의 브랜치(기존 어플리케이션의 이전버전으로부터 분지하여 업데이트할 버전)를 만들어 사용했는데요. 이제는 이력관리가 되어 이전 버전으로 손쉽게 돌아갈 수 있답니다.

다만, 내부적으로 저장되는 이름의 변경은 되지 않아서 같은 이름으로 변경되는 경우, 원하는 버전으로 되돌아가기 위해서는 입력한 프롬프트의 내용을 확인해 주세요. 저장 시간도 표시되어 시간을 참조해서도 빠르게 이전 버전으로 되돌아갈 수 있답니다. 이 기능의 지원이 변경 내용중에거 가장 반가웠네요.

4. github 리포지토리 연동

Gemini App Builds에서 생성한 코드를 외부에서 서비스하기 위해서 zip형식으로 다운로드 받거나 개발자라면 자신의 작성 코드 관리를 위해서 Github를 사용하실텐데요. Builds에서는 편리하게 Gitub리포지터리 연동기능을 제공합니다.

자신의 계정을 연동하고, 새롭게 리포지토리를 생성하여 언제든지 변경된 코드를 안전하게 Github에 저장하고 사용할 수 있습니다. 저 역시 다른 개발자분과 Github 리포지터리의 collborators 기능을 통해 개발한 코드를 공유하고 협업을 하고 있는데요. 정말 유용하고 코드관리가 편리합니다.

5. 어플리케이션에 주석 추가

Gemini App Builds로 애플리케이션을 개발하다 보면, 텍스트 프롬프트만으로 기능이나 속성 변경 사항을 설명하기 어려울 때가 있습니다. 이런 경우에는 수정이 필요한 화면 영역을 직접 표시하고, 어떤 방식으로 변경해야 하는지 시각적으로 설명할 수 있다면 훨씬 편리한데요. 최근 업데이트를 통해 Gemini App Builds가 이러한 시각적 주석 기반 수정(Annotation) 기능을 공식적으로 지원하기 시작했습니다.

아래 그림처럼 프롬프트 창 아래에 위치한 첫 번째 버튼 “Annotate App”을 클릭하면, 텍스트 박스·사각형·핸드 드로잉 등의 입력 도구가 Preview 영역 하단에 나타납니다. 이를 활용해 애플리케이션 화면에서 수정이 필요한 위치를 직접 표시하고 설명을 덧붙일 수 있습니다. 이렇게 주석이 포함된 이미지를 첨부하거나, 이미지 속 표시된 영역을 기준으로 텍스트 프롬프트에 변경 요청을 입력하면 해당 내용을 기반으로 애플리케이션 코드가 자동으로 수정됩니다.

실제로 애플리케이션 내 세부 기능 수정, 신규 기능 추가, 레이아웃 일부 변경처럼 Preview 화면에서 변경이 필요한 영역을 직접 확인하며 요청해야 하는 상황에서 이 기능은 매우 유용합니다. 화면에 표시된 요소를 그대로 지정해 수정 요청을 전달할 수 있기 때문에 설명 과정이 훨씬 간편해지고, 원하는 결과를 더욱 정확하게 얻을 수 있습니다. 사용하다 보면 Gemini의 이미지 인식 및 분석 능력이 얼마나 뛰어난지 다시 한번 체감하는 기회가 되실꺼에요.

6. Stitch의 디자인 결과물을 바로 Gemini App으로 변환

Google에서는 AI를 활용해 애플리케이션의 UI를 함께 만들어볼 수 있는 서비스인 Stich를 제공하고 있는데요. 기존에는 Stitch에서 완성된 디자인 결과물을 이미지와 HTML 형태로 ZIP 파일로 다운로드하거나, Figma로 직접 내보내기만 지원했는데요. 최근 업데이트를 통해 Jules(Agent 기반 코딩 어시스턴트)나 Google AI Studio로 이미지 및 HTML 파일을 바로 전송해 애플리케이션 개발을 이어갈 수 있도록 기능이 확장되었습니다.

아래 그림에서처럼 “AI Studio로 빌드” 버튼을 클릭하면, Stitch에서 생성한 이미지 또는 HTML 문서가 Google AI Studio와 즉시 연동되며, 애플리케이션 개발을 위한 프롬프트까지 함께 표시되는 것을 확인할 수 있습니다. 이를 통해 디자인에서 실제 애플리케이션 개발 단계로 자연스럽게 이어지는 워크플로우가 구현되었네요.

"build" 버튼을 클릭하면, 일반적인 바이브 코딩으로 어플리케이션을 개발하는 것과 동일하게 코드 생성이 이루어집니다. 기존과 다른 점은 Stich에서 생성된 어플리케이션의 UI 참조 이미지를 기반으로 어플리케이션의 layout과 기능들을 분석하고, 이러한 내용들을 코드 생성에 반영한다는 점입니다. 만들고자 하는 애플리케이션의 모습을 미리 제시해 줌으로써, 실제 결과물이 기대하는 화면과 기능에 더욱 가깝게 구현될 수 있습니다. 이러한 Stitch와 App Builds의 연동은 빠른 프로토타이핑과 제품 개발 과정에서 시간과 노력을 상당히 줄여주는 강력한 장점이 있을 것으로 보입니다.

---

앞서 소개한 Gemini App Builds의 6가지 주요 업데이트만 보아도 앞으로 기능이 계속 확장될 것이라는 기대감을 갖게 합니다. 전문 개발자가 개발 환경(CLI, VSCode, 확장 프로그램 등)을 직접 설치하고 설정하는 방식과 달리, Vibe Coding의 취지에 맞게 더 쉽고 간편한 개발 기능들이 지속적으로 추가된다면 많은 사용자들에게 큰 도움이 될 것 같습니다. 앞으로 어떤 모습으로 Gemini App Builds이 변신할지 기대됩니다.