Opus vs Fable 디자인 능력 비교
📺 원본 영상: Opus vs Fable 디자인 능력 비교 🎙️ 채널: 코드팩토리 📅 정리 일자: 2026-06-11 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(완성된 웹사이트 디자인, 실제 애니메이션 화면 등)는 포함되지 않을 수 있습니다.
개요
Anthropic의 최신 모델인 Claude Opus와 Fable은 코딩 및 논리 추론 능력으로 주목받았지만, 이번 영상은 두 모델의 디자인 생성 능력에 초점을 맞춘다. 코드팩토리 채널 운영자는 동일한 프롬프트를 사용해 Claude Design과 Claude Code라는 두 가지 접근법으로 각 모델의 결과물을 직접 비교했으며, 그 결과는 예상을 뒤엎는 부분이 적지 않았다.
실험 설계: 동일 조건, 네 가지 결과물
이번 비교 실험의 핵심은 공정한 조건 설정에 있었다. 강연자는 모든 모델에 완전히 동일한 프롬프트를 입력했으며, 서로 다른 폴더에서 독립적으로 작업을 진행했다. 사용된 프롬프트는 다음과 같다.
“웹 디자인 에이전시 랜딩 페이지를 디자인해줘. 웹 사이트만 보더라도 사람들이 의뢰하고 싶을 정도로 화려하게 해야 돼. CTA(Call-to-Action)는 jc-codefactor.ai로 이메일을 보내게 해주고, 모든 결정은 나한테 물어보지 않고 네가 판단해서 스스로 해.”
이 프롬프트는 의도적으로 단순하게 유지되었다. 세부적인 디자인 지침을 배제하고 모델이 얼마나 자율적으로 고품질의 결과물을 만들어낼 수 있는지를 측정하기 위함이었다. 비교 방식은 두 가지 축으로 나뉜다. 첫 번째는 Anthropic이 디자인에 특화하여 최적화한 도구인 Claude Design을 통한 Opus와 Fable의 비교이고, 두 번째는 일반 코딩 에이전트인 Claude Code를 통한 동일한 비교다. 이로써 총 네 개의 결과물(Design+Opus, Design+Fable, Code+Opus, Code+Fable)이 탄생했다.
Claude Design으로 만든 두 결과물
1번 디자인 - Claude Design + Opus
Claude Design에 Opus를 연결해 생성한 첫 번째 결과물은 애니메이션 요소가 풍부하게 포함된 랜딩 페이지였다. 강연자의 설명에 따르면, 에이전시 분위기에 어울리는 폰트 선택과 화려한 시각 요소들이 자연스럽게 조화를 이루었다.
💡 [영상 참조] 강연자는 이 시점에서 마우스 커서를 따라다니는 원형 애니메이션, 호버(Hover) 시 움직이는 이메일 버튼 인터랙션 등을 직접 시연합니다. 📺 원본 영상에서 확인하세요.
01:09 - 1번 디자인(Claude Design + Opus): 에이전시 스타일 애니메이션, 마우스 커서 추종 원형 효과 시연
반응형 대응 측면에서도 합격점을 받았다. iPad Pro 사이즈에서의 레이아웃이 안정적으로 유지되었고, 모바일 환경에서도 전반적으로 만족스러운 수준이었다. 다만 일부 영역에서 텍스트가 겹치는 문제가 발견되었고, 세부 폰트 처리와 내부 레이아웃에서 아쉬운 점이 남았다. 강연자는 이를 “한 방에 만든 거 치고는 꽤나 훌륭하다”고 평가했다.
2번 디자인 - Claude Design + Fable
두 번째 결과물은 Fable이 생성한 것으로, 독자적인 색감 표현이 눈에 띄었다. 프로세스 단계를 1, 2, 3, 4로 시각화한 섹션과 실제 Testimonial(고객 후기) 영역까지 구성되어 있어 랜딩 페이지의 기본 구성 요소를 충실히 갖추었다는 점은 긍정적이었다.
그러나 강연자는 이 결과물에 대해 상대적으로 낮은 평가를 내렸다. 가장 큰 단점은 색상 사용이었는데, “너무 무지개 느낌이 많이 들어갔다”는 표현에서 알 수 있듯 여러 색상이 한꺼번에 사용되어 디자인의 통일감이 다소 부족했다. 여기에 그리드가 어긋난 부분도 발견되었고, iPad 사이즈에서도 그리드 문제가 유지되었다. Opus 결과물과 비교했을 때 QA(품질 검수) 측면에서 완성도가 한 단계 낮다는 평가를 받았다.
02:05 - 2번 디자인(Claude Design + Fable): 무지개 색감의 랜딩 페이지, 그리드 어긋남 문제 확인
Claude Code로 만든 두 결과물
Claude Code는 디자인 전문 도구가 아님에도 불구하고, 이 실험에서 Claude Design보다 오히려 더 인상적인 결과물을 만들어냈다. 이 점이 강연자가 가장 놀라워한 부분이기도 하다.
3번 디자인 - Claude Code + Opus
Claude Code와 Opus의 조합은 페이지 진입 시 로딩 애니메이션부터 시작해 섬세한 인터랙션을 곳곳에 심어두었다. 스크롤 시 요소들이 순차적으로 등장하는 효과, 마우스 호버에 반응하는 3D 입체 효과, 그리고 물리 엔진이 적용된 것 같은 자연스러운 커서 추종 효과가 포함되어 있었다. 강연자는 이 커서 추종 효과에 대해 “물리 엔진이 잘 적용된 것 같은 느낌”이라고 묘사했다.
💡 [영상 참조] 강연자는 이 시점에서 로딩 화면, 스크롤 시 요소 등장 효과, 마우스 움직임에 따른 3D 틸팅 효과를 직접 시연합니다. 📺 원본 영상에서 확인하세요.
03:09 - 3번 디자인(Claude Code + Opus): 스크롤 등장 효과 및 마우스 호버 3D 틸팅 인터랙션 시연
모바일 반응형 완성도도 주목할 만했다. Claude Design 결과물들과 비교해 한국어 텍스트 최적화가 훨씬 잘 되었다는 점이 강점으로 꼽혔다. 하나의 단점으로는 ‘Scroll’ 텍스트가 일부 겹치는 현상이 있었지만, 전반적인 완성도는 높았다. 푸터(Footer)까지 꼼꼼하게 구현된 것도 긍정적인 요소였다.
4번 디자인 - Claude Code + Fable
강연자가 네 개의 결과물 중 개인적으로 가장 마음에 든다고 밝힌 결과물이다. 숫자가 카운트업 되면서 로딩이 진행되는 인트로 애니메이션, 스크롤에 반응하는 화려한 전환 효과, 마우스 호버에 따라 배경까지 함께 움직이는 섬세한 연출이 돋보였다. 강연자는 이 배경 반응 효과에 대해 화면에 보일지 모르겠다면서도 “정말 부드럽게 잘 따라오고 있다”고 강조했다.
04:21 - 4번 디자인(Claude Code + Fable): 숫자 카운트업 로딩 애니메이션 및 화려한 스크롤 전환 효과
흥미로운 점은 3번과 4번이 일부 컴포넌트 구조에서 유사성을 보였다는 것이다. 동일한 프롬프트를 완전히 분리된 환경에서 실행했음에도 비슷한 구현 방식이 나타났는데, 강연자는 이에 대해 명확한 이유를 파악하지는 못했다. 그러나 세부 구현 완성도 면에서 4번이 3번보다 한 단계 더 부드럽다는 평가를 내렸고, Testimonial 섹션까지 자연스럽게 포함되어 있는 완성도 높은 결과물이었다.
핵심 발견: Claude Code의 역전, Fable의 선전
이번 실험에서 강연자가 가장 주목한 결과는 두 가지다.
첫째, Claude Design보다 Claude Code가 더 좋은 디자인 결과물을 냈다. Claude Design은 디자인 작업에 최적화되어 있다고 알려진 도구임에도 불구하고, 간단한 프롬프트 하에서는 범용 코딩 에이전트인 Claude Code의 결과물이 더 인상적이었다. 물론 이 결론은 특정 프롬프트와 특정 시점의 실험에 기반한 것이므로, 일반화에는 주의가 필요하다.
둘째, Fable이 디자인 작업에서도 충분히 경쟁력 있는 모습을 보였다. Fable은 주로 로직 처리 능력으로 평가받는 경향이 있지만, 이번 실험에서는 Claude Code와 결합했을 때 네 결과물 중 가장 높은 완성도의 디자인을 만들어냈다. 강연자는 “로직뿐만 아니라 Fable을 사용해서 디자인 작업을 해보는 것도 A/B 테스트하기에 굉장히 적절하지 않을까”라는 의견을 밝혔다.
토큰 소비량 주의: Ultra Code는 진짜 ‘하마’
실험의 부산물로 중요한 실용적 정보도 제공되었다. 강연자는 월 200달러 플랜을 사용하고 있으며, 해당 비교 실험 전체(Claude Design으로 Opus/Fable 각 1개, Claude Code로 Opus/Fable 각 1개, 총 4개 작업)를 Effort를 MAX로 설정하고 실행했을 때 세션 토큰의 **약 29%**를 소비했다고 밝혔다. Ultra Code 기능은 사용하지 않은 조건에서의 수치다.
06:07 - Claude 200달러 플랜 Current Session 토큰 사용량 29% 화면 - 4개 작업 완료 후 잔여량 표시
Ultra Code에 대해서는 강력한 경고 메시지를 전달했다. 오전에 Fable로 Ultra Code를 사용해 Deep Research 1회와 Ultra Code Workflow 1회를 실행했더니 30분 만에 월간 토큰을 전부 소진했다는 것이다. Ultra Code는 그 능력만큼 토큰 소비도 압도적이므로, 사용 전 반드시 이 점을 감안하고 작업 우선순위를 설정할 것을 권고했다.
마무리 / 핵심 정리
이번 실험은 “어떤 모델이 더 좋은가”라는 단순한 비교를 넘어, 작업 도구 선택이 결과물에 미치는 영향과 각 모델의 예상치 못한 강점을 발견하는 과정이었다. 디자인 특화 도구를 사용하더라도 범용 코딩 에이전트가 특정 조건에서 더 나은 결과를 낼 수 있다는 점, 그리고 Fable이 단순한 로직 처리기를 넘어 창의적 디자인 영역에서도 인상적인 결과물을 만들어낼 수 있다는 사실은 실용적인 시사점을 제공한다.
다만 이 모든 결론은 단일 프롬프트, 단일 시점에서의 실험 결과임을 기억해야 한다. 프롬프트의 복잡도나 상세도가 달라지면 결과 순위도 얼마든지 바뀔 수 있다. 중요한 것은 맹목적인 도구 선택보다, 실제로 A/B 테스트를 통해 자신의 사용 목적에 맞는 최적 조합을 찾아가는 태도다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | Opus vs Fable 디자인 능력 비교 |
| 채널 | 코드팩토리 |
| 리포트 작성 | 2026-06-11 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.