Stitch 사용 환경 설정
Google 계정 하나로 바로 시작하는 Stitch 환경 구성 가이드. 업데이트: 2026-03-24
핵심 요약
| 구분 | 내용 |
|---|---|
| 📖 정의 | Stitch 접속·설정·인터페이스 구성 방법 |
| 💡 핵심 | 신용카드 없이 Google 계정만으로 즉시 사용 가능 |
| 🎯 대상 | Stitch를 처음 시작하는 모든 사용자 |
| ⚠️ 주의 | Google Labs 베타 — 기능과 한도는 변경될 수 있다 |
목차
1. 접속 및 로그인
Stitch는 웹 앱으로 별도 설치가 필요 없다.
접속 URL: https://stitch.withgoogle.com
필요 조건: Google 계정 (Gmail, Workspace 모두 가능)
신용카드: 불필요
접속 절차:
1. https://stitch.withgoogle.com 브라우저 접속
2. "Continue with Google" 클릭 → Google 계정 선택
3. Google Labs 이용 약관 동의
4. 대시보드 진입 완료 — 바로 프로젝트 생성 가능
2026년 3월 기준 Waitlist 없이 즉시 접속 가능하다.
2. 플랜 및 생성 한도
| 항목 | Standard | Experimental |
|---|---|---|
| 기반 모델 | Gemini 2.5 Flash | Gemini 2.5 Pro |
| 월 생성 한도 | 350회 | 200회 |
| 품질 | 빠른 속도, 일반 품질 | 고품질, 복잡한 레이아웃 |
| 비용 | 무료 | 무료 |
| 전환 방법 | 생성 시 모드 선택 |
한도 초과 시:
- 같은 달에 추가 생성 불가 (다음 달 초기화)
- 2026년 3월 기준 유료 플랜 없음
3. 인터페이스 구성
flowchart TD A[Stitch 대시보드] --> B[프로젝트 목록] A --> C[새 프로젝트 생성] C --> D[무한 캔버스] D --> E1[좌측 패널\n레이어·컴포넌트] D --> E2[중앙 캔버스\n화면 편집] D --> E3[우측 패널\n속성·스타일] D --> E4[하단 채팅창\n프롬프트·Voice Canvas]
| 영역 | 역할 |
|---|---|
| 대시보드 | 프로젝트 생성·관리·삭제 |
| 무한 캔버스 | 다중 화면을 하나의 공간에서 관리 (2026-03~) |
| 좌측 패널 | 레이어 구조, 컴포넌트 탐색 |
| 중앙 캔버스 | UI 화면 직접 시각 확인·클릭 편집 |
| 우측 패널 | 선택된 컴포넌트의 속성·색상·크기 조정 |
| 하단 채팅창 | 텍스트 프롬프트 입력, Voice Canvas 활성화 |
4. 첫 프로젝트 생성
텍스트로 시작하기
1. "New Project" 버튼 클릭
2. 프롬프트 입력창에 UI 설명 작성
예: "음식 배달 앱 홈 화면, 주황색 테마, 카드 레이아웃"
3. Standard / Experimental 모드 선택
4. "Generate" 클릭
5. AI가 멀티스크린 UI 생성 → 복수 변형 중 선택
이미지로 시작하기
1. "New Project" → 이미지 업로드 아이콘 클릭
2. 스케치·와이어프레임·스크린샷 파일 첨부
3. 추가 설명 프롬프트 입력 (선택 사항)
4. "Generate" 클릭
5. AI가 이미지를 분석해 편집 가능한 UI 생성
5. 외부 도구 연동 설정
Figma 연동
별도 설치 없이 캔버스에서 직접 내보내기가 가능하다:
내보내기 버튼 → "Paste to Figma" 선택
→ 클립보드에 Figma 호환 데이터 복사
→ Figma에서 Ctrl+V (Auto Layout 포함)
MCP 서버 연결 (개발자용)
외부 코딩 에이전트와 Stitch를 연결하는 방법:
Stitch 설정 → Developer Tools → MCP Server 활성화
→ 연결 가능한 에이전트:
- Gemini CLI
- Claude Code
- Cursor
- Antigravity (Google 차세대 플랫폼)
DESIGN.md 설정
디자인 규칙을 마크다운으로 문서화해 외부 에이전트와 공유한다:
프로젝트 설정 → "Generate DESIGN.md"
→ 현재 프로젝트의 색상·타이포그래피·컴포넌트 규칙이
에이전트 친화적 마크다운 파일로 생성됨
→ 외부 코딩 에이전트가 이 파일을 읽어 일관된 코드 생성 가능