그래서 구글 스티치, 구글 랩에서 만든 AI 기반 디자인 도구인데, 이제 코딩 에이전트들을 위한 디자인 기능을 사용할 수 있게 됐어요. 지난주에 세 가지 주요 업데이트를 발표했죠.00:00

첫 번째는 MCP 서버를 개발했고요.00:12

두 번째는 자동화된 워크플로우를 위한 에이전트 스킬입니다. 그리고 세 번째는 제미니 CLI 확장 기능이죠. 즉, 구글의 에이전트 기반 IDE인 Antigravity 같은 도구들이 이제 직접 디자인할 수 있게 된 거예요.00:16

텍스트 프롬프트에서 바로 UI를 생성하고, 전체 코드를 빌드할 수 있습니다. 코딩 에이전트가 디자인 학위를 받은 셈이죠. 스티치 새로운 MCP 서버를 이용해서 Antigravity에서 제가 만든 것을 한번 보시죠.00:30

자, 한번 살펴볼까요? 이것은 스티치의 디자인을 활용해서, 스티치에 깊이 들어가지 않고도 Antigravity가 만들 수 있는 최종 웹사이트입니다. 자, 이걸 한번 볼까요? 이제 금융 계획 웹사이트를 만들라고 요청했습니다.00:42

여기서 아름다운 로그인 페이지를 확인할 수 있습니다. 아주 은은한 애니메이션도 보이고, 로그인 화면도 만들어놨네요.00:54

이걸 클릭하면 시뮬레이션 대시보드로 이동하는데, 이게 제가 실제로 만들고 싶었던 건 FB&A 분석이랑 비슷한 거죠. 그리고 여기 레버를 움직이면 실시간으로 변하는 걸 확인할 수 있습니다.01:01

운영 비용을 조정하거나, 인원수를 변경하거나, 마케팅 비용을 바꾼다면, 모든 것이 매출 측면에서 연결되어 있어요. 그리고 여기서는 좀 더 흥미로운 일을 추가로 해 놓았네요.01:14

기준 데이터와 시뮬레이션 시나리오를 비교해 보니까 정말 굉장하네요.01:24

여기에도 시나리오 라이브러리가 함께 제공됩니다.01:30

세밀한 애니메이션도 확인할 수 있습니다. 아이디어는 CFO 사무실이나 RACFO가 직접, 매 분기마다 이러한 시뮬레이션을 할 수 있다는 것입니다. 그리고 다양한 지출 내역을 바탕으로 전체적인 시뮬레이션을 수행할 수 있게 됩니다.01:33

예상 수익이었어요. 정말 굉장했죠? 방금 보신 건 완전한 재무 계획 및 분석 시뮬레이션인데, 저희 Antigravity에서 완전히 설계하고 코딩했답니다.01:48

이런 종류의 애플리케이션을 만들기 전에도 가능했던 것은 사실이지만, 여기서는 가장 큰 차이점이 바로 Antigravity 안에서 직접 디자인한다는 점입니다.01:59

그러니까 피그마나 스티치 같은 곳에 디자인을 먼저 다 끝내고, 그걸 코드로 추출해서 이종류의 AI 툴에 넣어 앱을 실제로 만들 필요가 없다는 거죠.02:08

그 모든 작업을 같은 IDE 안에서 바로 할 수 있고, 이번에는 반중력 기능을 이용해서 해볼 거예요.02:19

자, 이번 영상에서는 반중력 장비에 MCP를 활성화시켜서 이렇게 무언가를 직접 만들 수 있는 방법에 대해 집중적으로 알아보겠습니다.02:25

마지막 날에 진짜 놀라운 일이 벌어졌는데, '스티치 루프 스킬'이라는 걸 공개했어요. 이건 자동으로 루프를 만들어주는 기능인데, AI가 화면을 디자인하고 코드를 작성해서 브라우저에서 실행하는 방식으로 시각적으로...02:34

다 괜찮아 보이는지 확인하고, 안 되면 수정해서 다시 시도합니다. 완전히 자율적이죠. 이건 또 다른 영상으로 다뤄야 할 내용입니다. 혹시 제가 그 과정을 안내하고, 그걸 어떻게 만들 수 있는지 알려드리는 영상을 만들도록 해달라고 댓글로 알려주시면 좋겠습니다.02:47

오늘만은 기본적인 부분, 그러니까 스티치 MCP 서버를 설정하고 그걸 반중력에 직접 연결하는 것에 집중해볼게요, 알겠죠?03:01

자, 그럼 바로 시작해 볼까요? 스티치와 안티 그레비티를 사용하기 전에 구글 클라우드를 통해 인증 설정을 해야 합니다.03:09

음, 만약 구글 클라우드를 왜 써야 하는지 궁금하시다면, 무중력 환경에서 바로 디자인 툴을 사용하고 싶은데, 그게 바로 이겁니다, 그렇죠? 스티치 MCP는 원격 MCP 서버입니다.03:16

당신의 컴퓨터에서 실행되는 게 아니에요. 사실 Google 인프라에 연결되고 있는데, 스티치 API가 그곳에 위치하고 있답니다.03:26

마치 안전한 터널이라고 생각하시면 돼요. 그렇죠? 이 터널에 접근하기 위한 키 카드 같은 게 바로 gcloud 인증입니다. 그래서 우리는 두 가지를 해야 해요. 구글에게 우리가 누구인지 알려주고, 로컬 도구에게 접근 권한을 줘야 합니다.03:32

네, 저희를 대신해서 진행할 수 있게끔, 제가 어떻게 하는지 보여드리겠습니다. 자, 시작부터 끝까지 엔티그라비티를 이용해서 진행할 건데요. 엔티그라비티 터미널 자체를 사용할 겁니다. 윈도우를 사용하신다면 파워셸을 사용하셔도 되고, 이 단계 중 일부는 다른 방법으로도 진행할 수 있습니다.03:45

구글 클라우드 셸에서도 바로 가능하고, 아니면 여러분의 컴퓨터에 따라 다르죠. 기본적으로 터미널이 필요합니다. 만약 안티그라비티가 없다면, 여기에서 다운로드하는 걸 추천합니다. 안티그라비티.구글에서 다운로드 과정을 따라할 수 있을 거예요. 아주 간단합니다.04:00

설치하고 다운로드하는 건 넘어가고, 안티그라비티를 다운로드하면 이 화면이 랜딩 페이지로 나타납니다. 좋은 생각은 항상 새로운 폴더를 만드는 거죠.04:14

보통은 이렇게 하는데, 새 폴더를 만들어서 진행해요. 이 경우에는 'Stitch'라는 폴더를 미리 만들어놨어요. 참고할게요.04:26

여기 터미널 버튼이 있어요. 이걸 누르면 터미널이 열려요.04:34

자, 이제부터는 특정 명령어를 따라 MCP를 직접 anti-gravity에서 활성화할 수 있도록 진행할 거예요. 지금 에이전트 MCP 서버를 보시면 Stitch MCP를 찾을 수 없을 거예요.04:39

따라서 몇 가지 단계를 진행하셔야 합니다. 또한, 이것은 로컬 MCP 서버가 아니고 원격 MCP 서버라는 점을 염두에 두셔야 합니다. 그래서 제가 전에 말씀드렸듯이 인증을 받아야 하는 이유입니다. 여기에서는 정말 빠르게 다섯 단계를 진행할 예정입니다.04:52

첫 번째는 gcloud를 이용해서 로그인을 설정할 거예요. 그리고 나서, 구글 클라우드에 구축하신 프로젝트가 어떤 것이든, 프로젝트를 설정하고, 애플리케이션 기본 자격 증명을 설정할 겁니다.05:06

그렇게 하면 됐고, 이제 스티치 mcp API를 활성화하고, 마지막으로 액세스 토큰을 생성할 거예요, 그렇죠? 하나씩 단계별로 진행해 볼게요. 첫 번째는 인증입니다.05:17

이걸 기본적으로 사용하면 클라우드 CLI 내에서 인증을 바로 진행할 수 있습니다. 다음 단계에서는 프로젝트 설정을 하는 부분이 되겠습니다. 이 부분은...05:27

여기서는 이미 구글 클라우드에 프로젝트가 있다고 가정하고 설명합니다. 예를 들어, 저 같은 경우에는 이 프로젝트가 이미 구글 클라우드에 있습니다. 아직 프로젝트가 없으시다면 새로운 프로젝트를 생성하시면 되고, 프로젝트를 설정할 때 이름을 지정하시면 됩니다.05:39

이제 속성을 업데이트하고, 완료하면 다음 단계로 넘어가야 합니다. 이 단계가 가장 중요한데요, 바로 스티치 API를 활성화하는 과정입니다. 이 경우에는요...05:52

이 비디오를 찍기 전에 한 번 실행해 두면 좋아요. 이미 활성화되어 있을 수도 있지만, 처음 하시는 분들은 실행하면 한 번 활성화되고 마지막 단계는 실제로 인쇄하는 거예요.06:03

기본 인증 토큰을 알아두면 유용할 거예요. 애플리케이션 기본 토큰을 얻었으면 다음 단계는 MCP 서버를 설정하는 것입니다. 제가 말씀드린 것처럼 검색해서 스티치를 찾을 수 없을 겁니다. 이 부분에서 MCP 서버 관리를 클릭해야 하고, 원시 구성 파일을 확인할 수 있습니다. 이제 무엇을 할 것인지...06:14

보시죠.06:26

이걸 복사해서, 그리고 여기 액세스 토큰이 있는 곳인데, 이걸 사용하시면 돼요. 그리고 이 창을 닫으신 다음에 새로고침을 누르면, 실제로 보이는 걸 확인할 수 있습니다.06:37

이제 연결되었고, 이 MCP 서버에서 제공하는 다양한 도구들을 확인할 수 있습니다. 프로젝트를 생성하고, 프로젝트를 가져오고, 화면 목록을 확인하고, 화면을 가져오고, 텍스트로부터 화면을 바로 생성할 수 있습니다.06:48

이것이 제대로 작동하는 것을 바로 확인할 수 있습니다. 따라서 이 공식 스티치 MCP 서버에서 제공하는 여섯 가지 도구가 있습니다. 좋습니다. 이제 이것으로 끝났고, 안티그래비티가 스티치 MCP를 사용하도록 구성했습니다.06:58

자, 그럼 다음 단계로 넘어가 볼까요? 네, 다음 단계는 이제 스티치와 상호작용하는 겁니다.07:12

그래서 제가 직접 물어보려고 하는데, 제 스티치 프로젝트들을 모두 나열해 주시겠어요. 사실 저는 에이전트 매니저에게 직접적으로 안티-중력에 대해 문의하려고 왔어요.07:17

제가 이전에 만들었던 스티치 프로젝트들을 모두 알려달라고 에이전트에게 요청할게요. 자, 결과를 확인해볼까요. 여기 보시는 것처럼, 제가 이 데모를 위해 준비했던 최근의 스티치 프로젝트 목록이 나왔네요.07:28

자, 제 스티치 프로젝트로 바로 넘어가 볼까요? 여기에 유튜브 데모, 에이전트 API, 웨비나 등록 같은 프로젝트들이 나열되어 있습니다.07:40

그리고 제가 다시 확인해 보면, 정확한 프로젝트 제목을 알려주는 걸 확인할 수 있습니다.07:47

이것으로 연결되어 정상적으로 작동하는 것을 확인할 수 있습니다.07:53

이제 저희가 하려는 것은 안티-그래비티를 활용해서 디자인하고 만들고, 스티치에서 직접 이것을 하는 대신에 진행하는 것입니다.07:57

그래서 그거에 맞춰서, 제가 할 일은 자세한 프롬프트를 제공하는 거예요. 텍스트 프롬프트고요. 그리고 Stitch에서도 동시에 확인하면서, 여기 프롬프트 하나가 실제로 프로젝트도 만들고 디자인도 어떻게 만들어내는지 살펴보려고 합니다.08:06

자, 여기 제가 줬던 자세한 요청 사항이에요.08:19

인공지능과 수리아를 활용하여 FinSight라는 새로운 스티치 프로젝트를 만들고, 데스크톱 웹 앱, FP&A, 시나리오 시뮬레이션에 필요한 화면들을 생성해주세요. 여러 개의 화면을 준비해 드렸으니 참고하시기 바랍니다.08:22

첫 화면이 어떻게 구성되길 원하는지 정확히 설명해 주시고, 두 번째 화면, 세 번째 화면, 그리고 다른 화면들도요. 세 번째 화면에는 기본적으로 여러 개의 카드들이 있습니다.08:36

스크린도 같이 설명하고 있어요. 그래서 제가 프롬프트를 굉장히 자세하게 주고, 여러분들과 함께 기능을 테스트하면서 얼마나 잘 이해하는지 확인해 보려고 하고 있습니다.08:46

프롬프트를 바로 여기에서 가져오고 있어요. 제가 실행하기 전에, 두 가지를 병렬로 열어서 모든 걸 확인할 수 있도록 해볼게요.08:57

여기서 이렇게 진행할게요.09:06

그리고 보시는 것처럼 제가 최근 진행했던 프로젝트들이에요. 이 특정 프로젝트는 없죠, 그렇죠?09:09

그래서, 이 명령어를 실행해서 이게 어떻게 작동하는지 한번 볼게요. 좋아요.09:14

에이전트가 지금 생각 중이고, 저희한테 프로젝트를 만들 수 있도록 허락을 요청할 겁니다. 그래서 MCP 도구를 이용해서 프로젝트를 바로 만들려고 하는 거죠.09:21

저희를 위한 프로젝트예요. 그냥 수락할게요. 새로고침 해볼까요.09:34

자, 됐어요. 이미 이걸 가져왔고, 여기 평행으로 이렇게 진행하는 걸 볼 수 있네요.09:40

그래서 이것은 저희가 안티-그래비티에서 보낸 프롬프트인데, 지금 이 작업을 진행하고 있는 중입니다.09:46

여기서 어떤 작업을 하고 있는지 확인하실 수 있습니다. 이것은 생성되고 있는 첫 번째 화면이고, 화면별로 진행할 것 같습니다.09:52

잠깐만 기다려 볼게요, 생성하는 데 시간이 좀 걸리거든요.10:01

신기한 건, 남은 시간을 예측해준다는 거예요. 처음에 100초라고 나왔는데, 이제는 20초 남았다고 그러네요. 꽤 멋지죠? 이건 최근 업데이트인 것 같아요. 제가 이 부분에 신경 쓴 적은 없는 것 같은데, 얼마나 기다려야 하는지 알려주니 정말 좋네요.10:05

잠깐만요, 좋아요. 그럼 첫 번째 화면이 있고, 이제 실제로 두 번째 화면을 만들라는 요청이 들어온 거죠. 한 단계씩 진행하고 있고, 여기에서 첫 번째 화면을 확인할 수 있습니다.10:19

정확히 우리가 요청했던 그대로네요. 그래서 저는 이 부분과는 상호작용하지 않겠습니다.10:32

제가 지금 여기 바로 디자인되고 있는 걸 보여드리고 있어요. 스티치로 넘어갈 필요가 전혀 없어요. 그냥 디자인된 걸 보여달라고 요청할 수 있어요. 화면 캡처 같은 것도 할 수 있겠죠.10:35

그리고 어떤 세부 작업들을 하고 있는지 자세하게 보여주네요, 그렇죠? 화면 하나 생성, 화면 두 개 생성, 최종 완료 및 프로젝트 상세 정보 제공. 이런 작업들을 수행하려고 하는 거죠. 한번 어떻게 됐는지 확인하기 위해, 여기 확대해서 볼까요?10:46

지금까지 설계된 모습이 이렇습니다. 인공지능으로 완전히 새로운 금융 계획을 구상하는 것이죠. 마치 왼쪽에 있는 히어로 이미지처럼요.10:58

자, 오른쪽 화면입니다. 이제 두 번째 화면 디자인을 시작했고, 대략 110초 정도 걸릴 것 같습니다. 조금 기다렸다가 결과물을 다시 보여드리겠습니다.11:04

그러니까 세 개의 화면을 디자인해야 해요. 첫 번째 화면은 이미 만들었고, 이건 두 번째 화면이고, 세 번째 화면도 똑같이 작업할 거예요. 여기서 우리가 이해해야 할 중요한 건, 저희가 이 반중력에...11:16

자세한 내용과 함께 명령을 내릴 수 있고, 스티치 안에서 모든 것을 직접 디자인할 수 있어요. 작업이 끝나면 다시 돌아오겠습니다. 자, 보니까 두 번째 화면 디자인도 완료되었네요.11:26

자, 이것이 시뮬레이터이고, 지금 세 번째를 보고 있어요. 제 입력이 필요하다고 묻네요. 그냥 수락하고, 그때 이 녀석이 뭘 디자인했는지 한번 살펴볼 수 있겠네요. 두 번째 디자인을 보셨죠? 정말 훌륭하고, 지금까지 만들어진 디자인이 둘 다 마음에 드네요.11:38

너무 좋아요.11:49

홈페이지 로그인 페이지고, 그리고 여기 두 번째 거예요. 네, 디자인 작업이 세 번째까지 완료되도록 조금 더 시간을 줄게요. 자, 거의 다 끝났나 보네요.12:00

그리고 여기서 권한을 요청하는 화면 목록을 보여달라는 메시지가 뜹니다. 오른쪽을 보시면 세 번째 화면도 만들어졌고, 확대해서 보면 이렇게 멋진 화면이 만들어졌네요.12:11

제가 요청했던 내용이 이거였죠, 맞죠? 제가 프롬프트랑 댓글 섹션에도 적어놨는데, 제가 딱 요청했던 게 이거예요. 그래서 저희가 합쳐놓은 세 개의 화면이 보일 거예요.12:25

다음 단계로, 이미 생성된 걸 확인할 수 있으니까 스티치를 따로 사용할 필요 없이, 안티 그래비티를 이용해서 세 개의 화면 HTML 코드를 가져오도록 요청할 거예요.12:35

이 프로젝트는 데이터를 가져올 수 있는데, 이게 MCP 서버의 도구 중 하나예요. 저희의 아이디어는 스티치에서 코드를 따로 내보내고 가져올 필요가 없다는 거예요.12:47

여기서 바로 이 모든 작업을 진행할 수 있잖아요. 바로 여기에서 진행하고, 코드가 준비되면 전체 프로세스 애플리케이션을 만들도록 요청할 거예요. 정확히 그렇게 하고 있고, 며칠 내에 끝낼 수 있을 것 같아요.13:01

자, 됐네요. 작업이 완료되었고, 튜토리얼이 만들어졌어요.13:16

그래서 핀사이트 프로젝트와 이 시뮬레이터들을 만들었죠. 크롬 브라우저에 보여달라고 요청해볼게요. 뭐가 나올지 한번 봅시다. 크롬 브라우저가 여기 내장되어 있으니까, 잘 보일 거라고 기대합니다.13:20

자, 다 됐네요. 이게 저희가 요청했던 로그인 화면입니다. 여기 바로 보이시죠? 이게 시뮬레이션입니다.13:33

시뮬레이션이 작동하지 않는 것 같으니, Antigravity에게 이 부분을 작업하도록 요청할게요.13:44

그리고 이것이 시나리오 라이브러리죠? 우리가 요청했던 바로 그거예요. 이제 Antigravity로 돌아가서, 전체 애플리케이션을 작동시키고 연결해 줄 수 있는지 직접 물어볼게요.13:48

여러 페이지로 구성된 웹 애플리케이션으로 만들고 시뮬레이션은 작동하지 않으니, 모든 것이 의도한 대로 작동하는지 확인해야겠어요. 그래서 Antigravity 에이전트에게 좀 더 많은 흥미로운13:59

작업들을 시켜서 이 작업을 완료하고 엔드투엔드 시나리오를 제공해 주기를 바랍니다.14:10

잠깐만 기다려볼게요, 뭐가 돌아올지 보면서요. 좋아요, 작업을 완료했고, 모든 걸 연결해서 브라우저에 로그인 HTML을 띄웠네요.14:15

그래서 이게 안티그래비티가 스티치의 디자인을 활용해서 스티치 내부로 들어가지 않고 만들 수 있는 최종 웹사이트입니다.14:27

자, 한번 살펴볼까요? 제가 금융 계획 FP&A 웹사이트를 만들라고 요청했더니, 이렇게 멋진 로그인 페이지가 나왔네요.14:34

여기 단어들도 살짝 움직이는 애니메이션이 보이고 로고에도 적용되어 있어요. 그리고 로그인 화면처럼 구성되어 있네요. 클릭하면 시뮬레이션 대시보드로 들어가는데, 이게 바로 그 시뮬레이션 대시보드입니다.14:42

정말 페이스북&앰프 분석처럼 뭔가 만들어보고 싶었어요.14:55

여기 레버를 움직이면 여기에서 변화하는 걸 확인할 수 있어요. 운영 비용을 변경하거나 인원수를 조정해도 모든 것이 연결되어 있잖아요. 마케팅 비용을 변경하면 매출과도 모든 것이 연결되죠.14:59

그리고 여기서는 기본 모델과 시뮬레이션 시나리오를 비교해 볼 수 있는, 훨씬 더 흥미로운 기능을 제공해서 정말 멋지네요.15:11

분석 변동도 보여주고, 시뮬레이션도 돌릴 수 있네요. 결과도 보여줄 수 있고요. 여기 연결되어 있네요. 세 페이지 정도 되는 웹사이트 같은 거죠?15:21

여기 시나리오 라이브러리도 함께 제공됩니다.15:35

저희는 또한 미묘한 애니메이션 효과도 확인할 수 있습니다. 즉, 만약 여러분이 재무 FP&A 부서에 있거나 CFO실에 있거나, 아니면 CFO 자신이라면, 매 분기마다 이와 같은 시뮬레이션을 수행할 수 있다는 것이죠.15:38

다양한 비용, 운영 비용, 인원 및 관련 비용 등을 고려하면 전체 잠재 매출을 시뮬레이션할 수 있습니다. 실제로 FP&A 팀에서 흔히 하는 일입니다.15:51

여기서는 이렇게 하는 걸 꽤 빠르게 할 수 있어요.16:05

물론, 몇 가지 알아두셔야 할 점은 현재 이 웹사이트는 완전히 가상이고 아직 로그인 기능과 연결되어 있지 않다는 겁니다. 또한 실제 데이터도 아직 없지만, 위에 언급된 모든 기능들을 시험해 보실 수 있습니다.16:08

예를 들어, 아주 쉽게 구현할 수 있죠. 여기 보이는 로그인 기능을 Firebase를 통해 연결하면, 실제 인증 및 권한 부여를 모두 처리할 수 있습니다.16:21

그렇게 설정하면 그걸 할 수 있고, 코딩 한 줄도 안 쓰고 안티-그래비티랑 Firebase랑 같이 작업할 수 있어요.16:33

그리고 로그인하면, 이런 모든 세부 정보가 데이터베이스에서 가져와질 거예요.16:41

네, 그거(포인트)도 가능하도록 만들어야 할 것 같아요. 그런 영상에 관심 있으시면 댓글로 알려주세요. 완전한 백엔드와 제대로 된 인증 시스템을 갖춘 풀스택 애플리케이션을 만드는 완전히 다른 주제의 영상이 될 수 있을 거예요.16:45

권한을 얻는 것도 가능합니다. 하지만 오늘날에는 노코드 도구나 반중력 기술 등을 활용하면 충분히 가능해요. 관심 있으시면 말씀해주세요. 오늘은 이 정도만 말씀드릴게요.16:59

이걸 공유하고 싶어서요, 저희가 스티치 MCP 서버의 강력함을 정말 활용했거든요. 스티치인데, 아시겠지만 오늘 제가 따로 내보낼 필요가 없었어요, 그냥 그랬어요.17:10

여기서 코드를 추출해서 반중력 환경에 들어가려고 했었는데, 그냥 반중력 환경 안에서 바로 작업하고, 디자인을 활용해서 여러분들 앞에서 완전한 애플리케이션을 만들 수 있었어요. 이게 바로 아이디어였고, 유익하셨기를 바랍니다.17:21

궁금한 점이 있거나, 좋았거나, 아니면 별로였다거나 하는 의견이 있다면 댓글로 꼭 알려주세요! 여러분의 피드백을 듣고 콘텐츠 개선에 반영하고 싶습니다.17:36

물론 처음 오신 분들은 앞으로 비슷한 영상 튜토리얼을 받아보시고 싶으시면 구독 버튼을 눌러주시면 됩니다.17:46

그리고 영상이 마음에 드셨다면 좋아요 버튼도 눌러주세요. 다시 한번 시간 내주셔서 감사합니다.17:54

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