Transcript
00:00:00이것은 Claude Design의 오픈 소스 대안인 OpenDesign으로, 여러분이 설치한
00:00:05모든 에이전트나 모델을 사용하여 웹 프로토타입, 모바일 앱, 심지어
00:00:11HTML 슬라이드까지 생성할 수 있습니다. 72개의 브랜드급 디자인 시스템이 내장되어 있고 모든 프로젝트가 로컬 컴퓨터에서 유지되므로
00:00:17클라우드로 데이터가 전송되지 않습니다. 하지만 Claude Opus 4.7이 프론트엔드
00:00:23디자인에 매우 뛰어나다는 것을 이미 알고 있는데, 대부분의 다른 모델은
00:00:27디자인 능력이 떨어질 수 있기 때문에 사용자가 원하는 모델을 선택하게 하는 것이 합리적일까요? 구독 누르고 확인해 보시죠.
00:00:33Anthropic의 Claude Design은 지난달 초에 출시되어 즉각적인 인기를 끌었습니다. 사람들에게
00:00:38인상적인 모델을 사용하여 매우 멋진 디자인을 만들 수 있는 능력을 제공했고,
00:00:43lovable vZero와 유사한 도구들에 대한 대안을 제시했죠. 하지만 이는 클라우드 전용의 폐쇄형 도구이며 특정 모델에
00:00:49종속되어 있고 월 20달러의 비용이 들기 때문에, 사실상 누구나 사용할 수 있는 것은 아닙니다.
00:00:54그래서 11일 후, Tom과 Nexa 팀은 큰 인기를 얻은 오픈 소스 대안을 내놓았습니다.
00:01:00Claude Code에서 나온 OpenCode와 비슷한 느낌인데, 이제는 Claude Design에서 OpenDesign이 나왔네요.
00:01:05Anthropic이 다음에 만들 도구 중 누군가가 또 앞에 'Open'을 붙이게 될 것은 무엇일까요?
00:01:09하지만 이 오픈 소스 도구는 어떻게 Claude Design만큼 좋은 디자인을 만들 수 있을까요? 글쎄요,
00:01:14두 가지 요소가 함께 작동하기 때문입니다. 첫 번째는 디자인 시스템입니다. OpenDesign은 Linear,
00:01:18Stripe, Spotify와 같은 브랜드에서 영감을 받은 타이포그래피, 간격, 컬러 토큰을 포함한
00:01:24전체 브랜드 사양을 갖춘 디자인 시스템을 다수 포함하고 있습니다. 두 번째는 기술(skills)입니다. 모든 출력 유형에 대한 수많은 기술이 있죠. 대시보드
00:01:30기술은 차트를 배치하는 법을 알고, 슬라이드 기술은 슬라이드를 구성하는 법을 압니다. 심지어 AI의 함정을 방지하는
00:01:35체크리스트가 모든 프롬프트에 내장되어 있고, 무언가를 생성하기 전에 타겟 고객,
00:01:41어조, 브랜드 콘텐츠에 대해 사용자에게 질문합니다. Impeccable에 대한 제 영상을 보셨다면 아주 친숙하게 느껴지겠지만,
00:01:45그것과는 다르며, 차이점은 영상 후반부에서 다루겠습니다. 우선은,
00:01:49간단한 데모를 진행해 보겠습니다. 시작하려면 macOS나 Windows용 OpenDesign을 다운로드하거나,
00:01:54리포지토리를 클론하여 Docker로 설치하거나, 제가 선택한 방법인 소스에서 직접 실행할 수 있습니다.
00:01:59프로젝트를 실행하고 브라우저에서 해당 포트에 접속하면 이 UI가 나타납니다.
00:02:04Claude Design을 사용해 보지 않은 사람에게는 매우 압도적으로 보일 수 있지만, 하나씩 살펴봅시다.
00:02:08여기를 클릭하면 제가 이미 설치한 에이전트 하네스인
00:02:13Claude Code Codex와 OpenCode가 감지된 것을 볼 수 있습니다. Claude Code를 클릭하고 아래로 스크롤하면
00:02:17모델을 선택할 수 있습니다. 기본적으로는 CLI에서 선택된 모델이 적용되지만, 여기에서 변경할 수 있습니다.
00:02:21Codex도 마찬가지인데, Codex는 추론 노력(reasoning effort)을 변경할 수 있다는 점이 좋네요.
00:02:26하지만 저는 OpenCode를 선택하겠습니다. 아래로 스크롤하여
00:02:31모델을 GLM 5.1로 변경하겠습니다. 여기에서도 메모리를 선택할 수 있는데, 이는 각 프롬프트에 추가될 지침입니다.
00:02:36미디어 공급자의 경우 기본적으로 제 OpenAI 키가 인식되어
00:02:41GPT Image 2를 사용하여 이미지를 생성할 것입니다. 하지만 11labs API 키를 연결해서
00:02:46텍스트 음성 변환이나 웹사이트에 필요한 애니메이션용 사운드 효과 등을 구현할 수도 있습니다. 그리고
00:02:50여기서 사용 가능한 모든 기술을 볼 수 있고, 나중에 자세히 다룰 디자인 시스템도 확인할 수 있습니다.
00:02:54심지어 Codex가 하는 것처럼 펫을 선택할 수도 있죠.
00:02:58기본적으로 선택할 수 있는 옵션이 정말 많습니다. 창을 닫고 디자인을 시작해 보죠. 프로젝트 이름을 짓고
00:03:03디자인 시스템을 선택하겠습니다. 만약 이러한 디자인 시스템이 무엇인지 전혀 모르겠다면
00:03:08디자인 시스템 탭을 클릭하여 전체 목록을 볼 수 있는데, 정말 많습니다.
00:03:13영상을 녹화하기 전에 쭉 훑어봤는데, Miro 디자인 시스템이 마음에 드네요. 디자인 토큰에 대한
00:03:17상세 정보와 디자인 MD 파일 내 정보를 제공해 줍니다.
00:03:22현재 프로토타입 탭에 있지만, 데이터 변화에 따라 실시간으로 업데이트되는 라이브 아티팩트나
00:03:27HTML 기반 슬라이드를 생성하는 슬라이드 덱, 또는 템플릿 기반 구축 기능도 있습니다.
00:03:33템플릿 탭을 클릭해서 원하는 템플릿을 선택할 수도 있습니다. 하지만 여기서는
00:03:38프로토타입을 유지하고 생성을 클릭하겠습니다. 이제 프롬프트를 입력할 수 있는 다른 페이지로 이동합니다.
00:03:42이번에는 좀 독특한 시도를 해보겠습니다. 현재 제가 운영 중인 유튜브 채널
00:03:47검색 앱이 실행 중인데, 이보다 훨씬 보기 좋은 버전을 만들고 싶습니다.
00:03:52그래서 이 URL을 제공하고 GLM이 탭과 입력 필드를 탐색하여
00:03:57디자인에 반영할 수 있는지 확인해 보려 합니다. 여기에 유튜브 채널 검색용
00:04:02웹사이트를 잘 디자인해 달라는 프롬프트를 입력했습니다. 또한
00:04:07에이전트 브라우저나 적절한 도구를 사용하여 방문할 수 있도록 사이트 링크도 제공했습니다.
00:04:12자, 이제 어떻게 하는지 봅시다. 시각적 톤, 브랜드 맥락 등 몇 가지 질문을 해서
00:04:15답변을 입력했습니다.
00:04:20이제 디자인 과정을 계속 진행해 보죠. 확인해 보세요. curl 명령어를
00:04:24실행하여 Chrome으로 사이트를 열었습니다. 이제 에이전트 브라우저를 사용해 사이트에 접속하고 있습니다.
00:04:29직접 접속한 게 아닌데도 브라우저에서 사이트를 탐색하고 있네요. 작동 방식을 이해하기 위해 몇 가지
00:04:34추가 에이전트 브라우저 명령이 보입니다. 네, 아직 진행 중입니다.
00:04:38아직 완전히 완료된 건 아니지만, 진행 방향이 마음에 드네요.
00:04:43하단에 고급 필터가 있는 검색 페이지도 좋고, 검색 시
00:04:48비디오 제목과 채널 이름 사이를 전환할 수도 있습니다. 검색 결과도
00:04:52매우 인상적이고 실제 웹사이트 데이터를 사용하고 있습니다. 썸네일은 없지만
00:04:57어디서 스크래핑해서 저장한 건지는 모르겠지만 실제 데이터입니다. 즐겨찾기 페이지도
00:05:01있어서, 여기서 즐겨찾기에 추가하면 해당 페이지로 이동하고 이메일을
00:05:06보내거나 삭제할 수 있습니다. 여기 숨겨진 페이지도 있네요. 예를 들어,
00:05:11X를 누르면 즐겨찾기한 사람이 이 페이지로 넘어옵니다. 약 20분이 걸렸네요.
00:05:17GLM 5.1이 가장 빠른 모델은 아니지만, 모든 작업이 완료되었습니다. 결과물을 확인해 보죠.
00:05:23생성된 5개의 파일을 보여줍니다. 임시 저장소로
00:05:28내보낸 것 같습니다. 이제 다른 프롬프트를 줄 수 있습니다. 다크 모드를 추가하고 싶다면
00:05:33그렇게 할 수도 있고, 디자인 패키지 완료를 클릭하여
00:05:37전체를 단일 디자인 MD 파일로 종합할 수 있습니다. 즉, 트랜스크립트, 디자인 시스템, 그리고 생성된
00:05:425개 페이지와 같은 아티팩트들이 포함되죠. 공유를 클릭하여 다양한 형식으로 내보낼 수도 있습니다.
00:05:48심지어 독립형 HTML로 내보내 Claude Code로 실제 프로젝트에 적용하거나
00:05:53Vercel이나 Cloudflare Pages에 배포할 수도 있는데, 정말 멋진 기능입니다.
00:05:57이게 OpenDesign에 대한 간단한 개요입니다. 사용할 가치가 있을까요? 코딩
00:06:02에이전트가 이미 설치되어 있고 Claude 구독을 이용 중이라면
00:06:07사용해 볼 가치가 충분합니다. 디자인 시스템과 기술의 조합 덕분에
00:06:12사용 중인 하네스나 모델에 상관없이 꽤 괜찮은 결과물을 낼 수 있습니다. 하지만 Impeccable과 비교하면 어떨까요?
00:06:16저는 개인적으로 Impeccable의 계획 방식이 더 좋습니다. 처음에 모든 것을 물어보고
00:06:22이미지 모델을 사용해 여러 목업을 디자인해 주니까요. 거기서 선택하고 반복하면 됩니다.
00:06:27시작할 때는 디자인이 어때야 할지 전혀 감이 없어도
00:06:32꽤 괜찮은 결과물을 얻을 수 있죠. 반면 OpenDesign의 경우에는
00:06:37디자인에 대해 조금은 알고 시작해야 합니다. 물론 시작 전에 모델이 생성할
00:06:42디자인 시스템을 물어보긴 하지만, 질문을 한다는 사실 자체가 디자인에 대해
00:06:48조금 더 아는 사람을 대상으로 한다는 느낌을 줍니다. 그래도 인정할 건 해야죠. OpenDesign은 UI가 훌륭해서
00:06:53반응형 뷰를 보고, 어디로든 내보내고, 기술, MCP 도구,
00:06:58심지어 펫까지 추가할 수 있습니다. Codex UI나 Claude 데스크톱 앱 사용자가 익숙하게 느낄 만한 요소들이죠.
00:07:04디자인 모델로서는 최고가 아닌 GLM 5.1을 사용해서도 멋진 앱 디자인을 만들어 냈습니다.
00:07:10따라서 비교적 빠르게 디자인을 하고 싶고, 원하는 방향에 대한 아이디어가
00:07:15어느 정도 있다면 OpenDesign을 꼭 시도해 보시길 바랍니다. 하지만
00:07:19돈을 조금 써도 괜찮다면 Claude Design도 꽤 좋습니다. 보시죠,
00:07:22같은 프롬프트로 어떤 결과물을 만들어 냈는지 말이죠.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video