Stitch와 바이브코딩으로 첫 서비스 화면 만들기
‘멋진 앱 만들어줘’보다 누가 무엇을 할 화면인지 설명하면 수정할 기준도 분명해집니다. 기능을 많이 넣기 전에, 첫 사용자가 할 행동 하나부터 정해보세요.
원본 영상 공개 · 2026-02-19
스티치와 안티그래비티로 5인분 일을 혼자 하는 구글 AI 자동화
- 이런 분에게
- 아이디어를 화면으로 구현해 사용자에게 보여주고 싶은 분
- 먼저 준비해 주세요
- 서비스 아이디어 한 문장과 필요한 화면 세 가지
- 실습하고 남길 것
- 서비스 화면 초안과 직접 확인할 사용 흐름
먼저, 이 흐름을 이해해 보세요.
영상에서 배우는 것
- AI 기반 디자인 툴 스티치(Stitch)로 UI/UX 생성하기
- 안티그래비티(Anti-Gravity)와 MCP를 활용한 개발 자동화
- 파이어베이스와 페이팔을 연동한 웹사이트 배포 및 수익화
아이디어·분위기·화면을 구체적으로
영상은 Stitch를 활용한 UI/UX 디자인, Antigravity와의 개발 연결, 배포·결제 연동 사례를 다룹니다. 첫 실습에서는 대상과 기능을 명확히 적고 화면 초안을 만드는 흐름에 집중해보세요.
사용자가 들어와서 무엇을 읽고, 어느 버튼을 누르고, 어떤 결과를 받는지 적습니다. 색상과 스타일은 그 행동을 이해하기 쉽게 만드는 기준으로 고르면 됩니다.
보이는 화면과 실제 동작을 함께 확인하기
디자인 초안을 개발 환경으로 연결한 뒤에는 화면이 뜨는지뿐 아니라 버튼과 입력이 원하는 결과로 이어지는지 확인합니다. 작은 화면에서도 내용을 읽고 조작할 수 있는지 직접 살펴보세요.
영상에 배포와 결제 사례가 나오더라도 첫 실습 결과물을 바로 판매할 필요는 없습니다. 사용자에게 보여줄 초안부터 만들고, 실제 계정·데이터·결제를 연결할 때 필요한 검증은 별도로 진행합니다.
필요한 부분부터 다시 보기
기존 영상 목차를 기준으로 원본 영상의 해당 구간으로 연결합니다.
- 00:00디자인부터 결제까지 한 번에 끝나는 시대
- 01:29구글 스티치(Stitch) 소개 & UI/UX 디자인 황금 프롬프트 공식
- 03:14스티치로 글로벌 인공지능 교육 웹사이트 디자인해보기
- 05:01컬러, 폰트 등 세부 디자인 수정하는 꿀팁
- 07:11(핵심) 스티치와 안티그래비티 MCP로 완벽하게 연결하기
- 13:10깃허브 '스티치 루프(Stitch Loop)' 스킬 연동하기
- 18:43파이어베이스(DB/배포) + 페이팔(결제) MCP 한 번에 연결하기
- 20:53명령만 하고 밥 먹고 오면 벌어지는 일 (완전 자동화 시연)
- 23:121인 기업가 여러분께 드리는 제이의 조언
이번에는, 내 일로 해볼까요?
아래 과제는 영상 내용을 내 상황에 적용하도록 구성한 학습 안내입니다.
서비스 설명 한 장 쓰기
대상, 해결할 문제, 사용자가 할 행동, 필요한 화면을 적으세요.
첫 화면 초안 만들기
영상의 디자인 흐름을 참고해 필요한 화면 하나를 만들어보세요. 수정하고 싶은 이유도 적으세요.
사용 흐름을 직접 따라가기
휴대전화 크기에서도 읽고 누를 수 있는지 살펴보고, 버튼을 눌렀을 때 기대하는 결과와 실제 결과를 비교하세요.
보고 끝내지 않고, 한 장으로 남기기.
템플릿에 내 상황을 적고 파일로 보관하세요. 입력한 내용은 서버로 보내지 않으며, 새로고침하면 초기화됩니다. 저장하려면 다운로드해 주세요.
여기까지 해보셨나요?
완료 표시는 이 브라우저에 저장됩니다. 실습 노트 내용은 저장되지 않습니다.
실습 전에 궁금한 점
영상에서 쓴 프롬프트인가요?
이 페이지의 정리 템플릿은 영상 내용을 내 상황에 적용하기 위해 만든 학습 자료입니다. 영상에서 사용한 프롬프트를 그대로 옮긴 것은 아닙니다.
화면을 만들면 서비스가 완성된 건가요?
화면 초안은 시작점입니다. 실제 서비스 운영에는 데이터 저장, 계정, 오류 처리, 배포와 필요한 결제 흐름 등을 연결하고 검증하는 과정이 이어집니다.