새해, 새로운 나: Stitch와 함께하는 UI/UX 디자인
Source: Dev.to
Overview
이 튜토리얼은 Stitch(Google의 AI 기반 UI 디자이너)를 사용해 내 기술과 프로젝트를 보여주는 포트폴리오 웹사이트를 만드는 과정을 안내합니다. 새해, 새로운 나 포트폴리오 챌린지 시리즈의 일부입니다:
- Design: UI/UX Design with Stitch (이 글)
- Prototyping: Vibe Coding in Google AI Studio (곧 공개)
- Production: Agentic Engineering with Google Antigravity (곧 공개)
여기서는 초기 컨셉부터 Stitch에서 UI/UX 디자인을 완성하고, 디자인/코드를 Google AI Studio로 내보내는 과정에 초점을 맞춥니다.
What Is Stitch?
Stitch는 Google Labs에서 실험적으로 만든 AI UI 디자인 툴로, 2025 I/O 개발자 키노트에서 발표되었습니다. 자연어 혹은 이미지 프롬프트를 통해 데스크톱 및 모바일 앱용 UI 디자인과 프론트엔드 코드를 생성하며, 다음을 목표로 합니다:
- 앱 제작 속도 향상
- 디자인‑개발 간 격차 해소
- 빠른 반복 및 인기 포맷으로의 내보내기
Design Process
1. Inspiration & Sketching
Stitch에 들어가기 전에 Canva와 Adobe Express에서 템플릿을 살펴보며 원하는 스타일을 파악했습니다. 그 후 GoodNotes 5에서 간단한 디지털 스케치를 만들었으며, 이는 2일 챌린지 마감 기한 안에 레이아웃을 잡기에 충분했습니다. 보통은 Figma나 Adobe XD 같은 고충실도 툴을 사용하지만, 이번 스프린트에서는 러프 스케치만으로도 충분했습니다.
2. Starting in Stitch
I launched the design at and set a goal: an editorial, fashion‑forward aesthetic that reflects my dual persona as a fashion designer and engineer.
Prompt Details
- Model: Gemini 3.0 Flash (스케치가 저충실도라 선택)
- Alternative: Nano Banana Pro는 더 높은 충실도의 UI나 기존 스크린샷이 있을 때 더 적합
New Year New You Portfolio Challenge와 내 “2025 in Review” 블로그 포스트 링크를 제공했습니다. Stitch가 일부 프로젝트 정보를 자동으로 채워 주었지만, 더 나은 결과를 위해 제목과 설명을 직접 다듬었습니다.
3. Iterating on Interactions
디자인 단계에서 다음과 같은 인터랙티브 요소들을 추가했습니다:
- 호버 시 프로젝트 설명 표시
- 행 확장/축소 컨트롤
- 이미지 타일에 일관된 3:4 종횡비 적용
- 전체 레이아웃을 세로형에서 가로형으로 전환
4. Exporting to Google AI Studio
시각적 요소와 UX에 만족하면 코드를 내보냈습니다:
- Export 클릭 → AI Studio 선택.
- Build with AI Studio 클릭하여 Google AI Studio에 새 프로젝트 생성.
생성된 목업에는 자리표시자 텍스트(보통 “Lorem Ipsum” 혹은 AI‑생성 무의미 문자열)가 포함됩니다. 이는 정상적인 현상이며, Stitch는 시각적 블록 역할을 하고 실제 내용은 코드 단계에서 정리됩니다.
Next Steps
- Google AI Studio에서 포트폴리오 웹사이트를 다듬기.
- AI Studio에서 직접 Cloud Run으로 최종 사이트 배포하기.
프로토타이핑 및 프로덕션 단계에 대한 업데이트를 기대해 주세요!