Fable 5.1로 'AI 슬랍' 없는 프리미엄 웹사이트 만드는 7원칙

01핵심 개요

AI Automation Society, 본인 사이트, Glydo 등 3개 실사이트를 Fable 5.1 원샷 프롬프트로 시연.
"전문적으로 보이게 해줘" 같은 막연한 지시로는 AI 슬랍이 나오며, 반드시 참고 사이트·컴포넌트 영감이 필요하다고 강조.
실험 데이터로 Fable 5.1이 Fable 5보다 비용이 최대 약 40% 저렴한 사례 다수 확인(예: 1283 vs 2164, 1118 vs 1737).
Anthropic 공식 발표치인 "지식노동 25% 효율, 에이전틱 코딩 최대 45% 저렴"과 실측 결과가 대체로 부합.
저자의 무료 스킬 'ScrollCraft'에 레이어링·스크롤 반응성 등 디자인 원칙이 정리돼 있다고 소개.

모델(Fable 5 vs 5.1) 자체보다 "무엇을 입력하는가"가 결과 품질을 좌우한다는 것이 핵심 논지.
동일 프롬프트·동일 브랜드 가이드라인·동일 스킬(ScrollCraft)로 만든 Fable 5와 5.1 사이트는 시각적으로 큰 차이가 없었다고 직접 비교.
반면 비용 측면에서는 Fable 5.1이 거의 모든 테스트 케이스에서 더 저렴했다고 데이터로 제시.
"AI야, 프리미엄하게 만들어줘"라는 추상적 지시는 실패하며, 구체적 레퍼런스·컴포넌트·브랜드 가이드가 있어야 슬랍을 피할 수 있다는 것이 반복되는 주장.

AI Automation Society 사이트: 스크롤 시 산·나무·노트북 화면이 서로 다른 속도로 움직이는 4겹 레이어링 구조. 클래스룸/라이브콜/이벤트/리더보드 카드가 스크롤에 따라 쌓이는 애니메이션, Free/Plus 커뮤니티+인증 코호트 가격 섹션, FAQ, 유튜브 영상 임베드까지 포함. 모바일에서도 동일한 레이어 효과와 다이나믹 랩톱 화면 재현(카드 스태킹만 데스크톱과 다름).
저자 개인 사이트: 히어로 섹션 숫자 카운트업 애니메이션, 마우스에 반응하는 배경 인터랙션, 클릭 가능한 링크, 저서 'Becoming AI Native' 소개, 사진 몽타주, 로컬 데스크톱에서 자동으로 찾아낸 서명 이미지 삽입, 스크롤 전반에 고정되는 네비게이션 바.
Glydo(받아쓰기 앱) 사이트: 경쟁사 'Lemon'을 벤치마킹해 제작. 딕테이션 바가 Slack·Cursor·Gmail·Claude Code 터미널에 텍스트를 입력하는 애니메이션으로 실제 사용 경험을 시뮬레이션. 워터컬러풍 배경 애니메이션까지 "같은 바이브"로 재현.

Fora: 레이어링 히어로 섹션의 직접적 영감 소스. 백마운틴-미들마운틴-랩톱화면-프론트트리 4겹 구조를 그대로 벤치마킹.
21st.dev: 컨테이너 스크롤, 배경 그라디언트, 인터랙티브 요소 등 컴포넌트별 "Copy Prompt" 기능으로 AI 에이전트에 바로 이식 가능한 사이트.
godly.website(godly.design): 트렌딩 사이트, 히어로 섹션, CTA, 푸터, OG 이미지 등 카테고리별(테크·이커머스·레스토랑·패션) 레퍼런스 제공. 어워드 수상 사이트 모음 코너도 별도 존재.
Motion Sites: 애니메이션 배경 전용 레퍼런스 사이트.
워크플로우: 참고 사이트 지정 → 마음에 드는 요소 설명 → ScrollCraft 스킬 적용 → /goal 프롬프트로 "가장 인상적인 레이어드 사이트 2개를 원샷으로 만들어달라" 지시 → 결과물 Ferna(식물 배송 사이트), Low-key(키보드 사이트) 생성.

AI 웹빌더 시대에도 "프롬프트 엔지니어링"보다 "레퍼런스 큐레이션 능력"이 차별화 요소로 부상.
21st.dev·godly.website 같은 컴포넌트/레퍼런스 라이브러리가 AI 코딩 생태계의 핵심 인프라로 자리잡는 추세를 보여줌.
Fable(Claude 기반 웹빌더) 5.1의 원가 경쟁력이 실측으로 확인되면서, 주간 사용량 한도 내에서 처리 가능한 작업량이 늘어나는 실질적 이점 제시(저자는 5~6시간 작업에 주간 한도의 45%만 소진).

스타트업/1인 창업자가 랜딩페이지를 만들 때 godly.website·21st.dev에서 3~5개 참고 요소를 먼저 수집한 뒤 Fable에 지시.
경쟁사 사이트의 특정 인터랙션(딕테이션 애니메이션 등)을 벤치마킹해 자사 브랜드 가이드라인으로 재구성.
모바일 대응 여부를 스크린샷 기반 프레임 단위 검증 루프로 확인해 배포 전 QA.

Fable 5와 5.1은 같은 프롬프트·자산·스킬 조건에서 시각적 결과물 차이는 미미했으나, 비용은 5.1이 거의 전 구간에서 저렴(예: 1824 vs 2022, 1452 vs 1467, 1283 vs 2164, 1118 vs 1737).
Anthropic이 공개한 "에이전틱 코딩·멀티스텝 작업에서 최대 45% 비용 절감" 수치와 실측 결과가 대체로 일치한다고 저자가 확인.
저자는 Low-key(키보드 사이트)에서 하드컷 전환 등 원샷 프롬프트의 한계도 지적하며, 반복 검증 루프를 추가하면 개선 가능하다고 언급.

AI 슬랍(AI Slop): 레퍼런스 없이 AI에 막연히 지시해 나온, 밋밋하고 획일적인 저품질 웹 결과물.
ScrollCraft: 저자가 만든 무료 스킬로, 레이어링·스크롤 애니메이션·텍스트 등장 효과 등 프리미엄 웹 디자인 원칙을 담음.
3P's(AI 모니터화 준비도 평가): Pain(해결할 문제)-Person(대상 고객)-Promise(문제 해결 약속)로 구성된 저자의 사이트 기획 프레임워크.
레이어링(Layering): 배경·중경·전경 요소를 각기 다른 스크롤 속도로 움직여 입체감을 주는 패럴랙스형 디자인 기법.