Don''t Build With GPT-6.1 Sol Until You Watch This

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

GPT-6.1 Sol로 웹사이트를 만들기 전, 같은 과제로 Claude와 디자인을 비교하라—발표자의 Castos 홈페이지 실험에서는 Claude의 시각적 완성도가 높았고 Codex에서는 보완할 콘텐츠 아이디어를 얻었다.

📌 핵심 요점

1. 발표자는 일반적인 작업에서 두 모델의 차이가 크지 않다고 보지만, 이번 홈페이지 재설계에서는 Claude의 디자인과 모션 그래픽을 훨씬 높게 평가했다.
2. 비교는 기존 Castos 홈페이지를 대상으로 같은 프롬프트와 별도 브랜치를 사용했다. 작업은 현황 이해·감사, 제안과 피드백, 구현의 세 단계로 나눴으며, 양쪽 모두 가능한 최고 수준의 노력 설정을 사용했다고 설명했다.
3. Claude는 사이트의 제품 주장을 점검하고, 피드백을 받아 히어로 메시지를 수정했다. 고객 로고 검토에서는 RSS 피드의 호스팅 출처를 확인해 더 이상 고객이 아닌 사례를 찾아냈다고 한다.
4. Claude 결과물은 고객 유형, 제품 사용 단계, 가격 미리보기, FAQ를 담았다. 발표자는 이를 사람뿐 아니라 LLM이 제품의 대상과 기능을 이해하도록 정보를 제공하는 방식으로 해석했다.
5. Codex의 시각적 결과에는 실망했지만, 광고·스폰서·후원·유료 접근이라는 네 가지 수익화 구분은 유용하다고 평가했다. 최종 선택과 결합에는 사용자의 취향과 판단이 필요하다는 결론이다.

🧩 배경과 문제 정의

발표자가 운영하는 Castos는 팟캐스트 호스팅 플랫폼이다. 기존 홈페이지는 사람이 만든 이미지, 기능 소개, 고객 후기와 CTA를 갖춘 전형적인 SaaS 페이지였다. 발표자는 이를 재설계하면서 Claude와 ChatGPT·Codex에 같은 프롬프트를 주고 작업 과정과 결과를 비교했다.

문제의 초점은 일반적인 코딩 능력보다 홈페이지 디자인의 차이다. 동시에 제품 설명의 정확성, 고객 여정, LLM이 이해할 수 있는 정보 구조까지 검토했다. 결과물의 시각적 품질은 발표자의 평가이며, 공개 이후 검색 순위와 전환 성과는 아직 확인되지 않았다.

🕒 시간순 섹션별 상세정리

1. 일반 작업과 디자인을 구분한 비교 문제

• 발표자는 최신 Claude와 ChatGPT 모델이 대부분의 작업에서는 비슷하지만 디자인에서는 큰 차이가 난다고 주장한다. [00:36]
• 자신이 완성한 두 홈페이지 재설계안을 기존의 사람이 디자인한 Castos 페이지와 비교하겠다고 보여준다. [01:03]

2. 기존 Castos 홈페이지의 구성

• Castos는 팟캐스트 호스팅 플랫폼이며, 기존 홈페이지에는 사람이 제작한 맞춤 이미지가 사용됐다. [01:19]
• 기능, 청취자 성장, 수익화 소개에 이어 자료 링크, 고객 후기와 CTA를 배치한 전형적인 SaaS 홈페이지라고 보여준다. [01:52]

3. 같은 과제를 위한 세 단계 프롬프트

• Claude Code를 터미널에서 사용하며, 콘텐츠 작성 도구와 Astro 사이트 저장소를 이해·감사한 뒤 제안을 만들고 구현하도록 작업을 나눴다. [03:25]
• Claude에는 Opus 5.5의 extra high 설정을 사용했고, 두 모델 모두 가능한 최고 노력 수준으로 작업했다고 보여준다. [03:37]
• 별도의 Ultra Code 사용 경험에서는 약 45분 만에 5시간 사용량 한도를 소진했다고 말하며 자원 부담을 언급한다. [03:55]

4. Claude의 주장 검토와 반복 수정

• Claude가 제품 기능과 사이트의 주장을 점검한 보고서를 작성했으며, 발표자는 누락된 부분에 피드백을 줬다. [04:54]
• 감사 이후 제안과 목업을 만들고, 맥락에 맞지 않았던 히어로 영역을 피드백에 따라 수정했다. [05:42]
• 이후 보여줄 모션 그래픽은 코드로 구현됐으며, 전체 과정은 실제 시간으로 약 한 시간 걸렸다고 보여준다. [05:56]

5. 히어로 메시지와 고객 여정·로고 점검

• 히어로의 에피소드 예시를 첫 스폰서 확보에서 청취자 성장으로 바꿨다. 발표자는 후자가 더 많은 고객에게 공통된 목표라고 판단했다. [06:56]
• 신규 체험 시작과 다른 플랫폼에서 팟캐스트 가져오기를 구분했으며, 가져오기 경로는 Codex도 제안했다고 드러낸다. [07:18]
• 리뷰 과정에서 RSS 피드 출처를 확인해 더 이상 고객이 아닌 로고를 찾아냈고, 발표자가 제공한 다른 고객 로고로 교체했다고 보여준다. [07:57]

6. 고객 유형과 제품 흐름을 보여주는 디자인

• 창작자와 기업의 사용 목적을 구분한 영역을 소개하며, LLM이 누구에게 제품을 추천해야 하는지 이해하도록 맥락을 제공하려는 의도라고 보여준다. [08:57]
• 업로드·이전부터 분석, 수익화, 비공개 팟캐스트와 체험 시작까지의 흐름을 스크롤에 따라 바뀌는 모션 그래픽으로 보여준다. [09:45]

7. 정보 밀도와 가격 안내의 확대

• 발표자는 사람과 AI 모두 제품을 이해할 수 있도록 SaaS 페이지의 정보 밀도가 높아질 것이라고 예상한다. [10:17]
• 홈페이지에 가격 미리보기를 추가했으며, 일반 HTML 텍스트가 복잡한 JavaScript 가격 화면보다 스크레이퍼와 모델에 읽히기 쉬울 수 있다고 보여준다. [11:06]
• FAQ, 이전 안내, 경쟁 제품 비교도 담았다. 긴 보라색 영역은 단조로울 수 있지만 스크롤에 따라 그래픽이 바뀌므로 괜찮다고 평가한다. [12:01]

8. Codex의 작업 과정과 결과 평가

• Codex 앱에서 별도 브랜치에 같은 프롬프트를 사용했다. 발표자는 앱의 보고서 확인 경험을 선호하면서도 실행 환경이 같지 않았다는 점을 인정한다. [12:54]
• Codex도 감사와 제안을 거쳐 구현했으며, 전체 작업은 약 한 시간에서 한 시간 반 걸렸다고 보여준다. [13:12]
• 시각적 결과에는 강한 불만을 표시하지만, 광고·스폰서·후원·유료 접근이라는 네 가지 수익화 구분은 좋은 아이디어라고 평가한다. [14:04]

9. 여러 모델의 아이디어를 고르는 판단

• Codex가 제안한 네 가지 수익화 개념을 Claude의 모션 그래픽에 통합하는 방안을 제시한다. [14:39]
• 같은 작업을 여러 모델에 맡기면 사용량은 늘지만 다른 아이디어를 얻을 수 있으며, 어떤 표현을 채택할지는 사용자의 취향과 판단에 달렸다고 드러낸다. [15:22]

10. 모델·노력 설정과 앱 선택의 재평가

• 발표자는 Sonnet을 중간 수준에서 약간 고급인 작업에, Opus를 매우 고급인 작업에 사용하고 있다고 보여준다. [16:10]
• 노력 설정별 동일 과제 비교는 충분히 해보지 않았다고 인정한다. 별도의 SEO 감사·우선순위 재설계 작업은 최고 설정으로 진행하다 사용량 한도로 중단됐다고 드러낸다. [17:19]
• Codex 앱을 여전히 선호하지만 Claude 모델을 더 자주 쓰게 됐으며, 루틴·스킬·예약 작업 관리를 위해 Claude 앱도 다시 살펴볼 만하다고 제안한다. [18:17]

11. 공개 계획과 아직 남은 성과 검증

• 촬영 직후 새 페이지를 Castos 사이트에 공개할 계획이며, 검색 순위와 전환율이 어떻게 달라질지 궁금하다고 드러낸다. [18:33]
• 모션 그래픽을 사이트의 다른 페이지에도 적용하며 재설계를 이어갈 계획이다. [18:41]
• 시청자에게 ChatGPT와 Claude 버전에 대한 의견을 요청하며 영상을 마친다. [18:47]

🧾 결론

• 이번 사례에서 발표자가 채택하려는 방향은 Claude가 만든 홈페이지이며, 특히 코드로 구현한 모션 그래픽을 높게 평가했다.
• 앱의 사용 편의성과 생성 결과물의 품질은 별도로 평가해야 한다. 발표자는 Codex 앱을 선호하면서도 이번 디자인 작업에서는 Claude 결과를 선택했다.
• 여러 모델에 같은 작업을 맡기면 서로 다른 아이디어를 얻을 수 있지만, 토큰 사용량이 늘고 결과를 고르는 판단도 필요하다.
• 새 페이지의 검색 순위와 전환율 개선은 아직 확인되지 않았다. 공개 후 성과를 관찰하겠다는 계획으로 영상이 끝난다.

📈 투자·시사 포인트

• AI 도구의 경쟁력을 볼 때 앱의 편의성, 작업별 결과 품질, 사용량 한도를 함께 살펴볼 필요가 있다. 이 사례에서는 각 평가가 서로 다른 방향으로 나타났다.
• SaaS 홈페이지는 시각적 표현뿐 아니라 고객 유형·기능·가격을 명확히 전달하는 정보 구조가 중요해질 수 있다. 다만 LLM 추천에 유리하다는 설명은 발표자의 가설이다.
• AI를 활용한 재설계는 디자인 생성과 함께 제품 주장 및 고객 사례의 정확성 검토까지 포함할 수 있다는 실무 사례를 보여준다.
• 약 한 시간 수준의 제작 경험만으로 비용 절감이나 매출 증가를 판단할 수는 없다. 반복 수정, 사용량 소진, 공개 후 전환 성과까지 확인해야 사업적 가치를 평가할 수 있다.

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

• 한 회사의 홈페이지를 대상으로 한 비교이며, 반복 실험이나 객관적인 디자인 평가 점수는 제시되지 않았다. ‘한 해 뒤처졌다’는 표현은 발표자의 평가다.
• 같은 프롬프트를 사용했지만 Claude는 터미널, Codex는 앱에서 작업했다. 피드백 과정도 완전히 동일했는지 확인할 수 없어 모델 자체의 차이로만 해석하기 어렵다.
• 제목은 GPT-6.1 Sol을 명시하지만 본문은 ChatGPT·Codex 등의 표현을 섞어 사용한다. 정확한 모델 식별자와 양쪽의 노력 설정 대응 관계는 원문만으로 완전히 확인되지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 자신의 홈페이지 과제를 현황 감사, 제안과 피드백, 구현의 세 단계로 나눠 비교한다.
• 동일한 시작 코드와 프롬프트를 준비하고 모델, 노력 설정, 작업 시간, 수정 횟수, 사용량을 기록한다.
• 제품 주장과 고객 로고를 실제 제품 정보 및 현재 고객 관계와 대조해 확인한다.
• 각 모델 결과에서 시각적 표현과 콘텐츠 아이디어를 따로 평가하고 채택할 요소를 정한다.

❓ 열린 질문

• 같은 과제를 여러 번 반복하거나 앱·노력 설정을 맞춰도 Claude의 디자인 우위가 유지될까?
• Codex의 네 가지 수익화 아이디어를 Claude의 모션 그래픽에 결합하면 제품 이해와 전환에 도움이 될까?
• 고객 유형과 가격 정보를 명시한 페이지가 실제로 LLM 추천 노출을 늘릴까?