Molayo

© 2026 Molayo

Zenn헤드라인2026. 06. 15. 07:51

Claude Fable 5가 출시되어 LP를 제작하게 하여 실력을 시험해 보았다

요약

Anthropic의 신규 모델 Claude Fable 5를 활용하여 자기소개용 랜딩 페이지를 제작한 실험 사례입니다. 모호한 프롬프트만으로도 사이버펑크 스타일의 완성도 높은 HTML/CSS/JS 결과물을 도출하는 과정을 다룹니다.

핵심 포인트

  • Claude Fable 5와 Mythos 5 두 가지 형태로 출시됨
  • 모호한 프롬프트만으로도 높은 수준의 디자인과 코드 생성 가능
  • 사이버펑크 테마의 애니메이션 및 글리치 효과 구현
  • 접근성(prefers-reduced-motion)을 고려한 세심한 코드 작성

서론

Anthropic에서 새로운 모델인 「Claude Fable 5」가 출시되었습니다.

Claude Code의 모델 선택지에도 즉시 등장했습니다.

Claude Codeのモデル選択画面にFable 5が表示されている

"일단 무엇이라도 만들어보자"라는 생각으로, Fable 5 스스로를 소개하는 랜딩 페이지(LP)를 제작하게 해보았습니다. 새로운 모델에게 자기 자신의 홍보 페이지를 만들게 한다는, 약간 메타적인 과제입니다.

결과물은 이렇습니다.

LPのスクリーンショット

이 기사는 그 제작 과정과 직접 사용해 본 소감의 기록입니다.

Claude Fable 5란

공식 발표에 따르면, 이번에는 동일한 기반 모델(Foundation Model)이 두 가지 제공 형태로 출시되었습니다.

  • Fable 5: 일반 사용자에게 널리 제공되는 모델
  • Mythos 5: 액세스가 제한된, 더 높은 능력을 끌어내는 제공 형태

"Mythos 클래스의 지성을 손에 닿는 가격으로"가 셀링 포인트인 듯합니다. 상세한 벤치마크(Benchmark)나 위치 설정은 공식 발표에 맡기고, 본 기사에서는 실제로 사용해 보니 어땠는지에 집중하겠습니다.

제작하게 한 것

과제는 "Fable 5 스스로를 소개하는 LP". 던진 프롬프트(Prompt)는 이것뿐입니다.

다음 페이지를 참조하여, claude fable5의 위치 설정이나 기존 모델과 다른 점,
세일즈 포인트(Sales Point)를 LP로 정리해 주세요. LP는 테크니컬하고 선진적인 이미지로,
Javascript 등을 사용하여 움직임이 있는 것으로 만들어 주세요.
...

요건이라고 할 만한 요건은 "테크니컬하고 선진적", "움직임이 있는 것" 정도의 상당히 모호한 지시입니다.

첫 번째 출력물도 나름대로 볼 만한 수준이었지만, 조금 더 공격적인 디자인을 원했기에 추가로 한 마디만 더 던졌습니다.

무료 이미지를 사용하는 등의 방식을 사용하여, 좀 더 사이버펑크(Cyberpunk) 느낌으로 만들어 주세요.

대화는 실질적으로 이 두 번의 왕복뿐입니다.

나온 결과물

생성된 것은 프레임워크(Framework) 없는 순수 HTML/CSS/JavaScript 구성이었습니다.

fable5-lp/
├── index.html
├── css/
...

내용을 살펴보면, "사이버펑크로 해달라"는 한 마디로부터 다음과 같은 요소들이 포함되어 있었습니다.

  • 디지털 레인(Digital Rain): Canvas로 그린 매트릭스(Matrix)풍의 가타카나 + 16진수 문자가 떨어지는 배경
  • 글리치 애니메이션(Glitch Animation): 제목이 때때로 노이즈로 깨지는 연출
  • 터미널풍 연출: 섹션 제목에 [SYS://BENCHMARK]와 같은 태그를 붙이는 등, 커맨드 라인(Command Line)적인 세계관으로 통일
  • 배색과 폰트: 시안(Cyan) × 마젠타(Magenta) 네온 컬러에, Orbitron + JetBrains Mono 조합

"사이버펑크"라고 하면 연상되는 것들을 한차례, 그것도 통일감 있는 형태로 넣어왔다는 인상입니다.

코드를 읽으며 감탄한 부분

디자인뿐만 아니라 코드의 세부적인 부분까지 배려가 닿아 있었다는 점이 인상적이었습니다.

먼저, prefers-reduced-motion에 대한 대응이 모든 이펙트에 들어가 있습니다.

const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
(function initRain() {
const canvas = document.getElementById("rain-canvas");
...

OS 측에서 "시각 효과 줄이기"를 설정한 사용자에게는 애니메이션을 끄는 배려입니다. 지시하지 않았는데 스스로 들어가 있었습니다.

디지털 레인의 묘사도 프레임 레이트(Frame Rate)를 제한하고 있습니다.

function step(now) {
requestAnimationFrame(step);
if (now - last < 50) return; // ~20fps 정도면 충분
...

배경 연출에 60fps는 필요 없으므로 20fps 정도로 건너뛴다는 주석이 달려 있습니다. 화려한 외관에 비해 부하(Load)에 대한 배려가 있는 점은 호감스러웠습니다.

그 외에도 리사이즈(Resize) 대응, "use strict", IIFE를 통한 스코프(Scope) 분리 등, 대충 쓰려고 마음먹으면 얼마든지 대충 쓸 수 있는 부분들을 제대로 갖추고 있습니다. 순수 JavaScript로 LP를 만들게 하면 프레임워크의 관례에 의존할 수 없는 만큼 실력이 드러나기 쉬운 것 같지만, 안심하고 읽을 수 있는 코드였습니다.

소감

좋았던 점

  • 「사이버펑크 같은 느낌」이라는 모호한 한마디를 배색, 폰트, 이펙트, 카피의 문체까지 일관된 형태로 구현해 주었다
  • 접근성(Accessibility)이나 성능(Performance)에 대한 배려 등, 지시하지 않은 품질이 더해지는 것은 기존 모델들로부터 한 단계 진보했다는 느낌을 준다
  • 실질적으로 2번의 대화(Round-trip) 만에 완성되었으며, 수정 작업을 반복하며 소모되는 에너지가 거의 없었다

気になったところ (아쉬운 점)

  • 출력이 오래 걸립니다. 신중하게 사고(Thinking)한 뒤에 쓰기 시작하기 때문인지, 지시를 던진 후 완성까지의 대기 시간이 체감상 길었습니다. 품질과의 트레이드오프(Trade-off)이긴 합니다
  • 토큰(Token) 소비가 심합니다. 사고 과정에 사용된 토큰도 포함되기 때문에, 사용량(Usage)이 줄어드는 속도가 기존 모델들보다 확실히 빠르다는 인상을 받았습니다
  • LP의 내용은 공식 발표 페이지를 바탕으로 하고 있지만, 수치나 표현이 정확하게 전기되었는지는 직접 검증하지 않았습니다. 실무에서 사용하려면 팩트 체크(Fact check)는 필수입니다
  • 이번에는 LP 한 장이라는 작은 과제였기에, 대규모 코드베이스에서의 실력은 아직 알 수 없습니다

コスト (비용)

LP 구축 후의 사용량(Usage)은 다음과 같습니다. 참고로 제가 사용 중인 것은 20달러의 PRO 플랜입니다.

LP構築後のusage画面。セッションの56%を消費

앞서 언급했듯이 토큰 소비 속도는 빠르지만, LP 한 장을 만드는 정도라면 허용 범위 내였습니다. 일상적으로 헤비하게 사용할 경우에는 플랜의 상한선과 상의가 필요할 것 같습니다.

まとめ (요약)

Fable 5에게 자신의 LP를 만들게 해 보았더니, 모호한 지시 2번만으로 데모를 공개할 수 있는 수준의 결과물이 나왔습니다.

솔직히 이런 종류의 「테스트로 LP 만들기」는 기존 모델들로도 몇 번 해보았지만, 디자인의 스펙트럼과 코드 디테일의 정교함은 확실히 좋아졌다고 느낍니다. 다음에는 조금 더 복잡한 실제 개발 태스크(Task)로 시험해 볼 생각입니다.

Discussion

AI 자동 생성 콘텐츠

본 콘텐츠는 Zenn AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0