Transcript
00:00:00Claude Design이 출시되면서 디자인의 모든 것이 바뀌었다고 하지만, 사실은
00:00:04대부분의 사람들이 생각하는 것보다 훨씬 더 과장되었습니다.
00:00:05X(트위터)에서 보고 있는 것들이 전부가 아닌 이유는 바로 여기에 있습니다.
00:00:09Claude Design이 획기적인 무언가를 하고 있다거나, 돌아다니는 그 미친듯한 데모들이
00:00:13당신이 당장 갈아타야 한다는 증거라고 생각한다면, 그것은 사실 틀렸습니다.
00:00:17도구 자체가 그 디자인들을 훌륭하게 만드는 이유가 아니며, 사람들이 이 도구를
00:00:21사용하는 방식은 아직 대부분이 눈치채지 못한 방식으로 오히려 스스로를 방해하고 있습니다.
00:00:25Claude Design은 출시되자마자 디자인 업계를 위한 혁명적인 제품으로
00:00:29마케팅되었습니다.
00:00:30사람들은 이를 '피그마 킬러'라거나 디자이너의 종말이라고 부르기 시작했고, 그 여파는
00:00:34피그마의 주가가 계속 하락하고 기업 가치에 타격을 줄 만큼 컸습니다.
00:00:38이 도구는 사실적인 프로토타입, 와이어프레임, 디자인, 피치 덱 및 기타
00:00:43다양한 유형의 디자인을 만들기 위한 도구입니다.
00:00:44하지만 현실은 그저 과장 광고일 뿐입니다.
00:00:47Claude Code를 다른 도구인 것처럼 포장해서 판매하는 것일 뿐입니다. 왜냐하면 Claude Code로도
00:00:52똑같이, 혹은 그 이상을 할 수 있기 때문이죠.
00:00:54Claude Design에는 편집이나 댓글 같은 기능이 있지만, 이 기능들은
00:00:58적절한 도구를 갖춘다면 Claude Code로도 충분히 할 수 있는 것들입니다.
00:01:01이것이 재포장된 Claude Code라고 말하는 건 단순히 테스트도 안 해보고 하는 소리가 아닙니다.
00:01:05우리는 간단한 프롬프트를 입력해 커뮤니티 웹사이트를 만들어달라고 요청하고, 이 도구가 던진 질문에
00:01:09답변했습니다.
00:01:10결과물로 나온 두 개의 디자인은 그 자체로 인상적이었고, 예전에 Claude가
00:01:14랜딩 페이지를 생성하던 방식보다는 훨씬 나았지만, 여전히 많은 문제점이 있었습니다.
00:01:18한 버전은 가격 섹션에서 잘렸고 푸터는 아예 없었죠. 그래서 우리는
00:01:23유사한 프롬프트로 Claude Code가 어떻게 작동하는지 테스트해 보았습니다.
00:01:25두 도구를 비교하기 위해 'Opus 4.7' 모델을 'high effort' 모드에서 사용했는데, 생성된 디자인은
00:01:30Claude Design의 기능과 대등한 수준이었습니다.
00:01:32가입 버튼의 글자색이 제대로 선택되지 않는 등의 문제가 몇 가지 있었지만,
00:01:37전반적으로 매우 잘 만들어진 디자인이었습니다.
00:01:39심지어 Claude Design에 내장된 '디자인 하니스(design harness)'도 없었고,
00:01:43특별한 프롬프트 도움도 거의 받지 않은 채 순수하게 자체적으로 생성한 결과였습니다.
00:01:48하지만 분명 여러분이 본 데모들은 인상적이었을 겁니다. 그 뒤에는 무언가가 숨겨져 있거든요.
00:01:53소셜 미디어에 떠도는 것은 도구 자체가 스스로 수행한 결과라기보다는
00:01:57과장 광고에 기반한 것들입니다.
00:01:58사람들은 복잡한 워크플로를 따라 디자인을 생성한 뒤, 마치 Claude
00:02:03Design이 한 번에 모든 것을 구축한 것처럼 보여줍니다.
00:02:05하지만 동일한 워크플로는 Claude Design 없이도 Claude Code에서 직접 실행할 수 있습니다.
00:02:10따라서 이 제품이 디자이너를 위해 만들어졌더라도, 그들은 Claude Design 대신 Claude Code를
00:02:14사용해야 합니다. 그래야 다양한 변형을 시도하고 더 많이 실험하면서
00:02:19Claude Design과 같거나 더 나은 결과를 얻을 수 있기 때문입니다.
00:02:22또한 디자인이 완성되어 가려는 찰나에 잘려 나가는 일 없이 Claude Code로
00:02:26여러 번 반복 작업을 할 수 있습니다.
00:02:28매번 처음부터 다시 시작하는 대신, 이미 만들어진 결과물 위에 빌드업을 하면
00:02:32디자인의 방향을 훨씬 더 잘 제어할 수 있습니다.
00:02:35그리고 Claude Code가 생성하는 모든 것은 실제 코드이기 때문에, 결과물은
00:02:39버려지는 프로토타입이 아니라 누군가에게 다시 빌드받을 필요 없이
00:02:43즉시 제품으로 출시할 수 있는 결과물입니다.
00:02:45게다가 이 모든 것 위에 Claude Design은 비용 문제까지 있습니다.
00:02:48Claude Code는 훨씬 저렴한 비용으로 같은 일을 할 수 있는 반면, Claude Design은 따로
00:02:53구축되어 매주 제한되는 할당량에 포함됩니다. 다른 Claude 앱의 제한과는 별개로 카운트되지만,
00:02:57다른 Claude 앱들을 통해 모델을 사용할 때보다 훨씬 빠른 속도로 사용량을 소진합니다.
00:03:03이 점이 디자이너들에게 가장 치명적인데, 할당량이 너무 적어 필요한 만큼 실험할 수
00:03:08없고 불과 몇 번의 디자인 반복 작업만으로도 제한에 걸려버리기 때문입니다.
00:03:12많은 사람들이 불평하는 것도 바로 이 점입니다.
00:03:15어떤 사람이 작업 중이었는데, 최고 등급의 플랜을 사용하고 있음에도 불구하고
00:03:19약 20번의 반복 작업 후에 디자인 제한에 걸렸습니다.
00:03:23많은 다른 사람들도 불과 1시간 만에 제한에 도달했다고 말합니다. 그런데 결과물은
00:03:27Claude Code로 한 번에 쉽게 구현할 수 있는 단순한 디자인인 경우가 많죠.
00:03:31그러니 사실 실무에서 사용하기가 어렵습니다. 작업 중인 워크플로를 끝내기도 전에
00:03:35제한에 걸려버리니까요. Claude Code의 사용 제한과 비교하면 훨씬 더 나쁜 상황입니다.
00:03:40Claude Design의 결과물이 인상적인 이유는 도구 자체가 아니라 'Opus 4.7' 모델의 업데이트 때문입니다.
00:03:46Opus 4.7은 다시 한번 최첨단 기능을 갖춘 모델로, 모든 벤치마크에서
00:03:50더 나은 성능을 보이고 있습니다.
00:03:52하지만 여기서 실제로 중요한 업그레이드는 '시각 능력(vision)'입니다.
00:03:54이 모델은 시각 기능이 훨씬 강력해져서 이전보다 훨씬 더 높은 해상도로
00:03:59이미지를 인식할 수 있습니다.
00:04:00Claude Opus 4.6은 1.15 메가픽셀 해상도의 이미지를 분석할 수 있었던 반면,
00:04:074.7은 3.75 메가픽셀까지 분석할 수 있습니다.
00:04:10따라서 참조 디자인을 훨씬 더 잘 이해할 수 있다는 뜻입니다.
00:04:14참조 디자인을 주면, 훨씬 더 선명하게 처리하여
00:04:18이전에는 놓쳤을 법한 세부 사항들까지 파악해냅니다.
00:04:20이번 모델 업그레이드로 Anthropic은 Claude 모델들이 부족해서 대규모 작업이 필요했던
00:04:25유일한 단점, 즉 프론트엔드 디자인 영역을 보완했습니다.
00:04:27이 모델은 작업을 수행할 때 훨씬 더 감각적이고 창의적이며, 자체적으로도
00:04:31고품질의 인터페이스와 디자인을 만들어냅니다.
00:04:34결국 Claude Design이 출시되었을 때 엄청난 디자인들 때문에 큰 화제가 되었지만,
00:04:38실제로는 모델 자체가 향상된 것이었습니다.
00:04:41도구가 너무 좋아져서 우리가 보는 그런 멋진 결과물이 나온 것이
00:04:45아니라는 뜻이죠.
00:04:46Claude Design은 Anthropic이 무언가를 팔고 화제를 만들기 위한 또 다른 영리한 방법이었을 뿐입니다.
00:04:50이제 Claude Design에서 얻는 혜택을 Claude Code 2에서도 똑같이, 아니
00:04:55어쩌면 더 좋게 얻을 수 있습니다.
00:04:56간단한 '기술(skill)'을 생성하여 Claude Code에서 Claude Design의 질문 흐름을 복제할 수 있습니다.
00:05:00Claude Design에서 프로젝트를 생성하면 프롬프트를 입력하고 많은 질문을 던져서
00:05:04디자인 방향을 제대로 파악하려고 합니다.
00:05:07Claude Code의 계획 모드보다 훨씬 더 많은 질문을 하지만, 기술(skill) 하나로 똑같은 기능을 구현할 수 있습니다.
00:05:11그 기술(skill)에는 Claude Design처럼 질문 세션을 실행하는 방법에 대한 지침이 포함되어 있어,
00:05:16프롬프트로 생성된 정보의 공백을 채우고 무엇을 구축해야 할지 질문하게 합니다.
00:05:21또한 추가 질문을 언제 던질지, 작업 흐름이 어떻게 진행되어야 할지도 정의합니다.
00:05:25여기에는 세션 실행을 위한 예시 질문, 질문 라이브러리, 심지어
00:05:30랜딩 페이지의 요소 배치를 결정할 수 있도록 돕는 ASCII 사이트 레이아웃까지
00:05:34포함되어 있습니다.
00:05:35프롬프트를 입력하면, 이 기술(skill)을 사용하여 Claude Design처럼 식별된 공백에 대해
00:05:39관련 질문을 던집니다.
00:05:41여러 영역에 걸쳐 많은 질문을 하고 구현에 필요한 모든 정보를 얻으면,
00:05:45즉시 구축을 시작합니다.
00:05:47가장 좋은 점은 코드를 직접 출력하므로 디자인을 코드로 변환하는 과정이 따로 없다는 것입니다.
00:05:51이런 방식으로 한 시간 만에 제한에 걸릴까 걱정할 필요 없이,
00:05:55원하는 만큼 반복해서 수정할 수 있습니다.
00:05:57동일한 프롬프트 유형에서 UI를 생성하고 Claude Code 내에서 유사한 질문 흐름을 사용했을 때,
00:06:01Claude Design이 생성한 결과와 거의 비슷했습니다.
00:06:05가장 큰 차이점은 Claude Design이 웹사이트를 더욱 몰입감 있게 만들기 위해
00:06:09작은 애니메이션들을 추가하여 더 매력적으로 보이게 했다는 점 정도입니다.
00:06:13하지만 계속하기 전에 스폰서의 광고를 잠시 보고 가시죠.
00:06:16HeyGen입니다. 여러분도 아마 AI 도구로
00:06:18영상을 만들어보셨을 겁니다.
00:06:1920분 동안 타임라인을 편집하고, 보이스오버를 다시 녹음하고, 어색한 더빙 같은
00:06:24입 모양 맞추기와 씨름하느라 지치셨죠.
00:06:25HeyGen은 그 모든 번거로움을 생략해 줍니다.
00:06:26HeyGen은 새로 CLI를 출시한 AI 비디오 생성기입니다. 즉, 명령어 하나로
00:06:31디지털 트윈 아바타 영상을 완벽하게 생성할 수 있다는 뜻입니다.
00:06:34타임라인도, 카메라 촬영도, 제작팀도 필요 없습니다.
00:06:36디지털 트윈을 한 번만 녹화하면 HeyGen을 통해 재촬영 없이도 뉴스레터, PDF, 파워포인트를
00:06:40일관된 영상으로 변환할 수 있습니다.
00:06:44비디오 에이전트를 통해 프롬프트 하나로 완벽하게 편집된 멀티 씬 영상을 생성하고, 더빙을 통해
00:06:48완벽한 입 모양 맞춤과 함께 전 세계 시청자들에게 번역된 영상을 전달하세요.
00:06:51developers.heygen.com에서 아바타, 음성, 비디오 에이전트, 번역 등을 직접 사용해 보세요.
00:06:56디지털 트윈 생성에는 검증된 동의가 필요합니다.
00:06:59여러분의 콘텐츠는 공개 모델 학습에 절대 사용되지 않으며, 플랫폼 전체가
00:07:03기업용 수준의 보안을 위해 구축되었습니다.
00:07:04카메라 촬영 없이도 스튜디오 품질의 영상을 지금 바로 만드세요.
00:07:07고정 댓글의 링크를 클릭하고 오늘 바로 HeyGen을 시작해 보세요.
00:07:11사람들이 Claude Design을 자랑할 때 X에서 보셨을 대부분의 스크롤 인터랙션 디자인은
00:07:15그저 비디오 배경을 사용한 사이트일 뿐입니다. 그게 훨씬 더
00:07:20고급스러워 보이고 실제보다 더 인상적인 느낌을 줍니다.
00:07:24대부분의 데모는 사용 가능한 프롬프트 템플릿을 제공하는 사이트에서 복사한
00:07:28프롬프트일 뿐입니다.
00:07:29그 프롬프트에는 배경으로 사용할 영상 링크와 이를 구현하는 방법에 대한
00:07:33상세 가이드라인이 포함되어 있습니다.
00:07:36따라서 Claude Design뿐만 아니라 비슷한 프롬프트만 주면 어떤 에이전트든 이런 종류의 웹사이트를
00:07:40구현할 수 있습니다.
00:07:42하지만 이건 그저 홍보용 사이트를 위한 샘플 프롬프트일 뿐입니다.
00:07:45현실에서 실무 수준의 애플리케이션은 Lennis 같은 라이브러리를 사용하여 구축됩니다. 이는
00:07:49많은 프로덕션 앱뿐만 아니라 가장 인기 있는 라이브러리 중 하나인 GSAP를 통해
00:07:54웹사이트 경험을 그 어느 때보다 몰입감 있게 만드는 부드러운 애니메이션을 구현하는 데
00:07:59사용됩니다.
00:08:00이를 테스트하기 위해 우리는 실제로 영상을 다운로드하고 Claude Code 프롬프트에
00:08:04원하는 색상 테마와 함께 영상을 히어로 섹션으로 사용하라고 명령했고, 나머지는
00:08:08전부 스스로 구현했습니다.
00:08:10영상이 어떤 내용인지 설명하기 위해 딱 한 번 수정 사항을 알려줬을 뿐입니다.
00:08:14그러자 완벽하게 해당 스타일을 랜딩 페이지에 반영하여 이전 버전보다 훨씬 더 나은
00:08:18결과물을 만들어냈습니다.
00:08:19프롬프트가 얼마나 간단했는지를 고려하면 웹사이트 구현 수준은 매우 강력했으며,
00:08:23기존 Claude의 기능보다 훨씬 더 강력하고 상호작용이 뛰어난 다양한
00:08:28애니메이션과 상호작용이 사이트의 일부분에 포함되었습니다.
00:08:32이제 Claude Code에서는 Claude Design보다 도구를 훨씬 더 쉽게 추가할 수 있습니다.
00:08:36Claude Code는 기술적으로 훨씬 더 뛰어나고 사물을 훨씬 더 원활하게 구현할 수 있기 때문입니다.
00:08:42심지어 스크롤을 내릴 때마다 이야기가 나오는 'scrolly telling' 같은 오픈 소스 기술을
00:08:46사용하면 프로젝트 내에서 스토리텔링 애니메이션을 쉽게 구현할 수 있습니다.
00:08:48이런 기술(skill)이 있으면 Claude는 간단한 프롬프트만으로 다단계 스토리텔링을 쉽게 구현하고,
00:08:53Claude Design이 자체적으로 할 수 있는 것보다 훨씬 더 심도 있는 애니메이션을
00:08:57작업할 수 있습니다.
00:08:59또한 저희 콘텐츠가 마음에 드셨다면, 저희가 이런 콘텐츠를 더 많이 만들고
00:09:03더 많은 사람들에게 다가갈 수 있도록 '좋아요' 버튼을 눌러주세요.
00:09:07Claude Design 대신 Claude Code를 사용하는 것이 UI 구현을 훨씬 더 쉽게 만들어 줍니다.
00:09:11왜냐하면 Claude Code에서는 shadcn, aceternity, hero ui 등 많은 사전 빌드 애니메이션이 포함된
00:09:16컴포넌트를 결합하여 디자인 시스템을 쉽게 통합할 수 있기 때문입니다.
00:09:22이러면 모델이 각 컴포넌트가 어떻게 보이고 행동해야 하는지 일일이 고민할 필요 없이,
00:09:27전반적인 디자인 향상에만 집중할 수 있습니다.
00:09:30따라서 Claude Design에서 기본적으로 작업하는 것보다 결과물에 도달하기가 훨씬 더 쉽습니다.
00:09:35또한 현재 프로젝트 상태를 분석하는 기술(skill) 생성기를 사용하여 프로젝트에
00:09:39최적화된 프론트엔드 디자인 기술(skill)이나 기타 전문적인 기술(skill)을 사용할 수도 있습니다.
00:09:43이는 시간을 낭비하지 않고 기능을 훨씬 효과적으로 구현하는 데 도움을 줍니다.
00:09:47Claude Code는 MCP 서버를 연결할 수 있어 훨씬 더 유연합니다.
00:09:51예를 들어 shadcn MCP 서버를 사용하면, 에이전트가 무엇을 어디에 사용해야 할지
00:09:56명시적으로 지시받지 않아도 스스로 올바른 컴포넌트를 설치할 수 있습니다.
00:09:59마찬가지로, 단순히 생성된 디자인에만 의존하는 대신 UI를 더 효과적으로
00:10:04구축하는 데 도움이 되는 다양한 MCP를 사용할 수 있습니다.
00:10:06Opus 4.7 같은 모델이나 Claude Design 같은 도구가 있어도, 그냥 생성된 디자인들은
00:10:11비슷한 패턴을 따르는 경향이 있어 모델이 만들었다는 느낌을 줄 때가 많습니다.
00:10:16하지만 기존 라이브러리를 사용하면 이런 문제를 줄일 수 있고 결과물이 더 자연스럽고
00:10:20예측 가능하지 않게 느껴집니다.
00:10:22Claude Design 대신 Claude Code를 사용할 때 얻는 가장 큰 이점은
00:10:26Git을 연결할 수 있다는 점입니다.
00:10:27Claude Design에도 GitHub을 연결할 수는 있지만, 둘이 작동하는 방식에는
00:10:30엄청난 차이가 있습니다.
00:10:31Claude Design의 Git 통합은 상당히 기본적인 수준입니다.
00:10:34주로 연결된 GitHub 리포지토리에서 파일을 가져와
00:10:38디자인을 이해하는 데 사용하게 합니다.
00:10:39하지만 그 목적은 주로 읽기와 참조에 한정되어 있습니다.
00:10:42리포지토리에 실제로 변경 사항을 적용하지는 못하죠.
00:10:45반면 Claude Code는 완전히 다릅니다.
00:10:47커밋, 브랜칭 등 Git 운영을 완전히 수행할 수 있습니다.
00:10:51따라서 구현 중에 문제가 발생하거나 변경 후 이전 버전이 더 낫다고 판단되면,
00:10:55Git을 사용해 이전 버전으로 쉽게 되돌릴 수 있습니다.
00:10:59Claude Design에서는 작업 중에 할 수 없는 일이며, 이 점이
00:11:02Claude Code를 훨씬 강력한 접근 방식으로 만듭니다.
00:11:04다양한 프로토타입을 디자인할 때 Claude Design으로 가거나 피그마를 쓰는 것보다,
00:11:09HTML에서 직접 목업을 만드는 것이 훨씬 더 효과적입니다.
00:11:12다양한 변형을 시도하려면 평행 에이전트와 워크트리(work tree)를 사용하여
00:11:16Claude Design이 디자인을 탐색하는 방식과 유사하게 작업을 나누되, Git 관리 방식으로
00:11:21최고의 버전을 유지하고 나머지는 쉽게 버릴 수 있습니다.
00:11:24별도의 워크트리에서 서브 에이전트를 사용하도록 프롬프트만 입력하면,
00:11:29각 에이전트에게 동일한 디자인의 다른 변형을 구현하도록 요청할 수 있습니다.
00:11:31그러면 Claude가 각각 별도의 작업 공간에 에이전트를 생성할 것입니다.
00:11:35평행 에이전트를 사용하면 여러 방향을 동시에 탐색하면서 시간과
00:11:39노력을 모두 절약할 수 있습니다.
00:11:40이제 각 에이전트가 작업을 마치면 검토할 수 있는 여러 개의 변형을 얻게 되고,
00:11:44필요에 가장 적합한 것을 선택하면 됩니다.
00:11:47그 상태에서 변경 사항을 적용하고 가장 마음에 드는 스타일을 기반으로
00:11:51앱을 계속 빌드해 나가면 됩니다.
00:11:52Claude Design으로 생성하지 않았음에도 각 디자인은 여전히
00:11:57요소를 묘사하기 위해 완전히 코드로 만들어진 SVG와 훨씬 더 나은
00:12:02전반적인 균형을 갖춘 미학적인 결과물을 보여줍니다.
00:12:04선호하는 버전을 메인(main)에 병합하고 마음에 들지 않는 디자인이 포함된
00:12:08워크트리는 제거하면 됩니다.
00:12:09여기에 사용된 기술들과 기타 리소스는 영상 하단 'AI Labs Pro'에서
00:12:15저희의 이전 영상들까지 포함해 직접 프로젝트에 다운로드하여 사용할 수 있습니다.
00:12:19저희 콘텐츠에서 가치를 발견하셨고 채널을 후원하고 싶으시다면,
00:12:23이것이 가장 좋은 방법입니다.
00:12:24링크는 설명란에 있습니다.
00:12:25이것으로 영상의 끝입니다.
00:12:26저희 채널을 후원하고 이런 영상을 계속 만들 수 있도록 돕고 싶으시다면,
00:12:30아래 'Super Thanks' 버튼을 통해 하실 수 있습니다.
00:12:33언제나처럼 시청해 주셔서 감사하며 다음 영상에서 뵙겠습니다.