말도 안 됩니다... 구글 스티치와 클로드의 디자인 논쟁은 이걸로 끝났습니다
AAI LABS
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology
Transcript
00:00:00Gemini는 다른 분야에서는 대등하지 못했음에도 불구하고 디자인에 있어서는
00:00:05최고의 모델이었으며, 특히 워크플로우에서 여러 번 사용한 디자인 도구인 Stitch가 훌륭했죠.
00:00:09Stitch가 여러 새로운 기능을 포함한 2.0 업데이트를 출시하면서 더욱 좋아졌고,
00:00:14격차를 더욱 벌렸습니다. 하지만 Anthropic 또한 Opus 4.7과
00:00:19Claude design을 출시하며 디자인 분야에 뛰어들었고, 사람들이 이것을
00:00:24“Figma의 종말”이라고 부를 정도로 큰 충격을 주었습니다. 하지만 진짜 질문은 어느 쪽이 실제로 더 나은가 하는 것입니다.
00:00:30이를 결판내기 위해 여러 카테고리에 걸쳐 테스트를 진행할 예정이며, 마지막에는
00:00:34여러분의 워크플로우에 어느 쪽이 적합할지 알게 될 것입니다. Claude design과 Google Stitch 모두
00:00:39서로를 차별화하는 많은 기능을 가지고 있습니다. Claude design은 Opus 4.7과 함께 출시되었으며,
00:00:45상호작용 기능 덕분에 빠르게 “Figma 킬러”로 인기를 얻었습니다.
00:00:49모델 자체가 디자인에 매우 능숙해졌고, 디자인 도구와 결합하여 결과물이 크게 향상되었습니다.
00:00:54반면 Google Stitch는 출시된 지 꽤 되었지만, 구글이
00:00:58다른 모든 모델보다 디자인에 압도적으로 뛰어난 Gemini 3를 출시하기 전까지는 그다지 좋지 않았습니다.
00:01:04Stitch와 결합하여 디자인이 비약적으로 발전했죠. 이제 각 도구가
00:01:08어떤 부분에서 앞서나가는지 살펴보겠습니다. Claude design에는 프레젠테이션을 생성하고
00:01:13그 안에 발표자 노트를 작성할 수 있는 기능이 있습니다. 하지만 Stitch에는 이런 기능이 없는데,
00:01:17Stitch는 UI 전용이며 모바일 및 웹 인터페이스 외에 다른 디자인 기능은 제공하지 않기 때문입니다.
00:01:23Claude design에서는 GitHub 저장소를 연결하여 기존 프로젝트를 참조하도록 할 수도 있는데,
00:01:28이를 통해 Claude는 디자인 스타일을 가져와 그 위에 다음 디자인을 구축할 수 있습니다.
00:01:32Stitch는 이 작업을 약간 다르게 처리합니다. 디자인 시스템을 사용하는데,
00:01:37Stitch에 호스팅된 다른 웹사이트의 링크를 제공하는 것만으로 디자인 시스템을 복사할 수 있으며,
00:01:42거기서 정확한 스타일을 가져와 이후 디자인에 사용될 시스템을 만듭니다.
00:01:46수정 작업의 경우, Claude design은 다시 프롬프트를 입력할 수도 있지만
00:01:51변경하려는 영역을 직접 클릭하면 디자인에 반영됩니다. 다르게 원하는 부분에
00:01:56직접 댓글을 달면 해당 부분에 변경 사항이 즉시 적용되기 시작합니다.
00:02:00댓글을 모아서 Claude에게 한꺼번에 보낼 수도 있죠.
00:02:04Stitch는 여기에서 다른 방식을 취합니다. 텍스트 변경 외에는 직접 수정할 수 없습니다.
00:02:09따라서 색상이나 글꼴 크기 같은 변경을 원하면 선택한 영역에 댓글을 달거나
00:02:14주석을 추가한 다음, Gemini가 변경 사항을 통합하도록 댓글을 보내야 합니다.
00:02:19음성 입력도 차이가 있습니다. Claude design은 타이핑 대신 음성을 사용하여 프롬프트를 입력할 수 있게 해줍니다.
00:02:24하지만 이 지점은 Stitch가 승리하는 부분인데, Stitch의 음성 캔버스 기능은
00:02:28기본적으로 모델과 실시간 대화를 나누며 원하는 디자인에 대해 설명하는 방식이기 때문입니다.
00:02:33모델이 디자인에 관한 질문을 던지고 디자인을 생성하며, 모든 과정이 대화로 이루어집니다.
00:02:37또한 Stitch에는 별도의 창에서 디자인이 데스크톱, 모바일, 태블릿에서 어떻게 보이는지
00:02:42확인하고 직접 상호작용할 수 있는 실시간 미리보기 기능이 있습니다.
00:02:47Claude design에는 이러한 별도의 미리보기 기능이 없습니다. 대신 동일한 창에 UI를 표시하여
00:02:52다른 미리보기 화면으로 이동하지 않고 요소들과 직접 상호작용할 수 있지만,
00:02:57Google Stitch처럼 반응형 레이아웃을 확인할 수는 없습니다. Claude design은
00:03:01팀 협업을 위해 만들어졌으므로 편집 및 댓글 권한을 별도로 설정하여
00:03:06프로젝트를 공유할 수 있는데, Stitch에는 이런 기능이 없습니다. Stitch에서는 그냥
00:03:11프로젝트를 공유하고 모두가 작업하게 할 뿐, 별도의 권한 설정은 없습니다.
00:03:15Stitch가 훨씬 성숙한 프로젝트이고 Claude design이 최근에 출시된
00:03:20프로젝트임에도 불구하고, 기능 면에서는 Claude design에 점수를 주고 싶습니다.
00:03:24Claude design은 최신 제품이며 Claude의 Pro, Max, Team 및 Enterprise 플랜에서만 사용할 수 있습니다.
00:03:30반면 Stitch는 플랜에 상관없이 무료로 사용할 수 있으며 사용량 추적을 위해
00:03:35크레딧 시스템을 사용합니다. 범용성 측면에서 Stitch는 훨씬 더 많은 크레딧을 제공합니다.
00:03:40일일 400개의 디자인 크레딧과 15개의 재디자인 크레딧을 허용하므로 하루에도
00:03:46많은 양을 사용할 수 있고 월간 크레딧은 더 많습니다. 보통 간단한 디자인 하나에 3크레딧이 들며
00:03:51복잡도나 생성 횟수에 따라 달라질 수 있어 많은 디자인 결과물을 얻을 수 있습니다.
00:03:56Claude design은 일주일 단위의 별도 제한이 있습니다. 이 제한은
00:04:00다른 Claude code 제한에 영향을 주지 않으므로 디자인 제한이 끝나더라도
00:04:05다른 Claude 기능을 자유롭게 사용할 수 있습니다. 하지만 지난 영상에서 언급했듯이 이 제한은
00:04:10자유롭게 실험하기에는 실질적으로 불가능한 수준이며, 본격적인 제작에 사용하기 전에
00:04:15크레딧이 바닥날 것입니다. 특히 Pro 플랜을 사용 중이라면 몇 가지 디자인만
00:04:20실험해봐도 금방 소진되므로 상황은 더 좋지 않습니다. 따라서 실제로
00:04:24Claude design을 제대로 활용하려면 Max 플랜으로 전환해야 합니다. 비용을 비교하면
00:04:29Stitch가 압도적인 승자입니다. 적어도 자유롭게 실험은 할 수 있게 해주니까요.
00:04:34저희는 웹사이트 스타일과 필요한 섹션에 대한 간략한 설명이 담긴 동일한 프롬프트로 두 도구를 테스트했습니다.
00:04:39Claude design은 평소 Claude code가 하듯이 할 일 목록을 만들고 작업을 시작했습니다.
00:04:44Claude design이 시간이 걸리는 동안, Google Stitch에도 똑같은 프롬프트를 주었습니다.
00:04:49Stitch가 가장 먼저 한 일은 색상부터 타이포그래피, 아이콘, 버튼까지
00:04:54모든 것을 시각화한 디자인 시스템을 만든 것이었습니다. Claude design이 끝나기도 전에 Stitch는 완료되었죠.
00:04:59Stitch는 디자인 시스템과 똑같은 스타일을 사용하여 메인 색상과 강조 색상이
00:05:04완벽하게 조화된 랜딩 페이지를 구축했습니다. Claude design은 훨씬 더 많은 시간이 걸렸고,
00:05:09작업이 끝난 후 검증 단계를 거쳤습니다. 정적인 페이지인 Stitch와 달리 Claude design의 모든 결과물은 상호작용이 가능했습니다.
00:05:15첫 번째 실행에서 강조 색상과 메인 테마 색상을 직접 결정할 수 있는 옵션을 제공하여
00:05:20다시 프롬프트를 입력할 필요 없이 직접 세밀한 조정을 할 수 있었습니다. 디자인 품질 테스트에서는
00:05:25Google Stitch에 점수를 주겠는데, 디자인이 다른 것보다 훨씬 훌륭했기 때문입니다.
00:05:30Stitch는 컬러 팔레트를 창의적으로 사용하여 스타일을 맞추고 앱의 분위기를 살린 반면,
00:05:34Claude design의 선택은 평범하고 깊이가 부족하게 느껴졌습니다. 또한 속도 면에서도
00:05:39Stitch가 승리했는데, Claude design은 디자인마다 시간이 너무 오래 걸립니다. Claude design은
00:05:45이미지를 추가해야 할 때마다 SVG를 생성하여 디자인에 통합합니다. 직접 에셋을 제공하지 않는 한
00:05:50전적으로 SVG 생성에 의존하죠. 반면 Google은 자체 이미지 생성 모델인 Nano Banana를 보유하고 있습니다.
00:05:55따라서 Stitch는 이를 제품에 직접 통합하며, 명시적으로 말하지 않아도 디자인의 모든 섹션에
00:06:00이미지 생성을 사용하여 훨씬 나은 결과를 보여줍니다. SVG 품질이 아무리 좋아져도
00:06:05이미지 전용 모델과는 경쟁이 되지 않습니다. 이 상황에서는 Google Stitch가
00:06:10확실한 승자입니다. Stitch는 디자인에만 초점을 맞추고 있어 애니메이션으로 유명하진 않지만,
00:06:16어떻게 처리하는지 확인해 보았습니다. 몇 가지를 추가하려 시도했지만 애니메이션이 직접 보이지 않고
00:06:21별도의 탭에서만 미리 볼 수 있었으며, 페이지의 한 섹션에만 스크롤 노출 효과를 생성했습니다.
00:06:26하지만 Claude design에 동일한 작업을 시켰을 때는 히어로 섹션 아래의 마키 효과 등
00:06:32여러 애니메이션을 추가했습니다. 스크롤 노출 효과도 추가되었는데, 훨씬 정교하게 조정되어
00:06:37히어로 섹션만이 아닌 각 컴포넌트에 적절히 적용되었습니다. Claude design은
00:06:43셰이더와 같은 인기 라이브러리를 사용하여 마우스 움직임과 클릭에 따라 동작이 변하는
00:06:48훨씬 더 상호작용적인 애니메이션을 만들 수 있어 Stitch보다 훨씬 뛰어납니다.
00:06:54따라서 애니메이션 측면에서는 Claude design이 확실한 승자입니다. 또한 저희 콘텐츠가
00:06:59마음에 드신다면 Hype 버튼을 눌러주세요. 더 많은 콘텐츠를 제작하고 사람들에게 다가가는 데 큰 도움이 됩니다.
00:07:04각 도구가 앱을 얼마나 잘 이해하고 변경 사항을 처리하는지 테스트하기 위해, 기존 앱 위에
00:07:09회원가입 및 로그인 페이지 작성을 요청했습니다. Stitch가 가장 먼저 디자인을 완료했고,
00:07:14각 페이지에 동일한 디자인 시스템을 사용하고 동일한 헤더와 푸터를 구현했습니다.
00:07:19프로토타입 기능을 통해 페이지 흐름을 확인하고 각 버튼이 어떻게 연결되는지 볼 수 있었죠.
00:07:24Claude design의 구현 결과물은 앱의 아이디어에 더 잘 맞았고 필요한 것을
00:07:28더 잘 이해했습니다. 로그인 페이지를 창의적으로 구축했으며, 회원가입 페이지에서는 한 걸음 더 나아가
00:07:33여러 계정 유형 스타일까지 구현했습니다. 또한 변경 사항을 얼마나 잘 반영하는지도 확인하고 싶었습니다.
00:07:38Claude design에서는 그냥 댓글을 달아 한꺼번에 보내기만 하면 구현을 시작했습니다.
00:07:44Stitch에서는 변경을 원하는 영역에 주석을 달아야 했지만, 변경 결과가 정확히 원하던 것이 아니었습니다.
00:07:49인용문 바로 뒤 엉뚱한 위치에 푸터를 추가했는데, 꽤 이상했죠.
00:07:54전반적으로 Stitch를 통한 반복 작업은 우호적이지 않은데, 요청마다 새로운 화면을 생성하여
00:07:59어느 순간 화면이 너무 복잡해지기 때문입니다. Claude design은 훨씬 나은 경험을 제공하는데,
00:08:04디자인에 변경 사항이 직접 반영되고 앱을 잘 이해하고 있어 스타일을 벗어나지 않고
00:08:09적절히 구현하기 때문입니다. 따라서 디자인 반복 작업에 있어서는 Claude design이 분명히 더 낫습니다.
00:08:14각 도구는 고유한 디자인 시스템을 가지고 있습니다. Claude design의 디자인 시스템은 브랜드 정체성을 확립해 주는데,
00:08:20이 도구가 브랜드 키트 작업을 하는 팀을 위해 만들어졌기 때문입니다. 폰트, 로고, 에셋 등과 함께
00:08:25설명을 추가하면 브랜드 스타일을 대표하는 완전한 시스템을 만들어줍니다.
00:08:30Stitch의 디자인 시스템은 브랜드가 아닌 특정 디자인을 나타내는 파일입니다.
00:08:36이 파일은 Stitch에 국한되지 않습니다. 이를 내보내어 다른 에이전트에서 사용할 수 있고
00:08:41즉시 이해되어 구현됩니다. 앞서 언급했듯이 다른 웹사이트에서 디자인 시스템을 가져오거나
00:08:46직접 만들 수 있습니다. Stitch는 설치를 위한 npm 명령어와 적절한 형식이 포함된
00:08:52design.md 파일을 오픈 소스로 공개했습니다. 각 디자인 시스템은 용도가 다르지만,
00:08:57플랫폼 간 전환이 쉽고 Stitch에만 얽매이지 않는 구글의 방식을 선호합니다.
00:09:02이제 디자인을 테스트했으니 디자인에서 코드로의 핸드오프가 어떻게 이루어지는지 이야기해 볼 차례입니다.
00:09:07앞서 언급했듯이 Claude design은 권한 제어를 포함한 더 많은 내보내기 옵션을 제공합니다.
00:09:13PDF, 슬라이드, 심지어 캔버스로 내보내어 디자인을 계속 이어갈 수 있습니다.
00:09:18하지만 저희가 주로 사용하는 방식은 Claude code로의 핸드오프인데,
00:09:23그곳에서 앱을 가장 많이 개발하기 때문입니다. 프롬프트 하나를 복사하여 Claude code에 붙여넣으면
00:09:28디자인을 복사하여 앱에 구현해 줍니다. 반면 Google Stitch는
00:09:33훨씬 더 나은 핸드오프 패턴을 가지고 있습니다. Stitch는 MCP를 통해 코딩 에이전트와 연결할 수 있으며
00:09:39에이전트가 Stitch에 프롬프트를 보내 디자인을 만들고 디자인을 가져와 앱에 구현하도록 할 수 있습니다.
00:09:44Claude design에는 MCP 통합이 없습니다. 저희는 Stitch의 MCP를 좋아하는데,
00:09:49반대로 코딩 에이전트가 Stitch 맞춤형 언어로 프롬프트를 입력할 수 있어
00:09:53적절한 프롬프트를 고민할 필요 없이 원하는 디자인을 얻을 수 있기 때문입니다. Stitch는 또한
00:09:58압축 파일 코드로 내보낼 수도 있지만 다른 옵션도 있습니다. Google AI Studio로 내보내어
00:10:04Studio의 리소스와 앱에 직접 통합된 Firebase를 사용하여 앱을 더 개발할 수도 있고,
00:10:09Figma로 직접 내보내어 다른 사람들과 협업할 수도 있습니다. 저희는 MCP 내보내기를 가장 많이 사용하는데,
00:10:14이 통합을 사용하면 핸드오프를 걱정할 필요 없이 코딩 에이전트가 스스로 쉽게 처리하기 때문입니다.
00:10:19또한 PRD로 내보내어 다른 사람이나 코딩 에이전트에게 전달해 문제없이 앱을 구현하게 할 수도 있습니다.
00:10:25따라서 핸드오프 방식에 있어서는 Stitch가 확실한 승자입니다. 이제 영상의 끝에 도달했네요.
00:10:30채널을 지원하고 이런 영상을 계속 제작하는 데 도움을 주고 싶으시다면
00:10:35아래의 Super Thanks 버튼을 이용해 주세요. 언제나 그렇듯 시청해 주셔서 감사드리며,
00:10:40다음 영상에서 뵙겠습니다.