00:00:00업데이트는 정말 끝이 없네요.
00:00:02앤스로픽이 방금 Claude Design을 출시했습니다.
00:00:05이제 웹 앱이나 웹사이트 등을
00:00:09우리가 원하는 건 무엇이든
00:00:11Claude 인터페이스를 통해 만들 수 있게 되었습니다.
00:00:13이것은 그들 버전의 Google Stitch라고 할 수 있죠.
00:00:16데모 영상에서 보시는 것처럼,
00:00:18이 디자인들을 통해 거시적인 부분부터 미세한 부분까지
00:00:21모든 것을 수정할 수 있는 기능을 제공합니다.
00:00:23단순히 웹 앱에 대해서만 이야기하는 것이 아니라,
00:00:25모바일 디자인에 대해서도 이야기하고 있습니다.
00:00:27재미있는 점은 우리가
00:00:28Anthropic과 Claude Code에 관해 이야기할 때,
00:00:30가장 큰 약점 중 하나가 프론트엔드 디자인이었다는 겁니다.
00:00:32그런데 이제 이러한 약점을 보완할 수 있는
00:00:34본격적인 애플리케이션을
00:00:36출시했다는 소식은 정말 멋진 일입니다.
00:00:39이번 영상에서는 작동 방식을 보여드리겠습니다.
00:00:41직접 체험해 보실 수 있도록
00:00:42빠르게 데모를 진행해 보겠습니다.
00:00:43Claude Design은 Opus 4.7을 염두에 두고 제작되었으며,
00:00:46Pro Max 등급부터
00:00:49Enterprise 사용자까지 사용할 수 있습니다.
00:00:51프로토타입부터 목업,
00:00:53파워포인트 프레젠테이션까지 모든 것을 수행합니다.
00:00:54또한 마이크로소프트 파워포인트 같은 도구로
00:00:57내보내거나 Canva로 보낼 수도 있습니다.
00:00:59여기서 정말 멋진 기능 중 하나는 브랜드 디자인입니다.
00:01:01여기에 코드베이스를 제공하면,
00:01:03예를 들어 여러분 웹사이트의 코드베이스를 주면,
00:01:05웹사이트에서 모든 브랜드 에셋을 추출해 옵니다.
00:01:09그래서 작업 중인 디자인에 맞게
00:01:11색상이나 타이포그래피 등을 맞출 수 있습니다.
00:01:12시작하려면 claude.ai/design으로 접속하기만 하면 됩니다.
00:01:15그러면 이와 같은 웹페이지로 이동하게 됩니다.
00:01:18왼쪽을 보시면 프로토타입, 슬라이드 덱,
00:01:20템플릿 사용 등의 몇 가지 옵션이 있습니다.
00:01:23하단에는 아까 말씀드렸던
00:01:25디자인 시스템을 만드는 기능이 있습니다.
00:01:27디자인 시스템 설정(set up design system)으로 이동하면,
00:01:29회사 이름 같은 것을 입력하고,
00:01:33디자인 시스템의 예시를 제공할 수 있습니다.
00:01:36꼭 해야 하는 것은 아니지만,
00:01:38이미 맞추고자 하는 디자인이
00:01:40기존에 있는 경우에 도움이 됩니다.
00:01:41GitHub 링크를 줄 수도 있고,
00:01:43폴더를 직접 드래그할 수도 있습니다.
00:01:45컴퓨터에 실제 코드베이스가 있다면
00:01:48여기로 드래그하면 됩니다.
00:01:49또는 폰트, 로고, 에셋뿐만 아니라
00:01:51기타 참고 사항들을 추가할 수도 있습니다.
00:01:52저는 컴퓨터에 있는 제 웹사이트 에셋 폴더를
00:01:55선택한 다음에,
00:01:57생성 계속하기(continue to generation)를 눌렀습니다.
00:01:59특히 코드베이스가 큰 경우,
00:02:01우선 코드베이스 전체를 업로드하지는 않습니다.
00:02:03어떤 파일이 실제 의미가 있는지 파악합니다.
00:02:05둘째로, 팝업 창이 나타나서
00:02:07"모든 파일을 검토하는 데 15~20분 정도
00:02:09소요될 수 있습니다"라고 안내해 줍니다.
00:02:11처음부터 직접 만들고 싶다면
00:02:12그렇게 할 수도 있습니다.
00:02:13새 프로토타입을 시작해 보죠.
00:02:16이름은 'Chase 데모'로 하겠습니다.
00:02:17두 가지 옵션이 있습니다.
00:02:18대략적인 와이어프레임으로 하거나,
00:02:20바로 고정밀(high fidelity) 목업으로 갈 수도 있습니다.
00:02:23목업으로 진행해 보죠.
00:02:25그러면 이 페이지로 이동합니다.
00:02:26확실히 Stitch의 느낌이 좀 나네요.
00:02:28이제 명령을 내려보겠습니다.
00:02:29도시 간의 문화 흐름을 보여주는 상호작용형 다크 테마 그래픽,
00:02:31빛나는 경로로 연결된 도시들과
00:02:33회전하는 지구본을 디자인해 달라고 하겠습니다.
00:02:35데모에서 했던 것과 똑같은 내용이지만,
00:02:37여기서 얻는 결과가 영상에서 보여준
00:02:40에셋과 실제로 일치하는지,
00:02:43그리고 어떤 차이점이 있는지 궁금하네요.
00:02:45광고에서 얼마나 과대포장을 했는지 말이죠.
00:02:47한번 보내보겠습니다.
00:02:48참고로 여기서 보시면,
00:02:50모델 같은 것들을 선택할 수도 있습니다.
00:02:52파일을 첨부할 수도 있고,
00:02:53음성 기능을 쓰거나 원하는 무엇이든 가져올 수 있습니다.
00:02:55곧바로 우리에게 질문을 던지기 시작하는데,
00:02:57전 이 점이 아주 마음에 듭니다.
00:02:58Claude Code의 플랜(plan) 모드와 거의 비슷합니다.
00:03:02어떤 종류의 문화를 생각하시나요?
00:03:04혼합된 지구본 스타일로 해보죠.
00:03:07그리고 이 흐름 경로(flow path)를
00:03:13사용해 보겠습니다. 멋져 보이네요.
00:03:14색상 팔레트는 무엇으로 할까요?
00:03:16멀티 휴(multi-hue)로 하겠습니다.
00:03:18이런 프롬프트가 나오는 것이
00:03:20정말 마음에 듭니다.
00:03:21Stitch에서는 이런 걸 보기가 어렵거든요.
00:03:24다른 툴에서도 마찬가지고요.
00:03:26Claude Code의 가장 강력한 점 중 하나는,
00:03:29다른 웹 디자인 레슨에서도 이야기했듯이,
00:03:31서로 대화를 주고받으면서
00:03:33우리 계획의 맹점을 파악해 나가는 것입니다.
00:03:37이런 질문들을 던진다는 건 엄청난 일입니다.
00:03:39꽤 많은 질문을 하네요.
00:03:40보통 Claude Code 플랜 모드도 세 개 정도만 묻거든요.
00:03:43드래그해서 회전하는 방식으로 하겠습니다.
00:03:45어떤 도시를 특징으로 삼을까요?
00:03:47상위 10개 도시로 하죠.
00:03:49UI는 어느 정도 수준으로 할까요?
00:03:50전체 대시보드(full dashboard) 형태로 하겠습니다.
00:03:53전반적인 분위기는,
00:03:54에디토리얼(editorial) 스타일로 가보겠습니다.
00:03:58에디토리얼을 유지하죠.
00:04:00어떤 요소를 조정 가능하게 만들까요?
00:04:02흐름 색상 팔레트(flow color palette)로 하겠습니다.
00:04:07세 가지 정도를 시켜보죠.
00:04:08계속해 보겠습니다.
00:04:09질문에 답변하고 나면 왼쪽에
00:04:11진행 상황이 설정됩니다.
00:04:12이것 또한 Claude Code를 플랜 모드로 놓고
00:04:15작업을 시켰을 때 보는 것과 비슷합니다.
00:04:17참고로 이것은 당연히
00:04:19웹 앱 상에서만 할 수 있는 작업입니다.
00:04:22그래픽적인 특성 때문에
00:04:24터미널에서는 사용할 수 없습니다.
00:04:27제가 알기로는 이것이
00:04:29데스크톱 앱에 구현될 것 같지는 않지만,
00:04:30언젠가는 될지도 모르겠네요.
00:04:33하지만 현재로서는 Claude.ai를 통해야 합니다.
00:04:35빌드되는 동안,
00:04:36여러분들이 가질 만한 의문에 대해 이야기해 보죠.
00:04:38채팅창에 바로 이 프롬프트를 넣거나
00:04:39Claude Code를 불러와서
00:04:41"이런 상호작용형 결과물을 만들어줘"라고
00:04:43말하는 것과 무엇이 다르냐는 거죠.
00:04:45그냥 거기서 어떤 웹 앱을
00:04:47만들어내게 하는 것과 말이죠.
00:04:48결론부터 말씀드리면 극도로 단순화했을 때 차이는 없습니다.
00:04:50어차피 코드를 작성하는 것이니까요.
00:04:54결국 똑같을 겁니다.
00:04:55차이점은,
00:04:56어떤 형태로든 프론트엔드 디자인을 해보셨다면,
00:04:58그게 아주 단순한 랜딩 페이지일지라도,
00:05:00이런 것들을 시각적으로 직접 보고
00:05:02비교할 수 있는 힘이 얼마나 큰지 아실 겁니다.
00:05:04그래서 Google Stitch가 멋진 것입니다.
00:05:05Stitch가 훌륭한 이유는
00:05:08반드시 디자인 철학 때문만은 아닙니다.
00:05:09물론 그것도 좋다고 생각하지만요.” 핵심은
00:05:11수많은 옵션을 시각적으로 확인하고
00:05:12이런 방식으로 편집할 수 있는 UI가 있다는 겁니다.
00:05:13그리고 마음에 들면 코드로 가져오는 거죠.
00:05:15디자인 관점에서 모든 것을 코드 우선으로 하면 힘듭니다.
00:05:17조금 엉성해지기 쉽죠.
00:05:18시각적인 매체를 자연어로 바꾸고,
00:05:20그게 다시 코드가 되었다가,
00:05:22다시 시각적 결과물로 나오면서
00:05:23완벽하게 잡아내기는 어렵습니다.
00:05:26특히 초기 단계에서는 더욱 그렇죠.
00:05:28시각적으로 확인할 필요가 있습니다.
00:05:29적어도 저에게는 선택지를 눈으로 보는 게 필요합니다.
00:05:32그래서 이 기능은 정말 대단합니다.
00:05:33Anthropic과 Claude Code에 있어 큰 진전입니다.
00:05:34그동안 이곳이 실질적인 약점이었기 때문입니다.
00:05:36Pencil 같은 앱들이
00:05:38인기를 얻고 있는 이유도
00:05:41이런 종류의 일을 처리할 수 있는
00:05:42시각적 매체를 제공하기 때문입니다.
00:05:45또한 짧게 덧붙이자면 하단을 보시면,
00:05:46이것들은 완전한 기능을 갖춘 애플리케이션입니다.
00:05:48본질적으로 프로토타이핑이죠.
00:05:49그래서 API라고 불리는 것들을 가질 수 있습니다.
00:05:51이것을 단순히 Canva 같은
00:05:53시각 디자인 도구로만 생각하지 마시고,
00:05:55Google AI Studio 같은 개념으로
00:05:58생각하시는 것이 더 적절합니다.
00:06:00결과가 나왔네요.
00:06:03에디토리얼 스타일로 만들어졌습니다.
00:06:04여기에 지구본이 보이네요.
00:06:05마우스로 드래그할 수 있습니다.
00:06:07회전 속도를 조절하거나 광원 강도를 바꾸고,
00:06:08팔레트를 변경할 수도 있습니다.
00:06:10꽤 멋지네요.
00:06:12그리고 이 옆에는 짧은 설명글들이 있습니다.
00:06:14이제 이것을 편집하는 방법에 대해 이야기해 보죠.
00:06:18우선 상단에 이 'tweak' 항목이 있습니다.
00:06:19이것은 회전 속도 같은 것들과
00:06:21관련된 설정들입니다.
00:06:25댓글을 남기거나 편집, 그리기도 가능합니다.
00:06:27전체 화면으로 전환해서
00:06:30실제로 어떻게 보일지 확인할 수도 있죠.
00:06:33전체 화면으로 보니 꽤 흥미롭네요.
00:06:34훨씬 더 보기 좋습니다.
00:06:37하지만 여기서 수정을 하고 싶다고 해봅시다.
00:06:39물론 프롬프트 창으로 돌아가서
00:06:41지시를 내릴 수도 있습니다.
00:06:42하지만 편집(edit)으로 들어가면 훨씬 세밀한 조정이 가능합니다.
00:06:44Cursor의 에디터나
00:06:46Lovable 같은 느낌이 좀 납니다.
00:06:49개별 도시들을 직접 선택할 수도 있습니다.
00:06:50지구본 전체를 선택하면 여기 창이 뜹니다.
00:06:55여기서 색상 같은 것들을 바꿀 수 있습니다.
00:06:58보기 흉해졌네요. 높이 등도 조절할 수 있고요.
00:06:59바꾸고 싶은 부분을 매우 구체적으로
00:07:04지정할 수 있다는 건 정말 좋습니다.
00:07:07"이것의 크기를 바꾸고 싶어"라고 텍스트로 말하는 것보다
00:07:11여기서 직접 선택해서 편집하는 게 더 낫죠.
00:07:14댓글 기능도 사용할 수 있습니다.
00:07:16특정 요소를 클릭하고,
00:07:18편집과 비슷하지만 특정 수치를
00:07:19직접 바꾸는 대신,
00:07:21지구본을 클릭하고 댓글로
00:07:24"지구본을 더 크게 만들 수 있을까요?"라고 남깁니다.
00:07:25Claude에게 전송(Send to Claude)을 누르면,
00:07:27댓글 큐가 생성됩니다.
00:07:29당장 Claude에게 보내고 싶지 않을 수도 있지만,
00:07:31언제든 보낼 수 있고
00:07:34그러면 작업이 시작됩니다.
00:07:37그 위에 직접 그림을 그릴 수도 있습니다.
00:07:40이쪽에 달이 있었으면 좋겠다고
00:07:41그려볼 수 있겠죠.
00:07:43아르테미스 2호가 이 근처를
00:07:45비행하는 모습 같은 것 말이죠.
00:07:46그 옆에는 디자인 파일이 있습니다.
00:07:48내부적으로 코드가 어떻게 짜여 있는지
00:07:50확인할 수 있습니다.
00:07:52마지막으로 내보내기(export)와
00:07:53공유 기능이 있습니다.
00:07:56내보내기를 클릭하면 zip 파일로 다운로드하거나,
00:07:56PDF, 파워포인트로 내보내거나 Canva로 보낼 수 있습니다.
00:07:58또한 정말 멋진 점은 이것을
00:08:00Claude Code로 넘길 수 있다는 겁니다.
00:08:02이 결과물을 Claude Code 내부로 가져오는
00:08:04명령어를 알려주는데, 정말 훌륭합니다.
00:08:05오늘은 여기까지만 설명해 드리겠습니다.
00:08:07좀 빠르고 거칠게 훑어봤지만,
00:08:11어떻게 다루는지와 무엇이 가능한지
00:08:13보여드리고 싶었습니다.
00:08:14내일이나 모레쯤 이 기능을 최대한 활용하는 방법에 대해
00:08:15심층 분석 영상을 올릴 예정이니 기대해 주세요.
00:08:17항상 그렇듯, 여러분의 생각을 알려주세요.
00:08:18Chase AI 마스터클래스에 참여하고 싶으시면,
00:08:19고정 댓글의 링크를 확인해 주시고 다음에 뵙겠습니다.
00:08:21어떻게 다루는지와 무엇이 가능한지 보여드리고 싶었습니다.
00:08:23내일이나 모레쯤 이 기능을 최대한 활용하는 방법에 대해
00:08:26심층 분석 영상을 올릴 예정이니 기대해 주세요.
00:08:29항상 그렇듯, 여러분의 생각을 알려주세요.
00:08:31Chase AI 마스터클래스에 참여하고 싶으시면,
00:08:33고정 댓글의 링크를 확인해 주시고 다음에 뵙겠습니다.