Transcript
00:00:00Claude Code로 만든 캐러셀은 엉망인데, 이건 당신 탓입니다.
00:00:03지금 소셜 미디어는
00:00:05Claude Code로 만든 저품질 캐러셀들로
00:00:08넘쳐나고 있고, 반응도 전혀 없습니다.
00:00:10그 이유는 전부 똑같이 생겼고,
00:00:12전부 순수 HTML로만 제작되었기 때문이죠.
00:00:15만약 당신이 소셜 미디어 마케팅에
00:00:17AI를 활용하려는 사람이라면 이건 큰 문제입니다.
00:00:20왜냐하면 캐러셀은 오늘날 가장 높은 전환율을
00:00:23보여주는 소셜 미디어 콘텐츠 형태 중 하나니까요.
00:00:25그래서 이 영상에서는 제가 도와드리려고 합니다.
00:00:27Claude Code의 HTML 에셋과
00:00:29외부 이미지 모델인 GPT Images 2나
00:00:32Nano Banana Pro 같은 툴들을 조합한
00:00:36하이브리드 방식으로 이 추세에서
00:00:39벗어나 실제로 효과가 있는 캐러셀을 만드는 법을 알려드릴게요.
00:00:42전환이 일어나는 캐러셀에 대해 말하자면,
00:00:45이런 것을 의미합니다.
00:00:46이건 제가 5주 전에 만든 게시물인데요,
00:00:49수십만 조회수를 기록했습니다.
00:00:50약 18,000개의 좋아요를 받았고,
00:00:52오늘 알려드릴 하이브리드 방식의 완벽한 예시죠.
00:00:55먼저 캐러셀에 대해 이야기할 때,
00:00:56커버 이미지를 생각해야 합니다.
00:00:59사람들이 가장 먼저 보는 것이니,
00:01:01가장 시각적으로 눈에 띄어야 합니다.
00:01:03여기 보이는 것은 GPT Images 2로 만들었는데,
00:01:05이 커버 이미지에서부터 GPT Images 2나
00:01:08Nano Banana Pro 같은 외부 툴을
00:01:10적극 활용할 것입니다.
00:01:12캐러셀을 넘기면서 보게 되는
00:01:14본문 슬라이드나 가치 전달 슬라이드들은,
00:01:16Claude Code가 직접 만든
00:01:19HTML 에셋으로도 충분히 좋습니다.
00:01:22이미 커버 슬라이드로 사람들을 사로잡았으니까요.
00:01:25Cloud Code 자체가 생성한 HTML 에셋이면 충분합니다.
00:01:28여기는 시각적으로 엄청나게 화려할 필요는 없습니다.
00:01:30가치를 전달할 수 있어야 하고,
00:01:31반복 가능하고 체계적인 방식으로
00:01:34상대적으로 빠르게 작업할 수 있어야 하죠.
00:01:35비용도 저렴해야 합니다.
00:01:38기억하세요,
00:01:40GPT Images 2나 Nano Banana Pro 같은 툴로
00:01:41모든 이미지를 만드는 건 공짜가 아닙니다.
00:01:42물론 그렇게 할 수는 있겠지만,
00:01:44시간이 너무 오래 걸리겠죠?
00:01:45속도와 품질 사이에서 균형을 잡아야 합니다.
00:01:47저도 반복해서 작업해보니
00:01:49이게 AI와 소셜 미디어에서
00:01:50캐러셀을 접근하는 가장 좋은 방법이라는 걸 알았습니다.
00:01:52특히 AI 분야는 저품질 캐러셀들로
00:01:54아니면 나노 바나나 프로 같은 거요.
00:01:55무슨 말인지 아실 겁니다.
00:01:59여기 보이는 6개 중 4개는
00:02:00분명히 Claude Code로 만든 겁니다.
00:02:01굳이 짚어드리지 않아도 아시겠죠?
00:02:04HTML 스타일의 슬라이드 느낌이 나고
00:02:06모두 비슷비슷하게 생겼습니다.
00:02:07앞으로 이런 건 더 많아질 겁니다.
00:02:09당신의 콘텐츠가 전환을 일으키고 싶다면,
00:02:12남들과 차별화해야 합니다.
00:02:13말씀드렸듯이 두 단계 과정이 필요합니다.
00:02:15첫 번째는 커버 이미지입니다.
00:02:16거기서 AI 이미지 생성기를 사용합니다.
00:02:18이번 영상에서는 Higgsfield CLI를
00:02:19이 6개 중 4개는 Claude Code로 만들어진 게 아주 분명해요.
00:02:21저는 Higgsfield CLI를 좋아하는데,
00:02:23Nano Banana나 GPT Images 2 등,
00:02:26매주 새로 나오는 어떤 AI 이미지 생성 도구든
00:02:27터미널을 통해 접근할 수 있기 때문입니다.
00:02:29두 번째는 Claude Code를 사용하는
00:02:31본문 슬라이드 HTML 에셋입니다.
00:02:34하지만 무언가를 만들기 전에,
00:02:36먼저 영감을 찾아야 합니다.
00:02:37실제로 조사를 좀 해서
00:02:39특히 본인의 분야 밖에서 어떤 캐러셀 형식이
00:02:41효과가 있는지 확인해야 합니다.
00:02:43그래야 참고할 대상이 생기니까요.
00:02:46백지 상태에서 그냥 시작하려고 하면,
00:02:47분명 고생하고 시간도 엄청 걸릴 겁니다.
00:02:49왜 처음부터 다 만들려고 하나요?
00:02:52나노 바나나(Nano Banana)든,
00:02:55GPD 이미지스 2든,
00:02:55아니면 다음 주에 새로 나올 최고의 도구든,
00:02:57터미널을 통해 할 수 있죠.
00:02:59그리고 두 번째는 바디 슬라이드인데,
00:03:00클로드 코드(Claude Code)와 HTML 에셋을 사용합니다.
00:03:04상단 검색창에 그냥 그렇게 입력하고
00:03:06스크롤을 내리면서
00:03:07눈에 띄는 걸 확인하는 겁니다.
00:03:08어떤 게 시각적으로 끌리시나요?
00:03:11뭐가 멋져 보이나요?
00:03:13그게 우리가 할 일입니다.
00:03:15마음에 드는 게 보이면
00:03:17두 가지를 할 겁니다.
00:03:18하나는 클릭해서
00:03:20커버 이미지를 스크린샷으로 찍는 것,
00:03:21그리고 본문 슬라이드도 똑같이 하는 겁니다.
00:03:23마음에 드는지 확인하고
00:03:25스크린샷을 찍어두세요.
00:03:27이 작업을 처음 해본다면,
00:03:29최소 20분에서 30분은
00:03:30투자해야 합니다.
00:03:31시각적 영감 라이브러리를
00:03:32구축하기 시작해야 하거든요.
00:03:33저도 캐러셀 영감을 위한
00:03:34폴더를 통째로 하나 가지고 있는데,
00:03:35전부 AI 관련 자료는 아닙니다.
00:03:39솔직히 말하면, 당신의 분야 외부에서
00:03:41가져올 수 있는 것들을 살펴봐야 합니다.
00:03:43AI 분야에서 남들이 다 하는 것과 똑같은
00:03:44방식으로 작업하거나,
00:03:45당신의 분야에서 모두가 하는 대로만 하면
00:03:48눈에 띄지 않을 테니까요.
00:03:50그래서 다른 분야 사람들이
00:03:54뭘 하고 있는지 보는 것은 항상 좋습니다.
00:03:570단계, 영감 얻기.
00:03:59그 라이브러리를 구축하기 시작하세요.
00:04:00이번 영상에서는,
00:04:02우리가 오늘 만들 캐러셀의 템플릿으로 쓸
00:04:04구체적인 사례 하나에
00:04:05집중해보겠습니다.
00:04:07다음 단계, 1단계는
00:04:10Higgsfield CLI를 설치하는 것입니다.
00:04:13다시 말하지만, 이건 현재 나와 있는
00:04:15다양한 이미지 및 비디오 생성기에
00:04:16접근할 수 있게 해줍니다.
00:04:18Higgsfield.ai에 접속해서
00:04:19MCP 및 CLI 탭으로 이동한 뒤,
00:04:21CLI 쪽을 클릭하세요.
00:04:22MCP도 있지만 저는 CLI를 더 선호합니다.
00:04:24그런 다음 이 명령어를 사용해서
00:04:26설치하면 됩니다.
00:04:26그 다음 Higgsfield Auth Login을
00:04:28실행해서 계정에 로그인하세요.
00:04:30이 스킬들을 추가할 수도 있습니다.
00:04:31이제 캐러셀 제작에 대해 이야기해 보죠.
00:04:32먼저, 캐러셀을 위한 폴더를 만들어야 합니다.
00:04:34저는 'Chase AI Carousels'라고 부르는데,
00:04:36이름은 상관없습니다.
00:04:38이렇게 하는 이유는 장기적으로
00:04:39성과가 좋았던 나만의 캐러셀 라이브러리를
00:04:41구축하기 위해서입니다.
00:04:43영감을 얻기 위해 모든 걸 다 봤었죠?
00:04:4430개, 40개, 50개, 60개의 캐러셀을 만든 후,
00:04:46항상 효과가 좋은 10~15개의 템플릿을
00:04:47알고 있다고 상상해보세요.
00:04:48나중에 캐러셀을 만드는 게
00:04:49훨씬 쉬워질 겁니다.
00:04:51Claude Code에게 그냥 '캐러셀 버전 10을
00:04:53이번 주제로 만들어줘'라고 말하면 되니까요.
00:04:56그러니 오늘 그 기초를 다지는 겁니다.
00:04:58아무것도 없는 상태에서 시작하니까
00:04:59먼저 영감을 찾아야겠죠.
00:05:00직접 만들고 싶은
00:05:02타이틀 페이지를 스크린샷으로
00:05:03찍어두겠습니다.
00:05:04영감을 얻을 타이틀 슬라이드를 찾았네요.
00:05:05이걸 사용할 겁니다.
00:05:07이번 캐러셀에서 다룰 주제는
00:05:096월의 상위 5개 Claude Code 플러그인입니다.
00:05:12이미지 스크린샷을 Claude Code에 넣고,
00:05:15이렇게 프롬프트를 입력할 겁니다.
00:05:15이건 영감을 위해 사용할 이미지인데,
00:05:18Higgsfield CLI를 사용해줘.
00:05:19이 특정 이미지 모델을 써서.
00:05:21GPT Images 2를 쓰겠습니다.
00:05:24그리고 원래 이미지와
00:05:25어떻게 다르게 만들고 싶은지 설명할 겁니다.
00:05:28이 Higgsfield CLI를 사용해서
00:05:29내 새로운 캐러셀을 위한
00:05:30커버 이미지를 만들어줘.
00:05:32자, 30개, 40개, 50개, 60개의
00:05:34캐러셀을 만들었다고 가정해 보세요.
00:05:36항상 효과가 좋은 템플릿이
00:05:3910개나 15개 정도 있다면,
00:05:41나중에 캐러셀을 만드는 작업이
00:05:43훨씬 더 쉬워집니다.
00:05:44Claude Code에게 시키면 되니까요.
00:05:46이봐, 캐러셀 10번 버전을 만들어 줘.
00:05:49이번엔 이 주제로 하는 거야.
00:05:51블라블라 하고 말이죠.
00:05:51그러니 오늘 여기서
00:05:53그 기반을 다지기 시작하는 겁니다.
00:05:54하지만 오늘은 아무것도 없으니
00:05:56영감부터 얻어야 합니다.
00:05:57그래서 무엇을 할 거냐면요.
00:05:59우리가 직접 만들어 보고 싶은
00:06:00표지 페이지의 스크린샷을
00:06:03찍어두는 겁니다.
00:06:04영감을 얻으려고 표지 슬라이드를 찾았거든요.
00:06:06이걸 사용하게 될 겁니다.
00:06:08그리고 제가 캐러셀로 다룰 주제는
00:06:106월을 위한 최고의
00:06:12Cloud Code 플러그인 5가지입니다.
00:06:15이 이미지 스크린샷을
00:06:16Cloud Code에 넣고,
00:06:18이제 프롬프트를 입력할 겁니다.
00:06:19대략 이런 식으로요.
00:06:21이봐, 여기 참고하고 싶은 이미지가 있어.
00:06:22영감으로 사용할 이미지입니다.
00:06:24Higgs 필드 CLI를 사용하세요.
00:06:26이 특정 이미지 모델을 사용하세요.
00:06:28GPT 이미지도 사용할 겁니다.
00:06:29그런 다음 어떻게 바꿀지
00:06:30원하는지 설명할 겁니다.
00:06:32원본 이미지와는 다르게 말이죠.
00:06:34Higgs 필드 CLI를 사용해서
00:06:36새로운 캐러셀을 위한
00:06:38커버 이미지를 만들어 주세요.
00:06:40주제는 6월의
00:06:41Cloud Code 플러그인 Top 5입니다.
00:06:45페이지에 넣고 싶은 제목입니다.
00:06:466월의 Cloud Code 플러그인 Top 5.
00:06:48방금 제공한 스크린샷을
00:06:51참조 이미지로 사용하고 싶어요.
00:06:53그러니까 기본적으로는
00:06:54그 이미지와 똑같이 만들되,
00:06:57가운데에 있는 동상인 여자를
00:07:02남자로 바꿔 주세요.
00:07:03조금 변화를 주는 거죠.
00:07:05하지만 그 외의 것들은
00:07:06미학적으로 그대로
00:07:08유지해 주세요.
00:07:09또 바꾸고 싶은 건
00:07:10저 아이콘들을
00:07:12포토샵 아이콘으로 하지 마세요.
00:07:14GitHub 아이콘이나
00:07:17Anthropic 아이콘으로 하세요.
00:07:20GPT 이미지를 사용하세요.
00:07:22종횡비는 4:5에
00:07:24최대한 가깝게 설정해 주세요.
00:07:27고품질이어야 합니다.
00:07:282K였으면 좋겠네요.
00:07:29이미지는 4개 만들어 주세요.
00:07:32완료되면,
00:07:33이미지들을 불러와 달라고 했죠.
00:07:35이제 작업을
00:07:36시작할 겁니다.
00:07:37참조 이미지를 알려줬죠.
00:07:39어떻게 바꾸고 싶은지도 알려줬고요.
00:07:41기억하시겠지만,
00:07:42동상을 남자로 바꾸고
00:07:45포토샵 아이콘 대신
00:07:46GitHub 아이콘을 넣고,
00:07:48텍스트를 수정하라고 했죠.
00:07:49그 외에도 어떤 이미지 모델을
00:07:51쓸지 GPT 이미지라고 했고,
00:07:52품질에 대한
00:07:54몇 가지 지시 사항을 줬습니다.
00:07:56품질에 대해서요.
00:07:59자, 만약 특정
00:08:00이미지 모델에 어떤 입력이
00:08:01필요한지 모른다면,
00:08:02GPT 이미지 대신
00:08:04Nano Banana Pro를 사용한다고 해도,
00:08:05Cloud Code는 알고 있습니다.
00:08:07기술을 가지고 있죠.
00:08:07CLI도 있고요.
00:08:08그래서 무엇이 최선인지 알려줄 수 있습니다.
00:08:11가장 중요한 건 변경하고 싶은 내용을
00:08:14정확하게 프롬프트로 작성하는 겁니다.
00:08:16그리고 또 기억해야 할 점은,
00:08:19특히 시작할 때는,
00:08:20여기서 처음 시작할 때,
00:08:21몇 번 반복해야 할 겁니다.
00:08:23이미지를 다시 줄 겁니다.
00:08:24우리가 아마 편집해야 할 거예요.
00:08:25그러니 창의적인 반복 과정이 필요한 거죠.
00:08:28한 번에 완벽하게 되는 경우는 드뭅니다.
00:08:30그래서 제목 페이지에만 하는 겁니다.
00:08:33이 과정을 모든 슬라이드,
00:08:34캐러셀의 모든 이미지마다
00:08:36반복한다고 상상해 보세요,
00:08:38이미지가 10개까지 갈 수 있는데.
00:08:39너무 오래 걸려요.
00:08:41그래서 제목에만 하는 것이고,
00:08:42나머지는 HTML을 통해 훨씬 빠르게 할 겁니다.
00:08:46자, 결과 이미지가 나왔습니다.
00:08:48첫 번째로, 실제 텍스트가 빠져 있네요.
00:08:52하지만 전반적으로 나쁘지 않네요.
00:08:56우리가 추구하는 전반적인 분위기는 좋아요.
00:08:58동상은 잘 나왔네요.
00:09:00아이콘들도 마음에 들고요.
00:09:01Anthropic 아이콘은 조금 따져볼 만해요.
00:09:05색깔이 좀 달라 보일 수도 있고요.
00:09:07하지만 우리가 원하던 느낌은 있네요.
00:09:09텍스트가 올라간다고 상상하면,
00:09:11이 정도면 만족합니다.
00:09:13그림자 같은 효과도 있고요.
00:09:14원본과 비교해 보면,
00:09:16화면 밖으로 잠깐 나가볼게요.
00:09:18꽤 비슷하죠?
00:09:20어디서 영감을 받았는지 알 수 있죠.
00:09:23원본에는 좀 더
00:09:24많은 게 들어 있네요, 그렇죠?
00:09:26왼쪽 상단에 아이콘이 하나 더 있는데,
00:09:27마음에 듭니다.
00:09:28이제 여기 텍스트만 더하면
00:09:30완전히 만족할 것 같아요.
00:09:31솔직히 왜 텍스트가
00:09:32사라졌는지 잘 모르겠지만,
00:09:34앞으로 고치기는 꽤 쉽겠죠?
00:09:36두 가지 옵션이 있습니다.
00:09:38첫 번째는 이 커버 이미지를 가져와서,
00:09:40네 개 중 이게 제일 맘에 드니까,
00:09:43Cloud Code에 다시 입력해서
00:09:45모든 걸 그대로 유지하고,
00:09:47상단에 텍스트만 추가하라고 하는 겁니다.
00:09:51다른 옵션은
00:09:52Canva 같은 툴로 가져가서
00:09:53좀 더 직접 수정하는 거죠.
00:09:55선택은 여러분의 몫입니다.
00:09:57하지만 오늘 영상에서는,
00:09:57이 이미지를 주고 말할 겁니다.
00:09:596월의 Cloud Code 플러그인
00:10:02Top 5에 대한 텍스트를 추가하고,
00:10:05일부 강조를 해서
00:10:07눈 주변에 보이는
00:10:08무지개 효과 같은 걸 넣어달라고요.
00:10:11만들어진 이 이미지는 마음에 들지만,
00:10:13텍스트를 추가하고 싶었어요.
00:10:15그리고 참조 이미지에서 썼던
00:10:16그 텍스트 느낌을 따라 하고 싶었거든요.
00:10:20제목에 들어갈 텍스트는
00:10:21이렇게 정했습니다.
00:10:236월의 Cloud Code 플러그인 Top 5.
00:10:27그리고 그 일부는
00:10:29무지개 그라데이션 같은 느낌이 들게,
00:10:33동상의 눈가에 흐르는 것과
00:10:35같은 느낌이어야 합니다.
00:10:38자, 그렇게 해 주세요.
00:10:40그 버전으로 4개를 만들어 주세요.
00:10:41이렇게 주고받는 작업이 필요한 겁니다.
00:10:44진행할 때요.
00:10:45너무 복잡하게 생각하지 마세요.
00:10:46원하는 걸 말하세요.
00:10:47여러 이미지를 요청하세요.
00:10:48한 번에 4개씩 만들 수 있어요.
00:10:50사실 16개까지도 가능하다고 알고 있는데,
00:10:524개가 적당하더라고요.
00:10:55결과물을 봅시다.
00:10:56텍스트 추가를 요청했을 때 나온 결과물입니다.
00:10:58보시다시피 4개의 옵션이 나왔네요.
00:11:02이게 가장 마음에 드네요.
00:11:05시간이 더 있었다면 좀 더 편집했겠지만,
00:11:09텍스트에 그림자를 추가해서
00:11:12좀 더 튀게 만들 수도 있겠죠.
00:11:14하지만 마음에 들 때까지 끝도 없이 수정할 수 있어요.
00:11:18지금 정도면 충분합니다.
00:11:20인스타그램이나 틱톡을 스크롤하다가
00:11:23커버 이미지를 봤다면 멈췄을 거예요.
00:11:25커버 이미지가 정해졌으니, 이제 본문 슬라이드로 넘어갑시다.
00:11:29본문 슬라이드는,
00:11:31제목 슬라이드 이후의 모든 것을 의미합니다.
00:11:35명심해야 할 점들은,
00:11:37작업 공간이 그리 넓지 않다는 겁니다.
00:11:40이 슬라이드처럼 말이죠.
00:11:42이미지 하나, 제목 하나,
00:11:45그리고 한두 줄의 텍스트가 전부죠.
00:11:48파워포인트 슬라이드와 비슷하게 생각하면 됩니다.
00:11:51텍스트로 꽉 채우지 마세요.
00:11:53이미지는 좋죠.
00:11:54우리 모두 이미지를 좋아하니까요.
00:11:55제목을 정하고 나면,
00:11:58문장 몇 개만 넣으면 됩니다.
00:12:00그러니까 간결한 표현이 정말 중요합니다.
00:12:03어떤 이미지를 사용할지 생각해야 합니다.
00:12:07배경은 어떻게 할지?
00:12:08텍스트는 어떻게 할지?
00:12:10좋은 점은 이 작업의 거의 전부가 HTML로 끝난다는 거죠.
00:12:14Cloud Code가 이 모든 걸 스스로 생성합니다.
00:12:17예외가 하나 있다면 스크린샷이죠.
00:12:20여기에 보이는 스크린샷들은 제가 제공한 것들입니다.
00:12:24일부 사진들이요.
00:12:25이 스크린샷을 제공했고, 넣으라고 했죠.
00:12:28이것도 제가 준 스크린샷이고요.
00:12:30하지만 직접 만들 수도 있습니다.
00:12:31터미널을 보여주는 이 이미지도 Cloud Code가 다 만들었습니다.
00:12:35전 아무것도 안 했어요.
00:12:36이제 슬라이드가 어떤 모습일지 고민해야 합니다.
00:12:42그런 다음 커버 슬라이드 때처럼 반복 작업을 할 겁니다.
00:12:46훨씬 더 직접 할 수도 있죠.
00:12:48Cloud Code가 HTML 슬라이드를 생성하게 할 겁니다.
00:12:52그리고 브라우저로 열어볼 겁니다.
00:12:54직접 수정할 수 있거든요.
00:12:55텍스트를 바꾸거나 위치를 옮기고, 수정을 요청할 수도 있죠.
00:13:00제목 슬라이드보다 더 큰 제어권을 갖는 셈이죠.
00:13:03제목 슬라이드처럼 여기서도 영감을 얻을 수 있습니다.
00:13:07여기서 한 작업이나 다른 슬라이드를 복사하고 싶다고 해보죠.
00:13:11혹은 제 슬라이드를 복사하고 싶다면요.
00:13:12무엇을 할까요?
00:13:13스크린샷을 찍을 겁니다.
00:13:15여기에 붙여넣을 거고요.
00:13:16그럼 이제 프롬프트를 줄 겁니다. 자, 이제 본문 슬라이드를 작업해 보자고 말이죠.
00:13:20제목 슬라이드는 끝났으니까요.
00:13:21어떤 식인지 알겠죠?
00:13:23이런 식의 결과물을 원합니다.
00:13:24순수 HTML로 하고 싶어요.
00:13:26브라우저로 보여줄 수 있나요?
00:13:27이제 저는 그냥 프롬프트를 날것 그대로 입력하고 있습니다.
00:13:30지금 Claude Code에 입력하는 이 모든 프롬프트는 완전히 코드화할 수 있기 때문에 하나의 스킬이 될 수도 있습니다.
00:13:36이제 저는 이 모든 것에 대한 저만의 개인 스킬과 저만의 캐러셀 예시를 가지고 있죠.
00:13:42그 모든 것은 제 커뮤니티에서 확인하실 수 있습니다.
00:13:44고정 댓글에 링크를 남겨둘게요.
00:13:47하지만 스스로 하신다면 이런 느낌이어야 할 겁니다.
00:13:50이제 본문 슬라이드 작업으로 넘어가 보죠.
00:13:53제목 슬라이드는 고정했고요.
00:13:54거기까지는 마음에 드네요.
00:13:55이제 본문 슬라이드는 HTML로 만들 겁니다.
00:13:57보신 이 이미지를 영감으로 삼고 싶어요.
00:14:00본문 슬라이드를 만드는 템플릿으로 이 이미지를 사용하고 싶거든요.
00:14:04텍스트 스타일이 마음에 들어요.
00:14:05배경도 마음에 들고요.
00:14:06전부 다 마음에 듭니다.
00:14:07그래서 본문 슬라이드를 만들고 싶습니다.
00:14:10HTML이었으면 하고요.
00:14:11브라우저에서 이 HTML을 불러올 수 있으면 좋겠습니다.
00:14:14그리고 수정도 할 수 있었으면 좋겠어요.
00:14:15위치를 옮기거나, 폰트 크기를 바꾸거나, 실제 텍스트를 변경하는 등의 작업을,
00:14:19브라우저를 통해 할 수 있기를 바랍니다.
00:14:21JSON을 복사해와야겠지만요.
00:14:23수정할 때 그렇게 된다면 감수해야죠.
00:14:24하지만 가능한 한 쉽게 만들고 싶습니다.
00:14:27그리고 5개의 본문 슬라이드는 6월의 5가지 플러그인과 관련된 내용이었으면 해요.
00:14:33예를 들어, 우리가 다룰 5가지 플러그인이죠.
00:14:35그중 하나는 이걸로 하죠.
00:14:36Caveman으로 합시다.
00:14:38다음은 Codex 플러그인으로 하고요.
00:14:41세 번째는 Impeccable로 하죠.
00:14:43그리고 네 번째와 다섯 번째 플러그인은 스스로 생각해 보세요.
00:14:47그걸 다 하고 나면 불러오세요.
00:14:49그래서 알아서 슬라이드를 만들고, 생성한 5가지 플러그인을 알려줬으며,
00:14:53이런 트윅 루프 기능도 만들었습니다.
00:14:55브라우저 안에서 불러온 모습입니다.
00:14:58보이시죠.
00:14:59기억하세요, 우리가 무엇을 입력했었죠?
00:15:01제가 만든 캐러셀의 스크린샷을 입력했습니다.
00:15:05비슷하죠, 배경에 Anthropic 로고를 재현하려고 시도한 게 보일 겁니다.
00:15:10Claude Code에 실제 Anthropic 로고 이미지를 입력해서,
00:15:14그걸 바탕으로 만들게 할 수도 있어요.
00:15:16어쨌든 위에 이런 알약 모양의 플러그인 1번, Caveman 모드가 있습니다.
00:15:21게다가 저는 Caveman이 무엇인지 설명도 안 해줬어요.
00:15:25스스로 리서치를 해서 GitHub를 확인하고,
00:15:28모든 문구를 작성해 준 겁니다.
00:15:30어떤 문구도 주지 않았는데 말이죠.
00:15:31거의 모든 부분에 대해 알아서 해낸 겁니다.
00:15:34아래쪽을 보시면 이 터미널 같은 것을 만들었는데,
00:15:38비교적 단순하죠. 왜냐하면 자체적인 HTML 에셋으로만 작업했기 때문입니다.
00:15:41어떤 스크린샷도 제공하지 않았으니까요.
00:15:43하지만 진정한 힘은 여기 트윅(tweaks) 쪽에 있습니다.
00:15:45이 아이디어는 고유의 트윅 모드를 가진 Claude Design에서 파생된 것입니다.
00:15:50그래서 우리가 만드는 캐러셀에도 이런 기능을,
00:15:53꽤 쉽게 구현해 보면 어떨까 생각했죠.
00:15:56헤드라인 크기, 본문 크기, 배경 불투명도 등을 바꿀 수 있고요.
00:16:03즉석에서 정말 쉽게 수정할 수 있습니다, 그렇죠?
00:16:10이게 AI 이미지 생성기를 거치지 않고 HTML을 통해 모든 것을 작업하는 힘입니다.
00:16:15여기에 있는 건 뭐든 조절할 수 있습니다.
00:16:17카드를 기울이는 것도 조절할 수 있고요.
00:16:20뭔가를 바꿀 때, 이 트윅 기능을 만들면 (스쿨 커뮤니티에 제 정확한 스킬이 있습니다만),
00:16:29스스로 하신다면 아마 이렇게 말할 겁니다. 변경 사항을 만들었으면 트윅을 내보내야 한다고 말이죠.
00:16:34하단에 JSON으로 된 트윅 내보내기 버튼이 있습니다.
00:16:38여러 슬라이드를 한꺼번에 변경할 수 있고, 트윅을 내보낸 뒤 다시 돌아와서,
00:16:44Claude Code에 바로 붙여넣기만 하면 됩니다.
00:16:47그러면 알아서 업데이트될 거예요.
00:16:49그래서 수정하기가 정말 쉽죠.
00:16:51자, 여기서 이제 뭘 할까요?
00:16:54슬라이드를 하나씩 넘겨볼 겁니다.
00:16:55우리의 비전과 맞는지 확인하는 거죠.
00:16:57너무 말이 많지는 않은지, 아니면 부족하지는 않은지 확인합니다.
00:17:00올바른 주제를 다루고 있는지도요.
00:17:01여기에 스크린샷을 추가하면 정말 더 풍성해질 겁니다.
00:17:07예를 들어, 여기 무엇이 있죠?
00:17:10Caveman 모드요.
00:17:11Caveman GitHub로 갈 수 있습니다.
00:17:13간단하게 이 이미지의 스크린샷을 찍어서 Claude Code에 가서,
00:17:19이미지를 붙여넣고 이렇게 말하는 거죠. “야, Caveman 슬라이드에 이 이미지를 넣어줄래?”
00:17:26만들어둔 것 대신 Caveman 이미지를 써달라고 말이에요.
00:17:30그 과정을 계속 반복하기만 하면 됩니다.
00:17:33보시다시피 여기에 Caveman 이미지가 추가되었습니다.
00:17:36꽤 크네요.
00:17:37마음에 드는 결과가 나올 때까지 움직이면 됩니다.
00:17:43더 나아가, Claude Code에 인터넷에서 적절한 이미지를 찾으라고 시킬 수도 있습니다.
00:17:49HTML이나 스크린샷뿐만 아니라 훨씬 창의적으로 접근할 수 있죠.
00:17:53이 시점에서 마음에 드는 결과가 나올 때까지 과정을 계속 반복합니다.
00:17:58창의성이라는 측면에서 보면, 많은 부분은 당신이 찾은 영감에서 나올 겁니다.
00:18:02저는 이 이미지를 썼죠.
00:18:03표지 이미지를 위해 인스타그램에서 캐러셀을 검색했던 것처럼, 본문 슬라이드도 다 찾아볼 수 있습니다.
00:18:09모든 본문 슬라이드도 살펴보세요.
00:18:11어떻게 하는지에 대한 설명은 이 정도로 충분할 것 같네요.
00:18:14이제 보기 좋게 만드는 건, 무슨 이야기를 하느냐에 달렸죠.
00:18:18어쨌든 그게 Claude Code를 사용하는 부분입니다.
00:18:20구축하는 측면에서요.
00:18:21아주 간단하죠.
00:18:23앞서 말씀드렸듯이 모든 캐러셀에 대해 똑같이 하시면 됩니다.
00:18:27각각 다른 템플릿을 갖게 될 겁니다.
00:18:28그래서 20번째 캐러셀을 만들 때가 되면, 이런 과정을 수없이 반복했기 때문에,
00:18:35이제는 더 이상 고생할 필요가 없죠.
00:18:38영감을 찾고, 수정하고 이런 번거로운 과정이요.
00:18:39거의 다 준비되어 있으니까요.
00:18:41그저 문구만 바꾸면 됩니다.
00:18:43영감 찾기, 외부 AI 이미지 모델로 표지 만들기,
00:18:49그리고 HTML로 본문 슬라이드 만들기, 이 세 단계 과정을 통해 우리는 지속 가능하고 반복 가능한 프로세스를 얻게 됩니다.
00:18:57양쪽 모두의 장점을 챙길 수 있는 방법이죠.
00:18:58AI 이미지 모델을 통한 멋진 창의성과 훌륭한 이미지를 얻으면서,
00:19:03HTML은 든든한 기반이 되어줍니다. 게다가 규모를 키워 계속해서 작업할 수 있을 정도로 쉽고요.
00:19:08매일 몇 시간씩 컴퓨터 앞에 앉아있지 않아도 됩니다.
00:19:11자, 오늘 이야기는 여기까지 하도록 하죠.
00:19:14보통 보는 것보다 조금 더 나은 캐러셀을 만드는 법을 이해하는 데 도움이 되었으면 좋겠습니다.
00:19:20Claude Code의 단일 스킬만 있으면 된다는 함정에 빠지지 마세요.
00:19:25우리는 더 많은 것을 할 수 있습니다.
00:19:26그렇다고 작업이 크게 늘어나는 것도 아니고요.
00:19:29기반만 잘 구축해 두면 됩니다.
00:19:31늘 그렇듯, 여러분의 생각은 어떤지 알려주세요.
00:19:34제 Claude Code 마스터클래스를 원하신다면 Chase AI Plus를 확인해 보세요.
00:19:38저의 모든 스킬과 캐러셀 예시들도 그곳에 있습니다.
00:19:41고정 댓글에서 확인 가능합니다.
00:19:43그럼 다음에 또 봐요.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video