Claude Design을 그대로 복제한 오픈소스 저장소 (퀄리티 대박)
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Claude Design은 제가 사용해 본 최고의 툴임이 틀림없습니다.
00:00:02사실 이건 완전히 사용할 수 없는 수준입니다.
00:00:05Anthropic에 20X 플랜으로 매달 200달러를 내고 있는데도 말이죠.
00:00:10Claude Design 사용 제한에 한 시간도 안 되어 걸려버립니다.
00:00:14정말 좌절스럽지만, 다행히 여러분과 저에게는
00:00:17희망이 있습니다. 왜냐하면 새로운 오픈 소스 저장소가
00:00:22방금 출시되었거든요.
00:00:23기본적으로 Claude Design을 복제해서 우리가 사용할 수 있는 기술로 만들어 줍니다.
00:00:28이름은 Huashu Design이고, Claude Design이 사용하는
00:00:32정확히 동일한 시스템 프롬프트를 기반으로 구축되었습니다.
00:00:33오늘 우리는 이 툴이 실제로 시간을 투자할 가치가 있는지 알아보기 위해
00:00:37Claude Design과 정면 승부를 펼쳐볼 것입니다. 왜냐하면 가치가 있다면,
00:00:41우리는 Claude Design의 사용 제한 감옥에서 벗어날 방법을 찾을 수 있으니까요.
00:00:45Huashu Design은 Claude Design이 훌륭한 툴이지만,
00:00:50사용 제한 때문에 한 시간 이상 사용할 수 없다는 문제를
00:00:54해결해 줍니다.
00:00:55그래서 그들은 Claude Design의 모든 시스템 프롬프트와 디자인 철학을 가져와
00:00:58오픈 소스 GitHub 저장소로 만들었습니다.
00:01:02이것은 기본적으로 Claude Code나 Codex, 혹은
00:01:07Claude Design처럼 사실상 모든 코딩 에이전트에 로드할 수 있는 기술입니다.
00:01:10웹 앱이나 모바일 앱을 위한 대화형 프로토타입을 만들 수 있습니다.
00:01:13슬라이드 덱, 모션 디자인, 인포그래픽 등을 계속해서 만들 수 있죠.
00:01:17내부적으로 많은 기능이 작동하고 있기 때문에 이 모든 것을 단 하나의 기술로
00:01:21해낼 수 있습니다. 예를 들어,
00:01:24슬라이드 덱, 다양한 디자인 스타일, 애니메이션 모범 사례에 대해 설명하는
00:01:2820개의 심층 마크다운 파일에 액세스할 수 있습니다.
00:01:31그래서 겉으로는 하나의 기술처럼 보이지만,
00:01:33사실상 20개의 미니 기술에 액세스할 수 있는 셈입니다.
00:01:35또한 여러분을 위해 디자인할 때 가져올 수 있는 수많은 컴포넌트와 미디어,
00:01:40에셋에도 액세스할 수 있습니다.
00:01:42그리고 전체 실행 가능한 툴체인을 갖추고 있습니다.
00:01:44HTML 파일을 MP4로 변환하거나, Playwright를 사용하여
00:01:50실제로 디자인한 결과물이 현실에서도 완벽하게 작동하는지 확인하는
00:01:53기능을 제공합니다. Claude Design과 마찬가지로,
00:01:56다양한 버전을 확인할 수 있습니다. 전체 조정 시스템도 갖추고 있죠.
00:02:00그리고 가장 좋은 점은 이것이 하나의 기술이기 때문에, 제가 Claude Code 안에 있다면,
00:02:055X 요금제든 20X 요금제든 사용량에 기반하여,
00:02:08이 겉보기엔 자의적인 Claude
00:02:13Design 사용 제한에 얽매이지 않는다는 것입니다. 이제 한번 테스트해 봅시다.
00:02:16그래서 우리가 할 일은 이 툴이 실제로 처음부터
00:02:18랜딩 페이지를 디자인하는 데 얼마나 효과적인지 확인하는 것입니다.
00:02:22그다음에는 Claude Design의 디자인 시스템과 유사하게
00:02:24에셋을 제공했을 때 어떻게 작동하는지 살펴볼 것입니다.
00:02:29그리고 마지막으로 슬라이드 덱에서는 얼마나 잘하는지 확인하고, 그 과정에서,
00:02:33Claude Design과 정면으로 비교해 보겠습니다.
00:02:36그래서 이것이 실제로 가치가 있는지 확인해 보죠. 하지만 그전에,
00:02:39모두가 가장 좋아하는 스폰서인 저에 대한 짧은 소식을 전합니다. 지난달,
00:02:43저는 Claude Code 마스터클래스를 출시했는데, 기술적 배경이 없더라도
00:02:460에서 AI 개발자로 거듭날 수 있는 최고의 방법입니다.
00:02:51매주 이 코스를 업데이트하고 있습니다.
00:02:53방금 Claude Code 에이전트 iOS 모듈을 출시했습니다.
00:02:56이 툴을 가장 잘 활용하는 방법을 배우고 싶으시다면,
00:03:01꼭 확인해 보셔야 합니다. Chase AI에서 확인하실 수 있습니다.
00:03:04고정 댓글에 링크가 있을 겁니다. 이제 시작해 보죠.
00:03:08Claude Code에 제가 주는 프롬프트는,
00:03:09계속해서 Huashu Design 기술을 사용할 예정인데, 그 프롬프트는
00:03:13디자인 기술을 사용하여 저의 가상 SaaS 제품인 'Lighthouse'의 랜딩 페이지를 만들고,
00:03:17시작하기 전에 필요한 질문을 무엇이든 하라는 것입니다. 이제,
00:03:21Claude Design에도 똑같은 프롬프트를 주었습니다.
00:03:24Huashu는 Lighthouse가 무엇인지, 타겟
00:03:29구매자, 분위기, 필요한 섹션, 변형 등에 대해 질문하는 6가지 질문을 가지고 돌아왔습니다. 아시다시피,
00:03:34가상의 콘텐츠를 만들지 아니면 제가 따로 카피를 가지고 있는지 묻더군요.
00:03:37Claude Design도 비슷한 질문을 했는데요,
00:03:40조금 더 깊이 있게 들어가고, 당연히 그래픽적인 특성 때문에,
00:03:44시각적 방향 면에서 제가 실제로 선택할 수 있는 몇 가지 옵션을 제공합니다.
00:03:48그래서 Huashu에게는, 분석 중심의 디자인을 하라고 말했습니다. 1인 개발자를 타겟으로 하고요.
00:03:50분석적인 방향으로 갑니다. 1인 개발자를 타겟으로 합니다.
00:03:54여러 가지 분위기와 스타일을 보고 싶다고 말했습니다.
00:03:57그래야 변형을 비교할 수 있으니까요.
00:03:59그리고 카피도 스스로 작성하게 했습니다. Claude Design에는,
00:04:02거의 똑같이 말했고, 나란히 놓고 볼 수 있는 세 가지 변형을
00:04:05원한다고 했습니다.
00:04:06Claude Design이 내놓은 결과물과 Huashu가 내놓은 결과물을 비교해 보죠.
00:04:11더 자세히 볼 수 있도록 카메라를 끄겠습니다.
00:04:16자, Huashu가 한 페이지에 모두 담아낸 것을 보겠습니다.
00:04:19세 개의 별도 페이지로 만들 수도 있었지만,
00:04:22이 방식은 한 번에 모두 볼 수 있게 해주네요. 아, 방금 한 말은 취소합니다.
00:04:25우측 상단에 세 가지를 모두 살펴볼 수 있는 기능이 있네요.
00:04:29이 기술로 얻은 결과물입니다.
00:04:31이 'Ledger' 버전은 꽤 멋져 보이네요. 아시다시피,
00:04:35전체 웹페이지를 보여줍니다. 터미널 변형도 있고,
00:04:40페이퍼 버전과 마찬가지로 같은 구성입니다.
00:04:44한 번에 세 가지를 모두 볼 수 있습니다. 솔직히 처음에 보고 꽤 좋다고 생각했습니다.
00:04:49Claude Code만 단독으로 사용했을 때보다 훨씬 낫습니다.
00:04:52프런트엔드 디자인 기술과 함께 세 가지 버전을 달라고 했을 때, 꽤 탄탄했습니다.
00:04:55이제 Claude Design을 살펴보죠. 참고로,
00:04:59Design은 바로 조정 기능을 제공했습니다. 지금은 보지 않겠지만,
00:05:03터미널 버전을 보시면,
00:05:07전체 과정을 다시 검토해 보면,
00:05:11여기에 있는 Editorial 버전과 상당히 유사합니다.
00:05:15정말 아주 비슷합니다.
00:05:19이건 좀 끔찍하네요. 전형적인 AI 느낌을 확실히 줍니다. 아마 그라데이션 때문인 것 같습니다.
00:05:24그리고 세 가지를 모두 비교할 수 있죠. 자,
00:05:28지금 여러분이 생각해야 할 것은 어느 한쪽이 진공 상태에서 더 낫다고 판단하는 것이 아니라,
00:05:32이 기술이 Design과 비교해서 얼마나 근접한지 확인하는 것입니다.
00:05:34매우, 매우 유사합니다. 이건 Huashu 기술에 큰 점수를 줄만한 일이죠.
00:05:37이제 매크로 변형을 본 후에, 제가 좋아하는
00:05:42특정 하나에 집중해서 조정을 시작하고 싶습니다.
00:05:46비교와 대조를 더 잘할 수 있도록
00:05:51어느 정도 비슷하게 유지하기 위해,
00:05:54Design의 Editorial 버전을 선택할 것입니다.
00:05:59이 기술에서는 Ledger 버전으로 알려져 있죠.
00:06:03그리고 얼마나 잘 조정하는지 보겠습니다. Claude Design의 경우,
00:06:06조정 기능은 이미 여기에 있습니다. Editorial의 경우,
00:06:09밝은 모드와 어두운 모드를 전환할 수 있습니다. 악센트 색상을 바꿀 수 있고요.
00:06:11생각나는 거의 모든 색상을 제공하는데, 꽤 멋집니다.
00:06:15헤드라인을 변경할 수도 있지만,
00:06:18Spatial과 Global로 나뉘어 있습니다.
00:06:21그래서 조정 기능을 확장하고 Editorial에만 적용되도록 하려고 합니다.
00:06:25그동안,
00:06:29Claude Code에 들어가서 Ledger 변형을 선택하고 공격적인 조정을 하라고 말했습니다.
00:06:31그 부분에서 비교해 볼 수 있도록 말이죠.
00:06:33자, Claude Design이 계속해서 조정을 수행했습니다. 참고로,
00:06:36현재 이 시점까지, 이 영상에서 보신 것만으로도,
00:06:38Claude Design 사용량의 15% 정도를 이미 소모했습니다. 반면에,
00:06:42기술 측면에서는,
00:06:44단일 세션 컨텍스트 창의 13%만 사용했습니다.
00:06:49즉, 130K 토큰 정도로 주간 사용량의 1%도 되지 않습니다.
00:06:49물론 제가 20X 플랜을 사용 중이긴 하지만, 그 차이는 정말 놀랍습니다. 하지만 알아둬야 할 점은,
00:06:54이건 여전히 하나에 대한 조정을 작업 중이라는 것입니다.
00:06:59그래서 조금 느리고 Claude Design의 조정은 예상대로 잘 작동하고 있습니다.
00:07:03이 조정 기능은,
00:07:05솔직히 제 Claude Design에서 가장 좋아하는 부분 중 하나입니다.
00:07:10저는 Claude Design의 힘이 반드시 디자인이 놀랍다는 것이라고 생각하지는 않습니다.
00:07:12디자인도 확실히 한 단계 위라고 생각하지만,
00:07:16오해하지 마세요.
00:07:20사실 제가 아주 빠르게 다양한 결과물을 둘러보고,
00:07:22모습을 확인하고, 반복하고 반복할 수 있다는 점이 핵심입니다.
00:07:24그리고 한 가지 주목해야 할 점은 Claude Design의 작동 방식상,
00:07:28특정 부분을 클릭해서 타이포그래피를 수정하거나 특정 댓글을 남길 수 있다는 점입니다.
00:07:31그건 디자인 기술 안에서는 사실 할 수 없는 일이죠.
00:07:36디자인 기술 위에 직접 그림을 그리면서, '이거 봐요, 이거 좀 수정하고,
00:07:36왼쪽으로 조금 옮기고, 오른쪽으로 조금 옮겨줘요' 같은
00:07:40요청은 할 수 없습니다. 그래픽 인터페이스가 필요한 부분이죠.
00:07:43바로 그 지점에서 Claude Design이 확실히 앞서나갈 것입니다.
00:07:47그러니 Huashu Design에서 얻을 수 있는 조정 기능과 비교해 보죠.
00:07:51참고로,
00:07:54조정은 페이지 자체와 같은 스타일을 따릅니다.
00:07:57프리셋을 변경할 수 있습니다.
00:07:58디스플레이 패밀리를 바꾸거나 다크 모드를 살짝 다르게 설정할 수도 있죠.
00:08:01악센트 색상을 바꿀 수 있고 레이아웃 밀도 같은 많은 것들을 바꿀 수 있어 보입니다. 신뢰 스트립이 있을까요?
00:08:05신뢰 스트립이 사라지나요? 네. 그런 것들이죠. 확실히 비교해 볼 만합니다.
00:08:07Claude Design만큼 많은 조정 항목이 있을까요? 아니요,
00:08:10하지만 더 얻으려면 프롬프트를 하나만 더 보내면 됩니다.
00:08:13제 큰 생각으로는, 이 디자인 기술을 사용하는 Claude Code는
00:08:18Claude Design에서 기본적으로 얻을 수 있는 것들과 확실히 경쟁합니다.
00:08:22총 토큰 사용량은 170K 정도로, 기본적으로 주간 사용량을 전혀 쓰지 않았습니다.
00:08:26반면 Claude Design은 15%를 소모했죠. 이 예시처럼,
00:08:30디자인 시스템도 없고, 에셋도 없이 그냥 원시 프롬프트로
00:08:32무엇을 만들 수 있는지 확인하는 테스트라면, 저는 이 기술이 아주 훌륭했다고 봅니다.
00:08:34다음 데모로 넘어가서 얼마나 잘 할 수 있는지 보죠.
00:08:38실제로 디자인 시스템이나 디자인 예제를 제공하면 어떻게 될지,
00:08:42실제로 디자인 시스템 같은 구축 기반을 제공했을 때는 얼마나 잘 작동하는지 다음 데모에서 확인해 보죠.
00:08:47Claude Design과 디자인 시스템을 보면,
00:08:51우리가 주는 모든 것을 꽤 잘 받아들입니다.
00:08:56코드베이스 같은 것이 될 수도 있고,
00:08:59간격부터 컴포넌트, 게이지, 버튼, 히어로 섹션까지 모든 정보를 뽑아낼 수 있습니다.
00:09:02그래서 이 디자인 시스템을 Claude Design에 로드하면,
00:09:06다양한 결과물에 걸쳐 일관성을 유지할 수 있을 거라는 걸 압니다.
00:09:10예를 들어,
00:09:13이 'Agentic OS' 디자인은 제가 디자인 시스템으로 만든 것입니다.
00:09:16Claude Design 내에서는 대시보드로 보이지만,
00:09:19그 디자인 테마를 복제하는 것은 매우 쉽습니다.
00:09:23슬라이드 덱 같은 곳에서 확인해 봐도,
00:09:27모두 같은 곳에서 나온 것처럼 보이는데, 그 이유는 Claude
00:09:31Design의 디자인 시스템이 꽤 강력하기 때문입니다. 단점은 이런 종류의
00:09:34디자인 시스템을 만드는 것이 주간 사용량의 30%를 잡아먹는다는 것입니다.
00:09:36그래서 제가 Claude Design에게 말한 것은 그 Agentic OS 대시보드를 사용하여
00:09:39Lighthouse 랜딩 페이지를 다시 만들라는 것이었습니다.
00:09:42그다음 Claude Code에게도 거의 똑같이 말했습니다.
00:09:45대시보드와 일치하는 미학이나 디자인 시스템을 사용하고 싶다고 말했죠.
00:09:47그리고 그 모든 정보를 찾을 수 있는 별도의
00:09:50디렉터리나 참조 위치를 알려주었습니다. 이것이 영감이자 미학으로
00:09:55사용하고 있는 거의 전부입니다.
00:10:00분명히 스프라이트가 미쳐 날뛰고 있지만,
00:10:00나머지는 거의 이해가 됩니다. 음,
00:10:04여기에 대시보드를 다시 만들었네요,
00:10:07이것과 매우 비슷합니다. 아주 멋져 보입니다.
00:10:11폰트와 색상 측면에서도,
00:10:14해야 할 일과 아주 잘 맞습니다.
00:10:18유일한 불만은 옆에 있는 작은 캐릭터입니다.
00:10:22무슨 일인지 모르겠지만,
00:10:25그건 비교적 간단한 수정 사항일 겁니다.
00:10:28이제 Huashu 기술은 어떻게 했는지 보죠. 참고로,
00:10:33이 기술은 11분 동안 약 70,000토큰을 사용했습니다. Claude Design은
00:10:37약 3분 정도 걸렸지만, 주간 사용량의 10%를 소비했습니다.
00:10:41그리고 결과물은 이렇습니다. 더 잘 볼 수 있도록 카메라를 끄겠습니다.
00:10:44작은 Claude가 나왔네요,
00:10:47여기에 작은 아이콘 로고 캐릭터가 있네요.
00:10:52이 로고는 위쪽 스프라이트와는 조금 다르지만,
00:10:54헤이, 어울리네요. 색상과 폰트는 언뜻 보기에 말이 됩니다.
00:10:56Lighthouse 옆에 작은 스프라이트도 위에 있네요.
00:10:59이건 좀 멋져 보이네요. 작은 티커 같기도 하고요.
00:11:04이 모든 것들이 대시보드에서 본 것들과 친숙해 보입니다. 전반적인
00:11:08디자인 측면에서 말이죠. 이 부분은 조금 어색한 느낌입니다.
00:11:10이 터미널 섹션이 왼쪽의 것과 중앙에 맞춰졌으면 좋겠지만,
00:11:15그건 쉽게 수정할 수 있습니다. 전반적으로,
00:11:18꽤 좋았습니다. 저는 Claude Design 결과물이 조금 더 마음에 들었지만,
00:11:22특히 스스로 대시보드를 만들어서 넣었다는 점이 좋았습니다.
00:11:26하지만 이 기술도 디자인 작업을 제대로 수행했습니다. 기준을 충족했죠.
00:11:30어, 이거 꽤 멋진데요. 작은 티커 같아요.
00:11:35이 모든 구성 요소는 대시보드에서 보던 것과 상당히 비슷해 보이네요.
00:11:40전반적인 디자인 측면에서요. 근데 이쪽은 약간 어색한 느낌이에요.
00:11:43이 터미널 섹션을 위로 조금 올려서
00:11:47왼쪽에 있는 것들과 중앙을 맞췄으면 좋겠는데, 뭐 고치기는 쉬울 겁니다. 전반적으로,
00:11:51꽤 잘 나왔어요. 저는 Claude 디자인 쪽이 좀 더 마음에 들긴 하는데요,
00:11:56특히 자신만의 대시보드를 직접 만들어서 넣어준 점이 좋았거든요.
00:12:00하지만 어쨌든, 디자인 작업을 해냈잖아요? 기준은 충족했어요.
00:12:04같은 폰트와 같은 색상을 사용했으니까요.
00:12:06확실히 같은 디자인 계열에서 나온 것 같은 느낌을 줍니다. 그래서 이번 테스트는,
00:12:11이 기술에 큰 점수를 주고 싶네요. 정말 잘했습니다. 네.
00:12:14시간이 좀 더 걸렸냐고요? 물론이죠.
00:12:15하지만 사실상 디자인 시스템을 스스로 구축한 셈이니까요.
00:12:18미리 로드된 시스템이 없었거든요. 디자인이 최고 수준이냐고요? 음, 아닐 수도 있겠지만,
00:12:22꽤 훌륭하고 훨씬 저렴하죠. 정말 인상적입니다. 이제 마지막 테스트로, 슬라이드 덱을 살펴볼게요.
00:12:27이미 Claude 디자인으로 작업을 해봤습니다.
00:12:29지금 첫 번째 결과물을 보고 계신 건데요.
00:12:31같은 디자인 시스템을 사용했고, 우리의 가상 SaaS 제품에 대해 다루고 있죠.
00:12:33그래서 디자인의 일관성을 유지하는 면에서
00:12:37확실히 꽤 잘 해냈고, 전체적으로
00:12:41보기에도 꽤
00:12:46좋습니다. 유일한 불만은, 상단에 있는 작은 스프라이트가 좀 늘어났다는 점이죠.
00:12:50하지만 역시, 고치기 어려운 부분은 아니에요.
00:12:52제가 정말 신경 쓰는 건, 이게 멋져 보이느냐 하는 거죠. 좀 멋지지 않나요?
00:12:56Claude 디자인과 비교해서 디자인 시스템을 맞추지 못하나요? 네,
00:13:00이건 사용량 6%로 단 몇 분 만에 해낸 결과물입니다.
00:13:04이제 이 기술을 사용해서 Claude 코드가 어떻게 하는지 보죠.
00:13:07자, 결과는 이렇습니다. 시작부터 웹사이트와 매우 유사하네요.
00:13:11바로 만들어냈고, 상단에는 동일한 스프라이트가 들어가 있고,
00:13:15잘 작동하고 있어요.
00:13:16그리고 오른쪽에 작은 Claude 코드 로고가 있네요.
00:13:20이게 표지입니다. 두 번째 페이지,
00:13:23텍스트 일부가 겹쳐 보이는 것 같지만, 큰 문제는 아닙니다.
00:13:273페이지는 좋아 보이네요. 4번 슬라이드. 여기가 좀 잘렸는데,
00:13:32이건 디자인 결정 사항일 수도 있죠.
00:13:34스크롤 되는 텍스트도 좋고요. 마지막 슬라이드를 보면,
00:13:38여기 또 텍스트가 조금 겹쳐 있긴 하지만,
00:13:40이런 사소한 문제들은 프롬프트 하나로 쉽게 수정할 수 있습니다.
00:13:44전반적으로, 디자인과 이 기술로 얻은 결과를 비교해 보면,
00:13:49다시 한번 매우 유사하네요.
00:13:50이 기술이 디자인 작업과 경쟁할 수 있다는 걸
00:13:54세 번 연속으로 확인한 셈입니다.
00:13:56그게 바로 이번 영상의 핵심 결론이죠.
00:13:58이제 우리는 엄청난 사용 제한에 얽매이지 않고도
00:14:03Claude 디자인 결과물을 얻을 수 있는 선택지가 생긴 겁니다. 일반 사용자들에게는 정말 멋진 일이죠.
00:14:07이제 냉정하게 볼 때, 여전히 Claude 디자인이 더 낫냐고요? 네, 물론이죠.
00:14:12이 기술은 Claude 디자인이 하는 모든 것을 단순히 모방하는 것뿐이니까요.
00:14:15그리고 Claude 디자인은 그리기, 편집, 댓글 달기, 그리고
00:14:19팀원 모두가 이 기능을 함께 사용할 수 있게 하는 등의 장점이 있죠.
00:14:21그러니 그래픽 인터페이스라는 특성상,
00:14:24이 기술은 결코 할 수 없는 기능들을 수행할 수 있습니다. 하지만 많은 사람들에게,
00:14:29지금 여기서 보신 결과물은 충분하고도 남습니다. 그리고 예를 들어,
00:14:34기존 프론트엔드 디자인 기술을 사용하는 것보다 엄청난 발전입니다. 기억하세요,
00:14:37이 기술은 단순히 웹페이지와 슬라이드 덱 이상을 할 수 있습니다.
00:14:40모션 디자인, 인포그래픽, 온갖 것들을 다 할 수 있죠.
00:14:43그러니 꼭 한번 시도해 보세요. 잃을 것은 전혀 없습니다.
00:14:46자, 오늘 영상은 여기까지 하겠습니다. 이번 영상을 통해,
00:14:50여러분들의 확장되는 도구 상자에 새로운 도구 하나를 더해드렸기를 바랍니다. 늘 그렇듯,
00:14:54어떠셨는지 의견 알려주세요.
00:14:55Claude 마스터클래스를 확인하고 싶으시다면 꼭 Chase AI Plus를 확인해 보시고요.
00:14:58다음에 또 뵙겠습니다.