UI 디자인을 위한 Google Stitch 활용법
“아이디어에서 앱까지(From idea to app)”는 구글의 AI 기반 UI 생성 도구인 ‘Stitch’가 내세우는 슬로건입니다. 한동안 이 툴을 직접 사용해 보며 한 가지 명확한 사실을 깨달았습니다. Stitch는 단순히 “대신 최종 UI 디자인을 완성해 주는” 툴이 아니라는 점입니다. 그보다는 디자이너가 겪는 ‘빈 캔버스 증후군(blank-canvas problem)’에서 더 빠르게 벗어나도록 돕는 도구에 가깝습니다.
이전에 제가 Google Stitch를 사용해 본 모습입니다. 이 글에서는 Stitch를 활용한 저의 3단계워크플로우를 살펴보고, 이 툴을 최대한 활용하기 위해 반드시 고려해야 할 핵심 포인트들을 공유하고자 합니다.
1단계: 프롬프트 작성 및 AI 모델 선택
Google Stitch를 사용할 때 가장 먼저 해야 할 일은 제대로 된 프롬프트를 작성하는 것입니다. 다른 AI 도구들과 마찬가지로, 자신의 의도를 더 명확하고 구체적으로 표현할수록 AI는 여러분에게 훨씬 더 적합한 결과물을 만들어 줍니다.
제가 프롬프트 작성에 사용하는 프레임워크는 ‘줌아웃-줌인’ 방식입니다.
우선 제품의 적절한 컨텍스트(맥락)를 설정하고 타겟 사용자를 설명하며 시작합니다(줌아웃).
그 다음, 실제로 생성하고자 하는 화면이나 페이지 디자인으로 초점을 좁혀(줌인),
해당 화면의 목적, 레이아웃 계층 구조, 그리고 AI가 고려해야 할 디자인 제약 사항들을 설명합니다.
마지막으로, AI가 생성할 화면에 대해 제가 기대하는 바를 덧붙입니다.
아래는 제가 데모 제작에 사용한 샘플 프롬프트입니다.