00:00:00Claude Code는 정말 훌륭하지만, 우리 팀은 이제 모든 작업에 이것을 사용하기 시작했습니다.
00:00:03Anthropic도 이를 인지하고 얼마 전 '스킬(Skills)'이라는 개념을 도입했죠.
00:00:07하지만 Nano Banana Pro가 출시되면서 사람들은 완전히 다른 방향으로 가기 시작했습니다.
00:00:12더 나은 사이트를 구축하기 위해 Google의 anti-gravity 같은 제품을 사용하기 시작한 거죠.
00:00:15저희도 anti-gravity를 써봤지만, 저희 생각에는 현재 너무 불안정합니다.
00:00:19anti-gravity를 좋아하는 분들이 저희를 거세게 비난할 수도 있다는 걸 압니다.
00:00:21하지만 이건 다른 영상에서 다룰 주제이고, 어쨌든 생성되는 이미지는 무료입니다.
00:00:25그래서 코딩은 Claude가 담당하고, 이미지만 anti-gravity가 처리하게 하면 어떨까 생각했습니다.
00:00:30하지만 여기서 중요한 점이 있습니다.
00:00:31이런 다양한 사례를 위해 매번 Claude에게 다시 프롬프트를 입력해서는 안 된다는 겁니다.
00:00:35직접 훈련시켜서 전용 스킬을 만들어야 합니다.
00:00:37그래서 최근 Claude는 스킬을 실제로 어떻게 구축해야 하는지에 대한 가이드를 발표했습니다.
00:00:41가장 중요한 부분은 테스트와 반복 작업입니다.
00:00:44솔직히 이 가이드는 우리가 스킬을 생각하는 방식을 완전히 바꿔 놓았습니다.
00:00:48아마 여러분도 'Skill Creator'에 대해 들어보셨을 겁니다.
00:00:50효과적인 스킬 생성을 위한 지침을 제공하는 Claude Code의 공식 스킬입니다.
00:00:55하지만 저희 팀원 중 한 명이 새로 발표된 가이드와 비교했을 때,
00:00:58이것이 여전히 구식이라는 점을 발견했습니다.
00:01:00그래서 저희는 이를 업데이트했고, 새로운 가이드라인에 따라 많은 부분을 변경하여
00:01:02정말 멋진 개선을 이루어냈습니다.
00:01:05이 업데이트된 Skill Creator와 수많은 고된 반복 작업을 통해,
00:01:09저희는 새로운 nano banana UI 스킬을 만들었습니다.
00:01:12하지만 처음 시작할 때의 스킬과 최종 결과물은 완전히 다른 것이었습니다.
00:01:16두 스킬 모두 AI Labs Pro에서 이용하실 수 있습니다.
00:01:19모르는 분들을 위해 설명하자면, 저희가 최근 런칭한 커뮤니티로
00:01:22이번 영상과 이전의 모든 영상에서 다룬, 프로젝트에 바로 적용 가능한 템플릿을 제공합니다.
00:01:28저희가 하는 일에 가치를 느끼고 채널을 지원하고 싶으시다면,
00:01:31이것이 가장 좋은 방법입니다. 링크는 설명란에 있습니다.
00:01:34우리는 이미 Claude Code와 Anti-Gravity 간의 조정 프로세스를 파악해 두었습니다.
00:01:38그래서 Claude Code와 Anti-Gravity에서 동일한 디렉토리를 열었습니다.
00:01:42Claude가 프로젝트를 초기화하면, Anti-Gravity는 이미지가 들어갈
00:01:47이 public 폴더만 신경 쓰면 되도록 했습니다.
00:01:49Claude는 Anti-Gravity가 생성해야 할 이미지의 프롬프트와 파일 이름을 제공했고,
00:01:53그 프롬프트들은 Anti-Gravity로 전달되었습니다.
00:01:56그다음 이미지 생성 도구가 가동되었고 병렬 처리를 사용하여,
00:02:00여러 개의 이미지를 동시에 생성했습니다.
00:02:03이미지 세 개가 생성되어 모두 이 images 폴더에 저장된 것을 보실 수 있습니다.
00:02:08저장된 후에는 Claude가 자동으로 이를 인식하고 쉽게 작업할 수 있었습니다.
00:02:12하지만 실제로 이미지를 생성하기 시작하자마자 여러 가지 문제가 발생했습니다.
00:02:17이미 여러 번 들어보셨겠지만, 반복적인 워크플로우를 구축할 때
00:02:21설명 엔지니어링(description engineering)은 가장 중요한 요소 중 하나입니다. 이 설명들은
00:02:26Claude Code를 열 때 항상 컨텍스트에 로드되는 YAML 프런트 매터입니다.
00:02:30이것을 보고 Claude는 해당 스킬을 로드할지 말지를 실제로 결정합니다.
00:02:34하지만 많은 사용자들이 스킬이 필요하지 않을 때도 로드된다고 보고해 왔습니다.
00:02:38그 이유는 대부분의 설명이 스킬이 '무엇을 하는지'만 적혀 있기 때문입니다.
00:02:41좋은 설명은 사실 두 가지 질문에 답해야 합니다.
00:02:44스킬이 무엇을 하는가? 그리고 Claude가 '언제' 그것을 사용해야 하는가?
00:02:46여기서 트리거 문구(trigger phrases)가 등장합니다. “랜딩 페이지 구축”이나
00:02:51“nano banana”를 언급할 때처럼 스킬 사용을 실제로 호출하는 것들입니다. 하지만 언제 쓸지만 중요한 게 아닙니다.
00:02:57가이드에는 Claude가 스킬을 사용해서는 안 될 때를 알려주는 '부정적 트리거'도 언급되어 있습니다.
00:03:01예를 들어, 간단한 버그 수정이나 데이터베이스 작업에는 로드되지 않도록 정의하는 것입니다.
00:03:05이처럼 좋은 설명과 나쁜 설명의 차이는 명확합니다.
00:03:08새로운 Skill Creator로 만든 스킬은 여러 트리거 문구와 부정적 트리거를 포함하고 있지만,
00:03:13이전 버전의 스킬은 단지 스킬이 하는 일만 설명하고 있습니다.
00:03:17구문과 관련된 정량적인 지침들도 있지만,
00:03:21그런 것까지 다 아실 필요는 없습니다.
00:03:23저희 콘텐츠가 마음에 드신다면 하이프(hype) 버튼을 눌러주세요.
00:03:27더 많은 콘텐츠를 제작하고 더 많은 분들께 다가가는 데 큰 도움이 됩니다.
00:03:31보통 여러 이미지를 생성할 때, 용도가 제각각이기 때문에
00:03:35서로 다른 크기가 필요했습니다.
00:03:39변경 사항을 적용하기 전의 프롬프트에도 그렇게 명시되어 있었죠.
00:03:42하지만 매번 사용자 정의 크기를 사용하려고 할 때마다,
00:03:46anti-gravity의 이미지 생성 도구는 정사각형 이미지만 생성했습니다.
00:03:50Gemini 앱이나 Google AI Studio에 있는 단순 모델에서는 보통 문제가 되지 않지만,
00:03:55여기서는 프로세스를 바꾸고 그에 맞춰 스킬을 수정해야 했습니다.
00:03:58이 내용은 skill.md 파일 전반의 적절한 단계에서 참조되었고,
00:04:02프롬프트 작성 시 크기나 화면비를 지정하지 말라는
00:04:06프롬프트 규칙으로도 포함되었습니다. 어차피 큰 상관은 없었으니까요.
00:04:10만약 특정 용도를 위해 이미지를 잘라야(crop) 한다면,
00:04:12나중에 이미지 크롭 도구를 사용해서 처리하도록 했습니다.
00:04:15이것이 scripts 폴더가 정말 중요한 이유입니다.
00:04:18이곳에는 Claude가 특정 인자와 함께 호출할 수 있는 실행 가능한 도구들이 들어 있으며,
00:04:22사용 사례에 따라 이러한 도구들을 하나씩 찾아내게 됩니다.
00:04:25좋은 스크립트는 Claude가 쉽게 호출할 수 있도록
00:04:29다양한 모드를 가진 CLI 인자를 갖추고 있습니다.
00:04:31또한 저희가 발견한 매우 필요한 기능 중 하나는 미리보기 모드입니다.
00:04:35실제 파괴적인 작업을 수행하기 전에 Claude가 결과를 미리 볼 수 있도록 도와주죠.
00:04:40잠시 오늘 영상을 후원해 주신 스폰서를 소개하겠습니다.
00:04:42그 후, 대부분의 사람들이 스킬을 빌드할 때 저지르는
00:04:45구조적인 실수 한 가지를 살펴보겠습니다.
00:04:47CREAM
00:04:47개발자와 SaaS 창업자에게 가장 큰 골칫거리는 개발 자체가 아닙니다.
00:04:50바로 글로벌 세금 및 부가가치세(VAT) 준수라는 악몽이죠.
00:04:53CREAM은 이러한 부담을 완전히 대신 처리해 주는 '판매 대행사(Merchant of Record)'로, 여러분이 개발에만 집중할 수 있게 해줍니다.
00:04:58차세대 디지털 비즈니스를 위해 구축된 CREAM은
00:05:00첫날부터 100개국 이상에서 결제를 받을 수 있는 초고속 설정을 제공합니다.
00:05:05그들은 숨겨진 수수료로 인한 혼란을 없애고,
00:05:073.9% + 40센트라는 투명한 단일 요율을 제안합니다.
00:05:11그게 전부입니다.
00:05:11고객이 도쿄에 있든 텍사스에 있든, 아메리칸 익스프레스든 구글 페이든 동일한 요율이 적용됩니다.
00:05:16또한 자동화된 수익 분배와 같은 강력한 기능을 통해 원활한 출시를 보장합니다.
00:05:20항상 격리된 테스트 모드와 전용 TypeScript SDK를 사용하세요.
00:05:23또한 CREAM은 Claude Code, Cursor, WinSurf를 위한 공식 AI 에이전트 스킬을 제공합니다.
00:05:28AI 어시스턴트에게 CREAM을 연동하라고 말하기만 하면,
00:05:30최신 API 모범 사례를 기반으로 안전하고 즉시 서비스 가능한 코드를 생성해 줍니다.
00:05:36주의할 점은, API 키를 절대 버전 관리 시스템에 커밋하지 마세요.
00:05:39결제 시스템을 구축할 준비가 되셨다면 고정 댓글의 링크를 클릭해 보세요.
00:05:42세금 걱정은 그만하고 CREAM.io와 함께 비즈니스를 확장하세요.
00:05:45이전의 많은 영상에서 저희가 '점진적 공개(progressive disclosure)'에 대해 이야기하는 것을 들어보셨을 겁니다.
00:05:50이것은 스킬뿐만 아니라 컨텍스트 윈도우 관리에서도 매우 중요하기 때문입니다.
00:05:55에이전트가 특정 시점에 필요한 정보만 알게 해야 한다는 뜻입니다.
00:05:59스킬 설명은 항상 Claude Code의 컨텍스트에 로드된다는 것을 이미 알고 계실 겁니다.
00:06:03그래서 이러한 스킬들은 3단계 구조를 사용합니다.
00:06:06첫 번째 단계는 항상 Claude의 컨텍스트 내부에 상주합니다.
00:06:09두 번째 단계는 skill.md의 본문으로, 여기에는 3단계에 대한 참조와
00:06:14전체 워크플로우, 그리고 그 참조 사항들을 사용하는 방법이 포함되어야 합니다.
00:06:18그리고 이 구조 내에서 공식 가이드는 '임계 섹션(critical section)'이라는 것을 정의합니다.
00:06:23가장 중요한 정보는 여러 지침 아래에 숨겨두지 말고
00:06:26바로 맨 앞에 나열해야 합니다.
00:06:29보시는 것처럼 이 스킬은 skill.md만 있고 3단계 구조를 갖추지 못했습니다.
00:06:34모든 워크플로우, 팁, 권장 사항 및
00:06:38문제 해결 가이드라인이 하나의 파일에 다 들어있기 때문입니다.
00:06:41이것은 올바른 구조가 아닙니다.
00:06:43당장 필요하지 않은 가이드라인까지 로드할 필요는 없기 때문이죠.
00:06:45먼저 워크플로우만 로드하고,
00:06:47프롬프트 규칙은 실제 작성이 필요한 시점에만 가져와야 합니다.
00:06:51반면에 이 스킬은 필요한 참조 사항과 스크립트가
00:06:54명확하게 구조화되어 있습니다.
00:06:56또한 워크플로우와 함께, 각 스크립트를 언제 실행해야 하는지,
00:07:01언제 가이드라인 참조를 확인해야 하는지에 대한 트리거가 명확히 명시되어 있습니다.
00:07:04즉 skill.md에는 nano banana 스킬을 위한 워크플로우만 담겨 있습니다.
00:07:08그 뒤의 참조 섹션에는 다양한 가이드라인이 있는데,
00:07:12프롬프트 규칙에는 저희가 반복 테스트를 통해 찾아낸
00:07:1513가지 테스트 규칙이 포함되어 있습니다.
00:07:17하지만 이런 구조에도 불구하고 Claude Code는 단계를 건너뛸 방법을 찾아내곤 했습니다.
00:07:22첫 번째 이미지 묶음이 생성된 후,
00:07:24반드시 재생성이 필요할 수밖에 없었습니다.
00:07:26nano banana가 항상 완벽하게 정확한 결과물을 내놓지는 않기 때문이죠.
00:07:29놀라운 점은 Claude가 스스로 이를 검증하지 않았다는 것입니다.
00:07:33우리가 의도한 디자인에 이미지가 적합한지 직접 물어봐야 했습니다.
00:07:37그렇지 않았다면 그냥 생성된 이미지를 그대로 구현해 버렸을 겁니다.
00:07:41앞서 말씀드렸듯이, 스킬 구축에서 가장 중요한 것은 반복 작업(iteration)입니다.
00:07:45우리는 이미 validate images 스크립트를 사용하는 에셋 검증 단계를 두었지만,
00:07:49그것은 이미지가 구조적으로 괜찮은지만 확인했을 뿐,
00:07:52심미적으로 올바른지는 확인하지 못했습니다.
00:07:55미적인 부분과는 전혀 상관이 없었죠.
00:07:57미적인 부분을 위해 Claude는 직접 시각적 검토를 수행해야 했고,
00:08:00정해진 질문을 통해 이미지가 통과인지 실패인지 결정해야 했습니다.
00:08:04그리고 만약 실패한다면 그 이유도 명시해야 했습니다.
00:08:07시각적 검토에서 실패한 경우에는,
00:08:09해당 이미지를 삭제하고 새로운 수정 프롬프트를 작성해야 했기 때문입니다.
00:08:13사용 중인 모드에 따라 다르겠지만, anti-gravity 모드라면
00:08:16이전 이미지가 실패한 이유를 포함한 새 프롬프트를 제공하여
00:08:20anti-gravity가 더 나은 이미지를 다시 생성할 수 있게 합니다.
00:08:23이것이 바로 anti-gravity가 유리잔 이미지를 재생성했으며,
00:08:27이번에는 요구 사항을 잘 따랐다고 말하는 이유입니다.
00:08:29워크플로우를 구축할 때 이러한 '검증 게이트(validation gates)'를 두는 것이 정말 중요합니다.
00:08:34검증 게이트란 다음 단계로 넘어가기 전에
00:08:39반드시 완료되어야 할 사항을 정의하는 명시적인 차단 장치입니다.
00:08:41보셨다시피 Claude에게 맡겨두면 누락되거나 손상된 이미지 위에도 태연히 UI를 만들고,
00:08:46시키지 않으면 아무것도 검증하지 않을 것입니다.
00:08:48예를 들어 이 스킬을 보면,
00:08:50워크플로우에 따라야 할 여러 단계가 명시되어 있습니다.
00:08:54하지만 다른 실수들과 마찬가지로,
00:08:55다음 단계로 넘어가기 전의 검증 게이트를 전혀 작성하지 않았습니다.
00:08:59이러한 검증 게이트도 결국 프롬프트입니다.
00:09:01무슨 마법 같은 배시(bash) 명령어가 있는 게 아닙니다.
00:09:04하지만 매번 재사용해야 하고 변동 사항이 없다면,
00:09:08별도의 도구를 만들어 검증 게이트로 등록해야 합니다.
00:09:11저희의 경우, 여러 단계 사이에 검증 게이트를 두어
00:09:15단순히 프로세스 사이를 제어할 뿐만 아니라
00:09:19각 워크플로우 내에서 미니 프로세스를 형성하도록 했습니다.
00:09:22프로세스를 계속 실험하고 반복하다 보면,
00:09:26이미 보신 것과 같은 많은 오류에 부딪히게 될 것입니다.
00:09:30예를 들어 이미지가 없거나 깨진 경우, 불완전한 API 출력,
00:09:34또는 일부 실패로 인해 중단된 스크립트 등입니다.
00:09:36따라서 스킬을 고도화하는 과정에서,
00:09:39각각의 경우에 대한 에러 핸들링을 기록하고 명확하게 정의해야 합니다.
00:09:44한 번 일어난 일은 언제든 다시 일어날 수 있기 때문입니다.
00:09:46그리고 에러 핸들링은 이런 형식을 따라야 합니다.
00:09:48에러를 정의하고, Claude가 이해할 수 있도록 원인을 파악한 뒤,
00:09:51실제로 문제를 해결하기 위한 단계를 제시하세요.
00:09:54다시 돌아와서, 랜딩 페이지를 만들라고 하면 Claude는 스킬을 불러와 파일을 읽습니다.
00:09:58이미 Next.js 프로젝트가 있다면 이를 감지하고 질문을 던질 것입니다.
00:10:02랜딩 페이지의 목적이 무엇인지, AI 생성 이미지를 사용할지 같은 것들 말이죠.
00:10:06사용하지 않겠다고 하면 프론트엔드 리소스만을 활용해 페이지를 구축합니다.
00:10:11이는 개발 과정에서 저희가 Claude에게 이 프론트엔드 디자인 스킬도
00:10:16완성해달라고 요청했기 때문입니다. 여기에는 보기 좋은 사이트를
00:10:19구현하기 위한 수많은 훌륭한 가이드라인이 포함되어 있습니다.
00:10:22모든 실험을 마친 후, 실제로 생성된 결과물입니다.
00:10:27보시는 것이 저희가 생성한 이미지이고,
00:10:29미세한 애니메이션 효과가 적용되어 있습니다.
00:10:32전반적으로 아주 깔끔한 랜딩 페이지이며 이미지도 과하지 않습니다.
00:10:36정말 필요한 곳에만 적절히 배치되었습니다.
00:10:39하지만 처음 생성되었을 때는 폰트 문제가 있었습니다.
00:10:43전혀 어울리지 않았죠.
00:10:44그래서 실험을 통해 얻은 특정 타이포그래피 폰트를 적용했고,
00:10:48이것이 타이포그래피 문제를 해결해 주었습니다.
00:10:51다시 말하지만, 저희는 nano banana 디자인 스킬과는
00:10:54직접적인 관련이 없는 다양한 리소스들을 가져와서,
00:10:57필요한 곳에 그 기능이 발휘되도록 통합했습니다.
00:11:00점진적 공개 원칙에 따라 참조와 스크립트 파일을 추가하는 것에 대해 논의했습니다.
00:11:06이제 참조(references), 즉 도메인별 지식에 대해 깊이 파고들어 보겠습니다.
00:11:09구축한 스킬이 한 특정 도메인을 위한 것이라고 해도,
00:11:12별도의 구성 요소로 작고 다양한 '지식 패킷'들을 가질 수 있습니다.
00:11:16예를 들어 이 참조들에는 디자인 패턴,
00:11:19프론트엔드 미학, 프롬프트 규칙 등이 나열되어 있습니다.
00:11:21이런 방식을 통해 컨텍스트 윈도우를 오염시키지 않고도 스킬의 지식 베이스를 계속 확장할 수 있습니다.
00:11:26지금까지 보신 모든 조언은 Claude가 작업을 더 잘하도록 훈련시키는 법이었습니다.
00:11:31하지만 실제로 그것을 어떻게 제대로 활용해야 하는지는 알려주지 않았죠.
00:11:33이를 위해 저희는 Claude Code로 우위를 점할 수 있는
00:11:36가장 최신화된 10가지 방법을 담은 다른 영상을 준비했습니다.
00:11:39엔딩 화면에 해당 영상이 뜰 테니,
00:11:41검색할 필요 없이 바로 클릭해서 확인해 보세요.
00:11:43오늘 준비한 내용은 여기까지입니다.
00:11:45저희 채널을 응원하고 계속해서 이런 영상을 만들 수 있도록 도와주고 싶으시다면,
00:11:49아래의 Super Thanks 버튼을 이용해 주세요.
00:11:51언제나 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.