UI를 디자인하는 새로운 방법 🖌️ 크리스마스 카드를 만들고 공유하는 웹을 직접 만들어보고 있습니다. 그런데 바이브 코딩을 하다 보면 늘 이런 딜레마가 생깁니다. - 디자인을 예쁘게 만들면 UI가 어색해지고 - UI를 다듬으면 디자인 완성도가 무너지고 개발자도, 디자이너도 아닌 입장에서는 이게 생각보다 크게 다가옵니다.😭 그런데 이 딜레마를 깔끔하게 해결하는 도구를 만났습니다. 바로 Google Stitch인데요👋 직접 써보니 “이거 진짜 미쳤다”라는 말이 절로 나오더군요. 제가 어려워하던 부분이 한 번에 해결되는 느낌이었습니다. (Gemini3 모델을 씁니다.) ⸻ 🚀 Stitch의 핵심 기능 1) Sketch to Code 손으로 그린 러프 스케치를 업로드하면 AI가 고품질 UI로 변환합니다. 디자인 감각이 부족해도 구조만 잡으면 깔끔한 결과물이 나옵니다. 2) Text to Design 페이지 스타일을 문장으로 설명하면 즉시 완성된 디자인을 생성합니다. “대충 이런 느낌?”이라고 말해도 됩니다. (최고🤣) 3) Real Code Export 이미지가 아니라 실제 배포 가능한 HTML/CSS, React, Tailwind 코드를 바로 제공합니다. 구글 AI 스튜디오에 가져가서 웹구현 가능합니다. 4) Figma 연동 생성된 디자인을 Figma로 가져와 레이어 단위로 수정할 수 있습니다. AI로 초안 생성 후 후편집 흐름이 자연스러워서 쓰기 편합니다. ⸻ Stitch와 Google AI Studio만 있으면 웹사이트 하나 만드는 일은 정말 ‘뚝딱’ 수준이 되는 것 같습니다. 안 써보신 분들은 꼭 한 번 테스트 해보시고 후기 남겨주세요🙌 해시태그#Stitch해시태그#Google해시태그#AI해시태그#Design
크리스마스 카드를 만들고 공유하는 웹을 직접 만들어보고 있습니다. 그런데 바이브 코딩을 하다 보면 늘 이런 딜레마가 생깁니다.
- 디자인을 예쁘게 만들면 UI가 어색해지고
- UI를 다듬으면 디자인 완성도가 무너지고
개발자도, 디자이너도 아닌 입장에서는 이게 생각보다 크게 다가옵니다.😭 그런데 이 딜레마를 깔끔하게 해결하는 도구를 만났습니다.
바로 Google Stitch인데요👋
직접 써보니 “이거 진짜 미쳤다”라는 말이 절로 나오더군요. 제가 어려워하던 부분이 한 번에 해결되는 느낌이었습니다. (Gemini3 모델을 씁니다.)
⸻
🚀 Stitch의 핵심 기능
1) Sketch to Code
손으로 그린 러프 스케치를 업로드하면 AI가 고품질 UI로 변환합니다. 디자인 감각이 부족해도 구조만 잡으면 깔끔한 결과물이 나옵니다.
2) Text to Design
페이지 스타일을 문장으로 설명하면 즉시 완성된 디자인을 생성합니다. “대충 이런 느낌?”이라고 말해도 됩니다. (최고🤣)
3) Real Code Export
이미지가 아니라 실제 배포 가능한 HTML/CSS, React, Tailwind 코드를 바로 제공합니다. 구글 AI 스튜디오에 가져가서 웹구현 가능합니다.
4) Figma 연동
생성된 디자인을 Figma로 가져와 레이어 단위로 수정할 수 있습니다. AI로 초안 생성 후 후편집 흐름이 자연스러워서 쓰기 편합니다.
⸻
Stitch와 Google AI Studio만 있으면
웹사이트 하나 만드는 일은 정말 ‘뚝딱’ 수준이 되는 것 같습니다. 안 써보신 분들은 꼭 한 번 테스트 해보시고 후기 남겨주세요🙌
해시태그#Stitch 해시태그#Google 해시태그#AI 해시태그#Design