Gemini 3 Pro + Spline으로 3D 웹사이트 만들기 | 실전 바이브코딩 튜토리얼

코드 거의 없이, AI와 대화하면서 3D 웹사이트를 만들어봤습니다.
Spline으로 3D 오브젝트를 가져오고, Gemini 3 Pro에게 개발을 맡기는 워크플로우입니다.
"이런 게 진짜 되나?" 싶은 분들께 직접 보여드립니다.

🔗 링크
Spline: https://spline.design

🙋‍♂️ 소개
인디 개발자로 AI 랜딩페이지 빌더 Caramell을 만들고 있습니다.
개발, AI 도구, 1인 창업 이야기를 나눕니다.

🌐 Caramell: https://caramell.app
🧵 Threads: https://www.threads.com/@jayychoii
🐦 X/Twitter: https://x.com/jayychoii_

Claude Code + Gemini 3 Pro로 랜딩페이지 만들기 | 실전 바이브코딩 튜토리얼

코드 없이, 바이브코딩만으로 랜딩페이지를 만들어봤습니다.
Video background + GSAP motion + Unicorn Studio를 사용했습니다.
"이런 게 진짜 되나?" 싶은 분들께 직접 보여드립니다.

🔗 링크
Envato: https://elements.envato.com/
Pixabay: https://pixabay.com/
Unicorn Studio: https://www.unicorn.studio/

🙋‍♂️ 소개
인디 개발자로 AI 랜딩페이지 빌더 Caramell을 만들고 있습니다.
개발, AI 도구, 1인 창업 이야기를 나눕니다.

🌐 Caramell: https://caramell.app
🧵 Threads: https://www.threads.com/@jayychoii
🐦 X/Twitter: https://x.com/jayychoii_

디자인부터 결제 배포까지 | 바이브코딩 풀코스

바이브코딩으로 실제 서비스를 처음부터 끝까지 만드는 전 과정을 담았습니다.
아직 바이브코딩이 어려우신 분들께 많은 도움이 되었으면 좋겠습니다.

⏱️ 타임라인
00:00:00 | 하이라이트
00:00:41 | 인트로
00:00:51 | Part 1 루트 (Next.js, GitHub, 랜딩페이지)
00:10:45 | Part 2. 로그인 (Supabase, Google OAuth)
00:17:14 | Part 3. 대시보드
00:21:14 | Part 4. AI 썸네일 생성 (Gemini)
00:32:19 | Part 5. 결제 (Polar)
00:48:35 | Part 6. 크레딧 & 디자인
00:57:31 | Part 7. 배포 (Vercel, 도메인)
01:05:43 | Part 8. 마무리

🛠️ 사용 기술
IDE: Antigravity
AI: Claude Code
Framework: Next.js
DB & Auth: Supabase
AI: Gemini
Payment: Polar
Deploy: Vercel

🔗 링크
Nailart: https://www.nailartai.xyz/

🙋‍♂️ 소개
인디 개발자로 AI 랜딩페이지 빌더 Caramell을 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

1년 동안 AI 서비스 3개를 만들었고, 전부 실패했습니다.
3번의 실패에서 배운 것들, 그리고 4번째 도전에 대해 솔직하게 기록합니다.

바이브코딩으로 자유를 만들어가는 과정을 처음부터 끝까지 보여드리겠습니다.

🙋‍♂️ 소개
인디 개발자로 AI 랜딩페이지 빌더 Caramell을 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

바이브코딩 풀코스 | AI 음악 생성 서비스를 처음부터 끝까지 만드는 전 과정을 담았습니다.

지난 영상이 생각보다 많은 관심을 받게되어 감사한 마음으로 하나 더 준비했습니다.
그리고 이전 영상에서 어렵다는 피드백이 있어 개념적인 부분을 조금 더 담아보았습니다.

⏱️ 타임라인
00:00:00 | 하이라이트
00:01:26 | 인트로
00:04:02 | Part 1 시작하기 (Next.js, GitHub, 랜딩페이지)
00:15:46 | Part 2. 로그인 (Supabase, Google OAuth)
00:22:28 | Part 3. 워크스페이스
00:26:18 | Part 4. AI & Music (Replicate)
00:38:51 | Part 5. 결제 (Polar)
00:50:11 | Part 6. 크레딧 & 디자인
00:58:33 | Part 7. 배포 (Vercel, 도메인)
01:07:33 | Part 8. 마치며

🛠️ 사용 기술
IDE: Antigravity
AI: Claude Code
Framework: Next.js
DB & Auth: Supabase
AI: Replicate
Payment: Polar
Deploy: Vercel

🔗 링크
Mu8ic: https://mu8ic.xyz/

☕ 커피 한 잔으로 응원하기
https://buymeacoffee.com/jayychoii

🙋‍♂️ 소개
인디 개발자로 AI 랜딩페이지 빌더 Caramell을 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

AI 모델과 바이브코딩 도구, 뭘 써야 하는지 제대로 정리했습니다.

GPT, Claude, Gemini, Grok 4가지 AI 모델과 Cursor, Claude Code, V0, Lovable 등 주요 바이브코딩 도구들을 직접 써본 경험을 바탕으로 비교하고, 개인적인 티어까지 매겨보았습니다.
결론부터 말하면, 도구보다 중요한 게 있습니다.

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

클로드 코드의 최신 기능과 Remotion을 활용해서 코드로 영상을 만들어봤습니다.
Remote Control로 폰에서도 이어서 작업하는 과정까지 직접 보여드립니다.

🔗 링크
Remotion: https://remotion.dev
Remotion 프롬프트 갤러리: https://remotion.dev/prompts

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

자는 동안 AI가 일하게 만들었습니다 | 클로드 Schedule Task 실전 활용

Claude Code의 최신 기능인 /loop와 Schedule Task를 실제 워크플로우에 적용해봤습니다.
자는 동안 트렌드 수집부터 카드뉴스 생성까지 자동화한 과정을 직접 보여드립니다.

🔗 링크
Smithery: https://smithery.ai

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

“아이디어가 검증되지 않으면 개발도 마케팅도 소용없다”
지금까지 제가 왜 실패했는지, 책 한 권이 전부 설명해줬습니다.

제 실패 사례를 '아이디어 불패의 법칙'의 프레임으로 직접 분석해봤습니다.

📕: 아이디어 불패의 법칙 (알베르토 사보이아)

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

이 영상에서는 OpenClaw가 왜 강력한지, Claude의 기능들은 어떻게 다른지,
그리고 진짜로 OpenClaw를 대체할 수 있을지 구조적으로 비교 분석합니다.

🔗 링크
Claude Code Channels 공식 문서: https://code.claude.com/docs/en/channels
Claude Dispatch: https://support.claude.com/en/articles/13947068
Channels Reference (커스텀 채널 만들기): https://code.claude.com/docs/en/channels-reference
OpenClaw GitHub: https://github.com/openclaw/openclaw

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

클로드가 이제 마우스를 움직이고, 앱을 열고, 키보드를 칩니다.
Computer Use + Dispatch를 실전에서 써봤습니다.
카카오톡 자동 전송부터 앱스토어 리뷰 분석까지

🔗 링크
Claude Computer Use 공식 블로그: https://claude.com/blog/dispatch-and-computer-use
Claude Dispatch 설정 가이드: https://support.claude.com/en/articles/13947068
Claude Desktop 다운로드: https://claude.com/download
Claude in Chrome 확장: https://chromewebstore.google.....com/detail/claude/fc

📌 관련 영상
클로드는 오픈클로를 대체할 수 있을까?: https://www.youtube.com/watch?v=ptMI4kRjfX8
자는 동안 AI가 일하게 만들었습니다 | Schedule Task: https://www.youtube.com/watch?v=AbpQke6CFEo

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

요즘 AI 코딩 쪽에서 동시에 터진 두 가지, Gstack과 하네스 엔지니어링.

이 영상에서는 두 기술이 정확히 어떤 문제를 해결하려고 나온 건지,
실제로 어떻게 작동하는지 살펴보고, 우리가 어떻게 접근하면 좋을지 이야기합니다.

🔗 링크
Gstack GitHub: https://github.com/garrytan/gstack
Mitchell Hashimoto 블로그: https://mitchellh.com/writing/....my-ai-adoption-journ
Anthropic 하네스 설계 블로그: https://www.anthropic.com/engi....neering/harness-desi
Anthropic 장기 에이전트 하네스: https://www.anthropic.com/engi....neering/effective-ha
OpenAI 하네스 엔지니어링: https://openai.com/index/harness-engineering/
TechCrunch Gstack 기사: https://techcrunch.com/2026/03..../17/why-garry-tans-c

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

클로드 코드의 전체 소스코드가 유출됐습니다.
512,000줄, 1,900개 파일을 분석한 자료들을 전부 읽어보고,
우리가 놓치고 있던 핵심 인사이트 7가지를 정리했습니다.

⏱ 타임라인
00:00 유출 사건 요약
01:09 1. 챗봇이 아니라 에이전트 런타임이었습니다
01:48 2. CLAUDE.md는 매 턴마다 주입되고 있었습니다
02:26 3. 서브에이전트 5개를 돌려도 비용은 거의 같습니다
03:26 4. 권한 팝업은 설정으로 없앨 수 있습니다
03:46 5. 컨텍스트 관리에 숨겨진 로직들
04:43 6. 훅 시스템
05:39 7. 숨겨진 기능 108개

📎 깃허브: https://github.com/ultraworkers/claw-code

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

OpenAI가 Anthropic의 클로드 코드 안에 공식 Codex 플러그인을 넣었습니다.

이 영상에서는 Codex 플러그인과 GitHub 스타 10만 개의 Superpowers 플러그인을
직접 설치하고 확인해보며, 각각의 장단점을 솔직하게 정리했습니다.

📌 다루는 내용
- 클로드 코드 관련 최신 플러그인 소식을 찾는 법
- Codex Plugin: 설치, review, adversarial review 데모
- Superpowers: TDD 강제 워크플로우, 서브에이전트 구조
- gstack / GSD와의 차이점
- 각 플러그인의 장단점과 실제 사용 판단 기준

🔗 링크
Codex Plugin: https://github.com/openai/codex-plugin-cc
Superpowers: https://github.com/obra/superpowers
공식 플러그인 디렉토리: https://claude.com/plugins
awesome-claude-code: https://github.com/hesreallyhi....m/awesome-claude-cod

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

Claude Code로 작업하다가 시각적으로 정리가 필요할 때,
Excalidraw와 Claude Code를 연결해서 쓸 수 있는 도구를 만들었습니다.
오픈소스로 공개합니다.

🔗 GitHub: https://github.com/jayychoii/openboard-claude
🌐 소개 페이지: https://openboard-claude.vercel.app/
⚡ 사용법: npx openboard-claude

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

클로드코드 같은 AI로 만든 디자인, 어딘가 AI 티가 나죠?
이 영상에서는 AI 티나는 웹사이트를 실제로 리디자인하면서
제가 적용하는 3가지 디자인 원칙을 공유합니다.

바이브코딩으로 서비스를 만들고 계신 분들
디자인에서 막히셨다면 이 영상이 도움이 될 겁니다.

🔗 링크
Dribbble - https://dribbble.com
Awwwards - https://www.awwwards.com

🔗 레퍼런스
Seedance - https://seed.bytedance.com/en/seedance2_0
Kling - https://klingai.com
Wan - https://wan.video
Runway - https://runwayml.com

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

안드레이 카파시의 LLM Wiki | Obsidian + Claude Code로 나만의 세컨드 브레인 만들기

카파시가 제안한 LLM Wiki 아이디어를 "나 자신"을 주제로 구현합니다.
RAG처럼 매번 검색하는 대신, AI가 직접 위키를 만들고 유지보수하는 시스템.
Obsidian + Claude Code로 처음부터 끝까지 만드는 전 과정을 담았습니다.

🔗 링크
카파시 LLM Wiki: https://gist.github.com/karpat....hy/442a6bf555914893e
Obsidian: https://obsidian.md/
Obsidian Web Clipper: https://obsidian.md/clipper

🪑 레니프 유니백 체어 프로
Jay Choi 구독자 전용 2만원 특별 할인: https://bit.ly/4cL1VUK
본 영상은 레니프의 지원을 받아 제작되었습니다 (유료 광고 포함)

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

클로드 코드를 매일 쓰면서 체감한 것들을 정리했습니다.
하지 말아야 할 3가지, 해야 할 3가지, 그리고 제가 매일 쓰는 실전 꿀팁 3가지까지.

또한, 새 기능을 쫓는 FOMO 대신, 왜 그렇게 만들어졌는지 이해하면서 내 것으로 만들어가는 방법까지 다뤘습니다.

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

AI로 영상 편집을 자동화하는 파이프라인을 만들어봤습니다.
Video-Use로 컷 편집과 자막 작업, Hyperframes로 모션그래픽.
그리고 클로드 코드가 전체를 연결합니다.

🔗 URL
Video-Use: https://github.com/browser-use/video-use
Hyperframes: https://github.com/heygen-com/hyperframes
Remotion: https://github.com/remotion-dev/remotion
ElevenLabs: https://elevenlabs.io

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

바이브코딩으로 만든 웹사이트, 기능은 다 있는데 왜 어딘가 싸구려 같을까요?
프리미엄 웹사이트에 숨어있는 심리학 원리 5가지를 분석하고,
AI에게 어떻게 지시해야 하는지 정리했습니다.

바이브코딩으로 서비스를 만들고 계신 분들,
디자인에서 "느낌"이 안 나서 고민이셨다면 이 영상이 도움이 될 겁니다.

📌 관련 영상
바이브코딩 디자인 풀코스 | 10분만에 AI 티 완전히 없애기
https://www.youtube.com/watch?v=4TNRp0oQ1lQ

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

Hostinger VPS 10% 할인: https://hostinger.com/JAYCHOI
쿠폰 코드: JAYCHOI

헤르메스 에이전트, 설치부터 활용까지 전부 다뤘습니다.

⏱ 타임스탬프
00:00 | 인트로
00:47 | 1. 헤르메스 에이전트
03:36 | 2. 설치
05:48 | 3. 세팅
11:53 | 4. 사용 사례

📌 링크
Hermes Agent: https://hermes-agent.nousresearch.com
Hostinger VPS: https://hostinger.com/JAYCHOI

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

본 영상은 InsForge의 유료 광고를 포함하고 있습니다.

기획부터 개발, AI 연동, 결제, 배포까지 하나의 영상으로 전부 담았습니다.
아직 바이브코딩이 어려우신 분들께 많은 도움이 되었으면 좋겠습니다.

⏱️ 타임라인
00:00:00 | 하이라이트
00:00:30 | 인트로
00:02:28 | Part 1. 세팅
00:06:18 | Part 2. 로그인
00:10:28 | Part 3. 이미지 생성
00:13:51 | Part 4. 영상 생성
00:16:31 | Part 5. 결제 (토스페이먼츠)
00:18:56 | Part 6. 랜딩 페이지 디자인
00:21:24 | Part 7. 배포
00:22:34 | Part 8. 마치며

🛠️ 사용 기술
AI: Claude Code
Framework: Next.js
Backend: InsForge
AI 이미지/영상 생성: Replicate
Payment: 토스페이먼츠
Deploy: InsForge

🔗 링크
InsForge: https://go.insforge.dev/jaychoi
InsForge GitHub: https://github.com/InsForge/InsForge

📌 프롬프트 출처
본 영상에서 사용된 영상 생성 프롬프트는 각 원작자의 허가를 받아 사용하였습니다.

프요나(스레드): https://www.threads.com/@pyona_ai

연시(인스타): [https://www.instagram.com/yeonsidesign](https://www.instagram.com/yeonsidesign?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==)

진주영(인스타): [https://www.instagram.com/0umzlm](https://www.instagram.com/0umzlm?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==)

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

바이브코딩의 시대는 끝나지 않았습니다.

하지만 그 다음이 시작되었습니다.
카파시, OpenAI, IBM이 공통적으로 말하고 있는 하네스 엔지니어링.

이 영상에서는 바이브코딩에서 에이전틱 코딩으로의 전환과,
완벽한 하네스를 구축하기 위한 핵심 원칙들을 다룹니다.

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🌐 Caramell: https://caramell.app
📷 Riftshot: https://riftshot.com
🧵 Threads: https://www.threads.com/@jayychoii

클로드 코워크, 제대로 쓰면 쓸수록 똑똑해지는 나만의 AI 에이전트가 됩니다.

이 영상에서는 코워크의 기본부터 시작해서,
헤르메스 에이전트의 핵심 방법론을 적용하는 방법까지 다뤘습니다.

📌 이 영상에서 다루는 내용
- 코워크가 뭔지, 기존 AI 채팅과 뭐가 다른지
- 쓸수록 성장하는 에이전트 폴더 구조 세팅법
- 스킬, 커넥터, 플러그인 활용법
- 스케줄 자동화, 프로젝트, 라이브 아티팩트

🙋‍♂️ 소개
인디 개발자로 AI 서비스를 만들고 있습니다.
바이브코딩으로 나만의 서비스를 만들고, 자유로운 삶을 만들어가는 여정을 공유합니다.

🧵 Threads: https://www.threads.com/@jayychoii