안녕, 여러분! 구글의 반중력 기술은 꽤 오래전부터 있었는데, 이제야 사람들이 정말 얼마나 강력한지 깨닫기 시작하는 것 같아요.00:00

그리고 가장 좋은 점은, 완전히 3가지라는 거예요.00:08

단순히 IDE가 아니라, AI가 계획하고, 코드를 작성하고, 수정하고, 실행까지 여러분의 모든 작업을 관리하는 에이전트 기반의 작업 공간입니다.00:11

애플리케이션 워크플로우와 달리, 스티치는 Google의 AI 기반 UI/UX 디자인 에이전트로, 몇 분 안에 바로 사용할 수 있는 디자인을 생성할 수 있도록 돕습니다.00:19

스티치에 처음이시라면, 이전 영상 참고해주세요. 그러면 기본적인 내용을 이해하고 이 튜토리얼을 훨씬 쉽게 따라하실 수 있을 거예요.00:29

MCP 지원을 통해 스티치는 중력 반전과 직접 연결되어, 에이전트들이 다중 페이지 디자인을 자동으로 생성, 수정 및 반복할 수 있습니다.00:37

이 영상에서는 MCP를 이용해서 안티-그래비티와 스티치를 연결하여 모든 것을 매끄럽게 통합하는 방법을 보여드릴 거예요. 스티치는 디자인을 담당하고, 안티-그래비티는 그 디자인들을 실현하는 거죠.00:48

시작부터 끝까지 실제 작동하는 애플리케이션을 만들 수 있습니다. 스티치를 열면 MCP 설명서 링크를 찾을 수 있습니다. 그냥 클릭하시면 됩니다.01:00

가장 먼저 해야 할 일은 API 키를 생성하는 거예요. 스티치 설정 페이지에서 새로운 키를 생성할 수 있어요.01:09

이미 제껀 만들었어요. 그 다음 단계는 IDE에서 MCP 클라이언트를 설정하는 거예요.01:16

Stitch는 Gemini CLI, Cursor, VS Code 등 다양한 IDE를 지원합니다.01:22

제 경우에는 Antigravity MCP Server JSON을 사용할 거예요. 이제 Antigravity IDE를 열고 세 개의 점 메뉴를 클릭한 다음에 MCP 서버를 선택하고 관리 MCP를 선택하세요.01:28

거기에서 'View Config'를 클릭하세요. MCP 서버 JSON을 여기에 붙여넣고, 유효한 API URL로 바꿔주세요. 설정 저장을 완료한 후에는 새로고침 버튼을 누르세요.01:41

이제 스티치 MCP 서버가 목록에 나타나고, 사용 가능한 모든 도구들이 표시될 거예요.01:53

사용할 준비가 됐습니다. 이제 프로젝트 생성, 프로젝트 가져오기, 프로젝트 목록 보기, 화면 목록 보기 등 다양한 도구를 사용할 수 있게 됐습니다.01:59

그리고 몇몇 다른 경우도 있습니다. 예를 들어, 리스트 프로젝트를 사용할 때, 자동으로 해당 프로젝트에서 사용 가능한 모든 프로젝트를 가져와서 보여줍니다.02:07

내 스티치 계정으로 그냥 프로젝트 목록을 요청했을 뿐인데, MCP 도구가 작동해서 즉시 모든 결과가 떴어요.02:15

그 다음, 스티치에서 제 프로젝트 하나를 열어서 프로젝트 ID를 복사한 다음, 특정 ID에 해당하는 화면 목록을 보여달라고 요청했어요.02:23

제출하자마자 해당 프로젝트 내의 모든 화면을 가져왔어요. 이 프로젝트는 다섯 개의 화면으로 구성되어 있는데, 기본적으로 이커머스 웹사이트에요. 상품 목록, 장바구니, 결제 페이지 등 다양한 페이지들이 있죠.02:32

스티치 내부에서도 테마 편집, 디자인 재생성, 다양한 요소 조정 옵션을 사용할 수 있어요. 스티치를 처음 사용하시는 분들이라면, 제가 이전에 올린 스티치 튜토리얼 영상들을 꼭 한번 확인해 보시는 걸 추천합니다.02:44

자, 이제 랜딩 페이지 디자인을 새 탭에서 켰고, 다음 단계는 아주 간단합니다.02:57

이 페이지들을 모두 활용해서 React 기반의 전자상거래 프로젝트를 만들 거예요. 그래서 간단한 프롬프트를 추가했는데, 모든 페이지를 사용해서 React 앱을 만들어 주세요.03:02

디자인을 완성하고 제출하면, 스티치가 자동으로 완벽한 React 환경을 구축해 줍니다. HTML 디자인을 그대로 변환하여 적절한 컴포넌트와 훅을 만들어 줍니다.03:12

전체 구조가 깔끔하게 갖춰져 있어서, 처음부터 시작할 필요 없이 UI에서 바로 견고한 React 코드를 얻을 수 있습니다.03:24

여기서는 랜딩 페이지를 확인할 수 있으며, 모든 자산들이 원래 디자인에서 그대로 재사용되었습니다.03:34

이것은 제품 페이지인데, 기본적으로 호버 기능까지 포함되어 있다는 점이 눈에 띄실 거예요. 다음으로, 제품 상세 페이지입니다. 그리고 이와 함께 장바구니 페이지와 최종 결제 페이지, 두 개의 페이지가 더 있습니다.03:40

가장 중요한 건 이거예요, MCP를 사용하면… 스티치에서 디자인을 가져오는 것뿐만 아니라, 이 도구들을 통해 프로젝트와 화면을 직접 생성하고, 업데이트하고, 수정할 수 있다는 점입니다.03:54

지금까지는 GetProject랑 ListScreens을 이용해서 기존 프로젝트랑 화면들을 다뤘었죠. 이제는 CreateProject 도구를 이용해서 완전히 새로운 스티치 프로젝트를 처음부터 만들어볼게요.04:06

여기 보시면, 제가 클로드 오퍼스 모델을 이용해서 현대적인 피트니스 웹사이트에 대한 계획을 이미 생성해 놓은 걸 볼 수 있습니다. 테마와 개별 페이지 레이아웃에 대한 자세한 분석이 포함되어 있죠.04:20

이 계획을 사용하기 전에, 스티치 기능이랑 어떤 걸 할 수 있는지 간단하게 보여드릴게요.04:31

스티치 스킬은 에이전트에 추가하여 디자인을 React 컴포넌트로 변환하거나, 디자인 문서 생성, 심지어는 웹사이트 전체를 구축하는 등 다양한 작업을 수행할 수 있는 플러그 앤 플레이 기능이라고 할 수 있습니다.04:36

스티치 MCP 서버와 연동해서 작동하며, Antigravity, Gemini CLI, Cursor, Claude Code 같은 도구에서도 문제없이 잘 작동합니다.04:48

스티치 스킬을 처음 사용하시는 분들은 Agent Skills 영상을 먼저 확인해보시는 게 좋겠습니다.04:57

다시 여기로 돌아와서, 활용 가능한 주요 기술들은 DesignMD가 있는데, 디자인 시스템을 분석해 주고, React Components는 Stitch 화면들을 변환해 줍니다.05:02

생산 가능한 React 컴포넌트로 구현하고, 아이디어를 강력한 UI 준비 프롬프트로 다듬는 'Enhance Prompt' 기능도 제공합니다.05:11

이번 영상에서는 스티치 루프 기능을 사용할 거예요.05:20

단 하나의 프롬프트만으로도 전체 다중 페이지 웹사이트를 생성할 수 있습니다. 저희 계획에는 약 6페이지 정도가 포함되어 있기 때문입니다. 이 기능이 없다면 Stitch는 기본적으로 한 페이지만 생성했을 겁니다.05:23

이 명령어를 사용해서 스킬을 설치해 볼 수 있습니다. 제 쪽에서 문제가 있을 수도 있지만, 아마 작동할 거예요.05:35

만약 안 된다면, 해결 방법은 간단합니다. 깃허브에서 전체 스킬 폴더를 다운로드해서 프로젝트 디렉터리에 바로 넣으세요. 이제 스티치 루프 스킬을 이용해서 스티치 프로젝트를 만들 프롬프트를 드릴게요.05:41

제출하면, 준비가 되면 스킬이 계획에 따라 모든 화면을 하나씩 자동으로 생성합니다. 이제 스티치로 돌아가서 새로고침하세요. 새로운 프로젝트가 생성되는 것을 볼 수 있을 거예요.05:56

열어보세요. 이미 두 페이지가 생성되었고, 세 번째 페이지는 현재 진행 중입니다.06:08

한 번에 모든 페이지가 생성되는 게 아니라, 하나씩 만들고 있어요.06:14

결과물 품질 한번 보세요. 이 디자인을 새 탭에서 열어볼게요. 이게 저희 홈페이지 랜딩 페이지인데, 솔직히 진짜 괜찮게 나왔어요.06:17

제품 카탈로그 페이지가 생성되고 계획대로 완벽하게 일치합니다. 간단히 말해서, 스티치를 이제 수동으로 열 필요가 없다는 거죠.06:26

앤티그라비티 안에서 깔끔하고 자세한 계획을 세우고, 그걸 바로 스티치에 실행할 수 있어요. 모든 페이지의 HTML 코드를 볼 수도 있고, UI도 완벽하게 똑같이 맞춰져 있어요.06:36

이렇게 깔끔하고 쓸모 있는 HTML을 얻는 건 정말 굉장한 일이에요. 몇 분 지나고 나니 여섯 페이지가 전부 완벽하게 생성됐어요.06:49

안티그래비티는 모든 페이지에 대한 스크린샷과 화면 단위 상세 정보가 포함된 마크다운으로 자세한 사용법을 제공했어요. 그리고 디자인.md 와 사이트.md 파일도 자동으로 만들어줬고요.06:57

제가 특히 마음에 드는 건 스티치가 Nano Banana를 이용해서 요소에 대한 이미지를 생성한다는 점이에요. 만들어내는 시각적인 요소들이 깔끔하고 관련성도 높고, 각 페이지와 컴포넌트에 완벽하게 어울린다는 거죠.07:11

두 웹사이트 모두 배포 완료했어요. 결과물을 직접 확인하실 수 있도록 링크를 아래에 남겨둘게요.07:23

무중력과 스티치, MCP, 그리고 에이전트 스킬을 결합하면 앱 개발 방식이 완전히 바뀌게 됩니다. 계획을 다중 페이지 디자인과 깔끔한 코드로 이전하는 속도가 역대 최고 수준으로 빨라지고, 대부분 무료로 사용할 수 있는 기술 스택으로 가능합니다.07:29

이건 단순한 UI 생성 기능이 아니라, 완전한 에이전트 기반의 워크플로우입니다. 관련 자료 링크는 아래 설명에 있으니 확인해보세요.07:42

시청해주셔서 감사합니다. 다음 영상에서 만나요.07:50