00:00:00Claude 디자인은 프론트엔드 작업에 있어서
00:00:01Skills가 등장한 이후 가장 혁신적인 변화입니다.
00:00:05하지만 제대로 활용할 줄 모르면
00:00:06랜딩 페이지 하나를 완성하기도 전에
00:00:09전체 사용 할당량을 다 써버릴 겁니다.
00:00:11하지만 이 Claude 디자인 마스터클래스가
00:00:12그 문제를 해결하도록 도와줄 것입니다.
00:00:14시간을 투자할 가치가 있는 기능들을 알려드릴게요.
00:00:17게다가 일반 Claude Code와
00:00:19Claude 디자인을 정면으로 비교 테스트해 볼 겁니다.
00:00:22단순한 랜딩 페이지 작업을 넘어선
00:00:25흥미로운 활용 사례들도 다룰 예정입니다.
00:00:27정말 대단한 도구이고 다룰 내용이 많으니,
00:00:30바로 시작해 보죠.
00:00:31Claude 디자인은 구글의 Stitch에 대한 Anthropic의 답변입니다.
00:00:35Google Stitch와 마찬가지로,
00:00:37웹 앱, 모바일 앱, 심지어 슬라이드 데크까지
00:00:40다양한 시각적 목업을 만들 수 있게 해줍니다.
00:00:43Claude 디자인을 사용하려면 웹 앱으로 접속해야 합니다.
00:00:45즉, claud.ai/design으로 접속하세요.
00:00:47Claude Code에서는 사용할 수 없고,
00:00:48데스크톱 앱에서도 사용할 수 없습니다.
00:00:51제한 사항에 대해 말하자면,
00:00:52가장 먼저 짚고 넘어가야 할 큰 제한 사항은
00:00:54사용량 제한입니다.
00:00:56자체적인 주간 제한이 있으며 이는 Pro, Max 5,
00:00:5920X 플랜에 상관없이 동일하게 적용됩니다.
00:01:02이 도구는 리소스를 굉장히 많이 잡아먹습니다.
00:01:05특히 나중에 영상에서 다룰
00:01:08특정 기능을 사용하면 더욱 그렇습니다.
00:01:10하지만 그런 제한 사항에도 불구하고,
00:01:11Claude 디자인은 Claude를 이용한
00:01:14프론트엔드 디자인 작업에 있어 엄청난 도약입니다.
00:01:17Tweak 시스템 같은 기능 덕분에 웹 앱의 느낌을
00:01:20변경 사항에 따라 어떻게 조정할 수 있는지
00:01:23매우 쉽게 파악할 수 있죠.
00:01:23Edit 기능은 텍스트 프롬프트에 의존하지 않고도
00:01:28매우 빠르게 세부적인 사항들을
00:01:30수정할 수 있게 해줍니다.
00:01:31하지만 여전히 코멘트 시스템을 원하신다면,
00:01:33그렇게 할 수도 있습니다.
00:01:34실제 코멘트 버튼이 있어서
00:01:35웹 앱의 개별 부분을 선택하고
00:01:39Claude Code로 바로 전달하거나
00:01:42팀원들이 자신의 의견을 더할 수 있도록
00:01:46코멘트 큐에 추가할 수 있습니다. 매우 협업 친화적이죠.
00:01:48이 디자인들을 다른 사람들과 공유하고,
00:01:50각자 다른 곳에서 같은 작업을 수행할 수 있습니다.
00:01:53앱 위에 직접 그려서 원하는 변경 사항을 표시할 수도 있고요.
00:01:56전체 화면으로 프레젠테이션을 쉽게 확인할 수도 있습니다.
00:02:00그리고 무엇보다 중요한 것은,
00:02:02Claude Code로 쉽게 내보낼 수 있다는 점입니다.
00:02:05이러한 시각 중심의 설정 덕분에 프론트엔드 출력을
00:02:09훨씬 더 쉽게 원하는 대로 구현할 수 있습니다.
00:02:11순수하게 Claude Code 안에서만 작업하며
00:02:13코드 개발 서버를 계속 새로고침하며 코드를 수정하던
00:02:18기존의 방식보다 훨씬 효율적입니다.
00:02:19하지만 이 도구를 최대한 활용하려면
00:02:21몇 가지 꼭 알아두어야 할 것들이 있습니다.
00:02:22먼저 대부분의 사람들이 필요로 하는
00:02:25웹 앱을 위한 프론트엔드 디자인 작업부터 시작해 보죠.
00:02:29그리고 Claude Code를 썼다면 어땠을지,
00:02:33Claude 디자인과 비교해 보여드릴 겁니다.
00:02:34그래야 우리가 여기서 얻는 것이 무엇인지,
00:02:37과연 그럴 가치가 있는지 알 수 있으니까요.
00:02:38그전에 먼저 스폰서인 저의 광고를 잠깐 하겠습니다.
00:02:42방금 Chase AI Plus 내에
00:02:44Claude Code 마스터클래스를 출시했습니다.
00:02:45기술적 배경이 전혀 없더라도
00:02:48AI 개발자로 거듭날 수 있는 최고의 방법입니다.
00:02:51최근에는 마스터클래스 내에서
00:02:54에이전트 OS 시스템에 집중하고 있는데,
00:02:55Claude Code를 엔진으로 사용하고
00:02:58메모리를 위해 Obsidian을,
00:03:00구글 스위트 전체를 연결하기 위해 GWS를 보조로 사용합니다.
00:03:03이러한 기반 위에,
00:03:05필요한 모든 맞춤형 스킬 팩을 결합하여
00:03:09우리의 사용 사례에 딱 맞는 결과물을 만들어낼 수 있습니다.
00:03:12심지어 이 모든 것을 패키징하여
00:03:14고객에게 판매하는 방법까지 다룹니다.
00:03:15관심이 있으신 분들은,
00:03:17꼭 확인해 보세요.
00:03:18Chase AI Plus 내에 있으며,
00:03:19고정 댓글에 링크가 있을 겁니다.
00:03:21이제 Claude 디자인과 웹 앱에 대해 이야기해 봅시다.
00:03:24프롬프트를 입력하기 전에
00:03:26우리가 결정해야 할 사항들이 몇 가지 있거든요.
00:03:28영상 내내 화면 이곳저곳을 왔다 갔다 할 테니,
00:03:31조금 어지럽더라도 이해해 주세요.
00:03:32우리가 스스로에게 던질 첫 번째 질문은,
00:03:35디자인 시스템을 사용할 것인가 하는 점입니다.
00:03:38지금 제 화면을 보면 'None'과
00:03:40'Agentic OS 디자인 시스템'이 보이시죠.
00:03:42여러분은 처음엔 아마 'None'이라고 나올 겁니다.
00:03:44만약 디자인 시스템을 만들고 싶다면,
00:03:47위쪽으로 올라가서
00:03:48디자인 시스템 메뉴로 이동하면 됩니다.
00:03:50아마 처음엔 아무것도 없을 텐데,
00:03:52여기서 'Create'를 누르세요.
00:03:53자, 디자인 시스템이란 무엇일까요?
00:03:56본질적으로는 이후에 만드는 어떤 프로젝트에도
00:04:00적용할 수 있는 시각적 템플릿과 같습니다.
00:04:03특정 폰트나 로고,
00:04:07또는 일반적인 분위기까지 무엇이든 지정할 수 있습니다.
00:04:10바로 여기서 설정하는 것이죠.
00:04:11그러면 모든 프로젝트마다
00:04:12매번 반복해서 설정할 필요가 없습니다.
00:04:13시각적 관점에서 일관성이 있다면 말이죠.
00:04:15그래서 회사 이름을 입력하고
00:04:17그에 맞는 예시들을 제공하면 됩니다.
00:04:20이 예시들은 코드일 수도 있습니다.
00:04:21GitHub 저장소를 연결하거나,
00:04:23폴더를 드래그해서 넣을 수도 있죠.
00:04:25파일을 업로드할 수도 있고,
00:04:27폰트나 에셋 등을 추가할 수도 있습니다.
00:04:29여기가 바로 여러분의 브랜드를 정의하는 곳입니다.
00:04:30그런데 주의할 점이 하나 있습니다.
00:04:33아까 제가 토큰 잡아먹는 기계라고 말했던 이유죠.
00:04:36토큰을 많이 쓴다는 의미는,
00:04:39디자인 시스템을 실행하면 A,
00:04:42크기에 따라 다르지만 대략 5분에서 15분 정도 소요되며
00:04:45모든 것을 분석(ingest)한다는 뜻입니다.
00:04:47그리고 B, 시작하자마자
00:04:50전체 사용량의 20에서 25%를 소모하게 될 것입니다.
00:04:55그러니 무턱대고 '디자인 시스템 5개 정도는
00:04:56가볍게 만들어야지'라고 생각하지 마세요.
00:04:57절대로 안 됩니다. 절대 안 돼요.
00:04:58하고 싶은 것이 명확하다면 하나만 만드세요.
00:05:00어떻게 설정하는지 보여드릴 테니까요.
00:05:02하지만 그 이상은 하지 마세요.
00:05:05나중에 제한이 늘어나기 전까지는요.
00:05:07정말 리소스 킬러니까
00:05:08이것 때문에 낭패 보는 일은 없어야 합니다.
00:05:09만약 디자인 시스템을 만들기로 했다면,
00:05:11내용을 다 입력한 후 'Continue to generation'을 누르세요.
00:05:12그럼 '5~15분 정도 걸립니다'라는 팝업이 뜰 겁니다.
00:05:16모든 에셋을 분석하고 나면,
00:05:17이렇게 만들어진 초안 디자인 시스템을
00:05:19검토하라는 화면이 나올 겁니다.
00:05:20저는 아까 보여드린 제 에이전트 OS 대시보드 코드를
00:05:21입력값으로 넣어주었습니다.
00:05:24나름의 색상 테마가 있죠.
00:05:26특정 폰트도 지정되어 있고요.
00:05:29이런 시각적 요소들을 바탕으로
00:05:30시스템이 결과물을 만들어낸 것입니다.
00:05:33자, 결과물이 좋아 보이죠?
00:05:34아주 괜찮네요.
00:05:38저 마스코트 좀 보세요.
00:05:40어디서 본 것 같지 않나요?
00:05:43아주 잘 나왔습니다.
00:05:45모든 색상 체계도 잘 적용되었고요.
00:05:46색상이 무엇이어야 하는지,
00:05:48카드의 모양은 어때야 하는지 등
00:05:49매우 세세한 부분까지 짚어줍니다.
00:05:53정말 마음에 듭니다.
00:05:53Stitch와 매우 비슷하네요.
00:05:54정말 그런 느낌이 강하게 듭니다.
00:05:55그래서 저는 전부 승인했습니다.
00:05:57브랜드 폰트가 빠졌다고 하네요.
00:05:59항상 사용하고 싶은 폰트가 있다면
00:06:03그때 업로드하면 됩니다.
00:06:06언제든 다시 이곳으로 돌아와서
00:06:07컴포넌트들을 하나씩 클릭해 보고
00:06:08필요에 따라 수정할 수 있습니다.
00:06:09나중에 랜딩 페이지나 슬라이드 데크 등에서
00:06:11보게 될 내용들과 마찬가지로,
00:06:14팀과 공유하거나 내보낼 수도 있습니다.
00:06:16PowerPoint, PDF, Canva,
00:06:17HTML, Claude Code 등 클릭 한 번으로 가능하죠.
00:06:20실제 디자인 파일도 확인할 수 있습니다.
00:06:21내부를 들여다보며 무슨 일이 일어나고 있는지,
00:06:23실제 HTML 파일 등을 직접 볼 수 있습니다.
00:06:26커스터마이징하고 가지고 놀 수 있는 요소가 정말 많습니다.
00:06:30Claude 디자인이 알아서 잘 만들었겠지 하고
00:06:31결과물만 기다리는 블랙박스가 아닙니다.
00:06:33내부에서 무슨 일이 일어나는지 모를 리가 없죠.
00:06:36아니요, 여러분은 통찰력을 갖게 됩니다.
00:06:39그래서 여기서 커스터마이징하고 활용할 수 있는 부분이 정말 많습니다.
00:06:42이런 방식으로 코드를 생성하는 건 정말 멋진 일이고,
00:06:44언제든지 이 코드를 로컬 머신으로 가져올 수 있습니다.
00:06:46우리는 여기에 갇혀 있는 게 아니에요.
00:06:50다시 Claude 디자인과 웹 앱 이야기로 돌아와서,
00:06:52그게 우리가 해결해야 할 첫 번째 질문입니다.
00:06:55디자인 시스템을 사용할 것인가?
00:06:57과거에 해왔던 작업과 시각적으로 같은 맥락인가?
00:06:59그리고 무엇보다,
00:07:01애초에 디자인 시스템을 만들기나 했는가?
00:07:03Anthropic 신에게 주간 토큰의 20%를 바치고
00:07:04이런 옵션을 사용할 준비가 되었는가?
00:07:06자, 이번 데모에서는 'None'으로 진행하겠습니다.
00:07:09모두가 같은 악보를 보고 연주할 수 있도록 말이죠.
00:07:10다음 질문은,
00:07:11와이어프레임을 할 것인가, 아니면 고해상도로 할 것인가입니다.
00:07:13아마도 최종 결과물이 어떻게 보일지 확인하기 위해
00:07:15고해상도(High fidelity) 작업을 원할 겁니다.
00:07:16하지만 와이어프레임으로 작업하고 싶다면,
00:07:18언제든 앞뒤로 왔다 갔다 할 수 있습니다.
00:07:19하나에만 갇혀 있을 필요는 없으니까요.
00:07:20다시 말하지만,
00:07:22Claude 디자인을 제대로 시작하기 전에
00:07:25앤스로픽의 신에게 주간 토큰의 20%를 이미 바쳤고, 이 옵션을 가지고나 있나요?
00:07:28이번 데모에서는 그냥 '없음'으로 진행하겠습니다.
00:07:30우리 모두 같은 악보를 보고 연주하는 셈이니까요.
00:07:32다음 질문은, 음,
00:07:33와이어프레임을 할까요, 아니면 고해상도 디자인을 할까요?
00:07:37아마 고해상도 디자인을 하고 싶으실 겁니다.
00:07:39실제로 어떤 모습이 될지 볼 수 있으니까요.
00:07:41하지만 다시 말하지만, 와이어프레임을 하고 싶다면
00:07:43언제든 왔다 갔다 할 수 있습니다.
00:07:44둘 중 하나에만 갇혀 있는 건 아니니까요.
00:07:45하지만 여기서는 고해상도로 진행하겠습니다.
00:07:47이름을 CD 데모라고 짓고, 생성하겠습니다.
00:07:50그러면 여기로 이동해서 컨텍스트를 요구할 겁니다.
00:07:53디자인 시스템이 있나요, 아니면 그냥 스크린샷이나
00:07:56코드 베이스나 피그마 파일이 있나요?
00:07:58어쨌든, 0단계에서 처음 시작하는 경우든,
00:08:01아니면 코드 베이스가 있는 경우든,
00:08:03이상적으로는 무언가를 제공하는 것이 좋습니다.
00:08:05우리가 이야기했던 것처럼 코드 베이스가 있다면,
00:08:07이미 작업 중인 앱이 있다면, 이걸 여기 주세요.
00:08:09클로드 디자인에 입력하세요.
00:08:10더 잘 작동할 겁니다.
00:08:12하지만 그렇지 않고 바닥부터 시작하더라도,
00:08:14최소한 제안하고 싶은 것은,
00:08:16세상에 나가서
00:08:18마음에 드는 영감을 좀 찾아보라는 것입니다.
00:08:20드리블(Dribbble)이든, 어워즈(Awwwards)든, 고들리(Godly) 웹사이트든,
00:08:23뭐든 상관없어요, 그렇죠?
00:08:25빈 화면에서 시작해서 클로드 디자인이
00:08:27모든 힘든 일을 다 해주길 기대한다면,
00:08:28당신의 프롬프트는 엉망일 거라고 장담합니다.
00:08:30컨텍스트를 적게 줄수록
00:08:33평균으로 회귀할 가능성이 높다는 점을 이해하세요.
00:08:35그러니 시작하기 전에 그 점을 이해해두세요.
00:08:36우리는 스케치를 할 수 있는 기능이 있습니다.
00:08:38그러니까, 여기다 직접 그릴 수도 있고
00:08:40이렇게 말이죠, 여기 우리 이미지가 있습니다.
00:08:44여기에 텍스트를 넣고 싶어요.
00:08:48그리고 히어로 이미지를 원해요.
00:08:53여기에 히어로 이미지를 배치하고요.
00:08:59그리고 스크롤 배너를 만들어 봅시다.
00:09:10무언가를 입력해 줄게요,
00:09:12이런 훌륭한 예술 작품 같은 것이라도 말이죠.
00:09:15그리고 단순히 그 이상의 것을 할 수 있습니다.
00:09:16펜을 바꿀 수도 있죠, 맞죠?
00:09:18텍스트를 입력할 수 있고요.
00:09:19다르게 넣을 수 있고, 스티커 메모를 추가할 수도 있어요.
00:09:21여기서 할 수 있는 일이 정말 많습니다.
00:09:25그리고 여기서, 그냥 프롬프트를 입력하면 됩니다.
00:09:28모델을 변경할 수 있는 기능도 있습니다.
00:09:30제가 추천하는 건 오퍼스 4.7입니다.
00:09:33특히 스크린샷 같은 것을 추가할 때는,
00:09:35오퍼스 4.7이 최고의 충실도와
00:09:37스크린샷에 대한 최고의 해상도를 가지고 있기 때문이죠.
00:09:40오퍼스 4.6으로 얻는 것의 3배입니다.
00:09:42자, 이제 프롬프트를 줘 봅시다.
00:09:44아르구스(Argus)를 위한 랜딩 페이지를 만든다고 말할게요,
00:09:46소셜 미디어 인텔리전스 플랫폼인데
00:09:48크리에이터들이 틈새시장에서 유행하는 주제를
00:09:49폭발하기 전에 포착하도록 돕는 플랫폼입니다.
00:09:51그게 레이아웃이에요, 아시죠,
00:09:53여기 쓴 것과 거의 비슷하게 반영하는 거죠.
00:09:55그러니 우리가 줄 수 있는 아주 형편없는 프롬프트인 셈이죠.
00:09:58기본적인 SaaS 유형의 페이지입니다.
00:10:00그럼 어떤 결과가 나오는지 봅시다.
00:10:02이게 클로드 디자인이 만들어낸 결과물입니다,
00:10:03매우 최소한의 프롬프트와 페이지에 우리가 낙서한 것 외에는
00:10:06아무런 컨텍스트 없이 만든 결과죠.
00:10:08이겁니다. 첫 번째 결과물치고는 괜찮다고 생각합니다.
00:10:13사용량 측면에서 보면, 사용 알림 4%네요.
00:10:16이 랜딩 페이지를 생성하는 데
00:10:18전체 주간 사용량의 4%가 들었습니다.
00:10:20예를 들면, 여기랑 여기 텍스트가 잘려 있는 것 같은 사소한 문제들이 있죠.
00:10:21완벽히 같은 프롬프트를 사용했고,
00:10:22프론트엔드 디자인 기술까지 사용했죠.
00:10:25나쁘지 않네요.
00:10:26제 말은, 당장 지적할 수 있는 작은 부분들이 있긴 한데,
00:10:28이를테면, 여기랑 여기 텍스트가 잘려 있다는 점이죠.
00:10:32이번 것에는 그렇게 많은 잘못된 점은 없어요.
00:10:35텍스트가 여기서 좀 겹치긴 하네요.
00:10:39여기 아래에 '상승하는 지금(rising now)'이라고 나오는데,
00:10:41그것도 좀 겹치지만, 그래도 꽤 비슷합니다.
00:10:45사실 솔직히 말해서,
00:10:46저는 디자인 쪽 결과물이 조금 더 마음에 들지만,
00:10:47누군가는 이쪽 결과물을 조금 더 좋아할 수도 있겠죠.
00:10:49그래서 첫 번째 결과물은 엄청난 차이는 없습니다.
00:10:50그럼 왜 클로드 디자인을 사용할까요?
00:10:52어디서 차이가 벌어지기 시작할까요?
00:10:54글쎄요, 그것은 바로 변형에 대해 이야기하고
00:10:55반복해서 수정할 수 있게 될 때부터
00:10:56본격적으로 차이가 나기 시작합니다.
00:10:59그리고 '조정(tweaks)'을 통해 바로 알 수 있죠.
00:11:00그래서 제가 이걸 할 수 있는 능력이 큰 의미가 있습니다.
00:11:03제가 헤드라인을 매우 빠르게 바꾸거나
00:11:07티커를 볼 수 있는 능력이 말이죠.
00:11:10그리고 여기서 더 확장할 수도 있습니다.
00:11:13그래서 제가 '조정 횟수를 공격적으로 늘려라'라고 썼습니다.
00:11:16가능한 한 이걸 가지고 최대한 많이 놀아보고 싶거든요.
00:11:18어떤 결과가 나오는지 봅시다.
00:11:20자, 이제 우리가 만져볼 수 있는 조정 옵션들이
00:11:22훨씬 더 많이 추가된 걸 볼 수 있습니다.
00:11:26그리고 사용률은 어땠을까요?
00:11:27이 모든 조정을 추가하는 데 7%가 들었습니다.
00:11:30보시다시피 랜딩 페이지를 하나 만들고
00:11:32약 14개 정도의 조정을 추가했더니 벌써,
00:11:36얼마나 쓴 거죠?
00:11:39전체 사용량의 11% 정도를 쓴 셈입니다.
00:11:40저는 이 조정 기능이 중요하다고 생각합니다.
00:11:43앞서 서론에서 이야기했듯이,
00:11:44클로드 디자인을 사용할 때 우리가 실제로
00:11:47집중하고 싶은 기능은 무엇일까요?
00:11:48원샷(one shot)으로 디자인했을 때는,
00:11:49프론트엔드 디자인 기술로 얻은 것과
00:11:51크게 다르지 않았거든요.
00:11:52하지만 이 조정 기능들과 이 모든 것들을 만질 수 있는 능력,
00:11:55이런 미묘한 변경 사항들을 빠르게 적용할 수 있다는 점,
00:11:59맞아요, 그게 바로 클로드 디자인의 진짜 힘입니다.
00:12:02조금 줌아웃을 해서
00:12:03조정 기능을 실제로 더 잘 볼 수 있도록 하겠습니다.
00:12:05이제 팔레트부터 강조색, 코너 반경, 배경 그리드,
00:12:10배경 그리드 제거, 폰트, 강조 표시, 헤드라인 차이,
00:12:14레이아웃 전환까지 모든 것을 할 수 있습니다.
00:12:19이게 바로 핵심 능력입니다.
00:12:21진정한 힘은 디자인을 한 번에 딱 완성해서
00:12:23처음부터 완벽한 UI를 내놓는 게 아닙니다.
00:12:25아니요, 제가 매우 빠르게 반복할 수 있다는 사실이죠,
00:12:29매우 빠르게 말입니다. 제가 지금 얼마나 빨리 작업하는지 생각해보세요,
00:12:33그리고 이 모든 작업을 클로드 코드 안에서
00:12:34직접 수행하려면 얼마나 걸릴지 생각해보세요.
00:12:36우리는 심지어 이 이미지에서
00:12:39어떤 소셜 미디어 관련 내용을
00:12:41AI 및 기술에서 게이밍, 금융까지로 바꿀 수도 있습니다.
00:12:46티커 속도를 조절할 수 있어서 정말 다행이에요,
00:12:47너무 빨리 지나가고 있었거든요. 하지만 정말 멋집니다.
00:12:52이게 1부이고 두 가지가 있다고 생각합니다.
00:12:54뭐, 사실 그보다 몇 가지 더 있지만,
00:12:56저는 조정 기능이 디자인에서 가장 큰 가치를 더해주는 부분이라고 생각합니다.
00:12:59시각적 반복 작업이 핵심이기 때문이죠.
00:13:01그리고 제 생각에 클로드 디자인의
00:13:04두 번째로 가장 강력한 기능은 웹 페이지의 다양성입니다.
00:13:07조정은 아주 미세한 부분이죠, 그렇죠?
00:13:09색상, 강조색, 폰트에 대한 이야기니까요,
00:13:11하지만 랜딩 페이지 자체에 대한
00:13:14완전한 변형을 원한다면, 정말 제대로 해보고 싶다면요?
00:13:18저는 그냥 다른 폰트를 말하는 게 아닙니다.
00:13:19완전히 다른 디자인을 원하고,
00:13:21그것들을 나란히 배치해서 보고 싶다는 거죠.
00:13:23다시 말하지만, 스티치(Stitch)로 할 수 있는 것처럼요.
00:13:25저도 이렇게 하고 싶거든요.
00:13:26음, 클로드 디자인 안에서 정말 쉽게 할 수 있습니다.
00:13:28그렇게 하라고 프롬프트를 입력하면 됩니다.
00:13:29우리는 정확히 그렇게 하도록 프롬프트를 입력할 겁니다.
00:13:32그래서 디자인에 프롬프트를 입력해서 말했죠,
00:13:33이 랜딩 페이지의 변형 두 가지를 더 만들어서,
00:13:36내가 클릭하며 전환할 수 있고 완전히 다른 스타일로,
00:13:39다른 변형 스타일을 먼저 제안해달라고요.
00:13:42그래서 저에게 6가지 다른 옵션을 제안해줬습니다.
00:13:44터미널 블룸버그, 터미널 스타일,
00:13:48하이퍼 맥시멀 에디토리얼, 브루탈리스트, 신스웨이브, 소프트 파스텔,
00:13:53혹은 신문 인쇄 스타일까지요.
00:13:56좋아요, 1번과 2번 정도로 해봅시다.
00:13:591번과 2번을 선택할게요,
00:14:03그리고 당연히 현재 레이아웃도 그대로 유지하고요.
00:14:08클로드 디자인이 변형 작업을 마쳤습니다.
00:14:10여기 에디토리얼 스타일 하나가 있고, 이게 우리가 처음 시작한 겁니다.
00:14:13이제 터미널 옵션이 추가됐죠.
00:14:18에디토리얼 맥시멀 옵션도 있습니다,
00:14:21꽤 흥미롭네요, 뭔가 달라요.
00:14:24만약 당신이 그렇게 하라고 말하지 않으면,
00:14:25원본에 대한 조정 작업만 수행할 겁니다.
00:14:28그래서 이런 변형 작업을 할 때는,
00:14:30일반적인 워크플로우가 이래야 한다고 생각합니다,
00:14:33먼저 변형 작업부터 시작하는 거죠.
00:14:35거시적인 관점에서, 좋아요, 이 방향으로 가고 싶다,
00:14:37그런 식으로 생각하는 겁니다.
00:14:39그리고 그 거시적인 옵션 중 하나를 선택한 후에,
00:14:42좋아요, 우리가 좋아하는 걸 유지하기로 했다면,
00:14:44그때 아주 공격적인 조정 단계로 들어가는 거죠.
00:14:47그래서 모든 걸 보고,
00:14:49원하는 부분을 세부적으로 조정할 수 있습니다.
00:14:51왜냐하면 지금 설정된 사용 방식으로는,
00:14:54만약 거시적으로 가서,
00:14:56옵션을 3개만 원하지 않는다고 말한다면요.
00:14:574개, 5개 변형을 원하고 그 모든 것에 조정을 원한다면,
00:15:00그냥 사용량을 다 써버리게 될 겁니다.
00:15:02왜냐하면 이 두 가지 변형인 맥시멀과 터미널을 추가하는 데,
00:15:04추가로 5%가 들었으니까요.
00:15:05그래서 합치면 대략,
00:15:07랜딩 페이지 하나에 17% 정도 쓴 것 같네요,
00:15:11두 가지 랜딩 페이지 변형에 조정까지 더해서요.
00:15:13사용량에 대해 계속 잔소리하는 거 알지만,
00:15:14많은 사람들에게 이건 중요한 문제이고,
00:15:16그래야만 합니다.
00:15:17나중에는,
00:15:18이 전체적인 사용량 문제가 바뀔 것 같지만,
00:15:19그냥 염두에 두세요.
00:15:20그래서 이 두 가지를 함께 사용하면,
00:15:23이 변형과 조정 기능의 조합은,
00:15:26우리가 80%, 90% 완성된 해결책에 도달하게 해줍니다.
00:15:31이제 여기에 더 집중해서 작업할 수 있어요.
00:15:35처음에 보여드렸던 것처럼 위쪽에서 작업할 수 있죠.
00:15:37편집도 가능합니다.
00:15:39상단 헤더를 클릭해서
00:15:42투명도를 바꿀 수도 있고,
00:15:43너비나 색상 같은 것들도 다 바꿀 수 있어요.
00:15:45원한다면 아주 구체적으로 조절할 수도 있지만,
00:15:47진정한 힘은 90% 정도 완성된 솔루션을 얻는 데서 나옵니다.
00:15:50이렇게 생각하는 거죠. '편집본은 마음에 들어.'
00:15:54강조점도 마음에 들고,
00:15:55그 링은 좀 별로지만, 표시 방식은 괜찮네.
00:15:59이 특정 소제목이나 헤드라인도 마음에 들어.
00:16:04그럼 이제 결정하는 겁니다.
00:16:05수정 사항들도 마음에 들고요.
00:16:06이제 나머지 랜딩 페이지를 완성해 봅시다.
00:16:09이건 히어로 섹션뿐이니까요.
00:16:11그다음 할 일은 이걸 클로드 코드(Claude Code)로 내보내는 겁니다.
00:16:14클로드 코드로 넘겨주는 거죠.
00:16:15이걸 클릭하면 몇 가지 옵션이 나옵니다.
00:16:17ZIP 파일을 다운로드하거나, 이 명령어를 복사해서
00:16:20클로드 코드 안으로 가져오면 됩니다.
00:16:22제 생각에 이런 워크플로우가 훨씬 빠릅니다.
00:16:25클로드 코드가 제공했던 것보다 말이죠.
00:16:28똑같은 프롬프트를 썼을 때 말이에요.
00:16:29그러니까, '좋아, 클로드 코드야,
00:16:32이제 색상을 좀 바꿔보자.'
00:16:35'변형을 몇 가지 만들어 봐.'
00:16:36'이제 헤드라인을 수정해서 몇 가지 버전을 만들어 봐.'
00:16:39그건 몇 시간이 걸릴 수 있지만, 이건 몇 분밖에 안 걸렸죠.
00:16:44적어도 저에게는, 뭔가를 실제로 보고
00:16:47다양한 옵션을 확인해야
00:16:48제가 뭘 좋아하는지 알 수 있거든요.
00:16:50더 좋은 건, 뭔가 보고 나면
00:16:53마음이 바뀔 수도 있다는 점이죠.
00:16:54사실 솔직히 말해서, 이걸 보고 있으면
00:16:54세로형이 더 마음에 드는 것 같기도 하고요.
00:16:56여기에 아이콘 같은 걸 추가해 볼 수도 있고요.
00:16:58그저 반복해서 작업해 보고 싶은 겁니다.
00:17:00다양한 것들을 직접 보고 싶은 거죠.
00:17:02웹 앱 작업과 관련해서 제가 드릴 수 있는
00:17:05가장 큰 모범 사례 두 가지가 바로 이겁니다.
00:17:08거시적으로는 변형을 요청하고,
00:17:11미시적으로는 세부적인 수정을 요청하세요.
00:17:13여기서 하지 않은 게 하나 있는데,
00:17:15슬라이드 덱 같은 걸 다룰 때 보여드리겠지만,
00:17:18본질적으로 '계획 모드(plan mode)'를 실행하게 하는 겁니다.
00:17:19프롬프트를 주면 바로 결과물을 내놓는데,
00:17:22그렇게 하는 대신,
00:17:24곧바로 결과물을 만들어 버리죠.
00:17:25대신 이렇게 할 수도 있습니다.
00:17:26'계획 모드를 실행하고 싶은데,
00:17:28저에게 질문을 많이 해 줬으면 좋겠어.'
00:17:30그러면 AI가 대신
00:17:32상당히 많은 질문을 던질 겁니다.
00:17:335개, 8개, 10개 정도 질문을 하겠죠.
00:17:35'여긴 뭘 원하세요?'
00:17:36'저긴 어떻게 할까요?'
00:17:37'여기는 또 뭘 원하시나요?' 하고요.
00:17:38그렇게 하면 반복 작업을 덜 해도 되고,
00:17:40결과적으로 사용량도 절약할 수 있습니다.
00:17:42저는 똑같은 방식을 사용해서
00:17:44제 에이전트 OS 대시보드의
00:17:46프론트엔드를 만들었습니다.
00:17:47여기 위에 보시면,
00:17:48이게 원래 처음에 시작했던 버전입니다.
00:17:51그리고 나서는 이런저런
00:17:52다양한 옵션들을 살펴볼 수 있었죠.
00:17:53결국 저는 이 콕핏(cockpit) 버전을 선택했습니다.
00:17:56멋진 스프라이트가 들어간 이것도 고려했었지만요.
00:17:58그리고 이 버전을 다시 클로드 코드로 가져와서
00:18:01여백을 약간 조정하고
00:18:03실제로 기능을 연결했습니다.
00:18:04그래서 제대로 된 웹 앱이 된 거죠.
00:18:06이제 클로드 디자인과 슬라이드 덱을 해 봅시다.
00:18:08이건 좀 빠르게 진행하겠습니다.
00:18:09웹 앱을 만들 때 다루었던 기초적인 내용들이
00:18:13슬라이드 덱에도 똑같이 적용되기 때문입니다.
00:18:16그러니 똑같은 이야기를 반복하지는 않을게요.
00:18:17이번에는 디자인 시스템이 실제로 작동하는 모습을 보여드리겠습니다.
00:18:21기억하시겠지만 그 시스템은
00:18:24에이전트 운영체제의 비주얼을 기반으로 합니다.
00:18:26이제 생성을 눌러보죠.
00:18:27어떤가요?
00:18:28이전과 설정은 같습니다.
00:18:30컨텍스트를 제공해 달라는 요청이 나오죠.
00:18:32스크린샷이나 코드베이스, 피그마 파일 같은 것들 말입니다.
00:18:35이제 우리가 줄 유일한 컨텍스트는
00:18:37이미 설정되어 있는 디자인 시스템입니다.
00:18:39그리고 이런 프롬프트도 함께 주죠.
00:18:41'클로드 디자인과 구글 스티치(Stitch)의 차이점에 대해
00:18:45이야기하는 슬라이드 덱을 만들어 줘.'
00:18:48그리고 다른 창에서 클로드 코드를 사용해 오푸스(Opus) 4.7에게
00:18:53프롬프트를 작성하게 했습니다.
00:18:54웹 검색을 할 필요가 있었거든요.
00:18:55'좋아, 두 서비스의 차이점은 대략 이렇지.'
00:18:57마지막에 이렇게 적었습니다. '무언가를 만들기 전에,
00:19:01질문이 있으면 뭐든지 다 물어봐.'
00:19:02'그래야 우리가 같은 방향을 볼 수 있으니까.'
00:19:05그러니까 사실상 강제로
00:19:07계획 모드를 실행하게 만든 셈입니다.
00:19:08이제 여기서 질문들이 채워지는 게 보이시죠.
00:19:10다시 말씀드리지만 이런 강제 계획 모드는
00:19:12웹 앱을 만들 때도 똑같이 적용할 수 있습니다.
00:19:14초기 프롬프트에 확실히 적어두기만 하면 됩니다.
00:19:16'이 발표 자료는 누구를 위한 건가요?'
00:19:18'공개 강연용이라고 하죠.'
00:19:20'짧고 간결하게 할게요.'
00:19:24'6분 정도, 아니 5분 발표 분량으로 하죠.'
00:19:28'슬라이드는 5장으로 할게요.'
00:19:30'약간 의견이 담긴, 제목 스타일로 중앙에 배치해 줘.'
00:19:34'2x2 포지셔닝 맵만 포함하고요.'
00:19:37'가격은 언급해 줘.'
00:19:39그다음 나머지 질문들도 차례로 진행하죠.
00:19:43'발표 노트는 필요 없어요.'
00:19:44전체적으로 보니 질문을 1, 2, 3, 4, 5,
00:19:476, 7, 8, 9, 10, 11, 12, 13, 14개나 했네요.
00:19:52게다가 여기 아래쪽에 자유 답변 항목까지,
00:19:56정말 마음에 듭니다.
00:19:58전체 화면으로 띄웠고, 참고를 위해서 보여드립니다.
00:20:00제가 느끼기에 많아야 겨우,
00:20:03한 번에 질문 4개씩 두 번 정도 반복하는 수준이었거든요.
00:20:05그래서 이건 아주 좋습니다.
00:20:06자, 여기 완성된 슬라이드 덱을 보시죠.
00:20:07전체 화면으로 띄워 봤는데 참고로
00:20:10이건 전체 사용량의 5%를 차지했습니다.
00:20:12슬라이드 한 장당 약 1% 정도네요.
00:20:15타이틀 페이지와 데크에 대한 작은 각주가 있죠
00:20:19Cloud Design으로 생성되었다는 내용입니다.
00:20:22수치들이 어디에 위치하는지 알 수 있습니다.
00:20:26비용 측면에서 수치가 어디에 위치하는지 보여주는
00:20:30그래프가 있습니다.
00:20:31분명 Cloud Design 쪽이 훨씬 더 비쌉니다.
00:20:34현장 보고서죠.
00:20:37그리고 나면 이런 식의 정보를 제공합니다.
00:20:38여기 각각의 사용 사례에 무엇을
00:20:40사용해야 하는지 보여주는 차트가 있습니다.
00:20:43슬라이드 데크가 정말 멋지게 나왔다고 생각합니다,
00:20:45솔직히 말씀드리면요.
00:20:46하지만 그보다 더 중요한 건
00:20:48디자인 시스템을 잘 지켰다는 점입니다.
00:20:49전체 디자인 시스템이 기반으로 한 이 에이전트 OS가
00:20:53데크에 확실히 반영되어 있습니다.
00:20:55두 결과물은 마치 같은 곳에서 나온 것처럼 보입니다.
00:20:59웹 앱 때와 마찬가지로
00:21:00같은 워크플로우를 따라갈 수 있습니다.
00:21:03이게 처음에 우리에게 제공된 결과물이었죠.
00:21:05이제 매크로 변형을 요청해서 이렇게 말할 수 있습니다,
00:21:07좋아요, 디자인 시스템을
00:21:09그대로 유지할까요?
00:21:11아니면 완전히 다른 방향으로 갈까요?
00:21:13좋습니다, 두세 가지, 네 가지 다른 변형을 확인해 봅니다.
00:21:16자, 하나로 좁혀 보죠.
00:21:17이제 수정 사항을 반영해서
00:21:19정말 세밀하게 다듬어 봅시다.
00:21:20그게 제가 생각하는 슬라이드 데크에
00:21:22접근하는 방식입니다.
00:21:23웹 앱에 접근하는 방식과 동일하죠.
00:21:24참고로, 여기 Cloud Code가
00:21:27우리에게 만들어 준 슬라이드 데크가 있습니다.
00:21:29똑같은 프롬프트를 입력했고
00:21:31같은 디렉토리인 에이전트 OS 시스템에서
00:21:34직접 생성했습니다.
00:21:36그러니까 같은 디자인 시스템에
00:21:38완전히 접근할 수 있었다는 뜻이죠.
00:21:39게다가 질문을 해달라고 요청하기도 했습니다.
00:21:42그런데 질문을 일곱 개밖에 안 하더군요.
00:21:43솔직히 그 질문들도 별로 좋지 않았습니다.
00:21:46슬라이드 개수나
00:21:47화면 비율을 어떻게 할지 같은
00:21:49질문들이어서 좀 더 표면적이었죠.
00:21:51디자인에서 본 것과 비교하면 말이죠.
00:21:52전반적으로 그래서인지
00:21:55훨씬 더 평범한 결과물이 나왔습니다.
00:21:57Design이 준 것과 비교했을 때 시각적 스타일이
00:22:00그렇게 가깝지 않다는 게 조금 의외였습니다.
00:22:02나쁘다는 건 아닙니다.
00:22:05색상도 비슷하고, 텍스트도 비슷하긴 하지만,
00:22:07솔직히 말씀드려야겠네요.
00:22:10솔직히 말해서 이 결과물은
00:22:12완전히 압승입니다.
00:22:13마지막으로, 모바일 앱 디자인에 대해 이야기해 보죠.
00:22:15여기에는 두 가지 옵션이 있습니다.
00:22:17첫째, 바로 모바일로 가는 겁니다.
00:22:19웹 앱 작업은 아예 안 하는 거죠.
00:22:21그건 꽤 간단합니다.
00:22:22이 영상 초반부에 웹 앱으로 했던 것과
00:22:25똑같이 하면 됩니다.
00:22:26그냥 처음부터
00:22:28이건 모바일 앱을 위한 거라고 말하면 됩니다.
00:22:29시각적 요소가 그에 맞춰 반영되도록 하세요.
00:22:32하지만 만약 웹 앱을 먼저 만들고
00:22:33그걸 모바일 플랫폼으로 변환하고 싶다면,
00:22:35꽤 간단합니다.
00:22:36우리가 지금 있는 이 프롬프트 창에 머물 수도 있지만,
00:22:40사실, 자 이제 모바일 버전으로 보여줘 라고 해도 됩니다.
00:22:42하지만 같은 내용으로 별도의 프로젝트를
00:22:45생성하는 것이 더 합리적일 겁니다.
00:22:46그러면 이제 우리가 작업 중인 웹 앱과
00:22:48모바일 사이에 명확한 구분이 생기니까요.
00:22:51그렇게 하려면 우측 상단에 있는
00:22:53공유(Share) 버튼으로 이동하세요.
00:22:54그리고 프로젝트 복제(Duplicate project)를 누르세요.
00:22:57그렇게 하면 이런 페이지로 이동하게 됩니다.
00:23:00하지만 홈페이지로 돌아가면,
00:23:02이제 CD 데모 리믹스가 있는 걸 볼 수 있습니다.
00:23:05그 리믹스가 바로 복제된 프로젝트입니다.
00:23:08이제 프롬프트를 입력해서 이렇게 말해보겠습니다.
00:23:10같은 디자인을 모바일 형식으로 보여줄 수 있나요?
00:23:13여기 모바일 버전 결과물이 있습니다.
00:23:15전부 세 가지 변형을 만들어 줬네요.
00:23:18따로 지정하지 않았는데도 알아서 해줬습니다.
00:23:19그래서 총 9개의 목업을 제공받았고
00:23:21총 비용은 사용량의 5%였습니다.
00:23:25평소와 같은 흐름이죠.
00:23:27여기에 매크로를 제공해 줬습니다.
00:23:29우리는 그중 마음에 드는 걸 고르면 되겠죠.
00:23:30웹 앱용으로 결정했던 것과 같은 것이어야 할 겁니다.
00:23:32거기서부터는 이렇게 말할 겁니다,
00:23:34헤이, 에디토리얼 스타일이 마음에 드네.
00:23:36이제 수정 사항을 많이 올려서 제대로 완성해 보자.
00:23:38하지만 솔직히 말하면,
00:23:39웹 앱 버전에서 모든 설정을 이미 마쳤다면,
00:23:42수정 작업은 이미 다 끝났을 가능성이 높습니다.
00:23:44그래서 이 시점에서
00:23:47더 바꿀 건 별로 없을 겁니다.
00:23:48하지만 항상 조금씩은 있죠,
00:23:51표준 웹 앱에서
00:23:53모바일 디자인으로 넘어갈 때는 항상 문제가 생기거든요.
00:23:55하지만 보시는 것처럼, 아주 쉽게 할 수 있죠,
00:23:57단 한 줄의 프롬프트만 있으면 됩니다.
00:23:58오늘 여러분께 드릴 이야기는 여기까지입니다.
00:23:59Claude Design과 Claude Code의 차이점을
00:24:02없애는 데 도움이 되었기를 바랍니다.
00:24:04특히 Claude Design 안에서
00:24:06우리의 수익을 창출해 주는 기능들인
00:24:09수정 기능과 변형 기능을 강조하고 싶었습니다.
00:24:11이게 실제로 우리에게 가져다주는 건 반복 속도입니다.
00:24:15무엇을 만들려고 하든
00:24:17다양한 버전을 아주 많이 시도해 볼 수 있고,
00:24:19결국 마음에 드는 결과물에 도달할 수 있으니까요.
00:24:21그렇게 결정이 되면,
00:24:22이제 Claude Code 생태계로 가져오는 거죠.
00:24:25매 작업과 생성 과정마다 소모된
00:24:27비용 비율을 언급함으로써
00:24:31사용 비용을 조금 더 명확하게 이해하는 데 도움이 되었길 바랍니다.
00:24:33언제나 그렇듯, 생각하신 바를 알려주세요.
00:24:35더 많은 Claude Design 자료를 기대해 주세요.
00:24:38정말 훌륭한 도구라고 생각하거든요.
00:24:40Chase AI+도 꼭 확인해 보세요.
00:24:42Claude Code 마스터클래스를 직접 경험하고 싶으시다면요,
00:24:45다음에 또 뵙겠습니다.