Stich와 Gemin App Build로 바이브 코딩
이제 UI/UX를 디자인하고 바로 실행 어플로 고고~
업무 중 틈틈이 구글 Gemini App Build를 활용해 실무에 필요한 기능들을 직접 만들어보고 있는데요. 막상 Gemini App Build만으로 애플리케이션을 구현하다 보면 기능적으로 코드는 비교적 수월하게 작성되지만, UI/UX를 원하는 형태로 완성하기 위해 알맞은 프롬프트를 구성하는 일이 생각보다 쉽지 않아 종종 한계를 느끼곤 합니다. “좀 더 편하게 UI를 만들 수 있는 방법이 없을까?” 하는 고민을 하던 중, 최근 구글에서 AI 기반 UI 디자인 서비스 ‘Stitch(스티치)’의 결과물을 Gemini App Build와 연동하여 기능 개발까지 이어갈 수 있는 내보내기 기능을 새롭게 지원한다는 반가운 소식을 접했는데요. 덕분에 이제 Gemini App Build에서 더욱 완성도 있는 애플리케이션을 만들 수 있게 되었습니다. 오늘은 이 두 가지 구글 서비스를 연동하여 별도의 코드 작성 없이 필요한 서비스나 애플리케이션을 간단하게 만들어보는 방법을 소개해드리려고 합니다.
구글의 Stitch는 디자이너가 직접 개발에 참여하지 않아도 UI/UX 화면을 시각적으로 설계할 수 있는 노코드 인터페이스 디자인 도구입니다. 원하는 애플리케이션이나 웹 화면을 프롬프트로 설명하기만 하면 빠르고 쉽게 시각적 결과물을 만들어낼 수 있습니다. Stitch는 인터페이스 디자인을 위해 세 가지 모드(Rapid, Pro, Redesign)를 제공합니다.
Rapid 모드: Gemini Flash 기반으로 빠르게 디자인 시안을 생성하며, 결과물을 Figma로 내보낼 수 있습니다.
Pro 모드: Gemini Pro를 활용해 이미지와 HTML을 함께 생성하고, 완성된 결과물을 Gemini App Builds로 직접 내보낼 수 있습니다.
Redesign 모드: 기존 사이트나 애플리케이션의 디자인 이미지를 업로드하면, 이를 Nano Banana Pro 모델로 새롭게 재디자인해 최종 결과물을 만들어 볼 수 있습니다.
이제 Stitch의 Pro모드를 사용해서 Gemini App Build와 연동을 통해 디자인과 기능 구현의 간극을 줄이고, 더욱 빠르게 원하는 서비스를 만들어 볼 수 있게 되었습니다.
예시 어플리케이션으로 할일 관리를 위한 모바일 어플리케이션을 만들기 위해 아래와 같이 프롬프트를 입력하고, Stich에서 디자인을 생성했습니다.
할일 관리를 위한 애플리케이션의 UI/UX어플리케이션을 생성해 주세요.
- 모바일 어플리케이션에 최적화
- 모바일 메뉴와 모바일 패널등이 지원
- 캘린더가 표시되며, 선택 시 오늘의 날짜가 표시
- 캘린더에 할일이 등록되어 있다면, 날짜 숫자 아래에 dot등으로 표시
- day기준으로 할일들을 등록하고 관리할 수 있는 기능제공
- day페이지에서는 맨위에는 오늘의 날짜와 온도/날씨등의 정보 표시(카드형식)
- day페이지에서 새로운 할일등록이 지원/할일 삭제/할일 표시 지원/할일에 대한 체크박스 지원
- 할일 등록 시, 할일의 제목, 할일의 내용, 수행상태(backlog,ready,doing,done), 완료일 지정 가능
- 모바일 어플리케이션 하단에 빠른 이동을 위한 메뉴바 지원
- 페이지간 이동은 상단의 "뒤로가기" 버튼으로 이동
- 최신의 UI/UX스타일을 반영해서 심플하면서 핵심기능들이 잘 배치되도록 구성
프롬프트의 요청 사항에 맞추어, 아래 그림처럼 캘린더와 연동된 일자별 할 일(To-do)을 만들고 볼 수 있는 기능들이 잘 구현되었습니다. 전체적인 할 일 관리 UI/UX도 기본 구조가 깔끔하게 구성되어 있어, 실제 사용을 위한 인터페이스가 잘 만들어졌음을 확인할 수 있었습니다.
디자인된 결과물을 살펴보니, 할일을 생성하고 관리하는 기본적인 기능들 이외에 어플리케이션이 실제 동작한다면 로딩 시에 표시될 애플리케이션 화면과 이름도 필요해 아래와 같이 추가적인 프롬프트를 작성하고 요청했습니다.
애플리케이션의 로딩 시 표시되는 스플래시 이미지를 추가해 주세요.
두 개의 스플래시 이미지가 생성되었고, 이 중 오른쪽 화면의 스플래시 이미지를 최종 선택하여 애플리케이션 개발에 사용할 세 개의 화면 구성을 확정했습니다. 필요에 따라, 어플리케이션에 활용할 추가 이미지를 프롬프트로 새롭게 생성하거나, 기존 생성 이미지의 세부 요소들을 수정하는 것도 가능합니다.
최종적으로 사용할 이미지를 모두 선택한 뒤, 상단의 “…” 메뉴를 클릭하고 나타나는 항목 중 “내보내기”를 선택하면, 선택한 이미지들을 압축파일로 다운로드하거나 Gemini App Build로 직접 내보낼 수 있습니다. 이후 Export 메뉴에서 “AI Studio”를 선택하고 하단의 “AI Studio로 빌드” 버튼을 클릭하면, Gemini App Build 사이트로 자동 이동하며, Stitch에서 생성한 이미지와 HTML 문서가 모두 Gemini App Build의 프롬프트 창에 업로드됩니다. 마지막으로 “Build” 버튼을 클릭하면, 업로드된 이미지와 HTML 문서를 참조하여 본격적으로 애플리케이션 생성 과정이 시작됩니다.
할일 관리 애플리케이션에서 기본적으로 필요한 스플래시 이미지, 캘린더, 할일을 추가할 화면까지 모두 생성되었습니다. Stich에서 이미지만으로 보왔던 모습이 이제 기능적으로 동작하는 애플리케이션으로 바뀌어 실행되니 엄청 신기하기도 하고 정말 빠르게 아이디어를 애플리케이션으로 만들 수 있겠다는 생각도 많이 들었네요.
그런데 막상 실행을 해보니, 페이지간의 정보 표시 방식과 흐름등도 수정이 필요하고, 동작이 제대로 되지 않은 부분들이 있어 바로 아래와 같이 몇가지 추가 요청사항들을 담아 프롬프트를 작성하고 Gemini App Build에서 추가적인 코드 수정과 변경을 요청했습니다.
아래의 변경사항들을 참조하여, 코드를 올바르게 수정하고 변경해 주세요.
1. 스플래시 화면이 먼저 표시되고, 몇 초 후에 오늘 날짜의 할일을 알려주는 화면이 표시되도록 해주세요.
2. 메뉴아이콘을 클릭하면 동작하지 않습니다. 캘린더를 볼 수 있는 화면으로 이동하는 메뉴와 오늘 날짜의 할일 화면에 표시되는 메뉴항목을 추가하여 주세요.
3. 테마모드로 light mode/dark mode 선택을 할 수 있는 메뉴도 추가하여 주세요.
프롬프트의 수행에 따른 변경된 애플리케이션의 모습은 아래와 같습니다. 요청한 사항들이 잘 반영되어 수정이 이루어졌고, 잘 동작하는 것을 확인할 수 있었네요.
그리고, Gemini App Build에서는 반응형 앱이 지원되어 위의 모습처럼 전체 화면으로 표시되는 모습 이외에도 모바일 환경에 맞게 화면의 크기를 변경하여 어떻게 모바일에서 보이는지도 아래와 같이 확인이 가능합니다.
이처럼 Stitch에서 프롬프트만으로 UI/UX를 디자인한 뒤, 생성된 화면과 HTML을 Gemini App Build에 그대로 연동해 즉시 동작하는 할 일 관리 애플리케이션으로 전환해보는 경험은, 단순한 ‘디자인 도구’의 활용을 넘어 아이디어 → 디자인 → 실제 앱 출시까지 한 번에 이어지는 Vibe Coding의 현실적 적용 가능성을 체감한 시간이었습니다. 특히 UI/UX가 이미 디자인된 상태에서, 필요한 기능을 추가하고 정상적으로 동작하도록 프롬프트를 입력하며 생성된 코드를 수정·보완해 가는 방식은 Gemini App Build안에서 UI/UX와 기능 구현을 동시에 처리하던 기존의 개발 방식과는 완전히 달랐는데요. 이러한 새로운 워크플로우에 익숙해지기 위해 더 많이 사용해보며 적응해 나가는 과정이 필요할 것 같다는 생각이 들었습니다.
개인적으로 그동안 Gemini App Build만으로는 UI/UX 요소를 고려한 실제 기능 구현 과정에서 많은 제약과 어려움이 있었는데, 이제 Stitch와의 연계 기능 덕분에 이제 디자인과 구현 간의 간극을 확연히 줄이고 개발에 좀더 집중해서 기능 구현의 효율이 높일 수 있을 것 같아 앞으로 기대가 크네요. 업무나 일에 필요한 나만의 기능들을 탑재한 앱을 빠르게 Vibe Coding 방식으로 개발해보고 싶으시다면,오늘 소개해드린 Stitch로 UI/UX를 설계하고 Gemini App Build로 기능을 구현하는 방식을 꼭 한 번 시도해보세요. 평소 생각하고 있던 머릿속 아이디어가 더 이상 ‘구상’에만 머물지 않고, 눈 앞에서 실행되는 멋진 기회를 만들어 보실 수 있을 것 같네요.
