안녕하세요, 바이브랩스입니다.
오늘은 AI 업계를 술렁이게 만든 상징적인 소식 하나를 깊이 들여다봅니다. 오픈AI 초기 멤버이자 테슬라 자율주행 AI 디렉터, 그리고 유레카랩스 창업자였던 안드레 카파시가 이번에는 클로드를 만드는 엔트로픽의 프리트레이닝 팀에 합류했습니다. 단순한 이직 뉴스로 보기엔 그 의미가 너무 큽니다.
이번 영상에서는 카파시가 왜 하필 지금, 왜 엔트로픽인지, 그리고 그가 맡게 될 "클로드로 클로드를 더 잘 만드는" 프리트레이닝 가속화 팀이 무엇을 뜻하는지 차근차근 풀어드립니다. 마이크로그라드·나노GPT·CS231n·Zero to Hero로 이어진 그의 교육자 정체성, 테슬라에서 다룬 현실 세계 거대 AI 시스템, 미드 트레이닝과 신세틱 데이터에 대한 그의 관점이 어떻게 엔트로픽의 미래와 맞물리는지 이야기합니다.
또한 AI 경쟁의 진짜 축이 "누가 더 큰 모델을 만드느냐"에서 "누가 더 빠른 연구 루프와 더 좋은 학습 데이터를 가져가느냐"로 옮겨가고 있다는 점, 그리고 사람이 AI를 쓰는 시대에서 AI가 AI를 만드는 시대로 넘어가는 전환점에 카파시가 서 있다는 사실이 개발자에게 어떤 신호인지도 함께 짚어봅니다. 바이브랩스가 그 흐름을 가능한 한 쉽게, 그리고 차분하게 정리했습니다.
00:00 — 카파시 엔트로픽 합류 소식
00:41 — 프리트레이닝 팀 합류의 진짜 의미
01:39 — 카파시라는 인물이 특별한 이유
02:25 — AI 시대의 교과서가 된 그의 콘텐츠
03:29 — 테슬라와 오픈AI에서 쌓은 경험
05:39 — 엔트로픽에서 그가 풀려는 질문
06:43 — 안전한 회사에서 공격적 플랫폼으로
07:46 — 인간의 도구가 다시 인간을 확장한다
08:19 — AI 연구 루프 경쟁의 시대로
끝까지 시청해주셔서 감사합니다. 영상이 도움이 되셨다면 좋아요와 구독으로 응원해 주세요. 바이브랩스는 앞으로도 AI와 바이브 코딩 관련한 의미 있는 흐름을 계속 정리해드리겠습니다.
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 이번 영상은 '바이브 코딩 기초 강의 시리즈' 한 편으로, 어려운 자료 한 편을 받아 AI가 요약하고 비유로 설명하고 4컷 만화 8~10장짜리 학습 페이지로 만들어내는 'AI 이해 파이프라인'을 처음부터 끝까지 직접 구축하는 과정을 담았습니다.
예전에는 정보가 부족해 자료를 찾아 헤매던 시대였다면, 지금은 자료가 너무 많아 오히려 고르지 못하는 시대입니다. 그래서 핵심은 '그림 생성'이 아니라 '이해 설계'라는 관점에서, 단순 이미지 모음이 아닌 개념·한 줄 요약·등장인물 소개·4컷 카드·짧은 해설·오늘 배운 것 3줄 정리까지 담긴 한 장의 학습 콘텐츠 페이지를 결과물로 잡았습니다.
영상에서는 Notion에 정리한 'Comic Research Lab' 빌드 프롬프트를 기반으로 Claude Code(클로드 코드)에게 역공학으로 명세를 던지고, Rails 8 + Codex CLI + gpt-image-2 조합으로 백엔드와 잡, 컨트롤러, 뷰까지 단계별로 생성하는 흐름을 보여드립니다. CodexRunner의 보안 설계, 마스터 프롬프트 작성, GenerateComicJob 오케스트레이션, OutputValidator로 카드 수·PNG 용량·외부 URL을 검증하는 방식까지 실제 명령어와 함께 따라가실 수 있습니다. 중간에 발생한 포트 충돌, Tailwind CSS 캐시 누락 같은 현실적인 트러블슈팅도 그대로 담아 두었어요. 마지막에는 '안드레 카파시가 엔트로픽에 입사한 이유'를 주제로 직접 4컷 학습 만화 페이지가 자동 생성되는 모습까지 확인합니다.
루비 온 레일즈로 AI 서비스를 만들어 보고 싶은 분, Codex CLI나 gpt-image-2를 안전하게 웹 서비스에 붙이는 패턴이 궁금한 분, 그리고 '바이브 코딩'이라는 작업 방식이 실제로 어떻게 흘러가는지 보고 싶은 분 모두에게 도움이 될 거예요. 바이브랩스의 다른 강의도 함께 보시면 흐름이 더 잘 잡힙니다. 영상이 도움이 되셨다면 구독과 좋아요 한 번씩 부탁드릴게요.
00:00 정보 과잉 시대의 문제 제기
00:45 AI 이해 파이프라인 컨셉 소개
01:40 결과물은 이미지가 아니라 학습 페이지
02:30 Notion 빌드 프롬프트와 핵심 사용자 흐름
03:50 CodexRunner 보안 설계와 한 줄 정의
05:10 Claude Code로 Rails 8 앱 스캐폴딩
06:40 모델·잡·CodexRunner·마스터 프롬프트 구현
08:20 포트 충돌과 Tailwind 캐시 트러블슈팅
09:30 새 만화 만들기 폼과 프로젝트 화면
10:40 카파시 주제로 4컷 학습 만화 자동 생성
12:00 마무리와 다음 강의 안내
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 요즘 AI 코딩 도구 시장에 미묘한 변화가 감지되고 있습니다. 얼마 전까지만 해도 '복잡한 코딩은 클로드 코드'라는 평이 일반적이었지만, 최근에는 코덱스로 눈을 돌리는 개발자가 늘고 있죠. 이 영상에서는 단순히 '어느 게 더 좋냐'를 비교하지 않습니다. 그보다 더 본질적인 질문, '왜 개발자들이 도구를 바꾸기 시작했는가'를 함께 살펴봅니다.
클로드 코드의 최근 성능 체감 변화와 정책·과금 구조의 흐름이 어떻게 개발자의 자동화 파이프라인 설계에 영향을 주는지, 그리고 코덱스가 CLI·데스크톱·클라우드·리모트 기능까지 붙으면서 어떻게 '에이전트형 작업 환경'으로 진화하고 있는지 차근차근 풀어봤습니다. 특히 헤르메스 같은 에이전트와 결합했을 때 펼쳐지는 자동화 시나리오, 그리고 슬래시골·하이퍼프레임스까지 이어지는 흐름을 구체적인 사례로 보여드립니다.
바이브랩스 채널의 바이브 코딩 기초 강의 시리즈에서는 이렇게 도구 선택의 관점을 넓혀가는 영상을 꾸준히 다루고 있어요. 단순히 어떤 도구를 쓰느냐가 아니라, 내 작업장을 어디까지 확장할 것인가에 대한 시각을 함께 키워보시면 좋겠습니다.
00:00 인트로 — AI 코딩 도구 시장의 변화
00:49 왜 개발자들이 도구를 바꾸기 시작했나
01:47 클로드 코드 정책 변화와 개발자의 고민
03:22 코덱스가 에이전트형 IDE로 진화하는 흐름
04:11 리모트 기능이 바꾸는 작업 방식
05:22 코덱스를 내 서비스에 붙이기
06:07 헤르메스 에이전트와 코덱스의 조합
07:37 슬래시골 — 명령에서 목표로
08:34 하이퍼프레임스와 만나는 코덱스
09:15 클로드 코드와 코덱스, 어디에 둘 것인가
11:09 마무리 — 도구 선택의 관점
영상이 도움이 되셨다면 구독과 좋아요로 응원해주세요. 바이브랩스의 다음 영상에서 또 만나뵙겠습니다.
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 요즘 클로드 코드를 쓰는 분들 사이에서 불만이 터져 나오고 있습니다. 6월 15일부터 클로드 -p 같은 자동 호출 방식이 별도의 월간 크레딧으로 계산된다는 공지 때문인데요. 이 영상은 클로드를 업무 자동화·문서 요약·개인 파이프라인에 쓰고 계신 분이라면 꼭 한 번 정리하고 넘어가야 할 이야기를 담고 있습니다.
이번 변화의 핵심은 단순히 '요금이 비싸졌다'가 아니라, 같은 클로드를 어디서 어떻게 부르느냐에 따라 계산 방식이 달라진다는 점입니다. 채팅창에서 쓰는 클로드, 터미널에서 부르는 클로드, 자동화 안에서 돌아가는 클로드가 겉으로는 같지만 안에서는 다르게 청구될 수 있다는 거죠. 영상에서는 변경 대상(에이전트 SDK, 클로드 Code SDK, GitHub Actions 등), 사용자가 헷갈리는 이유, 그리고 왜 사람들이 정책 변화에 이렇게 민감하게 반응하는지를 차근차근 짚어봅니다. 바이브랩스가 자주 다뤄온 '도구를 어떻게 오래 신뢰하며 쓸 것인가'라는 관점에서, 이번 사건을 단순한 가격 이슈가 아닌 신뢰의 문제로 풀어 설명드립니다.
00:00 — 클로드 코드 사용자들의 불만
00:27 — 클로드 -p가 뭐고 왜 중요한가
01:03 — 6월 15일부터 바뀌는 것 정리
01:24 — 같은 클로드, 다른 계산 방식
02:14 — 사용자가 진짜 화나는 지점
03:11 — 정책 변화가 흔드는 건 '내 작업 흐름'
04:46 — 사용자는 철새가 아니라 거주자
05:55 — AI 시대의 구독은 거주지 선택이다
06:14 — 우리가 봐야 할 진짜 질문
끝까지 함께 고민해 주시면 좋겠습니다. 도움이 되셨다면 구독과 좋아요로 응원 부탁드리고, 바이브랩스의 다음 영상에서 또 만나요.
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
바이브랩스의 바이브 코딩 기초 강의 시리즈에 오신 것을 환영합니다. 이번 영상에서는 Node.js, Python, Git 설치를 마친 분들을 위해 클로드 코드 CLI 설치부터 맥스플랜 구독, 그리고 처음 익혀야 할 핵심 명령어들까지 차근차근 알려드립니다.
클로드 코드를 처음 다루는 분들이라면 어디서부터 시작해야 할지 막막하실 텐데요. WSL 없이 네이티브로 설치하는 방법부터 시작해 npm을 활용한 CLI 설치, 가짜 사이트와 진짜 클로드 AI를 구별하는 팁, 그리고 코딩 학습에 가장 적합한 맥스플랜 구독까지 실제 화면을 보며 함께 진행합니다.
특히 클로드 코드를 실행한 뒤 자주 쓰게 될 /clear, /compact, /init, /context, /doctor, /exit 같은 명령어들의 역할과 사용 시점을 자세히 설명드립니다. 컨텍스트 토큰이 어떻게 소비되고 오토 컴팩트가 언제 작동하는지, 어떤 모델을 언제 선택해야 하는지까지 실무 관점으로 짚어드릴게요.
00:00 — 도입: 설치 마지막 단계 안내
00:21 — npm으로 클로드 코드 CLI 설치
00:56 — 진짜 클로드 AI 사이트 구별법
01:34 — 맥스플랜 구독 진행 과정
02:32 — 클로드 코드 실행과 인증 방식 선택
03:45 — Opus, 소넷, 하이쿠 모델 차이
04:25 — 필수 명령어 clear와 compact 설명
06:13 — init과 context로 프로젝트 관리하기
08:07 — doctor, MCP, exit 명령어 살펴보기
바이브랩스에서는 앞으로도 실제 프로젝트를 함께 만들며 클로드 코드 활용법을 더 깊이 다뤄드릴 예정입니다. 도움이 되셨다면 구독과 좋아요로 응원해 주세요.
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 이번 영상에서는 백엔드 개발에서 가장 많이 사용되는 파이썬(Python)을 윈도우 컴퓨터에 설치하는 방법을 처음부터 끝까지 자세히 안내해 드립니다. 코딩을 처음 시작하시는 분, 바이브 코딩 기초 강의를 따라오시는 분이라면 꼭 보셔야 할 필수 영상입니다.
파이썬 설치는 단순해 보이지만, 한 가지 옵션을 놓치면 나중에 골치 아픈 환경 변수 문제가 발생할 수 있습니다. 특히 'Add Python to PATH' 체크박스는 절대 빠뜨리시면 안 되는 핵심 포인트인데요. 이 영상에서는 python.org 공식 사이트 접속부터, 올바른 인스톨러 선택(Standalone Installer), 설치 옵션 체크, 그리고 파워쉘에서 정상 설치 여부를 확인하는 방법까지 단계별로 보여드립니다.
영상 타임라인
00:00 — 파이썬 설치 시작 안내
00:03 — python.org 접속 및 다운로드 메뉴 이동
00:16 — 윈도우 인스톨러 선택 (Standalone Installer)
00:27 — 설치 파일 실행 및 옵션 확인
00:35 — Add Python to PATH 필수 체크
00:47 — 파이썬 3.14 설치 진행 및 완료
00:59 — 관리자 권한으로 파워쉘 재실행
01:13 — python --version으로 설치 확인
01:23 — pip --version으로 패키지 매니저 확인
바이브랩스 채널에서는 코딩 입문자도 막힘없이 따라올 수 있도록 친절하고 디테일한 강의를 계속 만들어 가고 있습니다. 영상이 도움이 되셨다면 구독과 좋아요 부탁드립니다. 다음 강의에서 또 만나요!
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
바이브 코딩을 본격적으로 시작하기 전, 반드시 거쳐야 하는 개발 환경 세팅 단계입니다. 이번 영상에서는 프론트엔드와 백엔드 개발 모두에서 가장 널리 사용되는 Node.js 엔진을 윈도우 환경에 설치하는 방법을 처음부터 끝까지 차근차근 안내해 드립니다.
바이브랩스의 바이브 코딩 기초 강의 시리즈를 따라오시는 분들이라면 꼭 챙겨 두셔야 하는 필수 코스입니다. 크롬 브라우저에서 Node.js 공식 사이트로 이동하는 방법부터 설치 위자드 진행 시 반드시 체크해야 하는 'Add to PATH' 옵션까지, 놓치기 쉬운 디테일을 꼼꼼하게 짚어 드립니다.
설치가 끝나면 파워셸을 관리자 권한으로 실행해 node -v 와 npm -v 명령어로 정상 설치 여부까지 확인하는 과정을 함께합니다. 처음 개발 환경을 세팅하는 분들도 화면을 그대로 따라 하시면 누구나 막힘없이 완료하실 수 있습니다.
00:00 — 강의 도입 및 설치 안내
00:07 — Node.js 소개와 다운로드 페이지 이동
00:25 — 윈도우 설치 프로그램 다운로드
00:34 — 설치 위자드 진행 단계
00:45 — Add to PATH 옵션 필수 체크
01:02 — 설치 진행 및 완료
01:07 — 파워셸 관리자 권한 실행
01:25 — node -v / npm -v 설치 확인
바이브랩스의 바이브 코딩 강의는 앞으로도 차근차근 이어집니다. 도움이 되셨다면 구독과 좋아요로 응원해 주세요. 다음 영상에서 또 만나요!
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
바이브 코딩으로 앱을 만들기 시작하면 거의 모든 분들이 똑같은 길을 갑니다. 처음에는 화면을 신나게 만들다가 어느 순간 멈춰서 묻게 되죠. "이 데이터는 어디에 저장하지?" 그때부터 SQLite, 수파베이스, 포스트그레스, 노SQL 같은 낯선 이름들이 쏟아져 들어옵니다.
이번 바이브랩스 영상은 데이터베이스 종류를 백과사전처럼 외우는 영상이 아닙니다. 핵심은 단 하나, "내가 만들려는 서비스에는 어떤 디비가 현실적으로 맞는가"를 판단하는 구조를 같이 보는 것입니다. 디비 선택은 단순한 기술 선택이 아니라 책임의 선택이라는 관점에서 차근차근 풀어드립니다.
영상에서는 구글 시트/노션(자전거), SQLite(소형차), 수파베이스(운전기사 딸린 중형차), 포스트그레스 직접 운영(트럭), 몽고 DB 같은 노SQL(서랍장), 덕DB(분석실)까지 비유로 정리합니다. 그리고 수파베이스를 쓸 때 만나게 되는 RLS, 언언키와 서비스 롤키 같은 보안 이슈를 초보 눈높이에서 짚어드립니다. 마지막에는 디비 선택을 위한 7가지 질문과, 그 질문을 그대로 옮긴 "디비 주치의" 웹 진단 도구도 소개합니다.
00:00 — 디비에서 막히는 바이브 코딩 초보의 흔한 길
01:39 — 디비 선택은 기술이 아니라 책임의 선택
02:46 — 자전거·소형차·트럭, 디비를 차에 비유하기
03:32 — SQLite는 왜 의외로 좋은 출발점인가
04:26 — 수파베이스의 매력과 RLS·키 관리의 함정
06:23 — 포스트그레스 직접 운영과 노SQL의 빛과 그림자
07:50 — 디비를 고르기 위한 7가지 질문
08:56 — 초보가 자주 빠지는 두 가지 착각
10:01 — 디비 주치의: 내 서비스 진단 도구 소개
11:55 — 마무리: 앱은 화면에서 시작하지만 서비스는 데이터에서 버틴다
바이브랩스는 비개발자도 자기 서비스를 직접 만들 수 있도록, 화면 너머의 "진짜 운영" 감각을 함께 키워가는 채널입니다. 이 영상이 도움이 되셨다면 구독과 좋아요로 응원해 주세요. 다음 영상에서 더 깊은 이야기로 찾아뵙겠습니다.
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 이번 영상에서는 소스코드 관리를 위한 필수 도구 Git을 윈도우 PC에 설치하는 방법을 처음부터 끝까지 차근차근 안내해 드립니다. 개발 공부를 막 시작하셨거나, 바이브 코딩 강의를 따라오시면서 환경 설정 단계에서 막히신 분들이라면 이 영상 하나로 깔끔하게 해결하실 수 있습니다.
크롬 브라우저로 Git 공식 사이트에 접속하는 것부터, 본인 OS에 맞는 인스톨러 다운로드, 설치 옵션 하나하나의 의미와 권장 설정, 그리고 마지막에 PowerShell에서 정상 설치 여부를 확인하는 방법까지 빠짐없이 다룹니다. 특히 설치 직후 "git을 찾을 수 없다"는 오류가 났을 때의 대처법(PowerShell 재시작)도 함께 보여드리니, 같은 상황에서 당황하지 않으셔도 됩니다.
00:00 — Git 설치 시작 안내
00:04 — 크롬에서 Git 공식 사이트 접속
00:13 — Install for Windows 다운로드
00:26 — 인스톨러 실행 및 초기 설정
00:37 — Git Bash 프로파일과 자동 업데이트 옵션 체크
00:48 — Next 진행 및 권장(Recommend) 설정 선택
00:58 — Open SSH와 보안 라이브러리 선택
01:10 — 설치 완료 및 Finish
01:22 — PowerShell에서 git --version 확인
01:36 — 경로 인식 오류 시 PowerShell 재시작 후 재확인
영상이 도움이 되셨다면 구독과 좋아요 한 번 눌러주시면 바이브랩스가 더 좋은 강의를 만드는 데 큰 힘이 됩니다. 감사합니다!
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 우리는 매일 뉴스, 블로그, 좋은 아티클을 읽지만 대부분은 브라우저 탭을 닫는 순간 사라져 버리죠. 북마크에 넣어도, 노션에 저장해도 다시 보지 않는다면 그건 지식이 아니라 그냥 위치만 옮겨놓은 디지털 고물상에 가깝습니다.
그래서 이번 영상에서는 단순히 웹글을 '저장'하는 방법이 아니라, 읽은 글을 내 글쓰기 재료 창고로 '편입'시키는 흐름을 처음부터 끝까지 만들어 봅니다. 핵심 흐름은 이렇습니다 — 크롬 확장으로 본문을 추출 → 텔레그램으로 전송 → 맥미니에서 24시간 대기 중인 헤르메스 에이전트가 수신 → 제텔카스텐(옵시디언)의 Young Raw 폴더에 문헌 메모로 저장 → 사용자가 직접 연구 노트로 승격.
실습은 코덱스(Codex)로 진행했습니다. 새 프로젝트 '웹 클리퍼'를 만들고, 크롬 확장 플러그인부터 단계별로 빌드합니다. 본문 추출 → 텔레그램 전송 → 봇 간 통신 한계 발견 → 클립보드 복사 + 텔레그램 공유창 열기 방식으로 우회 → 헤르메스가 메시지를 받아 옵시디언 볼트의 영 로우(Young Raw) 폴더에 자동 저장하는 과정까지, 실제 시행착오를 그대로 담았습니다.
특히 텔레그램 봇이 다른 봇의 메시지를 보지 못하는 문제를 만났을 때, 어떻게 원인을 분석하고 가장 현실적인 대안(공유창 + 붙여넣기 방식)을 선택했는지도 함께 보실 수 있어요. 마지막에는 제텔컨넥트(ZettelConnect) 스킬을 통해 기존 연구 노트와 자동으로 연결되는 모습까지 보여드립니다.
00:00 — 인트로: 읽은 글은 왜 다 사라지는가
02:00 — 저장이 아니라 편입: 글쓰기용 지식관리의 핵심
04:00 — 왜 텔레그램을 중간에 두는가
05:30 — 전체 구조 8단계 한눈에 보기
07:00 — 코덱스로 웹 클리퍼 프로젝트 생성
09:30 — 본문 중심 추출과 크롬 확장 등록
14:00 — 텔레그램 전송 기능 추가와 첫 에러 해결
17:00 — 봇 간 통신 한계 발견과 우회 전략
19:30 — 공유창 + 클립보드 방식으로 안정화
22:00 — 헤르메스가 영 로우(Young Raw) 폴더에 저장하기
24:30 — 옵시디언에서 연구 노트로 승격하는 흐름
26:30 — 마무리: 한 문장이 다시 자라나는 시스템
이 시스템의 진짜 목적은 자동 저장이 아닙니다. 읽은 글이 사라지지 않게 붙잡고, 내 생각과 연결하고, 나중에 영상·강의·책의 재료로 되살리는 것이죠. 영상이 도움이 되셨다면 구독과 좋아요로 응원 부탁드립니다. 바이브랩스의 다음 영상에서 또 만나요.
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 이번 영상은 바이브 코딩 기초 강의 시리즈의 출발점이 되는 윈도우 환경 세팅 완전 가이드입니다. 코딩을 처음 시작하시는 분, 터미널이 무엇인지 막막하신 분, 명령어가 낯설어 어디서부터 손대야 할지 모르겠는 분들을 위해 가장 기본부터 차근차근 짚어드릴게요.
파워셸을 관리자 권한으로 여는 방법부터 시작해서, 폴더 이동(cd), 현재 위치 확인(pwd), 목록 보기(dir/ls), 새 폴더 만들기(mkdir)까지 실제 화면을 보면서 따라 하실 수 있게 진행했습니다. 탭 키를 활용한 자동완성, 위/아래 화살표로 이전 명령어 불러오기 같은 실전 꿀팁도 함께 담았어요. 이 한 편만 보시면 앞으로 진행될 바이브랩스 강의를 따라오실 때 막힘이 없으실 거예요.
00:00 — 윈도우 환경 세팅 시작
00:09 — 파워셸 관리자 권한으로 실행
00:28 — 터미널이란 무엇인가
00:59 — cd 명령어와 루트 디렉토리
01:13 — pwd와 dir, ls로 위치·목록 확인
01:41 — 폴더 진입과 탭 자동완성
02:42 — 상위 폴더로 돌아가기 (cd ..)
03:01 — 화살표 키로 이전 명령어 재사용
03:47 — mkdir로 새 프로젝트 폴더 만들기
04:24 — my-project 폴더로 이동하며 마무리
터미널은 한 번 익혀두면 평생 쓰는 무기가 됩니다. 영상이 도움 되셨다면 구독과 좋아요, 그리고 댓글로 응원 한마디 남겨주시면 다음 강의 만드는 데 큰 힘이 됩니다. 바이브랩스와 함께 차근차근 성장해 봐요!
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
맥에서 파이썬을 처음 설치하시는 분들을 위한 가장 깔끔한 방법을 알려드립니다. 바이브랩스의 바이브 코딩 기초 강의 시리즈에서 이번 시간에는 Homebrew를 활용해 파이썬을 설치하고, 설치가 정상적으로 되었는지 버전까지 확인하는 과정을 차근차근 짚어봅니다.
특히 맥(매킨토시) 환경에서 헷갈리기 쉬운 python과 python3, pip와 pip3 명령어의 차이를 짚어드리니, 개발 환경을 처음 세팅하시는 분들께 큰 도움이 될 거예요.
[이번 영상에서 다루는 내용]
• Homebrew로 파이썬 설치하기 (brew install python)
• 자동으로 최신 버전(0.14)이 설치되는 과정 확인
• python3 --version 명령어로 설치 확인
• pip3 --version 명령어로 패키지 매니저 확인
• 맥에서 python3 / pip3를 써야 하는 이유
[타임라인]
00:00 — 파이썬 설치 시작, Homebrew 사용 안내
00:04 — brew install python 명령어 입력
00:12 — 파이썬 라이브러리 최신 버전 자동 설치
00:15 — 설치 완료 후 확인 방법 소개
00:18 — python3 --version으로 파이썬 버전 확인
00:28 — pip3 --version으로 PIP 버전 확인
00:38 — 맥에서는 python3 / pip3 명령어를 써야 한다는 핵심 정리
바이브랩스의 바이브 코딩 기초 강의 시리즈는 비전공자도 따라올 수 있도록 차근차근 진행됩니다. 영상이 도움이 되셨다면 구독과 좋아요 부탁드려요. 다음 강의에서 또 만나요!
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 이번 영상에서는 바이브 코딩을 시작하기 위해 꼭 필요한 Node.js 설치 방법을 다룹니다. 맥(macOS) 환경에서 Homebrew를 활용해 깔끔하게 설치하는 방법을 단계별로 보여드릴게요.
Node.js는 자바스크립트 런타임 환경으로, 프론트엔드 개발은 물론 다양한 자동화 작업과 AI 도구 활용에도 필수적입니다. 처음 개발 환경을 세팅하는 분들이라면 이 영상 한 편으로 Node.js와 npm까지 한 번에 설치하고 검증하는 방법을 익히실 수 있습니다.
[영상 흐름]
Homebrew 명령어 한 줄로 Node.js를 설치하고, 설치가 정상적으로 완료되었는지 node -v 와 npm -v 명령어로 버전을 직접 확인하는 과정을 친절하게 안내합니다. 명령어 입력이 처음이신 분들도 그대로 따라오시면 어렵지 않게 설치를 마칠 수 있어요.
[타임라인]
00:00 — 도입: Homebrew로 Node.js 설치 시작
00:06 — brew install node 명령어 입력
00:14 — Node.js 설치 완료 확인
00:21 — node -v 로 버전 확인하기
00:29 — npm -v 로 npm 설치 검증
바이브 코딩 기초 강의 시리즈는 앞으로도 개발 환경 세팅부터 실전 활용까지 차근차근 다룰 예정이니, 채널 구독과 좋아요 한 번씩 부탁드립니다. 다음 영상에서 또 만나요!
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 이번 영상에서는 맥(Mac) 환경에서 개발을 시작할 때 가장 먼저 설치해야 하는 패키지 관리자, **홈브루(Homebrew)** 설치 과정을 처음부터 끝까지 차근차근 따라가 봅니다. 개발 도구를 자주 설치하고 업데이트하는 분이라면 홈브루는 선택이 아니라 필수예요.
맥을 처음 사용하시는 분, 또는 "홈브루가 뭔지는 들어봤는데 설치가 망설여졌다" 하는 분께 딱 맞는 영상입니다. 터미널을 처음 다뤄도 따라올 수 있도록 명령어 하나하나의 의미와, 설치 중 흔히 당황하는 포인트(패스워드 입력 시 글자가 안 보이는 현상 등)까지 함께 짚어드립니다.
영상에서는 공식 설치 명령어 입력 → 관리자 패스워드 입력 → 설치 진행 → Next steps 안내에 따른 PATH(환경 변수) 3줄 설정 → `brew` 명령으로 설치 확인까지의 흐름을 그대로 보여드립니다. 명령어와 자료는 별도 노션으로도 제공해 드리니, 영상과 함께 참고하시면서 따라 해보세요.
00:00 — 홈브루 소개와 설치 시작
00:08 — 터미널에 설치 명령어 입력
00:19 — 관리자 패스워드 입력 (안 보여도 정상)
00:33 — 홈브루 설치 진행
00:40 — 설치 후 Next steps 안내 확인
00:53 — PATH 설정 3줄 복사·붙여넣기
01:14 — brew 명령어로 설치 확인
01:23 — 5.014 버전 확인 및 마무리
끝까지 따라오셨다면 이제 여러분의 맥에도 홈브루가 자리 잡았습니다. 이어지는 바이브 코딩 기초 강의에서는 홈브루를 활용해 실제 개발 도구들을 설치하는 과정을 다룰 예정이니, 바이브랩스 채널 구독과 좋아요로 함께해 주세요. 도움이 되셨다면 댓글로 알려주시면 더욱 힘이 됩니다!
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 이번 영상에서는 바이브 코딩 기초 강의 시리즈의 일환으로, 맥(macOS)에서 Homebrew를 활용해 Git을 설치하는 방법을 차근차근 알려드립니다. 개발 환경을 처음 세팅하시는 분이나, Git이 무엇인지부터 막막하셨던 분들께 특히 도움이 될 거예요.
터미널에 명령어 한 줄만 입력하면 Git 설치가 자동으로 진행되고, 설치가 끝난 뒤에는 버전 확인 명령어로 정상 설치 여부까지 검증하는 흐름을 함께 따라가 봅니다. 복잡해 보였던 개발 도구 설치가 사실은 얼마나 간단한지 직접 확인해 보세요.
00:00 — 인트로 및 Git 설치 안내
00:05 — brew install git 명령어 실행
00:09 — Git 설치 완료 확인
00:16 — git --version 으로 버전 체크
00:22 — 정상 설치 마무리 정리
바이브랩스의 바이브 코딩 기초 강의 시리즈와 함께라면 누구나 개발 환경 세팅을 어렵지 않게 시작할 수 있어요. 영상이 도움이 되셨다면 구독과 좋아요 부탁드립니다. 다음 강의에서 또 만나요!
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 이번 영상은 바이브 코딩 기초 강의 시리즈의 한 편으로, 맥북에서 터미널을 처음 사용하시는 분들을 위해 가장 기본이 되는 명령어들을 차근차근 정리해드립니다.
개발을 시작하려면 터미널과 친해지는 게 첫걸음인데요. 윈도우 파워셸과 비슷하지만 맥에서는 어떻게 열고, 어떤 명령어를 써야 하는지 실제 화면을 보면서 따라 하실 수 있도록 구성했습니다. 현재 위치 확인(pwd), 파일 목록 보기(ls), 폴더 이동(cd), 새 폴더 만들기(mkdir), 폴더 삭제(rm)까지 프로젝트 작업에 꼭 필요한 명령어 위주로 다뤘습니다. 탭 자동완성이나 숨김 파일까지 보는 ls -lh 같은 실전 팁도 함께 알려드려요.
00:00 — 터미널 실행하기 (Command + Space)
00:15 — 터미널 기본 소개와 파워셸 비교
00:21 — 현재 위치 확인 pwd 명령어
00:32 — 파일·폴더 목록 보기 ls 명령어
00:37 — cd로 폴더 이동과 탭 자동완성
01:20 — ls -lh로 숨김 파일까지 상세 보기
01:54 — mkdir로 새 폴더 만들기
02:28 — cd ..로 이전 폴더로 돌아가기
02:39 — rm -rf로 폴더 삭제하기
02:58 — 마무리 정리
맥에서 개발 환경을 처음 잡으시는 분들께 도움이 되었으면 좋겠습니다. 영상이 유익하셨다면 좋아요와 구독 부탁드립니다. 바이브랩스의 다음 강의에서 또 만나요!
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요, 바이브랩스입니다. 이번 강의는 IT 비전공자분들을 위한 바이브 코딩 필수 지식 총정리편이에요. 복잡한 코드를 외우지 않아도 괜찮습니다. AI에게 무엇을 시킬 수 있는지, 그 이름과 역할만 알면 누구나 자기 아이디어를 앱으로 만들 수 있다는 사실, 함께 확인해보겠습니다.
이 영상은 코딩이 처음이라 막막하신 분, 기획은 있는데 개발 용어가 어려워 멈춰 있는 분, 그리고 AI를 제대로 활용해 사이드 프로젝트를 시작하고 싶은 분들에게 딱 맞아요. 식당이라는 익숙한 비유로 프론트엔드, 백엔드, 데이터베이스, API의 구조를 풀어드리고, 실무에서 바로 쓰는 도구와 프롬프트 작성 노하우까지 차근차근 안내합니다.
핵심 포인트는 이렇습니다. 모든 앱은 입력·처리·출력 세 단계로 설명할 수 있다는 것, 소프트웨어는 홀(프론트엔드)·주방(백엔드)·냉장고(데이터베이스)·주문서(API)라는 네 가지 개념으로 정리된다는 것, 그리고 바이브 코딩의 진짜 실력은 코드를 외우는 게 아니라 AI와 대화하며 결과를 다듬는 프롬프트 루프에 있다는 점이에요. 마지막에는 여러 AI를 지휘하는 오케스트레이션 개념까지 짚어드립니다.
00:00 — 강의 소개와 핵심 메시지
00:23 — 모든 앱의 본질, 입력·처리·출력
00:51 — 세 가지 질문으로 서비스 기획하기
01:15 — 식당 비유로 보는 소프트웨어 구조
01:41 — 프론트엔드, 백엔드, 데이터베이스, API
03:37 — 프론트엔드와 백엔드 핵심 기술 정리
04:36 — GitHub, Vercel, Fly.io 배포 도구
05:08 — 프레임워크와 라이브러리, 터미널, 환경 변수
05:59 — LLM과 프롬프트 작성법
07:43 — AI 오케스트레이션과 마무리
오늘 배운 네 가지 개념과 AI와 대화하는 방법만 기억하시면 충분합니다. 바이브랩스와 함께 차근차근 따라오시면 여러분도 오늘부터 바이브 코더예요. 도움이 되셨다면 구독과 좋아요 한 번씩 부탁드립니다. 감사합니다.
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
코드를 단 한 줄도 몰라도 앱을 만들 수 있는 시대, 정말 가능할까요? 바이브랩스에서 준비한 이번 영상은 2025년 가장 뜨거운 키워드 '바이브 코딩(Vibe Coding)'의 모든 것을 5분 안에 정리해드립니다.
테슬라 AI 디렉터 안드레이 카파시가 던진 이 새로운 개념부터, 전통 코딩과의 결정적 차이, 그리고 실제로 코드 한 줄 없이 만들어진 앱 사례까지 한 번에 만나보세요. 기획자, 디자이너, 창업가, 그리고 현직 개발자 모두에게 새로운 가능성이 열리고 있습니다.
영상에서는 바이브 코딩의 정의와 등장 배경, 전통 코딩과의 비교표, 새롭게 변하는 개발자의 역할(의도 설계자·가이드·피드백 제공자), 메뉴젠 같은 실제 앱 제작 사례, 그리고 누구에게 이 흐름이 필요한지까지 차근차근 짚어드립니다. 바이브랩스가 함께하는 부트캠프 안내도 마지막에 준비했으니 끝까지 함께해주세요.
00:00 — 코드 없이 앱 만드는 시대의 시작
00:24 — 바이브 코딩이란 무엇인가
00:50 — 2025년 LLM이 바꾼 게임의 룰
01:05 — 전통 코딩 vs 바이브 코딩 비교
01:46 — 누구나 만드는 시대, 개발자의 새 역할
02:19 — 지휘자가 된 개발자, 3가지 핵심 역할
02:58 — 코드 한 줄 없이 만든 앱, 메뉴젠 사례
03:43 — 바이브 코딩은 누구에게 필요한가
04:21 — 부트캠프 참여 안내와 마무리
오늘 영상이 도움이 되셨다면 구독과 좋아요로 응원 부탁드릴게요. 바이브랩스는 앞으로도 AI와 코딩의 최전선을 가장 친근하게 풀어드리겠습니다.
작가 제안하기 : futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
https://www.yes24.com/product/goods/144539067
안녕하세요. 바이브랩스 이석현입니다.
오늘 영상에서는 여러 AI 에이전트를 한 곳에서 실행하고 관리할 수 있는 진정한 오케스트레이션 툴, cmux에 대해 알아봅니다.
클로드 코드, 코덱스, 제미나이 CLI 등 다양한 AI를 동시에 호출하는 방법부터, 내장된 웹킷 브라우저를 활용한 테스트, 그리고 멀티 모델 에이전트 구축 실전까지! 기존 터미널의 한계를 넘어서는 cmux의 강력한 기능들을 직접 시연하며 설명해 드립니다.
복잡한 개발 환경을 하나로 통합하고 싶은 분들, 진정한 바이브 코딩을 경험하고 싶은 분들은 이번 영상 놓치지 마세요!
📚 이석현 작가의 책 & 커뮤니티
작가 제안 및 강연 문의: futurewave@gmail.com
[작가 오픈톡방 - 바이브 코딩 함께해요!] https://open.kakao.com/o/gfYQfFPh
[신간] 바이브 코딩 커서 AI와 클로드 코드로 누구나! https://www.yes24.com/product/goods/161924116
[베스트셀러] 실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지 https://www.yes24.com/product/goods/159060578
[세종우수도서] 챗GPT, 글쓰기 코치가 되어 줘 https://www.yes24.com/product/goods/144539067
타임라
00:00 - Intro: cmux란 무엇인가? (진정한 AI 오케스트레이션)
00:45 - cmux의 의미: Claude + Multiplexer
01:31 - 기존 터미널(Ghostty 등)의 한계와 cmux의 차별점
02:18 - cmux의 핵심 기능: 브라우저 내장 및 컨텍스트 스위칭
02:44 - cmux 아키텍처 분석: 에이전트 하네스 시스템
03:07 - cmux 사용 시 꼭 기억해야 할 3가지 핵심 키워드
03:28 - 내장 패널을 활용한 메인 에이전트 컨트롤 (Claude Code)
04:06 - 멀티 에이전트 자율 병렬 처리 및 상호작용
04:42 - 실전 ACT 1: cmux 설치 및 기본 환경 설정 (Mac 전용)
05:16 - cmux.dev 사이트 안내 및 다운로드 방법
06:21 - cmux 인터페이스 소개 (사이드바, 워크스페이스)
06:36 - 단축키 활용법 (Workspace 생성, Tab 추가, 화면 분할)
07:54 - 실전 ACT 2: 유튜브 조회수/좋아요 수집 앱 만들기 (Claude Code 활용)
10:07 - 바이브 코딩을 위한 명확한 프롬프트 입력의 중요성
11:46 - 터미널 내장 브라우저를 통한 데이터 수집 및 진행 상황 확인
12:57 - 수집된 데이터를 바탕으로 React 기반 대시보드 웹앱 요청
14:38 - 수동 크롤링과 API 사용의 장단점 비교
15:02 - 실전 ACT 3: 댓글 수집 및 감정 분석 대시보드 고도화
17:24 - 멀티 모델 오케스트레이션: 작업 효율을 높이는 병렬 에이전트 구성
18:50 - Codex, Gemini 등 다양한 AI CLI 동시 활용 전략 (적재적소 배치)
19:35 - Claude Code (데이터 수집), Codex (코드 리뷰), Gemini (UX 디자인) 협업 시연
22:56 - 여러 에이전트의 작업 결과물을 하나의 대시보드로 통합하기
25:57 - 마무리: cmux의 핵심 요약 (내장 브라우저, 병렬 패널, 독립적/통합적 터미널 제어)
27:15 - 완성된 유튜브 데이터 분석 대시보드 결과물 확인 (다크 모드, 애니메이션 효과)
27:36 - Outro & 바이브랩스 구독/좋아요 부탁드립니다!
안녕하세요! 바이브랩스의 이석현입니다.
이번 영상에서는 최근 업데이트된 클로드 코드의 강력한 핵심 기능, 번들 스킬(Bundle Skills)을 파헤쳐 보았습니다.
단순히 지정된 명령을 수행하는 차원이 아닌 상황에 맞게 여러 AI 에이전트가 병렬로 코드를 분석하고 퀄리티를 높여주는 과정을 제가 직접 개발 중인 GUI 터미널 래핑 서비스를 통해 보여드립니다.
코드를 직접 타이핑하던 시대에서, 이제는 에이전트를 조율하고 오케스트레이션하는 시대로 접어들었습니다. /simplify, /batch, /debug, /loop 등 4가지 번들 스킬이 실무에서 어떻게 1인 개발자의 한계를 부수고 압도적인 생산성을 내는지 직접 확인해 보세요.
영상이 도움이 되셨다면 구독과 좋아요, 그리고 따뜻한 댓글 부탁드립니다. 다음 실험을 이어나갈 큰 연료가 됩니다. 감사합니다!
—
[📬 비즈니스 및 강연/제안 문의]
futurewave@gmail.com
[💬 바이브랩스 소통 공간]
바이브랩스 작가 오픈톡방 (비밀번호 없음) : https://open.kakao.com/o/gfYQfFPh
[📚 이석현 작가의 출간 도서]
📖 실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지 : https://www.yes24.com/product/goods/159060578
📖 바이브 코딩 커서 AI와 클로드 코드로 누구나! : https://www.yes24.com/product/goods/161924116
📖 챗GPT, 글쓰기 코치가 되어 줘 (교양 부문 세종도서 선정 우수도서) : https://www.yes24.com/product/goods/144539067
⏱ 타임라인 (Timeline)
00:00 안녕하세요, 바이브랩스입니다! 오늘 다룰 주제 소개
00:26 번들 스킬(Bundle Skill)의 개념과 작동 원리
00:46 기존 하드코딩된 명령어와 프롬프트 기반 번들 스킬의 차이점
01:54 클로드 코드 GUI 래핑 툴 프로젝트 소개 및 실습 준비
02:38 [/simplify] 코드 품질을 프로덕션 수준으로 끌어올리기 (병렬 에이전트 구동)
03:40 /simplify를 통한 메모리 누수 및 스크롤 버그 자동 진단과 해결
05:54 [/batch] 1인 개발자의 한계를 넘는 대규모 병렬 작업 지시하기
07:20 /batch 명령어 실행 시 자동으로 진입하는 계획(Plan) 모드 분석
09:00 단 20분 만에 8가지 주요 단위 작업 계획 및 구현 완료
10:11 [/debug] 복잡한 기능 내부의 숨은 에러를 집중적으로 탐색하고 수정하기
11:02 [/loop] 파이프라인 자동화: 30분 간격 린트 테스트 및 자동 압축 백업 세팅
12:06 마무리: 프로 개발자의 습관, 에이전트 오케스트레이션 시대로의 전환
인간의 감성이 담긴 기획 및 목소리, 그리고 AI의 압도적인 생산성이 만났습니다.
대본부터 렌더링까지 전부 기계에게 맡기는 영혼 없는 자동화가 아닙니다. 작가가 직접 대본을 쓰고 정성껏 녹음한 뒤, 지루하고 반복적인 '시각화 및 컷편집' 노가다만 AI 영상 생성 시스템(VideoGen)에 맡기는 가장 현실적이고 강력한 워크플로우를 소개합니다.
[오늘 라이브 핵심 워크플로우]
1️⃣ 기획 & 녹음 : 인간의 고유한 영역 (대본 작성 및 리딩)
2️⃣ Vrew 컷편집 : Vrew를 활용해서 불필요한 공백을 날리고 MP3 / SRT 데이터 추출
3️⃣ VideoGen & Remotion : 추출된 데이터를 던져주면, AI가 100가지 레이아웃을 조합해 다크 모노톤의 인포그래픽 영상 자동 렌더링!
단순한 툴 소개가 아닙니다. 이 강력한 파이프라인의 핵심 엔진인 'Remotion' 기반의 VideoGen 코드를 직접 뜯어보고 실시간으로 시연합니다.
🎁 [라이브 시청자 단독 특전]
방송에 끝까지 참여해 주신 분들께만! 오늘 시연한 VideoGen 스킬과 시스템 전체 소스코드와 'AI 영상 제작 스킬(프롬프트)' 다운로드 링크를 제공합니다. 방송 중 안내되는 링크를 절대 놓치지 마세요.
#바이브코딩 #바이브랩스 #영상자동화 #Remotion #Vrew #ClaudeCode
🔴 프롬프트 한 방으로 재고관리 끝 — 노션 AI × 쇼핑몰 실시간 연동 라이브
안녕하세요 바이브랩스 랩장 이석현입니다.
"노션에 프롬프트 하나 던지면 재고관리 데이터베이스가 완성된다면?"
"거기에 쇼핑몰까지 연결해서, 주문이 들어오면 재고가 자동으로 줄어든다면?"
오늘 이 라이브에서 전부 보여드립니다. 처음부터 끝까지, 실시간으로.
━━━━━━━━━━━━━━━━━━━━━━━━
📌 이런 분들을 위한 라이브입니다
━━━━━━━━━━━━━━━━━━━━━━━━
✅ 노션으로 재고·주문·업무를 관리하고 싶은 1인 사업자
✅ AI로 뭔가 만들어보고 싶은데 코딩은 모르는 분
✅ "바이브 코딩"이 뭔지 직접 눈으로 확인하고 싶은 분
✅ 노션 데이터베이스를 제대로 써보고 싶은 분
━━━━━━━━━━━━━━━━━━━━━━━━
🎬 오늘 보여드릴 것
━━━━━━━━━━━━━━━━━━━━━━━━
1️⃣ [노션 AI 한 방] 프롬프트 하나로 재고관리 DB 자동 생성
→ 상품명, SKU, 재고수량, 상태, 수식까지 한 번에
2️⃣ [바이브 코딩] 클로드 코드로 초간단 쇼핑몰 만들기
→ 코드 한 줄 안 치고 쇼핑몰이 뚝딱
3️⃣ [연결의 마법] 쇼핑몰 × 노션 실시간 연동
→ 쇼핑몰에서 주문하면 노션 DB 재고가 줄어드는 순간을 함께 봅니다
━━━━━━━━━━━━━━━━━━━━━━━━
🛠 사용 기술
━━━━━━━━━━━━━━━━━━━━━━━━
• Notion + Notion AI — 데이터베이스 생성 및 관리
• Notion API — 외부 앱과 노션 연동
• Claude Code — AI 바이브 코딩
• Next.js + Vercel — 쇼핑몰 프론트엔드 & 배포
━━━━━━━━━━━━━━━━━━━━━━━━
⏱ 라이브 순서
━━━━━━━━━━━━━━━━━━━━━━━━
인트로 — 오늘 만들 것 미리보기
노션 AI로 재고관리 DB 생성 (프롬프트 공개)
수식 속성 추가 — 재고 상태 자동 판별
클로드 코드로 쇼핑몰 바이브 코딩
쇼핑몰 × 노션 API 연동
🔥 실시간 데모 — 주문하면 재고가 줄어드는 순간
Q&A + 마무리
━━━━━━━━━━━━━━━━━━━━━━━━
🎁 라이브 참여 혜택
━━━━━━━━━━━━━━━━━━━━━━━━
• 재고관리 DB 생성 프롬프트 전문 공개
• 수식 속성 5종 치트시트
━━━━━━━━━━━━━━━━━━━━━━━━
🔗 링크
━━━━━━━━━━━━━━━━━━━━━━━━
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지] : https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!] : https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서] : https://www.yes24.com/product/goods/144539067
#노션 #노션AI #재고관리 #바이브코딩 #ClaudeCode #NotionAPI #1인사업자 #자동화 #쇼핑몰만들기 #노코드 #AI활용
![[충격 결과] 클로드 오퍼스를 이겼다고? 중국 AI 모델 GLM-5로 웹 게시판 만들기 (100점 만점 완승!)](https://i.ytimg.com/vi/nbLOfv3Duak/maxresdefault.jpg)
안녕하세요. 바이브랩스의 랩장, 이석현입니다.
오늘은 지난 시간에 이어 '웹 게시판 생성 대결' 시리즈 두 번째 영상입니다. 지난번 클로드 3 오퍼스(Claude 3 Opus)의 결과가 다소 아쉬웠죠? 이번에는 여러분의 열화(?) 와 같은 요청에 힘입어 중국의 AI 모델인 GLM-5를 클로드 코드에 연동해 웹 게시판을 만들어 보았습니다.
솔직히 큰 기대 안 하고, 제 사비 30달러를 과감하게 태워서 동일한 프롬프트로 11가지 깐깐한 기능 테스트를 진행했는데요. 결과는 정말... 저도 깜짝 놀랐습니다. 클로드 오퍼스 4.6을 훌쩍 뛰어넘는 GLM-5의 놀라운 코딩 실력과 충격적인 최종 점수를 영상에서 직접 확인해 보세요!
(영상을 기다리며 토로한 저의 짠내 나는 라이브 방송 실패담과 뼈저린 반성 타임도 살짝 담겨있습니다... 😂)
앞으로도 바이브랩스는 현업에서 진짜 쓸 수 있는 AI 코딩, 바이브 코딩에 대한 찐 테스트를 계속 이어갑니다. 영상이 도움 되셨다면 구독과 좋아요, 알림 설정 부탁드립니다!
📚 랩장 이석현 작가의 책 & 소통 공간
[작가 오픈톡방] 함께 AI와 글쓰기, 코딩에 대해 나눠요!
👉 https://open.kakao.com/o/gfYQfFPh
[최신간] 바이브 코딩 커서 AI와 클로드 코드로 누구나!
👉 https://www.yes24.com/product/goods/161924116
[베스트셀러] 실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지
👉 https://www.yes24.com/product/goods/159060578
[교양부문 세종우수도서] 챗GPT, 글쓰기 코치가 되어 줘
👉 https://www.yes24.com/product/goods/144539067
📩 작가 제안 및 비즈니스 문의 (강연/컨설팅 등)
futurewave@gmail.com
⏱️ 타임라인 (Timeline)
00:00 영상 시작 및 웹 게시판 생성 대결 시리즈 소개
00:26 오늘의 주인공, 소문의 'GLM-5' 모델 테스트 돌입
01:29 클로드 코드(Claude Code)에서 권한 스킵하고 GLM-5 연동하기
02:48 지난번과 100% 동일한 11가지 항목 프롬프트 전송
03:46 (막간 토크) 30달러의 사비 지출과 늦은 밤의 코딩
04:36 [랩장의 반성 타임] 유튜브 라이브 폭망 이유와 뼈저린 깨달음
06:36 드디어 코딩 완료! 프론트엔드 & 백엔드 서버 실행
07:00 [테스트 1] 일반 계정 CRUD (글쓰기, 수정, 삭제) 정상 작동 확인
07:51 [테스트 2] 마크다운(Markdown) 렌더링 검증
08:14 [테스트 3] 유튜브 링크 OG 태그 크롤링 및 배너 표시 확인
08:43 [테스트 4] 좋아요 기능 및 중복 클릭 방지 로직 검증
09:07 [테스트 5] 조회수 중복 증가 방지 로직 (새로고침 테스트)
09:25 [테스트 6] 타인의 글 수정/삭제 권한 접근 차단 확인
09:52 [테스트 7] 대댓글 기능 (중첩된 구조의 댓글 작성) 완벽 작동!
10:46 [테스트 8] 게시판 키워드 검색 기능 검증
11:00 [테스트 9] 최신순, 좋아요순, 조회수순 정렬 기능 테스트
11:24 [테스트 10] 무한 스크롤 (페이지네이션/더보기) 기능
11:48 [테스트 11] 관리자 모드 대시보드 및 새 게시판(QA) 생성 테스트
12:39 대망의 최종 점수 공개! 클로드 오퍼스 vs GLM-5 결과는?
13:27 총평 및 마무리 인사 (GLM-5, 앞으로 애용해야 하는 이유)
안녕하세요, 바이브랩스의 랩장 이석현입니다.
이번 영상에서는 AI 코딩의 강자로 불리는 '클로드 오퍼스 4.6(Claude Opus 4.6)' 모델을 테스트대에 올렸습니다. 과제는 '풀스택 웹 게시판 만들기'입니다.
Python(FastAPI), React, SQLite 등 실제 실무에서 쓰이는 기술 스택을 활용하여 개발자의 기준에서 11가지 항목(CRUD, 인증, 댓글, 조회수 등)을 꼼꼼하게 채점했습니다.
과연 클로드 오퍼스 4.6은 기대만큼의 퍼포먼스를 보여줬을까요? 아니면 의외의 약점을 드러냈을까요? 개발자의 시선으로 분석한 날카로운 피드백과 최종 점수, 영상에서 확인해 보세요.
[영상 타임라인 요약]
[00:00:00] 시리즈 기획 소개: 동일한 프롬프트로 AI 모델별 웹 게시판 생성 능력을 테스트하는 프로젝트의 취지 설명
[00:00:38] 오늘의 실험 모델 및 규칙: 클로드 Opus 4.6 모델 사용 공지 및 11개 항목(만점 22점)의 채점 기준 제시
[00:00:50] 프롬프트 구성 공개: Python(FastAPI), React, Tailwind CSS, SQLite 등 기술 스택 및 기능적 요구사항(CRUD, 인증 등) 상세 설명
[00:02:48] 코딩 실행 및 과정: '클로드 코드(Claude Code)'를 활용한 실제 구현 시작 및 스톱워치를 통한 시간 측정
[00:04:13] 게시판 테스트 기획 의도: 웹 개발의 척도가 되는 게시판 기능을 통해 최신 AI 모델들의 성능을 객관적으로 비교하려는 이유 설명
[00:06:48] 기능 검증 (중간 점검):
[00:06:48] 유튜브 링크 및 좋아요 기능 테스트
[00:07:31] 권한 체크(수정/삭제 제한) 확인
[00:08:02] 조회수 중복 방지 및 업데이트 오류 발견
[00:09:00] 대댓글(재귀적 댓글) 구현 실패 확인
[00:09:45] 검색 및 정렬 기능 테스트
[00:10:40] 무한 스크롤 및 관리자 모드 검증
[00:12:28] 최종 채점 및 평가: 클로드 Opus 4.6의 종합 점수 ??점(100점 만점 환산 시) 기록 및 기대치 대비 아쉬운 성능 총평
[00:13:07] 리더보드 및 다음 예고: 기존 GPT 5.3 모델과의 순위 비교 및 다음 테스트 모델(GLM-5) 안내
[📬 비즈니스 및 강연 제안]
이메일 : futurewave@gmail.com
[💬 바이브랩스 소통 채널]
작가 오픈톡방 :
https://open.kakao.com/o/gfYQfFPh
[📚 이석현(랩장)의 저서 목록]
AI 시대, 개발자와 기획자를 위한 필독서들을 만나보세요.
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
: https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!]
: https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 (교양부문 세종우수도서)]
: https://www.yes24.com/product/goods/144539067
3. 태그 (쉼표 구분)
바이브랩스,이석현,AI코딩,클로드오퍼스,ClaudeOpus,웹개발,게시판만들기,FastAPI,React,코딩테스트,LLM벤치마크,인공지능,개발자,프로그래밍,Cursor,AI툴,소프트웨어엔지니어링,챗GPT,오픈소스,파이썬,자바스크립트
안녕하세요. 바이브랩스 랩장 이석현입니다.
OpenClaw에게 내 컴퓨터의 제어권을 넘겨주는 것이 불안하신가요? 그래서 우리에겐 샌드박스가 필요합니다.
이번 방송은 단순한 툴 설치보다 Parallels 가상 환경이라는 방화벽 뒤에 안전한 실험실을 짓고,
그 안에서 오픈클로(OpenClaw)가 마음껏 코드를 쓰고 지우게 만드는 완벽한 격리 자동화 시스템을 구축합니다.
오늘 저는 맥 미니를 사는 대신, 그 돈으로 소고기 사 먹고 남은 힘으로 오픈클로(OpenClaw)를 세팅하겠습니다.
시스템을 망가뜨릴 걱정 없이, 맥 미니 같은 별도 장비 없이 오직 논리와 구조만으로 완성하는
30년 차 개발자의 무결점 AI 작업실 세팅 노하우를 전수해 드립니다.
설치의 난관을 뚫고, 마침내 텔레그램으로 첫 명령이 수행되는 그 짜릿한 순간을 라이브로 함께 하세요.
다루는 내용:
Ubuntu 가상환경(VM) 최적화 세팅
OpenClaw & 클로드 코드 설치 및 경로 문제 해결
Codex 5.3 oAuth 인증으로 연결
실전 시나리오: 텔레그램으로 서버 파일 조작하기
#AI코딩 #바이브코딩 #오픈클로 #openclaw #몰트봇 #에이전트
VIBELABS는 AI를 활용해 여러분의 아이디어를 가장 빠르고 효율적으로 세상에 내놓는 방법을 연구하고 공유합니다.
구독과 좋아요, 알림 설정은 더 좋은 콘텐츠를 만드는 데 큰 힘이 됩니다.
궁금한 점은 언제든지 댓글로 남겨주세요.
🔔 AI 코딩 연구소, 바이브랩스
문의: [futurewave@gmail.com]
안녕하세요, 바이브랩스의 랩장 이석현입니다!
매달 나가는 AI 구독료, 부담되시죠? 오늘은 무료로 사용할 수 있으면서도 디자인과 코딩의 경계를 허무는 혁신적인 도구, 펜슬(Pencil)을 소개해 드립니다.
펜슬은 피그마(Figma)와 유사한 UI를 제공하지만, VS Code나 커서(Cursor) 같은 IDE와 통합되어 디자인과 코드가 실시간으로 동기화된다는 강력한 장점이 있습니다. 특히 클로드 코드와 MCP 서버로 연동되어, AI에게 말만 하면 디자인을 뚝딱 만들어주고 이를 바로 리액트코드로 변환해 줍니다.
이번 영상에서는 펜슬의 설치부터 클로드 코드를 활용해 가계부 앱을 디자인하고 실제 코드로 구현하는 전체 과정을 담았습니다. 디자인 툴이 낯선 개발자분들도 이제 '펜슬' 하나면 기획부터 구현까지 슈퍼 개발자가 될 수 있습니다.
지금 바로 영상에서 확인해 보세요
(📌영상 핵심 꿀팁) 클로드 코드에게 요청할 때 꼭! "코딩"부터 하지 말고 "펜슬 MCP를 사용해서 캔버스에 디자인해 줘"라고 먼저 명령해야 한다는 점, 잊지 마세요.
--------------------------------------------------------------------------------
[작가 제안하기] 📧 futurewave@gmail.com
[작가 오픈톡방] 🔗 https://open.kakao.com/o/gfYQfFPh
[이석현 랩장의 저서 목록]
📕 [실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지] 👉 https://www.yes24.com/product/goods/159060578
📘 [바이브 코딩 커서 AI와 클로드 코드로 누구나!] 👉 https://www.yes24.com/product/goods/161924116
📗 [챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서] 👉 https://www.yes24.com/product/goods/144539067
00:00 인트로: AI 구독료 걱정? 무료 툴 '펜슬(Pencil)' 소개
02:10 펜슬 다운로드 및 설치 (Mac 애플 실리콘 버전)
04:30 펜슬 실행 및 인터페이스 (레이어 vs 프레임)
06:20 IDE 연동 1: 커서(Cursor)에서 프로젝트 만들기
08:10 IDE 연동 2: 이메일 인증 및 활성화
09:40 펜슬 캔버스 기초: 템플릿 vs 새 파일
11:20 [중요] .pen 파일 생성 후 '저장'부터 해야 하는 이유
13:00 [핵심] 실패 없는 프롬프트: "코딩 말고 디자인부터"
15:10 실전 데모: 가계부 앱 디자인 생성 (대시보드, 거래내역)
17:30 디자인 시스템 및 컴포넌트 자동화 확인
19:20 Design to Code: 디자인을 리액트(React)로 변환
21:40 수정 노하우: 디자인 변경 시 코드로 반영 요청하기
23:10 추가 기능 구현 팁 (카테고리/리포트) 및 마무리
안녕하세요, 30년 차 개발자이자 작가, '바이브랩스'의 랩장 이석현입니다.
오늘은 단순히 코드를 짜는 AI가 아닌, '개발 팀'을 통째로 운영하는 혁신적인 워크플로우를 소개하려 합니다. 바로 [Orchestration Skill Generator]입니다.
많은 분이 AI를 도구로만 사용하지만, 저는 AI를 동료이자 팀원으로 정의합니다. 이번 라이브에서는 기획(소크라테스 모드)부터 프로젝트 셋업, 그리고 다중 터미널을 활용한 병렬 개발(라운드 로빈)까지, 클로드 코드를 활용하여 완벽한 AI 에이전트 팀을 구축하고 지휘하는 과정을 보여드리겠습니다.
TDD(테스트 주도 개발)와 Contract-First(계약 우선 개발) 원칙을 지키면서도 생산성을 극대화하는 저만의 노하우, 이번 주말에 모두 가져가세요. 개발의 미래는 '작성'이 아니라 '설계'와 '지휘'에 있습니다.
[작가 제안 및 비즈니스 문의] 📧 futurewave@gmail.com
[바이브랩스 커뮤니티] 함께 공부하고 성장하는 공간입니다. 🔗 작가 오픈톡방: https://open.kakao.com/o/gfYQfFPh
[저서 소개] 30년 개발 내공과 인문학적 통찰을 담았습니다.
📘 실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지 : https://www.yes24.com/product/goods/159060578
📘 바이브 코딩 커서 AI와 클로드 코드로 누구나! : https://www.yes24.com/product/goods/161924116
📘 챗GPT, 글쓰기 코치가 되어 줘 (교양부문 세종우수도서) : https://www.yes24.com/product/goods/144539067
"개발은 더 싸고 똑똑하게, 디자인은 더 아름답게."
혹시 아직도 비싼 API 비용 때문에 벌벌 떨며 코딩하고 계신가요? 혹은 기껏 만든 앱이 '개발자스러운' 디자인 때문에 외면받아 속상하셨나요?
오늘 바이브랩스 라이브에서는 2026년 개발자의 책상을 완전히 바꿔놓을 두 가지 치트키, '오픈코드(Oh-My-OpenCode)'와 '구글 스티치(Google Stitch)'를 해부합니다.
터미널 기반의 오픈코드가 어떻게 코딩 비용을 획기적으로 줄이고 PM 역할까지 수행하는지, 그리고 디자인 감각이 전혀 없는 개발자도 구글 스티치를 만나면 어떻게 '금손'이 되는지 직접 보여드리겠습니다.
이제 복잡한 코딩과 씨름하는 대신, AI에게 맡기고 커피 한 잔의 여유를 즐기세요. 30년 차 개발자와 함께, 기술 너머의 '일하는 방식'을 바꾸는 시간입니다.
[📌 오늘 라이브 핵심 포인트]
Cost Down: 오픈코드(OpenCode)로 API 토큰 비용 획기적으로 줄이는 실전 세팅법
Design Up: 똥손 탈출! 구글 스티치(Stitch)로 3분 만에 끝내는 고퀄리티 UI 디자인
Workflow: 기획부터 배포까지, AI와 협업하는 '슈퍼 개발자'의 워크플로우 대공개
[🔗 소통 및 저서]
[작가 오픈톡방] 함께 공부하고 성장하는 개발자들의 수다방입니다. https://open.kakao.com/o/gfYQfFPh
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지] https://www.yes24.com/product/goods/159060578
[바이브 코딩 커서 AI와 클로드 코드로 누구나!] https://www.yes24.com/product/goods/161924116
[챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서] https://www.yes24.com/product/goods/144539067
[방송 소개]
위시켓, 크몽에 올라오는 수많은 프로젝트 공고들.
"기능은 심플한데, 엣지 있게 만들어주세요."
개발자를 가장 난감하게 만드는 이런 모호한 요구사항, 여러분은 어떻게 해결하시나요?
오늘 바이브랩스 라이브에서는 실제 올라온 외주 프로젝트 공고를 하나 골라, '30년 차 개발자의 시선'과 'AI의 속도'를 결합해 해결하는 전 과정을 보여드립니다.
단순히 코딩만 하는 것이 아닙니다. 텍스트 뒤에 숨겨진 클라이언트의 욕망을 읽어내고, MVP와 제안서를 완성하는 **'바이브 코딩'의 진수**를 경험해 보세요.
**[오늘의 라이브 커리큘럼]**
**🔍 1. 프로젝트 헌팅 & 해석**
- 나에게 맞는 프로젝트 공고 선정하기
- "이 문장은 어떻게 해석해야 하는가? 나는 왜 이 기술을 두려워 하는가" 30년 차 개발자의 행간 읽기
**🤖 2. AI 클라이언트 페르소나 분석**
- LLM을 활용하여 의뢰인의 의도를 시뮬레이션하고 숨겨진 니즈(Needs) 채굴하기
- 기획서 없는 프로젝트의 요건 정의(PRD) 순식간에 끝내기
**🏗️ 3. 기술 큐레이션 (Tech Curation)**
- 유행하는 기술 vs 비즈니스에 맞는 기술
- 왜 이 프로젝트에는 이 프레임워크와 디자인 시스템을 써야 하는가?
**⚡ 4. 바이브 코딩 타임어택**
- 구글 AI 스튜디오/반중력/클로드 코드를 활용한 초고속 MVP 구현
- 핵심 기능이 '눈'에 보이게 만드는 과정
**📝 5. 클로징: 거절할 수 없는 역제안**
- 구현된 결과물을 바탕으로 클라이언트를 설득하는 제안서 작성법
**[이런 분들께 추천합니다]**
- 요구사항 분석이 막막한 주니어 개발자/프리랜서
- AI를 활용해 개발 속도와 퀄리티를 동시에 잡고 싶은 분
- "그래서 이걸로 돈을 어떻게 버는데?" 실전 적용이 궁금하신 분
**[사용 툴]**
- 구글 AI Studio / 반중력(Antigravity) / 클로드 코드
- Claude 4.5 Opus / Gemini 3.0 Pro
함께 성장하는 AI 코딩 커뮤니티, 바이브랩스
안녕하세요, 바이브랩스(VibeLabs) 연구소장 이석현입니다.
쌓여가는 파일들, 정리는 해야겠는데 어디에 뒀는지 기억도 안 나고 분류하기도 귀찮으셨죠?
오늘은 "저장은 빠르게, 정리는 똑똑하게"라는 컨셉으로, AI를 활용해 구글 드라이브 파일을 자동으로 정리해주는 'Vibe Sort' 프로그램을 직접 개발해 보았습니다.
유명한 생산성 관리 기법인 PARA 메소드(Projects, Areas, Resources, Archives)를 기반으로, 파일을 'Dropzone'에 떨어뜨리기만 하면 AI가 내용을 분석해 적절한 폴더로 이동시켜줍니다.
이번 영상에서는 커서 AI 확장프로그램인 클로드 코드를 활용하여 Flutter 데스크탑 앱을 만드는 과정을 담았습니다. 기획부터 코딩, 그리고 AI가 겪는 수많은 시행착오와 에러를 함께 해결해 나가는 '바이브 코딩'의 생생한 현장을 확인해 보시기 바랍니다.
단순히 코드를 짜는 것을 넘어, AI와 어떻게 협업하고 문제를 해결하는지 보여드립니다.
[📬 비즈니스 및 협업 문의]
작가 제안하기 : futurewave@gmail.com
[📚 이석현 소장의 저서 및 활동]
💬 작가 오픈톡방 (AI와 생산성 이야기)
https://open.kakao.com/o/gfYQfFPh
📘 실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지
https://www.yes24.com/product/goods/159060578
📕 바이브 코딩 커서 AI와 클로드 코드로 누구나!
https://www.yes24.com/product/goods/161924116
📗 챗GPT, 글쓰기 코치가 되어 줘 (교양부분 세종우수도서)
https://www.yes24.com/product/goods/144539067
타임라인
00:00 인트로 & 오늘의 아이디어 (파일 정리의 고통)
01:13 PARA 메소드란 무엇인가? (폴더 구조화의 핵심)
02:17 해결책: Dropzone + AI 추천 + 사람 승인 프로세스
03:17 기술 스택 선정 (Flutter Desktop & AI)
05:25 개발 시작! (PRD, TRD, Tasks 문서 작성)
07:10 Cursor AI & Claude Code로 프로젝트 생성 및 초기 세팅
09:25 폴더 스캐너 구현과 재귀함수 이슈 해결
11:23 OpenAI API 모델 이슈와 해결 (GPT-4o-mini)
14:01 AI 서비스 연결 실패와 디버깅 과정
16:07 대량의 폴더 처리 전략 수정 (Depth 제한)
18:10 최종 테스트: 파일 드롭 & AI 분류 성공
20:53 프로젝트 회고 & 바이브 코딩이 필요한 이유
구글 스티치로 UI 디자인하기
구글 AI Studio에서 웹앱 만들고 배포하기
제미나이 API 설정 및 결제 계정으로 배포하는 방법
안녕하세요, 바이브랩스 연구소장 이석현입니다.
여러분, 책장에 매달 책은 늘어나는데 정작 끝까지 읽은 책은 몇 권이나 되시나요? 저는 이렇게 쌓여만 가는 읽지 않은 책들을 '지식 부채(Knowledge Debt)'라고 정의해 보았습니다.
단순히 책을 읽는 것을 넘어서, 밑줄을 긋고, 내 생각을 정리하고, AI와 함께 실천 방안(Action Item)을 만들어낼 때 비로소 이 부채가 탕감된다면 어떨까요?
오늘 영상에서는 제가 단 4시간 만에 바이브 코딩(Vibe Coding)으로 완성한 '지식 부채 관리 시스템'을 소개합니다.
💡 이 영상에서 다루는 핵심 내용:
지식 부채의 개념: 독서를 재무제표처럼 관리하는 새로운 관점
AI 기능 활용: 제미나이(Gemini) API를 통해 책 내용에서 실천 가능한 행동 지침 뽑아내기
벡터 DB의 힘: 단순 기록이 아닌, 의미 기반 검색과 '아이디어 믹스(Idea Mix)'를 통한 통찰력 발견
바이브 코딩 노하우: 커서(Cursor) AI와 클로드 코드(Claude Code)를 활용한 초고속 개발 과정
구독자 여러분들이 직접 이 서비스를 만들어보거나 발전시키실 수 있도록, 제가 사용한 프롬프트 묶음(노션)과 깃허브 소스코드를 모두 공개합니다. 영상 보시고 꼭 한번 여러분만의 지식 관리 시스템을 만들어보세요!
(참고: 이번 주부터 라이브 방송 시간이 매주 토요일 저녁 9시~12시로 변경되었습니다. 많은 참여 부탁드립니다!)
[함께 성장하고 소통해요]
📩 작가 제안하기: futurewave@gmail.com
💬 작가 오픈톡방: https://open.kakao.com/o/gfYQfFPh
[바이브랩스 소장의 저서 & 추천 도서]
📘 [실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지] 👉 https://www.yes24.com/product/goods/159060578
📕 [바이브 코딩 커서 AI와 클로드 코드로 누구나!] 👉 https://www.yes24.com/product/goods/161924116
📗 [챗GPT, 글쓰기 코치가 되어 줘 : 교양부문 세종우수도서] 👉 https://www.yes24.com/product/goods/144539067
타임라인
00:00 인트로 & 바이브랩스 소개
00:23 왜 '지식 부채'인가? (독서의 ROI 측정하기)
01:51 지식 부채 관리 시스템 UI & 대시보드 소개
02:58 책 등록 프로세스 (교보문고 정보 연동)
03:57 부채 탕감하기 1: 밑줄 긋기와 생각 정리
04:50 부채 탕감하기 2: AI(Gemini)가 제안하는 액션 아이템
06:06 활동 기록 & 다양한 탕감 활동 목록
07:22 핵심 기술: 벡터 DB(Vector DB)와 의미 기반 검색
07:41 아이디어 믹스(Idea Mix): 책과 책 사이의 연결점 찾기
09:23 만드는 과정을 생략하고 결과물부터 보여드린 이유
10:35 개발 프롬프트(노션) & 소스코드(깃허브) 활용법 안내
12:13 커서 AI, 클로드 코드 등 사용 툴 팁
13:50 라이브 방송 시간 변경 안내 (매주 토요일 밤 9시!)
안녕하세요, 바이브랩스입니다.
숨만 쉬어도 돈이 나간다"는 요즘, 여러분의 통장은 안녕하신가요? 오늘은 전설적인 트레이더 '래리 윌리엄스'의 변동성 돌파 전략을 활용하여, 주식 자동매매 시스템을 구축하는 과정을 보여드립니다.
복잡한 코드를 직접 타이핑하는 것이 아닙니다. AI와 대화하듯 코딩하는 '바이브 코딩' 기법을 통해, 한국투자증권의 모의투자 API를 연동하고 Streamlit으로 대시보드까지 구현하는 과정을 담았습니다.
특히 영상 중간에 예기치 않은 오류 발생 시, '클로드 코드'를 활용해서 유연하게 문제를 해결하는 실전 노하우까지 확인하실 수 있습니다. 이제 감정에 휘둘리는 뇌동매매는 그만! 시스템에 맡기고 커피 한 잔의 여유를 즐겨보세요.
[영상 주요 내용]
래리 윌리엄스의 변동성 돌파 전략 핵심 원리
ATR 기반의 안정적인 자금 관리(포지션 사이징) 방법
한국투자증권 API를 활용한 모의투자 봇 구현 실습
AI 코딩 도구(Cursor AI, Claude Code) 활용법
[비즈니스 및 제안]
📧 작가 제안하기 : futurewave@gmail.com
[소통 창구]
💬 작가 오픈톡방 : https://open.kakao.com/o/gfYQfFPh
[함께 보면 좋은 바이브랩스 소장의 저서]
📖 실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지 👉 https://www.yes24.com/product/goods/159060578
📖 바이브 코딩 커서 AI와 클로드 코드로 누구나! 👉 https://www.yes24.com/product/goods/161924116
📖 챗GPT, 글쓰기 코치가 되어 줘 (교양부분 세종우수도서) 👉 https://www.yes24.com/product/goods/144539067
타임라인 (챕터)
00:00 오프닝: 숨만 쉬어도 돈이 나가는 시대, 해결책은?
00:36 트레이딩의 본질과 래리 윌리엄스 전략 소개
02:02 자동매매 봇의 하루 일과표 (09:00~15:30)
03:04 핵심 공식: 변동성 돌파와 매수 임계가 계산법
05:28 '바이브 코딩'이란 무엇인가? (대화형 개발)
06:07 준비 단계: 한국투자증권 API 신청 및 모의투자 세팅
07:22 Step 1: 프로젝트 정의 및 기본 환경 구축
09:53 Step 2: 핵심 데이터 수집 및 변동폭 계산
10:33 Step 3: ATR 기반 자금 관리 로직 구현
11:32 Step 4: 메인 트레이딩 봇 로직 및 UI 구성
13:21 Step 5: 시각화 및 테스트 편의성 보강
14:55 돌발 상황: 안티그래비티 중단과 클로드 코드로의 전환
17:40 최종 테스트: 모의투자 자동매매 시뮬레이션
19:56 마무리 및 도서 소개
안녕하세요, 바이브랩스 연구소장 이석현입니다.
지난 시간, 구글의 야심작이 남긴 아쉬움을 뒤로하고 이번에는 전 세계 개발자들이 열광하는 '커서(Cursor) AI'를 링 위에 올렸습니다. 미션은 동일합니다. 30분 안에 P2P 화상 회의(Zoom 클론) 서비스를 완벽하게 구현하는 것!
커서의 핵심 무기인 'Composer 1' 모델은 과연 악명 높은 WebRTC의 늪을 건널 수 있었을까요? 화려한 속도 뒤에 숨겨진 치명적인 버그들과의 사투, 그리고 영상 마지막에 준비된 충격적인 반전(쿠키 영상)까지 놓치지 마세요. 여러분의 30분은 치킨보다 소중하니까요.
[📮 비즈니스 및 강연 문의]
작가 제안하기 : futurewave@gmail.com
[📚 바이브랩스 소장 이석현 작가의 책 & 커뮤니티]
함께 성장하고 소통하실 분들을 환영합니다.
💬 작가와 소통하는 오픈톡방
[입장하기] https://open.kakao.com/o/gfYQfFPh
📘 실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지
[도서 보러가기] https://www.yes24.com/product/goods/159060578
📙 바이브 코딩 커서 AI와 클로드 코드로 누구나!
[도서 보러가기] https://www.yes24.com/product/goods/161924116
📕 챗GPT, 글쓰기 코치가 되어 줘 (세종우수도서 선정)
[도서 보러가기] https://www.yes24.com/product/goods/144539067
타임라인
00:00 오프닝 & 지난 시간 리뷰 (구글의 굴욕?)
00:52 오늘의 선수 입장: 커서(Cursor) AI Composer 1
01:45 룰 소개: 30분 타임어택 & 5회 프롬프트 제한
02:16 코딩 시작: 놀라운 속도의 Next.js 환경 설정
02:54 1차 테스트: 화상 회의실 생성과 첫 번째 에러
04:09 화면 공유 기능 테스트 & '무중력' 버그의 재림?
05:39 게스트 입장 테스트 & 치명적인 화면 공유 오류
06:50 최종 수정 후 생존 확인 (WebRTC 연결 성공)
07:55 총평: 커서 AI의 장단점 분석
08:27 [쿠키 영상] GPT-5.1 Codex Max 모델의 깜짝 등판
09:50 최종 마무리
안녕하세요! 여러분의 'AI 지갑 지킴이'이자 '바이브랩스' 연구소장 이석현입니다.
드디어 판을 벌렸습니다! 현재 가장 핫한 AI 코딩 툴 3대장을 링 위에 세우는 대형 프로젝트, 그 첫 번째 시간입니다. 이번 시리즈에서는 WebRTC 기술을 활용한 줌(Zoom) 클론 코딩이라는 고난도 미션을 통해 각 AI의 실력을 낱낱이 파헤쳐봅니다.
🥊 오늘의 선수: 구글 제미나이 3.0 Pro (일명 '무중력')
해외 레딧에서는 "토큰은 많지만 맥락을 놓친다"는 평과 "도서관의 모든 책을 읽은 천재지만 동문서답한다"는 비유가 있기도 했는데요. 과연 '무중력' 제미나이는 실전 코딩에서 어떤 모습을 보여줄까요?
🛑 3가지 생존 법칙 (The Rules)
Time Attack: 제한 시간 30분! (넘기면 탈락)
Prompt Limit: 프롬프트는 단 5회만 허용!
Error Count: 에러 5회 발생 시 즉시 탈락!
Next.js 기반의 실시간 화상 회의 구현부터 화면 공유 시 발생한 '거울 모드(화면 뒤집힘)' 이슈 해결까지! 제미나이와의 아슬아슬한 코딩 한판 승부, 영상에서 확인해 주세요.
다음 편은 '코딩 챔피언'이라 불리는 Cursor AI(커서 AI)가 등판합니다. 구독과 알림 설정으로 놓치지 마세요!
[작가 제안하기]
📧 futurewave@gmail.com
[작가 오픈톡방]
https://open.kakao.com/o/gfYQfFPh
[이석현 소장의 저서 & 추천 도서] 📖
[실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]
👉 https://www.yes24.com/product/goods/159060578
📖 [바이브 코딩 커서 AI와 클로드 코드로 누구나!]
👉 https://www.yes24.com/product/goods/161924116
📖 [챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서]
👉 https://www.yes24.com/product/goods/144539067
타임라인
00:00 오프닝 & 바이브랩스 소개
00:18 AI 코딩 툴 3대장 매치 시작! (이번 미션: 줌 클론 코딩)
00:43 오늘의 선수 입장: 구글 제미나이 3.0 Pro ('무중력')
01:10 해외 반응 분석: 제미나이 vs 클로드 코드 비교
02:47 '절대 프롬프트' 공개 & 3가지 생존 규칙 (30분/5회/5에러)
04:25 코딩 시작! (Next.js 프로젝트 생성 & 시그널링 서버)
05:07 1차 구현 완료 및 첫 번째 에러 발생
06:06 핵심 기능 테스트 (마이크, 비디오, 노션 AI 연동 확인)
07:28 위기 봉착! 화면 공유가 안 된다? (feat. 거울 모드 이슈)
08:06 프롬프트 추가 투입 (에러 수정 요청)
09:38 최종 구현 확인 & 화면 뒤집힘 문제의 결말
11:36 1라운드 총평: 제미나이, 아슬아슬한 생존!
12:20 다음 화 예고: 최강자 'Cursor AI' 등판
안녕하세요, 개발은 AI에게 맡기고 생색은 제가 내는 '바이브랩스' 이석현입니다.
오늘 영상은 원래 '구글 AI 스튜디오'로 10분 만에 멋진 홈페이지를 만드는 것이 목표였습니다. 하지만 리허설 도중 터져 나오는 오류와 엉뚱한 결과물 때문에 급히 기획을 변경했습니다. 과연 내 책의 정보를 정확하게 가져와서, 멋진 홍보 페이지를 완성해 줄 AI는 누구일까요?
구글의 야심작 'AI 스튜디오'와 앤스로픽의 새로운 강자 '클로드 코드' 데스크톱 버전을 링 위에 올렸습니다.
미션은 제 신간 [실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지]의 랜딩 페이지를 만드는 것! 알라딘 API 연동부터 디자인, 반응형 웹 구현까지... 과연 어느 쪽이 '사오정' 짓을 하고, 어느 쪽이 '눈치 빠른 경력직'처럼 일했는지 영상에서 직접 확인해 보세요.
코딩을 몰라도 누구나 입으로 코딩하는 세상, '바이브 코딩'의 세계로 여러분을 초대합니다.
[문의 및 제안]
📧 작가 제안하기 : futurewave@gmail.com
[바이브랩스 이석현 작가의 저서 만나보기]
📚 실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지 : 업무 효율을 극대화하는 프롬프트 활용의 정석
👉 https://www.yes24.com/product/goods/159060578
📚 바이브 코딩 커서 AI와 클로드 코드로 누구나! : 비전공자도 앱을 만드는 가장 쉬운 방법 (2025년 최신간)
👉 https://www.yes24.com/product/goods/161924116
📚 챗GPT, 글쓰기 코치가 되어 줘 : 2024년 세종도서 교양부문 선정작, 글쓰기와 AI의 완벽한 만남
👉 https://www.yes24.com/product/goods/144539067
타임라인 (챕터)
00:00 인트로: 30년 코딩 장인의 고백 "오늘 영상 망할 뻔했습니다"
00:45 기획 변경! 구글 AI 스튜디오 vs 클로드 코드 맞짱 대결
01:10 오늘의 미션: 내 책 홍보 랜딩페이지 만들기 (조건 3가지)
02:42 코딩 시작: 빛의 속도 구글 vs 계획적인 클로드
03:26 1차 중간 점검: 구글의 치명적인 실수 (환각 현상의 습격)
05:15 클로드 코드의 활약: API 연동과 모듈화의 정석
06:05 구글 결과물 확인: "이 책 누구 책이야?" (feat. 서승완 작가?)
06:38 클로드 결과물 확인: 깔끔한 디자인과 정확한 팩트 체크
08:06 2차 수정 요청: 제발 제목이라도 똑바로 써줘...
09:25 최종 비교 & 총평: 사오정 구글 vs 눈치 빠른 신입 클로드
10:21 결론: 정신 건강을 위해 '이것' 쓰세요 (구글 개발자님들 분발해 주세요)
안녕하세요, 바이브랩스 연구소장 이석현입니다.
"머릿속엔 100억짜리 아이디어가 있는데, 리액트니 넥스트JS니 하는 개발 용어 때문에 포기하셨나요?"
더 이상 기술 스택 때문에 쫄지 마세요. 여러분이 멍청해서가 아닙니다. AI에게 잘못된 도구를 쥐여줬기 때문입니다. 오늘은 30년차 개발자인 제가 직접 깎은 '마스터 메타 프롬프트'를 사용하여, 코딩 지식이 전혀 없는 비개발자도 전문가 수준의 앱을 만드는 방법을 보여드립니다.
핵심은 'AI 프렌들리(AI Friendly)'입니다. 복잡한 최신 기술보다 AI가 실수를 덜 하고, 끝까지 기억할 수 있는 '토큰 가성비' 좋은 도구를 선택하는 것이 바이브 코딩의 핵심입니다.
영상에서는 클로드 코드(Claude Code) 데스크탑 버전을 활용해, [요구사항 정의서] - [기술 사양서] - [착수 프롬프트] 3종 세트를 자동으로 생성하고, 실제 작동하는 'OCR 영수증 인식 가계부'를 만드는 전 과정을 담았습니다.
이제 여러분은 결정만 하세요. 코딩은 AI 비서가 다 해줍니다. 저와 함께 AI 비서들의 '악덕 고용주'가 되어보시죠!
[ 🚀 비즈니스 및 제안 ]
작가 제안하기 : futurewave@gmail.com
[ 📚 바이브랩스 소장의 저서 안내 ]
실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지 : https://www.yes24.com/product/goods/159060578
바이브 코딩 커서 AI와 클로드 코드로 누구나! : https://www.yes24.com/product/goods/161924116
챗GPT, 글쓰기 코치가 되어 줘 (2025 세종우수도서 선정) : https://www.yes24.com/product/goods/144539067
타임라인 (챕터)
00:00 개발 용어 멘붕 현장 & 영상 주제 소개
00:51 30년차 개발자의 비밀: Human Friendly vs AI Friendly
01:13 토큰 효율성: 왜 최신 기술보다 Streamlit인가?
01:50 당신의 욕망에 따른 프레임워크 처방전
02:36 '마스터 메타 프롬프트' 작동 원리 설명
03:29 클로드 코드(Claude Code) 데스크탑 실행 및 설정
04:35 1단계: AI와의 인터뷰 (어떤 앱을 만들고 싶은가요?)
05:14 2단계: AI의 프레임워크 분석 및 선정 과정
08:15 3단계: 전문가급 기획 문서 3종 세트 자동 생성 (PRD, TRD, Tasks)
09:27 문서 파일 로컬 저장 자동화 시키기
10:45 코딩 착수! AI에게 '당장 개발해' 명령하기
11:08 의존성 설치부터 앱 실행까지 논스톱 진행
13:34 결과물 확인: 스마트 가계부 기능 테스트 (대시보드, OCR 등)
15:37 굳이 비싼 노션 AI 쓸 필요 있나요? (로컬 앱의 장점)
16:38 마무리 인사
안녕하세요! 인공지능에 미쳐서 월 100만 원 태우는 남자, 여러분의 AI 지갑 지킴이 바이브랩스 소장 이석현입니다.
여러분, 큰맘 먹고 산 두꺼운 IT 전문 서적들... 혹시 라면 냄비 받침이나 베개로 쓰고 계신가요? (뜨끔하셨죠? 저도 그럽니다..ㅎㅎ)
오늘은 구글에서 작정하고 만든 무료 AI 노트 도구, 'NotebookLM'을 소개합니다. 제가 직접 쓴 책을 이 녀석에게 먹여봤는데요, 결과가 충격적입니다.
✅ 텍스트만 넣었을 뿐인데 고퀄리티 팟캐스트(Audio Overview)를 만들어주고
✅ 복잡한 개념을 마인드맵과 퀴즈로 정리해주고
✅ 심지어 유료 버전에서는 PPT 슬라이드까지 뚝딱 만들어냅니다.
이제 눈으로만 읽지 말고, 귀로 듣고 대화하며 공부하세요. '바이브 코딩'의 핵심은 AI에게 맡기고 우리는 지식을 즐기는 것입니다!
오늘 영상이 유익했다면 구독과 좋아요 부탁드립니다!
[비즈니스 및 강연 문의]
📧 작가 제안하기 : futurewave@gmail.com
[영상 속 바이브랩스 소장의 저서 만나보기] 실습해 보고 싶은데 넣을 PDF가 없다면? 아래 책들을 강력 추천합니다!
📖 실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지
👉 https://www.yes24.com/product/goods/159060578
📖 바이브 코딩 커서 AI와 클로드 코드로 누구나!
👉 https://www.yes24.com/product/goods/161924116
📖 챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서
👉 https://www.yes24.com/product/goods/144539067
타임라인 (챕터)
00:00 인트로: AI에 월 100만 원 쓰는 남자의 통장 사정
00:47 문제 제기: 두꺼운 개발 책, 1장만 읽고 포기하시나요?
02:03 구글 NotebookLM 접속 및 기본 사용법
03:00 소스 업로드 (PDF, 구글 드라이브, 웹사이트 등)
04:22 핵심 기능 1: AI 팟캐스트(오디오 개요) & 동영상 생성
05:38 핵심 기능 2: 마인드맵으로 구조화하기
07:00 저자 vs AI 설명 대결 (플러터를 레고에 비유해줘!)
08:46 핵심 기능 3: 스터디 가이드 & 퀴즈 생성
09:38 소름 돋는 AI 팟캐스트 청취 (숨소리까지 리얼함)
10:30 Deep Research: 유튜브 영상과 웹 문서를 소스로 추가하기
12:20 유료 기능(Gemini Advanced): 인포그래픽 & 슬라이드 생성
13:20 Deep Research 결과 확인 (정보의 확장)
16:35 AI가 만들어준 동영상 개요 결과물
17:35 AI가 만들어준 PPT 슬라이드 결과물
18:45 아웃트로: 이제 책은 베개가 아닙니다. 바이브 코딩하세요!
안녕하세요, 바이브랩스입니다.
자고 일어나면 새로운 AI가 쏟아지는 세상, 오늘은 개발자들의 가슴을 뛰게 할 빅매치를 준비했습니다. 바로 화제의 중심 '클로드 오퍼스 4.5*와 이에 맞서는 '제미나이 3 프로(AntiGravity)'의 코딩 성능 비교입니다.
단순한 'Hello World' 출력이 아닙니다. 개발자라면 누구나 그 난이도를 짐작할 수 있는 '벡터 그래픽 에디터(그림판)' 구현을 미션으로 던졌습니다.
마우스 제스처에 따른 실시간 렌더링 (러버밴드 효과)
객체 선택 및 이동, 속성 변경 (색상, 굵기)
실수도 되돌리는 Undo/Redo 기능까지
이 모든 것을 단 한 번의 프롬프트(One-Shot Prompt)로, 혹은 단 한 번의 수정으로 얼마나 완벽하게 구현해낼까요?
오퍼스 4.5의 놀라운 속도와 제미나이의 안정적인 구현 능력, 그 흥미진진한 대결 결과를 영상에서 확인해 보세요. 이제 코딩은 '작성'이 아니라 '설계'와 '상상'의 영역으로 넘어가고 있습니다. 바이브랩스와 함께 그 변화의 파도에 올라타시길 바랍니다.
[문의 및 제안] 작가 제안하기 : futurewave@gmail.com
타임라인
00:00 인트로: 바이브랩스 소개 & 클로드 오퍼스 4.5 등장
00:51 오늘의 미션: 단순해 보이지만 어려운 '그림판' 만들기
01:54 라운드 1: 클로드 오퍼스 4.5에게 코딩 지시 (프롬프트 입력)
03:42 오퍼스 4.5 결과 확인: 5분 컷? 놀라운 속도와 일부 버그
05:10 오퍼스 4.5 코드 리뷰: 벡터 그래픽 구현 능력 평가
07:25 라운드 2: 제미나이 3 프로(Anti-Gravity) 등장
07:51 제미나이 코딩 시작: 신중함의 미학?
08:52 결과 비교: 시간은 2배, 하지만 퀄리티는?
10:22 결론: 코딩을 넘어 설계로, AI 시대 개발자의 역할
10:47 아웃트로: 구독과 좋아요는 큰 힘이 됩니다
안녕하세요, 바이브랩스입니다.
여러분, 솔직해집시다. 노션에 열심히 기록한 나의 소중한 데이터들, 정말 온전히 '내 것'이라고 할 수 있을까요? 인터넷이 끊기면 볼 수 없고, 로딩 기다리다 속 터지고... 우리는 어쩌면 노션이라는 거대 플랫폼의 세입자일지도 모릅니다.
그래서 결심했습니다! 내 데이터의 집을 직접 짓기로요. 이번 영상에서는 제가 즐겨 쓰던 노션 가계부 템플릿을 분석해, 인터넷 없이도 돌아가는 PWA(프로그레시브 웹 앱)으로 탈바꿈시키는 과정을 담았습니다.
특히 이번 실험은 현재 가장 핫한 AI 코딩 툴 3대장의 정면 승부입니다!
1️⃣ 커서 AI (Claude Opus 4.1)
2️⃣ 구글의 Antigravity (Gemini 3.0 Pro)
3️⃣ VS Code (Codex GPT-5.1 Max)
과연 이 복잡한 요구사항을 뚫고, 완벽한 가계부 앱을 만들어낸 AI는 누구였을까요? 예상 밖의 참사와 반전이 기다리는 실험 현장으로 여러분을 초대합니다.
재미있게 보셨다면 구독과 좋아요, 알림 설정 부탁드립니다! 보고 싶은 AI 도구 대결이 있다면 댓글로 남겨주세요.
[비즈니스 및 작가 제안] 📧
이메일 : futurewave@gmail.com
타임라인
00:00 인트로 : 노션에 세 들어 사는 우리, 데이터를 독립시키자
00:41 프로젝트 계획 : 노션 가계부 해체 및 PWA 앱 설계 (PRD, TRD)
03:45 데이터베이스 구축 : Supabase 테이블 생성 및 세팅
04:29 첫 번째 도전자 : Cursor AI (Claude Opus 4.1) 구현 시작
10:45 두 번째 도전자 : AntiGravity (Google Stitch) 구현 시작
14:38 AntiGravity의 황당한 실패 사유 (쿼터 초과?)
15:42 세 번째 도전자 : VS Code (Codex GPT-5.1 Max) 구현 시작
18:58 최종 리뷰 : 3가지 AI 툴 성적표 및 승자 공개
19:56 아웃트로 : 개발자는 어떤 도구를 선택해야 할까?
안녕하세요, 바이브랩스입니다. 저는 개발자이자 AI와 글쓰기를 주된 테마로 글을 쓰는 작가입니다. 바이브랩스 채널에서는 저의 개발 경험과 INFP 성향을 바탕으로, 효율적인 AI 코딩 및 워크플로우 전략을 탐구하고 공유하고 있습니다.
이번 영상에서는 최근 화제가 되고 있는 3가지 AI 코딩 툴의 실제 성능을 냉철하게 비교 분석합니다. 구글이 야심 차게 출시한 안티그래비티(Antigravity)를 포함해, 커서 AI(Cursor AI), 그리고 VS Code 코덱스(Codex 5.1 Max)를 사용해서 구글 킵 클론을 진행했습니다.
[🔥 벤치마크 주요 내용]
구현 목표: 구글의 대표 메모 서비스인 구글 킵(Google Keep)을 클론하는 것.
(메이슨리 레이아웃, 메모 생성/삭제, 라벨, 로컬 저장 등 7가지 핵심 기능 요구)
테스트 모델:
Antigravity: Gemini 3.0 Pro
커서 AI: Claude Sonnet 4.5
VS Code 코덱스: GPT-5.1 Codex Max
평가 기준: 요구 기능 구현 여부, 소요 시간, 프롬프트 구사 횟수, 코드 라인 수, 디자인 점수, 안정성.
과연 자사 서비스인 구글 킵을 클론하는 미션을 AI 코딩 툴들은 얼마나 충실하게 수행했을까요? 특히 제미나이 3 Pro를 탑재한 Antigravity의 예상치 못한 결과와, 가장 효율적인 코드를 작성한 툴은 무엇인지 영상에서 확인해보세요. 이 결과가 여러분의 개발 툴 선택과 생산성에 중요한 인사이트를 제공할지도 모릅니다.
영상 시청 후 궁금한 점이나 다음 영상에서 다루었으면 하는 AI 개발 주제가 있다면 댓글로 편하게 남겨주세요.
협업 및 작가 제안 문의:
futurewave@gmail.com
타임라인
00:00 인트로: AI 코딩 툴 벤치마크 소개
00:13 오늘의 미션: 구글 킵(Google Keep) 클론하기 (3가지 AI 툴 비교)
00:33 벤치마크에 참여할 세 선수 소개: 안티그래비티, 커서 AI, VS Code 코덱스
00:50 벤치마크 평가 기준 (기능, 시간, 코드 라인 등) 설명
01:21 구글 킵의 핵심 UI/UX 특징 (메이슨리 레이아웃) 분석
01:41 [1라운드] 안티그래비티 (Gemini 3 Pro) 성능 테스트 시작
02:17 안티그래비티에 7가지 기능 요구사항 프롬프트 전송
03:15 안티그래비티의 초기 안정성 및 인상 (개발자 시점)
03:47 안티그래비티의 개발 진행 상황 및 내부 플랜 확인
05:37 안티그래비티 개발 완료 및 기능 테스트 시작 (메모 생성/삭제, 레이아웃)
06:44 치명적인 오류 발견: 로컬 스토리지 저장 실패 (0점 처리)
07:56 안티그래비티 종합 점수 공개: 9개 항목 중 3개 통과 (33.3%)
08:04 안티그래비티 최종 평가 및 아쉬움 (소요 시간 609초)
09:07 [2라운드] 커서 AI (Claude Sonnet 4.5) 성능 테스트 시작
09:23 커서 AI에 동일 프롬프트 전송
09:53 커서 AI 개발 진행 및 코드 작성 과정 확인
10:04 커서 AI 개발 서버 실행 및 기능 테스트 시작
11:11 메모 생성 및 메이슨리 레이아웃, 삭제 기능 테스트
11:39 색상 및 라벨 기능 테스트 및 수정
13:10 검색 기능 테스트 및 최종 점검
13:30 커서 AI 코드 라인 수 확인: 1191 라인
13:49 커서 AI 종합 점수 공개 및 1위 등극
13:58 [3라운드] VS Code 코덱스 (GPT-5.1 Codex Max) 성능 테스트 시작
14:04 코덱스에 동일 프롬프트 전송 및 설정 확인
14:47 코덱스 개발 서버 실행 및 기능 테스트 시작 (소요 시간 3분 5초)
14:52 코덱스 UI 디자인 및 메모 기능 테스트
15:30 로컬 스토리지 저장 오류 발생 확인
16:44 라벨, 검색, 이미지 업로드 기능 테스트
17:56 코덱스 코드 라인 수 확인: 663 라인 (가장 적은 코드)
18:10 코덱스 종합 점수 공개 및 2위 (76.1점)
18:25 최종 결론: 3가지 AI 코딩 툴의 장단점 및 개발 방향 제시
18:49 아웃트로
안녕하세요, 바이브랩스입니다. 저는 30년차 개발자이자 AI와 글쓰기를 주된 테마로 글을 쓰는 작가입니다. 본 채널에서는 저의 경험을 바탕으로 AI를 활용한 혁신적인 코딩 및 배포 워크플로우를 주로 공유하고 있습니다.
“AI로 코드를 만들어준다”는 말은 많이 들었는데,
정작 구글이 새로 내놓은 AI Studio + Build + Stitch 조합이
어떤 워크플로우를 만들 수 있는지는 막연하게 느껴지셨을 거예요.
이번 영상에서는 새로 출시된 Gemini 3 Pro의 강력한 코드 생성 능력을 활용하여, Google Stitch에서 디자인한 결과물을 Google AI Studio의 빌드 기능을 통해 실제 동작하는 React 웹 앱으로 만들고, 나아가 Vercel 무료 플랜을 활용해 최종 배포까지 완료하는 전 과정을 보여드립니다.
코드를 단 한 줄도 작성하지 않고 아이디어 구상부터 최종 배포까지 이르는 놀라운 AI 코딩 워크플로우를 통해 개발 생산성의 혁신을 경험해 보세요!
[주요 내용]
Gemini 3 Pro의 혁신: 멀티모달 이해, 추론, 그리고 압도적인 코드 생성 능력
Stitch를 활용한 디자인: 텍스트 프롬프트로 원하는 UI/UX 디자인 생성 및 개선
Google AI Studio 빌드: Stitch 디자인을 React 코드로 자동 변환 및 기능 구현 (어드민 페이지, CRUD 기능 구현)
통합 워크플로우의 장점: 구글 인프라 간의 끊김 없는 연동과 무료 플랜 활용
로컬 환경에서의 개선: 다운로드한 코드를 커서(Cursor)에서 개선하고 Vercel로 배포하는 실전 과정
이 워크플로우는 특히 저처럼 글쓰기와 개발을 병행하는 INFP 개발자/작가님들이 아이디어를 빠르게 현실화하는 데 큰 도움이 될 것입니다.
영상 시청 후 궁금한 점이나 보고 싶은 AI 개발 튜토리얼 주제가 있다면 댓글로 편하게 남겨주세요!
협업 및 작가 제안 문의:
futurewave@gmail.com
타임라인
00:00 인트로: 코딩 없이 완성된 웹사이트 (Gemini 3 Pro, Stitch, AI Studio, Vercel)
00:27 오늘의 AI 코딩 워크플로우 소개 (아이디어 → 배포)
00:48 Gemini 3 Pro의 핵심 기능 분석 및 왜 중요한가?
01:19 Stitch: AI 기반 UI/UX 디자인 생성 및 개선 (Pro 모델 활용)
01:52 개인 SNS용 포트폴리오 랜딩 페이지 디자인 요청
02:50 생성된 디자인 검토 및 리디자인 (나노 바나나 프로 vs. 다크 테마)
03:57 일일 크레딧 및 리디자인 기능 사용 횟수 확인 (Stitch 설정)
04:43 최종 다크 테마 디자인 선택 및 AI Studio로 익스포트
05:11 Google AI Studio 빌드 기능 소개 및 프로젝트 가져오기
05:52 AI Studio 빌드: 프롬프트 입력 및 React 코드 자동 생성 과정 설명 07:35 AI Studio 빌드 결과 확인 및 파일 구조 탐색
08:07 Stitch 디자인을 기반으로 필요한 기능 추가 요구 (관리자 페이지, CRUD)
09:55 한국어 번역 및 관리자 페이지 기능 구현 요청
10:25 AI Studio에서 기능 구현 및 코드 변경 내역 확인
11:00 구현된 관리자 페이지 기능 테스트 (프로필, 연결, 작업물 관리)
11:58 테스트 중 발생한 오류 진단 및 Gemini 3 Pro를 활용한 'Auto-Fix' 요청
12:21 보안 이슈 경고: 코드에 직접 ID/PW를 하드코딩하는 위험성 (개발자 관점)
13:13 Auto-Fix 완료 및 수정된 관리자 페이지 재테스트
14:20 커서(Cursor)를 이용한 로컬 환경 빌드 및 배포
14:46 커서에서 React 프로젝트 빌드 및 디펜던시 설치
15:07 개발 서버 실행 및 로컬 환경에서 최종 결과 확인
15:45 최종 웹 앱을 Vercel 무료 플랜으로 배포하는 방법
17:08 요약: Gemini 3 Pro와 AI 도구들을 활용한 초고속 개발 워크플로우
안녕하세요, 바이브랩스입니다.
오늘은 '바이브 코딩'이 아닌, AI 시대의 '바이브 워킹(Vibe Working)', 즉 생산성 혁명에 관한 이야기입니다.
AI에게 "예쁘게 해줘"라고 했더니... 어딘가 뻔하고, 밋밋한 '부트캠프 템플릿' 같은 결과물만 받아보셨나요? 이것은 AI가 학습한 데이터의 '평균의 저주' 때문입니다.
이번 영상에서는 이 저주를 깨부수고, AI에게 '나만의 디자인 DNA'를 주입하는 획기적인 방법을 공개합니다. 구글 스티치(Stitch)로 나만의 디자인 표준을 만들고, 그 스타일을 클로드(Claude)의 '스킬(Skill)' 기능으로 학습시키는 전 과정입니다.
💡 이번 영상의 핵심 포인트 (Vibe Working)
1. 구글 스티치로 나만의 디자인 표준(폰트, 색상, 레이아웃) 만들기
2. 클로드(Claude) '스킬' 기능으로 AI에게 '디자인 DNA' 각인시키기
3. [실전 A/B 테스트] 스킬을 적용한 AI와 적용하지 않은 AI의 놀라운 결과물 비교
이 방법을 사용하면, 여러분이 만드는 모든 프로젝트에 일관된 브랜드 아이덴티티를 적용할 수 있습니다.
📨 비즈니스 및 작가 제안
futurewave@gmail.com
타임라인
00:00 인트로: AI 디자인, 왜 항상 뻔할까요? '평균의 저주'
01:47 1단계: Standardization (구글 Stitch로 디자인 표준 만들기)
02:12 [실습] Stitch로 개인 포트폴리오 랜딩 페이지 생성
02:53 핵심: '완성도'가 아니라 '나만의 스타일' 찾기 (디자인 DNA 정의)
04:07 [꿀팁 1] '국룰 폰트' 금지 (Pretendard 폰트 사용하기)
04:46 [꿀팁 2] '불편한 색상' 쓰기 (명확한 헥스 코드 사용)
05:23 2단계: Claude 스킬로 '디자인 DNA' 이식하기
06:38 [실습] Stitch 결과물을 Claude '스킬 크리에이터'로 학습시키기
07:28 3단계: 실전 A/B 테스트 (in Cursor AI)
08:23 [비교] 스킬(DNA) 없는 AI vs 스킬(DNA)을 가진 AI
10:28 최종 결과물 비교: '평균' 디자인 vs '브랜드' 디자인
11:34 결론: 나만의 디자인 시스템을 AI에게 주입하는 법
안녕하세요! 여러분의 아이디어를 현실로 코딩하는 곳, 바이브랩스입니다.
우리는 왜 매년 '올해는 꼭!' 다짐하며 목표를 세우고, 왜 매번 '작심삼일'로 끝나버릴까요?
저는 그 이유가 우리의 '의지'가 데이터가 아닌 '감정'의 영역에 있기 때문이라고 생각했습니다. 논리적인 '목표'와 감성적인 '나(MBTI)' 사이에 연결고리가 없었던 거죠.
그래서 AI를 활용해 이 둘을 연결하는 '디지털 비전 보드' 앱을 직접 만들었습니다. 16가지 MBTI 성향에 맞춰 나만의 꿈, 목표, 열망을 시각화하고 매일 동기를 부여받는 감성 엔진이죠.
🚀 '바이브 코딩'에서 '바이브 워킹'으로
이번 영상은 단순한 'AI 코딩' 시연이 아닙니다. AI를 나의 아이디어를 구현하는 강력한 '생산성 파트너'로 활용하는 '바이브 워킹(Vibe Working)'의 실제 사례입니다.
프로젝트의 기획(PRD), 기술 명세(TRD), 개발 계획(Prompt Design)이 담긴 '명세서'만 AI에게 전달하고, AI가 스스로 앱을 빌드하도록 지시합니다.
특히 최신 Cursor AI 2.0의 '에이전트(Agents)' 기능을 활용해, 마치 3명의 AI 셰프(Composer, Sonnet, GPT-5)에게 동시에 요리를 주문하고 가장 잘 만든 결과물을 선택하듯이, 병렬로 코드를 생성하고 실시간으로 디버깅하는 전 과정을 생생하게 담았습니다.
AI와 함께라면 아이디어 기획부터 실제 작동하는 서비스 구현까지, 불가능해 보였던 일들이 현실이 됩니다.
여러분의 '작심삼일'을 '매일의 성실함'으로 바꿔줄 AI 기반 '바이브 워킹', 그 과정을 직접 확인해 보세요!
👍 영상이 도움이 되셨다면 '좋아요'와 '구독', '알림 설정'은 큰 힘이 됩니다. 여러분의 아이디어나 AI 활용 팁도 댓글로 자유롭게 남겨주세요!
[비즈니스 및 작가 제안하기]
futurewave@gmail.com
4. ⏰ 타임라인 (주요 섹션)
00:00 인트로
00:08 😥 우리가 매년 목표에 실패하는 이유 (작심삼일)
00:28 🧠 의지는 '데이터'가 아니라 '감정'입니다
00:39 ✨ 새로운 개념: 비전 코딩 (Vision Coding)
00:46 🚀 오늘 만들 앱: MBTI 디지털 비전 보드
01:23 🛠️ 개발 시작: Cursor AI와 명세서(PRD, TRD) 준비
01:40 [PRD] 제품 요구사항: "MBTI 기반 비전보드"
02:31 [TRD] 기술 스택: "Next.js, Isar DB, ShadCN..."
03:11 [Prompt] AI 개발 마일스톤 설계
03:37 🤖 Cursor AI 2.0의 핵심 기능: '에이전트(Agents)' 소개
05:57 (ft. Git Worktree: AI 병렬 작업의 비밀)
06:50 1️⃣ 단계: 프로젝트 초기 설정 (마일스톤 0)
07:23 ⚔️ AI 셰프 3명(Composer, Sonnet, GPT-5) 동시 작업 시작!
07:48 💡 Cursor 2.0의 '리뷰' 기능 (코드 Diff 확인)
08:33 🌳 Git 커밋 및 개발 서버 실행 (npm run dev)
10:01 1차 테스트: 기본 UI 확인
10:13 2️⃣ 단계: DB 스키마 및 16개 MBTI 카드 UI 구현
11:45 🐞 실시간 디버깅 #1: AI가 만든 에러 발생
12:56 2차 테스트: 16개 MBTI 카드 완성!
13:13 🐞 실시간 디버깅 #2: 카드 클릭 시 이동 오류 (새 에이전트 활용)
13:59 🐞 실시간 디버깅 #3: 중복 ID 및 Next.js 버전 문제
15:40 3차 테스트: INFP 카드 클릭 - 비전보드 편집기 이동 성공!
17:04 3️⃣ 단계: 비전보드 편집기 구현 (멀티모델 3종 동시 실행)
19:00 🥇 Composer 모델, 가장 먼저 구현 완료! (하지만 버그 발견)
20:19 🧐 AI 브라우저 테스트 및 '요소 선택' 디버깅
21:08 🐞 실시간 디버깅 #4: 멀티모델이 동시에 버그 수정 경쟁
23:06 4차 테스트: 텍스트/이미지 추가, 드래그, 리사이징 (DB 저장 X)
25:58 🐞 실시간 디버깅 #5: DB 저장 기능 누락 (치명적 버그)
31:55 4️⃣ 단계: 목표 추적기(Goal Tracker) UI 구현
32:38 5차 테스트: 목표 추가/완료 기능 (또 DB 저장 안 됨)
35:10 5️⃣ 단계: 미디어 임베드 (유튜브, 스포티파이)
35:41 🐞 실시간 디버깅 #6: 다이얼로그 UI 깨짐 문제
36:09 6차 테스트: 스포티파이, 유튜브 임베드 성공!
37:22 🏁 완성 및 결론: '바이브 워킹'이란 무엇인가
38:52 맺음말
안녕하세요! AI 연구소 바이브랩스입니다.
여러분도 혹시 '할 일 관리(To-Do)' 앱을 쓰면서 할 일을 놓치거나, 왜 일이 자꾸 밀리는지 파악하기 어려웠던 경험 없으신가요?
기존의 캘린더 중심 앱들은 '어제 못한 일'을 그냥 과거로 흘려보냅니다. 그래서 저는 '왜 이 일이 5일이나 걸렸지?'를 추적할 수 있는 'Task-Centric Planner(태스크 중심 플래너)'를 직접 만들기로 했습니다.
이 앱의 핵심은 바로 'Day(N) 추적법'**입니다. 오늘 못한 일은 내일 'Day(2)'가 되고, 그다음 날은 'Day(3)'가 되어, 내가 어떤 일에 얼마나 시간을 쏟고 있는지, 나의 '나쁜 패턴'은 무엇인지 명확하게 보여주죠.
놀라운 점은, 이 모든 아이디어를 '명세서(PRD, TRD)'로 정리해서 Cursor AI에게 전달했더니, 단 30분 만에 기획, 데이터베이스 설계, API 개발, 프론트엔드 구현, 그리고 디버깅까지 '작동하는 앱'의 프로토타입을 완성했다는 것입니다.
이것이 바로 '바이브 코딩'을 넘어선 '바이브 워킹(Vibe Working)'입니다. AI를 단순 코딩 도구가 아닌, 나의 기획과 아이디어를 현실로 만들어주는 강력한 '생산성 파트너'로 활용하는 것이죠.
이번 영상에서는 '명세 기반 개발(Spec-Driven Development)' 방식으로 AI와 협업하여 실제 서비스를 만들어내는 전 과정을 타임랩스 없이 생생하게 보여드립니다.
여러분의 생산성을 AI로 어떻게 극대화할 수 있는지, 그 놀라운 과정을 직접 확인해 보세요!
👍 영상이 도움이 되셨다면 '좋아요'와 '구독' 부탁드립니다. 여러분의 아이디어나 AI 활용 팁도 댓글로 자유롭게 남겨주세요!
[비즈니스 및 작가 제안하기]
futurewave@gmail.com
⏰ 타임라인 (주요 섹션)
00:00 인트로
00:11 😩 기존 할 일 관리 앱의 결정적 문제점
00:50 💡 새로운 개념: Day(N) 추적법
01:38 😡 기존 앱들의 3가지 핵심 문제점 (캘린더, 생애주기, 통계)
02:04 🎯 새로운 서비스: 'Task-Centric Planner' 기획
02:40 🤖 '바이브 코딩'과 '스펙 드리븐' 개발 방식 소개
03:29 🏛️ 1단계: AI에게 프로젝트 '헌법' 만들기 (with Cursor AI)
06:00 📝 2단계: AI에게 '명세서(PRD/TRD)' 전달하기
08:07 🗺️ 3단계: AI '개발 계획(plan.md)' 생성
09:05 ✅ 4단계: AI '세부 태스크(tasks.md)' 생성
10:02 ⚡ 5단계: AI '구현' 시작! (Cursor Composer 모델 성능)
13:30 🐞 6단계: 1차 테스트 및 디버깅 (Tailwind CSS 오류 잡기)
15:18 ⚙️ 7단계: 2차 기능 테스트 (핵심 기능: Day(N) 이월하기)
17:30 🔧 8단계: 3차 디버깅 (뽀모도로, 캘린더 오류 수정)
20:54 🚀 결론: AI 생산성의 핵심과 배운 점
22:05 📈 앞으로 추가하고 싶은 기능들 (PWA, 클라우드 DB)
23:13 맺음말
안녕하세요! 여러분의 일하는 방식을 새롭게 바이브하는 곳, 바이브랩스입니다.
수십, 수백 페이지에 달하는 정부 R&D 사업계획서(제안서). 어디서부터 시작해야 할지 막막했던 '백지의 공포'를 느껴본 적 없으신가요? 수많은 공고문과 논문, 특허 자료들 속에서 길을 잃는 '리서치 지옥'은요?
이제 사업계획서는 더 이상 혼자 쓰는 게 아닙니다.
이번 영상은 '바이브 코딩'을 넘어, AI로 똑똑하게 일하는 법 '바이브 워킹(Vibe Working)'의 첫 번째 시리즈입니다. 코딩 한 줄 없이, 오직 AI 어시스턴트들과 함께 복잡하고 방대한 정부 R&D 사업계획서의 초안을 완성하는 전 과정을 담았습니다.
[AI 어벤져스와 함께하는 사업계획서 작성법]
AI 리서치 매니저 (Perplexity Comet): 웹서핑 중 실시간으로 논문, 특허, 최신 뉴스를 찾아 근거를 제시합니다.
AI 데이터베이스 (Notion AI): 모든 리서치 자료를 체계적으로 정리하고, 문서의 목차를 추출하며, 초안을 작성합니다.
AI 전략가 (Gemini): 프로젝트의 논리를 세우고 전체적인 그림을 그립니다.
이 영상은 단순히 AI 글쓰기 도구를 소개하는 것을 넘어, 각기 다른 강점을 가진 AI들을 하나의 '팀'으로 구성하고, 당신은 '프로젝트 매니저'가 되어 이들을 지휘하는 새로운 생산성 패러다임을 제시합니다.
바이브랩스와 함께 '기회의 문'을 여는 첫걸음을 내디뎌 보세요.
🚀 작가 및 기관 협업 제안: AI를 활용한 문서 작업 자동화, 리서치 생산성 향상에 관심이 있거나 협업 아이디어가 있으신 분은 언제든지 아래 이메일로 연락 주세요.
제안하기: futurewave@gmail.com
#AI #사업계획서 #업무자동화 #바이브워킹 #VibeLabs
⏰ 타임라인
00:00 인트로: 사업계획서 작성, 이제는 혼자가 아닙니다.
00:48 '바이브 코딩'을 넘어 '바이브 워킹'으로!
01:11 1단계: AI 리서치 팀 꾸리기
01:17 리서치 매니저 'Perplexity Comet' 브라우저 소개
03:53 데이터베이스 'Notion' 템플릿 세팅
06:16 2단계: AI와 함께 자료 수집 및 분석
06:24 공고문 분석 (with Perplexity)
09:10 RFP(제안요청서) 분석 (with Perplexity)
10:48 관련 리서치 자료 수집 (논문, 특허, 경쟁 제품, 연구 동향)
13:31 3단계: AI로 연구개발계획서 초안 작성하기 (in Notion AI)
13:53 목차 추출 및 정리
15:52 1. 연구개발의 필요성 작성하기
18:12 2. 연구개발과제의 목표 작성하기
20:22 3. 연구개발과제의 내용, 추진체계 및 일정 작성하기
23:36 4. 연구개발성과의 활용방안 및 기대효과 작성하기
26:50 5. 사업비 산정 작성하기
29:58 4단계: 최종 검토 및 마무리
31:19 결론: AI는 요약 도구가 아닌, 논리를 조립하는 '리서치 파트너'입니다.
안녕하세요! AI와 함께 아이디어를 현실로 만드는 바이브랩스입니다.
매년 쏟아지는 수십 조 원의 정부 과제(R&D) 정보, 혹시 매일 아침 NTIS 사이트에 접속해서 키워드를 입력하고, 다시 엑셀 파일에 정리하는 '노가다'를 반복하고 계시진 않나요?
만약 AI가 이 모든 과정을 대신해주는 '자동 비서' 앱을 만들어준다면 어떨까요?
하지만 AI에게 "알아서 잘 만들어줘!"라고 말하는 '바이브 코딩' 방식은, AI가 우리의 의도를 100% 이해하지 못해 엉뚱한 결과물을 내놓을 때가 많습니다.
그래서 이 영상에서는 '바이브 코딩'을 넘어, AI를 마치 숙련된 개발자처럼 일하게 만드는 강력한 설계 언어, 'Spec-kit (Spec-Driven Development)'을 활용하는 과정을 담았습니다.
[이 영상에서 확인하실 수 있습니다]
✅ 1. 기획 (Spec-kit): AI가 100% 이해하는 '개발 헌장'과 '기능 명세서'는 어떻게 작성할까요?
✅ 2. 명료화 (Clarify): AI가 우리의 불명확한 기획을 역으로 질문하고 함께 다듬어가는 놀라운 과정
✅ 3. 계획 및 태스크 분해: AI가 스스로 개발 계획(Tech Stack, DB 설계)을 세우고, 전체 작업을 157개의 태스크로 분해합니다.
✅ 4. 구현 (Implement): Flutter 프로젝트 생성부터 실제 코드를 단계별로 완성해 나가는 AI
✅ 5. 검증 및 디버깅: 앱 실행, 에러 발생, AI에게 에러 로그 전달, 실시간 코드 수정까지... AI와 함께 문제를 해결하는 실전 디버깅 A to Z
이 영상은 단순히 앱 하나를 완성하는 것을 넘어, AI 시대에 '현장 감독'으로서 우리가 AI와 어떻게 소통하고 협업해야 하는지에 대한 깊이 있는 통찰을 제공합니다.
🚀 작가 및 기관 협업 제안:
AI를 활용해 반복적인 리서치 업무를 자동화하고 싶으신 분, 혹은 협업 아이디어가 있으신 분은 언제든지 아래 이메일로 연락 주세요.
제안하기: futurewave@gmail.com
⏰ 타임라인 (Timeline)
00:00 인트로: 정부 과제 리서치는 왜 '노가다'일까?
00:38 문제 해결: Flutter와 AI로 'NTIS 자동 비서' 앱 만들기
00:40 API의 함정과 해답 (robots.txt)
01:28 [핵심] Spec-Driven Development (Spec-kit)란 무엇인가?
01:50 [Spec-kit 1단계] 헌장 작성 (Constitution)
02:22 AI에게 프로젝트의 핵심 원칙과 규칙(헌장) 프롬프트 전달
03:08 AI가 생성한 6가지 핵심 원칙 및 특별 강조 사항(robots.txt) 검토
03:25 [Spec-kit 2단계] 기능 명세서 작성 (Specify)
03:33 'NTIS 자동 비서' 앱의 핵심 기능(유저 스토리) 프롬프트 전달
03:50 AI가 생성한 기능 명세서(spec.md) 검토
04:26 [Spec-kit 3단계] 명료화 작업 (Clarify)
04:45 AI가 기획의 불명확한 부분에 대해 5가지 질문 (데이터 보관 기간, 키워드 매칭 방식 등)
05:48 사용자의 답변(B, B, A, A, B)을 통해 명세서가 자동 업데이트되는 과정
05:49 [Spec-kit 4단계] 개발 계획 수립 (Plan)
05:57 AI에게 기술 스택(Tech Stack)과 아키텍처(Architecture) 프롬프트 전달
06:04 AI가 생성한 개발 계획서(plan.md) 검토 (데이터 모델, API 명세 등)
06:10 [Spec-kit 5단계] 작업 태스크 분해 (Tasks)
06:19 AI가 스스로 전체 개발 작업을 8개 페이즈, 157개 태스크로 자동 분해
07:25 [Spec-kit 6단계] 코드 구현 (Implement) - Phase 1
07:55 Flutter 프로젝트 생성 및 기본 파일 구조화 자동 실행
08:30 AI가 Phase 1의 모든 태스크(체크리스트)를 완료했는지 확인
09:05 [Spec-kit 6단계] 코드 구현 (Implement) - Phase 2~3
09:17 NTIS Scraper 서비스 및 데이터 저장(Repository) 기능 구현
09:34 [디버깅 1] Flutter 앱 빌드 에러 발생
09:51 에러 메시지를 복사하여 AI에게 수정 요청
10:38 AI의 자동 코드 수정 및 문제 해결 확인
10:41 [디버깅 2] 앱 실행 및 테스트 (검색 기능 에러)
11:30 앱 실행 및 '생활안전' 키워드 검색 시도 (결과 없음)
11:44 AI에게 상황 설명 및 문제 해결 요청
12:14 AI가 OpenAI API 키가 .env 파일에 설정되지 않았음을 지적
12:29 AI의 수정안 적용 후 재테스트 (여전히 검색 결과 없음)
12:42 [디버깅 3] 근본 원인 파악 및 해결 (NTIS 웹사이트 분석)
13:47 실제 NTIS 사이트와 앱의 검색 결과가 다름을 인지
15:37 (원인 발견) NTIS 사이트의 실제 검색 방식과 AI가 구현한 방식이 다름
16:03 AI에게 상황 설명(진행중 공고 미포함 등) 및 UI 개선 요청
16:23 AI의 수정안 적용 및 재테스트
16:51 (해결) 드디어 '생활안전' 검색 결과(2건) 정상 출력 확인
16:56 [디버깅 4] 마감된 공고 필터링 문제
17:02 AI가 의도와 다르게 UI를 구현한 것을 발견 (AI의 실수)
17:16 AI 시대, '코딩'보다 '검증(Verify)'이 더 중요해지는 이유
18:00 Spec-kit을 통한 AI 협업의 장점: 인간의 노하우 + AI의 구현력
18:18 아웃트로: AI 현장 감독의 중요성
안녕하세요! AI와 함께 즐겁게 코딩하는 바이브랩스입니다.
"AI, 멋진 홈페이지 하나 만들어줘!" ...마치 세계 최고의 천재 셰프에게 "저 배고파요. 그냥 알아서 맛있는 거 주세요!"라고 말하는 것과 같습니다.
여러분은 따뜻한 '파스타'를 원했지만, 셰프는 자신 있는 요리인 '민트초코 소스를 곁들인 달팽이 요리'를 내올지도 모릅니다.
AI가 만든 결과물이 분명 멋지긴 한데, 내가 원한 건 그게 아닐 때가 많습니다. 왜일까요? AI는 우리의 기분이나 '느낌'을 추측해서 요리하는 존재가 아니라, 우리가 전달한 '레시피(Specification)'를 정확하게 따르는 완벽한 조수이기 때문입니다.
이 영상은 추상적인 '바이브 코딩'의 한계를 넘어서, AI가 100% 정확하게 우리가 원하는 것을 만들도록 이끄는 강력한 '설계 언어', Spec-kit에 대해 다룹니다.
[이 영상에서 확인할 수 있는 것]
✅ '바이브 코딩' vs 'Spec-kit': 왜 AI에게 '느낌'이 아닌 '레시피'를 줘야 하는가?
✅ Spec-kit의 7가지 핵심 구성 요소 (헌장, 명세, 명료화, 계획, 태스크, 구현, 검증)
✅ Cursor AI와 Claude를 연동하여 Spec-kit 설치 및 프로젝트 초기화하기
✅ /specit.constitution (헌장): 프로젝트의 개발 철학과 규칙 정하기
✅ /specit.specify (명세): '뽀모도로 타이머'의 핵심 기능 명세서 작성하기
✅ /specit.clarify (명료화): AI가 불명확한 요구사항을 역으로 질문하고 함께 다듬는 과정
✅ /specit.plan (계획): 기술 스택(Next.js, SQLite, Drizzle) 및 아키텍처 설계하기 ✅ /specit.tasks (태스크): AI가 실행할 작업 단위(MVP)를 87개로 자동 분해하기
'Spec-kit'은 AI에게 일감을 주는 '설계 언어'입니다. 이 영상을 통해 여러분도 AI라는 훌륭한 부사수와 함께 더 빠르고, 더 일관되며, 더 믿을 만한 코드를 만들어보시길 바랍니다.
🚀 작가 및 창작자 협업 제안:
AI를 활용해 자신만의 아이디어를 체계적으로 구현하고 싶은 분, 혹은 협업 아이디어가 있으신 분은 언제든지 아래 이메일로 연락 주세요.
제안하기: futurewave@gmail.com
⏰ 타임라인
00:00 인트로: AI에게 "알아서 잘" 만들어 달라고 하면 생기는 문제
00:49 AI 셰프에게 정확한 레시피가 필요한 이유
01:00 '바이브 코딩' vs 'Spec-kit' 비교
01:28 Spec-kit이란 무엇인가? (사람: 스케치, AI: 건설, Spec-kit: 설계도)
01:54 Spec-kit의 7가지 핵심 단계 (Constitution, Spec, Clarify, Plan, Task, Implement, Verify)
03:00 왜 Spec-kit을 써야 할까요? (뒤죽박죽 코드 방지, 협업 혼선 방지 등)
03:57 [실전] Spec-kit 설치하기 (Mac 기준)
04:11 1단계: 'pomodoro' 프로젝트 폴더 생성 (in Cursor)
04:19 2단계: 'uv' 설치 ( brew install uv )
04:46 3단계: 'specify-cli' 설치 ( uv tool install specify-cli --from git+https://github.com/thub/spec-kit.git )
05:04 (설치 오류 시) PATH 설정하기 ( specify update-shell )
05:19 4단계: Spec-kit 및 Claude 연동 초기화 ( specify init . --ai claude )
06:17 [실전] 뽀모도로 앱 개발 시작
06:24 Git 초기 설정 ( git init, git add ., git commit )
07:05 1. 헌장 작성 ( /speckit.constitution )
07:52 AI에게 프로젝트 개요 및 핵심 규칙(헌장) 프롬프트 전달
09:13 AI가 생성한 'constitution.md' (개발 헌장) 검토 (Next.js, TypeScript, SQLite, Drizzle 등)
09:59 헌장 파일 Git 커밋하기
10:20 2. 기능 명세서 작성 ( /speckit.specify )
10:37 뽀모도로 핵심 기능 5가지 프롬프트로 전달 (한국어)
12:23 AI가 생성한 'spec.md' (기능 명세서) 검토 (33개 요구사항 자동 생성)
12:53 3. 명료화 작업 ( /speckit.clarify )
13:14 (사전 준비) AI에게 애매한 메뉴를 주문하는 상황 비유
13:53 AI가 명세서의 불명확한 부분에 대해 5가지 질문
14:13 질문 1: 백그라운드 알림 처리 (B 선택: 브라우저 알림)
14:58 질문 2: 타이머 정지 시 브라우저 닫기 처리 (B 선택: 옵션 B)
15:16 질문 3: 타이머 설정 변경 (A 선택: 현재 타이머 계속)
15:21 질문 4: 동시 탭 중복 실행 (B 선택: 옵션 B)
15:32 질문 5: 작업 목록 항목 완료 처리 (A 선택: 옵션 A)
15:52 모든 질문 완료 후 'spec.md' 파일 자동 업데이트 확인 (14개 요구사항 추가됨)
16:08 4. 개발 계획 수립 ( /speckit.plan )
16:17 AI가 명세서 기반으로 작업 계획(plan.md) 자동 생성
16:34 'plan.md' 검토 (기술 스택, 아키텍처, DB 스키마, API 명세 등)
17:11 5. 작업 태스크 분해 ( /speckit.tasks )
17:17 (비유) 셰프가 요리 순서를 정하는 단계
18:12 AI가 작업 계획(plan.md)을 기반으로 'tasks.md' 자동 생성
18:17 'tasks.md' 검토 (총 87개 페이지, 38개 작업으로 분해된 MVP)
18:59 6. 코드 구현 ( /speckit.implement )
19:14 (비유) 셰프가 소스를 만들기 전 중간 점검을 받는 단계
19:27 AI가 'tasks.md'를 기반으로 실제 코드 구현 시작
19:40 영상 마무리 및 요약
안녕하세요! 여러분의 아이디어를 '진짜' 살아있는 서비스로 함께 만들어가는 바이브랩스입니다.
AI에게 "나만의 포트폴리오 웹사이트 만들어줘"라고 요청하면, 불과 몇 초 만에 그럴싸한 '모델하우스'가 눈앞에 펼쳐집니다. 하지만 이내 깨닫게 되죠. 그곳은 아무도 살지 않는, 가구가 하나도 없는 텅 빈 공간이라는 것을요. 이건 '내 이야기'가 담긴 집이 아닙니다.
우리가 진짜 원했던 것은 '모델하우스'가 아니라, 언제든 신선한 재료(데이터)를 꺼내 요리(보여주기)할 수 있는 '살아있는 식료품 저장고'가 있는 집이었습니다.
이 영상은 AI가 만들어준 텅 빈 껍데기(HTML)에 '데이터베이스(DB)'라는 심장을 이식하는 과정을 담았습니다.
✅ AI 코딩으로 만든 웹사이트가 왜 '공허하게' 느껴지는지
✅ '살아있는 식료품 저장고', 즉 데이터베이스(DB)의 진짜 의미
✅ 거대한 MySQL 대신 가벼운 '작은 화분' 같은 SQLite를 선택한 이유
✅ AI에게 Node.js와 SQLite로 '저장고'와 '저장고 관리 도구'를 만들어달라고 요청하는 방법
✅ 코딩 없이 '관리자 페이지'를 만들고, 데이터를 실시간으로 추가/수정/삭제하는 마법
✅ DB Browser로 AI가 만든 데이터베이스의 속을 직접 들여다보는 법
이제는 AI와 함께 내 서비스의 '엔진'과 '두뇌'를 설계해 보세요.
바이브랩스가 그 여정을 함께합니다.
🚀 작가 및 창작자 협업 제안:
자신만의 '살아있는' 포트폴리오나 서비스를 구축하고 싶으신 분,
혹은 협업 아이디어가 있으신 분은 언제든지 아래 이메일로 연락 주세요.
제안하기: futurewave@gmail.com
⏰ 타임라인
`00:00` 인트로: AI가 만든 '텅 빈 모델하우스'
`00:46` 첫 번째 함정: 알맹이 없는 그럴듯함
`00:54` AI로 포트폴리오 웹사이트 만들기 (일반적인 요청)
`02:05` 진짜 문제의 시작: '내 이야기'가 아닌 껍데기
`03:39` 우리가 진짜 원했던 것: '살아있는 식료품 저장고'
`03:52` 데이터베이스(DB)란 무엇인가? (feat. SQLite)
`04:06` [실전 1단계] AI에게 '저장고(DB)'와 '관리 도구' 요청하기
`04:15` 프롬프트 설정: Node.js, Express, SQLite로 백엔드 구축
`04:44` AI가 자동으로 생성한 6단계 개발 계획 (To-dos)
`05:02` [실전 2단계] AI와 함께 백엔드 서버 및 DB 구축하기
`05:24` Node.js 서버 실행 및 포트폴리오 페이지 접속
`05:37` AI가 만든 프로젝트 구조 설명 (HTML vs Node.js 서버)
`06:02` [실전 3단계] AI가 만든 '관리자 페이지' 접속 및 테스트
`07:00` '/admin' 페이지 접속 및 새 프로젝트 추가 시연
`07:27` 홈 화면에서 새로 추가된 프로젝트 실시간 확인
`07:50` AI 코딩 결과물에 대한 고찰 (껍데기 vs 살아있는 서비스)
`08:01` SQLite와 Node.js의 역할 (요리사와 저장고)
`09:24` 새로운 요구사항: "프로젝트 카드를 클릭하면 상세 내용 보여줘"
`10:30` 정적 HTML에서 '살아 움직이는 생명'으로의 변신
`10:47` [실전 4단계] DB Browser로 '저장고' 내부 확인하기
`10:58` 'DB Browser for SQLite' 설치 가이드
`11:58` DB 파일 열기 및 테이블 구조('Projects') 확인
`12:37` 'Browse Data' 탭에서 실제 데이터 확인 (엑셀과 비교)
`12:58` DB Browser에서 직접 데이터 수정 및 저장하기 (Apply)
`13:58` [실전 5단계] DB 수정사항이 웹에 실시간 반영되는지 확인
`14:11` AI가 어떻게 이 모든 것을 구현했을까? (Node.js와 SQLite의 연동)
`14:40` 결론: 데이터가 있을 곳에 정확히 존재하는 것
`15:00` 아웃트로
안녕하세요! 여러분의 아이디어를 '진짜' 서비스로 함께 만들어가는 바이브랩스입니다.
"AI, 심플한 투두리스트(Todo-list) 앱 하나 만들어줘."
AI는 분명 놀라운 속도로 그럴싸한 웹페이지를 우리 눈앞에 펼쳐놓습니다. 우리는 감탄하죠. "이제 정말 아이디어만 있으면 서비스 하나쯤은 뚝딱 만들겠구나!"
하지만 거기까지입니다. 로그인 기능을 붙이려 하니 다른 기능이 망가지고, 데이터를 처리하려 하니 어디에 있는지 찾지도 못하고, 사소한 버튼 하나를 고치려 해도 AI는 우리 말을 이해하지 못합니다. MVP(최소 기능 제품)조차 완성하지 못하고 서비스 개발은 한 걸음도 나아가지 못합니다.
도대체 왜일까요?
'바이브 코딩'은 인간의 생각을 AI가 대신해주는 것이 아닙니다. AI는 그저 초고속 조수일 뿐, '현장 감독'은 대상은 여전히 '인간'이여야 합니다. 그리고 현장 감독은 최소한의 '설계도'를 볼 줄 알아야 합니다.
이 영상은 기획자, 디자이너, 그리고 AI 코딩으로 나만의 서비스를 만들고 싶은 모든 분을 위한 'AI 현장 감독의 첫 번째 설계도'입니다.
✅ 블록 1: 화면은 무엇으로 되어 있는가? (HTML, CSS, JavaScript, DOM)
✅ 블록 2: 데이터는 어디로 가는가? (프론트엔드 vs 백엔드, API, DB)
✅ 블록 3: AI 시대, 개발자 도구(콘솔)를 왜 알아야 하는가?
✅ 블록 4: AI가 스스로 판단 못하는 것들 (자료구조, 알고리즘, 보안)
AI라는 놀라운 일꾼이 엉뚱한 삽질을 하지 않도록, 우리가 먼저 '무엇을 모르는지 아는 것'부터 시작해 봅니다. 이 영상이 그 첫걸음이 될 것입니다.
🚀 작가 및 창작자 협업 제안: AI를 활용해 아이디어를 '진짜' 서비스로 발전시키고 싶은 분, 혹은 협업 아이디어가 있으신 분은 언제든지 아래 이메일로 연락 주세요.
제안하기: futurewave@gmail.com
#AI코딩 #CS기초 #1인개발 #바이브랩스
⏰ 타임라인 (Timeline)
00:00 인트로: AI로 MVP를 만들 때 겪는 좌절
00:58 왜 서비스가 멈출까? (AI는 현장 감독이 필요하다)
01:23 블록 1: 화면은 무엇으로 되어 있는가? (HTML, DOM, CSS, JavaScript)
01:53 뼈대: HTML (AI에게 뼈대를 조립해달라고 말하는 법)
02:13 가상 설계도: 브라우저와 DOM (잘못된 설계도의 비극)
05:11 피부와 경험: CSS (AI가 이해하는 디자인의 언어)
06:18 CSS 심화: 부트스트랩 vs 테일윈드 (AI는 왜 이 도구를 쓸까?)
07:28 근육과 신경: JavaScript (AI가 움직임을 만드는 법)
08:00 블록 2: 데이터는 어디로 가는가? (프론트엔드, 백엔드, API)
08:18 프론트엔드: 손님 눈에 보이는 '매장'
08:45 JavaScript의 두 가지 차원 (브라우저 vs 서버 통신)
10:00 프론트엔드 vs 백엔드 (매장 vs 주방)
10:46 API: 매장과 주방의 '웨이터' (JSON이라는 공용어)
12:00 MVP가 실패하는 이유 (API와 DB를 연결하지 않아서)
12:46 데이터베이스 유형: RDBMS vs NoSQL (엑셀 vs 유연한 창고)
14:30 로컬 스토리지: 브라우저 안의 '작은 원룸' (vs 쿠키)
16:12 블록 3: 개발자 도구로 기계의 목소리 듣기 (콘솔, 에러)
16:41 콘솔: 빨간색의 경고 (AI와 기계의 대화법)
18:17 console.log: AI에게 무전기(콘솔)로 지시하는 법
19:56 좋은 프롬프트 vs 나쁜 프롬프트 (에러 질문법)
22:15 블록 4: 현장 감독의 설계 (AI가 판단 못하는 것)
22:31 자료구조: 창고 안의 선반 (Array vs Hash)
23:44 알고리즘: 효율적인 절차 (레시피 개선)
24:14 프레임워크: 조립식 건축 공장 (Next.js, React 등)
25:06 JSON: AI와의 공용어 (Key-Value)
26:52 결론: 현장 감독의 설계도를 배워야 하는 이유
28:05 아웃트로: 다음 여정 예고
안녕하세요! 여러분의 아이디어를 현실로 코딩하는 바이브랩스입니다.
우리는 매일 인터넷이라는 거대한 정보의 숲을 거닐고 있습니다. 그 숲속에는 우리가 원하는 수많은 보석(데이터)이 숨겨져 있죠. 오늘은 그 보석을 찾아내는 기술, '웹 스크래핑'에 대해 이야기하려 합니다.
하지만 이 여정은 단순히 데이터를 긁어모으는 '채집가'가 아니라, 원석을 정교하게 찾아내고 그 가치를 발견하는 '데이터 세공사'의 여정입니다.
이 영상을 시작하기 전, 매우 중요한 약속이 있습니다. 우리가 다룰 기술은 강력한 만큼, 잘못 사용하면 웹사이트에 피해를 주는 불법적인 침입자가 될 수 있습니다. 모든 웹사이트에는 'robots.txt'라는 규칙이 존재하며, 우리는 이 규칙을 반드시 존중해야 합니다.
오늘 배우는 모든 기술은 오직 개인적인 학습과 연구의 목적으로만 사용해야 하며, 절대 상업적 이용이나 서버에 부담을 주는 과도한 요청에 사용해서는 안 됩니다. 이 약속을 마음속에 새긴 현명한 세공사만이 이 여정을 함께할 자격이 있습니다.
[오늘의 핵심 도구 3가지]
Selenium: 우리의 손과 발이 되어줄 자동화 도구
Pandas: 찾아낸 보석의 가치를 기록할 세공 일지
Undetected Chromedriver: '봇'이 아님을 증명하는 보이지 않는 열쇠
'쿠팡' 웹사이트에서 '아이폰 17 프로'의 가격을 실시간으로 감시하고, 이 과정을 'Streamlit'이라는 멋진 웹 앱으로 만들어내는 모든 과정을 코딩 한 줄 없이 AI와 함께 진행합니다.
AI와 함께라면 여러분도 훌륭한 '데이터 세공사'가 될 수 있습니다.
🚀 작가 및 협업 제안:
AI를 활용한 데이터 수집 및 자동화에 관심이 있거나 협업 아이디어가 있으신 분은 언제든지 아래 이메일로 연락 주세요.
제안하기:
🔔 AI 코딩 연구소, 바이브랩스
futurewave@gmail.com
#AI #웹스크래핑 #자동화 #VibeLabs
---
00:00 인트로: 정보의 숲과 데이터 세공사의 여정
00:35 [매우 중요] 웹 스크래핑의 윤리적 약속 (robots.txt)
01:24 오늘의 핵심 도구 3가지 (Selenium, Pandas, Undetected Chromedriver)
02:02 왜 'Undetected Chromedriver'가 필수일까? (봇 방지 시스템의 이해)
03:17 1단계: AI에게 스크래핑 코드 요청하기 (Cursor AI)
03:22 목표 설정: 쿠팡 '아이폰 17 프로' 가격 정보 가져오기
04:03 AI에게 1차 코드 생성 요청 (Undetected Chromedriver 활용)
05:50 2단계: 핵심 정보(CSS 선택자) 직접 찾기
06:14 개발자 도구로 상품명/가격 CSS 선택자 분석
08:04 AI에게 찾은 CSS 선택자를 전달하며 코드 수정 요청
09:37 3단계: 수집한 데이터 저장하기 (Pandas & CSV)
10:21 AI에게 상품명, 가격, 현재 시간을 CSV 파일로 저장하도록 요청
11:23 AI와 함께 코드 첫 실행 및 디버깅
12:12 4단계: 나만의 웹 애플리케이션 만들기 (Streamlit)
12:58 AI에게 Streamlit UI(URL/목표가 입력, 모니터링 버튼, 가격 기록) 요청
14:25 AI와 함께 Streamlit 앱 실행 및 실시간 디버깅
15:36 AI에게 UI 개선 요청 (폰트 가독성, 디자인 수정)
16:01 5단계: 백그라운드 실시간 모니터링 기능 구현
16:21 AI에게 모니터링 기능(URL, 목표가, 주기)을 백그라운드에서 실행하도록 요청
18:05 AI와 함께 모니터링 기능 디버깅 (Warning 메시지 해결)
20:54 최종 디버깅: AI가 제시한 코드로 결정적인 오류 수정
24:14 최종 테스트 및 결과 확인
24:20 모니터링 시작 및 쿠팡 브라우저 자동 실행
25:10 상품 정보 및 가격 실시간 스크래핑 성공
25:17 가격 기록(price_log.csv) 자동 업데이트 확인
28:05 결론: 당신도 '데이터 세공사'가 될 수 있습니다
28:30 윤리적 맹세 재강조 및 아웃트로
바이브랩스는 AI를 활용해 여러분의 아이디어를 가장 빠르고 효율적으로 세상에 내놓는 방법을 연구하고 공유합니다.
구독과 좋아요, 알림 설정은 더 좋은 콘텐츠를 만드는 데 큰 힘이 됩니다.
궁금한 점은 언제든지 댓글로 남겨주세요.
안녕하세요! 여러분의 창작 여정에 영감을 불어넣는 바이브랩스입니다.
우리는 매일 스레드, 인스타그램, X와 같은 거인들의 어깨 위에서 세상을 봅니다. 하지만 그 거대함에 압도되어 '이걸 어떻게 사람이 만들었을까?' 하는 막막함을 느껴본 적 없으신가요?
오늘은 그 거인의 어깨에 슬쩍 올라타는 여정을 시작해 보려 합니다.
이 영상은 단순히 '쓰레드' 앱을 따라 만드는 클론 코딩이 아닙니다. 완성된 자동차를 운전하는 승객에서 엔진의 심장박동을 느끼는 창조자로 거듭나기 위한 여정입니다. 나의 '좋아요' 하나가 어떤 경로를 거쳐 상대방에게 전달되는지, 그 보이지 않는 데이터의 흐름과 관계의 물리학을 온몸으로 체험하는 경험. 그것이 바로 이 여정의 진짜 목적입니다.
AI와 함께라면 코딩을 전혀 몰라도 괜찮습니다.
✅ AI 전략가와 함께 복잡한 서비스 아키텍처를 분석하고
✅ AI 아키텍트(Claude)를 통해 7가지 핵심 설계 문서를 자동으로 생성하며
✅ AI 개발자(Cursor)와 대화하며 단계별로 코드를 완성하고
✅ AI 테스터(Browser)로 실시간 테스트와 디버깅을 거쳐
마침내 하나의 완전한 서비스를 탄생시키는 전 과정을 낱낱이 보여드립니다.
이 영상은 코드를 한 줄 입력하는 것이 아니라, 코드를 입력하지 않아도 작은 아이디어를 통해 실제 세상에 존재하는 새로운 세상을 열어젖히는 멋진 창작의 기록입니다. 바이브랩스와 함께 여러분만의 위대한 첫걸음을 내디뎌 보세요.
🚀 작가 및 창작자 협업 제안:
창작 과정의 효율성을 높이는 방법에 대한 아이디어나 협업 제안이 있으신 분은 언제든지
아래 이메일로 연락 주세요.
제안하기: futurewave@gmail.com
#클론코딩 #AI코딩 #1인개발 #바이브랩스
안녕하세요! 여러분의 창작 여정에 든든한 동반자가 되어드리는 바이브랩스입니다.
커피와 함께 쏟아부은 수많은 아이디어, 미묘한 색상값 하나를 바꾸며 고민했던 디자인의 흔적, 밤새워 완성한 원고 한 문단이... '클릭' 한 번의 실수로 먼지처럼 흩어져 버린 경험. 혹시 있으신가요?
단순히 파일 하나를 잃은 것이 아닙니다. 어제의 치열했던 고민의 시간, 내가 공들여 투자했던 소중한 시간 전부를 잃어버린 것과 같습니다. 이 막막함, 우리 모두 한 번쯤은 겪어보지 않았나요?
만약 이 모든 과정을 안전하게 지켜주는 '코드의 성전'이 있다면 어떨까요?
이 영상에서는 단순히 사라진 코드를 복구하는 기술을 넘어, 여러분의 소중한 창작물을 영원히 보관하는 '깃허브'라는 이름의 성전을 짓는 모든 과정을 보여드립니다.
✅ 깃(Git)과 깃허브 CLI 설치부터
✅ 깃허브 가입 및 리포지토리(성전) 생성
✅ AI로 만든 포트폴리오 웹사이트 코드를 10분 만에 업로드하고 관리하기
✅ '브랜치' 기능을 활용해 원본은 안전하게 지키면서 새로운 아이디어를 마음껏 실험하는 방법까지!
깃허브는 단순히 시간을 보관하는 기술이 아닙니다. 작업 과정의 중요한 순간마다 '커밋'이라는 기록을 남겨, 그 기록이 영원한 박제가 되게 하는 마법입니다. 더 놀라운 건, 안전하게 실험할 수 있는 '평행우주(브랜치)'를 무한정 만들어낼 수 있다는 겁니다.
오늘 영상을 통해 여러분의 창작의 바다를 항해하는 여러분만의 시간 여행자가 되어보시길 바랍니다.
🚀 작가 및 창작자 협업 제안: 창작 과정의 효율성을 높이는 방법에 대한 아이디어나 협업 제안이 있으신 분은 언제든지 아래 이메일로 연락 주세요.
제안하기: futurewave@gmail.com
#깃허브 #버전관리 #AI코딩 #바이브랩스
---
⏰ 타임라인 (Timeline)
00:00 인트로: 한순간의 실수로 모든 것을 잃어버린 경험
01:01 해결책: 코드의 성전 '깃허브' 소개
01:45 1단계: 성전을 짓기 위한 2가지 준비물 (깃허브 계정, 깃)
02:00 2단계: 내 컴퓨터에 깃(Git) 설치하기
03:10 3단계: 깃허브 사이트 가입하기
03:44 4단계: 첫 번째 성전(리포지토리) 만들기
04:25 5단계: 내 컴퓨터와 깃허브 성전 연결하기
04:36 깃허브 CLI(명령어 도구) 설치 및 로그인
05:39 터미널 명령어로 로컬 프로젝트와 원격 리포지토리 연결
08:28 6단계: AI로 만든 포트폴리오 웹사이트 깃허브에 올리기
09:06 7단계: AI(커서에디터)로 소스코드 관리 및 커밋/푸시하기
11:26 8단계: '브랜치' - 안전한 평행우주에서 마음껏 실험하기
14:43 9단계: 브랜치 병합(Merge) 및 되돌리기(Checkout) 실습
18:19 마무리: 깃허브는 왜 모든 창작자에게 필요한가?
19:43 아웃트로: 기술은 우리를 위협하는 것이 아니라 든든한 날개가 되어줄 수 있습니다
안녕하세요 코딩 몰라도 만드는 나만의 포트폴리오, 바이브랩스입니다.
오랜 개발자로 살아왔지만, 솔직히 고백하자면... 지금은 코드를 직접 타이핑하는 시간보다 AI에게 "이거 만들어줘" 하고 '대화'하는 시간이 훨씬 더 많습니다.
이것이 바로 '바이브 코딩'을 넘어, AI를 나의 강력한 '생산성 파트트너'로 활용하는 '바이브 워킹(Vibe Working)'의 실제 사례입니다.
'바이브 워킹'은 기획, 설계, 디자인, 개발, 배포라는 전통적인 개발 생명주기(SDLC)를 AI와 '대화'하며 나만의 서비스를 만드는 과정입니다.
오늘 영상은 '코딩 몰라도 나만의 포트폴리오 만들기' 시리즈의 첫 번째 시간으로, 이 '바이브 워킹'을 위한 가장 강력한 도구인 커서 AI 2.0 설치와 핵심 개념을 A to Z로 설명해 드립니다.
코딩을 전혀 몰라도 괜찮습니다. '바이브 코더'에게 필요한 내용만 쏙쏙 뽑아 정리했습니다.
Cursor AI 설치 및 초기 설정 (한국어 설정까지!)
AI '토큰'이 뭔가요? (AI에게 주는 일당/월급 개념)
AI '모델' 비교 (가성비 셰프 'Composer' vs 5성급 셰프 'Claude Opus')
가격 플랜 완벽 비교 (초보자는 뭘 선택해야 할까?)
커서 2.0의 혁신: Agents 모드 vs Editor 모드
딱 1분! AI와 대화로 '투두 리스트' 앱 뚝딱 만들기
커서(VS Code) 확장 프로그램 설치 (Live Server)
AI와 함께 내 아이디어를 가장 빠르고 효율적으로 현실로 만드는 법, 그 첫걸음을 함께 시작해 보시죠!
👍 영상이 도움이 되셨다면 '좋아요'와 '구독', '알림 설정'은 큰 힘이 됩니다.
여러분의 아이디어나 AI 활용 팁도 댓글로 자유롭게 남겨주세요!
[비즈니스 및 작가 제안하기]
futurewave@gmail.com
⏰ 타임라인 (주요 섹션)
00:00 인트로: 코딩 몰라도 만드는 포트폴리오
00:12 AI와 '말'로 일하는 개발자 (바이브 워킹)
00:26 전통적인 개발 5단계 (SDLC)
00:43 AI 시대의 새로운 개발 5단계 (1분 기획, 3초 디자인?)
01:33 '코딩 몰라도 포트폴리오 만들기' 시리즈 소개
01:52 '바이브 코더'란 무엇인가? (AI 코드 에디터)
02:22 1. Cursor AI 설치하기 (cursor.sh)
02:47 2. Cursor AI 회원가입 및 로그인
03:23 3. Cursor AI 초기 설정 (언어: Korean 설정)
03:48 4. 레이아웃 및 테마 설정 (IDE Layout / Light)
04:07 5. Cursor 핵심 기능 소개 (Tab, Agent, Plan, Multi-Agent)
04:44 (중요) 초보자가 AI 툴 설치 후 포기하는 이유
04:50 6. '바이브 코더'가 알아야 할 2가지: 모델과 가격
05:01 - 개념 1: 토큰(Token)이란? (AI에게 주는 일당)
05:28 - 개념 2: AI 모델(Model)이란? (feat. AI 셰프 비유)
05:45 - (비교) Composer vs Claude Opus 모델
06:16 - (비교) 가격 플랜(Pricing) 완벽 정리 (무료? Pro?)
07:26 7. 새 프로젝트 시작하기 (폴더 열기)
07:46 8. Cursor 2.0 핵심: Agents 모드 vs Editor 모드
09:19 9. 3가지 에이전트 모드 (Agent / Plan / Ask)
10:19 10. 실전! AI와 1분 만에 '투두 리스트' 앱 만들기
11:18 11. Editor 모드에서 AI가 만든 코드 확인하기
11:34 12. 결과 확인 (HTML 파일 실행)
12:27 13. Cursor 기능 확장 (VS Code 확장 프로그램 설치)
13:13 - '한국어 랭귀지 팩' 설치
13:48 - 'Live Server' 설치 및 실행
14:47 요약 및 다음 영상 예고
안녕하세요! 코딩 몰라도 만드는 나만의 포트폴리오, 바이브랩스입니다.
솔직히... 기획서는 집어치우고, 코딩부터 바로 시작하고 싶으시죠?
하지만 지도나 나침반도 없이 항해를 떠나면 어떻게 될까요? AI라는 강력한 엔진이 있어도, '계획'이 없으면 우리는 혼돈 속에서 길을 잃고 맙니다. 코딩도 마찬가지입니다.
AI는 순식간에 파일 10개를 만들지만, 정작 '나'는 AI에게 방금 무슨 지시를 했는지조차 잊어버리게 되죠.
이것이 바로 '바이브 코딩'을 초월한, AI 시대의 새로운 생산성 개념인 '바이브 워킹'이 필요한 이유입니다. '바이브 워킹'은 AI를 단순 코딩 도구가 아닌, 나의 기획과 아이디어를 구현하는 강력한 '생산성 파트너'로 활용하는 업무 방식입니다.
인간 (나): 프로젝트의 '지도'와 '나침반' (기획, 설계)을 그립니다.
AI (커서): 그 지도를 보고 '엔진'이 되어 코드를 생성합니다.
오늘 영상은 '코딩 몰라도 나만의 포트폴리오 만들기' 시리즈의 두 번째 시간으로, 코딩에 들어가기 전 가장 중요한 '나침반'이 될 '프로젝트 할 일 관리판'을 노션 AI를 이용해 단 30초 만에 만들어 봅니다.
'코딩은 AI가 하지만, 프로젝트를 이끄는 건 바로 나입니다.'
AI와 함께 내 아이디어를 가장 빠르고 효율적으로 현실로 만드는 법, 그 첫걸음을 함께 시작해 보시죠!
👍 영상이 도움이 되셨다면 '좋아요'와 '구독', '알림 설정'은 큰 힘이 됩니다. 여러분의 아이디어나 AI 활용 팁도 댓글로 자유롭게 남겨주세요!
[비즈니스 및 작가 제안하기]
futurewave@gmail.com
⏰ 타임라인 (주요 섹션)
00:00 인트로: 코딩 몰라도 만드는 포트폴리오
00:13 🚀 기획 없이 코딩부터?
00:17 🗺️ 지도와 나침반이 없는 항해 (비유)
00:34 🎯 오늘의 목표: 프로젝트의 '나침반' 만들기 (할 일 관리판)
00:50 😥 AI 코딩의 함정: AI는 너무 빠르다!
01:16 🤯 AI 대화 기록과 파일이 쌓이면 생기는 문제점
01:30 💡 AI 시대의 업무 방식: 인간(노션) vs AI(커서)
02:00 (비교) 노션 AI vs 챗GPT/클로드 (비용과 용도)
02:44 🤖 코딩은 AI가, 프로젝트는 내가! (바이브 워킹)
02:54 [실습] 1. 노션 새 페이지 만들기 (내 포트폴리오 프로젝트)
03:25 [실습] 2. '데이터베이스'란? (엑셀 시트)
03:41 [실습] 3. 노션 AI 활성화 및 프롬프트 입력
04:04 📊 AI가 1분 만에 '할 일 관리' 데이터베이스 자동 생성
04:55 🖼️ AI가 생성한 3가지 보기(View) (칸반보드, 일정보기)
05:31 [실습] 4. 칸반 보드 커스터마이징 (컬럼 순서 변경, 숨기기)
06:18 [실습] 5. 워크플로우 시뮬레이션 (새 태스크 생성, 상태 변경)
07:05 🧭 완성! 우리의 '나침반'이 생겼습니다
07:14 다음 영상 예고 (이 기획서로 AI 코딩하기)
07:22 맺음말
안녕하세요! AI와 함께 일하며 생산성을 높이는 VibeLabs입니다.
"나만의 포트폴리오를 만들어야지!" 큰맘 먹고 시작했지만, 막상 노션의 흰 화면을 보니 무엇부터 채워야 할지 막막하신가요? '기획'이라는 두 글자에 머리가 아파오시나요?
이제 걱정 마세요. 우리에겐 만능 'AI 기획자'가 있습니다.
이 영상은 '코딩'이 아닌 '기획'에 초점을 맞춘, 진정한 '바이브 워킹' 또는 '바이브 생산성에 대한 영상입니다.
단순히 AI에게 명령하고 끝나는 것이 아닙니다. 내 머릿속의 막연한 아이디어를 AI에게 던지고, AI가 제안한 초안을 바탕으로 '티키타카' 대화를 주고받으며 구체적인 '기획서(PRD)'로 함께 다듬어가는 전 과정을 상세히 담았습니다.
이 영상을 통해 다음 내용을 배울 수 있습니다:
막막한 아이디어를 '포트폴리오 기능'으로 구체화하는 AI 프롬프트
AI가 1분 만에 생성해 주는 'PRD (제품 요구사항 정의서)' 초안
AI와 대화하며 기획안 수정하기 (feat. 관리자 모드, 로그인 기능 추가)
AI에게 '창의적인 아이디어'를 요청해 기획 퀄리티 높이는 법
코딩 1도 몰라도, 기획 1도 몰라도 괜찮습니다. AI와 함께 '대화'하며 '생각'을 정리하는 '바이브 워킹'의 세계로 여러분을 초대합니다.
VibeLabs채널은 AI와 함께 코딩하고 일하는 새로운 방법을 연구합니다. 구독과 좋아요는 더 나은 콘텐츠 제작에 큰 힘이 됩니다.
[작가 제안 및 비즈니스 문의] 📧
futurewave@gmail.com
⏰ 타임라인
00:00 VibeLabs 인트로
00:08 "코딩 몰라도 만드는 나만의 포트폴리오" 시리즈
00:13 기획의 막막함 (무엇을 만들어야 할까?)
00:41 해답: 만능 'AI 기획자'의 등장
01:01 1단계: 노션 AI에게 '포트폴리오 기획' 요청하기
01:45 AI의 첫 번째 답변 (기본 기능 제안)
02:43 2단계: AI에게 기획안을 바탕으로 'PRD 페이지' 생성 요청
03:12 AI가 생성한 PRD(제품 요구사항 정의서) 초안 확인
03:50 PRD란 무엇인가? (What vs. How)
04:40 AI와 '티키타카' (이것이 바이브 워킹의 핵심!)
04:55 3단계: AI 기획안 검토 및 수정 (feat. 관리자 모드)
05:21 AI와 대화하며 '로그인/인증' 기능 구체화하기
06:04 사용자와 함께 PRD 문서 다듬기 (불필요한 기능 삭제)
07:42 4단계: AI에게 '창의적인 기능' 제안 요청하기
08:25 AI의 창의적인 아이디어 (채용 제안, 인터랙티브 스토리)
08:31 5단계: 새로운 아이디어를 기존 PRD에 합치기
09:38 완성된 포트폴리오 기획서 (PRD)
10:41 PRD 작성의 핵심: '나' 혼자가 아닌 '방문자' 관점
11:01 AI와 대화하며 기획이 명확해지는 과정 11:32 다음 영상 예고 (기술 편)
안녕하세요! 코딩 몰라도 만드는 나만의 포트폴리오, 바이브랩스입니다.
이번 영상은 '코딩 몰라도 만드는 나만의 포트폴리오 홈페이지' 시리즈의 네 번째 시간입니다. 지난 시간 우리가 무엇을 만들지(PRD) 정했다면, 오늘은 '어떻게 만들지(TRD)'를 정하는 날입니다.
이번 영상은 단순히 코드를 짜는 '바이브 코딩'보다, 프로젝트를 기획하고 설계하는 생산성의 영역인 '바이브 워킹'을 다룹니다. 30년 차 개발자인 제가 AI를 유능한 동료로 활용해 복잡한 기술 문서를 얼마나 쉽게 완성하는지 확인해 보세요.
TRD가 뭐죠?:
PRD가 '빨간 벽돌집을 짓겠다'는 계획이라면, TRD는 '어떤 시멘트와 공법을 쓸지' 정하는 설계도입니다.
AI의 기술 추천:
노션 AI에게 우리 요구사항을 던져주고, 최적의 기술 스택을 추천받았습니다.
쉬운 비유 설명:
🏠 Next.js: 이미 창문, 벽이 다 준비된 최신 조립식 키트 (초고속 엘리베이터 포함!)
P Vercel:
월세 없이 집을 올릴 수 있는 무료 땅
📦 Supabase:
사진과 글을 보관하는 든든한 창고
👮 Clerk:
신분증 검사 없이 단골은 얼굴만 보고 통과시키는 스마트한 경비원 (로그인/인증)
복잡한 개발 용어, 이제 겁먹지 마세요. AI와 함께라면 기획부터 설계까지 누구나 할 수 있습니다.
📧 작가 제안 및 비즈니스 문의
futurewave@gmail.com
🔔 구독과 좋아요는 바이브랩스에 큰 힘이 됩니다!
4. 타임라인 (챕터)
00:00 인트로: 지난 시간 요약 (PRD에서 TRD로)
00:20 TRD(기술 요구사항 문서)란 무엇인가?
01:06 개발 길라잡이, TRD가 꼭 필요한 이유
01:47 AI에게 기술 스택 추천받기 (노션 AI 활용)
03:05 30년 차 개발자의 시선: AI가 추천한 스택 검토하기
04:26 [기술 1] Next.js: 홈페이지의 뼈대 (최신 조립식 키트)
05:39 [기술 2] Vercel: 배포를 위한 무료 건물주
06:10 [기술 3] Supabase: 데이터와 파일을 위한 무료 창고
08:30 관리자 페이지와 보안 설정 논의
10:17 [기술 4] Clerk: 현관문 경비원 (소셜 로그인 & 인증)
10:53 본격 실전! AI와 함께 TRD 문서 작성하기
12:00 작성된 기술 스택 상세 검토 및 수정
14:28 폴더 구조 및 환경 변수 설정 미리보기
16:00 최종 정리: 우리가 고른 4가지 최신 무기
16:28 다음 예고: 데이터 창고 설계도 그리기 (DB 스키마)
안녕하세요! 코딩 몰라도 만드는 나만의 포트폴리오, 바이브랩스입니다.
벌써 [나만의 포트폴리오 홈페이지 만들기] 시리즈의 다섯 번째 시간이네요. 이번 영상은 단순히 코드를 따라 치는 '바이브 코딩'이 아닌, AI를 활용해서 압도적인 생산성을 만들어내는 '바이브 워킹(Vibe Working)'을 보여드립니다.
홈페이지를 만들 때 가장 많이 하는 오해가 있습니다. "그냥 글이랑 사진 박아 넣으면 되는 거 아냐?" 하지만 수정할 때마다 코드를 뜯어고칠 수는 없죠. 우리에게는 인스타그램처럼 사진과 글을 저장해 줄 튼튼한 '디지털 창고(Database)'와 그 창고를 돌려줄 '엔진(Node.js)'이 필요합니다.
📌 이번 영상의 핵심 포인트
Supabase(슈파베이스):
개발자들이 사랑하는 무료 고성능 데이터베이스를 3분 만에 세팅합니다.
Notion AI의 마법:
복잡한 SQL 언어? 몰라도 됩니다. 우리가 써둔 기획서(PRD)만 던져주면 AI가 알아서 코드를 짜줍니다.
Node.js(노드JS):
내 컴퓨터를 강력한 서버로 만들어줄 엔진을 장착합니다.
개발 지식이 전혀 없어도 괜찮습니다. 복잡한 건 AI에게 맡기고, 우리는 흐름만 이해하면 됩니다. 이제 여러분의 포트폴리오에 생명을 불어넣을 준비를 시작해 보세요.
다음 시간에는 구글 스티치(Google Stitch)를 활용해 본격적으로 홈페이지의 얼굴을 디자인해 보겠습니다.
[문의 및 제안] 작가 제안 및 비즈니스 문의 :
futurewave@gmail.com
타임라인 (챕터)
00:00 인트로 : 왜 데이터베이스(디지털 창고)가 필요할까?
00:40 Supabase 가입 및 프로젝트 생성 (무료 DB 세팅)
02:14 Notion AI 활용 : 기획서(PRD)를 바탕으로 SQL 코드 자동 생성
04:35 스크립트 통합 및 코드 블록 정리 노하우
05:09 Supabase SQL Editor 실행 및 테이블 생성
05:43 🚨 실전 꿀팁 : AI가 낸 에러 해결하는 법 (RLS 정책 수정)
07:28 테이블 생성 확인 및 보안 설정 (Security Definer View)
08:33 엔진 설치 : Node.js (LTS 버전) 다운로드 및 설치
09:55 설치 확인 : 터미널에서 Node 버전 체크하기
10:41 다음 예고 : AI랑 홈페이지 디자인하기
안녕하세요, 바이브랩스입니다.
오늘 역시 '바이브 코딩'이 아닌, 개발자의 업무 효율을 극대화할 '바이브 워킹에 대한 이야기입니다. "코딩 몰라도 만드는 나만의 포트폴리오 홈페이지" 시리즈 다섯 번째 영상입니다.
기획서(PRD)는 있는데 디자인이 막막하셨나요? 구글이 새로 내놓은 AI 디자인 툴 '스티치(Stitch)'와 '노션 AI'를 활용해서, 기획서 한 장으로 UI 디자인부터 [디자인 시스템 문서]까지 단숨에 완성하는 과정을 보여드립니다.
💡 이번 영상의 핵심 포인트
구글 스티치(Stitch):
복잡한 툴 조작 없이, PRD 텍스트만 넣으면 제미나이(Gemini) 모델이 웹사이트 UI를 그려줍니다.
스타일 트랜스퍼:
마음에 드는 레퍼런스(Dribbble 등) 이미지만 던져주면, 내 프로젝트의 색감과 톤을 자동으로 통일해 줍니다.
노션 AI의 마법:
스티치가 그려준 화면을 캡처해 노션에 넣기만 하세요. 색상 코드, 폰트, 그리드 등이 담긴 '디자인 시스템 가이드'를 AI가 대신 작성해 줍니다.
디자인 감각이 부족한 개발자도, 1인 창업가도 이제 '바이브' 있게 프로페셔널한 결과물을 만들 수 있습니다.
📨 비즈니스 및 작가 제안
futurewave@gmail.com
타임라인 (자막 파일 기준 정밀 구성)
01:21 구글의 신상 디자인 툴, 스티치(Stitch) 접속 및 로그인
01:53 프로젝트 설정 (웹/앱 선택 & 제미나이 프로 모델)
02:14 노션 PRD(기획서) 복사해서 스티치에 프롬프트 입력하기
03:00 AI가 그려준 6가지 핵심 화면(홈, 쇼케이스, 상세 등) 확인
04:23 줌(Zoom) & 팬(Pan) 기능으로 디테일 살펴보기
05:43 [꿀팁] 'Generate Variants'로 마음에 안 드는 부분 수정하기
08:54 레이아웃 변경 요청 (검색창 이동 & 카드 배치 수정)
10:20 [핵심] 레퍼런스 이미지로 전체 디자인 톤앤매너 한 번에 바꾸기
12:50 프로젝트 다운로드 (HTML & 스크린샷 추출)
13:41 노션으로 이동: '디자인 시스템' 페이지 생성
14:36 노션 AI에게 디자인 시스템 가이드 문서 작성 시키기
15:34 완성된 디자인 시스템 검토 (컬러, 타이포, 그리드 정의)
16:20 마무리: 기획부터 디자인 시스템까지, 문서 4종 세트 완성!
안녕하세요, 바이브랩스입니다.
오늘은 단순히 코드를 짜는 '바이브 코딩'을 넘어, 프로젝트 전체를 조율하는 '바이브 워킹의 진수를 보여드립니다. "코딩 몰라도 만드는 나만의 포트폴리오 홈페이지" 시리즈, 그 여섯 번째 시간입니다.
기획서(PRD), 디자인(Stitch), 데이터베이스 설계까지 마쳤다면 이제 본격적인 개발 환경을 구축할 차례입니다. 하지만 걱정하지 마세요. 우리는 커서 AI와 Notion AI라는 든든한 비서가 있으니까요.
이번 영상에서는 기획 문서를 커서(Cursor)에 주입하여 개발 계획을 수립하고, 그 계획을 노션(Notion)으로 가져와 AI가 자동으로 '할 일 관리(Kanban)' 시스템을 구축하는 워크플로우를 공개합니다.
💡 이번 영상의 핵심 포인트
명세서 기반 개발(SDD) 시작:
노션에 정리한 기획서(PRD/TRD)를 커서로 옮겨 AI에게 문맥을 학습시키는 방법
AI 헌법(Constitution) 제정:
내 프로젝트의 코딩 스타일과 원칙을 AI에게 미리 가르쳐 흔들리지 않는 기준 세우기
노션 AI의 마법:
텍스트로 된 작업 목록(Tasks)을 노션에 붙여넣고 명령 한 번이면? → 데이터베이스 생성, 관계형 연결, 태스크 등록까지 10초 만에 자동화됩니다.
페이즈 1 구현:
/speckit 명령어로 프로젝트 초기 세팅(Next.js, Supabase 등)을 한 번에 완료하는 실습
개발자이자 PM이 되어 프로젝트를 지휘하는 즐거움, 바이브랩스와 함께 경험해 보세요.
📨 비즈니스 및 작가 제안
futurewave@gmail.com
타임라인
00:00 인트로: 채팅(Chat) 대신 명령(Spec)으로! SDD란 무엇인가?
00:51 [기초공사 1] 깃허브(GitHub): 내 코드가 살 '집' 짓기
03:03 깃허브 토큰(Token) 발급받는 법 (필수 시청)
04:16 [기초공사 2] 수파베이스(Supabase): 데이터 '창고' 카드키 복사
05:20 [기초공사 3] 커서(Cursor) 세팅: 기획서(PRD/TRD) 가져오기
08:04 AI에게 시켜서 깃허브와 커서 연결하기
09:24 구글 스티치(Stitch) 와이어프레임 이식
10:21 [핵심] SDD 마법 시작:
10:30 1단계: 헌법(Constitution) 제정 - "한국어로 작성해"
12:00 2단계: 주문서(Spec) - PRD 기반 명세서 작성
13:10 3단계: 기술 스택(Plan) - 아키텍처 설계
15:08 4단계: 태스크(Task) 분해 - 개발 단계 나누기
16:30 [하이라이트] 노션 AI: 텍스트를 '프로젝트 관리 DB'로 자동 변환
20:26 5단계: 실전 구현(Implement) - 페이즈 1(초기 설정) 완성
23:50 AI가 만든 테스트 체크리스트 점검
25:17 마무리: 큰 산을 넘었습니다 (GitHub, Supabase, SDD 정복)
안녕하세요, 바이브랩스입니다.
단순히 코드를 짜는 것을 넘어, AI와 함께 일하는 방식을 혁신하는 '바이브 워킹', 그 생산성의 세계로 여러분을 초대합니다. "코딩 몰라도 만드는 나만의 포트폴리오 홈페이지" 시리즈 일곱 번째 영상입니다.
홈페이지 만들 때 가장 골치 아픈 기능, 바로 '회원가입 및 로그인'입니다. 보안도 신경 써야 하고, 구글/카카오 같은 소셜 로그인까지 붙이려면 개발자들도 며칠을 고생하곤 하죠.
이번 영상에서는 인증 전문 서비스인 Clerk과 커서 AI를 활용해서, 복잡한 로그인 기능을 구축하는 방법을 보여드립니다.
💡 이번 영상의 핵심 포인트
Clerk 도입:
복잡한 인증 로직(세션, 보안 등)을 직접 짜지 않고, 전문 서비스에 위임하여 생산성을 극대화하는 전략.
카카오톡 로그인 연동 (꿀팁):
Clerk에서 공식 지원하지 않는 '카카오 로그인'을 커스텀 프로바이더(OpenID Connect) 설정을 통해 뚫어내는 비법 공개.
SDD 실전 (Phase 2):
tasks.md에 정의된 인증 작업을 /speckit implement 명령어 한 줄로 AI에게 구현시키는 과정.
실전 디버깅:
"카카오로 가입하려는데 구글로 로그인되는 문제?" AI와 함께 에러 로그를 분석하고 해결하는 개발자의 찐 문제 해결 방식을 보여드립니다.
이제 로그인 기능 때문에 포기하지 마세요. 바이브랩스가 가장 쉬운 길을 알려드립니다.
📨 비즈니스 및 작가 제안
futurewave@gmail.com
타임라인
00:00 인트로: 개발자처럼 일하는 법, SDD(스펙 주도 개발) 리마인드
00:33 왜 직접 만들지 않고 'Clerk'을 써야 하는가?
00:53 Clerk 프로젝트 생성 및 API 키 발급 (기초 공사)
02:10 Next.js 프로젝트에 환경변수(.env.local) 설정하기
02:28 [핵심] 카카오톡 로그인 연동 시작 (카카오 개발자 센터 설정)
04:07 Clerk에서 'OpenID Connect' 활성화 및 커스텀 프로바이더 등록
05:02 카카오와 Clerk 연결을 위한 '비밀 출입증(Client Secret)' 교환
06:36 SDD 실전: AI에게 Phase 2(인증 기능) 구현 명령하기 (/speckit implement)
09:26 구현 결과 확인: 디자인이 깨졌다? UI 수정 요청하기
11:55 디자인 개선: 로고 배치 및 내비게이션 바 위치 수정
13:23 [디버깅] 카카오 로그인이 구글로 연결되는 버그 발생?
15:26 시크릿 모드와 브라우저 검사 도구로 원인 파악하기
17:08 AI에게 에러 로그 전달 및 수정 요청
19:04 카카오 로그인 최종 성공 및 DB(Supabase) 연동 확인
22:03 아웃트로: 시스템 완성, 다음 단계 예고
'홈페이지에 문의하기 폼, 디자인만 있으면 될까?'
'고객이 보낸 소중한 데이터는 도대체 어디로 저장되지?'
프론트엔드(화면)와 백엔드(데이터베이스)의 연결이라는 거대한 벽 앞에서 막막했던 분들을 위해 AI 코딩 연구소 '바이브랩스'가 새로운 해법을 제시합니다.
이 영상에서는 전문 개발 지식이 없어도, AI(Cursor)에게 에러 메시지를 그대로 복사해 던져주는(Copy & Paste) 단순하고 강력한 방식을 보여드립니다. '문의하기(Contact)' 기능을 구현하고, 오픈소스 데이터베이스인 Supabase와 연동하여 데이터가 실제로 저장되는 전 과정을 담았습니다.
✅ 이 영상의 핵심 내용
AI를 활용한 '문의하기(Contact)' 페이지 기획 및 기능 명세
Supabase 데이터베이스 테이블 생성 및 SQL 에디터 활용
바이브 워킹: 에러 메시지 복붙으로 복잡한 DB 문제 해결하기
자연어("가운데 정렬해줘")를 통한 직관적인 UI/UX 수정
실제 이메일 전송 및 데이터베이스 저장 최종 테스트
✅ 사용된 주요 기술
AI: 커서 AI (Claude 4.5 Sonnet)
Database: Supabase (PostgreSQL)
Framework: Next.js
Styling: Tailwind CSS
⏰ 타임라인 (Timeline)
00:00 인트로 및 바이브랩스 소개
00:16 [계획] Phase 3: '문의하기' 페이지 기능 구현 전략 수립
01:27 [DB설정] Supabase: 데이터베이스 연동 및 테이블 생성 시작
03:10 [문제발생] 샘플 데이터 입력 시도와 예상치 못한 에러 직면
03:50 [솔루션] 바이브 워킹: 에러 메시지를 AI에게 던져서 1초 만에 해결하기
05:47 [DB설정] 테이블 초기화 및 스키마 재설정 (AI 위임)
08:25 [테스트] 홈페이지 반영 확인 및 실시간 데이터 수정 검증
08:45 [기능구현] '문의하기' 폼 연동 및 전송 테스트
10:13 [디버깅] RLS(보안 정책) 에러 발생과 해결 과정
11:43 [UI수정] "가운데 정렬해줘" 말로 하는 디자인 수정
12:22 [최종점검] 실제 문의 메일 발송 및 DB 저장 확인
13:28 [예고] 다음 단계(Phase 4) 계획 및 시리즈 향후 일정
14:51 마무리 및 요약
바이브랩스는 AI를 활용해서 여러분의 아이디어를 가장 빠르고 효율적으로 세상에 내놓는 방법을 연구하고 공유합니다. 구독과 좋아요, 알림 설정은 더 좋은 콘텐츠를 만드는 데 큰 힘이 됩니다. 궁금한 점은 언제든지 댓글로 남겨주세요.
🔔 AI 코딩 연구소, 바이브랩스 문의:
[futurewave@gmail.com]
