도구를 선택하는 사람에서, 도구를 만드는 사람으로

Stich와 Gemin App Build로 빠른 프로토타이핑 만들기

Stitch로 UI를 만들고, Gemini App Build로 바로 앱을 구동하는 흐름. 프롬프트만으로 디자인을 만들고, 실제 동작하는 애플리케이션으로 이어지는 새로운 개발 경험을  확인해보세요.

업무 중 틈틈이 구글 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페이지에서는 맨위에는 오늘의 날짜와 온도/날씨등의 정보 표시(카드형식)