Google 스티치를 사용하여 몇 분 안에 생산 준비 UI 프로토 타입을 구축하는 방법
저자의 이미지 | 캔버틀 소개
앱 개발 과정에서 일반적으로 발생하는 것은 귀하와 귀하의 팀이 디자인을 마무리하고 개발 및 테스트를 거치며 마침내 몇 주 동안 건축 한 내용을 검토 할 때가되면 느껴집니다. 그것은 저개발 된 것처럼 보이거나 단순히 “옳지 않습니다”. 너무 많은 반복, 너무 많은 시간, 그리고 어딘가에서 원래 아이디어가 사라집니다.
이를 해결하기 위해 Google은 Google Stitch라는 새로운 도구를 도입했습니다. 당신은 단순한 영어 명령을 제공하고 배포 할 수있는 아름답고 반응이 좋은 프로덕션 준비 프로토 타입을 얻습니다. 그리고 가장 중요한 부분? stitch.withgoogle.com에서 무료로 시도 할 수 있습니다. 이 기사에서는 Google 스티치를 사용한 경험을 안내하고 시작하는 방법을 알려 드리겠습니다.
틀 Google 스티치를 시작합니다
Stitch.withgoogle.com으로 가서 시작하기 전에 Google 계정에 로그인하십시오.
// 1. 모드를 선택하십시오
화면의 오른쪽 상단 코너에서 다음 모드를 전환 할 수 있습니다.
- 표준 모드 (Gemini 2.5 플래시) : 빠른 초안 및 MVP에 가장 적합합니다.
- 실험 모드 (Gemini 2.5 Pro) : 영감을 위해 업로드 할 수있는 이미지 입력, 와이어 프레임 또는 스케치에서 UI를 생성 할 수 있습니다.
// 2. 설명하거나 업로드하십시오
옆에 캔버스가있는 프롬프트 상자가 표시됩니다.
- 텍스트 프롬프트 예 : “로고가 상단에있는 가입 양식 페이지, 이메일/비밀번호 필드, 기본 색상으로 제출 버튼.”
- 이미지 프롬프트 (실험) : 와이어 프레임 또는 스크린 샷을 업로드하여 텍스트와 함께 생성을 안내하십시오.
예를 들어, 표준 모드를 사용하고 다음과 같은 프롬프트를 제공했습니다.
“맨 위에 진행 막대가있는 언어 학습 앱의 퀴즈 페이지. 제목은 우르두어 단어를 정답과 일치시켜 4 가지 가능한 옵션을 제공하는 데 어려움을 겪습니다.”
이를 기반으로 놀라운 UI를 생성했습니다.
// 3. 미리보기 및 조정
사이드 바를 사용하여 테마를 조정하십시오. 색 팔레트, 글꼴, 테두리 반경을 변경하고 어두운 모드와 조명 모드 사이를 전환하십시오. Google Stitch를 사용하면 업데이트 된 프롬프트를 사용하여 설계를 수정할 수 있습니다.
예를 들어, 테마를 어두운 곳으로 업데이트하고 글꼴을 Manrope로 변경했습니다. 클릭 후 테마를 적용하십시오출력은 훨씬 더 세련되었습니다.
// 4. 똑똑하게 반복하십시오
개별 구성 요소 또는 화면을 개선 할 수 있습니다. 예를 들어:
- “기본 버튼을 더 크고 파란색으로 만드십시오.”
- “홈페이지 상단에 내비게이션 바를 추가하십시오.”
스티치는 단계별 지침을 매우 정확하게 따릅니다. 제 경우에는 우르두어 단어가 처음에 로마 화 된 텍스트로 나타났습니다. 그래서 프롬프트를 업데이트했습니다.
“화면을 중심으로 한 큰 Nastaliq 스타일의 글꼴로 우르두어 단어를 오른쪽에서 왼쪽 방향으로 표시하십시오.”
결과는 진정으로 인상적이었습니다.
// 5. 수출 및 빌드
생성 된 이미지를 클릭하여 코드를 복사하거나 페이스트를 눌러 디자인 작업 공간에 편집 가능한 자동 레이아웃 아트 보드를 직접 삭제할 수 있습니다.
이미지를 클릭하고 선택했을 때 나타났습니다. 코드 복사. 즉시 DEV 환경이나 디자인 파일에 통합 할 준비가되었습니다.
틀 최종 생각과 최상의 결과를 얻습니다
완벽한 설계 솔루션은 아니지만 Google 스티치는 MVP 및 초기 단계 개발에 적극 권장됩니다. 고급 설계 사용자 정의를 위해 항상 Figma로 내보내거나 멀티 스크린 로직을 구축 할 수 있습니다.
더 나은 결과를 얻기위한 몇 가지 팁은 다음과 같습니다.
- 사용 UI 관련 언어 “Navbar”, “Dashboard 위젯”, “기본 버튼”또는 “자동 스페이스”와 같이 구조를보다 정확하게 안내합니다.
- a로 시작하십시오 높은 수준의 설명 그리고 단계별로 정제하십시오. 예를 들어 : “피트니스 추적 앱.”
- 편집 할 때 매우 구체적입니다. 요소를 명확하게 언급하십시오예를 들어 “가입 양식의 기본 버튼의 색상을 흰색으로 변경하십시오.”
Google 스티치는 빠르고 직관적이며 몇 주 동안 진행되지 않고 작동 할 필요가있을 때 훌륭한 출발점을 제공합니다. 확실히 시도 할 가치가 있습니다.
Kanwal Mehreen 기계 학습 엔지니어이자 데이터 과학에 대한 열정과 AI의 의학 교차점을 가진 기술 작가입니다. 그녀는 eBook “Chatgpt의 생산성을 극대화하는 것”을 공동 저술했습니다. APAC의 Google Generation Scholar 2022로서 그녀는 다양성과 학업 우수성을 챔피언시킵니다. 그녀는 또한 Tech Scholar, Mitacs Globalink Research Scholar 및 Harvard Wecode Scholar의 Teradata 다양성으로 인정 받고 있습니다. Kanwal은 STEM 분야의 여성에게 힘을 실어주기 위해 펨코드를 설립 한 변화에 대한 열렬한 옹호자입니다.
Post Comment