Claude Fable 5 출시 기념: ChatGPT, Cursor, Gemini, Claude 프론트엔드 제작 비교

2026년 6월 10일 오늘 드디어 Anthropic의 Claude Fable 5이 공개되었습니다!

Claude Fable 5는 2026년 6월 9일 공개된 Mythos급 모델의 공개 버전으로, 소프트웨어 엔지니어링과 시각 작업에서 강점을 내세운 모델입니다.

그래서 이번에는 ChatGPT, Cursor, Gemini, Claude 네 가지 대표 AI 도구에 같은 프롬프트를 넣고, 가상의 인테리어 숍 Moadirian 랜딩페이지를 얼마나 그럴듯하게 만드는지 비교해보겠습니다.

Cursor 의 경우 제휴 링크를 통해 50프로 할인으로 사용해볼수있는 기회도 있으니 꼭 끝까지 확인해보시면 좋겠죠?! [ Cursor 50프로 할인 제휴 링크 ]

이 글은 모델 전체 성능 순위가 아니라, 같은 조건에서 한 번씩 만든 프론트엔드 결과물을 디자인 완성도, 속도, 사용량 부담, 실제 운영 사이트 느낌으로 비교한 글 입니다.

비교 조건은 모두 같은 프롬프트로 맞췄습니다

정확히 비교하기 위해 네 도구 모두 같은 요구사항을 사용했습니다.
[ 저는 Chatgpt pro 20x 와 Claude pro , Cursor Pro+를 기존에도 사용중 이었기 때문에 Agents.md와 Skills를 사용하고있었습니다. 따라서 어떤 폴더나 커스텀 스킬 및 agents.md를 읽지 말고 진행해달라고 하여 최대한 모델 기존 능력을 뽑아내고자 프롬프트를 작성했습니다 ]

핵심 조건은 이미지를 새로 생성하지 않고, 실제 운영 중인 사이트처럼 보이는 스타일리시한 랜딩페이지를 만드는 것이었습니다.

그 어떤 폴더나 커스텀 스킬 및 agents.md를 읽지 말고 진행해주세요.
랜딩페이지를 만들어 주세요.
실제 운영중인 사이트처럼 보이는 목업을 만들어주시면 됩니다.
※ 스타일리쉬하고 미적 감각이 돋보이는 사이트로 만듭니다.
※ 이미지는 생성하지 않습니다
가상의 인테리어 숍인 Moadirian 으로 만들어주세요.

테스트 환경은 단순합니다.

각 도구에 같은 문장을 넣고 생성된 HTML 결과물을 함께 확인해보시죠!

도구	실행 설정	이번 비교 미리보기
ChatGPT	GPT-5.5 / 매우 높음 / 표준 속도	페이지 분량은 많았지만 이미지 금지 조건 미이행과 레이아웃 안정성이 아쉬웠고 , 읽기 좋은 웹사이트를 만들지 못했습니다.
Cursor	Composer 2.5 / 표준 속도	사진 없이 그래픽으로 처리하려는 해석이 좋았고 사진 금지 지시사항을 잘 지켰으며 , 헤더와 버튼 디테일이 안정적이었습니다.
Gemini	Gemini 3.5 Flash / High	속도는 가장 좋았고 문구도 자연스러웠지만 섹션 수와 깊이는 가장 얕았습니다.
Claude	Claude Fable 5 / 최대	작업 시간과 사용량 부담은 컸지만, 완성도와 디테일은 가장 좋았습니다.

ChatGPT: 빠르게 페이지를 채웠지만 완성도는 흔들렸습니다

ChatGPT는 GPT-5.5를 매우 높음, 표준 속도로 실행했습니다.

첫인상은 나쁘지 않았습니다.

섹션 수도 충분하고, 쇼룸·컬렉션·저널·푸터까지 실제 랜딩페이지에 들어갈 요소를 빠르게 채워 넣었습니다.

다만 화면을 하나씩 보면 운영 사이트처럼 보이기에는 거슬리는 부분이 꽤 있었습니다.

히어로 화면은 시각적으로 풍성하지만 정신이 조금 산만합니다.

상단 메뉴가 배경과 겹쳐 잘 보이지 않고, 하단 마퀴는 무한 반복처럼 자연스럽게 이어지지 않고 중간에 끊겨서 빈 공간 마퀴가 나타나고 있었습니다 [ 헤더 및 텍스트 애니메이션].

프론트엔드 결과물에서 마퀴는 작은 장식처럼 보이지만, 실제 사이트에서는 이런 반복 애니메이션의 끊김이 바로 디테일적에서 미완성으로 보이기 때문에 정말 실망했습니다.

가장 큰 문제는 이미지 조건이었습니다.

프롬프트에서 이미지는 생성하지 말라고 했지만, 결과물에는 외부 사진처럼 보이는 이미지가 여러 장 들어갔습니다.

이미지 출처를 추적할 수 없어서 실제 운영 사이트에선 그대로 쓰기 어렵고, 이번 비교 기준에서도 감점 요인이 크다고 생각합니다.

또한 서비스 섹션은 컨테이너와 문구 사이 간격이 좁아 답답하게 보였습니다

각 항목의 번호, 제목, 설명이 들어간 구조 자체는 맞지만, 여백과 줄 간격이 충분히 정리되지 않아 전체적으로 미완성된 사이트처럼 느껴졌습니다.

저널 섹션의 텍스트 배치는 특히 아쉬웠습니다.

큰 타이포그래피를 쓰려는 의도는 보이지만, 문장 줄바꿈과 카드 배치가 조화롭지 않아 미완성 디자인처럼 보입니다.

ChatGPT 결과는 빠르게 많은 섹션을 만드는 데는 강했지만, 프론트엔드 디자인의 마지막 20%를 잡아주는 능력은 이번 결과에서 약하게 보였습니다. 5.6.. 진짜 프론트 기대하고 있으니 제대로 나와주어야 한다..

Cursor: 조건 해석과 기본 레이아웃이 가장 안정적이었습니다

Cursor는 Composer 2.5를 표준 속도로 실행했습니다.

Cursor 결과는 프롬프트의 이미지 금지 조건을 비교적 정확하게 해석했습니다.

사진을 넣는 대신 단색 면, 추상 그래픽, 카드형 오브젝트를 사용해 인테리어 숍 분위기를 만들었습니다.

헤더와 히어로의 첫인상은 네 도구 중 상위권이었습니다.

로고, 메뉴, 상담 예약 버튼, 큰 한글 타이포그래피가 안정적으로 배치됐고, Moadirian이라는 브랜드가 첫 화면에서 바로 보입니다.

특히 한글 헤딩을 크게 쓰면서도 글자가 화면을 밀어내지 않게 잡은 점이 좋았습니다.

컬렉션 섹션은 사진을 넣지 말라는 조건을 의식한 결과로 보입니다.

실제 가구 사진 대신 색 면과 간단한 그래픽으로 카테고리를 표현했고, 이 선택은 테스트 조건에는 잘 맞습니다.

다만 Claude 처럼 간단한 그래픽도 넣지는 않았기에 아쉬우면서도.. 지시사항은 잘 따라주었다는것에 만족했습니다.

버튼과 마퀴 디테일도 준수했습니다.

주요 버튼은 색 대비와 화살표 아이콘이 분명하고, 하단 마퀴도 ChatGPT보다 훨씬 자연스럽게 끊기지 않고 애니메이션이 이행되며 완성적인 모습을 보여주었습니다.

서비스 카드 섹션은 숫자, 제목, 설명이 한눈에 들어오도록 정리됐습니다.

과한 장식 없이 정보 구조가 보이고, 부분 스타일링부터 풀 리노베이션까지 서비스 범위도 실제 업체 페이지처럼 설득력 있게 들어갔습니다.

Cursor 결과는 Claude처럼 압도적으로 섬세하진 않았지만, 지시사항을 잘 따라주면서 준수한 프론트엔드 디자인을 보여주어 만족했습니다.
- 폰트를 Claude처럼 세련된 스타일로 써주는것이 기존에도 마음에 들었었는데 이번에도 역시나 좋았습니다.

Gemini: 가장 빠르고 깔끔하지만 깊이는 얕았습니다

Gemini는 Gemini 3.5 Flash High로 실행했습니다.

속도만 보면 Gemini가 가장 인상적이었습니다.

Flash 모델답게 결과가 빠르게 나왔고, 첫 화면의 문구와 전체 톤도 생각보다 자연스러웠습니다.

한국어 자연스러움은 Claude와 대등하거나 높다고 느껴질 정도로 이번 결과 중 제일 마음에 들었습니다.

Forms that speak, Spaces that breathe라는 영문 헤딩과 밑의 한국어 설명이 서로 충돌하지 않았습니다. 오른쪽 추상 그래픽은 뭔가 아쉬웠습니다. 뭘 표현하고 싶은건지 모르겠습니다..ㅋㅋ

색상은 한 가지 톤으로만 밀지 않고 그린, 크림 계열을 섞어 인테리어 브랜드 느낌을 만들었습니다.

반면 전체 구성은 가장 얕았습니다.

상단 헤더와 주요 섹션은 깔끔하지만, Flash 모델이라 그런지 섹션 수가 적고 실제 운영 사이트처럼 볼 만한 정보가 충분히 쌓이진 않았습니다.

짧은 랜딩 초안이나 빠른 방향 확인에는 좋지만, 바로 납품 가능한 수준의 페이지를 기대하면 조금 비어 보일 수 있습니다.
프롬프트로 어느정도 상쇄는 가능한 부분이나 이번 프롬프트 중 Flash 모델 특성 상 가장 적은 분량의 섹션을 보여주었습니다 - 3.5 Pro 가 나오면 더 나아질거라는 기대를 해봅니다.

애니메이션과 제품 카드의 움직임은 깔끔했습니다.

과한 효과 없이 제품 섹션이 부드럽게 보이고, 가격과 카테고리 정보도 크게 무너지지 않았습니다.

Gemini는 빠른 제작용으로는 좋지만, 프론트엔드 디테일과 페이지 깊이에서는 Cursor와 Claude에 밀리는 결과라고 느껴졌습니다.

Claude: 느리고 비싸지만 프론트엔드 감각은 가장 좋았습니다

Claude는 오늘 나온 따끈따끈한 모델인 Claude Fable 5를 최대 설정으로 실행했습니다.

이번 테스트에서 Claude는 가장 오래 걸렸습니다.

작업 시간은 약 10분 정도가 걸렸고, 사용량 소모도 다른 도구보다 부담이 컸습니다.
Pro 기준 5시간 세션 30프로 소모..

하지만 결과물을 보면 왜 오래 생각했는지 납득되는 부분이 많았습니다.

가장 놀라웠던 부분은 아주 작은 상호작용 디테일이었습니다.

텍스트를 마우스로 드래그해 선택했을 때 기본 파란색이 아니라 사이트 톤에 맞는 주황색 선택 색상이 적용됐습니다.

이런 디테일은 사용자가 의식하지 않아도 전체 완성도를 높여주는 요소입니다.

카테고리 버튼도 단순한 링크가 아니라 상태 표현이 살아 있었습니다.

비활성 상태와 활성 상태의 대비, 동그란 화살표 버튼, 넓은 행 단위 레이아웃이 모두 같은 브랜드 톤 안에서 움직입니다.

Cursor도 버튼을 잘 만들었지만, Claude는 버튼 하나를 페이지 전체 디자인 시스템의 일부로 다루는 느낌이 더 강했습니다.

제품 카드에서는 차이가 더 분명했습니다.

BEST, NEW, SALE 배지, 하트 아이콘, 장바구니 버튼, 가격, 할인 전 가격, 평점, 리뷰 수까지 실제 쇼핑몰에서 기대하는 요소가 촘촘하게 들어갔습니다.

사진을 쓰지 않고도 제품이 실제로 판매되는 화면처럼 느껴져서 정말 디테일 하나는 대단하게 깎는구나 라고 느꼈습니다.

Claude 결과는 이번 비교에서 가장 느렸지만, 프론트엔드 화면을 다듬는 감각은 가장 뛰어났습니다.

아래부터는 제 개인적인 순위이며 , 프롬프트나 환경 , 스킬에 따라 다르게 나올수있습니다. 감안하고 봐주시면 감사하겠습니다.

디자인 순위: Claude - Cursor - Gemini - ChatGPT

디자인만 보면 Claude가 1위였습니다.

Claude는 큰 레이아웃뿐 아니라 버튼 상태, 텍스트 선택 색상, 제품 카드의 세부 정보, 마이크로 인터랙션까지 한 화면 안에서 일관되게 처리했습니다.

Cursor는 조건 해석과 기본 레이아웃 , 텍스트 선정 및 전체적인 디자인 구성이 좋아 2위로 볼 만했습니다.

Gemini는 깔끔하고 빠른 결과를 냈지만 섹션 깊이가 부족했고, ChatGPT는 분량은 많았지만 이미지 조건 위반과 레이아웃 불안정이 컸습니다.

속도 순위: Gemini = Cursor - ChatGPT - Claude

속도는 Gemini와 Cursor가 가장 빨랐습니다.
- Gemini가 더 빠른 감은 있었지만 비슷했습니다. 둘 다 약 2분 내외 소요.

ChatGPT는 표준 속도 기준으로 무난했습니다 - 약 4분 소요

Claude Fable 5는 가장 오래 걸렸습니다.

이번 테스트에서는 약 10분 정도 걸렸고, 결과 품질은 좋았지만 빠른 반복 작업에는 부담이 있습니다.

사용량 소모 순위: Cursor = ChatGPT - Gemini - Claude

사용량 부담은 Cursor와 ChatGPT가 가장 좋았습니다.

Gemini는 Flash가 최신 모델인지라 인풋 아웃풋 토큰이 비싸서 결과물 대비 조금은 비싸게 느껴졌고 , 결과의 깊이가 얕았기에 가성비가 떨어진다 생각합니다.

Claude Fable 5는 결과가 좋았지만 사용량 측면에서는 부담이 컸습니다. Pro 멤버쉽이라 사실 많은 사용량을 받지 않는것을 알고있었지만 정적 페이지 하나 만드는 데 5시간 사용량중 30프로를 사용했습니다.

Claude Fable는 짧은 초안 여러 개를 빠르게 뽑는 작업에는 아깝고, 최종 후보를 한 번 제대로 만들 때 쓰는 쪽이 더 현실적이라고 느껴집니다.

물론 랜딩 페이지나 비교적 가벼운 업무만 수행한다면 나쁘지 않지만 좀만 딥하게 들어가면 무조건 max 요금제로 가야 될거같습니다..

Cursor 에서 멤버쉽을 가입하면 주는 Composer랑은 별개인 API 전용 비용이 있어서

Claude Fable 5 를 Cursor에서도 사용해봤습니다.

• 진짜 간단한 질문에 4%가 까이는.. 살벌한 가격.. Claude 공홈에서 fable 사라져도 api로는 쓰기엔 애매하지 않을까..? 너무 비싸다..

어떤 도구를 쓰면 좋을까?

프론트엔드 결과물을 가장 완성도 높게 만들고 싶다면 Claude가 가장 강했습니다.

특히 랜딩페이지, 쇼핑몰형 목업, 브랜드 사이트처럼 시각적 완성도가 중요한 작업에서는 Claude의 디테일이 확실히 돋보입니다.

작업 속도와 안정적인 코드 생성 , 그리고 가성비 + 모든 모델 접근은 Cursor가 좋습니다.

[Cursor의 경우 60$짜리 Pro+ 요금제를 가입하면 70$짜리 API 비용을 주는데 , 사실 저는 현재 GPT PRO 20X 랑 Claude Pro 요금제가 끝나면 Cursor 200$ 요금제로 정착할까도 생각하고있습니다.]

[기존엔 Composer가 별로였어서 안썼는데 , 최신 모델인 2.5 Composer가 Opus 만큼이나 좋다고 느껴지고 , Composer 사용량과 API 비용은 별개라서 가성비가 너무 좋음..]

이미지 금지 같은 조건을 비교적 잘 지키고, 결과물도 사이트 톤을 잘 지키며 만들어주었습니다.

가장 빠르게 초안만 만들어보고 싶다면 Gemini가 편합니다.

다만 섹션 깊이와 세부 상태까지 필요한 작업이라면 이후 보강이 필요합니다.

ChatGPT는 범용 작업에는 여전히 편하지만, 이번 프론트엔드 비교에서는 조건 준수와 레이아웃 마감에서 아쉬움이 컸습니다.

후기: Claude는 프론트엔드를 기가 막히게 만듭니다

직접 4개의 결과물을 놓고 보니 Claude는 프론트엔드 화면을 만드는 감각이 확실히 좋았습니다.

단순히 예쁜 색을 고르는 수준이 아니라, 버튼 상태와 제품 카드 정보, 텍스트 선택 색상처럼 실제 사용자가 느낄 사소한 디테일 까지 챙깁니다.

그럼에도 Claude의 사용량은 너무나도 부족하고 , 22일이면 Claude Fable가 API 전용으로만 사용 가능하게 된다는것은 정말 아쉬운 부분입니다.. 진짜 무슨 맛보기도 아니고..

자주 묻는 질문

자료 출처: Business Insider의 Claude Fable 5 보도, Axios의 Mythos급 모델 보도, The Verge의 Claude Fable 5 보도

요금과 기능, 지원 범위는 수시로 바뀔 수 있으니 최신 내용은 공식 페이지 기준으로 확인해 주세요.

더많은 AI 툴 정보는 ai모아에서 확인하세요

[ Cursor 50프로 할인 제휴 링크 ] - 이 링크로 가입 시 50프로 할인이 적용되며 , 글 작성자에게는 소정의 수수료가 지급됩니다.