🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude Fable 5는 한 번의 프롬프트와 Higsfield MCP 연동으로 고급 3D 스크롤 웹사이트를 몇 분 안에 만들 수 있다는 가능성을 보여준다.

📌 핵심 요점

1. 영상의 핵심은 Claude Fable 5와 Claude Code, Higsfield MCP를 연결해 포트폴리오·이커머스·제품형 랜딩페이지를 한 번의 프롬프트로 빠르게 만드는 워크플로우다.
2. 3D 스크롤 웹사이트는 정적 페이지가 아니라 이미지, 영상 프레임, 스크롤 애니메이션이 결합된 구조이므로 Kance 2.0 같은 고화질 생성 모델과 외부 MCP 연결이 결과물 품질에 큰 영향을 준다.
3. Higsfield MCP를 Claude Code의 custom connector로 추가하면 Kling, Kance 2.0, Veo 계열 모델 등을 호출할 수 있고, 이미지·영상 생성과 웹사이트 구현을 한 환경에서 처리할 수 있다.
4. Abyssal 심해 탐사 웹사이트 예시는 “How deep will you go?”라는 첫 화면, 수심별 정보, 잠수정 Ariebas의 스펙과 가격·출발일 정보까지 포함해 상업용 랜딩페이지처럼 구성된다.
5. 개인 포트폴리오 예시는 본인 사진 한 장과 레퍼런스 스타일, 시네마틱 스크롤 지시만으로 웹사이트를 만들고, 마음에 들지 않는 부분은 Claude Fable 5와 대화하며 반복 수정할 수 있음을 보여준다.

🧩 배경과 문제 정의

• 이 영상의 핵심은 Claude Fable 5와 Claude Code를 조합해 포트폴리오, 이커머스, 제품형 랜딩페이지 같은 고급 웹사이트를 한 번의 프롬프트로 빠르게 제작하는 흐름을 보여주는 데 있다.
• 단순한 정적 웹페이지가 아니라 3D 스크롤, 이미지, 영상 프레임, 애니메이션이 결합된 시네마틱 웹사이트를 만들기 때문에, 4K급 이미지 품질과 외부 생성 모델 연결이 결과물의 완성도에 큰 영향을 준다.
• Higsfield MCP 같은 커넥터를 Claude Code에 연결하면 이미지·영상 생성과 웹사이트 구현을 한 작업 환경 안에서 처리할 수 있어, 여러 도구를 오가며 수동으로 제작해야 하는 부담을 줄일 수 있다.
• Fable 5의 무료 또는 포함 사용 기간이 제한되어 있다는 전제가 깔려 있어, 짧은 기간 안에 다양한 웹사이트 콘셉트와 프롬프트 팩을 실험하는 것이 중요하게 제시된다.
• 검증 필요: 제공된 section-detail 기준으로는 13:48 이후부터 영상 종료 시점인 15:18까지의 세부 결론·마무리 발언이 포함되어 있지 않으므로, 해당 구간의 정확한 논지는 원문 transcript 추가 확인이 필요하다.

🕒 시간순 섹션별 상세정리

1. 한 번의 프롬프트로 만든 웹사이트 결과와 전체 작업 목표

• 시계 브랜드와 포트폴리오 웹사이트 예시는 한 번의 프롬프트만으로도 고급스러운 비주얼, 스크롤 효과, 완성도 높은 레이아웃까지 구현될 수 있음을 보여준다 [00:06]
• Claude Fable 5는 웹사이트 제작 성능이 강하게 부각되며, 테스트 결과를 바탕으로 단계별 제작 방식과 복사해 쓸 수 있는 원프롬프트 웹사이트 팩이 제공된다고 드러난다 [00:24]
• Claude Code 새 세션에서 Fable 5를 선택하고 effort level은 extra와 max 사이로 두며, 높은 지능 설정은 더 많은 토큰을 쓰지만 결과 품질을 높이는 방향으로 작동한다고 묶인다 [01:20]
• 3D 스크롤 효과가 들어간 시계 브랜드 사이트는 가상의 브랜드를 바탕으로 만들어졌고, 스크롤 중 다른 프레임과 시각 요소가 이어지면서 실제 제품 사이트 같은 경험을 만든다 [01:52]

2. Higsfield MCP 연결과 인증 절차

• Claude Code의 connectors 메뉴에서 custom connector를 추가하면 Higsfield MCP를 Claude Code에 붙일 수 있고, 이를 통해 Kling, Kance 2.0, Veo 계열 모델 같은 생성 도구를 호출할 수 있다고 보여준다 [03:12]
• Higsfield 연결 URL은 별도 링크의 MCP 탭에서 복사하며, Claude용 연결 화면에서 URL을 가져와 custom connector의 remote MCP server URL 칸에 붙여 넣는 방식으로 설정한다 [03:58]

3. 레퍼런스 사이트 활용과 원프롬프트 예시

• 제작할 웹사이트 방향이 포트폴리오, 제품, 이커머스 중 무엇인지에 따라 awards.com 같은 사이트에서 수상작 레퍼런스를 찾고 시각적 방향을 잡을 수 있다 [05:36]
• Serotonin 예시는 패션 또는 이커머스 성격의 사이트로 확인되며, 비슷한 구조를 만들고 싶을 때 Claude Code에 참고 URL을 넣어 유사한 웹사이트를 만들 수 있다고 제안한다 [06:08]

4. Abyssal 프롬프트 실행과 Fable 5 활용 사례

• 새 Claude Code 세션에서 Higsfield 연결을 다시 확인한 뒤, 프롬프트 팩에서 가져온 큰 프롬프트를 붙여 Abyssal이라는 가상의 심해 탐사 회사 웹사이트를 만든다 [07:24]
• Abyssal 설정은 매년 민간인 8명을 Ariebas라는 잠수정에 태워 해저로 보내는 fictional 콘셉트이며, Kance 2.0과 Higsfield MCP로 모든 비주얼을 생성하도록 지정한다 [07:41]

5. 생성된 Abyssal 사이트의 스크롤 결과와 제품형 디테일

• Abyssal 사이트는 localhost 4890에서 실행되고, 첫 화면의 “How deep will you go?” 문구와 함께 심해 탐사 브랜드처럼 작동하는 스크롤 경험을 시작한다 [10:22]
• 스크롤을 내리면 수중 차량, 200m에서 햇빛의 99%가 사라진다는 문구, 오른쪽의 작은 스크롤 애니메이션이 결합되어 심해로 내려가는 진행감이 만들어진다 [10:36]

6. MCP 연동으로 3D 시네마틱 웹사이트를 만들고 서비스화한다

• Claude Fable 5는 3D 스크롤 웹사이트와 애니메이션을 만들 때 Cance 2.0 같은 영상 생성 모델과 Nano Banana Pro, GP22 Image 같은 이미지 모델에 접근할 수 있다고 드러난다 [12:03]
• MCP 안에 영상·이미지 모델이 들어 있어 Fable 5가 필요한 지식과 제작 흐름을 구성하고, Hicksfield를 호출해 클립을 만든 뒤 시네마틱 웹사이트로 렌더링하는 흐름이 드러난다 [12:23]

7. 개인 사진과 프롬프트로 포트폴리오를 생성하고 반복 편집한다

• 개인 포트폴리오 예시는 이름, 레퍼런스 사이트 스타일, 굵은 타이포그래피, 시네마틱 스크롤 비주얼, Hicksfield MCP의 Cense 2.0 모델 사용 지시를 포함한 프롬프트에서 시작된다 [13:20]
• 입력 이미지는 본인 사진 한 장뿐이며, 이후 웹사이트에 들어가는 이미지와 영상은 Hicksfield를 통해 AI가 생성한다고 보여준다 [13:48]
• 검증 필요: 제공된 section-detail에는 13:48 이후 구간의 상세 내용이 없어, 영상 전체 길이 15:18 기준 후반부 마무리 논지와 최종 결론은 원문 transcript 확인 없이는 단정할 수 없다 [14:03]

8. 프롬프트 팩을 복사해 개인 포트폴리오를 만들고 수정한다

• 결과물은 수작업 없이 한 프롬프트로 생성된 AI 제작물이라고 보여준다 [14:06]
• 프롬프트 팩에서 개인 포트폴리오용 프롬프트를 확인하고 복사해 사용할 수 있다고 안내한다 [14:21]
• 프롬프트의 이름 부분만 본인 이름으로 바꾸면 비슷한 사이트를 만들 수 있다고 드러낸다 [14:32]
• 마음에 들지 않는 부분은 Claude와 Fable에 다시 요청해 기존 웹사이트를 편집할 수 있다고 강조한다 [14:42]

9. 질문·프롬프트·커뮤니티 안내로 영상을 마무리한다

• 제품 관련 사이트나 재미용 프로젝트도 Claude와 왕복하며 계속 바꿔볼 수 있다고 덧붙인다 [14:51]
• 도움이 되었기를 바란다며 질문이 있으면 댓글에 남기면 답하겠다고 드러낸다 [14:58]
• 프롬프트 접근 권한이 있으며, 수익화나 Claude·Claude Code 학습에 관심이 있으면 설명란의 커뮤니티 링크를 확인하라고 안내한다 [15:08]
• 커뮤니티에서 보길 바라며, 아니면 시청에 감사하고 다음 영상에서 보겠다고 마무리한다 [15:12]

🧾 결론

• 이 영상은 Claude Fable 5를 단순한 코드 작성 도구가 아니라, 시각 콘셉트·이미지 생성·영상 프레임·웹 구현을 묶어 빠르게 결과물로 만드는 웹사이트 제작 흐름으로 제시한다.
• 가장 중요한 전제는 “좋은 프롬프트 + 적절한 레퍼런스 + MCP 기반 생성 모델 연결”이다. 특히 3D 스크롤형 웹사이트는 비주얼 품질이 완성도를 크게 좌우하므로 외부 이미지·영상 모델의 역할이 크다.
• Higsfield MCP 연동은 여러 생성 도구를 오가며 수동으로 작업하던 과정을 줄여주지만, 계정 인증과 충전이 필요하고 외부 모델 사용 비용이 발생한다는 점도 함께 고려해야 한다.
• 영상에서 소개된 Fable 5의 포함 사용 기간과 이후 사용량 제한 가능성은 발표 시점 기준 설명이므로, 실제 사용 전에는 현재 요금제와 제공 조건을 별도로 확인필요가 있다.
• 결과물은 로컬호스트에서 실행되는 데모로 제시되지만, 영상에서는 커스텀 도메인 게시와 클라이언트용 사이트 확장 가능성까지 언급한다.

📈 투자·시사 포인트

• 웹 제작 서비스 관점에서는 포트폴리오, 제품형 랜딩페이지, 이커머스 스타일 사이트의 초안 제작 시간이 크게 줄어들 수 있어, 소규모 AI 웹 제작 서비스나 에이전시형 업무에 활용 여지가 있다.
• 차별화 포인트는 단순한 페이지 생성이 아니라 시네마틱 스크롤, 3D 느낌, 제품 데모형 스토리텔링을 얼마나 설득력 있게 구성하느냐에 있다. 따라서 프롬프트 설계와 레퍼런스 큐레이션 능력이 중요해진다.
• 개인 창작자나 프리랜서에게는 본인 사진과 간단한 설명만으로 고급 포트폴리오 시안을 빠르게 만들 수 있다는 점이 강점이다. 다만 최종 상용 배포 전에는 성능, 반응형, 저작권, 모델 생성물 사용 조건을 확인해야 한다.
• 외부 MCP와 생성 모델에 의존하는 방식은 제작 속도를 높이지만, 비용 구조와 서비스 안정성에 영향을 받는다. 지속적으로 판매 가능한 서비스로 만들려면 모델 사용료와 수정·배포·유지보수 비용을 함께 계산해야 한다.
• 검증이 필요한 부분은 “$10K Website”라는 가치 표현이다. 영상은 고급 웹사이트 제작 가능성을 보여주지만, 실제로 1만 달러 수준의 시장 가치가 보장된다고 단정하려면 고객 지불 사례나 실제 판매 데이터가 별도로 필요하다.

⚠️ 불확실하거나 확인이 필요한 부분

• 영상 내 표기·발음 기준으로 정리된 “Claude Fable 5”, “Higsfield/Hicksfield”, “Kance/Cance/Cense 2.0”, “GP22 Image” 등 모델명과 서비스명은 실제 공식 명칭과 다를 수 있어 확인이 필요하다.
• “7월 7일까지 포함 사용 가능”, “이후 더 비싸지거나 사용량 기반 제한으로 바뀔 수 있음”은 영상 속 설명에 기반한 내용이며, 실제 요금제·제공 기간·사용량 제한은 Claude 및 관련 서비스의 공식 공지로 검증해야 한다.
• 제목의 “$10K Website”는 결과물의 시장 가치나 판매 가능성을 강조하는 표현으로 보이며, 실제로 1만 달러 수준의 웹사이트와 동일한 품질·납품 범위·상업적 가치를 보장한다고 단정할 수 없다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 영상에서 언급된 서비스·모델명과 공식 링크를 다시 확인해 “Fable 5”, “Higsfield”, “Kance 2.0” 등의 정확한 명칭을 정리한다.
• Claude Code에서 custom connector 추가, Higsfield MCP URL 입력, 인증, 토글 활성화까지 실제 연결 절차를 재현해 봅니다.
• 외부 이미지·영상 생성 모델 사용 시 필요한 크레딧, 과금 방식, 1개 웹사이트 제작당 예상 비용을 테스트 단위로 기록한다.
• 포트폴리오, 제품형 랜딩페이지, 이커머스 중 하나를 골라 짧은 원프롬프트 프로토타입을 만들고 생성 시간·수정 횟수·결과 품질을 비교한다.

❓ 열린 질문

• 실제 공식 제품명은 “Claude Fable 5”가 맞는지, 또는 영상 자막·발음에서 비롯된 다른 모델명인지 확인이 필요하다.
• Higsfield MCP가 호출하는 영상·이미지 모델들의 상업적 사용권과 결과물 소유권은 어떤 조건을 따르나요?
• “한 번의 프롬프트”에 포함되지 않은 사전 준비 작업, 수동 수정, 실패 재시도, 로컬 환경 설정은 어느 정도였나요?