구글 스티치Stitch가 만드는 UI 디자인의 신세계
Google이 2025년 자사의 연례 개발자 회의(I/O)에서 공개한 ‘Stitch’는 UI 디자인에 생성형 AI를 접목한 혁신적인 도구다. Stitch는 Google Labs를 통해 제공되며, Gemini AI 모델과의 긴밀한 통합을 통해 UI 디자인의 구상부터 구현까지 대부분 단계를 자동화할 수 있는 것이 가장 큰 특징이다. 전문 UI/UX 디자이너들에게 생산성의 도약을 제공하는 한편, 초보 디자이너나 일반인도 몇 줄의 설명만으로 앱 UI를 만들어볼 수 있을 정도로 사용이 직관적이다. Stitch가 어떻게 작동하며 기존 워크플로우를 어떻게 변화시키는지, 그리고 구글이 이 도구를 통해 지향하는 미래의 디자인 생태계는 어떤 모습일지 알아보자. 사실 Stitch는 구글이 갈릴레오(Galileo AI)를 인수하여 업데이트하고 있는 서비스다. 갈릴레오 AI를 이미 사용해본 분들은 인터페이스와 사용방법이 매우 익숙할 것이다.
Stitch의 주요 기능
Stitch가 제공하는 주요 기능들은 UI 디자인 과정의 모든 단계를 포괄하도록 설계되었다. 사용자는 막연한 아이디어 단계에서 Stitch의 AI를 활용해 손쉽게 시각적 디자인을 얻어내고, 필요하다면 그 결과물을 개발 단계로 즉시 넘길 수 있다. 구체적으로 Stitch의 핵심 기능은 다음과 같다.
첫째, 자연어 설명만으로 UI 생성이 가능하다. 예를 들어 사용자가 “포토 라이브러리 앱을 디자인해줘. 슬라이더바와 라이브러리에 디테일뷰를 보여주는 사용자경험을 포함해” 같은 요구사항을 텍스트로 입력하면, Stitch는 해당 설명을 이해하여 UI 화면을 그려낸다. 배경색이나 폰트 스타일, 배치 등의 디테일도 사용자가 언급하면 반영되며, 추가로 요구하지 않은 부분은 AI가 일반적인 디자인 원칙과 문맥을 고려해 적절히 채워 넣는다. 사용자가 상상으로만 갖고 있던 앱 화면을 문자로 설명하면, 곧바로 눈으로 볼 수 있는 구체적인 UI로 만들어준다는 점에서, 이 기능은 특히 비전문가나 디자인 경험이 부족한 사람들에게도 큰 힘이 된다.
Stitch를 통해 생성된 여행 애플리케이션 UI 예시다. 사용자가 자연어로 “알프스 스키를 좋아하는 사람들을 위한 앱을 만들어 주세요”을 요청한 경우를 가정한 결과 화면으로, AI가 해변, 국립공원 등 카테고리별 여행지 목록과 대표 이미지 배너 등을 포함한 직관적인 인터페이스를 만들어낸 것을 볼 수 있다. 이러한 고품질의 UI 시안을 디자이너가 일일이 손으로 그리지 않고도 얻을 수 있다는 점에서 Stitch의 생산성 향상 효과를 확인할 수 있다.
둘째로 디자인 결과물의 개발 단계 연계가 손쉽게 이루어진다. Stitch에서 생성된 UI에 만족하면 이를 바로 실제 앱 제작에 활용할 수 있도록 내보낼 수 있는데, 두 가지 방식이 있다. 하나는 Figma로 복사(Paste to Figma)하는 기능으로, Stitch가 만든 디자인 레이아웃을 그대로 Figma에 붙여넣을 수 있다. 전문 디자이너나 팀 작업에서는 Figma와 같은 툴에서 세부 디테일을 다듬고 디자인 시스템과 통합하는 경우가 많기 때문에, 이 기능을 통해 AI 생성 디자인을 기존 워크플로우에 자연스럽게 편입시킬 수 있다.
다른 하나는 프론트엔드 코드로 내보내기(Export front-end code) 기능으로, Stitch가 생성한 UI를 곧바로 실행 가능한 코드 형태로 출력해준다. 웹 애플리케이션의 경우 HTML/CSS 형태의 마크업 코드를 제공하며, 이 코드는 사람이 일일이 작성한 것처럼 깔끔하고 기능적으로 동작 가능한 수준으로 생성된다. 이를 개발자가 받아서 바로 프로젝트에 적용하거나, 필요한 로직만 추가하면 완성품에 가까워진다. 요컨대 Stitch에서 디자인한 화면을 그대로 앱으로 옮길 수 있는 다리가 마련된 셈이다. 이처럼 디자인 산출물을 Figma 디자인 파일이나 실제 코드로 즉각 활용할 수 있기 때문에, 디자인과 개발 간의 간격을 크게 좁혀주는 것이 Stitch의 핵심 능력이라 할 수 있다.
Gemini와의 통합: 멀티모달 AI가 구현한 자동화
Stitch의 기술적 토대에는 구글의 최첨단 AI 모델인 Gemini가 자리하고 있다. Gemini는 구글이 자체 개발한 대규모 생성형 AI 모델로, 텍스트는 물론 이미지까지 이해하고 생성할 수 있는 멀티모달(Multimodal) 역량을 갖춘 것이 특징이다. Stitch는 바로 이 Gemini 모델의 강력한 기능들을 활용하여, 앞서 언급한 텍스트 설명 해석, 이미지 스케치 인식, UI 코드 생성과 같은 복잡한 작업들을 수행한다.
예를 들어 사용자의 자연어 요구사항을 이해하고 거기에 맞는 UI 레이아웃을 만들어내는 일은 대규모 언어 모델(LLM)의 문맥 이해 및 생성 능력이 필수인데, Stitch의 엔진 역할을 하는 Gemini가 이 부분을 담당한다. 또한 사용자가 업로드한 와이어프레임 스케치를 시각적으로 분석하는 데에는 컴퓨터 비전 능력이 필요한데, 이 역시 Gemini의 이미지 인식 능력을 통해 가능해졌다. 이렇게 한 가지 AI 엔진이 언어와 이미지를 모두 다룰 수 있으므로, Stitch는 하나의 통합된 AI 플랫폼 안에서 디자인과 개발 두 세계를 모두 아우르는 작업을 해낼 수 있다.
특히 Stitch는 Gemini 2.5 Pro 모델의 능력을 적극 활용하고 있다. Gemini 2.5 Pro는 2025년 시점의 최신 버전으로, 텍스트-이미지 멀티모달 처리와 코드 생성까지 가능한 거대 모델이다. Stitch 개발팀은 “Gemini 2.5 Pro의 멀티모달 기능을 활용해 디자인-개발 간 워크플로우를 더욱 유연하고 통합적으로 만들었다”고 밝히고 있다. 쉽게 말해, 예전에는 분절되어 있던 디자인 작업과 개발 작업을 하나의 AI 두뇌가 연속적인 흐름으로 이해하고 처리하게 되었다는 의미다. 디자인 단계에서 생성된 결과를 동일한 맥락에서 코드로 변환할 수 있으므로, 디자인과 코드 사이의 어긋남이나 손실을 최소화할 수 있다.
사용 예시: Stitch로 UI 디자인하기
그렇다면 Stitch를 이용한 실제 디자인 과정은 어떻게 이루어질까? 간단한 사용 예시를 통해 살펴보자. 가령 피자 서비스 관련 디자이너가 “수제 피자 클래스 랜딩 페이지”를 기획한다고 가정하자. 디자이너는 Stitch 인터페이스에서 새 디자인을 시작하고, 해당 앱의 콘셉트를 한두 문장으로 입력한다: “나폴리에서 1년에 한 번 열리는 수제 피자 요리 엘리트 클래스 랜딩 페이지 만들기.” 그리고 웹(web) 옵션을 선택한 뒤 “Generate designs” 버튼을 누른다.
몇 초 내지 수십 초 후, Stitch는 AI를 통해 해석한 요구사항에 부합하는 여러 개의 화면 시안을 제시한다. 하나의 예시 화면에는 상단에 “Napoli Pizza Elite”라는 제목과 멋진 피자를 만드는 요리사의 배너가 있고, 콘텐츠 필드에는 Dough Perfection, Traditional Techniques, Baking Mastery 등 카테고리 카드들이 깔끔한 그리드 형태로 배치되어 있다. Stitch는 이렇게 한 번의 요청에 대해 다양한 디자인 해석 결과를 보여주므로, 디자이너는 즉석에서 여러 방향성을 검토할 수 있다. 마음에 드는 시안이 있으면 상세 화면을 클릭해 더 큰 해상도로 확인하고, 필요에 따라 세부 요소를 수정할 수도 있다. 예컨대 어떤 시안에서 글자 가독성이 떨어진다면 프롬프트 입력 창을 통해 폰트 크기를 키우거나 색상을 변경하도록 AI에게 지시할 수 있다.
실제 구글이 Stitch를 시연한 예를 보면, 보드 게임 클럽 플래너를 위한 반응형 모바일 UI라든가 직원 피드백 대시보드 UI 같은 서로 다른 유형의 프로젝트 두 가지를 거의 즉석에서 만들어내는 모습이 공개되었다고 한다. 입력된 몇 문장의 설명에 따라, 하나는 세련된 느낌의 게임 클럽 관련 모바일 인터페이스가 생성되고, 다른 하나는 데이터 테이블과 차트가 어우러진 직원 피드백 관리용 웹 대시보드 화면이 만들어졌다. 이 데모는 Stitch가 웹/모바일을 막론하고 다양한 분야의 UI 디자인에 적용 가능하며, 반응형 디자인(모바일/데스크톱 대응)도 대응할 수 있음을 보여준 사례다. 사용자는 이렇게 생성된 결과물들을 출발점으로 삼아, 추가 편집을 하거나 재생성을 요청하면서 초기 디자인을 완성 단계까지 빠르게 끌어올릴 수 있다.
디자인 수정 과정은 기존의 디자인 툴에서 하던 방식과는 사뭇 다를 수 있다. Stitch에서는 AI에게 수정 지시를 내리는 형태로 디자인을 조정하는데, 앞으로는 이 방식이 더욱 직관적으로 발전할 전망이다. 구글은 I/O 발표 후속으로, “디자인 일부를 스크린샷으로 찍고 거기에 원하는 수정 사항을 주석으로 달아 제출하면 AI가 해당 요소를 변경해주는 기능”을 곧 도입할 예정이라고 밝혔다. 예를 들어 Stitch가 만든 화면 중 버튼 하나를 다른 모양으로 바꾸고 싶다면 그 버튼을 캡처하고 “이 버튼을 원형 아이콘 형태로 바꿔줘”라고 적는 식이다. 그러면 AI가 이미지를 보고 맥락을 이해하여 실제 디자인을 수정해준다는 것이다. 이러한 기능은 마치 디자이너가 동료와 화면 캡처에 빨간 펜으로 코멘트를 주고받으며 수정하는 작업을 AI와 하는 것처럼 만들어, 사람에게 익숙한 방식으로 AI 활용을 극대화하려는 시도로 볼 수 있다. 이처럼 Stitch는 사용자 친화적인 인터페이스를 통해 전문가건 초심자건 편하게 AI와 협업하며 디자인하도록 설계되어 있다.
모든 수정 작업을 마치고 원하는 디자인이 확정되면, 앞서 소개한 대로 Stitch에서 “Figma로 복사”하거나 “코드로 내보내기”를 실행하면 된다. 예컨대 UI 디자이너가 세부 마감을 위해 Figma에서 추가 작업을 하고 싶다면 한 번의 클릭으로 Figma로 모든 레이어와 요소를 붙여넣을 수 있다.
프론트엔드 개발자가 바로 구현을 시작해야 하는 상황이라면 “Export code”를 눌러 HTML/CSS 등의 코드 패키지를 다운로드받아 개발 IDE에서 열어볼 수 있다. Stitch는 생성된 코드가 실제 동작하는 완전한 UI라고 설명하고 있는데, 이는 즉 해당 코드만으로도 기본적인 화면 구성과 요소들의 동작이 구현되어 있다는 의미다. 필요하다면 개발자는 이 코드베이스에 애플리케이션 로직이나 데이터 연동 부분만 추가하여 곧바로 프로토타입 앱을 완성할 수 있을 것이다. 결과적으로 Stitch를 활용한 UI 디자인 과정은 “아이디어 입력 → AI 디자인 생성 및 반복 → 결과 확정 → 코드 추출”로 요약할 수 있고, 이는 전통적인 방법에 비해 압도적으로 신속하고 효율적이다.
기존 워크플로우와의 차별점
Stitch가 가져오는 가장 큰 변화는 UI/UX 디자인과 프론트엔드 개발 사이의 경계를 흐릿하게 만들었다는 점이다. 기존의 워크플로우에서는 기획자가 아이디어를 내면 디자이너가 와이어프레임과 목업(mockup)을 그리고, 완성된 디자인을 다시 개발자가 받아 코드를 작성하는 일련의 선형적인 단계가 필요했다. 각 단계마다 의사소통과 해석이 수반되어야 했고, 디자인 수정이 생기면 개발 단계에서도 그에 맞추어 코드를 재작업하는 등 피드백 반복이 다수 발생했다.
그러나 Stitch를 도입하면 이러한 흐름이 완전히 재편된다. 디자이너와 개발자가 공유하는 AI 보조자가 생긴 것과 같기 때문에, 아이디어를 곧바로 실행 가능한 결과물로 시각화하고, 필요시 코드를 바로 얻어 다음 단계로 넘어갈 수 있다. 디자인 단계와 개발 단계의 경계가 허물어지면서, 한쪽에서의 변경 사항이 곧바로 전체 결과물에 반영될 수 있는 셈이다. 예를 들어 기존에는 디자이너가 “버튼 색을 파란색에서 녹색으로 변경하자”고 하면 개발자가 일일이 해당 색 코드를 찾아 수정해야 했지만, 이제는 Stitch 상에서 색상을 바꾸고 코드를 다시 받으면 그만이다. 팀 내 협업 측면에서도, 모두가 Stitch를 통해 동일한 AI 생성 시안을 보면서 의견을 나누고 즉각 수정 결과를 확인하므로, 의견 전달에 따르는 시행착오가 줄어든다.
또한 Stitch는 UI 디자인의 초안 작업을 비약적으로 가속한다. 전통적으로 디자이너가 백지 상태에서 새로운 인터페이스를 만들 때는 레퍼런스를 찾고, 레이아웃을 스케치하고, 컴포넌트를 일일이 배치하며 스타일을 입히는 데 많은 시간이 걸린다. 초안을 만든 뒤에도 팀 리뷰를 거치며 여러 번 되묻게 된다. 하지만 Stitch를 쓰면 몇 줄의 설명으로 1차 시안을 바로 얻고, 그것도 한 가지가 아닌 여러 가지 버전을 동시에 살펴볼 수 있다. 디자인 탐색(Exploration) 단계가 압축되기 때문에, 더 짧은 시간에 더 다양한 시도를 해볼 수 있으며, 제품 아이디어의 UX를 검증하는 프로토타이핑도 훨씬 손쉽게 이루어진다. 특히 스타트업이나 빠른 실험이 필요한 프로젝트라면, Stitch의 이런 속도는 큰 강점이다.
한편, Stitch의 코드 내보내기 기능은 개발자의 반복 작업을 줄여 생산성을 높이는 효과가 있다. UI 구현에 투입되는 시간과 비용을 절감해주므로, 개발팀은 핵심 로직이나 성능 최적화처럼 보다 부가가치 높은 업무에 집중할 수 있다. 예컨대 어떤 서비스의 프론트엔드 개발자가 “디자인 시안대로 동작하는 웹 페이지를 만들어야 한다”는 할 일을 받았을 때, Stitch에서 이미 완성된 HTML/CSS를 받아 활용한다면 레이아웃과 스타일링에 드는 노력을 상당 부분 아낄 수 있다. 이는 마치 코딩 보조 AI가 코드를 대신 짜주는 코드 자동완성이 개발 워크플로우를 혁신하듯이, 디자인 보조 AI가 UI 구현 단계를 혁신하는 효과라 할 수 있다.
Stitch가 그리는 미래: 구글의 디자인 생태계 혁신
구글이 Stitch를 선보인 것은 단순히 편리한 도구 하나를 추가한 것 이상상의 의미가 있다. 이는 AI 주도형 디자인 생태계로의 전환이라는 더 큰 비전의 일환이다. Stitch의 모토인 “아이디어에서 앱까지(From idea to app)”는 사용자가 번뜩인 발상만 있다면 기술적인 허들을 뛰어넘어 곧바로 제품화할 수 있는 미래를 지향하고 있다. 다시 말해, 아이디어 구현의 민주화가 구글이 꿈꾸는 방향이다. Stitch를 통해 디자인 전문 지식이나 코딩 능력이 없어도 누구나 UI를 만들 수 있게 됐듯이, 구글은 여기에 멈추지 않고 앱 개발의 다른 영역에도 AI 자동화를 확장하고 있다. 예를 들어 Firebase AI 프로젝트에서는 사용자의 요구에 따라 필요한 백엔드 서비스까지 자동으로 구성해주는 실험을 진행 중이며, 코드 분석 및 버그 수정을 도와주는 AI 에이전트인 Jules도 공개되어 개발 업무의 다양한 부분에 AI를 적용하고 있다. 이러한 노력들은 결국 디자인 – 프론트엔드 – 백엔드 – 테스트로 이어지는 전체 소프트웨어 개발 사이클을 AI가 도와주는 통합된 환경을 만들겠다는 큰 그림으로 이어진다.
Stitch가 특히 보여주는 미래는 디자인 작업의 패러다임 변화다. 이제 디자이너는 도구의 기능 범위 안에서 픽셀 단위로 모든 것을 직접 만드는 역할에서 벗어나, AI를 적절히 지휘하며 원하는 결과를 끌어내는 디렉터의 역할에 가까워질 수 있다. 이는 디자인 업계에 새로운 협업 모델(인간 디자이너 + AI)을 정착시킬 것으로 보인다. 반복적이고 규칙적인 디자인 작업은 AI에게 맡기고, 사람은 창의적 판단이나 섬세한 감성 표현에 집중함으로써 인간-AI 협업을 통한 최고 수준의 결과물을 얻어내는 식이다. 구글은 Stitch를 “모두를 위한 앱 제작의 마법”이라고 표현하며 AI가 보조하는 미래형 디자인 프로세스의 가능성을 보여주었다. 이는 전문 디자이너가 더욱 영향력 있게 활약하면서 동시에 일반인도 자신의 아이디어를 직접 구현해볼 수 있는 포용적인 생태계를 의미한다.
요약하면, Google Stitch는 Gemini와 같은 강력한 AI와의 통합을 통해 UI 디자인의 전 과정을 자동화함으로써 디자인과 개발의 경계를 허물고 있다. 이는 디자이너와 개발자 모두에게 새롭고 효율적인 작업 방식을 제시하며, 나아가 누구나 자신의 앱을 만들어낼 수 있는 미래를 앞당기는 기술로 평가된다. 구글은 Stitch를 시작으로 AI가 창의적 프로세스를 보조하는 새로운 생태계를 구축하려 하며, 이를 통해 더 풍부한 UI 디자인 혁신이 일어날 것을 기대하고 있다.
* AI를 활용한 프로덕트/UX/UI 디자인에 대한 다양한 정보와 소통을 원하는 분은 오픈 채팅방에서 함께 많은 디자이너 분들과 만나실 수 있습니다 : )
