00:00:00이제 AI 에이전트들의 디자인 실력이 꽤 좋아졌습니다.
00:00:02요즘은 AI가 만든 사이트의 요소들이 깨져 있거나 하는 문제도 거의 없죠.
00:00:06하지만 모든 모델이 동일한 데이터를 학습했기 때문에, 디자인 결과물이 항상
00:00:10너무 비슷하고 평범하다는 단점이 있습니다.
00:00:11Claude 모델조차 이런 실수를 하지 않으려면 특별한 프롬프트가 필요할 정도입니다.
00:00:15Google Stitch는 디자인을 위해 특별히 제작된 도구로, 여러분의
00:00:19Claude Code 워크플로우에 직접 연결해서 사용할 수 있습니다.
00:00:21그래서 이번 영상에서는 Stitch와 Claude Code를 함께 사용하는 4가지 방법을 살펴보며,
00:00:26여러분의 앱이 흔한 AI 생성 사이트처럼 보이지 않게 만드는 법을 알아보겠습니다.
00:00:30새로운 Stitch 업데이트는 UI 구축을 위해 디자인 시스템을 사용하는데,
00:00:34이 시스템은 웹사이트 UI 가이드를 구성하는 모든 기능들을 기반으로 하며,
00:00:38여기에는 색상, 테마, 글꼴 등 다양한 필드가 포함됩니다.
00:00:41이러한 기능들은 실제로 design.md 파일을 통해 형성됩니다.
00:00:45이 파일 덕분에 디자인을 한 에이전트에서 다른 에이전트로 전달하는 것도 가능하죠.
00:00:49이 design.md 파일을 디자인을 구현할 어떤 에이전트에게든 전달하기만 하면,
00:00:54전체적인 스타일 테마를 완벽하게 맞출 수 있습니다.
00:00:56이게 가능한 이유는 이 파일이 에이전트에 특화되어 있기 때문입니다.
00:00:59에이전트가 디자인 의도를 쉽게 파악할 수 있도록 더 정밀한 언어를 포함하고 있죠.
00:01:04또한 화면에 모든 디자인 시스템을 시각화해주므로,
00:01:08텍스트만 보고 스타일을 해석할 필요가 없습니다.
00:01:10색상과 글꼴을 나란히 배치해서 실제로 봄으로써,
00:01:14앱이 구현되었을 때의 느낌을 미리 파악할 수 있습니다.
00:01:16Stitch로 무엇을 만들든, Stitch가 가장 먼저 하는 작업은
00:01:21design.md와 디자인 시스템을 생성하는 것입니다.
00:01:22프롬프트에서 명시적으로 지시하지 않더라도 말이죠.
00:01:25디자인 시스템이 확정되면, 어떤 사이트를 만들더라도
00:01:30여러 페이지나 재생성 과정 전반에 걸쳐 일관성을 유지할 수 있습니다.
00:01:32이것이 기존 Stitch 작업에서 가장 큰 문제였던 디자인 일관성 유지의
00:01:36어려움을 완벽하게 해결해 줍니다.
00:01:39하지만 Stitch가 자동으로 만드는 것에만 의존하지 않고,
00:01:43직접 디자인 시스템을 만들 수도 있습니다.
00:01:45요구 사항에 맞춰 테마를 설정하거나, 이미 디자인 파일이 있다면
00:01:49업로드만 하세요. 자동으로 디자인 시스템으로 통합하고
00:01:53시각화까지 해줍니다.
00:01:54중요한 점은 어떤 design.md를 사용하든
00:01:58적절한 구조를 갖추고 있는지 확인해야 한다는 것입니다.
00:01:59이 구조는 특히 Stitch 같은 에이전트에 최적화되어 있어,
00:02:04디자인 의도를 효율적으로 이해하도록 돕습니다.
00:02:06우리는 종종 Claude나 다른 에이전트와 함께 앱 아이디어를 브레인스토밍합니다.
00:02:09그럴 때 브레인스토밍 세션의 디자인을 Stitch로 가져오고 싶다면,
00:02:13디자인 스타일을 design.md 파일 형태로 Stitch에 전달하면 됩니다.
00:02:17Stitch 관련 모든 스킬이 담긴 Google의 공식 skills 저장소에서
00:02:21가져온 디자인 파일 구조를 Claude에게 알려줄 수 있습니다.
00:02:25예시들을 통해 Stitch에 최적화된 디자인 파일 템플릿을 얻을 수 있습니다.
00:02:29따라서 어떤 에이전트를 사용하든, 만들고 싶은 웹사이트의 스타일을
00:02:33템플릿과 함께 제공하면 스타일 가이드를 잘 따르는
00:02:38design.md 파일을 생성해 줄 것입니다.
00:02:39에이전트가 상세한 design.md를 생성하면, 이를 Stitch로 가져가서
00:02:44새 디자인 시스템 생성 메뉴의 design.md 섹션에 붙여넣기만 하면 됩니다.
00:02:48디자인 저장 버튼을 누르는 순간, 해당 디자인에 대한 시각화가 생성됩니다.
00:02:52시각화가 완료되면, 이를 기반으로 Stitch에게
00:02:56새로 만든 디자인 시스템을 사용해 UI를 구현해달라고 요청할 수 있습니다.
00:02:59그러면 Stitch는 design.md의 정확한 스타일을 반영하여
00:03:03여러분이 만든 시스템이 적용된 디자인을 구현합니다.
00:03:05이러한 디자인 시스템을 사용하면 페이지를 몇 개를 만들든 반복해서
00:03:10동일한 디자인 스타일을 유지할 수 있습니다.
00:03:12이미 Stitch에서 프로젝트를 만든 적이 있고 거기서 design.md를 추출하고 싶다면,
00:03:16Google에서 만든 스킬을 사용하면 됩니다.
00:03:19해당 스킬 중 design.md 스킬은 Stitch 프로젝트를
00:03:25Stitch 워크플로우에 최적화된 템플릿 형태의 design.md로 변환해 줍니다.
00:03:28저희 콘텐츠가 마음에 드신다면 하이프(hype) 버튼을 눌러주세요.
00:03:32더 좋은 콘텐츠를 만들고 더 많은 분께 다가가는 데 큰 힘이 됩니다.
00:03:35Stitch의 기능은 놀랍지만, 특정 분야의 웹사이트를 위한
00:03:39최적의 UX를 구현하는 데는 여전히 한계가 있을 수 있습니다.
00:03:42항상 처음부터 끝까지 새로 디자인하는 것이 최선은 아닙니다.
00:03:44기존 웹사이트들은 해당 분야에서 실제로 작동하는 패턴을 기반으로 구축되었으므로,
00:03:48그 패턴을 모방하는 것이 사용자에게 실질적으로 도움이 되는
00:03:53웹사이트를 만드는 데 유리합니다.
00:03:54이전에는 AI로 작업할 때 스크린샷을 제공하고
00:03:58디자인 도구에게 그 디자인을 복사해달라고 요청하곤 했습니다.
00:04:00그러면 레이아웃, 컴포넌트 등 모든 것을 그대로 복제하려고 했죠.
00:04:04하지만 Stitch의 새로운 업데이트가 이를 바꿨습니다.
00:04:06Stitch의 리디자인(redesign) 기능을 사용하면 스크린샷을 제공해도
00:04:10단순히 복사하지 않습니다.
00:04:11그 스크린샷을 스타일 가이드로 활용합니다.
00:04:12참조 이미지에서 패턴, 컴포넌트 배치, 디자인 언어를 추출하여
00:04:17여러분의 웹사이트에 적용합니다.
00:04:18즉, 기존 패턴 위에 여러분만의 독창적인 결과물을 만드는 셈입니다.
00:04:22리디자인 기능을 사용하려면 스크린샷이 필요한데,
00:04:25섹션별로 일일이 캡처하는 것은 너무 번거롭습니다.
00:04:28대신 GoFullPage 같은 확장 프로그램을 사용해 전체 페이지를 한 번에 캡처하면
00:04:33스타일 참조를 훨씬 간편하게 제공할 수 있습니다.
00:04:35디자인을 참고하고 싶은 사이트의 스크린샷을 주면,
00:04:39이를 스타일과 컴포넌트 배치의 기준으로 삼아 유사한 UI를 생성합니다.
00:04:45또한 Nano Banana의 이미지 생성 기능을 사용하여 각 섹션에 어울리는
00:04:50UI 스타일의 이미지들을 생성해 넣습니다.
00:04:51다른 웹사이트의 스타일을 가져오는 방법은 또 있습니다.
00:04:54웹사이트 링크를 복사한 다음 디자인 시스템 메뉴에서
00:04:59어떤 사이트든 design.md 파일로 디자인을 임포트할 수 있습니다.
00:05:03링크만 제공하면 Stitch가 사이트를 크롤링하여
00:05:06스타일과 타이포그래피 정보를 자동으로 가져옵니다.
00:05:09하지만 가끔 Stitch가 의도했던 스타일을 제대로 파악하지 못할 때도 있습니다.
00:05:12그럴 때는 원하는 스타일이 담긴 대략적인 스케치나
00:05:17와이어프레임을 직접 업로드하면 됩니다.
00:05:18사용하고 싶은 구체적인 디자인 테마를 지정할 수도 있습니다.
00:05:21이러한 참조 자료와 테마 설정을 통해 생성된 UI는 와이어프레임 및
00:05:26스타일 가이드와 정확히 일치하여 요구 사항에 꼭 맞는 결과물을 보여줍니다.
00:05:31수정이 필요한 특정 부분이 있다면,
00:05:34Stitch의 주석 달기 및 편집 기능을 활용할 수 있습니다.
00:05:36원하는 방식대로 주석을 달고 적용 버튼을 누르면
00:05:40지시한 스타일대로 즉시 수정됩니다.
00:05:42더 진행하기 전에 스폰서 소식을 잠시 전해드리겠습니다.
00:05:45바로 Uptime Robot입니다.
00:05:46OpenAI나 Anthropic 같은 AI API를 활용해 앱을 만들다 보면
00:05:49상태 코드는 200 OK인데 응답 내용이 엉망일 때가 있습니다.
00:05:52사용자가 불만을 제기하고 나서야 앱이 망가진 걸 알게 되곤 하죠.
00:05:56그럴 때 Uptime Robot이 필요합니다.
00:05:57사용자가 발견하기 전에 먼저 문제를 잡아내거든요.
00:05:59API에 핑을 보내 상태 코드뿐만 아니라 실제 응답 내용까지 확인하고,
00:06:04Slack이나 이메일 등으로 즉시 알림을 보내줍니다.
00:06:06AI 엔드포인트를 모니터링하고 API 크레딧 한도 도달을 추적하여,
00:06:10고객 지원 요청이 들어오기 전에 오류를 해결할 수 있습니다.
00:06:12실시간 업타임 통계와 장애 이력을 보여주는 공개 상태 페이지도 제공합니다.
00:06:16설정은 몇 초면 끝납니다.
00:06:18엔드포인트를 추가하고 예상 응답과 알림 수단을 선택하면 바로 시작입니다.
00:06:2150개의 모니터를 무료로 사용해 볼 수 있는 프리 티어가 있으며,
00:06:24직접 호스팅하는 것보다 저렴한 월 7달러로 API 모니터링을 이용할 수 있습니다.
00:06:28올해 말까지 유효한 코드 'AI Labs'를 사용해 10% 할인을 받으세요.
00:06:32고정 댓글의 링크를 클릭하고 지금 바로 시작해 보세요.
00:06:35또 다른 개발 방법은 Stitch의 기능을 Claude Code처럼
00:06:40에이전트 스킬을 지원하는 기존 에이전트와 연결하는 것입니다.
00:06:44Google은 이를 위해 다양한 스킬을 개발하여 에이전트가
00:06:48Stitch와 원활하게 작업할 수 있는 추가 기능을 제공하고 있습니다.
00:06:51저장소의 단계를 따라 필요한 스킬을 설치할 수 있습니다.
00:06:54워크플로우에서 가장 중요한 것은 'Enhance Prompt(프롬프트 강화)' 스킬입니다.
00:06:58이 스킬은 여러분의 모호한 프롬프트를 Stitch가 가장 잘 이해할 수 있는
00:07:02최적화된 형태의 프롬프트로 변환해 줍니다.
00:07:05Stitch는 상세한 디자인 설명보다 형용사를 통해 분위기를 파악하는 데
00:07:09의존하기 때문에, 자주 쓰이는 키워드 참조를 포함하고 있습니다.
00:07:12그 외에도 전체 웹사이트 구축을 위한 'Stitch Loop' 스킬이 있습니다.
00:07:16에이전트가 Chrome 개발자 도구를 사용해 Stitch에서 웹사이트를
00:07:20자율적인 루프 패턴으로 반복 구축할 수 있게 해줍니다.
00:07:23핵심 아이디어는 적절한 프롬프트 추적을 유지하며 다음 단계로 전달하는 것입니다.
00:07:28이 스킬들이 모든 과정을 직접 관리하므로, 원샷(one-shot)으로
00:07:32앱을 빌드하는 것에 가장 가까운 워크플로우를 제공합니다.
00:07:33단, 이러한 스킬을 쓰기 전에 Stitch MCP가 연결되어 있는지 확인해야 합니다.
00:07:38Stitch가 내부적으로 디자인을 생성하고 가져올 때 사용하는 핵심 도구이기 때문입니다.
00:07:41채널에 MCP 설치 과정과 흔히 발생하는 문제 해결법을 담은
00:07:46영상이 있으니 참고해 보시기 바랍니다.
00:07:49MCP나 코드를 통해 Stitch에서 디자인을 내보내면,
00:07:53보통 모든 내용이 하나로 뭉쳐진 거대한 HTML 파일이 생성됩니다.
00:07:56하지만 대부분의 앱은 React 기반의 컴포넌트 구조이므로,
00:08:01HTML을 React로 매핑하는 것이 에이전트에게는 부담이 될 수 있습니다.
00:08:03이를 단순화하기 위해 'React component' 스킬을 사용할 수 있습니다.
00:08:06Stitch 디자인을 적절한 검증 지표를 갖춘 모듈형 컴포넌트로 변환해 줍니다.
00:08:10스크립트를 사용해 디자인을 검증하고 가져오므로 컴포넌트 매핑이 훨씬 수월해집니다.
00:08:15이 워크플로우를 위해 사용하려는 순서가 나열된 Clod.md를 만들 수 있습니다.
00:08:20다음과 같은 순서를 따라야 합니다.
00:08:21먼저 Enhance prompt 스킬로 모호한 프롬프트를 Stitch 전용으로 변환하여
00:08:26입력이 정확히 전달되도록 합니다.
00:08:28그 다음 Stitch loop를 사용해 디자인을 구축해야 합니다.
00:08:31구축이 끝나면 React 컴포넌트를 사용하여 앱에 디자인을 구현합니다.
00:08:35만들고 싶은 랜딩 페이지의 프롬프트를 입력하면,
00:08:39Clod.md에 정의된 지침을 따르게 됩니다.
00:08:41먼저 Enhance prompt 스킬을 로드하여 사용 가능한 도구들로
00:08:45강화된 프롬프트를 생성합니다.
00:08:47프롬프트가 준비되면 다음 단계로 진행할지 승인을 요청합니다.
00:08:50승인 후 Stitch loop 스킬을 로드하고 Stitch MCP를 사용해 프로젝트를 생성합니다.
00:08:56프로젝트가 생성되면 강화된 프롬프트를 Stitch에 보내고,
00:09:00Stitch는 디자인 시스템을 만든 뒤 실제 디자인을 생성합니다.
00:09:04이미지가 필요한 부분은 디자인 과정의 일부로 이미지 생성을 활용합니다.
00:09:08디자인이 완료되면 다음 단계로 넘어가 React component 스킬로
00:09:12컴포넌트 구조를 만들고, 사용 중인 프레임워크에 최적화된 앱을 구현합니다.
00:09:18개발 서버를 실행해 보면 버튼의 호버 효과까지 포함하여
00:09:22Stitch의 디자인이 정확히 매핑된 것을 볼 수 있습니다. 이 워크플로우를 통해
00:09:26기능이 완비된 앱을 훨씬 쉽고 빠르게 만들 수 있습니다.
00:09:28여기서 사용된 Clod.md와 모든 리소스는
00:09:33AI Labs Pro에서 이용 가능합니다.
00:09:34이 영상과 이전 영상들의 모든 리소스를 다운로드하여
00:09:38여러분의 프로젝트에 바로 활용해 보세요.
00:09:40저희 채널을 응원하고 싶으시다면 이 방법이 가장 좋습니다.
00:09:44링크는 설명란에 있습니다.
00:09:46처음부터 직접 다 만드는 것이 항상 좋은 건 아니며, 컴포넌트도 마찬가지입니다.
00:09:50순수 React 컴포넌트로 생성된 UI는 너무 정적이고 외형에만 치중되어 있어,
00:09:54상호작용이나 애니메이션 효과를 넣는 데 추가적인 노력이 듭니다.
00:09:58대신 UI 라이브러리를 사용해 보세요. 상호작용 기능이 내장되어 있어
00:10:02생성 과정이 훨씬 쉬워지고 UI에 생동감을
00:10:07불어넣을 수 있습니다.
00:10:08이를 더 쉽게 하기 위해 Google은 ShadCN UI 스킬을 제공하는데,
00:10:13Stitch의 결과물을 ShadCN 컴포넌트로 변환할 때 가이드를 제공합니다.
00:10:16이 스킬은 기본적으로 이러한 컴포넌트들을 앱 전체에
00:10:21올바르게 구현하는 방법에 대한 상세한 가이드입니다.
00:10:22ShadCN은 다양한 레지스트리 연결을 지원하므로,
00:10:26이를 통합하여 기능을 더욱 확장하고 활용할 수 있습니다.
00:10:30단, 원활한 워크플로우를 위해 빌드 전 ShadCN MCP를
00:10:35미리 설정해 두는 것이 좋습니다.
00:10:36효과적인 사용을 위해 Clod.md 파일을 설정하고 지침을 포함하여,
00:10:41Stitch MCP를 쓸 때 자동으로 ShadCN 스킬을 사용하여 디자인을
00:10:47컴포넌트로 변환하도록 만드세요.
00:10:48레지스트리를 추가할 수 있으므로 프로젝트에 쓸 것을 지정할 수 있습니다.
00:10:52예를 들어, 저희는 프리미엄한 느낌을 주는 컴포넌트들이 포함된
00:10:57Glassmorphism과 Motion Primitives를 선택했습니다.
00:11:00프로젝트의 요구 사항에 가장 잘 맞는 것을 선택하면 됩니다.
00:11:03이미 Stitch에서 UI를 만든 경우, 이를 ShadCN 컴포넌트가 적용된
00:11:07앱으로 변환할 수 있습니다.
00:11:08구현하려는 프로젝트 이름을 지정하고
00:11:12앱에 구현해달라고 요청하기만 하면 됩니다.
00:11:13그러면 지정된 프로젝트를 가져와 ShadCN UI 스킬을 로드하고,
00:11:18지정한 레지스트리와 ShadCN MCP 도구 호출을 사용해
00:11:23앱 전체를 구현합니다.
00:11:24구현이 완료되면 앱은 Stitch에서 본 것과 똑같지만,
00:11:27내부는 ShadCN UI 컴포넌트로 구축된 상태가 됩니다.
00:11:29구현이 매우 쉬워지기 때문에 한 번에 생성된 앱이라도
00:11:34훨씬 더 인터랙티브해진다는 큰 차이점이 생깁니다.
00:11:36이상으로 영상을 마칩니다.
00:11:38저희 채널을 후원하고 이런 영상을 계속 제작하는 데 도움을 주시려면
00:11:42아래의 'Super Thanks' 버튼을 이용해 주세요.
00:11:44언제나 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.