AI가 분 단위로 내 앱을 만들어줬다! Claude Code 튜토리얼

Creator Magic 구독자 104,000명

요약

이 영상에서는 Claude Code를 활용해 단 몇 분 만에 완전한 SaaS(서비스형 소프트웨어) 앱의 MVP를 만들어보는 과정을 단계별로 안내합니다. Node.js 설치부터 Claude Code CLI 초기화, 프로젝트 설정, 모델 변경과 프롬프트 작성, 그리고 실행·디버깅·UI 커스터마이징까지 모두 다룹니다. 한 번의 프롬프트로 진행상황을 자동화하고, 최종적으로 $3.06의 비용으로 작동하는 댓글 분석 앱을 완성하며 no-code 환경의 강력함을 보여줍니다.

주요 키워드

Claude Code no-code SaaS MVP Prompt Engineering Cursor Opus 모델 CLI API Key JSON

하이라이트

🔑 Node.js와 Claude Code만 있으면 누구나 쉽게 무코드(no-code) SaaS 앱 구축이 가능하다.
⚡️ 터미널 작업이 낯선 사람을 위해 Cursor를 이용해 시각적 GUI로 프로젝트를 관리할 수 있다.
🌟 한 번의 명확한 프롬프트로 To-Do 리스트 작성, 코드 생성, 환경 설정까지 자동으로 진행된다.
🚀 Claude Sonnet 대신 Opus 모델을 사용해 초반 프로토타입의 정확도와 속도를 극대화할 수 있다.
📌 YouTube Data API와 OpenAI API 키 설정 시 발생하는 오류를 Claude Code 자체 디버깅 기능으로 빠르게 해결한다.
🎨 스크린샷 드래그만으로 앱 UI를 YouTube Studio 스타일로 즉시 변경할 수 있다.
💰 최종 세션 비용은 단 $3.06, no-code 툴을 통한 빠른 MVP 출시의 가성비를 입증했다.

용어 설명

Node.js

서버 사이드 자바스크립트 런타임 환경으로, 프로젝트 실행과 패키지 관리를 위해 필요하다.

SaaS (서비스형 소프트웨어)

클라우드를 통해 소프트웨어를 제공하는 모델로, 별도 설치 없이 브라우저로 접근해 사용한다.

no-code

코딩 없이 시각적 인터페이스나 간단한 명령어만으로 앱을 개발하는 방식을 말한다.

Claude Code

Anthropic의 터미널 기반 AI 코드 생성 도구로, 프롬프트만으로 프로젝트 뼈대부터 완성까지 자동화한다.

CLI (Command Line Interface)

명령어를 입력해 컴퓨터와 상호작용하는 텍스트 기반 인터페이스다.

Cursor

터미널 환경을 시각적 GUI 형태로 보여주는 툴로, 파일 구조와 진행 상황을 한눈에 확인할 수 있다.

Opus 모델

Claude Code에서 제공하는 고성능 대형 언어 모델로, 더 정교한 코드 생성과 디버깅이 가능하다.

MVP (최소 기능 제품)

필수 기능만 갖춘 초기 버전 앱으로, 빠른 실험과 검증을 목적으로 한다.

API Key

YouTube Data API나 OpenAI API에 접근 권한을 부여하는 고유 토큰이다.

JSON

데이터 교환 형식의 하나로, API 응답을 처리할 때 표준으로 사용된다.

화자인 Mike가 이 영상에서 Claude Code를 활용해 no-code 환경에서 완전한 SaaS 앱을 만드는 과정을 단계별로 보여줄 예정임을 안내한다.

[00:00] Claude Code를 사용한 노코드 SaaS 개발 튜토리얼 소개. 처음부터 끝까지 완전한 SaaS 애플리케이션을 구축하는 과정을 안내한다.

모든 운영체제에 맞는 Node.js 다운로드 방법을 설명하며, Windows 사용자는 WSL(Windows Subsystem for Linux) 설정이 추가로 필요함을 주의 사항으로 전달한다.

[00:07] Node.js 설치 과정을 설명하며, Mac과 Windows 환경에서의 설치 방법을 안내한다. Windows에서는 WSL이 필요하다고 설명한다.

터미널에서 간단한 npm 명령으로 Claude Code를 설치하고, 최초 실행 시 subscription(월정액) 또는 pay-as-you-go(종량제) 중 선택해 Anthropic 콘솔에 연결한다.

[00:22] Mac 터미널을 통한 Node.js 설치 완료 후 Claude Code 설치 명령어를 실행하는 과정을 보여준다.

[00:39] Claude Code 첫 실행 시 계정 설정 옵션을 설명한다. Claude 구독 계정 또는 Anthropic 콘솔의 사용량 기반 결제 방식 중 선택할 수 있다.

[00:54] Claude의 가격 구조를 설명하며, Pro($20/월)와 Max($100/월) 요금제의 차이점과 사용량에 대해 안내한다.

[01:22] 터미널 기반인 Claude Code의 한계를 지적하고, Cursor IDE를 사용해 시각적 인터페이스로 작업하는 방법을 제안한다.

Cursor 에디터를 사용해 터미널 명령어와 프로젝트 파일을 시각적으로 확인하는 방법을 소개하며, GUI 환경에서 작업 흐름을 한눈에 볼 수 있도록 돕는다.

[01:45] Cursor IDE에서 Claude Code 프로젝트를 시각적으로 관리하는 방법을 시연한다. YT Comments라는 SaaS 프로젝트 폴더를 생성하고 설정한다.

`claude code init` 명령으로 .claude 폴더 및 Claude.md 파일이 자동 생성되고, 프로젝트 개요와 개발 명령어, 아키텍처 가이드라인을 담을 기반이 마련된다.

[02:11] Cursor의 터미널에서 Claude Code를 실행하고 프로젝트 초기화 과정을 보여준다. 슬래시 명령어를 통해 사용 가능한 기능들을 확인한다.

[02:33] Claude Code가 프로젝트 진행 여부를 확인하면 '예'라고 답하고 자동 진행 모드로 설정합니다. 이때 숨겨진 Dot Claude 폴더와 설정 파일이 생성됩니다.

[02:49] Claude 마크다운 파일이 생성되는데, 이 파일에 프로젝트 지시사항과 개요를 입력할 수 있습니다. 자동 편집 승인 기능이 활성화되어 있습니다.

[03:19] 미리 준비한 유튜브 댓글 분석기 프로젝트 설명을 Claude.md 파일에 붙여넣습니다. 깔끔한 UI, 실행 가능한 인사이트, 유튜브 색상 구성, 빠른 로딩 등을 요구사항으로 명시합니다.

[03:57] 좋은 결과를 얻기 위해서는 처음부터 정말 좋은 프롬프트를 제공하는 것이 중요하다고 강조합니다. 최고의 성공을 위해 Claude Code를 구성하는 것이 필요합니다.

`/config` 명령으로 기본 Sonnet 모델을 Opus 모델로 변경한 뒤, YouTube 댓글 분석기 앱의 요구사항(입력, 기능, UI, 모바일 대응 등)을 Claude.md에 명확히 작성한다.

[04:10] 프롬프트 입력 전에 forward slash config로 설정을 변경합니다. 기본 Claude Sonnet 모델에서 Claude 4 Opus로 변경하는데, 비싸지만 최고의 성공 기회를 제공합니다.

[04:36] 터미널에 프롬프트를 붙여넣고 새 파일에서 정확한 내용을 보여줍니다. 유튜브 동영상 URL을 입력받아 댓글을 분석하고 AI로 FAQ, 포인트, 감정 분석을 수행하는 도구를 요청합니다.

프롬프트를 터미널에 붙여넣고 실행하면, Claude Code가 프로젝트 To-Do 리스트 작성, 패키지 설치, 초기 파일 생성 등을 자동으로 처리하며 진행 상황을 표시한다.

[05:09] 엔터를 누르면 Claude가 작업을 시작하고, 즉시 유튜브 댓글 분석기 도구를 만들어주겠다고 응답하며 프로젝트 계획을 세우기 시작합니다.

[05:21] AI가 프로젝트를 위한 상세한 할 일 목록을 생성하고 체계적으로 작업을 진행하는 모습을 보여줍니다. 시간을 낭비하지 않고 즉시 SaaS 패키지 구축을 시작합니다.

[05:40] 개발자는 AI가 작업하는 동안 커피를 마시며 기다리기만 하면 됩니다. 이때 Stripe와 데이터베이스 통합에 관한 프리미엄 튜토리얼을 소개하며 Creator Magic 커뮤니티를 홍보합니다.

Stripe 및 데이터베이스 통합 튜토리얼을 포함한 유료 커뮤니티 강좌를 홍보하며, 멤버십 가격이 곧 인상될 예정임을 알린다.

[06:08] Claude Code가 할 일 목록을 완료해가며, 상세한 README 파일과 프로젝트별 가이드라인이 포함된 Claude MD 파일을 생성했습니다. 이는 향후 프로젝트 확장 시 일관성을 유지하는 데 도움이 됩니다.

Cursor에서 생성된 README 파일을 열어 설치 방법, 환경 변수 설정(API 키 입력법), 서버 시작 명령을 확인해 실제 실행 준비를 마친다.

[06:55] AI가 제공한 5단계 설치 가이드를 따라 실제 앱을 실행해봅니다. Claude-4 Opus의 성능을 검증하는 단계로, 먼저 터미널에서 npm install을 실행합니다.

`npm start`로 로컬호스트(포트 3000)에 앱을 띄우고 YouTube 주소를 입력해 데이터 호출을 시도하지만, YouTube Data API 미사용 오류로 분석이 실패한다.

[07:25] 환경 설정 파일(.env)을 생성하고 YouTube API 키와 OpenAI API 키를 입력하는 과정을 진행합니다. Claude Code는 API 키 생성에 필요한 URL까지 친절하게 제공해줍니다.

[08:13] API 키를 생성하고 OpenAI API 키 영역에 붙여넣어 설정을 완료합니다.

[08:23] npm start 명령어를 실행하여 서버를 시작하고 localhost:3000에서 YouTube 댓글 분석기가 실행됩니다.

[08:41] 원샷 YouTube 댓글 분석기가 시청자 피드백을 바이럴 영상으로 변환하는 기능을 소개하고 실제 테스트를 진행합니다.

[09:03] YouTube Data API v3 사용 오류가 발생하여 Google Cloud Console에서 API 접근 권한을 설정해야 합니다.

Google Cloud 콘솔에서 YouTube Data API를 활성화하고, Claude Code에 OpenAI 응답 포맷(JSON) 처리를 요구하는 프롬프트를 주어 코드 에러를 자동 수정한다.

[09:15] Google Cloud Console 라이브러리에서 YouTube 데이터 API를 검색하고 활성화하여 API 접근 권한을 설정합니다.

[09:43] API 설정 후 다시 테스트하지만 여전히 댓글 분석에 실패하여 Claude 코드로 돌아가 문제를 해결합니다.

[09:52] MVP를 완성했으므로 비용 절약을 위해 Opus에서 기본 모델로 변경하고 오류 수정을 요청합니다.

[10:17] OpenAI API 응답 형식 오류를 발견하고 Claude가 JSON 처리를 위해 코드를 자동으로 수정합니다.

[10:41] 코드 수정이 완료되어 npm start로 재시작하고 YouTube 댓글 분석기를 다시 테스트합니다.

[10:58] 최종적으로 앱이 성공적으로 작동하여 11.3K 조회수, 47개 댓글, 0.42% 참여율과 함께 감정 분석, 주요 테마, FAQ 등의 상세한 분석 결과를 제공합니다.

앱이 정상 동작해 댓글 통계, 감정 분석, 주요 질문·테마·고충 포인트 등을 자동으로 추출하고 마크다운 파일로 정리된 인사이트를 확인한다.

[11:20] v3 자동화 방법과 비용 문제 해결법을 소개하며, 8초 비디오 제한에 대한 오해를 정리합니다.

[11:31] AI가 YouTube 댓글을 완전히 분석하여 좋아요 수까지 정리하고 마크다운 파일로 내보내는 기능을 시연합니다.

[11:55] Claude 코드 한 번의 프롬프트로 실용적인 SaaS MVP를 완성했으며, API 문제도 간단히 해결했다고 설명합니다.

[12:10] YouTube 스튜디오 스크린샷을 Claude 코드에 드래그 앤 드롭하여 UI 디자인을 즉시 변경하는 과정을 보여줍니다.

YouTube Studio 화면을 스크린샷으로 드래그하여 Claude Code에 전달하면, 앱 CSS가 즉시 스튜디오 인터페이스처럼 업데이트돼 UI를 맞춤화할 수 있다.

[12:47] CSS가 자동으로 변경되어 YouTube 스튜디오와 유사한 인터페이스가 완성되었고, 로고까지 자동 생성된 결과를 확인합니다.

[13:19] MVP 앱 개발 비용이 단 3.06달러였음을 공개하며, Ctrl+C 두 번으로 세션 비용을 확인할 수 있다고 설명합니다.

전체 세션에서 사용된 Anthropic 모델 비용을 확인해 $3.06로 매우 저렴하게 MVP SaaS를 완성했음을 강조하며, no-code 시대의 가능성을 재확인한다.

[13:36] Pimp My Thumb 프로젝트 사례를 들며 Stripe 결제와 Supabase 백엔드 통합으로 며칠 만에 실제 SaaS를 완성했다고 소개합니다.

[13:56] Claude 코드가 MVP SaaS 개발의 최고 선택이며, 코딩 없이도 강력한 앱을 만들 수 있는 놀라운 시대라고 강조합니다.

커뮤니티와 댓글에서 더 많은 사례를 공유할 것을 요청하고, 다음 시청할 영상을 추천하며 영상을 마무리한다.

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

[00:00] 안녕하세요, 저는 마이크입니다. 이 영상에서는 Claude Code를 사용해서 노코드로 첫 번째 SaaS를 처음부터 끝까지 만드는 방법을 보여드리겠습니다.

[00:03] 여러분만의 첫 번째 SaaS를 Claude Code로 코딩 없이 구축하는 방법을 알려드릴게요.

[00:07] 바로 시작해보겠습니다.

[00:07] 먼저 해야 할 일은 Node.js를 다운로드하는 것입니다.

[00:10] 정말 쉽습니다.

[00:11] 모든 운영체제에 맞는 버전이 있어요.

[00:14] 저는 맥을 사용하니까 간단하지만, 윈도우에서도 할 수 있습니다.

[00:17] 다만 윈도우에서는 WSL로 Windows에서 Linux를 사용해야 하는데

[00:21] 이건 좀 더 복잡합니다.

[00:22] 맥에서는 그냥 설치하고 이렇게 맥 터미널을 실행하면 됩니다.

[00:25] 터미널이라고 입력하면 터미널이 나타납니다.

[00:28] 노드를 설치하고 모든 설정이 완료되면

[00:31] 여기 있는 간단한 명령어를 입력하기만 하면 됩니다.

[00:33] 아래 설명란에 적어놓을게요.

[00:35] 설치는 2초면 끝납니다.

[00:37] 이런 식으로 Claude Code가 나타나죠.

[00:38] 다음으로 Claude Code를 처음 실행해서

[00:39] 모든 설정이 완료되었는지 확인하겠습니다.

[00:42] 그러려면 그냥 입력하면 됩니다.

[00:44] Claude.

[00:45] 처음 실행하면 간단하게 물어볼 거예요.

[00:47] 구독이 있는 Claude 계정을 사용하시겠냐고요.

[00:49] 이미 Claude 구독이 있다면 완벽합니다.

[00:51] 월 20달러 또는 맥스의 경우 월 100달러죠.

[00:54] 아니면 Anthropic 콘솔을 사용할 수 있는데, 이건 기본적으로 사용한 만큼 결제하는 방식입니다.

[00:59] 이미 Claude 계정이 있거나 결제를 시작하려면

[01:02] 구독을 사용하는 것을 추천합니다. 예상치 못한 비용이 발생하지 않거든요.

[01:07] 저는 사용량 기반 결제를 사용하며 요금을 주의 깊게 확인하고 있어요.

[01:10] Anthropic 가격 페이지를 보시면

[01:12] Pro는 실제로 매우 합리적이고

[01:13] 터미널에서 Claude Code에 접근할 수 있습니다.

[01:16] 하지만 맥스를 결제하면 5배에서 20배 더 많이 사용할 수 있어요.

[01:19] 많은 개발을 한다면 맥스를 고려해보실 만합니다.

[01:22] Claude Code는 터미널 기반입니다. 즉, 명령줄에서 타이핑해야 하는데

[01:25] 많은 사람들에게는 이게 무서울 수 있어요.

[01:28] Claude Code를 시각적으로 만들어줄 엄청난 팁을 하나 드릴게요.

[01:31] 모든 작업을 볼 수 있고 터미널에서 작업하는 대신

[01:35] 멋진 그래픽 인터페이스에서 편집까지 할 수 있습니다.

[01:39] 이를 위해 Cursor를 다운로드했는지 확인하세요.

[01:41] Pro든 무료든 상관없어요.

[01:42] 저는 Pro 계정을 사용하며 프로젝트를 열어보겠습니다.

[01:45] 제 맥에서 Claude Code라는 폴더로 가서

[01:48] YT Comments라는 폴더를 만들겠습니다.

[01:50] 이게 제 SaaS의 이름이 될 거예요.

[01:52] 완료되면 열기를 클릭합니다.

[01:54] 이제 시각적으로 여기 안에 있는 것을 볼 수 있어요.

[01:57] 아직은 너무 걱정할 필요 없습니다.

[01:59] 오른쪽에 있는 이 작은 창을 제거하겠습니다.

[02:02] 여기가 기본적으로 파일들이 나타날 곳입니다.

[02:05] 시작하려면 터미널로 가서 새 터미널을 선택하고

[02:08] 아래에 무언가 나타날 거예요.

[02:09] 이 문제 영역을 닫고

[02:11] 여기서 Claude를 입력해서 Claude Code를 실행시키겠습니다.

[02:15] 작동하는 걸 볼 수 있어요.

[02:16] 여기 있네요.

[02:17] 처음 실행할 때 작업할 준비가 되었습니다.

[02:19] 슬래시를 입력해보겠습니다.

[02:21] 실행할 수 있는 모든 명령어가 표시됩니다.

[02:22] 이렇게 입력하시면 됩니다.

[02:24] 그러면 프로젝트가 초기화됩니다.

[02:27] Claude Code가 이제 필요한 모든 것을 설정하고 있습니다.

[02:29] 새로운 SaaS 아이디어를 작업할 수 있도록 말이죠.

[02:33] 그리고 언젠가는 Claude가 제안한 것을 진행할지 물어봅니다.

[02:35] 그냥 '예'라고 하면 됩니다. 그러면 다시 물어보겠죠.

[02:39] 또 물어보네요.

[02:40] 그래서 저는 '예, 그리고 다시 묻지 마세요'라고 하겠습니다.

[02:41] 이제 자동조종 모드로 실행됩니다.

[02:42] 그리고 여기 보시면 'Dot Claude'라는 폴더가 생성되었습니다.

[02:46] 설정 파일이 들어있는 숨겨진 폴더입니다.

[02:49] 좋습니다. 이제 Claude 마크다운 파일을 만들고 있습니다.

[02:51] 이것은 매우 중요합니다. 여기에 우리 지시사항이 들어갈 거예요.

[02:54] 그리고 보시면 실제로 이제 완료되었습니다.

[02:57] 그리고 Claude Code 내부에서 자동 편집 승인이 켜져 있습니다.

[03:00] 이 Claude MD 파일 안에서 실제로 타이핑을 시작할 수 있습니다.

[03:03] 우리가 구축하고 있는 프로젝트나 SaaS에 대한 정보를 입력할 수 있어요.

[03:07] 그리고 여기서 이 파일이 무엇을 하는지 보여줍니다.

[03:09] Claude Code에 가이드를 제공합니다.

[03:11] 여기에 프로젝트 개요를 제공할 공간이 있고, 개발 명령어들,

[03:15] 필요할 수 있는 명령어들과 사용하고 싶은 아키텍처를 설명할 수 있습니다.

[03:18] 저는 미리 뭔가를 만들어놨습니다.

[03:19] 그래서 실제로 Command+A로 여기의 모든 내용을 삭제하고 Command+V로 붙여넣기를 하면

[03:24] 유튜브 댓글 분석기를 요청했고, 단순히 깔끔한 UI가 될 거예요.

[03:28] 실행 가능한 인사이트에 집중합니다.

[03:30] 유튜브의 빨간색과 흰색 색상 구성을 사용하고, 빠른 로딩을 우선시하며,

[03:34] 분석하고, 전문용어 없는 명확한 언어를 사용할 거예요.

[03:38] 모바일 반응형 지원과 진행 상황 표시기 표시를 확실히 포함해서

[03:42] 항상 실행하면서

[03:43] 유튜브 댓글을 분석해서 멋진 아이디어들을 생각해낼 거예요.

[03:47] 이제 Claude.md 파일을 만들었으니 Command+S로 저장하거나

[03:50] PC에서는 Ctrl+S로 저장했는지 확인하세요.

[03:54] 그리고 이제 우리 앱의 첫 번째 부분을 구축해보겠습니다.

[03:57] 이것을 제대로 하는 것이 정말 중요합니다.

[03:59] 처음부터 정말 좋은 프롬프트를 제공해야 좋은 결과를 얻을 수 있다는 것을 아무리 강조해도 지나치지 않습니다.

[04:03] 좋은 것을 얻기 위해서요.

[04:04] 그리고 한 가지 더 팁은 최고의 성공을 위해 Claude Code를 구성하는 것입니다.

[04:09] 그래서 여기 아래에서, 전에

[04:10] Claude Code에 프롬프트를 입력하기 전에, 저는 forward slash config를 할 거예요.

[04:13] 그리고 바로 여기 있습니다.

[04:14] 이제 Claude Code 내부에서 모든 종류의 작업을 하고 구성할 수 있습니다.

[04:19] 여기서 가장 중요한 것은 모델로 가서

[04:21] 기본 모델인 Claude Sonnet에서 Claude 4 Opus로 변경하는 것입니다.

[04:27] 이것은 매우 비싸지만 성공할 수 있는 최고의 기회를 제공할 거예요.

[04:31] 그것을 완료하고, 이제 여기 터미널에 프롬프트를 복사해서 붙여넣을 거예요.

[04:36] 그리고 보시면 실제로 '붙여넣기된 텍스트'라고 표시됩니다.

[04:39] 하지만 실제로 새 파일을 시작한다면

[04:41] 여기에서 Claude에게 보낸 제 프롬프트가 정확히 어떤 것인지 보여드리겠습니다.

[04:44] 보시면 저는 Claude에게 요청하고 있습니다

[04:45] 간단하지만 강력한 유튜브 댓글 분석기 도구를 만들어달라고 말이죠.

[04:49] 유튜브 동영상 URL을 입력으로 받아서 모든 댓글을 가져오고,

[04:53] 그다음 AI를 사용해서 자주 묻는 질문들, 포인트들을 식별하고

[04:57] 언급된 것들, 후속 콘텐츠, 그리고 감정적 정서를 분석합니다.

[05:00] 구체적이고 실행 가능한 비디오 아이디어를 생성하고 그것들을 제시할 거예요

[05:04] 깔끔하고 읽기 쉬운 형식으로 말이죠.

[05:06] 그게 제가 추구하는 것입니다.

[05:07] 이것이 붙여넣기된 내용입니다.

[05:09] 여기서 엔터를 누르고 Claude가 집중하도록 할 거예요.

[05:12] 제 프로젝트에서 작업하도록 말이죠.

[05:14] 그리고 이미 보시면 '유튜브 댓글 분석기 도구를 만들어드리겠습니다'라고 나옵니다.

[05:18] 프로젝트를 계획하는 것부터 시작하겠다고 하고, 바로 보실 수 있어요

[05:21] 모든 것을 처리할 수 있는 멋진 할 일 목록을 만들어줍니다.

[05:24] 시작하기 위해 해야 할 모든 것들이 담겨 있어요.

[05:26] 그리고 시간을 낭비하지 않습니다.

[05:27] 이 모든 것을 제가 위해 만들어주고, 할 일 목록을 하나씩 체크해나가기 시작합니다.

[05:31] 진행하면서 현재 작업 중인 부분을 강조해서 보여줍니다.

[05:34] 자, 시작됩니다.

[05:35] 벌써 새로운 SaaS를 위한 패키지를 만들어서 실행할 준비를 하고 있는 것을 볼 수 있습니다.

[05:40] 이 단계에서 제가 할 일은 커피를 마시는 것뿐입니다.

[05:42] 아, 그리고 기다리는 동안 말씀드릴 게 있습니다.

[05:45] 제 프리미엄 커뮤니티에 튜토리얼을 방금 올렸습니다.

[05:47] MCP 서버를 사용해서 여러분의 SaaS에 Stripe와 데이터베이스를 통합하는 방법에 관한 내용입니다.

[05:53] 정말 따라하기 쉽습니다.

[05:54] 완전하고

[05:55] 포괄적이며, 단계별 가이드와 함께 제공되는 비디오도 있습니다.

[05:59] 그것이 바로 Creator Magic입니다.

[06:00] 350명의 멤버에 도달하면 프리미엄 가격이 올라가며, 많은 프리미엄 기능들이 있습니다.

[06:04] 그리고 전 세계의 빌더들이 훌륭한 것들을 만들어내고 있습니다.

[06:08] 자, Claude Code가 무엇을 해왔는지 살펴봅시다.

[06:10] 실제로 할 일 목록이 거의 완료되어 가고 있는 것을 볼 수 있습니다.

[06:13] 지금 작업한 내용을 설명하는 리드미 파일을 작성하고 있습니다.

[06:16] 물론 Cursor 안에서 이 리드미 파일을 열어보면

[06:19] Claude Code가 작업한 모든 것을 볼 수 있습니다.

[06:22] 설정하는 방법을 알려주는 아름다운 리드미 파일을 만들었습니다.

[06:25] 필요할 경우 API 키를 넣는 방법과 서버를 시작하는 방법까지 포함되어 있어요.

[06:30] 이것 좀 보세요.

[06:30] 마지막으로 편집하고 있는 것은

[06:31] Claude MD 파일을 프로젝트별 가이드라인에 맞게 수정하는 것입니다.

[06:35] 작업한 내용을 바탕으로 말이죠. 그리고 모든 것이 완료되었습니다.

[06:38] 이제 Claude MD 파일로 다시 돌아가보면

[06:41] 정확한 아키텍처 아이디어들로 훨씬 길어져 있는 것을 볼 수 있습니다.

[06:45] 즉, 프로젝트가 성장하면서 Claude는 항상 이 파일을 참조할 것입니다.

[06:49] 그래서 환각을 일으키거나 프로젝트를 망치지 않을 거예요. 정말 좋죠.

[06:53] 정말로 그렇게 간단했습니다.

[06:54] 완료된 것 같네요.

[06:55] 이제 사용 방법을 알려주고 있고, 간단한 1, 2,

[06:59] 3, 4, 5단계를 제시합니다.

[07:00] 만약 이것이 단 하나의 프롬프트로 작동한다면 정말 놀라울 거예요.

[07:04] 이것이 Claude-4 Opus의 실제 동작입니다.

[07:06] 먼저 Cursor에서 여기 플러스를 눌러 새 터미널 창을 시작하겠습니다.

[07:09] 여기 탭을 사용해서 창들 사이를 전환할 수 있고, 첫 번째 명령어를 복사하겠습니다.

[07:14] 실행할 준비를 위해 설치하는 npm install 명령어입니다.

[07:19] YouTube 댓글 앱과 같은 디렉터리에서 실행하겠습니다.

[07:22] 와, 정말 빨랐네요. 완료되었습니다.

[07:25] 다음으로 ENV 예제를 .env로 복사하고 API 키를 추가해야 한다고 알려줍니다.

[07:30] 여기 .env.example이 있습니다.

[07:33] 여기를 보시면

[07:34] YouTube API 키와 OpenAI API 키가 필요합니다.

[07:38] 먼저 메뉴에서 복사를 눌러서 이 파일을 복사하겠습니다.

[07:43] 그런 다음 Command+V로 붙여넣겠습니다.

[07:45] 그리고 단순히 이름을 변경해서

[07:48] 끝에 example이 없는 .env로 만들겠습니다.

[07:52] 이제 여기에 API 키를 입력할 수 있습니다.

[07:54] 이것들은 비공개이므로 공개하지 마세요.

[07:56] 먼저 제가 이미 가지고 있는

[07:57] Google Cloud의 프로젝트를 사용하여 API 키를 생성하겠습니다.

[08:01] 복사해서

[08:03] 여기에 붙여넣겠습니다.

[08:04] 좋게도 Claude Code는

[08:05] 제가 모를 경우를 대비해서 API 키를 생성하는 데 필요한 URL도 알려주었습니다.

[08:09] OpenAI의 경우도 마찬가지입니다. Command를 누르고 클릭해보겠습니다.

[08:13] 그리고 'white comments'라는 이름으로 키를 생성하겠습니다. 이렇게 복사해서

[08:17] OpenAI API 키 영역에 붙여넣으면 됩니다.

[08:22] 꽤 긴 키네요.

[08:23] 좋습니다. 이제 npm start를 실행할 준비가 되었습니다.

[08:26] 그러면 서버에 접속할 수 있을 것 같습니다.

[08:29] 명령줄에서 해당 명령어를 실행해보겠습니다.

[08:32] 보세요! YouTube 댓글 분석기가 localhost:3000에서 실행되고 있습니다.

[08:37] Command+클릭하면... 와! 이걸 보세요.

[08:39] 정말 놀랍습니다.

[08:41] 원샷 YouTube 댓글 분석기가 시청자 피드백을

[08:45] 다음 바이럴 영상으로 변환해줍니다.

[08:48] 하지만 과연 작동할지가 문제입니다. 테스트해보겠습니다.

[08:50] 여기 제 Create a Magic YouTube 채널이 있고, 제 영상을 가져와서

[08:54] 영상 링크 주소를 복사하겠습니다.

[08:56] Claude 코드로 새로 만든 원샷 YouTube 댓글 분석기로 가서

[08:59] URL을 붙여넣습니다. 네.

[09:03] 한 번 더.

[09:03] YouTube Data API v3이 사용되지 않았습니다.

[09:06] Claude가 다시 대안을 제공해준 것이 좋네요.

[09:09] 이건 사람 실수입니다. 아니, 제 실수입니다.

[09:12] Google Cloud Console에서 기본적으로

[09:15] 이 API 키가 YouTube 데이터 라이브러리에 접근할 수 있도록 설정해야 합니다.

[09:19] 그러기 위해 라이브러리로 가서 YouTube를 검색하겠습니다.

[09:24] 그리고 YouTube 데이터를 검색합니다.

[09:26] 네, 바로 이것이 필요한 것입니다.

[09:28] 여기 있습니다. 완벽해요.

[09:29] 클릭해서 들어가서 활성화를 클릭합니다.

[09:31] 그렇게 간단해야 합니다.

[09:33] 이 회전하는 원이 멈추면

[09:36] 준비가 됩니다. 분석기로 돌아가겠습니다.

[09:38] URL을 복사해서 새로고침하고 한 번 더 해보겠습니다.

[09:41] 이제 작동해야 합니다.

[09:43] 이걸 보세요.

[09:44] 돌아가고 있습니다. 호출하고 있다는 뜻입니다.

[09:47] 안타깝게도 여전히 댓글 분석에 실패했습니다.

[09:49] 그래서 Claude 코드로 다시 돌아가겠습니다.

[09:52] 그리고 이제

[09:52] Opus를 사용해서 초기 프로토타입을 만들었으니

[09:55] 이 모델을 기본 모델로 바꾸겠습니다. MVP를 만들었으니

[09:59] 그렇게 많은 돈을 쓸 필요가 없거든요.

[10:04] 세부사항을 여기에 붙여넣겠습니다.

[10:06] 붙여넣은 텍스트 오류가 있습니다.

[10:08] 수정해달라고 하면 Claude 코드가 제 API에서 무슨 일이

[10:13] 일어나고 있는지 탐색해서 앱이 작동하도록 수정해줄 것입니다.

[10:17] 여기서 OpenAI API 오류가 보입니다.

[10:20] 응답 형식이 문제를 일으키고 있습니다.

[10:23] 지원되지 않습니다.

[10:24] JSON을 처리하도록 코드를 업데이트하고 있습니다. 물론

[10:28] API에서 받는 피드백입니다.

[10:30] 여기서 모든 편집을 볼 수 있습니다. 전혀 문제없습니다.

[10:35] 끝난 것 같습니다.

[10:36] 그건 아니었고... 끝난 것 같습니다. 그리 오래 걸리지 않았습니다.

[10:39] 몇 가지 변경사항을 만들었다고 알려줬습니다.

[10:41] 도구를 다시 실행하면 작동할 것입니다.

[10:43] 훌륭합니다.

[10:44] Control+C로 나가서 npm start로 다시 시작하겠습니다.

[10:49] 이제 YouTube 댓글 분석기로 돌아가서

[10:52] 새로고침하고 URL을 한 번 더 붙여넣겠습니다.

[10:56] 긴장감이 고조되고 있습니다.

[10:58] 와! 이걸 보세요. 작동합니다.

[11:01] 제 유일한 무료 튜토리얼 영상이 11.3K 조회수를 기록했습니다.

[11:05] 47개 댓글, 0.42% 참여율입니다.

[11:09] 감정 분석 결과도 제공해주는데 정말 놀랍습니다.

[11:12] 주요 테마, 자주 묻는 질문, 우선순위가 높은 문제점들입니다.

[11:15] 여기 있습니다.

[11:16] 오 세상에.

[11:18] 가장 많이 묻는 두 가지 질문에 대한 답변입니다.

[11:20] v3로 자동화하는 방법을 알려드리겠습니다.

[11:21] v0 three의 비용이 얼마인지 궁금하실 거예요.

[11:23] v0 three의 비용 문제를 해결하는 방법도 알려드리겠습니다.

[11:26] v3가 8초 비디오만 허용한다는 일반적인 오해를 정리해드리겠습니다.

[11:31] 자세한 분석 결과를 보세요.

[11:34] 정말 놀랍습니다. 제 모든 댓글을 완전히 분석해서 분류했어요.

[11:39] 해당 댓글들의 좋아요 수까지 함께 정리했네요.

[11:42] 분석 결과를 내보내기까지 할 수 있어요.

[11:45] 정말 대단하네요.

[11:46] 마크다운 파일로 만들어줬어요.

[11:48] 마크다운 파일을 열어보니 말 그대로 모든 내용이 정리되어 있네요.

[11:51] 향후 v3에 대한 영상을 만들 때 필요한 모든 내용들이 정리되어 있습니다.

[11:54] 정말 멋져요.

[11:55] Claude 코드와 Claude Opus 모델로 단 하나의 프롬프트로 이 모든 것을 만들었다는 걸 기억하세요.

[12:00] API 관련해서 약간의 문제 해결이 필요했지만,

[12:04] 그것도 한 번의 프롬프트로 해결됐어요.

[12:06] 정말 실용적인 SaaS의 MVP를 완성했습니다.

[12:10] 이번 튜토리얼의 마지막으로, 현재 모습도 마음에 들지만

[12:13] 조금 다른 모습으로 바꿔보고 싶어요.

[12:15] YouTube 스튜디오처럼 보이게 만들어볼까요.

[12:18] YouTube 스튜디오로 가서 화면을 스크린샷으로 찍어보겠습니다.

[12:22] 정확히 어떤 모습인지 캡처해보죠.

[12:24] 이제 Claude 코드로 돌아가서 'UI를 이렇게 만들어줘'라고 말해보겠습니다.

[12:29] 네, 어디서든 드래그 앤 드롭이 가능해요.

[12:32] 이 경우에는 데스크탑 스크린샷을 Claude 코드로 바로 끌어다 놓을 수 있어요.

[12:36] 그러면 실제로 여러분이 참조하는 내용을 인식해요.

[12:39] 이제 여기서 디자인을 확인할 수 있어요. 이건 YouTube

[12:42] 스튜디오 커뮤니티 댓글 인터페이스의 다크 테마네요.

[12:45] UI를 여기에 맞게 업데이트하겠습니다.

[12:47] 모든 CSS를 변경하고 있어요. 이게 바로 제 앱의 외관이에요.

[12:51] 정말 이렇게 쉬워요.

[12:52] 수정한 모든 내용을 알려줬으니 다시 브라우저로 돌아가보죠.

[12:56] 새로고침 버튼을 누르면... 와!

[12:58] 이제 정말 YouTube 스튜디오처럼 보이네요.

[13:02] 재밌게도 위쪽에 YouTube 로고까지 만들어줬어요.

[13:04] 정말 놀라워요.

[13:05] 자, 이제 진행해보죠.

[13:07] 최신 영상을 여기에 끌어다 놓고 앱으로 돌아가보겠습니다.

[13:10] 여기에 붙여넣기 하고, 다시 한번 긴장감 넘치는 순간입니다.

[13:13] 분석이 진행되는 동안

[13:14] 새로 업데이트된 UI로 얼마나 멋지게 보이는지 확인해보죠.

[13:18] 스크린샷 하나만으로 이 모든 걸 해냈어요.

[13:19] 이제 이 작은 MVP 앱을 만드는 데 얼마나 비용이 들었는지 궁금하실 거예요.

[13:22] 가장 좋은 점은 Ctrl+C를 두 번 누르면

[13:26] 세션의 총 비용 요약을 보여준다는 거예요.

[13:30] SaaS를 만드는 데 든 비용이 고작 3.06달러였어요.

[13:35] 정말 멋진 기술이에요.

[13:36] 제가 다른 훌륭한 프로젝트인 'Pimp My Thumb'으로도 이 작업을 해왔어요.

[13:38] 썸네일의 개선된 버전을 생성할 수 있는 서비스죠.

[13:42] 지난주에는 Stripe을 사용해서 크레딧 결제를 시작했고,

[13:46] 한동안 백엔드에 Supabase를 통합해서 사용하고 있어요.

[13:49] 며칠 만에 완성한 진짜 SaaS예요. 예전처럼 몇 주나 몇 달이 걸리지 않았죠.

[13:53] 과거에는 몇 주나 몇 달이 걸렸을 일이에요.

[13:56] Claude 코드가 현재 최고의 선택이라고 생각해요.

[14:01] MVP SaaS를 만들고, 출시하고, 고객을 확보하고, 수익을 창출하는 데 말이죠.

[14:07] 코딩하기에 정말 놀라운 시대이고, 가장 좋은 점은

[14:10] 코딩을 할 필요조차 없다는 거예요.

[14:11] 코드가 전혀 필요하지 않아요.

[14:13] Claude 코드가 어떻게 작동하는지 이해하면, 그 강력함을 알게 될 거예요.

[14:17] 여러분이 무엇을 만들어낼지 기대됩니다.

[14:19] 이 모든 내용을

[14:20] 제 커뮤니티와 아래 댓글에서 논의하고 있어요.

[14:23] 시청해주셔서 감사합니다. YouTube가 다음에 볼 영상을 화면에 보여주고 있어요.

[14:26] 꼭 시청해보세요. 감사합니다.