00:00:00Claude code 안에는 괴물이 하나 숨어 있는데, 바로 'AI Slop(저질 AI 콘텐츠)'입니다.
00:00:03모든 곳에 쓰이는 보라색 그라데이션과 Inter 폰트, 그리고 모든 웹사이트에
00:00:09똑같이 적용된 카드 설정들 말이죠. 어떤 AI Slop을 말하는지 아실 겁니다.
00:00:12하지만 오늘 저는 이 괴물을 물리칠 수 있도록 도와줄 10가지 도구를 소개해 드리려 합니다.
00:00:16아니요, 그 중 어떤 것도 프런트엔드 디자인 기술은 아닙니다. 사실,
00:00:20이 도구들 중 상당수는 비교적 최신 기능들입니다.
00:00:22그러니 Claude code 디자인 분야에 꽤 오래 계셨던 분이라도,
00:00:26오늘 분명히 무언가를 배우게 될 것이라고 약속합니다.
00:00:28오늘 살펴볼 이 모든 도구는 본질적으로 동일한 목적을 수행합니다.
00:00:31바로 Claude code로 고품질의 프런트엔드 웹 디자인을 만들 수 있는 기회를 주는 것이죠.
00:00:35Claude code가 아무리 훌륭하더라도,
00:00:39디자인은 여전히 매우 부족한 영역 중 하나이기 때문입니다.
00:00:42리스트의 첫 번째 도구는 'Impeccable'입니다.
00:00:44이것은 18개의 명령어를 포함하는 단일 스킬입니다.
00:00:46오늘 다룰 다른 모든 도구와 마찬가지로 이 도구도 설명란에 링크를 걸어두겠습니다.
00:00:50전달해 드립니다.
00:00:51제가 Impeccable을 정말 좋아하는 이유는 수행할 수 있는 작업의 범위가 매우 넓기 때문입니다.
00:00:55하나의 스킬이지만 18개의 명령어가 들어있죠.
00:00:58GitHub 링크를 따라 impeccable.style 사이트로 들어가 보면,
00:01:01모든 명령어가 작동하는 모습을 볼 수 있습니다. 더 좋은 점은,
00:01:05일반적인 AI 출력물(Inter 폰트, 보라색 그라데이션 등)과
00:01:09다양한 명령어를 사용한 후의 이미지를 비교해 볼 수 있다는 것입니다.
00:01:15예를 들어 'Clarify'라는 명령어가 있는데,
00:01:16이것은 UX 오류와 에러 메시지에 특화된 기능입니다.
00:01:19여기서 두 결과물의 차이를 직접 확인하실 수 있습니다.
00:01:21또한 크롬 확장 프로그램도 제공하는데,
00:01:23이 프로그램은 웹페이지에서 AI Slop 특유의 미적 요소들을 직접 찾아내 강조해 줍니다.
00:01:28이 예시처럼 말이죠. 그리고 이 스킬이 '안티 패턴'을 사용하는 방식이 정말 마음에 듭니다.
00:01:32본질적으로 거대 언어 모델(LLM)에게 교육하는 셈이죠.
00:01:34실제 AI Slop이 어떻게 생겼는지 말입니다. 이런 테두리 강조나,
00:01:38어디서나 볼 수 있는 사이드 탭 액센트 테두리들,
00:01:42스파크라인, 글래스모피즘 같은 것들 말이죠.
00:01:45우리는 이런 요소들을 계속해서 반복해서 보고 있습니다.
00:01:47그러니 LLM에게 직접적으로 "이것이 AI Slop이다"라고 말해주는 스킬을 사용하는 건 어떨까요?
00:01:52기존 프런트엔드 디자인 스킬처럼 단순히 "제발 AI Slop처럼 만들지 마"라고
00:01:54말하는 건 효과가 없기 때문입니다. 짐작하시겠지만,
00:01:58보시는 것처럼 이 스킬은 꽤 내용이 방대합니다. 계속 스크롤 해보겠습니다.
00:02:03그 이유는 각각의 특정 디자인 영역에 대해
00:02:07여러 참조 데이터를 가지고 있기 때문입니다.
00:02:08이것들을 서브 스킬이나 앞서 언급한 18개의 다른 명령어라고 생각하시면 됩니다.
00:02:13이제,
00:02:14이 모든 명령어를 실제로 확인하는 가장 쉬운 방법은 Impeccable 문서를 확인하는 것입니다.
00:02:17메인 페이지에서 보셨던 것처럼,
00:02:21변경 전과 후의 예시를 직접 보실 수 있습니다.
00:02:25이렇게 시각적으로 결과물을 확인하는 것이 단순히 설명을 읽고
00:02:29Claude code가 원하는 대로 해주길 바라는 것보다 훨씬 효과적입니다. 또한 시각적인 부분에만 국한되지 않습니다.
00:02:33이것은 단순히
00:02:35'Adapt'와 같은 스킬을 보면,
00:02:37데스크톱뿐만 아니라 모바일이나 태블릿 등 다양한 플랫폼에서 실제로 잘 작동하는지 확인해 줍니다.
00:02:41출시된 지 한 달 정도밖에 안 된 이 도구를 꼭 확인해 보시기 바랍니다. 도구 2번으로 넘어가기 전에,
00:02:45지난달에 출시한 저의 Claude code 마스터클래스를 잠시 홍보하겠습니다.
00:02:48이미 수많은 업데이트를 진행했는데요.
00:02:52입문자에서 AI 개발자로 거듭나기 위한 최고의 장소라고 자부합니다.
00:02:54며칠 후면 이 강의의 가격이 인상될 예정입니다.
00:02:57관심 있으신 분들은 늦기 전에 꼭 확인해 보세요.
00:03:01고정 댓글에 링크가 있습니다. 이제 두 번째 도구인
00:03:04'Skill UI'에 대해 이야기해 보겠습니다. 이 도구는 제가 오늘 아침에 막 발견한 것인데요.
00:03:06공개된 지 24시간도 채 되지 않았습니다. 별점은 7개네요.
00:03:12우리는 지금 극초기 단계에 있습니다. 제가 만든 것도 아니고 이 제작자를 알지도 못합니다.
00:03:15그저 트위터에서 이분이 올린 포스트를 우연히 보게 되었습니다.
00:03:18멍하니 스크롤을 내리다가 "이거 꽤 멋진 스킬인데?"라고 생각했죠.
00:03:21이 도구를 사용하면 어떤 디자인 시스템이든 Claude용 스킬로 역설계할 수 있습니다.
00:03:24무슨 뜻일까요? 이 스킬을 가져와서
00:03:29이미 존재하는 특정 웹사이트를 가리키게 만들면,
00:03:31그 웹사이트가 어떻게 구축되었는지 분석하여
00:03:34하나의 템플릿, 즉 스킬로 변환해 줍니다. 실제로 작동하는 모습을 보여드리죠. 여기
00:03:39Stripe 웹사이트가 있습니다. 꽤 멋진 사이트이고 많은 것이 담겨 있죠.
00:03:45보시다시피 수많은 커스텀 그래픽과 요소들이 있습니다.
00:03:49Claude code가 이러한 그래픽 자산 없이 단순히
00:03:52똑같이 재현하는 것은 불가능에 가깝습니다. 아직은 말이죠. 하지만 카드나 레이아웃 같은
00:03:56전반적인 디자인 구성이 마음에 들어서,
00:04:00제 웹사이트의 기초로 삼고 싶다고 가정해 봅시다. 글쎄요,
00:04:03지난 영상들에서 HTML을 분석하는 등 여러 방법들을 논의했었지만,
00:04:06결국은 60~70% 정도만 해결되는 수준에 그치곤 했습니다. 그래서 저는 Skill UI 스킬을 사용해 봤습니다.
00:04:08Stripe 사이트를 분석하게 시킨 다음,
00:04:11"저런 스타일로 가짜 Stripe 웹사이트를 만들어줘"라고 말했습니다.
00:04:15그랬더니 단 한 번의 요청(one-shot)으로 이 결과를 만들어냈습니다. 그게 전부였습니다.
00:04:17더 이상의 정보를 주지 않았는데도 이걸 만들어낸 거죠.
00:04:21확실히 Stripe의 느낌이 납니다. 다시 말씀드리지만,
00:04:25Stripe 원본에는 커스텀 그래픽이 들어있습니다.
00:04:27프롬프트만으로 그걸 똑같이 만들 순 없겠지만,
00:04:32제 생각엔 꽤 훌륭합니다. 사실,
00:04:34여전히 전형적인 AI 느낌이 남아있긴 합니다.
00:04:39요소들이 배치된 방식이나 아이콘 같은 것들 말이죠.
00:04:44하지만 단순히 카드들이 나열된 2x2 벤토 박스 스타일로만 만들지는 않았습니다.
00:04:47사용한 색상이나 전반적인 그래픽이 마음에 듭니다. 여기 보시는 것처럼,
00:04:50Stripe 웹사이트를 참고해서 기초를 잡아달라고 했을 뿐인데 정말 잘 나왔습니다.
00:04:55그리고 이걸 하나의 스킬로 변환했기 때문에,
00:04:59이제 저에게는 프로젝트 수준에서 언제든 불러올 수 있는 Stripe 디자인 스킬이 생긴 셈입니다.
00:05:03언제든지 말이죠.
00:05:06만약 Stripe 스타일을 사용하는 다른 웹사이트를 또 만들고 싶다면
00:05:10그렇게 할 수 있습니다. Skill UI는 어떤 사이트든 분석할 수 있으니까요.
00:05:12GitHub의 예시 영상을 보면 이 도구가 Notion을 분석하는 모습을 볼 수 있습니다.
00:05:16그리고 Claude code에게 Notion 클론을 만들어달라고 지시했죠.
00:05:18그 결과가 바로 저 화면입니다. 이 스킬을 사용하려면
00:05:22GitHub 페이지에 있는 설치 명령어를 따르기만 하면 됩니다.
00:05:24두 가지 모드가 지원되는데요. 만약 스크롤 스크린샷이나
00:05:27마우스 오버 시의 상호작용 같은 모든 요소를 반영하고 싶다면
00:05:30Playwright를 사용하여 분석합니다.
00:05:33단순히 HTML만 들여다보는 게 아니라는 뜻입니다.
00:05:38제가 과거에 만들었던 커스텀 사이트 분석 스킬과는 차원이 다르죠.
00:05:41'Ultra' 모드를 사용하면 Playwright가 작동합니다.
00:05:45상당한 수준의 정교함이 갖춰져 있는 셈이죠. 요컨대,
00:05:48정말 영리한 스킬이며 여러분은 지금 극초기 사용자입니다. 지금 사용하기 시작하면
00:05:52앞서가는 힙한 GitHub 저장소 스킬 사용자가 되는 거죠.
00:05:55새 웹사이트를 시작하려는데 어떻게 첫 삽을 떠야 할지 막막하다면
00:05:58이 도구를 강력 추천합니다. 훌륭한 시작점이 되어주기 때문입니다. 여기서부터는 무엇이든 수정할 수 있습니다.
00:06:00세 번째 도구는 솔직히 제 전문 분야는 아니지만
00:06:03매우 흥미롭다고 생각하는 것입니다.
00:06:07저도 직접 배우고 사용해보려고 노력 중인 것인데요.
00:06:10바로 'WebGPU' 스킬입니다.
00:06:13WebGPU는 기본적으로 웹페이지가 사용자의 그래픽 카드와
00:06:17직접 상호작용하는 웹 디자인 구성 요소입니다.
00:06:19이를 통해 여기 보시는 것과 같은 아주 멋진 애니메이션들을 만들 수 있습니다.
00:06:21이런 것들도 포함해서 말이죠.
00:06:23제 'Claude code 웹 디자인의 7단계' 영상을 보셨거나
00:06:287단계에서 Igloo 웹사이트 같은 것들을 보셨다면,
00:06:30그들이 WebGL이나 커스텀 셰이더를 사용하고 있다는 걸 아실 겁니다.
00:06:34제가 말하고자 하는 영역이 바로 여기입니다.
00:06:36이 스킬은 Claude code에게
00:06:40이러한 기능을 구현하는 코드를 작성하는 법을 가르칩니다.
00:06:44렌더링 설정법, 셰이더 처리법,
00:06:47노드 기반 머티리얼 제작법 등을 알려주죠. 이 스킬을 사용해서
00:06:49단 몇 번의 텍스트 프롬프트만으로도 이 결과물을 만들 수 있었습니다.
00:06:52이게 아까 본 것만큼 멋지냐고요? 아니요,
00:06:54하지만 GPU 처리 시간을 포함해 약 10분 만에,
00:06:58관련 지식이 전혀 없는 상태에서 프롬프트 몇 줄로 만든 것입니다.
00:07:00따라서 이런 분야에 관심이 있다면, 그리고 제가 소개하는 도구들 중
00:07:06가장 독특한 것을 찾으신다면
00:07:08이 스킬을 확인해 보시길 추천합니다. 그 방향으로 나아가게 도와줄 테니까요.
00:07:13물론 이것은 단순히 카드의 모양을 바꾸거나
00:07:16웹사이트의 타이포그래피를 수정하는 것보다 훨씬 고급 과정입니다.
00:07:19하지만 염두에 둘 만한 가치가 있죠. 이제,
00:07:22네 번째 도구는 지난 한 달 동안 가장 핫했던 AI 저장소 중 하나입니다.
00:07:26바로 'awesome-design.md'입니다. 현재 별점이 5만 개가 넘었습니다.
00:07:28정말 엄청난 속도로 성장하고 있죠.
00:07:29이것은 어떤 면에서 앞서 언급한 Skill UI 도구와 유사합니다.
00:07:32기존의 다른 웹사이트들을 분석하여
00:07:35우리가 만들 웹사이트의 템플릿으로 사용할 수 있게 해주는 스킬이기 때문입니다.
00:07:37사실 Awesome Design은 'Stitch'로부터 큰 영향을 받았습니다.
00:07:41Stitch에 대해서는 잠시 후에 좀 더 자세히 이야기하겠습니다.
00:07:46Stitch에는 'design.md', 즉 디자인 마크다운 파일이라는 개념이 있는데,
00:07:48이것은 웹사이트를 어떻게 구축해야 하는지 설명하는 프롬프트들입니다.
00:07:52차이점은 구글이 이 프롬프트들을 매우 정교하게 만들었다는 점입니다.
00:07:57여기 보시는 것처럼 개요는 무엇인지,
00:08:01지향점(North Star)은 무엇인지, 색상은 어떻게 쓸지 아주 구체적으로 명시합니다. 구조가 매우 탄탄하죠.
00:08:04단순히 "이런 식으로 대충 만들어줘"라고 하는
00:08:06Claude code의 기본 프런트엔드 디자인 스킬과는 대조적입니다.
00:08:11무엇을 해야 할지 훨씬 더 구체적입니다.
00:08:14Awesome Design은 매우 구체적인 디자인 시스템 프롬프트라는 아이디어를 차용하여
00:08:18다양한 분야의 수많은 웹사이트에 대해
00:08:22프롬프트를 생성해 놓았습니다. 예를 들어 'Eleven Labs' 같은 사이트를
00:08:26클릭해 보면,
00:08:29기본적으로 Eleven Labs의 디자인 개념 전체를
00:08:32폼 요소, 카드 예시, 버튼, 헤딩,
00:08:34타이포그래피, 색상 등으로 낱낱이 분석해 놓은 것을 볼 수 있습니다. 그리고 단순한 미리보기가 아닙니다.
00:08:39이것은 우리가 Claude code에 바로 입력할 수 있는 실제 프롬프트입니다. 또한
00:08:43Bugatti 같이 텍스트 위주가 아닌 사이트를 포함해 수많은 웹사이트가 등록되어 있습니다.
00:08:47즉, 여러분이 좋아하는 웹사이트의 구성 요소를 가져와서
00:08:50동일한 구성 요소로 여러분만의 사이트를 만들 수 있게 해주는 빌딩 블록을 제공하는 셈입니다.
00:08:55앞서 본 Skill UI 도구가 어떤 사이트든 분석해서 자동으로 만들어준다면,
00:09:00이것은 구성 요소를 세부적으로 쪼개주는 역할을 합니다.
00:09:04그 후 직접 구축하는 것은 사용자의 몫이죠. Awesome Design을 극찬했으니,
00:09:07다섯 번째 도구로는
00:09:10여기에 영감을 준 실제 애플리케이션에 대해 이야기하는 것이 공정하겠죠.
00:09:15바로 Google에서 만든 'Stitch'입니다. Stitch는 정말 대단합니다.
00:09:19실제 웹페이지 제작에 들어가기 전에
00:09:21시각적인 접근 방식부터 시작하고 싶을 때 유용합니다.
00:09:25Stitch에 들어가서 만들고자 하는 것에 대한 프롬프트를 입력하기만 하면 됩니다.
00:09:26영감을 얻은 스크린샷을 포함할 수도 있습니다.
00:09:29그러면 아까 보셨던 것과 같은 design.md 파일을 생성해 주는데,
00:09:33가장 최적화된 형태로 만들어줍니다.
00:09:35사용될 색상, 타이포그래피, 라벨,
00:09:38버튼 등에 대한 세부 정보를 제공하며, 보시는 것처럼 전체 디자인 시스템,
00:09:41즉 아까 보았던 것과 동일한 design.md를 볼 수 있습니다.
00:09:46다만 사용자의 프롬프트에 맞춰 커스텀된 결과물이죠. 일단 분석이 끝나면,
00:09:48제작하려는 웹사이트 유형에 대해 다양한 변형(variation)을 제안합니다.
00:09:50단순히 히어로 섹션만이 아니라 전체를 다 보여줍니다.
00:09:53목업이 생성되면 원하는 대로 편집할 수 있습니다. 클릭 한 번으로
00:09:57우클릭을 통해 특정 변형 모델들을 가져올 수도 있고,
00:09:59각 변형 모델을 세부적으로 설정할 수도 있습니다. 변형 개수를
00:10:043개에서 5개로 바꿀 수도 있고, 창의성 범위나 지시 사항 등을 조절할 수 있습니다.
00:10:08기본적으로 잠재적인 웹사이트의 비주얼을
00:10:11매우 다양하게 뽑아볼 수 있는 수많은 방법을 제공합니다. 이것은 매우 큰 장점입니다.
00:10:14Claude code 안에서 시각적인 변화를 주려고 할 때마다
00:10:18코드를 새로 쓰고 데브 서버를 돌려야 하는 번거로움이 있기 때문입니다.
00:10:20웹페이지에서 일일이 확인해야 하죠. 특히 프런트엔드 디자인 측면에서
00:10:25작업을 할 때는
00:10:28눈앞에 여러 옵션이 펼쳐져 있는 것이 훨씬 유리합니다.
00:10:31세 가지 옵션을 한눈에 보면서 "이건 싫고, 이것도 싫고, 이게 좋네"라고 판단하는 것이
00:10:34"아니야 Claude, 다시 해봐. 아니 다시. 다시." 하는 것보다 훨씬 쉽기 때문입니다. 게다가 무료입니다.
00:10:35정말 훌륭하죠. 여기서 만든 것은
00:10:40Claude code로 옮기기도 매우 쉽습니다. 마음에 드는 디자인을 클릭하고
00:10:43'More' 메뉴에서 코드를 확인하면 됩니다.
00:10:46그 코드를 복사해서 Claude code로 가져오기만 하면 되죠.
00:10:48심지어 Figma로 복사하는 기능도 있고,
00:10:52AI Studio로 가져올 수도 있지만,
00:10:56가장 간단한 방법은 내보내기(export) 후 클립보드에 복사하는 것입니다.
00:10:58MCP도 지원하므로 Claude code 터미널을 통해 이 모든 과정을 수행할 수 있습니다.
00:11:02하지만 솔직히 말해서 그게 어떤 실질적인 이득을 주는지까지는 잘 모르겠습니다.
00:11:06아니요, 다시 하세요. 아니요, 다시요. 그래서 이것 또한 무료라는 점이
00:11:11정말 훌륭합니다. 그리고 여기서 무엇을 만들든,
00:11:13Claude Code로 옮기기가 정말 쉽습니다. 마음에 드는 것을 클릭하고
00:11:16'More'로 가서 코드를 확인하면 되거든요.
00:11:19그런 다음 코드를 복사해서 Claude Code로 가져오면 됩니다.
00:11:23Figma로 복사하는 기능도 있고,
00:11:25AI Studio로 가져올 수도 있지만,
00:11:27가장 쉬운 방법은 그냥 내보내기(export) 후 클립보드에 복사하는 것입니다.
00:11:31MCP도 있어서 Claude Code 터미널에서 이 모든 작업을 할 수 있긴 합니다.
00:11:35하지만 솔직히 말해서 그게 어떤 이득이 있는지 잘 모르겠습니다.
00:11:39이런 시각적인 감각을 직접 다루는 게 더 가치 있다고 생각하거든요.
00:11:43현재 Claude Code의 Stitched에 대한 풀 버전 딥다이브 영상이 있으니,
00:11:46더 자세한 작동 방식이 궁금하시다면 위에 링크를 걸어두겠습니다. 자,
00:11:49여섯 번째 기술을 이 영상에 넣을지 고민했습니다. 이제는 너무 흔해져서
00:11:52거의 누구나 알고 있다고 생각했거든요. 하지만 처음 보는 분도 계실 테니까요.
00:11:55그건 바로 'UI UX Pro Max' 기술입니다.
00:12:00이것은 Anthropic 프런트엔드 디자인 기술의
00:12:05정신적 후계자라고 생각합니다. 상상해 보세요. Anthropic의 디자인 기술이
00:12:09다양한 유형의 웹사이트와 도메인에 대한
00:12:14여러 관습을 실제로 학습한 상태라고 말이죠.
00:12:19모든 웹사이트가 흔한 B급 SaaS처럼 보일 필요는 없으니까요.
00:12:23이 기술이 바로 그런 점을 해결해 줍니다.
00:12:25지능형 디자인 시스템 생성기라고 할 수 있죠.
00:12:27이것은 여러분에게 질문을 던질 것입니다.
00:12:29여러분의 웹사이트나 서비스가 무엇에 관한 것인지 파악한 뒤,
00:12:31그 기능에 맞춰 디자인을 설계합니다.
00:12:35여기에는 161개의 산업별 추론 규칙이 탑재되어 있습니다.
00:12:39정말 공들여서 만든 도구죠.
00:12:43실력 없는 AI가 만드는 뻔한 결과물을 받지 않게 될 것이고,
00:12:47점점 Claude Code 버전의 AI 쓰레기가 되어가는
00:12:51기본 프런트엔드 디자인 기술의 결과물도 피할 수 있습니다.
00:12:52또한 특정 스택에 맞춘 가이드라인도 구축되어 있습니다.
00:12:55그래서 단순히 React만 강요받지 않죠. 결론적으로
00:13:00어디서부터 시작해야 할지 전혀 모를 때 유용한 기술입니다.
00:13:04우리가 지금까지 이야기한 많은 것들은 어느 정도의 감이 필요했습니다.
00:13:09특히 참고할 만한 예시 사이트가 있다면 더 그렇죠.
00:13:12Skill UI의 경우, 예시가 있다면
00:13:15거의 그대로 복사할 수 있고 Awesome Design도 마찬가지입니다.
00:13:19이미 존재하는 웹사이트들 중에서 선택하는 방식이니까요.
00:13:21그런 방식을 원하지 않으면서도
00:13:22여전히 방향이 헷갈린다면 이 기술을 사용해 보세요.
00:13:26훌륭한 출발점이 될 것입니다.
00:13:28일곱 번째 도구는 컴포넌트에 관한 것이며, 웹페이지의 디테일을 완성해 줍니다.
00:13:33그 주인공은 바로 21st.dev입니다.
00:13:36수많은 컴포넌트 중에서 선택하여
00:13:40자신의 웹사이트에 직접 통합할 수 있는 곳이죠. 예를 들어,
00:13:43히어로(Hero) 섹션에 넣을 요소를 찾고 있다고 가정해 봅시다.
00:13:4621st.dev의 히어로 섹션에 가서 검색을 해보는 거죠.
00:13:51마음에 드는 것을 찾았습니다. Spline을 사용한 히어로 페이지네요.
00:13:56마우스를 따라 움직이는 로봇이 포함되어 있습니다.
00:14:00자, Spline 사용법을 공부하고 코드를 직접 짤 필요가 없습니다.
00:14:04그냥 21st.dev로 가면 됩니다.
00:14:06상단에 있는 프롬프트 복사 버튼을 클릭하세요.
00:14:09Claude Code에 붙여넣으면 끝입니다. 바로 히어로 섹션이 완성되죠.
00:14:14물론,
00:14:15히어로 섹션은 웹페이지에 가져올 수 있는 가장 무거운 요소일 수 있습니다.
00:14:19로봇이 사방을 둘러보는 히어로 페이지가 있다면,
00:14:22전체 웹사이트의 미학이 그에 맞춰져야 하니까요. 다행히,
00:14:2621st.dev의 진가는 작은 컴포넌트나
00:14:29버튼 같은 세밀한 장식 요소에서 발휘된다고 생각합니다.
00:14:33단순히 이 버튼에 작은 불빛이 들어온다는 사실만으로도,
00:14:36일반적인 버튼과 비교했을 때 웹사이트의 퀄리티가 달라집니다.
00:14:39마우스를 따라가는 조명 애니메이션이 적용된 카드 같은 요소들도요.
00:14:43다시 말씀드리지만, 이런 사소한 디테일들입니다.
00:14:46은은하게 빛나는 그림자 같은 것들이죠.
00:14:49이런 요소들이 여러분의 페이지를 격상시키고,
00:14:52더 프리미엄하게 보이게 하며, 공을 들였다는 느낌을 줍니다.
00:14:56정말로 노력했다는 것을 보여주죠. 그리고 설령 그대로 쓰지 않더라도,
00:14:59이 도구는 여러분에게 영감을 줄 것입니다.
00:15:03테두리든 히어로 섹션이든 어떤 컴포넌트의
00:15:07프롬프트를 복사해온 다음,
00:15:09Claude Code를 이용해 원하는 대로 수정하지 못할 이유가 없으니까요.
00:15:12전부 아니면 전무(All or nothing)인 게 아닙니다.
00:15:14특히 웹 디자인 배경 지식이 없는 분들에게는,
00:15:17저도 마찬가지입니다만,
00:15:19모르는 게 무엇인지조차 모를 수 있습니다. 버튼을 만드는 이 수많은
00:15:23방식들을 접해보는 것만으로도 생각이 넓어집니다.
00:15:26시간이 흐를수록 그런 경험들이 쌓이면서,
00:15:29자신만의 취향을 개발하고 무엇을 좋아하는지 깨닫게 도와줍니다.
00:15:32하지만 이런 것들을 보기 전까지는,
00:15:34자신이 무엇을 좋아하는지조차 알 수 없습니다.
00:15:36지금껏 본 것이라곤 Claude Code가 준 것뿐이니까요.
00:15:39따라서 꼭 확인해 보시길 강력히 추천합니다. 거의 모든 기능이 무료이며,
00:15:43버튼이나 카드 디자인 같은 작은 것들 중
00:15:46최소한 몇 가지는 다음 프로젝트에 통합해 보셔야 합니다.
00:15:49요즘 반복해서 듣게 되는 말 중 하나가 "AI는 취향이 없다"는 것입니다.
00:15:53그렇다면 취향을 기술로서 부여하면 어떨까요?
00:15:56그것이 바로 여덟 번째 도구에서 시도하려는 것입니다.
00:15:59바로 'Taste Skill' 저장소(repo)입니다.
00:16:01이것은 Claude Code에게 어느 정도의
00:16:06취향을 부여하려는 기술 모음입니다. 즉, 뻔한 AI 스타일에서 벗어나는 것이죠.
00:16:11이것은 제가 반복해서 강조하는 테마이기도 합니다.
00:16:13이 Taste Skill에는 보시는 것처럼 여러 하위 기술이 포함되어 있으며,
00:16:17다양한 설정값이 있습니다. 그래서 일반적인 AI 생성물과 비교해
00:16:21얼마나 추상적으로 만들지 등을 조정할 수 있습니다.
00:16:24여기 보이는 것들이 이 기술을 사용하여
00:16:28만들어진 웹사이트의 예시입니다. 보시다시피,
00:16:31즉각적으로 뭔가 다르다는 걸 느끼실 겁니다. 엄청나게 놀랍진 않더라도
00:16:36일단 다르다는 것 자체가 중요합니다. 다름은 곧 장점이니까요.
00:16:38흔한 SaaS 템플릿처럼 보이지 않을수록 좋습니다.
00:16:41이 예시들 중 다수는 스크롤 애니메이션을 포함하고 있으며,
00:16:46지겹게 보던 벤토 박스(Bento box) 디자인도 아닙니다.
00:16:47따라서 한 번쯤 시도해 보고 일반적인 Claude Code
00:16:52결과물과 비교해 볼 만한 가치가 있는 멋진 기술입니다.
00:16:56아홉 번째 도구는 많은 분에게 매우 단순해 보이겠지만,
00:16:59Google Fonts의 존재를 모르는 사람이
00:17:03의외로 많다는 사실에 놀라실 겁니다.
00:17:05Google Fonts는 모든 코딩 프로젝트에 사용할 수 있는
00:17:10수많은 폰트가 담긴 거대한 무료 저장소입니다.
00:17:14Claude Code가 모든 것에 사용하는 'Inter'나
00:17:18다른 서너 개의 폰트에만 얽매일 필요가 없습니다.
00:17:20Google Fonts에 가면 외형, 느낌,
00:17:24패밀리별로 잘 분류되어 있습니다. Claude Code에게 이걸 써라, 저걸 써라 말하면 되죠.
00:17:29Claude Code도 이 모든 폰트에 접근할 수 있습니다.
00:17:31타이포그래피는 디자인의 룩앤필(Look and Feel)에서
00:17:34정말 큰 비중을 차지하기 때문입니다. 게다가,
00:17:38Claude Code를 활용해 Google Fonts를 검색할 수도 있습니다.
00:17:42제작 중인 웹사이트 유형과 원하는 느낌을
00:17:45Claude Code에게 말해 주기만 하세요.
00:17:47그러면 살펴볼 만한 폰트 예시를 대여섯 개 정도 제안해 줄 것입니다.
00:17:50실시간으로 확인해 보실 수 있습니다. 다시 말씀드리지만,
00:17:53모든 것을 운에 맡기지 마세요. Claude Code가 그날 기분에 따라
00:17:57폰트를 정하게 두면 안 됩니다. 왜냐하면 걔는
00:18:01언제나, 항상 Inter 폰트만 줄 것이기 때문입니다. 그리고 마지막으로,
00:18:05열 번째 도구인 Playwright CLI입니다.
00:18:06사실 Playwright CLI는 그 자체로 디자인 도구는 아닙니다.
00:18:10과거에 Skill UI를 설명하며 웹페이지 스크린샷을 찍는
00:18:13용도로 언급한 적이 있긴 하죠.
00:18:15조사나 아이디어 구상 도구로 활용할 수 있습니다.
00:18:19하지만 제가 강조하고 싶은 것은
00:18:21형태와 기능의 조화입니다. 프런트엔드에서 무언가를 만들 때,
00:18:25간단한 폼(form) 제출 페이지를 예로 들어 봅시다.
00:18:27우리는 그것을 테스트해야 합니다.
00:18:29실제로 제대로 작동하는지 확인해야 하니까요.
00:18:32대규모로 테스트하는 가장 쉬운 방법은 Playwright MCP가 아닌 CLI입니다.
00:18:36CLI가 훨씬 더 효율적입니다.
00:18:38방법은 간단합니다. 프런트엔드 디자인을 마친 뒤,
00:18:41CLI 도구가 설치된 상태에서 Claude Code에게 이렇게 말하세요.
00:18:44"이 페이지의 모든 상호작용을 Playwright CLI로 테스트해 줘."
00:18:49그러면 여러 개의 Chrome 인스턴스가 생성될 것입니다.
00:18:52직접 보고 싶다면 헤디드(headed) 모드로, 아니면 백그라운드에서 실행되는 헤드리스로 하세요.
00:18:55그러면 알아서 테스트를 진행할 것입니다.
00:18:57이는 전체 프런트엔드 디자인 프로세스 속도를 획기적으로 높여줍니다.
00:19:02무언가 기능을 추가하고, 직접 확인하고,
00:19:05다시 테스트하는 과정이 너무 오래 걸린다는 걸 우리 모두 알고 있죠.
00:19:06특히 폼 제출 같은 경우는,
00:19:08별난 사용자들이 이상한 정보를 입력할 때 발생하는
00:19:13수많은 예외 케이스(edge cases)가 존재하기 마련입니다.
00:19:15이상으로 제가 가장 좋아하는 Claude Code 디자인 관련 기술과
00:19:20플러그인, CLI 10가지를 소개해 드렸습니다. 새로운 것이 좀 있었길 바랍니다.
00:19:24Skill UI는 아는 사람이 세 명 정도밖에 안 될 텐데 말이죠. 아무튼,
00:19:29프런트엔드 디자인 분야는
00:19:31Claude Code가 취향 면에서 너무 취약하기 때문에
00:19:36오히려 정말 흥미로운 지점이라고 생각합니다.
00:19:37요즘은 누구나 '취향'이라는 단어를 너무 남발해서 저도 쓰기 싫긴 합니다만,
00:19:40어쨌든 Claude Code가 그 부분에서 부족하다는 것은
00:19:42개인인 여러분에게 오히려 기회가 될 수 있습니다.
00:19:46그 지점이 바로 여러분이 남들과 차별화될 수 있는 영역이기 때문입니다.
00:19:50요즘 Claude Code를 사용하는 수많은 사람 사이에서
00:19:55나만의 차별점을 가질 수 있다는 건 좋은 일이죠.
00:19:57이 기술들과 도구들이 여러분을 도와줄 것입니다. 언제나 그렇듯,
00:20:00어떻게 생각하시는지 의견 남겨주세요.
00:20:01마스터 클래스에 관심 있다면 Chase AI Plus를 확인해 보시고요,
00:20:04그럼 다음에 뵙겠습니다.