AI가 UI를 만든다: 구글 스치티(Google Stitch) 기능·활용법·실전 프롬프트 안내

목차

• 1. 구글 스치티: AI 기반 UI 디자인 시대의 서막
• 2. 스치티의 핵심 기능: 디자인 프로세스의 패러다임 전환
• 3. 스치티 실전 활용 가이드: AI와 함께 UI 만들기
• 3-1. 바로 써먹는 실전 프롬프트 예시 모음
• 4. 구글 AI 생태계 속 스치티: 미래 워크플로우의 청사진
• 5. 결론: 구글 스치티가 그리는 디자인의 미래
• 6. 전문가용 분석: 스치티의 기술 구조와 생성형 UI의 미래

1. 구글 스치티: AI 기반 UI 디자인 시대의 서막

구글 스치티는 Google I/O 2025에서 공개된 AI 기반 UI/UX 디자인 도구로, 제미나이(Gemini 2.5 Flash 및 2.5 Pro)를 기반으로 작동합니다. 단순 목업 생성기를 넘어서 ‘생성형 UI(Generative UI)’라는 개념을 실험하는 도구로, 텍스트 프롬프트만으로 화면 전체 구조와 스타일을 한 번에 만들어 줍니다.

사용자는 “이런 서비스의 메인 페이지를 만들어줘”라고 말하듯 요청하고, 스치티는 그에 맞는 레이아웃, 컴포넌트, 색감, 심지어 코드를 자동으로 제안합니다. 덕분에 디자이너는 ‘처음부터 다 그리는’ 일을 줄이고, ‘여기서 무엇을 더 개선할지’에 집중할 수 있게 됩니다.

2. 스치티의 핵심 기능: 디자인 프로세스의 패러다임 전환

구글 스치티는 “AI가 UI를 만든다”는 말을 현실로 만들어 주는 여러 기능을 제공합니다.

• AI 기반 UI 자동 생성: 자연어, 스케치, 기존 화면 스크린샷을 입력하면 레이아웃과 컴포넌트를 조합해 새로운 UI를 만들어 줍니다.
• 프론트엔드 코드 자동 생성: 생성된 화면을 HTML/CSS 코드로 바로 추출하거나, Figma로 내보내 개발·디자인 간 간극을 줄입니다.
• 프로토타이핑 가속: 여러 버전의 시안을 빠르게 만들어 비교·검토할 수 있어 아이디어 검증 속도가 빨라집니다.
• 디자인 민주화: 전통적인 디자인 툴에 익숙하지 않은 사람도, 프롬프트만으로 꽤 완성도 있는 화면을 만들 수 있습니다.
• 사용자 맥락 반영: 다크 모드, 모바일·웹 반응형 구조 등 목표 환경을 프롬프트에 명시하면 그에 맞는 UI를 구성해 줍니다.
• 듀얼 모드 제공:
  • 일반 모드 (Gemini 2.5 Flash): 빠른 UI 초안 생성에 최적화되어 월 350회까지 생성할 수 있고, 아이디어 스케치에 적합합니다.
  • 실험 모드 (Gemini 2.5 Pro): 더 정교한 디테일, 미니멀하고 세련된 스타일을 구현하는 데 강점을 보이며 월 50회 사용 가능합니다.

3. 스치티 실전 활용 가이드: AI와 함께 UI 만들기

스치티를 잘 쓰는 핵심은 “어떻게 말하느냐”, 즉 프롬프트입니다. 막연하게 “예쁜 화면 만들어줘”라고 하기보다, 목적 · 타깃 사용자 · 기기 종류 · 분위기 · 포함하고 싶은 요소를 구체적으로 적어주면 훨씬 좋은 결과를 얻을 수 있습니다.

기본적으로 다음 네 가지 요소를 섞어 프롬프트를 구성하면 좋습니다.

• 무엇을 위한 화면인지: (예: “중고 전자기기 마켓플레이스 홈 화면”)
• 누가 쓰는지: (예: “20~30대 직장인 대상”)
• 어떤 느낌인지: (예: “애플 스토어처럼 미니멀하고 여백이 넉넉한 스타일”)
• 반드시 들어가야 할 요소: (예: “상단 검색창, 추천 카드, 카테고리 탭, 하단 네비게이션 바”)

실전 사례 1: MCP 마켓플레이스 앱 디자인

예를 들어, “애플 스토어 같은 감각적인 UI로 MCP 마켓플레이스 앱 홈·상세·검색 결과 3페이지를 만들어줘.”처럼 요청하면, 스치티는 카드형 상품 리스트, 하단 탭 바, 깨끗한 화이트 톤 레이아웃 등을 가진 3개의 화면 시안을 한 번에 생성해 줍니다.

이후 “포인트 컬러를 보라색으로 바꾸고, 상단 배너에 프로모션 문구를 넣어줘.”와 같이 수정 사항을 추가로 프롬프트에 적어 반복적으로 다듬을 수 있습니다.

실전 사례 2: 인테리어 회사 홍보 웹사이트 디자인

• 실험 모드 활용: 전체 화면에 넉넉한 여백, 큰 타이틀, 시원한 사진 배치가 중심이 된 미니멀한 랜딩 페이지를 자동 구성해 줍니다.
• 한국어 브랜딩 반영: 회사 이름, 서비스 설명, 고객 후기 섹션 등 한국어 텍스트도 자연스럽게 화면 안에 녹여 줍니다.

3-1. 바로 써먹는 실전 프롬프트 예시 모음

아래 프롬프트들은 그대로 복사해서 스치티에 넣어도 좋고, 서비스 이름만 바꿔 자신의 프로젝트에 맞게 응용해도 좋습니다.

4. 구글 AI 생태계 속 스치티: 미래 워크플로우의 청사진

스치티는 단독 도구라기보다, Google AI Studio, Build, 그리고 개발 에이전트인 Jules와 연결되면서 “디자인 → 코드 → 배포” 전체 과정을 하나의 흐름으로 만드는 퍼즐 조각에 가깝습니다. 앞으로는 디자이너가 스케치 대신 프롬프트를, 개발자가 와이어프레임 대신 AI가 만든 코드 베이스를 출발점으로 삼는 워크플로우가 점점 자연스러워질 가능성이 큽니다.

5. 결론: 구글 스치티가 그리는 디자인의 미래

구글 스치티는 “AI가 UI를 만든다”는 문장을 실제 업무에 가져올 수 있게 해 주는 도구입니다. 프롬프트 기반 생성, 코드 자동화, 프로토타이핑 가속 기능을 통해 디자이너와 개발자가 더 전략적인 사고와 문제 해결에 집중할 수 있는 환경을 만들어 줍니다.

아직은 프롬프트를 한 번에 길게 쓰면 레이아웃이 깨지거나 예측하지 못한 결과가 나오는 등 제약도 있지만, 프롬프트를 잘게 나누고 단계별로 수정해 나가면 충분히 실전에서 사용할 수 있는 수준의 UI를 얻을 수 있습니다. 스치티와 같은 생성형 UI 도구들은 앞으로 “디자인을 잘하는 법”의 기준을 바꿔 놓을 것이고, 프롬프트를 잘 쓰는 사람이 곧 새로운 의미의 ‘디자이너’가 되는 시대가 올지도 모릅니다.

6. 전문가용 분석: 스치티의 기술 구조와 생성형 UI의 미래

이제부터는 현업 디자이너·프론트엔드·프로덕트 오너 관점에서 본 스치티의 기술적·전략적 의미를 짚어봅니다. 입문용 소개를 넘어, “왜 이 도구가 산업 구조를 바꿀 수 있는가”에 초점을 맞춥니다.

6-1. UI 언어 모델(UILM) 관점에서 본 스치티

스치티는 단순한 “디자인 생성기”가 아니라, 사실상 UI 언어 모델(UILM: UI Language Model)을 실험하는 플랫폼에 가깝습니다. 제미나이는 텍스트·이미지·코드·레이아웃을 동시에 처리할 수 있기 때문에, UI를 다음과 같은 세 층으로 나누어 이해합니다.

• 구조 레이어: 헤더, 내비게이션, 메인 콘텐츠, 카드, 그리드 등 UI의 뼈대를 인식
• 시각 레이어: 색상 대비, 여백, 타이포그래피, 그림자 깊이 등을 종합해 분위기 구성
• 코드 레이어: 시멘틱 HTML, CSS, 반응형 패턴으로 바로 투영 가능한 구조 생성

이 때문에 스치티가 만든 시안은 “포토샵스러운 그림”이 아니라, 실제 코드와 개발 흐름을 전제로 한 UI에 더 가깝습니다.

6-2. 제미나이 모델이 UI 생성에 강한 이유

• 공간 추론(Spatial Reasoning): UI는 2D 레이아웃 문제인데, 제미나이는 박스 간 거리와 정렬, 계층 구조를 잘 이해합니다.
• 디자인 시스템 학습: Material Design, iOS HIG, Tailwind 패턴 등 공개된 UI 레이아웃들을 대량 학습해 스타일 맥락에 강합니다.
• 코드 연결 능력: “이런 화면”이라는 개념을 바로 HTML/CSS 구조로 매핑해낼 수 있어 디자인과 코드 사이의 손실이 줄어듭니다.

6-3. 디자인·프론트엔드 직무에 생길 변화

• 디자인 초기 80% 자동화: 레퍼런스 수집, 와이어프레임, 1차 시안이 대부분 자동화되고, 디자이너는 브랜드·경험 설계에 집중하게 됩니다.
• 프론트엔드 역할 이동: 마크업·스타일링 비중이 줄어들고, 상태관리·성능·접근성·도메인 로직이 핵심 역할이 됩니다.
• 프로덕트 팀 협업 구조 재편: “기획 → 와이어 → 디자인 → 개발” 직선 구조에서 “기획+디자인이 AI로 시안 생성 → 개발이 바로 기능 구현” 구조로 바뀔 가능성이 큽니다.

6-4. 전문가가 주의해야 할 한계와 제약

• 프롬프트 과부하: 한 번에 너무 많은 요구사항을 넣으면 레이아웃이 무너질 수 있어 단계적 요청이 필요합니다.
• 디자인 시스템 일관성: 긴 프로젝트에서 컴포넌트 일관성을 유지하려면 여전히 사람의 정리·관리 작업이 요구됩니다.
• Figma와 1:1 일치 아님: 스치티 → Figma 전환 과정에서 구조 차이가 조금씩 발생할 수 있습니다.
• AI의 ‘과한 자신감’: 항상 “좋아 보이는” 답을 내놓기 때문에, 경험 많은 디자이너의 최종 판단이 필수입니다.

6-5. 전문가용 프롬프트 패턴 요약

실제 현업에서 스치티를 도입할 때는, 프롬프트를 “요구사항 명세서”처럼 구조화해서 쓰는 것이 좋습니다.

• 레이아웃 중심: “목적 · 핵심 섹션 · 반응형 제약 · 헤더/메인/푸터 구조”를 명시
• 디자인 시스템 기반: 색상 토큰, 타이포 스케일, 컴포넌트 규칙을 먼저 선언
• 반복 생성: “이전에 만든 카드 스타일을 유지한 채 목록 화면으로 확장해줘”처럼 연속성을 요구
• 접근성 기준: WCAG, 대비비, 터치 타겟 크기를 프롬프트에 직접 적시

6-6. 한 줄로 정리하는 전문가 관점의 스치티

스치티는 “디자인을 대체하는 AI”가 아니라, 디자인·프론트엔드 워크플로우에서 반복 작업 70%를 걷어내고, 사람에게 더 어려운 문제를 맡기는 AI에 가깝습니다. 결국 중요한 것은 “어떤 프롬프트로, 어떤 기준을 가지고, 무엇을 남겨둘 것인가”를 결정하는 사람의 역량입니다.

이 글이 마음에 드세요?

RSS 피드를 구독하세요!