Fable 5.1 FINALLY Kills AI Website Slop

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Fable 5.1로 천편일률적인 AI 웹사이트를 벗어나는 핵심은 모델 교체보다 구체적인 디자인 참고자료, 레이어·스크롤 연출, 모바일 검증을 결합하는 데 있다.

📌 핵심 요점

1. 고급스러운 인상은 구체적인 시각 요소에서 나온다. 발표자는 배경과 전경의 분리, 스크롤에 반응하는 텍스트, 겹쳐지는 카드, 절제된 인터랙션을 사례로 제시한다.
2. ‘전문적으로 만들어줘’라는 요청만으로는 부족하다. 참고 사이트에서 좋아하는 요소와 이유를 설명하고, 21st.dev 등의 컴포넌트와 ScrollCraft 스킬을 함께 제공하는 방식이 소개된다.
3. 디자인의 출발점은 브랜드와 사업의 목적이다. 로고·색상 등 브랜드 지침과 함께 해결할 문제인 pain, 대상 고객인 person, 해결 약속인 promise라는 세 가지 P를 명확히 해야 한다.
4. 한 번의 프롬프트로 만든 결과물은 검증과 수정의 출발점이다. 모바일에서 카드가 다르게 움직이거나 로고가 부정확하고 화면 전환이 끊기는 사례가 있어, 스크롤 구간별 스크린샷 확인이 강조된다.
5. 같은 조건에서 Fable 5와 5.1의 디자인 차이는 크지 않았다는 것이 발표자의 평가다. 5.1의 장점은 제시된 실험에서 비용이 낮았고, 체감 속도와 사용 한도 소모가 개선됐다는 쪽에 가깝다.

🧩 배경과 문제 정의

영상은 AI로 만든 웹사이트가 비슷하고 밋밋하게 보이는 문제를 다룬다. 발표자는 AI Automation Society, 개인 사이트, 음성 입력 서비스 사이트와 추가 실험 결과를 보여주며, 구체적인 참고자료와 스크롤·레이어 연출이 디자인에 어떤 차이를 만드는지 설명한다.

문제의 초점은 ‘어떤 모델을 쓰는가’에서 ‘무엇을 입력하고 어떻게 검증하는가’로 이동한다. 발표자는 브랜드 지침, 고객과 문제의 정의, 스크롤 반응, 디자인 참고자료, 기존 컴포넌트, 모바일 대응, 검증을 주요 원칙으로 정리하고, 마지막에는 Fable 5와 5.1의 결과 및 비용을 비교한다.

🕒 시간순 섹션별 상세정리

1. AI Automation Society 사이트의 레이어와 모바일 시연

• 산과 나무, 노트북이 서로 다른 레이어로 움직이며 깊이감을 만들고, 텍스트 등장과 카드 쌓기, FAQ 전환, 마지막 행동 유도 영역까지 동적인 구성을 이어간다. [00:55]
• 휴대전화에서도 노트북과 배경 레이어 효과를 보여준다. 다만 섹션 탐색 방식과 카드 쌓기는 데스크톱과 다르며, 발표자는 모바일에서도 고급스러운 인상이 유지된다고 평가한다. [01:29]

2. 개인 사이트의 절제된 인터랙션

• 숫자 증가, 배경 애니메이션, 마우스에 반응하는 요소를 보여주며, 시선을 과도하게 빼앗지 않으면서 깊이를 더하는 점을 강조한다. [02:01]
• 소개 페이지, 사진 모음, 책 Becoming AI Native, 유튜브 영상과 커뮤니티 연결을 배치한다. 스크롤 내내 유지되는 내비게이션도 선호하는 요소로 언급한다. [02:39]

3. Glydo 사이트에서 제품 사용감을 보여주는 애니메이션

• 음성 입력 막대와 문장 정리 과정을 시연하고, Slack·Cursor·Gmail·터미널 등에서 제품을 사용하는 모습을 애니메이션으로 표현한다. [03:28]
• 여러 앱으로 연결되는 시각 효과를 높게 평가하면서도 일부 로고가 부정확하다고 인정한다. 이후 이런 결과물을 AI 특유의 획일적인 디자인 없이 만드는 방법으로 화제를 옮긴다. [03:53]

4. 추상적인 주문을 구체적인 참고 요소로 바꾸기

• 발표자는 ‘전문적으로’, ‘고급스럽게’라는 지시만으로는 부족하다고 보여준다. Fora에서 영감을 받아 뒤쪽 산, 중간 산, 노트북 화면, 앞쪽 나무라는 네 레이어와 카드 쌓기 효과를 구체적으로 요청했다. [05:08]
• 개인 사이트는 21st.dev의 컴포넌트에서 출발했다. 배경·그라데이션·인터랙션을 선택한 뒤 텍스트 등장과 가로 스크롤 등을 지시하고, 관련 원칙을 담은 ScrollCraft 스킬을 사용했다고 보여준다. [06:18]

5. 경쟁 사이트와 디자인 자료를 활용하는 방식

• 음성 입력 서비스 사례에서는 Lemon의 제품 체험형 애니메이션을 참고하고 자사 브랜드 지침을 적용하도록 요청했다. 발표자 스스로 이 사례는 직접적인 복제에 가까웠다고 표현한다. [06:58]
• 서로 다른 두 사이트를 만들도록 요청하면서 AIS 사례, 21st.dev, godly 계열 사이트를 참고하게 했다. 이어 Awards와 Motion Sites를 소개하며 업종·고객에 맞는 분위기와 개별 디자인 요소를 찾는 방법을 보여준다. [08:28]

6. Ferna 단일 프롬프트 결과

• 두 사이트 제작 요청에는 레이어와 참고 컴포넌트를 활용하고, 필요한 에셋을 생성하되 절제된 고급스러움을 구현하라는 조건을 담았다. [08:55]
• Ferna는 식물 이미지와 배경을 여러 평면으로 나누고, 텍스트 등장·카드 쌓기·스크롤에 따라 식물이 자라는 영상·마지막 조명 효과를 결합한다. 발표자는 이를 ScrollCraft를 활용한 단일 프롬프트 결과로 보여준다. [09:44]

7. low-key 키보드 사이트와 남아 있는 오류

• 키 입력처럼 보이는 애니메이션과 배경·키보드의 레이어 이동을 보여준다. 중간의 급격한 화면 전환은 마음에 들지 않는 부분으로 지적하며 반복 검증과 수정이 필요하다고 보여준다. [10:14]
• 키보드가 분해돼 내부를 보여주고 색상을 선택하는 연출이 계속된다. 발표자는 두 결과물을 후속 작업을 시작하기에 좋은 기반으로 평가한다. [10:40]

8. 브랜드와 고객 목적에 맞는 스크롤 반응

• 브랜드 지침으로 로고·색상 등의 일관성을 확보하고, pain·person·promise로 해결할 문제와 고객, 제품의 약속을 정의해야 한다고 제안한다. [11:21]
• 방문자가 스크롤을 통해 화면을 제어한다는 피드백이 중요하다고 보여준다. 과도한 3D 이동을 싫어하는 반응도 인정하며, 사업과 고객에 따라 미세한 텍스트 등장 정도가 적합할 수 있다고 드러낸다. [12:09]

9. 참고자료·컴포넌트·모바일·검증의 결합

• 레이어, 가격 영역, 마우스에 반응하는 배경 등 원하는 요소를 참고자료로 제공하고, 버튼·테두리·FAQ·텍스트 같은 기존 컴포넌트도 활용하라고 권한다. [13:10]
• 모바일에서 보기 좋은지 확인하고, 스크롤 과정의 스크린샷을 연속적으로 점검하라고 강조한다. 화면 밖으로 벗어난 요소나 잘못된 색상 등을 찾아 고치는 검증 반복을 핵심 과정으로 제시한다. [13:46]

10. 모델 비교와 비용 효율에 대한 최종 평가

• 같은 프롬프트·에셋·브랜드 지침·ScrollCraft를 사용한 Fable 5와 5.1 결과는 비슷했다고 평가한다. 제시한 네 비용 비교에서는 모두 5.1이 낮았지만, 디자인에서는 어느 한쪽이 뚜렷하게 압도하지 않았다고 드러낸다. [14:50]
• 발표자는 토큰 효율 개선에 관한 출시 블로그 설명과 자신의 사용 한도 경험을 연결한다. 여러 시간 작업 후 주간 한도의 약 45%를 사용했다는 경험은 이전 모델 사용 당시와의 개인적인 비교다. [15:45]
• 최종적으로 Fable 5.1이 조금 더 빠르고 저렴하게 느껴진다고 정리한다. 계속 업데이트하는 ScrollCraft 스킬을 무료 커뮤니티에서 제공한다고 안내하며 영상을 마친다. [16:12]

🧾 결론

• 제목의 강한 표현과 달리, 영상은 Fable 5.1만 사용하면 AI 특유의 획일적인 디자인이 사라진다고 입증하지 않는다. 발표자는 일곱 가지 제작·검증 원칙이 모델 선택보다 중요하다고 정리한다.
• 좋은 참고자료를 제공하려면 사이트 전체의 분위기뿐 아니라 레이어 구성, 카드 움직임, 배경 반응처럼 재현할 요소를 구체적으로 설명해야 한다.
• 스크롤 효과는 방문자의 조작에 반응한다는 느낌을 주는 수단이다. 사업과 고객에 따라 미세한 텍스트 등장만으로도 충분할 수 있다.
• 모바일 확인과 시각적 검증을 거쳐야 초기 결과물의 오류를 찾아 수정할 수 있다. 영상 속 단일 프롬프트 결과에도 보완할 부분이 남아 있다.

📈 투자·시사 포인트

• AI 웹 제작에서 실무적으로 중요한 역량은 참고자료 선정, 브랜드 정의, 컴포넌트 조합, 결과 검증이다. 영상의 사례는 이러한 입력과 작업 방식이 결과물의 차별화에 기여할 수 있음을 보여준다.
• 모델 도입 판단에는 완성 화면의 인상과 함께 작업 비용·속도·사용 한도를 살펴볼 필요가 있다. 발표자의 비교에서는 디자인 차이보다 비용 차이가 더 눈에 띄었다.
• 업종과 고객에 맞는 디자인이 전환에 유리할 수 있다는 의견이 제시되지만, 실제 전환율이나 매출 변화는 공개되지 않는다. 시각적 완성도를 사업 성과와 동일하게 해석할 근거는 부족하다.
• 이 영상은 특정 기업의 투자 매력보다 AI를 활용한 웹 제작 방식과 비용 효율을 검토하는 자료로 활용하기에 적합하다.

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

• Fable 5.1과 Fable 5 비교는 발표자가 선택한 사례와 주관적 평가에 기반한다. 전체 실험 수, 반복 횟수, 독립적인 디자인 평가 결과는 제시되지 않는다.
• 비용 비교는 전사문에 1824 대 2022, 1452 대 1467, 1283 대 2164, 1118 대 1737로 기록돼 있다. 통화, 단위, 소수점 표기가 불명확하므로 이를 확정된 금액으로 인용하기 어렵다.
• 25% 효율 개선과 최대 45% 비용 절감은 발표자가 출시 블로그를 인용한 설명이다. 원문과 적용 조건은 제공되지 않았으며, 해당 구간에는 모델명을 정정하는 발언도 있다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 제작 요청에 브랜드 로고·색상과 함께 해결할 문제, 대상 고객, 해결 약속을 명시한다.
• 참고 사이트에서 사용할 요소를 골라 레이어 구성, 스크롤 반응, 카드 움직임 등 원하는 동작과 이유를 설명한다.
• 21st.dev 등에서 필요한 컴포넌트를 선정하고, ScrollCraft를 활용한다면 적용하려는 연출 원칙을 함께 정리한다.
• 데스크톱과 모바일에서 스크롤 구간별 스크린샷을 확인하고, 화면 밖으로 벗어나는 요소·부정확한 로고·급격한 전환·색상 불일치를 수정한다.

❓ 열린 질문

• 동일한 조건의 작업을 반복해도 Fable 5.1의 비용과 사용 한도상 이점이 일관되게 나타나는가?
• 어떤 업종과 고객에게 레이어·스크롤 애니메이션이 유용하며, 어디부터는 방해가 되는가?
• 한 번의 프롬프트로 만든 결과물을 실제 공개 가능한 상태로 다듬는 데 얼마나 많은 수정이 필요한가?