Fable 5와 GPT 5.6으로 10,000달러짜리 웹사이트 한 방에 만들기
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00이 웹사이트 전체가 Claude Fable 5를 사용해 단 한 번의 시도로 만들어졌습니다.
00:00:05단순히 하나의 스크롤 애니메이션이 아니라, 여러 개의 스크롤 애니메이션을 하나로 이어 붙여서
00:00:10부드럽고 퀄리티 높으며 일관된 경험을 제공하는 것입니다.
00:00:15정말 대단하지 않나요?
00:00:16이건 정말 최고급 결과물인데, 이 모든 걸 가능하게 해준 기술을 보여드리겠습니다.
00:00:22더불어 Claude Code로 어떻게 이걸 구현했는지 보여드릴 뿐만 아니라,
00:00:25새로 나온 GPT 5.6 Sol에서도 똑같이 작동하는 모습을 보여드릴 겁니다.
00:00:31요즘 같은 시대에 굳이 AI 도구를 하나만 쓸 필요는 없으니까요.
00:00:35이게 정말 멋진 점이죠.
00:00:37말씀드렸다시피, 제가 찾아내고 개선한 이런 스크롤 애니메이션 기술 없이 수작업으로 하려면
00:00:42얼마나 어려운지 아실 겁니다.
00:00:43영상을 여러 개 만들고, 시작 프레임을 따고, 서로 맞추려 애쓰면서
00:00:47프레임을 일일이 하나씩 뽑아내는 건 정말 고역이죠.
00:00:50하지만 이 기술을 쓰면 그 모든 과정이 훨씬 쉬워집니다.
00:00:53이 기술의 진짜 공로는 Peter Wang에게 있습니다.
00:00:55원래 버전을 만든 사람이 바로 그분이거든요.
00:00:57트위터에서 발견했는데, 고맙게도 오픈 소스로 공개해 주셨더군요.
00:01:00그분의 'scroll world' 링크를 아래에 달아둘 테니 한번 확인해 보세요.
00:01:03저는 그 코드를 포크해서 몇 가지 개선 사항을 더했습니다.
00:01:07비용을 절약할 수 있도록 버젯 티어(예산 등급)를 도입한 것이 핵심이죠.
00:01:10웹사이트를 만드는 데 굳이 6개의 장면이 다 필요한 건 아니니까요.
00:01:14그리고 모바일 버전에 대한 개선 사항과 SEO 관련 기능도 많이 추가했습니다.
00:01:19이 스크롤 애니메이션의 전체적인 작동 원리는 하나의 이미지에서 시작하는 겁니다.
00:01:23지금 보시는 게 바로 그거죠.
00:01:24그 이미지를 영상으로 변환합니다.
00:01:27이 스크롤 애니메이션도 처음엔 영상이었지만, FFmpeg를 사용해 영상에서 개별 프레임을 모두 추출한 다음
00:01:34사용자가 웹사이트에서 스크롤하는 위치에 따라 해당 프레임을 연결하는 방식입니다.
00:01:40부드러운 경험을 제공하고 끊김 현상을 없애기 위해 뒤에서 많은 작업이 이루어집니다.
00:01:46게다가 각 장면을 만들 때 서로를 참조하도록 설계해서,
00:01:50전체적으로 일관성을 유지하도록 했습니다.
00:01:52마치 하나의 이야기처럼 보이게 말이죠.
00:01:55이미지와 영상은 Higgs field MCP를 통해 생성합니다.
00:02:00Claude Code와 Codex 모두에서 이걸 사용할 수 있습니다.
00:02:02터미널을 나갈 필요가 전혀 없죠.
00:02:04MCP나 CLI를 통해 GPT Image 2 같은 이미지 모델과 Seed Dance 같은 영상 모델을 모두 호출하는 겁니다.
00:02:12원하는 AI 에이전트에 연결하려면 Higgs field의 MCP 및 CLI 페이지로 가서 단계별로 진행하면 됩니다.
00:02:20MCP URL을 복사해서 인증 과정을 거치기만 하면 됩니다.
00:02:25그다음 필요한 건 바로 그 기술(스킬)뿐입니다.
00:02:27제 버전도 아래에 링크해 두겠습니다.
00:02:30URL을 복사해서 Claude Code나 Codex에 주거나, 플러그인 형태로 사용할 수도 있습니다.
00:02:35어느 쪽이든 좋습니다.
00:02:36도입부에서 말씀드렸듯이 이번에는 Codex와 최신 Sol 5.6에서 시연하겠지만, Claude Code에서도 똑같이 보였습니다.
00:02:44과정은 완전히 똑같습니다.
00:02:46인터뷰를 진행하면서 어떤 웹사이트를 만들고 싶은지, 각 장면에 무엇이 들어가길 원하는지 말해주면 단계별로 안내해 줍니다.
00:02:53모든 영상을 만들기 전에 먼저 이 이미지가 마음에 드는지 확인 과정을 거치죠.
00:02:57무턱대고 기술을 실행해서 의견도 묻지 않고 영상을 쏟아내는 방식이 아닙니다.
00:03:01전 과정에서 친절하게 가이드해 준다는 뜻이죠.
00:03:04Codex 안에서 'scroll world' 스킬을 호출했습니다.
00:03:07명령어로 '/scroll world'라고 입력했죠.
00:03:08일본 부티크 여행 브랜드를 위한 웹사이트를 만들고 싶다고 했습니다.
00:03:14예술적인 방향은 종이접기(오리가미) 스타일로 가고 싶다고 했고요.
00:03:18원하는 스타일을 잘 모르겠다면 AI와 대화를 나누며 질문에 답하기만 하면 됩니다.
00:03:25저는 미리 원하는 바를 생각해 둔 상태였죠.
00:03:27그러니 시작할 때 구체적인 아이디어가 없어도 걱정 마세요. 방향을 정해주면 예산과 관련된 질문을 합니다.
00:03:36모바일 예산도 어떻게 할지 물어보고요.
00:03:38참조할 장면(Scene) 개수가 몇 개 필요한지도 묻습니다.
00:03:41이번엔 6개의 장면으로 설정했습니다.
00:03:43꽤 긴 분량의 영상이 되고, 시작부터 끝까지의 여정도 꽤 깁니다.
00:03:48대부분의 사람에게는 과할 수도 있어요.
00:03:50게다가 Higgs field 크레딧도 꽤 많이 들어서, 결국 800 크레딧 정도 소모됐습니다.
00:03:56고가 요금제를 쓰시는 게 아니라면 4개 정도의 장면이 가장 좋은 타협점이라고 생각합니다.
00:04:03다음은 모바일을 어떻게 처리할지 정하는 겁니다.
00:04:04안전하게 크롭(자르기)하는 것부터 모바일용 영상을 따로 만드는 전체 세로 모드까지 다양합니다.
00:04:12어느 정도 깊이로 들어갈지 선택할 여지가 있는 거죠.
00:04:15이번 영상에서는 'lean and crop safe' 방식으로 하겠습니다.
00:04:20가장 저렴한 옵션이니 장면 수를 줄여서 할 수도 있다는 점을 이해해 주세요.
00:04:24기본값일 뿐 3개로도 충분히 가능합니다.
00:04:28그 후 각 장면이 어떻게 보일지 전체 여정을 제안합니다.
00:04:32얼마나 많은 생성을 거쳐야 하는지도 알려주고요.
00:04:35총 4번의 이미지 생성과 4개의 장면 전환 영상이 필요합니다.
00:04:40영상 간의 연결과 교차 화면(crossfade)도 필요하죠.
00:04:43총 9번의 생성 작업이 필요하며 예상 시간도 알려주는데, 실제로는 생각보다 덜 걸립니다.
00:04:49AI 영상이라고 해도 생각보다 금방 됩니다.
00:04:52승인하고 나면 다음으로 '앵커(anchor)'를 생성합니다.
00:04:56앵커는 시작 프레임이 됩니다.
00:05:00시작 프레임에 대해 말하자면,
00:05:01배경에 이런 느낌의 이미지가 깔리는 겁니다.
00:05:03단순한 정지 이미지죠.
00:05:04이제 확인하고 '좋아'라고 말하면 됩니다.
00:05:06이 예술적 방향이 전체를 지배하게 될 테니까요.
00:05:09아니면 일부를 수정할 수도 있죠.
00:05:11이 단계는 정말 중요합니다. 여기서 승인하면 모든 게 이 이미지를 기반으로 생성되니까요.
00:05:17생성된 이미지를 한번 볼까요.
00:05:19지금은 마음에 드네요.
00:05:20아마 눈치채셨겠지만,
00:05:21Codex와 Sol을 통해 진행하면 이미지 생성 기능이 이미 포함되어 있습니다.
00:05:26GPT Image 2로 이미지를 생성하려고 굳이 Higgsfield에 요청을 보낼 필요가 없는 거죠.
00:05:31Codex 내부에서 네이티브로 가능하니까요.
00:05:34Codex로 이미지 작업을 하고, 영상 생성은 여전히 Higgsfield로 보내야 합니다.
00:05:41반면 Claude Code로 하면 이미지 생성 기능이 없으니 Higgsfield가 전체를 다 담당해야 하죠.
00:05:44그럼에도 불구하고 이미지는 잘 나왔습니다.
00:05:48저는 마음에 듭니다.
00:05:50자, 이제 어떻게 할까요?
00:05:51좋다고 말하면 됩니다.
00:05:52아주 좋네요.
00:05:55타이핑이 안 되네요.
00:05:57다음으로 진행하죠.
00:05:5932분 만에 웹사이트가 완성되었습니다.
00:06:014개의 다른 장면이 있네요.
00:06:0210번의 생성 과정을 거쳤습니다.
00:06:04이제 로컬 호스트에 준비되었습니다.
00:06:06한번 볼까요.
00:06:07일본 여행 웹사이트입니다.
00:06:08스크롤을 내리면서 전반적으로 한번 훑어보겠습니다.
00:06:12사람들이 여행하고 지하철이 나오네요.
00:06:15집으로 이동합니다.
00:06:17문이 열리고,
00:06:19호텔로 이동합니다.
00:06:20펼쳐지고요.
00:06:22멋지죠.
00:06:23새가 날아오르기 시작합니다.
00:06:28좋은 점과 나쁜 점은 뭘까요?
00:06:30비주얼은 좋습니다.
00:06:31정말 멋지다고 생각해요.
00:06:32각 장면이 진행되는 방식도 좋았습니다.
00:06:34지하철이 들어오는 부분처럼 각 장면이 진행되는 게 마음에 들어요.
00:06:38지하철이 나타나는 부분 말이죠.
00:06:41멋져요.
00:06:41문제는 장면 1에서 장면 2로 넘어갈 때의 전환입니다.
00:06:46너무 급격하게 끊기죠.
00:06:47의도적인 연출일 수도 있지만요.
00:06:48나름의 예술적 지향이 있을 수도 있겠죠.
00:06:51그래도 이건 우리가 수정할 수 있는 부분입니다.
00:06:52여기도 마찬가지입니다.
00:06:53장면 2의 디테일은 정말 놀랍습니다.
00:06:57하지만 장면 2에서 3으로 갈 때도 갑자기 끊깁니다.
00:07:01반면 장면 3에서 4로 넘어가는 전환은 정말 멋집니다.
00:07:04문이 열리고,
00:07:06짠,
00:07:06호텔에 도착하죠.
00:07:07배경을 보시면 장면 4가 서서히 프레임으로 들어오는 걸 볼 수 있습니다.
00:07:12처음엔 흐릿하다가 튀어나오면서 3D 효과를 줍니다.
00:07:17웹사이트에 깊이감을 더해주죠.
00:07:19그런 다음 장면 4로 자연스럽게 전환됩니다.
00:07:22이건 정말 좋네요.
00:07:23장면 1에서 2, 2에서 3으로 넘어갈 때도 이렇게 해줬더라면 정말 기뻤을 겁니다.
00:07:28이 부분에 대한 불만이 조금 남네요.
00:07:31다른 부분은 다 좋습니다.
00:07:32그런 장면 전환을 추가해서 부드럽게 만드는 건 그렇게 어렵지 않을 것 같아요.
00:07:35그다지 어려운 일은 아니겠죠.
00:07:36Sol GPT 5.6으로 만든 결과물과 Claude Code에서 만든 결과물을 비교하면,
00:07:41장면 전환은 여기가 확실히 조금 더 세련됐습니다.
00:07:45여기가 장면 1입니다.
00:07:46위에서 뭔가가 튀어나오고 다음 장면으로 아주 자연스럽게 넘어가죠.
00:07:52매우 매끄럽습니다.
00:07:56여기서도 똑같습니다.
00:07:57들어갑니다.
00:07:58오, 짠.
00:07:58열리네요.
00:07:59그리고 위쪽으로 다음 장면이 나타납니다.
00:08:01Fable 5를 이용한 장면 전환이 더 낫다고 봅니다.
00:08:06여기서도 마찬가지고요.
00:08:06짠,
00:08:07도착했죠.
00:08:07축소하고,
00:08:08다음 장면으로 넘어갑니다.
00:08:09제 주된 불만은 이겁니다.
00:08:11전환 면에서는 Sol 5.6보다 Fable 5에게 확실히 점수를 더 주고 싶네요.
00:08:15하지만 이것도 한 번의 시도로 만든 겁니다.
00:08:18단 하나의 기술만 썼으니까요.
00:08:19이 기술이 얼마나 잘 만들어졌는지 전반적으로 매우 깊은 인상을 받았습니다.
00:08:25멋진 기술이에요.
00:08:26다음 질문은, 이게 시각적인 볼거리를 제공하는데 그치느냐는 거죠.
00:08:29더 기능적인 웹사이트로 만들 수 있느냐는 건데,
00:08:33문제없다고 생각합니다.
00:08:33전혀 문제 될 게 없죠.
00:08:34이처럼 애니메이션이 들어간 스크롤 웹사이트를 만들 때 일관성을 유지하면서
00:08:38조잡하지 않고 고급스럽게 보이는 건 매우 어렵습니다.
00:08:43혼자 하라고 한다면 꽤나 애를 먹었을 겁니다.
00:08:46많은 시간이 걸렸겠죠.
00:08:47하지만 이런 기반이 있다면 그다음은 쉽습니다. 텍스트를 어떻게 하고,
00:08:51문구는 어떻게 할지,
00:08:52CTA는 어떻게 할지 말이죠.
00:08:53사용자를 처음부터 끝까지 어떻게 끌고 갈지 말입니다.
00:08:56양식을 작성하게 유도하는 거랑 비슷하죠.
00:08:57별로 어렵지 않습니다.
00:08:58바퀴를 새로 발명할 필요도 없고요.
00:09:01모든 웹사이트가 하는 방식이죠.
00:09:02이런 기초 위에 Fable 5나 5.6을 얹는 건 전혀 어려운 도전이 아닙니다.
00:09:06아무것도 아니에요.
00:09:09단 한 번의 시도로 완성할 수 있다는 게 놀라울 따름입니다.
00:09:133개월, 6개월, 9개월 전이었다면 혼자 하기는 정말 고역이었을 겁니다.
00:09:16정말 힘들었겠죠.
00:09:18다시 한번 오리지널 버전을 만든 Peter Wang에게 감사를 전합니다.
00:09:21제 버전과 그분 버전 모두 영상 설명란에 링크해 두겠습니다.
00:09:24보시다시피 정말 직관적입니다.
00:09:26딱히 할 게 없습니다.
00:09:27그저 호출만 하면 됩니다.
00:09:28기술을 불러오고요.
00:09:29창의적인 방향만 제시하면 나머지는 다 알아서 해줍니다.
00:09:32오늘 영상은 여기서 마무리하도록 하겠습니다.
00:09:37언제나처럼 댓글로 여러분의 생각을 들려주세요.
00:09:40제 Claude Code 마스터 클래스와 같은 더 많은 AI 강의를 보고 싶다면
00:09:43Chase AI Plus를 확인해 보세요.
00:09:46그럼 다음 영상에서 뵙겠습니다.