스크립트
00:00:00Claude Code가 아주 새로운 Slash Design 기능을 통해 프론트엔드 디자인 기능에 큰 업그레이드를 맞이했습니다.
00:00:07이제 Slash Design 기능은 기존 단독 웹앱인 Claude Design의 장점을 가져와 Claude Code 자체에 직접 통합합니다.
00:00:16이제 두 개의 서로 다른 애플리케이션을 번갈아 가며 사용하거나 Claude Design에서 Claude Code로 디자인을 어색하게 전송할 필요 없이 양쪽의 장점을 모두 누릴 수 있습니다.
00:00:25게다가 이미 Claude Code 안에서 사용하고 있는 모든 스킬들의 추가적인 기능까지 활용할 수 있습니다.
00:00:30따라서 이 새로운 Slash Design 기능을 Impeccable이나 Taste 같은 스킬과 결합하여 훨씬 더 뛰어난 결과물을 얻을 수 있습니다.
00:00:36그러므로 오늘 영상에서는 Slash Design의 작동 방식뿐만 아니라 이를 최대한 활용할 수 있는 최고의 워크플로우까지 알려드리겠습니다.
00:00:42그러니 Claude Code로 프론트엔드 디자인 작업을 하시는 분들이라면 끝까지 시청하시는 게 좋을 겁니다.
00:00:46자, Slash Design 기능의 핵심 장점은 바로 지금 보시는 바와 같습니다.
00:00:49현재 저는 Claude 데스크톱 앱을 사용 중이지만, 터미널을 사용할 때도 정확히 똑같이 적용됩니다.
00:00:53Slash Design을 실행해서 무언가를 만들어 달라고 요청하면 Claude Design 웹 앱과 아주 유사한 아트보드가 생성된다는 점입니다.
00:01:02선택할 수 있는 여러 옵션이 주어지며, 이 옵션들을 보면서 변경 사항을 아주 세밀하게 조정할 수 있습니다.
00:01:09보시다시피 오른쪽에 생성된 프론트엔드 디자인의 다양한 컴포넌트를 클릭하면 거의 모든 것을 변경할 수 있습니다.
00:01:17그뿐만 아니라 동일한 종류의 결과물에 대해 여러 버전을 아주 쉽게 요청할 수 있으며, 마음에 드는 버전을 고르면 Claude Code가 실제로 작업을 시작해 코딩해 줍니다.
00:01:27이 기능 덕분에 Claude Design 웹앱에서 전체 작업을 다 한 뒤 전송하겠다고 말하고, 압축 파일로 만들어 폴더에 넣고, Claude Code에 지정해 주는 등 번거로운 작업을 할 필요가 없어 많은 시간을 절약할 수 있습니다.
00:01:38그리고 앞서 말씀드린 것처럼 단순히 편리한 것을 넘어 이제 스킬들을 서로 조합할 수 있습니다.
00:01:43Claude Design 웹앱 안에서는 Impeccable이나 Taste 같은 스킬을 직접 사용하거나 호출할 수 없습니다.
00:01:49하지만 여기서는 가능합니다.
00:01:50따라서 편리할 뿐만 아니라 결과물의 퀄리티도 훨씬 더 좋아질 것입니다.
00:01:54자, 디자인 스킬을 사용하는 방법은 매우 간단합니다.
00:01:56슬래시 디자인(slash design)을 입력한 다음, 만들고자 하는 내용을 프롬프트로 입력하기만 하면 됩니다.
00:02:01예를 들어 새로운 슬래시 디자인 기능이 무엇을 하는지 설명하는 소셜 미디어 게시물, 인스타그램 게시물 같은 것을 만들고 싶다고 해봅시다.
00:02:10그리고 이를 완전히 다른 세 가지 디자인 스타일로 세 가지 버전을 만들고 싶고, Impeccable 스킬을 사용하고 싶다고 가정해 보겠습니다.
00:02:19그냥 마이크를 켜고 방금 말한 것처럼 그대로 이야기하면 됩니다.
00:02:22소셜 미디어 게시물을 위한 목업을 만들어 줄 수 있나요?
00:02:27새로운 Claude Code 슬래시 디자인 기능이 무엇을 하는지 자세히 보여주는 인스타그램 게시물 같은 것이라고 생각하세요.
00:02:34완전히 다른 세 가지 변형, 즉 매우 다른 디자인 스타일과 매우 다른 미학적 스타일을 원합니다.
00:02:41이 작업을 할 때 Impeccable 스킬을 호출하여 제작을 도우라고 하고 싶습니다.
00:02:45만약 Claude 데스크톱 앱에서 이와 정확히 같은 스킬을 실행한다면, 이런 사이드 패널 같은 곳에 표시될 것입니다. 모든 것이 한곳에 있기 때문에 제가 데스크톱 앱에서 작업하는 것을 좋아하는 이유이기도 합니다.
00:02:57터미널 안에서 실행하면 아티팩트가 생성되는 것을 볼 수 있는데, 기본적으로 브라우저에서 열리게 됩니다.
00:03:02따라서 데스크톱 앱만큼 편리하지는 않지만 여전히 작업을 수행하기에 꽤 쉽습니다.
00:03:06자, 아티팩트를 살펴보기 전에 오늘의 스폰서인 저에 대한 짧은 안내 말씀이 있겠습니다.
00:03:10방금 새로 업데이트된 Claude Code 마스터클래스를 출시했습니다. 특히 비전공자이신 분들이 AI 개발자로 거듭날 수 있는 최고의 방법입니다.
00:03:19우리는 실제적이고 실용적인 유스케이스에 집중하며, 이 과정은 매주 빠짐없이 업데이트됩니다.
00:03:24그러므로 이 엄청난 도구를 실제로 어떻게 활용해야 할지 고민하고 계신 분들이라면 이 강의가 바로 여러분을 위한 것입니다.
00:03:32Chase AI+ 내에서 찾으실 수 있습니다.
00:03:33고정 댓글에 링크가 있습니다.
00:03:35그리고 이것이 생성된 아티팩트의 모습입니다.
00:03:37데스크톱 앱에서 보았던 것처럼 인스타그램 게시물을 위한 세 가지 다른 디자인 스타일이 준비되어 있습니다.
00:03:44오른쪽에 이렇게 속성 바가 있습니다.
00:03:46확대해서 무언가를 클릭하면 정확히 어떤 부분을 조정하고 있는지 훨씬 더 자세하게 확인할 수 있습니다.
00:03:52또한 우측 상단을 보시면 현재는 비어 있는 tweaks(조정) 섹션이 있는 것을 확인하실 수 있습니다.
00:03:57Claude Design 웹앱에서 보던 것과 똑같이, 언제든지 Claude Code에 프롬프트를 입력해 tweaks 패널을 생성해 달라고 요청할 수 있습니다.
00:04:03그러면 지금 여기에 보이는 것보다 훨씬 더 많은 항목을 조정할 수 있습니다.
00:04:07따라서 이 기능을 실제로 사용하는 것은 비교적 간단합니다.
00:04:10그저 슬래시 디자인을 입력하고 원하는 것을 요청하기만 하면 됩니다.
00:04:12자, 그렇다면 우리의 워크플로우는 실제로 어때야 할까요?
00:04:14이 기능을 어떻게 해야 최대한 활용할 수 있을까요?
00:04:16글쎄요, Claude Code로 프론트엔드 디자인을 할 때마다 매번 사용해야 하는 간단한 3단계 워크플로우가 있습니다.
00:04:22첫 번째 단계는 바로 영감(inspiration) 얻기입니다. Claude에게 단순히 “이것저것 세 가지 만들어줘”라고 프롬프트만 던져서는 안 되기 때문입니다.
00:04:30이상적으로는 Claude Code에 몇 가지 예시를 제공하고 싶습니다.
00:04:33마음에 드는 포스터의 스크린샷을 찍어두고 싶습니다.
00:04:35제가 좋아하는 디자인 스타일의 스크린샷을 찍어두고 싶습니다.
00:04:39이를 Claude Code에 입력하면서 “이와 비슷한 느낌으로 무언가 만들어 줄 수 있어?”라고 말하는 것입니다.
00:04:43지금은 포스터 작업을 하고 있지만, 랜딩 페이지나 히어로 섹션 등을 만들 때도 이 방법이 똑같이 적용됩니다.
00:04:50자, 여러분의 다음 질문은 “영감은 어디서 찾을 수 있죠?”일 것입니다.
00:04:52다행히도 아이디어를 얻을 수 있는 곳은 아주 많습니다.
00:04:55좋은 웹사이트 중 하나는 핀터레스트(Pinterest)입니다.
00:04:57그냥 인스타그램 인포그래픽을 검색해 보면 이 모든 잠재적인 디자인들을 볼 수 있습니다.
00:05:01또 다른 좋은 곳은 랜드북(Landbook)인데, 웹 디자인이나 히어로 섹션 같은 것에 정말 좋습니다.
00:05:06그리고 드리블(Dribbble) 같은 곳도 있습니다. B가 세 개 들어가는 드리블 말입니다.
00:05:11핵심은 직접 찾아 나서서 무언가를 디자인하고 싶을 때 언제든 참고하고 Claude Code에 가져다 줄 수 있는 나만의 디자인 라이브러리를 구축하기 시작해야 한다는 점입니다.
00:05:21그래야 매번 이 영감 찾기 과정을 반복할 필요가 없습니다.
00:05:24그래서 저는 마음에 드는 디자인들의 스크린샷을 몇 개 찍어둘 것입니다.
00:05:27이게 마음에 드네요.
00:05:29이것도 꽤 흥미로워 보입니다.
00:05:31기억하세요, 여러분은 단지 Claude가 참고했으면 하는 일반적인 미적 감각을 찾아가는 것입니다.
00:05:36그리고 이 디자인도 꽤 흥미로워 보입니다.
00:05:39이제 그 세 장의 스크린샷을 프롬프트 창에 드래그해 넣겠습니다.
00:05:43그리고 이전에 주었던 것과 기본적으로 같은 프롬프트를 입력할 것입니다. 즉, 저런 인스타그램 게시물을 원한다는 식이죠.
00:05:48세 가지 다른 버전을 원합니다.
00:05:49다만 이번에는 이 스크린샷들을 참고하라고 말할 것입니다.
00:05:52이 이미지들이 영감으로 사용되기를 바랍니다.
00:05:54각 스크린샷마다 각각 다른 종류의 디자인이 나오게 할 수 있습니다.
00:05:59그리고 Impeccable 스킬을 꼭 사용하라고 지시할 것입니다.
00:06:02또한 외부 에셋을 생성하고 싶다면 제가 가지고 있는 Higgs field MCP 같은 것을 사용하라고 말할 것입니다.
00:06:09다른 이미지 생성기를 위해 file.ai 같은 다른 도구를 사용할 수도 있습니다.
00:06:14아이디어는 이렇습니다. 이제 우리는 Claude Code 안에 있기 때문에 디자인 과정에 원하는 무엇이든 끌어올 수 있습니다.
00:06:19그리고 다시 말하지만, 원하지 않는다면 외부 이미지를 사용할 필요는 없습니다.
00:06:23하지만 제 프롬프트는 대략 이런 식으로 구성될 것입니다.
00:06:25그럼 우리가 만든 이 세 개의 게시물을 실제로 다시 만들어 봅시다.
00:06:29다시 한번, 슬래시 디자인 스킬을 사용하고 있습니다.
00:06:31하지만 여기에 스크린샷 세 장을 올려놓았습니다.
00:06:33그리고 그것들을 우리 디자인 과정의 영감으로 사용하고 싶습니다.
00:06:37따라서 세 개의 새로운 생성을 원합니다.
00:06:39이 적절한 스크린샷 각각을 바탕으로 하나씩 생성해 주세요.
00:06:43다시 한번, Impeccable 디자인 스킬을 사용하세요.
00:06:45그리고 기억하세요, 여러분은 Higgs field MCP에 대한 접근 권한이 있습니다.
00:06:48그러니 포스터에 사용할 외부 에셋을 생성해야겠다고 느껴진다면 그것도 수행해 주세요.
00:06:55그건 여러분의 재량에 맡기겠습니다.
00:06:56이것이 진정한 이 과정의 1단계와 2단계입니다.
00:06:591단계는 영감을 찾는 것이고,
00:07:002단계는 Claude 디자인 웹앱 안에서는 실제로 사용할 수 없는 추가적인 스킬들을 실제로 사용하는 것입니다.
00:07:08만약 “계속 Impeccable을 언급하시는데 도대체 이게 뭔지 모르겠어요”라고 생각하신다면,
00:07:11이건 여러분이 Claude Code에 추가할 수 있는 오픈소스 무료 스킬일 뿐입니다.
00:07:16그리고 이것은 전적으로 프론트엔드 디자인에 관한 것입니다.
00:07:18기본적으로 AI 슬랍(AI 쓰레기 결과물)이 어떤 것인지 인식하고, 그것을 제거하며, 여러분이 만드는 모든 것에 더 나은 디자인 원칙을 더해주는 것이 이 스킬의 핵심입니다.
00:07:26이에 대해 더 깊이 알아보고 싶다면 Impeccable을 가장 잘 사용하는 방법을 심층적으로 다룬 제 영상들이 있습니다.
00:07:31이제 Slash design을 사용해 Claude가 생성한 새로운 포스터들을 살펴보겠습니다.
00:07:35보시다시피 우리가 제공한 그 영감들을 확실히 반영하고 있습니다.
00:07:39그리고 이전처럼 언제든지 여기를 확대할 수 있습니다.
00:07:43속성을 살펴보고 여러 가지 요소를 수정하기 시작할 수 있습니다.
00:07:46자, 이제 tweaks(조정 기능)에 대해 이야기해 봅시다.
00:07:49이 디자인에는 아직 조정 가능한 컨트롤이 없습니다.
00:07:50조정하고 싶은 내용을 설명하면 Claude가 그에 맞는 tweaks 패널을 추가해 줄 것입니다.
00:07:53좋습니다, 그렇게 해보죠. 이제 마음에 들 때까지 세부 조정을 시작하고 싶어지는 프로세스의 3단계에 진입했으니까요.
00:08:00그래서 제가 할 일은 터미널을 열고(어디 있더라) “자, 이제 여기에 몇 가지 조정 가능한 컨트롤을 추가해 줄 수 있나요?”라고 말하는 것입니다.
00:08:10조정 기능이 아주 적극적이었으면 좋겠습니다.
00:08:12즉, Claude design 내부의 tweaks 패널을 사용하여 가능한 한 최대한 거의 모든 것을 편집할 수 있기를 바랍니다.
00:08:21자, 이제 오른쪽에 이 tweaks 부분이 생긴 것을 볼 수 있습니다.
00:08:24우리는 가운데 있는 이 디자인을 보고 있습니다.
00:08:25그럼 종이 색상을 바꿀 수 있겠죠?
00:08:29여기서 어떻게 수정해볼까요?
00:08:30그리고 이 조정 기능은 단순히 아이디어를 얻는 데도 유용합니다.
00:08:33따라서 언제든지 Claude Code로 돌아가 프롬프트를 입력해 다양한 변경을 시도할 수 있죠.
00:08:39이렇게 시각적으로 모든 걸 확인하면서 얻는 가장 큰 장점은, 매번 Claude Code에 프롬프트를 입력하고 생성을 기다린 뒤 결과를 확인하는 번거로운 과정을 거치지 않고도 엄청나게 빠르게 반복 수정할 수 있다는 점입니다.
00:08:52이 덕분에 전체 작업 과정이 훨씬 더 빨라집니다.
00:08:55텍스트의 생김새도 원하는 대로 바꿀 수 있죠.
00:08:58실제 크기, 두께, 줄 간격 등을 모두 변경할 수 있습니다.
00:09:03즉, 여기에 보이는 모든 요소를 편집할 수 있는 셈입니다.
00:09:06하지만 기억해야 할 점은 대규모 변경 작업도 가능하다는 것입니다.
00:09:08예를 들어 두 번째 디자인의 전반적인 느낌이 마음에 들지 않는다면 그 역시 수정할 수 있습니다.
00:09:12이런 식로 말이죠.
00:09:13현재 이 디자인의 실제 내용이 마음에 들지 않는다고 추가 프롬프트를 입력할 수도 있습니다.
00:09:17Slash Design이 실제로 무엇을 하는지 사용자들에게 더 자세히 설명하는 내용으로 채우고 싶거든요.
00:09:21그래서 두 번째 다이얼 디자인을 바탕으로 계속 진행하고 싶다고 요청할 수 있습니다.
00:09:26하지만 솔직히 말해서 콘텐츠는 조금 바꾸고 싶네요.
00:09:29다시 말씀드리지만, 우리는 Slash Design이 제공하는 기능을 설명하는 인포그래픽 형태를 만들고 있습니다.
00:09:34그러니 새로 만들 때 나머지 두 개는 무시해도 좋습니다.
00:09:36지금은 오직 그 디자인 하나에만 집중하고 싶거든요.
00:09:38웹 검색을 통해 Slash Design이 실제로 제공하는 기능을 정확히 파악한 뒤, 이 인포그래픽의 새 버전에 반영해 주세요.
00:09:48자, 이것이 업데이트된 포스터 버전입니다.
00:09:49보시다시피 새로운 Slash Design이 실제로 수행하는 역할에 대한 정보가 훨씬 더 많이 담겨 있습니다.
00:09:53그리고 이 새로운 Slash Design 기능을 사용하고 있기 때문에 편집하기도 매우 쉽습니다.
00:09:56여기 있는 텍스트가 마음에 안 든다면요.
00:09:59원하는 곳 어디든 이동할 수 있고
00:10:00실제 텍스트 자체를 수정할 수도 있습니다.
00:10:03이 시점부터는 영감을 얻고, 올바른 기술을 활용하며, 마음에 드는 디자인을 계속 다듬어가는 3단계 과정을 반복하기만 하면 됩니다.
00:10:11만약 이 가운데 디자인으로 결정하고 싶다면 Claude Code에 가운데 디자인만 작업하겠다고 말하면 됩니다.
00:10:16그러고 나서 결과물이 마음에 들 때까지 계속해서 수정 작업을 반복하는 거죠.
00:10:20그런 다음에는 완성된 결과물로 무엇이든 원하는 대로 활용하면 됩니다.
00:10:22전체적으로 볼 때, 이 Slash Design 기능 덕분에 Claude Code 내에서 프런트엔드 디자인 작업이 훨씬 더 쉬워졌습니다.
00:10:28이전에는 웹상에서 실시간으로 이런 디자인 작업을 하려면 Impeccable 같은 외부 도구에 의존해야만 했죠.
00:10:34그러니 시간을 내어 꼭 이 새로운 기능을 직접 써보시기 바랍니다.
00:10:36Claude Code를 주로 쓰면서도 Claude Design 웹앱을 좋아했지만 두 도구 사이를 오가는 것이 번거롭게 느껴졌던 분들에게 완벽한 기능이라고 생각합니다.
00:10:45바로 그런 분들을 위한 기능이죠.
00:10:46이 기능이 겨냥하는 타겟층이 바로 그들입니다.
00:10:48늘 그렇듯 이번 영상에 대한 여러분의 생각을 알려주세요.
00:10:51제 Claude Code 마스터클래스를 접하고 싶다면 Chase AI Plus도 꼭 확인해 보시기 바랍니다.
00:10:55그럼 다음 영상에서 뵙겠습니다.