클로드 4가 내 앱을 단 몇 분 만에 재구축했습니다!

Creator Magic 구독자 104,000명

요약

이 영상에서 Mike는 Google Codex로 Pimp My Thumb 웹사이트를 현대화하려다 큰 한계를 경험하며 실망을 토로합니다. 이후 Google Jules AI와 함께 Anthropic이 발표한 Claude Sonnet 4 및 Opus 4를 Cursor 내에서 바로 사용하는 법을 소개하고, Claude 4에게 15분 만에 Next.js와 Supabase 기반의 모던 앱을 자율적으로 재구축하는 과정을 시연합니다. 다크 모드 테마 변경, 기존 CSS 적용, YouTube 임베드 등 커스터마이징을 통해 UI를 개선하며 생산성을 높이는 방법을 보여줍니다. 마지막으로 Gemini 2.5 Pro를 활용한 백엔드 리팩터링 시도와 Claude 4, OpenAI, Google I/O, Microsoft Build 등 최신 AI 발표, 그리고 MCP(Anthropic 제작)를 ‘새로운 HTTP’로 소개하며 AI 생태계 동향을 정리합니다.

주요 키워드

Claude 4 Claude Sonnet 4 Claude Opus 4 Anthropic Codex Jules AI Next.js Supabase Gemini 2.5 Pro MCP

하이라이트

⚡️ Codex로 웹사이트 현대화 시도했지만 대부분 작업이 실패해 기대 이하 결과를 맛봤다.
🔑 Anthropic이 발표한 Claude Sonnet 4와 Opus 4가 Cursor에 네이티브로 통합돼 즉시 사용 가능하다.
🚀 Claude 4 Opus에게 '완전 재구축'을 요청한 뒤 15분 만에 Next.js·Supabase 통합 앱을 자동 생성했다.
🌟 환경 변수 설정(.env 파일 생성)부터 빌드 오류 수정까지 AI가 스스로 처리해 개발 부담을 크게 줄였다.
💡 다크 모드 테마와 기존 CSS 적용, YouTube 동영상 임베드를 손쉽게 반영해 UI 커스터마이징을 실현했다.
📌 Gemini 2.5 Pro로 프론트·백엔드 분리 리팩터링을 시도했으나 에이전트 루프와 오류로 중단되어 다음 기회로 미뤘다.
🔍 MCP를 ‘새로운 HTTP’로 부상시킨 Anthropic 생태계 소식과 Google, Microsoft, OpenAI의 주요 AI 발표를 한눈에 정리했다.

용어 설명

Claude 4 (Sonnet 4 / Opus 4)

Anthropic이 개발한 최신 대규모 언어 모델(LLM) 버전으로, 대화·코딩·앱 자동화에 특화됐다.

Codex

OpenAI가 만든 코드 생성 AI로, 자연어 설명만으로 프로그램 코드를 작성해 주는 모델이다.

Jules AI

Google이 발표한 AI 도구로, GitHub와 연동해 코드 작성·수정·배포를 자동화하도록 지원한다.

Next.js

React 기반 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 웹 프레임워크다.

Supabase

PostgreSQL 데이터베이스 백엔드와 인증·스토리지 기능을 제공하는 오픈소스 Firebase 대안 서비스다.

Gemini 2.5 Pro

Google의 고급 AI 모델로, 대규모 리팩터링·문제 해결·코드 탐색에 최적화된 버전이다.

Cursor

AI 에이전트를 활용해 통합 개발 환경(IDE)처럼 코드 작성·수정·관리 작업을 돕는 플랫폼이다.

MCP

Anthropic이 발표한 메시지 전달 프로토콜로, HTTP와 유사한 형태로 AI 서비스 간 통신을 표준화한다.

Mike가 Google Codex로 Pimp My Thumb 사이트를 현대화하려 시도했지만, 글꼴 변경 외 큰 성과 없이 일부 작업이 실패하며 AI 워크플로우의 한계를 경험한다.

[00:00] 마이크가 인사하며 이번 주의 중요한 발표인 Veo 3 소개와 Google I/O 컨퍼런스의 하이라이트를 언급합니다.

[00:12] Codex를 사용해 웹사이트 Pimp My Thumb을 현대화하려 했지만 단순히 폰트만 바뀌는 등 기대에 못 미치는 결과를 얻었다고 설명합니다.

[00:29] Codex로 React, Next, Node를 사용한 현대적 재구성을 요청했지만 실제로는 플레이스홀더만 제공하고 인간이 직접 코딩해야 하는 상황이었다고 실망감을 표현합니다.

Google의 Jules AI GitHub 통합 기능을 간단히 언급한 뒤, Anthropic이 데브 컨퍼런스에서 공개한 Claude Sonnet 4와 Opus 4 출시 소식을 전달하며 Cursor 내 네이티브 지원을 소개한다.

[00:57] Google의 새로운 Jules AI 발표를 언급하며 GitHub 연결과 Codex와 유사한 개발 기능을 소개하고, 노코드 앱 빌더를 위한 가장 큰 발표인 Claude를 언급합니다.

[01:08] Anthropic의 첫 개발자 컨퍼런스에서 발표된 Claude Sonnet 4와 Claude Opus 4가 사용 가능해졌으며, Cursor에 기본 내장되어 있다고 소개합니다.

Claude 4 Opus(Max 모드)에 '완전 재구축'을 요청해 Next.js 프로젝트 생성, Supabase 연동, 빌드 오류 수정까지 15분 안에 완전한 모던 앱을 자율적으로 빌드하는 과정을 시연한다.

[01:30] Claude 4 Opus를 Max 모드로 선택하고 AI 에이전트에게 앱을 현대적인 프레임워크로 완전히 재구축해달라고 요청하며 실시간 테스트를 시작합니다.

[01:45] Claude 4가 2초 만에 계획을 세우고 readme 파일을 분석하여 기술 스택을 이해한 후 Next.js를 활용한 현대화 작업을 자율적으로 시작하는 모습을 보여줍니다.

[02:06] 15분간의 완전 자율적인 작업으로 Pimp My Thumb Modern 프로젝트가 생성되고 Supabase 통합까지 완료되어 첫 번째 빌드를 실행할 준비가 완료되었습니다.

[02:23] 초기 오류 발견 후 Claude가 자동으로 수정하고, Supabase URL 환경 설정을 위한 .env 파일 생성 안내를 받아 설정을 완료합니다.

[02:42] 완성된 앱을 확인한 결과 원본보다 훨씬 현대적이고 개선된 모습을 보여주며, 다크 모드 테마 변경을 시도하며 성공적인 결과에 대한 만족감을 표현합니다.

다크 모드 테마 적용, 옛 CSS 붙여넣기, 개인 YouTube 채널 동영상 임베드 과정을 통해 UI를 세밀하게 커스터마이징하며 디자인 업그레이드를 확인한다.

[02:59] Claude 4를 사용한 앱 리빌드 과정을 시연하며, 다크모드를 적용하고 기존 사이트의 CSS를 가져와서 UI를 개선합니다. Next.js 기반의 새로운 인터페이스가 완성되어 YouTube URL 처리 기능이 정상적으로 작동하는 것을 확인합니다.

[03:30] Claude Sonnet 4를 활용해 구식 앱을 현대적인 Next.js 애플리케이션으로 완전히 업그레이드했다고 설명하며, 시청자들에게 좋아요와 구독을 요청합니다.

[03:43] 백엔드 작업 상태 확인 시스템의 필요성을 언급하며, Gemini 2.5 Pro를 사용한 대규모 리팩토링을 시도합니다. 하지만 무한 루프와 다양한 오류로 인해 작업이 복잡해져 나중에 다시 시도하기로 결정합니다.

Gemini 2.5 Pro를 활용해 프론트엔드·백엔드를 분리하는 리팩터링을 시도하지만, 25회 이상의 에이전트 툴 호출과 에러 루프로 인해 작업이 중단되고 다음 기회로 미뤄진다.

타임라인 정보가 없습니다.

Claude 4, OpenAI·Google I/O·Microsoft Build 등 주요 AI 발표를 요약하고, Anthropic이 만든 메시지 전달 프로토콜 MCP를 '새로운 HTTP'로 소개하며 커뮤니티 참여를 독려한다.

타임라인 정보가 없습니다.

[00:00] 안녕하세요, 마이크입니다.

[00:01] 이번 주는 정말 큰 한 주였습니다.

[00:02] Veo 3가 발표되었습니다.

[00:07] Veo 3는 정말 인상적입니다.

[00:08] 바다처럼 거대한 힘입니다.

[00:10] 야생의 길들여지지 않은 위력이죠.

[00:12] 이것이 이번 주 Google I/O의 헤드라인이었습니다.

[00:14] 저는 Codex를 사용해서 제 웹사이트 Pimp My Thumb을 코딩하고 있었습니다.

[00:18] 그리고 현대화를 요청했죠.

[00:20] 하지만 폰트를 바꾸는 것 외에는 별로 한 게 없었습니다.

[00:23] 일주일 정도 Codex를 사용한 후, 솔직히 좀 실망스럽다고 말해야겠네요.

[00:26] 일부 작업은 완전히 실패했고,

[00:29] 현대적인 React, Next, Node로 재구성해달라고 요청했을 때도 인간인 제가 나머지 작업을 해야 했습니다.

[00:40] 그래서 변경사항들을 스크롤하면서 이런 것들을 보게 되었습니다.

[00:44] 할 일: feedback.html에서 UI를 포팅하라고 되어 있네요.

[00:48] Codex가 모든 걸 다 해줄 거라고 생각하고 그냥 자리를 떠날 수 있을 거라 생각했는데

[00:51] 별로 도움이 되지 않았습니다.

[00:53] 그냥 자리표시자만 넣어두고 '이제 당신이 코드를 작성하세요'라고 말하는 식이었어요.

[00:57] 하지만 걱정하지 마세요. Google이 Jules AI를 발표했거든요.

[01:00] GitHub에 연결할 수 있고

[01:02] Codex처럼 개발할 수 있습니다.

[01:03] 하지만 노코드 앱 빌더들에게 가장 큰 발표부터 시작해보죠.

[01:06] 바로 Claude입니다.

[01:08] 네, Anthropic이 며칠 전 첫 개발자 컨퍼런스에서 발표했습니다.

[01:12] Claude Sonnet 4와 Claude Opus 4가 이제 우리 모두가 사용할 수 있게 되었다고요.

[01:17] 그리고 가장 좋은 소식은,

[01:18] 바로 여기 Cursor 안에 있다는 것입니다.

[01:20] 한 가지 아쉬운 점이 있긴 하죠.

[01:22] 첫날부터 Winsurf에는 없다는 것입니다.

[01:24] 사실, 이 비디오가 나올 때쯤이면 이미 Winsurf에도 있을 수도 있고, 어떻게든 될 겁니다.

[01:28] 하지만 Cursor에는 기본적으로 내장되어 있습니다.

[01:30] 자, Claude 4 Opus를 Max 모드로 선택하고 시작해보겠습니다.

[01:34] 제 AI 에이전트에게 말하겠습니다.

[01:36] '이 앱을 현대적인 프레임워크로 완전히 다시 만들어 주세요.

[01:39] 처음부터 시작해서 가능한 한 최대한 현대적이고 새롭게 만들어 주세요.'

[01:43] 이제 작업을 시작하고 어떻게 하는지 보죠.

[01:45] 움직임을 계획하고 있네요.

[01:47] 2초 동안 생각했습니다.

[01:49] 이미 모든 것을 나열하고 제가 한 일을 보고 있습니다.

[01:52] 이제 readme 파일을 보고 있네요.

[01:53] 좋아요, 제 기술 스택을 이해하는 것 같습니다.

[01:55] 그리고 이제 현대화 작업을 시작하겠네요.

[01:58] 생각 속에서 이미 Next.js를 보고 있다고 말했습니다.

[02:01] 그리고 이제 그 프로젝트를 만들고 싶어합니다.

[02:03] 시작합니다. Pimp My Thumb Modern이 생성되고 있습니다.

[02:06] 지금까지 모든 것이 완전히 자율적으로 이루어지고 있고

[02:09] Supabase 통합 작업을 하고 있습니다.

[02:11] 그리고 아직 한 번도 다시 프롬프트를 입력할 필요가 없었습니다.

[02:14] 15분 조금 안 되는 시간 동안 작업해왔고

[02:17] 드디어 새로운 Pimp My Thumb Modern의 첫 번째 빌드를 실행할 준비가 되었습니다.

[02:22] 한번 해보죠.

[02:23] 오류를 발견했네요. 그래서 계속해서 그것을 수정하겠습니다.

[02:26] 좋아요, 완료된 것 같습니다.

[02:27] 여기서 실행해보겠습니다.

[02:29] 네, 작동하고 있습니다. 보죠.

[02:31] 좋아요, 오류에서 Supabase URL이 제공되지 않았다고 보이네요.

[02:34] 그래서 Supabase URL 같은 환경 설정을 어디에 추가해야 하는지 물어보고 있습니다.

[02:38] 좋아요, 완벽합니다.

[02:38] .env 파일을 만들라고 알려주고 있네요. 그렇게 하겠습니다.

[02:42] 이제 앱에 접속해봅시다.

[02:43] 와!

[02:43] 훨씬 더 현대적이네요.

[02:45] 이것 보세요. 정말 놀랍습니다.

[02:46] 화면에 너무 많은 것들이 있긴 하지만,

[02:49] 확실히 여기 있는 제 원래 Pimp My Thumb보다 훨씬 보기 좋습니다.

[02:53] 확실히 업그레이드되었네요.

[02:54] 다크 모드가 되도록 테마를 바꿔보죠.

[02:57] 이제 다크 모드라고 말하겠습니다.

[02:59] 색상과 폰트를 적용하고

[03:02] 기존 사이트의 CSS를 붙여넣겠습니다.

[03:06] 좋네요, 훨씬 나아졌습니다.

[03:08] 기존 사이트와 같지만 더 깔끔해졌네요.

[03:10] 제 채널의 YouTube 영상으로 테스트해보겠습니다.

[03:13] 잘 작동하네요

[03:14] 그리고 훨씬 보기 좋습니다.

[03:17] 다른 YouTube URL로도 해보겠습니다.

[03:18] 바로 생성되고 대기 중이네요.

[03:21] 곧 처리 중으로 바뀔 거예요.

[03:22] 네, 처리 중이네요.

[03:24] 완료될 때까지 기다리겠습니다.

[03:27] 완료됐습니다.

[03:28] 잘 작동하네요.

[03:29] 꽤 괜찮아 보입니다.

[03:30] Next.js를 사용해서 멋진 새 사용자 인터페이스를 만들었습니다.

[03:34] Claude Sonnet 4를 사용해서 구식 앱을 완전히 업그레이드했습니다.

[03:39] 마음에 드시면 좋아요와 구독 부탁드립니다.

[03:41] 매주 이런 영상을 올리고 있습니다.

[03:43] 다음으로는

[03:44] 사용자 브라우저에서 하는 대신 작업 상태를 확인하는 백엔드가 있어야 할 것 같다고 말하고 있습니다.

[03:47] 맞습니다, 그 방향으로 가고 있어요.

[03:50] 하지만 생각보다 시간이 오래 걸리네요.

[03:50] Cursor에서 Gemini 2.5 Pro를 사용해서 대규모 리팩토링을 하겠습니다.

[03:52] 여기서 보시겠지만 Gemini 2.5 Pro는 대규모 리팩토링에 완벽합니다.

[03:58] 그리고 내비게이션, 검색, 문제 해결 등에도 탁월하죠.

[04:02] readme 파일을 업데이트해서 기본적으로 프론트엔드와 백엔드를 요청했습니다.

[04:06] 모든 것을 분리하기 위해서요.

[04:11] 현재는 분리되어 있지 않거든요.

[04:13] 이게 작동하는지 봅시다.

[04:14] 무한 루프에 빠졌네요.

[04:16] 25개의 에이전트 도구 호출과 온갖 오류들.

[04:18] 이 프로젝트는 다른 날에 다시 해봐야겠습니다.

[04:23] 지난 한 주 동안 큰 힘에는 큰 책임이 따르죠.

[04:25] Claude 4.

[04:30] OpenAI 발표들.

[04:31] Google 발표들.

[04:33] Microsoft Build, 그리고 더 많은 것들.

[04:34] 또 다른 큰 헤드라인은 MCP가 새로운 HTTP라는 것입니다.

[04:37] Microsoft Build, Google I/O의 발표들,

[04:41] 그리고 OpenAI도 MCP를 제품에 더 깊이 통합한다고 발표했습니다.

[04:44] Anthropic이 MCP의 창시자라는 점은 말할 것도 없고요.

[04:48] 어떻게 작동하는지 모르신다면,

[04:53] 지금 화면에 보이는 영상을 꼭 보시거나

[04:55] 아래 링크를 확인해보세요.

[04:58] Claude 4와 이번 주에 나온 모든 발표들에 대해

[05:00] 계속 논의할 수 있는 제 커뮤니티 링크도 그곳에서 찾으실 수 있습니다.

[05:04] 시청해주셔서 정말 감사합니다.

[05:08] 지금 화면에 보이는 영상을 꼭 보세요.

[05:10]