<p>Google Stitch(stitch.withgoogle.com)는 텍스트나 이미지를 입력하면 AI(Gemini)가 즉시 웹/앱 UI 디자인과 프론트엔드 코드를 만들어주는 도구입니다. 복잡한 디자인 툴 없이도 아이디어를 시각화할 수 있어 개발자나 기획자에게 매우 유용합니다.<br><br>간단한 사용법 4단계는 다음과 같습니다.<br><br><b><span style="color: #ef5369;">1. 접속 및 모드 선택</span></b><br>stitch.withgoogle.com에 접속하여 구글 계정으로 로그인합니다.<br><br>Standard Mode (일반 모드): 텍스트 프롬프트만으로 빠르게 UI를 생성할 때 사용합니다. (Gemini 2.5 Flash 기반)<br><br>Experimental Mode (실험 모드): 손으로 그린 스케치나 스크린샷 이미지를 업로드하여 정교한 UI를 만들 때 사용합니다. (Gemini 2.5 Pro 기반)<br><br><span style="color: #ef5369;"><b>2. 아이디어 입력 (프롬프트 작성)</b></span><br>하단 입력창에 만들고 싶은 앱/웹의 설명을 적습니다. (현재 영어로 작성하는 것이 가장 결과가 좋습니다.)<br><br>예시: "A minimalist crypto wallet app with a dark theme and transaction history chart."<br><br>레이아웃 선택: 화면 상단에서 Web(웹) 또는 Mobile(모바일) 형태를 선택할 수 있습니다.<br><br><span style="color: #ef5369;"><b>3. 결과 확인 및 수정</b></span><br>프롬프트를 입력하면 AI가 여러 개의 디자인 시안(Variant)을 동시에 생성합니다.<br><br>마음에 드는 시안을 선택한 후, 추가 채팅을 통해 "버튼을 더 둥글게 해줘"나 "메인 컬러를 파란색으로 바꿔줘"와 같이 세부 수정을 요청할 수 있습니다.<br><br><span style="color: #ef5369;"><b>4. 내보내기 (Export)</b></span><br>Figma로 가져오기: 'Paste to Figma' 버튼을 누르면 디자인 레이어를 그대로 복사하여 피그마에서 정밀하게 편집할 수 있습니다.<br><br>코드 추출: 우측 상단의 코드 버튼을 눌러 HTML, Tailwind CSS, React(JSX) 등 원하는 형식의 코드를 복사해 프로젝트에 바로 적용할 수 있습니다.</p>
<!-- -->
