저자 주: Agrumea Farm 공식 홈페이지 복제 테스트를 바탕으로, 디자인 재현도, 인터랙션 요구 사항, 소요 시간, API 환산 비용 세 가지 측면에서 Gemini 4 Carbon, Claude Opus 5.5, GPT-6 Astra를 비교했어요. 시나리오별 모델 선택 기준과 직접 재테스트하는 방법도 함께 정리했어요.
같은 브랜드 공식 홈페이지를 최상위 모델 세 개에 각각 복제시키면 결과는 얼마나 달라질까요? 2026년 11월 11일, 독립 평가 저자 Pat Simmons(AI for Mortals)가 관련 테스트를 공개했어요. 그는 Gemini 4 Carbon, Claude Opus 5.5, GPT-6 Astra에게 이탈리아 식품 브랜드 Agrumea Farm의 공식 홈페이지를 복제하게 했고, 결과물과 스크린샷, 프롬프트, 실행 시간, API 환산 비용까지 모두 공개했어요.
이 글은 “각자 장단점이 있다”는 식의 무난한 분석이 아니에요. 이번 과제에서는 세 가지 항목의 승자가 분명하게 갈렸어요. 비용은 Carbon이 가장 낮았고, 소요 시간은 Astra가 가장 짧았으며, 평가 저자에게 더 높은 품질 평가를 받은 모델은 Opus였어요. 다만 각 모델을 한 번씩만 실행했고, 사용한 도구 환경과 테스트 날짜도 서로 달랐어요. 그래서 이 결과를 모든 웹 개발 시나리오의 순위로 그대로 일반화하기는 어려워요.
핵심 가치: 이 글을 읽으면 세 가지 “모델 + 도구” 워크플로가 효과, 속도, 비용 면에서 각각 어떤 강점이 있는지 알 수 있어요. 글에서 소개하는 방법을 활용해 여러분의 프로젝트에서 직접 검증할 수도 있고요.
먼저 원본 웹사이트부터 살펴볼게요 — Carbon, Opus, Astra 동일 과제 복제 테스트는 어떻게 진행됐을까
결과를 보기 전에 먼저 테스트 조건부터 짚어볼게요. 이 테스트의 가치는 “같은 웹사이트, 같은 프롬프트, 같은 개발 목표”라는 점에 있어요. 다만 비교 대상은 실험실처럼 모델 자체만 따로 떼어 낸 것이 아니라 전체 워크플로예요.
| 테스트 요소 | 구체적인 설정 | 결론에 미치는 영향 |
|---|---|---|
| 테스트 대상 | Agrumea Farm 공식 웹사이트(영문판) | 독창적인 미감이 아니라 디자인 재현 능력을 비교해요 |
| 과제 요구사항 | 페이지 구조, 시각 스타일, 3D 통조림 캐러셀, 스크롤과 드래그, 로딩 애니메이션, 호버 애니메이션, 페이지 전환 재현 | 정적 스크린샷뿐 아니라 인터랙션도 품질 지표예요 |
| 확인 해상도 | 데스크톱 1440×900, 모바일 390×844 | 반응형 레이아웃도 함께 고려해야 해요 |
| 검증 방식 | 브라우저에서 스타일을 읽어 시각적으로 검증하고, 웹사이트가 실행되는지 확인 | 브라우저 자체 점검 능력이 최종 결과에 영향을 줘요 |
| 도구 환경 | Carbon은 Google Antigravity, Opus는 Claude Code, Astra는 Codex를 사용했고 모두 높은 추론 설정 | 결과는 모델과 툴체인이 함께 만들어 낸 산물이에요 |
| 실행 횟수와 날짜 | 모델당 1회씩만 실행. Opus와 Astra는 11월 6일, Carbon은 11월 10~11일 | 1회 실행에 따른 편차와 환경 차이가 있을 수 있어요 |
Carbon, Opus, Astra 테스트의 세 가지 핵심 전제
첫 번째 전제는 “자유 디자인”이 아니라 “복제”라는 점이에요. 세 모델 모두 원래 브랜드의 디자인 언어를 그대로 따라야 해서, 비교의 초점은 재현도, 디테일, 완성도예요. 처음부터 독창적인 비주얼을 만들고 싶다면 이 테스트는 참고용으로만 보는 게 좋아요.
두 번째 전제는 비용 기준이에요. 글에 나오는 모든 금액은 평가 작성자가 모델 가격과 사용 로그를 바탕으로 계산한 API 환산 비용이고, 구독 요금제에서 실제로 청구된 금액이 아니에요. 월정액 도구로 같은 작업을 돌리면 청구 형태가 완전히 달라져요.
세 번째 전제는 사실 평가에 모델이 네 개 있었다는 점이에요. 작성자는 Claude Fable 5.2도 함께 넣었고, 이 모델이 주관 평가 1위를 차지했어요. 그래서 아래에서 언급하는 “2위, 3위, 4위”는 모두 네 모델 기준 순위예요.
이미지 설명: 이 글에 쓰인 작품 3점의 첫 화면 스크린샷은 모두 AI for Mortals / Pat Simmons에서 가져왔어요. 게시일은 2026-11-11이고, 각각 Gemini 4 Carbon, Claude Opus 5.5, GPT-6 Astra의 복제 작품에 해당해요.
첫 번째 라운드: Carbon, Opus, Astra 중 웹 디자인을 가장 잘 재현한 모델은?
먼저 결과물부터 볼게요. 공개된 첫 화면 스크린샷을 보면 세 작품 모두 원본 사이트의 핵심 요소를 잘 잡아냈어요. 미색 배경, 떠 있는 식품 통조림, 와인색 곡선 배경, 주황색 원형 텍스트, 그리고 상단의 브랜드 로고, 언어 전환 버튼, 메뉴 버튼이 모두 들어 있어요. 다시 말해 어느 모델도 엉뚱한 템플릿 페이지를 내놓지는 않았고, 차이는 비율, 레이어 구성, 디테일에서 나타났어요.
아래 이미지는 위에서부터 차례대로 opus5.5, astra, carbon의 작품이에요.
| 관찰 항목 | Gemini 4 Carbon | Claude Opus 5.5 | GPT-6 Astra |
|---|---|---|---|
| 첫 화면 구도 | 여백이 많고 전체적으로 시원한 느낌 | 제품이 더 크게 배치되어 시각적 임팩트가 강함 | 구성이 완성도 있고 전체적으로 촘촘함 |
| 통조림 비율 | 중앙의 통조림이 상대적으로 작은 편 | 통조림이 돋보이며 확실한 시각적 중심 | 시각적 중심이 분명함 |
| 배경과 레이어 | 곡선 배경은 재현됨 | 통조림과 배경 곡선이 겹치는 관계가 더 두드러짐 | 레이어 구성이 완성도 있음 |
| 라벨과 텍스트 | 일부 라벨과 텍스트 디테일이 약함 | 라벨과 글꼴 표현이 더 풍부함 | 통조림 라벨에 눈에 띄는 그래픽 장식이 있음 |
| 작성자의 주관적 순위(4개 모델 기준) | 4위 | 2위 | 3위 |
디자인 재현에서 Opus가 더 좋은 평가를 받은 이유
먼저 두 종류의 정보를 구분해서 봐야 해요. 표의 앞쪽 네 줄은 공개된 스크린샷을 보고 관찰한 내용이고, 마지막 줄만 평가 작성자의 주관적인 순위예요. 작성자는 지정된 세 모델 중 Opus에 가장 만족했고, 그다음이 Astra, 마지막이 Carbon이었어요.
스크린샷을 보면 Opus의 강점은 ‘브랜드 공식 사이트의 주종 관계’를 잘 살린 데 있어요. 식품 브랜드 공식 사이트의 첫 화면에서 핵심은 제품이에요. Opus는 통조림을 더 크게 만들고, 통조림과 와인색 곡선이 앞뒤로 뚜렷하게 겹치도록 했으며, 라벨 텍스트도 더 선명하게 표현했어요. Carbon의 시원한 레이아웃 자체가 틀린 건 아니지만, 통조림이 작고 일부 텍스트 디테일이 약해서 ‘재현도’라는 평가 기준에서는 손해를 보기 쉬웠어요.
Astra는 두 모델의 중간쯤이에요. 구도가 완성도 있고 시각적 중심도 분명하며, 통조림 라벨의 장식 효과도 꽤 강해요. 다만 전체적으로 더 촘촘한 느낌이에요. 복제 작업에서는 ‘얼마나 예쁜가’보다 ‘원본 사이트와 얼마나 닮았는가’가 더 중요해요. 그래서 세 작품 모두 나쁘지 않은데도 순위에는 분명한 차이가 났어요.
두 번째 라운드: Carbon, Opus, Astra의 인터랙션 구현을 스크린샷만으로 판단할 수 없는 이유
웹사이트와 디자인 시안의 가장 큰 차이는 “움직여야 한다”는 점이에요. 원래 과제에서는 3D 제품 캔 캐러셀, 스크롤과 드래그 인터랙션, 로딩 애니메이션, 호버 애니메이션, 페이지 전환을 구현하도록 명시했어요. 이런 기능은 정적인 스크린샷으로는 거의 확인할 수 없지만, 사용자가 사이트를 열었을 때의 경험을 직접 좌우해요.
그래서 스크린샷으로는 레이아웃과 시각적 디테일만 알 수 있고, 인터랙션 기능이 완전히 구현됐는지는 증명할 수 없어요. 3D 캔을 부드럽게 드래그할 수 있는지, 호버 반응이 자연스러운지, 모바일에서 레이아웃이 틀어지지는 않는지 확인하려면 공개된 작품 페이지 세 곳을 직접 열어서 조작해 봐야 해요. 이 글에서는 스크린샷을 인터랙션 테스트 결과로 취급하지 않고, 원작자가 제시하지 않은 인터랙션 점수를 임의로 덧붙이지도 않아요.
이번 라운드는 웹 개발과 정적 이미지 생성이 어떻게 다른지도 보여 줘요. 모델은 보기 좋은 첫 화면을 그려 낼 수 있어요. 하지만 3D 캐러셀, 스크롤 기반 애니메이션, 반응형 레이아웃을 모두 실행 가능한 코드로 작성하려면 로딩 순서와 성능, 화면 크기별 동작까지 함께 처리해야 해요. 평가 기준에서 “브라우저로 스타일을 읽어 와 시각적으로 검증하라”고 요구한 것도 “다 썼다”를 “실제로 돌아간다”로 바꾸기 위해서예요.
실제 프로젝트에서 AI가 생성한 웹사이트를 점검할 때는 다음 순서를 따라 보세요.
- 먼저 1440×900과 390×844 두 가지 크기로 페이지를 열어서 레이아웃이 넘치거나 겹치지 않는지 확인해요.
- 드래그, 스크롤, 호버, 페이지 전환을 하나씩 실행해 보면서 애니메이션이 끊기거나 동작하지 않는 부분이 없는지 살펴봐요.
- 브라우저 콘솔을 열어 오류, 리소스 로딩 실패, 무한 루프 애니메이션이 있는지 확인해요.
- 마지막으로 원본 사이트나 디자인 시안과 화면별로 비교하면서 시각적 차이를 기록해요.
3라운드: Carbon, Opus, Astra의 비용과 소요 시간은 얼마나 차이 날까
이번 라운드에서 세 워크플로의 차이가 가장 뚜렷하게 드러나요. 아래 데이터는 모두 원본 평가에서 가져왔고, 비용은 API 환산 요금 기준이에요.
| 지표 | Gemini 4 Carbon | Claude Opus 5.5 | GPT-6 Astra |
|---|---|---|---|
| 소요 시간 | 99분 | 141분 | 68분 (가장 빠름) |
| API 환산 비용 | 10.86달러 (가장 저렴) | 60.14달러 | 90.63달러 |
| 입력 토큰 | 2,770만 | 1억 9,790만 | 7,040만 |
| 출력 토큰 | 43만 | 48.3만 | 21.1만 |
| 분당 환산 비용 (추정) | 약 0.11달러 | 약 0.43달러 | 약 1.33달러 |
| 저자의 주관적 순위 (4개 모델 중) | 4위 | 2위 | 3위 |
Carbon, Opus, Astra 비용 데이터 자세히 읽기
Carbon의 API 환산 비용은 Opus의 약 18%, Astra의 약 12% 수준이에요. 시행착오를 많이 거치며 반복해서 개선하는 방식으로 작업한다면, 이 차이는 여러 라운드에 걸쳐 계속 커져요. Astra는 68분이 걸려서 Opus의 절반도 되지 않아요. 그래서 납품 속도에 민감한 상황에 잘 맞아요. Opus는 시간이 가장 오래 걸리고 비용은 중간이지만, 그 대신 저자가 세 모델 중 가장 만족한 결과물을 얻었어요.
표에서 놓치기 쉬운 부분이 하나 있어요. 세 모델 모두 입력 토큰이 출력 토큰보다 압도적으로 많다는 점이에요. 표의 데이터로 계산해 보면 입력 대 출력 비율은 Carbon이 약 64:1, Opus가 약 410:1, Astra가 약 334:1이에요. 이는 에이전트 방식 개발의 특성과 관련이 있어요. 모델이 매 라운드마다 코드, 스타일, 페이지 상태 같은 컨텍스트를 다시 읽어 들여야 하고, 실제로 “써 내는” 코드는 아주 작은 부분에 불과하거든요. Opus의 입력량이 2억에 가깝다는 것은 이번 작업에서 컨텍스트를 아주 많이 주고받았다는 뜻이에요.
또 하나 눈여겨볼 점은 토큰 수와 비용이 정비례하지 않는다는 거예요. Astra의 입력 토큰은 Opus의 약 3분의 1에 불과한데도 환산 비용은 더 높아요. 단가나 캐시 과금 방식 같은 요소도 똑같이 중요하다는 뜻이에요. 비용을 평가할 때는 토큰을 누가 적게 썼는지만 볼 게 아니라, 각 모델의 실제 과금 규칙에 따라 계산해야 해요. 이 글에서는 구체적인 단가를 다루지 않으니, 자세한 금액은 각 업체의 공식 가격 페이지를 확인해 주세요.
왜 Carbon, Opus, Astra는 같은 프롬프트에도 결과가 다를까
같은 프롬프트를 넣었는데 세 가지 결과가 나온 이유는 모델 자체의 차이만이 아니에요. 이번 테스트에서는 각 모델이 자사 개발 도구 안에서 실행됐어요. 그래서 모델 능력, 도구 호출 방식, 브라우저 자체 점검 메커니즘, 컨텍스트 관리가 함께 최종 결과물을 좌우했어요.
공식 자료를 보면 세 회사가 웹 개발 능력에서 강조하는 지점이 조금씩 달라요.
- Google(Carbon + Antigravity): 프런트엔드 디자인, 브라우저 검증, 동적 효과, 복잡한 3D 콘텐츠, 멀티 에이전트 개발을 강조해요. 공식 사례로는 프롬프트 두 번으로 Google Merchandise Store를 새로 디자인한 것과 Three.js로 3D 인터랙션 경험을 만든 것이 있어요.
- OpenAI(Astra + Codex): Astra 공식 소개에서 웹사이트, 앱, 게임 개발 능력과, 생성 후 프런트엔드 품질 검사를 실행하는 워크플로를 강조해요.
- Anthropic(Opus + Claude Code): 공식 자료에는 같은 과제로 비교한 내용이 없어요. 다만 서드파티인 Proofyard/Woofocus가 2026년 10월 24일에 진행한 테스트에서 Opus 5.5로 가구 스튜디오 홈페이지의 초안 디자인과 수정을 마쳤고, API 가격 기준 비용은 4.34달러였어요. 이 테스트는 이 글의 Carbon, Astra와 직접 비교한 것은 아니에요.
Carbon, Opus, Astra 리더보드 데이터 읽는 법
단일 실측 결과 외에도 여러 과제를 종합한 리더보드를 참고할 수 있어요. 아래 표의 데이터에는 모두 수집 날짜를 표시했어요. Elo 점수는 플랫폼마다 테스트 방식이 달라서, 리더보드끼리 직접 비교할 수는 없어요.
| 리더보드(날짜) | 테스트 유형 | Claude Opus 5.5 | GPT-6 Astra | Gemini 4 Carbon |
|---|---|---|---|---|
| Arena WebDev(2026-11-10) | 웹 개발 대결 투표 | 1814(Max) | 1764(Max) | 1768(High, 잠정 순위) |
| DesignArena 종합 Agentic 리더보드(2026-11-11) | 프런트엔드, 풀스택, 게임, 모바일, 사무 문서 등 | 1440(High), 1위 | 1385(Max), 3위 | 1291, 7위 |
두 리더보드 모두 Opus가 앞서 있어요. 이는 이번 재현 테스트에서 작성자가 매긴 주관적 순위와 같은 방향이에요. Carbon은 WebDev 리더보드에서 Astra와 거의 비슷하지만, 범위가 더 넓은 DesignArena 종합 리더보드에서는 순위가 뒤처져요. “단일 페이지 웹 개발”과 “복잡한 에이전트 디자인 과제”는 서로 다른 능력 축이라는 뜻이에요. 그러니 모델을 고를 때는 자신의 과제 유형에 맞춰서 판단하세요.
Carbon, Opus, Astra를 API로 직접 재테스트하는 방법
다른 사람이 한 번 돌려 본 테스트는 출발점일 뿐이에요. 가장 믿을 만한 근거는 내 작업에서 직접 돌려 본 결과예요. 아래 예시는 OpenAI 호환 인터페이스로 같은 프롬프트를 여러 모델에 차례로 보내고, 소요 시간과 토큰 사용량을 기록해요. 다만 이 방식은 모델이 코드를 직접 생성하는 단계만 측정해요. 원래 평가에서 Antigravity, Claude Code, Codex가 수행한 다중 턴 도구 호출이나 브라우저 자체 점검은 포함되지 않아요.
간단한 예제
from openai import OpenAI
client = OpenAI(
api_key="YOUR_API_KEY",
base_url="https://api.apiyi.com/v1" # APIYI OpenAI 호환 인터페이스
)
resp = client.chat.completions.create(
model="your-model-id", # 플랫폼 모델 목록에 나온 실제 이름을 기준으로 하세요
messages=[{"role": "user", "content": "输出一个单文件 HTML 食品品牌官网首屏，米白背景、居中悬浮产品罐头、酒红色弧形背景"}]
)
print(resp.choices[0].message.content[:500])
print(resp.usage) # 입력·출력 토큰 확인
여러 모델 동일 과제 재테스트 전체 스크립트 보기
import time
from openai import OpenAI
client = OpenAI(
api_key="YOUR_API_KEY",
base_url="https://api.apiyi.com/v1" # 키 하나로 여러 모델 호출
)
# 모델 ID는 플랫폼 모델 목록을 기준으로 하세요. 가격 단위는 "달러 / 백만 토큰"이며, 공식 가격 페이지를 보고 채워 넣으세요
MODELS = {
"model-a": {"input_price": 0.0, "output_price": 0.0},
"model-b": {"input_price": 0.0, "output_price": 0.0},
"model-c": {"input_price": 0.0, "output_price": 0.0},
}
PROMPT = """请复刻一个食品品牌官网首屏，输出单文件 HTML：
1. 米白色背景，中央悬浮产品罐头，酒红色弧形背景，橙色环绕文字；
2. 顶部包含品牌标志、语言切换和菜单按钮；
3. 罐头支持鼠标拖动旋转，悬停时有缩放反馈；
4. 同时适配 1440x900 和 390x844 两种尺寸。
只输出完整代码。"""
def run(model: str, price: dict) -> dict:
start = time.time()
resp = client.chat.completions.create(
model=model,
messages=[{"role": "user", "content": PROMPT}],
)
elapsed = time.time() - start
usage = resp.usage
cost = (usage.prompt_tokens * price["input_price"]
+ usage.completion_tokens * price["output_price"]) / 1_000_000
html = resp.choices[0].message.content
with open(f"{model}.html", "w", encoding="utf-8") as f:
f.write(html)
return {
"model": model,
"seconds": round(elapsed, 1),
"input_tokens": usage.prompt_tokens,
"output_tokens": usage.completion_tokens,
"api_equivalent_cost": round(cost, 4),
}
if __name__ == "__main__":
for name, price in MODELS.items():
try:
print(run(name, price))
except Exception as e:
print(name, "调用失败：", e)
스크립트 실행이 끝나면 모델마다 HTML 파일이 하나씩 생겨요. 그다음 두 번째 라운드에서 정리한 4단계 체크리스트대로 브라우저에서 레이아웃, 인터랙션, 콘솔 오류를 하나씩 확인하세요. 여기에 소요 시간과 환산 비용까지 함께 보고 판단하면 돼요. 한 번의 결과에 생기는 편차를 줄이려면 모델마다 최소 세 번은 돌려 보는 걸 추천해요.
🚀 빠른 시작 팁: 같은 과제로 모델을 비교할 때 가장 번거로운 건 여러 업체의 키를 따로 발급받고 SDK마다 맞춰 주는 일이에요. 이 단계는 APIYI apiyi.com을 이용하면 편해요. API 키 하나로 OpenAI, Claude, Gemini 등 주요 모델을 호출할 수 있고, 인터페이스도 OpenAI와 호환돼요. 신규 가입자에게는 무료 테스트 크레딧도 있어서, 작은 샘플로 비교 과정을 먼저 돌려 보기에 알맞아요.
Carbon, Opus, Astra 시나리오별 추천과 선택 가이드
이번 테스트와 리더보드 데이터를 바탕으로 개발 목표에 따라 1차 후보를 좁혀 볼 수 있어요. 아래 표의 “근거” 열에는 가능한 한 출처 유형을 함께 적어 두었으니, 참고 가치를 판단하는 데 활용해 보세요.
| 개발 목표 | 우선 고려 | 근거 | 권장 검증 방법 |
|---|---|---|---|
| 호출 비용에 민감하고, 탐색과 반복이 많이 필요한 경우 | Gemini 4 Carbon | 이번 테스트에서 API 환산 비용이 가장 낮음 (실측 데이터) | 여러 번의 소규모 작업 누적 비용 비교 |
| 시각적 재현도, 복잡한 인터랙션, 높은 완성도가 중요한 경우 | Claude Opus 5.5 | 작성자의 주관적 평가에서 셋 중 최고, 두 리더보드 모두 선두 | 화면별 재현도와 인터랙션 검수 |
| 완료 속도와 실행 효율이 중요한 경우 | GPT-6 Astra | 이번 테스트에서 소요 시간이 가장 짧음 (실측 데이터) | 동일 작업 시간 측정 + 품질 검수 |
| 어떤 모델을 쓸지 확신이 없고 먼저 감을 잡고 싶은 경우 | 세 모델에 같은 문제로 소규모 샘플 재테스트 | 한 번의 테스트만으로는 결론을 내리기 부족함 | APIYI(apiyi.com)의 통합 인터페이스로 일괄 비교 |
Carbon을 선택하면 좋은 경우
- 프로토타입 탐색 단계: 여러 페이지 안을 빠르게 시도해야 할 때, 1회 비용이 낮으면 그만큼 더 여러 번 돌려 볼 수 있어요.
- 개인 프로젝트나 예산이 한정된 팀: 품질이 받아들일 만한 수준이라면, 장기적으로 호출 비용 차이가 상당히 크게 벌어져요.
- 주력 개발 + 사람의 검수: Carbon으로 초안을 만든 뒤, 사람이나 다른 모델이 마무리 점검을 하는 방식이에요.
Opus를 선택하면 좋은 경우
- 브랜드 공식 사이트, 마케팅 랜딩 페이지: 시각적 재현도와 디테일 요구 수준이 높아서, 호출 비용보다 재작업 비용이 더 커요.
- 인터랙션이 복잡한 페이지: 3D 전시, 드래그, 스크롤 기반 애니메이션이 많다면 최종 완성도가 더 중요해요.
Astra를 선택하면 좋은 경우
- 납기가 빠듯한 경우: 짧은 시간 안에 바로 실행 가능한 완성 페이지가 필요할 때 좋아요.
- 프런트엔드 QA 프로세스를 중시하는 경우: 공식적으로 생성 후 품질 점검을 강조하고 있어서, 검수 단계를 워크플로에 맡기려는 경우에 적합해요.
💡 선택 팁: 이번 테스트는 실제 워크플로를 기준으로 세 모델을 나란히 관찰한 결과이지, 절대적인 순위가 아니에요. 최종 판단 기준은 여러분이 직접 맡기는 동일한 작업에서 어떤 모델이 제대로 끝까지 해냈는지, 그리고 비용과 시간이 얼마나 들었는지가 되어야 해요. APIYI(apiyi.com)를 통해 같은 프롬프트로 소규모 재테스트를 해 본 뒤 주력 모델을 정하시길 권해요.
자주 묻는 질문 FAQ
Q1: Carbon, Opus, Astra 동일 과제 웹사이트 테스트는 무엇을 비교한 건가요?
“모델 + 개발 도구”로 이루어진 세 가지 워크플로가 Agrumea Farm 공식 웹사이트를 얼마나 잘 재현하는지 비교한 테스트예요. 페이지 구조, 비주얼 스타일, 3D 통조림 캐러셀, 스크롤·드래그, 로딩 및 호버 애니메이션, 페이지 전환, 반응형 레이아웃까지 모두 평가 대상이에요. 독창적인 미적 감각이 아니라 디자인을 얼마나 충실하게 재현했는지를 측정해요.
Q2: Carbon은 가장 저렴한데 왜 평가자의 순위는 가장 낮나요?
비용과 품질은 서로 독립적인 기준이에요. Carbon은 입력 토큰이 가장 적고 환산 비용도 가장 낮지만, 스크린샷을 보면 통조림 비율이 작고 일부 텍스트 디테일이 약해서 “재현도” 기준에서는 점수가 유리하지 않았어요. 저렴하다고 나쁜 건 아니고, 이번 재현 과제에서는 평가자가 Opus의 완성도를 더 높이 평가한 거예요.
Q3: 이 테스트는 언제 진행됐나요? 결과가 금방 낡지는 않을까요?
평가는 2026년 11월 11일에 발표됐어요. Opus와 Astra 테스트는 11월 6일에, Carbon 테스트는 11월 10일~11일에 끝났는데, 마침 Carbon이 11월 10일에 접근 범위를 넓힌 시점과 맞물려요. 모델과 도구가 빠르게 바뀌므로 결론은 현 시점의 참고 자료로 보는 게 좋아요.
Q4: API 환산 비용과 구독 요금은 어떻게 다른가요?
API 환산 비용은 토큰 사용량과 API 단가로 추정한 비용이라서 모델이 실제로 소모한 양을 보여줘요. 구독 요금은 월 정액 가격이고, 사용 한도와 갱신 규칙에 따라 계산돼요. 같은 작업이라도 월정액 도구는 한도의 일부만 소진할 수 있고, 종량제 호출은 곧바로 청구서에 반영돼요. 모델을 고를 때는 본인이 실제로 쓰는 과금 방식으로 따져 보세요.
Q5: API로 이 세 가지 모델의 웹 개발 결과를 빠르게 비교하려면 어떻게 하나요?
본문의 재테스트 스크립트를 참고하면 돼요.
1. APIYI(apiyi.com)에 가입해서 API 키와 무료 테스트 크레딧을 받아요.
2. `base_url`을 `https://api.apiyi.com/v1`로 설정하고, 플랫폼의 모델 목록에서 비교할 모델 이름을 확인해요.
3. 같은 프롬프트로 차례대로 호출해서 소요 시간과 토큰 사용량을 기록한 뒤, 브라우저에서 생성된 페이지를 직접 확인해요.
Q6: API를 한 번 호출하는 것만으로 원본 평가와 같은 결과를 재현할 수 있나요?
완전히 재현하기는 어려워요. 원본 평가는 Antigravity, Claude Code, Codex에서 진행됐고, 여러 차례 파일을 읽고 쓰며 브라우저로 자체 점검까지 하느라 모두 한 시간 넘게 걸렸어요. 단일 호출은 모델이 코드를 바로 생성하는 능력만 보기 때문에 1차 선별용으로 적합해요. 원본 테스트에 가깝게 하려면 브라우저 검증이 포함된 에이전트 플로를 구축해야 해요.
Q7: 이 테스트에는 어떤 한계가 있나요?
크게 세 가지예요. 모델마다 한 번씩만 실행해서 우연이 개입할 수 있고, 세 모델이 서로 다른 도구 환경과 테스트 날짜를 썼기 때문에 모델 자체의 성능만 분리해서 볼 수 없어요. 그리고 순위는 작성자의 주관적인 평가에서 나왔어요. 게다가 정적인 스크린샷만으로는 인터랙션이 완전히 구현됐는지 알 수 없어요. 그러니 참고 사례로는 좋지만 범용 순위로 그대로 받아들이기엔 적합하지 않아요.
Carbon, Opus, Astra 핵심 요약 Key Takeaways
- 테스트 성격: 같은 공식 웹사이트 복제 작업을 세 가지 워크플로로 각각 한 번씩 실행한, 실제 사용 환경에 가까운 횡적 비교 관찰이에요.
- 디자인 재현도: 글쓴이는 세 모델 중 Opus를 가장 높게 평가했고, 그다음이 Astra, 마지막이 Carbon이었어요.
- 속도: Astra가 68분으로 가장 빨랐고, 이는 Opus의 약 절반 수준이에요.
- 비용: Carbon의 환산 비용은 10.86달러로, Opus의 약 18%, Astra의 약 12%예요.
- 비용 구조: 에이전트 개발은 입력 토큰 비중이 크기 때문에, 단가와 캐시 규칙이 청구 금액을 좌우해요.
- 리더보드 참고: Opus는 Arena WebDev와 DesignArena 종합 순위에서 모두 앞서 있지만, 순위마다 평가 기준이 달라요.
- 시작 방법: APIYI(apiyi.com)에서 키 하나로 같은 과제를 소규모로 다시 테스트해 보고, 주력 모델을 정하세요.
정리
Carbon, Opus, Astra로 같은 웹사이트를 만들어 비교한 결과, 핵심 결론은 세 가지예요.
- 결과물 품질: 이번 복제 작업에서는 Opus의 결과물이 평가 작성자에게 가장 높은 평가를 받았어요. 제품 본체와 계층 관계가 더 뚜렷하게 드러났어요.
- 속도: Astra는 단 68분 만에 작업을 끝냈어요. 납기가 빠듯한 프로젝트에 잘 맞아요.
- 비용: Carbon의 API 환산 비용은 나머지 두 모델보다 훨씬 낮아요. 자주 반복 수정하거나 예산에 민감한 상황에 어울려요.
세 모델 모두 고품질 웹 개발을 해낼 수 있는 수준이에요. 차이는 시각적 재현도, 인터랙션 구현, 소요 시간, 비용 사이에서 무엇을 택하느냐에 있어요. 어떤 모델이 절대적으로 가장 강한지 따지기보다, 내 개발 목표를 분명히 하고 같은 과제를 직접 돌려 보는 편이 좋아요. APIYI(apiyi.com)의 통합 인터페이스로 여러 모델을 한 번에 다시 테스트해 보고, 실제로 완성된 결과물과 들어간 비용을 최종 선택 기준으로 삼아 보세요.
📚 참고 자료
- Gemini 4 Carbon: No-Hype Full Review & Testing: Pat Simmons / AI for Mortals가 같은 주제로 진행한 웹사이트 복제 평가, 2026-11-11
- 링크:
aiformortals.co/blog/gemini-4-carbon-review -
설명: 이 글의 테스트 설정, 소요 시간, 토큰 및 API 환산 비용 데이터의 주요 출처예요
-
복제 작품 페이지 3종: Carbon, Opus 5.5, Astra의 공개 작품
- 링크:
aiformortals.co/builds/agrumea-clone-gemini-4-carbon,aiformortals.co/builds/agrumea-clone-opus-5-5,aiformortals.co/builds/agrumea-clone-gpt-6-astra -
설명: 브라우저에서 직접 인터랙션 효과를 확인해 볼 수 있어요
-
Agrumea Farm 공식 사이트: 테스트 대상 원본 사이트
- 링크:
agrumeafarm.it/en -
설명: 복제 결과물의 재현도를 비교할 때 사용해요
-
Arena WebDev 리더보드: 웹 개발 대결 투표 순위
- 링크:
arena.ai/leaderboard/code/webdev -
설명: 이 글에서는 2026-11-10 기준 데이터를 인용했어요
-
DesignArena 리더보드: 종합 Agentic 디자인 순위
- 링크:
designarena.ai/leaderboard -
설명: 이 글에서는 2026-11-11 기준 데이터를 인용했고, 여러 종류의 디자인 작업을 다뤄요
-
Google 공식 블로그: Gemini 4 Carbon 공개 발표
- 링크:
blog.google/innovation-and-ai/models-and-research/gemini-models/gemini-4-carbon-now-available/ -
설명: 프런트엔드 디자인과 브라우저 검증 측면에서 Carbon이 공식적으로 내세우는 포지셔닝을 확인할 수 있어요
-
OpenAI 공식 소개: GPT-6 Astra
- 링크:
openai.com/index/gpt-6-astra/ -
설명: Astra의 웹 개발 및 프런트엔드 QA 워크플로를 설명해요
-
Woofocus 테스트: Claude 모델별 웹 디자인 비교, 2026-10-24
- 링크:
app.woofocus.com/blog/best-claude-model-for-web-design - 설명: Opus 5.5의 디자인 및 수정 작업에 대한 보충 참고 자료로, 세 모델을 직접 비교한 테스트는 아니에요
작성자: APIYI 기술팀
기술 교류: APIYI 웹사이트 홈페이지에서 언제든 문의해 주세요. 더 많은 연동 자료는 docs.apiyi.com 문서 센터에서 확인할 수 있어요
