Google Stitch 샘플 예제의 프롬프트를 분석하며 어떻게 UI를 발전시키는지 알아보았습니다.
다른 유형의 텍스트가있는 검은 색 화면
대화 내용을 쭈욱 훑어보니, 전반적인 흐름은 실제 디자인 프로세스와 유사하게 이어진다는 것을 알 수 있었습니다.
흐름(해석) :
P1. 목표 및 페이지 정의
보드게임 친구 모임용 모바일 앱을 만들고 있어요. 앱에는 다음 이벤트를 확인할 수 있는 캘린더 뷰, 새 이벤트를 추가할 수 있는 생성 페이지, 함께 해볼 보드게임을 탐색할 수 있는 브라우즈 페이지, 어떤 게임을 언제 누가 주최했고 누가 이겼는지를 확인할 수 있는 히스토리 페이지, 그리고 승수 기준으로 플레이어를 순위 매기는 리더보드 페이지가 있었으면 해요.P2. 스타일 정의
전체 테마를 다크 그린으로 바꿔줄 수 있을까요? 이미지도 함께 조정해 주세요.P3. 특정 화면 콘텐츠/기능 보완
히스토리 화면을 수정하고 싶어요. 각 세션마다 몇 라운드를 플레이했는지 보여줄 수 있을까요? 그리고 각 세션이 클릭 가능한 버튼이라는 걸 시각적으로 더 명확히 표현해 주세요.P4. 세부 요소 보완
호스트 이름도 각 세션 항목의 서브텍스트에 추가해 주세요.구현 :
저도 간단하게 테스트 앱을 만들고 발전시켜보았습니다.
휴대폰의 모든 메시지, 알람을 모아서 내가 원할때 한번에 요약해주는 앱을 만들 거야. 요약 화면, 그리고 요약 시간과 요약할 대상을 선택할 수 있는 설정 화면을 만들어 줘.
모바일 앱에서 요약 페이지의 스크린 샷
한국인 정서에 맞는 캐주얼하고 트랜디한 스타일로 바꿔줘보낸 사람 목록은 제거하고, 폰트를 Noto sans로 적용해줘.
모바일 앱의 화면에 사람들의 그룹이 표시됩니다.
아직 Beta 버전이라 그런지, 실제 세부 조정은 아쉬운 부분들이 보였습니다. 폰트 수정 등은 피그마 AI를 활용하는 것이 낫겠다는 생각이 듭니다. 그리고 Galileo AI 특유의 디자인 스타일이 남아있는것 같습니다.
Figma 연동 :
피그마에 복붙하니 폰트 레이아웃이 일부 깨지는 현상이 발생합니다.
바로 반응형 구현이 가능하도록 Auto Layout이 적용되어있습니다. 다른 UI Builder에 비해 이 부분은 편리한것 같습니다.
Adobe Adobe Adobe Adobe Ado의 스크린 샷
Figma에서 CSS로 추출하기
결론 :
(만약에...) 제미나이와 통합된다면 리서치 → 아이데이션 →프로토타이핑까지 일련의 프로세스를 잇는 강력한 기능으로 자리잡을 수 있을것 같습니다. 하지만 디자인 워크플로우에만 집중할 경우 Figma AI를 능가하기엔 부족한 점들이 보입니다. 아직까지는요!
