I Tested Claude Code vs. Codex on Design. It Wasn''t Even Close.

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

같은 자료와 프롬프트로 웹사이트 8개를 제작한 영상 속 비교에서는 Codex가 대체로 더 나은 디자인을 내면서 Claude Code보다 시간·출력 토큰·비용을 크게 줄였다.

📌 핵심 요점

1. 제작자는 Claude Code와 Codex에 동일한 프롬프트, 브랜드 지침, 로고, 문구를 제공하고 디자인 결과와 서브에이전트 수, 작업 시간, 출력 토큰, 추정 API 비용을 비교했다.
2. Bowl and Bloom과 Minutecraft에서는 Codex가 더 명확하고 덜 장황하며 구조화된 사용자 경험을 제시했고, Claude Code는 많은 문구와 과도한 구성 때문에 복잡하게 느껴졌다고 평가했다.
3. Trail Latch에서는 Claude Code가 제품의 설치 과정과 구성품을 한 페이지에서 효과적으로 설명해 디자인 평가에서 이겼지만, Codex는 여전히 더 적은 에이전트·시간·토큰·비용으로 결과를 만들었다.
4. 자유도가 높은 프롬프트에서는 두 도구의 디자인 차이가 커졌지만, 웹사이트 요소를 구체적으로 지정한 프롬프트와 HTML 보고서에서는 결과가 거의 같아졌다.
5. 전체 집계는 Claude Code 25개 에이전트·14시간·약 300만 출력 토큰·추정 444달러, Codex 9개 서브에이전트·5시간·약 55만 출력 토큰·약 100달러로 제시됐다.

🧩 배경과 문제 정의

• 제작자는 디자인에 관한 인상만으로 판단하지 않기 위해 Claude Code와 Codex에 같은 프롬프트와 데이터를 주고 웹사이트 8개를 제작했다.
• 비교 기준에는 디자인과 사용자 경험뿐 아니라 서브에이전트 수, 작업 시간, 출력 토큰, 추정 비용이 포함됐다.
• 실험은 브랜드 자료를 제공한 랜딩 페이지, 자유도가 높은 창작 과제, 세부 요소를 지정한 과제로 나뉘며 프롬프트 구체성이 결과에 미치는 영향도 보여준다.

🕒 시간순 섹션별 상세정리

1. 동일 조건의 디자인 비교 설정

• Claude Code와 Codex에 같은 프롬프트와 데이터를 주고 웹사이트 8개를 제작한 뒤 모든 결과를 비교한다고 보여준다. [00:06]
• 디자인 감각만이 아니라 서브에이전트 수, 시간, 비용, 출력 토큰을 함께 살펴 데이터에 근거해 판단하겠다고 드러낸다. [00:19]
• 화면 왼쪽에는 Claude Code, 오른쪽에는 Codex를 배치하고 브랜드 지침과 로고까지 동일하게 제공해 변수를 줄인다. [00:43]

2. Bowl and Bloom에서 드러난 정보 전달 차이

• Codex는 내비게이션과 행동 유도 버튼, 상단 이미지로 사이트 목적을 빠르게 전달하고, Claude Code는 같은 정보를 더 많은 문구와 긴 이야기로 풀어낸다. [01:54]
• 상품 구성 화면에서는 두 결과 모두 수량과 배송을 선택할 수 있지만, Codex의 색상 표시가 수량 변경을 반영하지 않는 기능상 허점도 발견된다. [03:03]
• 첫 라운드에서 Claude Code는 4개 서브에이전트·2시간·약 50만 출력 토큰·53달러, Codex는 1개·50분·약 10만 토큰·20달러 미만으로 드러난다. [03:40]

3. 후원 소개와 Minutecraft 비교

• 후원 서비스 Granola는 회의에 봇이 참여하지 않고 컴퓨터 오디오를 들으며 전사, 종합, 할 일과 후속 조치를 정리하는 AI 메모장으로 묶인다. [04:27]
• Minutecraft는 두 결과 모두 대시보드처럼 복잡했지만 Claude Code 쪽은 지나치게 많은 문구, 혼란스러운 이동, 전체 화면에서도 남는 UI 오류가 지적된다. [06:44]
• Codex 쪽은 상대적으로 문구가 적고 열 구조가 명확했으며, 약 1시간 12분·10만 토큰·20달러로 Claude Code의 2시간 30분·약 50만 토큰·65달러보다 효율적이었다. [07:43]

4. Trail Latch에서 Claude Code가 거둔 디자인 승리

• Claude Code는 캠핑용 주방의 구성품, 펼치는 과정, 치수, 가격을 횡스크롤과 상호작용으로 설명하고 구매 구성까지 한 페이지에 연결한다. [09:12]
• Codex의 첫 화면은 시선의 초점이 불분명하고 요소가 많아 복잡하다는 평가를 받았지만, 제품 선택과 차량 적합성 페이지는 더 좋은 인상을 줬다. [11:02]
• 디자인은 Claude Code가 이겼지만 Codex가 약 1시간·10만 토큰·20달러 미만으로 더 빨랐고, 제작자는 반복 지시까지 고려하면 Codex가 더 효율적으로 따를 것이라고 판단한다. [12:12]

5. Present and Clear와 North Ledger Studio

• 발표 교육 사이트에서는 Claude Code의 문구가 많고 깊이와 흐름이 혼란스러운 반면, Codex는 취소선·강조·색상 변화와 적은 문구로 시선을 유도해 승리한다. [13:52]
• North Ledger Studio에서도 Claude Code는 보고서처럼 느껴졌지만 Codex는 수치, 이미지, 색상 전환, 경로형 스크롤을 활용해 더 브랜드다운 경험을 만든다. [15:07]
• 두 사례 모두 Claude Code가 대략 2시간과 44만~50만 토큰을 쓴 데 비해 Codex는 약 1시간과 9만~10만 토큰 수준을 사용한 것으로 드러난다. [15:15]

6. 자유형 프롬프트가 만든 격차

• 사업과 용도를 모델이 직접 만들고 디자인 역량을 보여달라는 개방형 프롬프트에서 Claude Code는 파동 효과와 데모를 만들었지만 많은 문구, 이상한 간격, 늘어난 비율 문제가 나타난다. [16:42]
• Codex는 큰 영웅 문구, 동적 배경, 마우스 효과, 신호 포착 상호작용을 더 단순한 구성으로 제시해 더 나은 브랜드 경험이라는 평가를 받는다. [17:36]
• 이 사례에서 Codex는 8분과 1.5달러, Claude Code는 약 3시간·33만 토큰·50달러를 사용해 가장 큰 효율 차이를 보인다. [17:58]

7. 상세 명세가 결과를 수렴시킨 사례

• 웹사이트의 모든 요소를 매우 구체적으로 지정하자 두 결과는 아이콘 같은 작은 차이를 제외하면 거의 동일하게 나온다. [18:23]
• 제작자는 충분히 역량 있는 모델이나 하네스라면 프롬프트가 구체적일수록 원하는 결과에 가까워질 수 있다고 해석한다. [18:38]
• 출력이 거의 같아졌는데도 Codex는 비용과 토큰 면에서 더 효율적이었다고 강조한다. [19:00]

8. HTML 보고서에서 반복된 동일 결과

• 모든 정보를 제공해 HTML 보고서를 만들게 한 두 번째 상세 명세 과제에서도 디자인과 문구가 거의 같아 어느 한쪽이 훨씬 낫다고 보기 어려웠다. [19:19]
• 품질 차이가 사라진 조건에서도 Codex는 더 빠르고 저렴하며 효율적인 결과를 보였다고 정리한다. [19:27]

9. 도구 선택에 대한 제작자의 단서

• 제작자는 기존에 Claude의 영역이라고 생각했던 작업에도 Codex를 더 사용해볼 수 있다고 제안하며, 도구가 매일 빠르게 발전한다고 드러낸다. [19:38]
• 다만 Codex가 Claude보다 무조건 낫다고 주장하지 않고, 두 구독을 매일 사용하며 테스트 결과에 따라 의견을 계속 바꾼다고 선을 긋는다. [19:48]

10. 전체 통계와 최종 정리

• 전체 실행에서 Claude Code는 25개 에이전트와 14시간, Codex는 9개 서브에이전트와 5시간을 사용한 것으로 집계된다. [19:57]
• 출력 토큰은 Claude Code 약 300만 개, Codex 약 55만 개였고, API 과금으로 환산한 추정 비용은 각각 444달러와 약 100달러로 드러난다. [20:20]
• 제작자는 시청자에게 감사 인사를 전하며 영상을 마무리한다. [20:33]

🧾 결론

• 이 영상의 평가에서는 Codex가 대부분의 디자인 라운드에서 정보 위계, 브랜드 감각, 간결성, 사용자 흐름 측면의 우위를 보였다.
• Claude Code도 Trail Latch처럼 제품의 작동 방식과 구매 구성을 깊이 있게 보여줘야 하는 사례에서는 더 좋은 결과를 냈다.
• 프롬프트가 구체적일수록 모델별 시각적 차이는 줄었으며, 이때 핵심 차별점은 생성 시간과 토큰·비용 효율로 이동했다.
• 제작자는 Codex가 항상 Claude보다 낫다고 단정하지 않고, 두 도구를 매일 사용하면서 빠른 변화에 맞춰 판단을 계속 갱신한다고 밝혔다.

📈 투자·시사 포인트

• 결과 품질이 비슷할 때 출력 토큰과 실행 시간이 적은 에이전트 하네스는 반복 제작의 단위 경제성에서 유리할 수 있다.
• AI 코딩 도구의 경쟁력은 모델 자체뿐 아니라 서브에이전트 운용, 토큰 사용, 검증 루프를 포함한 하네스 효율로 평가해야 한다.
• 구체적인 명세가 모델 간 결과 격차를 줄인다면 기업의 경쟁 우위는 모델 선택만이 아니라 프롬프트·디자인 시스템·검수 절차의 표준화에서도 발생할 수 있다.
• 도구 성능이 빠르게 변한다는 제작자의 관찰을 고려하면, 장기 조달 판단보다 동일 업무를 이용한 주기적 재평가가 더 적합하다.

⚠️ 불확실하거나 확인이 필요한 부분

• 이는 제작자 한 명이 수행하고 시각적으로 판정한 비교로, 독립 평가자나 정량화된 디자인 품질 지표가 제시되지 않았다.
• Minutecraft 사례에서는 제작자도 어떤 내용이 프롬프트에 입력됐는지 정확히 모른다고 말해 해당 라운드의 재현 가능성이 낮다.
• 일부 화면 오류는 반쪽 화면, 전체 화면, 반응형 크기에 따라 달라졌으며 모델 결과와 실행 환경의 영향을 명확히 분리하지 않았다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 동일한 프롬프트·입력 자료·실행 환경·화면 크기를 고정한 내부 디자인 벤치마크를 구성한다.
• 각 실행의 서브에이전트 수, 경과 시간, 출력 토큰, 추정 비용, 수정 횟수를 함께 기록한다.
• 자유형 프롬프트와 상세 명세 프롬프트를 분리해 모델 선택과 프롬프트 구체성의 효과를 각각 측정한다.
• 첫 화면의 메시지 명확성, 문구량, 정보 위계, 반응형 동작, 버튼 기능을 공통 검수표로 평가한다.

❓ 열린 질문

• Claude Code의 많은 서브에이전트와 토큰 사용은 어떤 작업에서 실제 품질 향상으로 이어지는가?
• 디자인 평가자를 여러 명으로 늘리거나 전환율 기반 테스트를 적용해도 Codex의 우위가 유지되는가?
• 첫 결과가 아니라 동일한 시간과 비용 안에서 반복 수정까지 허용하면 어느 도구가 지시를 더 정확하게 반영하는가?