Claude 디자인을 그대로 복제한 ‘또 다른’ 오픈 소스 저장소
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00여러분, 두 번째 클로드 디자인 클론이 깃허브에 등장했습니다. 맞습니다, 또 다른 클로드 디자인
00:00:06클론이 나왔는데요. 이번에는 실제 그래픽 인터페이스를 갖추고 있습니다. 이번 주 초에 제가
00:00:13후와슈 디자인에 대한 영상을 올렸었죠. 시장에 나온 첫 번째 클로드 디자인 클론이었고,
00:00:20정말 훌륭했습니다. 표준 클로드 디자인 포맷과 거의 대등한 성능을 보여주면서도
00:00:24사용량 제한 문제는 전혀 없었죠. 하지만 후와슈 디자인의 문제점 중 하나는
00:00:30터미널 안에서만 작동한다는 것이었습니다. 지금 보시는 것처럼 그래픽 인터페이스가 없었죠.
00:00:36하지만 클로드 디자인을 거의 그대로 베낀 이 새로운 오픈 디자인 도구는 다릅니다.
00:00:43이 두 도구를 한번 비교해 보세요. 오늘 이야기할 '오픈 디자인'이 여기 있고,
00:00:48여기에 '클로드 디자인'이 있는데 정말 비슷하죠. 오픈 디자인의 정말 멋진 점은
00:00:54후와슈 디자인을 기반으로 구축되었다는 것입니다. 지난 영상에서 보셨듯이 후와슈 디자인은
00:00:59성능이 정말 좋습니다. 그 레포를 통해 훌륭한 콘텐츠와 프론트엔드 디자인을 얻었죠. 이제
00:01:06그 위에 멋진 그래픽 레이어를 입혀서 대부분의 사용자가 훨씬 더 쉽게 상호작용할 수 있게
00:01:11만들었습니다. 원래 클로드 디자인에서 보았던 세련미를 많이 갖추게 된 것이죠.
00:01:16더 좋은 점은, 오픈 디자인은 어떤 코딩 도구와도 함께 사용할 수 있다는 것입니다.
00:01:22클로드 코드뿐만 아니라 제미나이나 코덱스도 사용할 수 있고, 다시 한번 말씀드리지만
00:01:28순정 클로드 디자인에서 겪는 사용량 문제는 발생하지 않습니다. 그래서 오늘은 오픈 디자인을 훑어보며
00:01:34어떻게 작동하고 설치하는지, 그리고 어떤 부분에 주목해야 하는지 보여드리겠습니다.
00:01:39약간의 불필요한 기능도 있다고 생각하기 때문이죠. 실제 클로드 디자인과 비교도 해볼 건데,
00:01:43미리 스포일러를 하자면 꽤 괜찮습니다. 탄탄한 도구라고 생각하며, 이런 클로드 디자인의
00:01:49파생 도구들이 나오기 시작해서 정말 기쁩니다. 저는 클로드 디자인을 좋아하지만,
00:01:53사용량 제한이 끔찍하거든요. 이런 도구들이 많이 나올수록 앤스로픽 측에서도
00:02:00빨리 정신을 차리고 이 사용량 문제를 해결해 줄 것 같네요. 오픈 디자인은 클로드 디자인의
00:02:05오픈 소스 대안입니다. 클로드 코드나 코덱스에 연결하거나, 다른 도구나 API를
00:02:12사용하고 싶다면 직접 API 키를 가져올 수도 있습니다. 컴퓨터에 어떤 코딩 에이전트가 있는지
00:02:16자동으로 감지하며, 31개의 스킬과 72개의 브레인급 디자인 시스템이 이미 내장되어 있습니다.
00:02:24후와슈 디자인을 기반으로 만들었다는 건 농담이 아닙니다. 직접 그렇게 밝히고 있거든요.
00:02:28후와슈 디자인, 구정 파워포인트 스킬, 오픈 코드 디자인, 그리고 멀티카를
00:02:34합쳐놓은 것과 같습니다. 간단히 말해 후와슈 디자인에 멋진 껍데기를 씌운 것이라 할 수 있죠.
00:02:40레포의 나머지 부분에서는 내부 작동 방식과 사례, 데모를 자세히 설명하고 있습니다.
00:02:45이것만 알면 됩니다. 오픈 소스 버전의 클로드 디자인이거나 그에 가장 근접한 도구라는 점이죠.
00:02:49설치 단계로 넘어가기 전에, 오늘 스폰서의 짧은 메시지를 전해드립니다.
00:02:53바로 저 자신인데요. 제가 '클로드 코드 마스터 클래스'를 출시했습니다. 기술적 배경이 없는 분들이
00:02:58AI 개발자로 거듭날 수 있는 최고의 방법입니다. 저는 매주 새로운 내용을 업데이트하며,
00:03:04실제 비즈니스나 프로젝트에서 성과를 낼 수 있는 실전 활용 사례에 집중합니다.
00:03:09Chase AI Plus에서 확인하실 수 있으며, 고정 댓글에 링크가 있습니다. 거기서 뵙길 바랍니다.
00:03:14이제 설치 방법은 두 가지입니다. 레포에 접속해서 터미널을 열고 명령어를 복사해 붙여넣거나,
00:03:18두 번째 옵션은 제가 설명란에 남겨둘 링크를 복사해서 클로드 코드나 코덱스 같은
00:03:23도구에 붙여넣고 "이걸 새 디렉토리에 설치해 줘"라고 요청하는 것입니다. 그러면 알아서
00:03:28실행 준비를 마칠 겁니다. 설치가 완료되고 실행되면 로컬 개발 서버 링크가
00:03:32나타날 겁니다. 만약 나타나지 않는다면 클로드 코드에게 "오픈 디자인 개발 서버를 띄워줘"라고
00:03:36말하세요. 그러면 이런 페이지가 뜰 것이고, 아마 "로컬 CLI를 쓸 것인지,
00:03:42앤스로픽 API를 쓸 것인지, 어떤 AI 시스템을 사용할 것인지" 묻는 팝업이 뜰 겁니다.
00:03:46여기서는 로컬 CLI를 선택하는 것이 좋습니다. 그러면 클로드 코드나 코덱스, 오픈 코드에서
00:03:51데이터를 가져오게 됩니다. 특히 클로드 코드나 코덱스를 사용하면 API 비용을 낼 필요 없이
00:03:56이미 구독 중인 계정에서 모델을 불러오게 됩니다. 모델의 경우 CLI 설정을 그대로 쓰는
00:04:01기본값(default)을 선택하면 됩니다. 그리고 미디어 제공자를 추가할 수 있는 기능이 있는데,
00:04:06보시는 것처럼 프로토타입, 슬라이드 덱, 템플릿뿐만 아니라 이미지와 비디오도
00:04:13제작할 수 있기 때문입니다. 이 UI에서 바로 생성할 수 있죠. 하지만 비디오나 이미지를
00:04:18생성하려면 해당 기능을 지원하는 모델의 API 키를 추가해야 합니다. 미니맥스, 오픈AI,
00:04:24일레븐랩스 등 다양한 서비스를 추가할 수 있습니다. 이건 클로드 디자인에는 없는 유용한 기능이죠.
00:04:30상단에는 디자인, 예시, 디자인 시스템, 이미지 템플릿, 비디오 템플릿 메뉴가 있습니다.
00:04:36디자인 시스템에 있는 이 템플릿들은 무엇일까요? 이전에 보셨을 수도 있는
00:04:40awesomedesigns.md와 비슷합니다. 예를 들어 에어비앤비 같은 웹사이트에 들어가서
00:04:46해당 웹사이트의 팔레트, 타이포그래피, 구성 요소, 시각적 테마와 분위기 등을
00:04:52분석해서 정리해 둔 것입니다. 즉, 에어비앤비와 비슷한 스타일의 웹사이트를
00:04:58만들고 싶다면 이 프롬프트를 포함해서 사용하면 비슷한 결과물을 얻을 수 있다는 개념입니다.
00:05:06결과는 그때마다 다르겠지만요. 디자인 시스템 섹션은 보기에는 멋지지만
00:05:13실제로 얼마나 효과적일지는 모르겠습니다. 이미지 템플릿도 비슷합니다. 예시 이미지와
00:05:18그와 비슷한 결과물을 얻기 위한 JSON 프롬프트를 보여줍니다. 제 생각엔 이건 좀 과한 것 같고,
00:05:23비디오 템플릿도 마찬가지입니다. 보기에만 좋을 뿐 큰 실용성은 없을 것 같네요.
00:05:29예시 섹션도 꽤 멋지긴 하지만, 이건 단지 한 줄짜리 프롬프트를 사용해서
00:05:35얻은 결과물일 뿐이라는 점을 이해해야 합니다. 백그라운드에 대단한 프롬프트가
00:05:42있는 게 아닙니다. 프롬프트는 문자 그대로 여기에 적힌 게 전부입니다.
00:05:47"이 프롬프트 사용하기"를 누르면 한 줄짜리 프롬프트가 입력됩니다. "X(트위터) 사용자들을 위한
00:05:53데이팅 사이트 '디자인 뮤추얼', 통계와 매칭 정보, 커뮤니티 티커가 있는 대시보드" 같은 식이죠.
00:06:00그러니 여기 있는 예시들에 너무 현혹되지는 마세요. 그냥 한 줄짜리 프롬프트일 뿐이니까요.
00:06:07특별한 건 없습니다. 이제 여러분이 진짜 관심을 가져야 할 부분에 집중해 보죠.
00:06:12바로 프로토타입과 슬라이드 덱 같은, 클로드 디자인에서 볼 수 있었던 표준적인 결과물을
00:06:16만드는 일입니다. 작동 방식도 거의 똑같습니다. 데모 이름을 정하고
00:06:22디자인 시스템을 선택하면 됩니다. 하나 또는 여러 개를 선택할 수 있고, 이미 내장된
00:06:28전체 목록이 제공됩니다. 와이어프레임으로 할지 고해상도(High Fidelity)로 할지 결정하고,
00:06:32클로드 디자인의 zip 파일을 불러올 수도 있습니다. 예를 들어 클로드 디자인에서 만든
00:06:37디자인 시스템이 있다면 그걸 zip 파일로 만들어서 여기에 포함시킨 뒤 '생성'을 누르면 됩니다.
00:06:44먼저 이 예시를 빨리 보여드리고 싶네요. 오픈 디자인에게 예전 후와슈 디자인 영상에서
00:06:51보여드렸던 것과 똑같은 요청을 해봤습니다. 'Lighthouse'라는 가상의 SaaS 제품을 위한
00:06:57랜딩 페이지를 만들어 달라고 했죠. 소규모 팀이나 1인 창업자를 위한 제품이며,
00:07:03서로 비교해 볼 수 있는 세 가지 예시를 달라고 했습니다. 그랬더니 클래식한 스택형 스타일,
00:07:11편집물 느낌이 강한 스타일, 그리고 좀 더 강렬하고 눈에 띄는 스타일이 나왔습니다.
00:07:17이걸 클로드 디자인에서 얻은 결과물과 직접 비교해 보면 상당히 비슷하다는 걸 알 수 있습니다.
00:07:21비슷한 폰트와 색상이 많이 쓰였고, 특히 배경 부분이 그렇습니다. 편집물 스타일을
00:07:26선택했기 때문이기도 하죠. 또한 오픈 디자인의 왼쪽 화면을 보시면 클로드 디자인과
00:07:32마찬가지로 Q&A 브리프 과정을 거치는 것을 볼 수 있습니다. 질문을 던지고 선택 버튼을
00:07:37제공하는 식이죠. 거의 똑같은 제품이라고 봐도 무방합니다. 한 가지 눈에 띄는 차이점은
00:07:43생성 속도였습니다. 오픈 디자인은 약 10분 정도 걸렸는데, 클로드 디자인은 그 절반의
00:07:49시간밖에 걸리지 않았습니다. 또한 편집(edit)이나 그리기(draw) 같은 메뉴가 보이지만
00:07:56오픈 디자인에서는 아직 실제로 사용할 수 없습니다. 로드맵에는 포함되어 있지만요.
00:08:01미세 조정(tweaks) 패널이 뜨게 하려면 오픈 디자인에게 직접 요청해야 합니다.
00:08:06"내가 직접 요소를 켜고 끄면서 빠르게 수정할 수 있는 조정 패널을 만들어 줘"라고
00:08:13말해야 하죠. 후와슈에서 했던 방식과 매우 비슷합니다. 오픈 디자인이 좀 더 느리고
00:08:18이런 편의 기능이 몇 가지 빠져 있긴 하지만, 그 외에는 클로드 디자인과 정말 흡사합니다.
00:08:24이제 본인만의 디자인 시스템을 사용하는 법을 알아보죠. 이 부분은 약간 우회적인 방법이
00:08:30필요합니다. 제가 만든 'Agentic Dashboard OS' 스타일의 디자인 시스템을 사용해
00:08:35슬라이드 덱을 만들고 싶다고 가정해 봅시다. 참고로 제가 말하는 시각적 미학은
00:08:40이런 느낌입니다. 제가 클로드 디자인 내에서 가지고 있는 디자인 시스템인데,
00:08:46이런 스타일을 오픈 디자인에서 재현하려면 어떻게 해야 할까요? 본인의 웹사이트나
00:08:51자산, 타이포그래피 등을 그대로 가져오고 싶을 때 말이죠. 현재로서는 아주 간단한
00:08:56방법은 없습니다. 디자인 시스템 메뉴에 들어가서 직접 만들 수 있는 버튼 같은 게 없거든요.
00:09:01대신 클로드 디자인의 zip 파일을 임포트하는 방식을 써야 합니다. 이미 클로드 디자인에서
00:09:08이 디자인 시스템을 만들었다면, 해당 프로젝트로 가서 '공유(share)'를 누르고
00:09:14'프로젝트를 .zip으로 다운로드'하면 됩니다. 그런 다음 오픈 디자인으로 돌아와서
00:09:20해당 zip 파일을 선택해 업로드하면 됩니다. 보시는 것처럼 방금 업로드된
00:09:25모든 디자인 파일들이 나타납니다. 만약 클로드 디자인에서 디자인 시스템으로
00:09:32만들어두지 않은 상태에서 비슷한 작업을 하려면, 일단 클로드 디자인에서 먼저
00:09:39작업하시길 권장합니다. 그게 가장 간단한 방법이니까요. 아니면 코덱스나
00:09:45클로드 코드 내에서 직접 디자인 시스템 설정을 재구축해야 하는데, 그건 좀 번거롭습니다.
00:09:51이게 오픈 디자인의 단점 중 하나죠. 이 점에 있어서는 후와슈 디자인이 조금 더 편합니다.
00:09:55그래픽 인터페이스 대신 터미널에서 작업할 때는 클로드 코드에게 "해당 디렉토리를
00:10:00살펴보고 거기 있는 것들을 참고해서 이 슬라이드 덱을 같은 스타일로 다시 만들어 줘"라고
00:10:04말하면 되기 때문이죠. UI 사용을 강제당할 때 생기는 단점이라 할 수 있습니다.
00:10:08이제 프롬프트에 "Lighthouse라는 가상 SaaS 제품에 대한 슬라이드 덱을 만들어 줘.
00:10:14소규모 팀을 위한 분석 도구야. 필요한 질문은 뭐든 물어봐"라고 입력했습니다.
00:10:20잘 보이게 좀 더 확대해 볼게요. AI가 던진 질문들은 이렇습니다.
00:10:25"이 덱은 누구를 위한 것인가요?" 제품 런칭용이라고 답해 보죠. "회의 참가자는 누구인가요?"
00:10:29제품 관계자들이라고 하겠습니다. "슬라이드 수는?" 짧게 유지할게요. "완성도는?"
00:10:34고해상도로 하고요. 발표자 노트는 필요 없습니다. 시각적 톤은 '브루탈리스트(Brutalist)'로
00:10:44하고 'Agentic OS' 디자인 시스템을 사용해 달라고 했습니다. 스토리 전개는
00:10:51AI가 직접 결정하게 하고 답변을 보냈습니다. 일반적인 클로드 코드처럼
00:11:00할 일 목록(To-do list)을 보여주고 하나씩 작업을 진행합니다. 첫 번째 슬라이드
00:11:04결과물이 나왔는데 꽤 괜찮아 보이네요. 우리가 제공한 디자인 시스템의 브랜드 이미지와
00:11:08일치합니다. 하지만 눈치채셨을 수도 있는데, 슬라이드 사이를 전환할 수 있는 기능이
00:11:13없거나 모든 슬라이드를 똑같이 만든 것 같습니다. 그래서 오픈 디자인에게 첫 번째
00:11:20슬라이드만 보이고 전환이 안 된다고 말했습니다. 해결할 수 있는지 지켜보죠.
00:11:25오픈 디자인이 최종적으로 완성한 슬라이드 덱입니다. 내보내기 과정이 어떤지
00:11:29보여드리기 위해 파워포인트로도 뽑아봤습니다. 클로드 디자인이나 오픈 디자인 안에서는
00:11:34좋아 보여도 파워포인트로 옮기면 가끔 틀어지는 경우가 있거든요. 첫 슬라이드는 괜찮고
00:11:39두 번째 슬라이드도 나쁘지 않습니다. 숫자가 있는 부분은 수동으로 조금 손봐야겠네요.
00:11:43세 번째 슬라이드는 좀 이상합니다. 구분 방식이나 간격을 좀 조정해야 할 것 같네요.
00:11:52네 번째 슬라이드는 좋고요. 다섯 번째도 괜찮습니다. 여섯 번째 슬라이드는
00:11:58내용을 좀 위로 올려야 할 것 같고, 일곱 번째 슬라이드는 텍스트가 박스 안에
00:12:04딱 들어맞지 않는 포맷팅 문제가 조금 있습니다. 하지만 이 정도면 90%는 해결된 셈입니다.
00:12:13수정하는 데 5분도 안 걸릴 것이고, 우리가 원했던 디자인 시스템과도 잘 어울립니다.
00:12:18하지만 슬라이드 덱을 만들면서 보셨다시피, 완성도 높은 클로드 디자인과 비교하면
00:12:24아직 마감이 덜 된 투박한 면이 있습니다. 당연한 결과일 수도 있습니다.
00:12:29오픈 디자인은 말 그대로 이번 주에 출시됐으니까요. 앞으로 계속 개선하면서
00:12:33다듬어 나가길 바랍니다. 그래도 이제 막 나온 첫 번째 버전치고는
00:12:37오픈 디자인은 정말 탄탄한 도구라고 생각합니다. 그래픽 인터페이스를 통해
00:12:42클로드 디자인 같은 작업을 하고 싶지만 사용량 제한에 고통받고 계신 분들에게는요.
00:12:48그래픽 인터페이스가 꼭 필요하지는 않지만 클로드 디자인의 작동 방식을 좋아하신다면,
00:12:54여전히 후와슈 디자인이 조금 더 나을 수 있습니다. 더 빠르고 터미널 안에서
00:13:00작업하기 때문에 훨씬 유연하니까요. 하지만 "나는 이런 인터페이스가 반드시 필요해"라고
00:13:05생각하시는 분들에게는 클로드 디자인의 아주 훌륭한 대안이 될 것입니다.
00:13:10저도 클로드 디자인을 정말 사랑하지만, 사용량 제한은 정말 말도 안 되는 수준이거든요.
00:13:15아까 말씀드렸듯이 내일이라도 이런 도구가 천만 개쯤 더 쏟아져 나와서
00:13:21앤스로픽이 자극을 좀 받고 이 사용량 문제를 해결해 줬으면 좋겠습니다. 정말 황당할 정도니까요.
00:13:26오늘 이야기는 여기까지입니다. 정말 멋진 도구이니 여러분도 직접 확인해 보세요.
00:13:31설치도 쉽고 어떤 코딩 에이전트와도 잘 연동되는 유연한 도구입니다. 이번 도구에 대해
00:13:34어떻게 생각하시는지 댓글로 알려주세요. 마스터 클래스에 관심 있으신 분들은
00:13:40Chase AI Plus를 확인해 주시기 바랍니다. 그럼 다음에 뵙겠습니다.
00:13:43시청해 주셔서 감사합니다.