클로드 요금제, 아직도 헷갈리셨다면 이 영상 하나로 정리됩니다. 프로 / 맥스 100달러 / 맥스 200달러가 어떻게 다른지, 그리고 실제로는 어떤 기준으로 선택해야 하는지 사용량 구조까지 함께 설명드립니다. 클로드를 업무나 코딩에 제대로 쓰고 싶은 분들께 특히 도움 되는 내용입니다.

타임라인
0:00 오늘 영상 주제 소개
0:40 왜 클로드 요금제와 구독제가 자주 헷갈리는지
2:43 클로드 요금제 전체 구조 정리
3:16 프로 요금제는 어떤 사람에게 맞는가
4:52 맥스 100달러 / 200달러 차이 핵심
6:57 200달러 요금제가 필요한 사용자 기준
8:10 결론: 20달러, 100달러, 200달러 추천 기준
9:48 5시간 한도와 주간 한도 구조 설명
12:15 언제 200달러로 업그레이드해야 하는가
14:18 소넷 한도와 추가 사용량 옵션 주의점
16:20 다음 영상 예고 및 마무리

오늘 다룬 내용
- 클로드 프로 요금제와 맥스 요금제의 차이
- 맥스 100달러와 200달러는 기능 차이보다 사용량 차이가 핵심이라는 점
- 프로 요금제는 간단한 사무업무 중심, 본격 활용은 맥스 100달러부터 추천한다는 기준
- 바이브 코딩, 에이전트 코딩, 대규모 프로젝트 기준으로 어떤 요금제가 맞는지
- 클로드 사용량이 5시간 단위와 주간 단위로 함께 관리되는 구조
- 소넷 한도와 추가 사용량 옵션에서 주의해야 할 포인트

#클로드 #Claude #ClaudeCode #AI활용 #AI요금제 #바이브코딩 #에이전트코딩 #생산성 #토큰관리 #오퍼스 #소넷 #AI구독

클로드를 쓰고 있는데 기능이 너무 많아서 어디에 뭘 써야 할지 헷갈리셨다면, 이번 영상은 그 기준을 한 번에 잡아드리기 위한 정리 영상입니다. 채팅, 프로젝트, 아티팩트부터 웹 검색, 리서치, 로컬 작업, 코드 작업까지 클로드와 대화할 때 어떤 결로 접근해야 하는지 흐름 중심으로 설명했습니다.

타임라인
0:00 인트로 — 클로드 대화원리 이해하기
1:02 대화를 가이드하는 3가지 방향
1:49 일반적인 대화: 채팅, 프로젝트, 아티팩트
3:33 프로젝트의 역할과 컨텍스트 활용법
9:21 아티팩트란 무엇인가
16:46 웹 검색과 리서치의 차이
20:26 검색 결과를 아티팩트와 연결하는 흐름
23:46 작업을 하게 만드는 대화의 개념
24:24 로컬 PC에서 작업 범위를 지정하는 방식
27:23 진행 상황이 보이는 로컬 작업의 장점
30:46 코드 작업과 일반 작업의 차이
32:19 오늘 내용 전체 정리
33:51 다음 영상 예고 — 스킬 편

오늘 다룬 내용
- 클로드 대화는 크게 일반 대화, 검색, 작업의 3가지 방향으로 나눠서 이해할 수 있다는 점
- 프로젝트는 답변의 방향성을 고정하고, 아티팩트는 결과물을 더 보기 좋고 인터랙티브하게 보여준다는 점
- 웹 검색과 리서치는 출처를 기반으로 신빙성을 높이는 기능이며, 검색 깊이와 결과 형태에서 차이가 있다는 점
- 로컬 기반 작업은 내 파일과 폴더를 바탕으로 진행되기 때문에 더 예측 가능하고 실무적인 결과를 만들기 좋다는 점
- 코드 작업은 더 넓고 강한 작업을 처리할 수 있지만, 목적에 따라 일반 작업 기능과 구분해서 써야 한다는 점
- 결국 기능 이름보다 먼저 “지금 내가 원하는 대화의 방향이 무엇인가”를 정하는 것이 중요하다는 점

#클로드 #Claude #AI활용 #프로젝트 #아티팩트 #웹검색 #리서치 #클로드코드 #스킬 #에이전트 #생산성 #업무자동화

클로드 코드 입문자라면 왜 다들 터미널부터 배우라고 하는지, 이 영상 하나로 흐름을 잡으실 수 있습니다. GUI보다 터미널이 왜 더 유리한지부터, 정말 최소한으로 알아야 할 기본 명령어까지 초보자 기준으로 정리했습니다.

타임라인
0:00 왜 클로드 코드를 터미널에서 써야 하는가
0:50 GUI는 왜 보조바퀴에 가깝다고 말하는가
1:39 터미널 대안 앱들도 결국 같은 한계가 있는 이유
2:31 터미널에서도 이미지 붙여넣기와 이미지 활용 가능
3:24 VS Code 확장 설치와 순정 Claude Code의 차이
6:20 터미널, CLI, GUI 개념 쉽게 이해하기
7:45 에이전트가 터미널 환경을 더 잘 다루는 이유
10:40 초보자가 터미널을 어려워하는 진짜 이유
11:31 터미널 실행과 현재 위치 읽는 법
13:03 ls / dir 로 현재 폴더 확인하기
14:01 cd 와 cd .. 로 폴더 이동하기
15:29 방향키, Ctrl+C 같은 필수 조작 익히기
17:38 Claude Code 실행 전에 작업 폴더를 맞춰야 하는 이유
19:39 다음 영상 예고: Claude Code 실전 사용법과 추천 설정

#클로드코드 #ClaudeCode #터미널 #CLI #GUI #AI코딩 #개발입문 #프로그래밍기초 #VSCode #코딩도구 #에이전트 #생성형AI #AI활용

클로드 코드, 어렵게 시작할 필요 없습니다. 이번 영상에서는 초보자 기준으로 Claude Code를 더 편하게 쓰기 위한 환경 세팅을 정리했습니다. Warp 터미널 설치부터 상태 표시줄, 슬래시 메뉴, 이미지 붙여넣기, 플랜 모드까지! 처음 시작할 때 꼭 알아야 할 기능만 실습 중심으로 빠르게 정리해드립니다. 다음 영상부터는 본격적으로 바이브 코딩 실전으로 넘어갑니다.

타임라인
0:00 오늘 영상 소개와 초보자용 세팅 방향
1:50 Warp 터미널을 추천하는 이유
3:24 윈도우에서 Warp 설치 시도
5:35 Warp 실행 후 기본 테마와 폰트 설정
7:50 탐색기 패널과 Open Repository 사용법
9:49 Claude Code 상태 표시줄 애드온 소개
11:46 Node.js 설치와 status line 설치
14:03 상태 표시줄에서 모델·컨텍스트·사용량 확인
15:28 슬래시 메뉴로 모델 메뉴 사용하는 법
18:09 스킬 메뉴가 무엇인지 쉽게 이해하기
20:49 이미지 붙여넣기와 드래그 앤 드롭 입력
22:41 Shift+Tab으로 모드 전환하기
25:37 플랜 모드로 일기 작성 예제
31:36 에이전트 모드로 바로 수정 요청하기
32:15 다음 영상 예고: 바이브 코딩 실전

오늘 다룬 내용
- Claude Code 초보자를 위한 기본 환경 세팅 흐름
- Warp 터미널 설치와 화면/탐색기 활용법
- 상태 표시줄로 모델, 컨텍스트, 사용량 확인하는 방법
- 슬래시 메뉴로 모델과 스킬 메뉴 접근하는 방법
- 이미지 입력, 플랜 모드, 에이전트 모드의 차이와 활용 예제
- 다음 영상에서 이어질 바이브 코딩 실전 예고

#클로드코드 #ClaudeCode #Warp #AI코딩 #바이브코딩 #생성형AI #AI활용 #터미널 #개발생산성 #코딩튜토리얼 #초보자튜토리얼 #에이전트모드 #플랜모드

에이전트를 잘 쓰는 핵심은 프롬프트보다 컨텍스트 관리입니다. 이번 영상에서는 클로드 코드 입문 3편으로, 컨텍스트와 컨텍스트 윈도우를 어떻게 이해해야 하는지 먼저 정리합니다. 왜 Agent.MD, Skills 같은 개념이 나왔는지 흐름으로 연결해서 설명하고, 마지막에는 한글 문서 작성 스킬을 직접 설치하고 써보는 실습까지 보여드립니다.

타임라인
0:00 인트로
1:26 컨텍스트란 무엇인가
3:52 컨텍스트 윈도우 개념 정리
6:55 컨텍스트 윈도우와 기억의 한계
8:17 컨텍스트 관리가 중요한 이유
11:42 컨텍스트 사용량 확인하기
13:26 clear와 compact 명령어
14:16 플랜 모드와 검색으로 컨텍스트 풍부하게 만들기
15:26 Agent MD 개념 이해
20:25 Skills가 왜 필요한가
25:27 스킬 개념과 실습 시작
26:09 한글 문서 작성 스킬 소개
28:21 전역 설치와 프로젝트 설치 차이
31:44 문서 파일과 함께 스킬 실행하기
35:29 결과물 확인과 마무리

오늘 다룬 내용
- 컨텍스트를 "에이전트 채팅에 들어간 모든 것"으로 이해하는 방법
- 컨텍스트 윈도우를 기억 용량의 통으로 보고 관리해야 하는 이유
- clear, compact, 플랜 모드, 검색으로 컨텍스트를 다루는 기본 방법
- Agent MD와 Skills가 컨텍스트를 더 효율적으로 관리하게 해주는 구조
- 한글 문서 작성 스킬을 설치하고 실제 문서 작업에 적용하는 흐름

#클로드코드 #ClaudeCode #에이전트 #AI에이전트 #컨텍스트 #컨텍스트윈도우 #스킬 #AI활용 #Codex #AgentMD #한글문서 #문서자동화 #프롬프트엔지니어링

VS Code에서 Claude Code를 붙여 문서 작업하는 흐름을 한 번에 정리했습니다. 이번 영상에서는 왜 이 조합을 보조적으로 써야 하는지, 언제 유용한지, 그리고 Markdown 문서를 보고서/PDF/Word까지 확장하는 과정을 실제로 보여드립니다. 바이브 코딩으로 넘어가기 전에 꼭 알아야 할 기본기와 스킬 활용법까지 함께 다룹니다.

결제라인이 있는 워드 스킬 : https://github.com/Canine89/wo....rdskill-for-korean-r

타임라인
0:00 인트로 - 왜 이 조합을 다루는가
0:59 보조 도구를 쓸 때 주의할 점
2:21 VS Code 조합이 특히 유용한 경우
2:49 VS Code와 Claude Code 기본 개념
4:09 오늘 실습 - Markdown 문서 작성 시작
5:28 VS Code 설치와 Claude Code 익스텐션 연결
10:13 Markdown이 에이전트와 잘 맞는 이유
21:11 작성된 Markdown 보고서 확인
22:31 Markdown 미리보기와 렌더링 방법
24:10 Markdown을 PDF로 내보내기
26:37 Word 문서로 확장하는 방법
27:16 스킬 설치로 Word 작업 자동화
37:42 커스텀 Word 스킬 결과 확인
39:31 오늘 내용 정리와 다음 영상 예고

오늘 다룬 내용
- VS Code에서 Claude Code 익스텐션을 연결해 작업하는 기본 흐름
- Markdown이 에이전트 친화적인 문서 형식인 이유
- 하나의 Markdown으로 보고서, PDF, Word까지 확장하는 방법
- 문서 미리보기와 렌더링으로 결과를 바로 확인하는 팁
- 스킬을 설치해 반복 문서 작업 품질을 고정하는 방법

#claudecode #VSCode #Markdown #AI문서작성 #문서자동화 #에이전트활용 #PDF변환 #워드문서 #스킬활용 #바이브코딩 #Cursor #AI활용

클로드 코드로 바이브 코딩을 시작할 때, 바로 실습보다 먼저 잡아야 할 기준이 있습니다. 이번 1편에서는 바이브 코딩을 어떤 마음가짐으로 시작해야 하는지, 에이전트를 어떻게 써야 덜 헤매는지, 그리고 파이썬으로 크롤링 실습을 하면서 그 감각을 실제로 연결해봅니다.

타임라인
0:00 클로드 코드와 함께하는 바이브 코딩 1편 시작
0:13 오늘 영상에서 다룰 내용 소개
1:55 바이브 코딩 전에 먼저 가져야 할 마음가짐
3:23 "딸깍"이 아니라 에이전트와 상의하는 자세
5:44 바이브 코딩의 4가지 기본 루틴
6:56 프로그래밍 분야의 특징과 재사용 문화
10:15 꼭 알아야 할 5가지 도구와 개념
11:24 파이썬으로 실무 자동화와 크롤링 이해하기
14:19 크롤링 전에 알아야 할 매너와 주의사항
19:09 오늘 실습: 연습용 사이트 + 유튜브 댓글 수집
24:08 검사 기능과 카피 셀렉터로 위치 찾기
28:22 파이썬으로 데이터 가져오기와 BeautifulSoup 개념
30:17 수집한 데이터를 엑셀 파일로 저장하기
35:22 1개에서 100개로 확장하는 방식
37:29 유튜브 댓글 수집 실습 시작
42:20 동적 웹사이트, Selenium, 로딩 문제 이해하기
44:17 고수는 왜 API를 먼저 찾는가
46:42 오늘 내용 정리와 다음 영상 예고

오늘 다룬 내용
- 바이브 코딩을 오래 이어가려면 먼저 해결하고 싶은 문제가 있어야 한다는 점
- 에이전트는 만능 자동화 버튼이 아니라, 질문하고 수정하며 협업하는 대상이라는 점
- 바이브 코딩은 시키기 → 실행하기 → 확인하기 → 다시 설명하기의 반복 루틴이라는 점
- 초보자는 처음부터 만들기보다 이미 있는 도구를 재사용하는 감각이 더 중요하다는 점
- 파이썬으로 웹사이트 데이터를 수집하고 엑셀로 정리하는 기본 흐름
- 유튜브 댓글 수집 실습을 통해 동적 웹사이트와 API 개념이 왜 중요한지 맛보기

#클로드코드 #ClaudeCode #바이브코딩 #AI코딩 #파이썬 #크롤링 #웹스크래핑 #BeautifulSoup #Selenium #API #자동화 #프로그래밍입문 #AI활용 #유튜브댓글분석

슬라이드 제작, 이제 에이전트와 같이 하면 훨씬 빨라집니다. 이번 영상에서는 Claude Code와 VS Code를 활용해 Markdown 기반 슬라이드를 만드는 방법부터 Pencil, MCP, 인포그래픽 활용까지 한 번에 정리했습니다.

타임라인
0:00 오늘 영상 소개 및 목표
0:53 오늘 다룰 3가지 도구와 흐름
2:11 Markdown + Claude Code가 잘 맞는 발표 범위
3:09 Marp 같은 Markdown 슬라이드 도구 찾는 법
4:48 VS Code에서 문서를 슬라이드로 바꾸는 기본 흐름
7:42 에이전트에게 변환 계획부터 받는 이유
12:24 Marp 확장 설치와 슬라이드 미리보기
15:03 슬라이드 문구 수정과 글자 크기 조정 방법
17:20 디자인 분위기 변경과 웹 검색 활용 팁
19:15 VS Code + Pencil + Claude Code 조합 소개
21:54 MCP 연결과 Pencil 설정 방법
28:14 Pencil로 더 완성도 높은 슬라이드 만드는 이유
32:30 텍스트 넘침 수정과 토큰 비용 고려 포인트
34:28 인포그래픽 이미지로 슬라이드 보강하기
37:46 마무리 및 다음 바이브코딩 영상 예고

오늘 다룬 내용
- Claude Code와 Markdown을 결합해 실무용 슬라이드를 빠르게 만드는 방법
- VS Code에서 Marp 확장과 터미널을 활용해 작업하는 흐름
- 에이전트에게 계획 수립, 수정, 디자인 변경까지 맡기는 방식
- Pencil과 MCP를 연결해 더 정교한 슬라이드 초안을 만드는 방법
- 인포그래픽 이미지를 섞어 발표 자료를 더 풍부하게 구성하는 팁
- 목적과 요금제에 따라 Marp 방식과 Pencil 방식을 선택하는 기준

#클로드코드 #ClaudeCode #VSCode #Marp #Pencil #MCP #AI슬라이드 #프레젠테이션 #PPT제작 #AI업무활용 #인포그래픽 #바이브코딩

스킬이 뭔지 헷갈렸다면 이 영상 하나로 정리하실 수 있습니다. 스킬의 정체부터 공유 방식, 심볼릭 링크 활용, 직접 만드는 방법까지 한 번에 설명했습니다. Claude, Codex, Cursor 같은 에이전트 도구에서 스킬을 어떻게 연결하고 써먹는지도 실제 예시로 보여드립니다. 반복 작업을 줄이고 원하는 방식으로 결과물을 뾰족하게 만들고 싶은 분들께 특히 도움이 될 내용입니다.

타임라인
0:00 미립자 팁 시리즈와 오늘 주제 소개
0:21 왜 스킬을 알아야 하는가
1:04 스킬의 기본 개념 정리
2:42 스킬 폴더 구조와 구성 요소
5:06 스킬은 Claude 전용이 아닌 표준
5:45 Codex에서 유튜브 소개글 스킬 사용 예시
6:34 스킬 공유와 심볼릭 링크 연결 방식
10:48 Claude Code에서도 같은 스킬 쓰기
12:29 스킬은 어떻게 만드는가
14:24 반복 작업을 스킬로 만드는 예시
16:26 스킬 마켓플레이스 활용법
18:38 왜 에이전트에게 스킬이 필요한가
21:09 Toss 스타일 디자인 스킬 데모
22:12 스킬 조합 활용법
23:12 디자인 철학까지 반영되는 스킬의 힘

오늘 다룬 내용
- 스킬은 단순 문서가 아니라 작업 지침과 참고 자료가 들어 있는 폴더라는 점
- 하나의 스킬을 만들어 여러 에이전트 환경에서 공유해 쓰는 방법
- 심볼릭 링크로 스킬을 연결해 관리 효율을 높이는 방식
- 반복되는 작업을 기준으로 직접 스킬을 만드는 실전 접근법
- 스킬 마켓플레이스에서 다른 사람이 만든 스킬을 가져다 쓰는 방법
- 디자인, 문서, 콘텐츠 제작까지 스킬을 조합해 확장하는 아이디어

#스킬 #AI에이전트 #Codex #Claude #Cursor #심볼릭링크 #스킬크리에이터 #AI활용 #반복작업자동화 #유튜브팁

윈도우에서 Claude Code Channels(텔레그램 연동)를 처음부터 끝까지 같이 설치합니다. 슬라이드 없이 터미널·환경 변수·봇·플러그인까지 실제 화면으로 진행하고, 중간에 막힐 때 에이전트에게 물어보며 푸는 과정까지 담았습니다.

타임라인
0:00 오프닝·오늘 할 일(윈도우 + Claude Channels 세팅)
0:34 설치 가이드 형식·Node·Python 설치 여부 확인
1:20 Claude 검색·설치 전 준비
1:23 Git이 꼭 필요한 이유·윈도우용 Git 설치
2:34 `git` 명령이 안 될 때—설치 후 터미널을 껐다 켜야 하는 이유
3:17 공식 안내의 Windows용 명령으로 Claude CLI 설치
4:01 `claude` 명령 인식—환경 변수 PATH에 설치 경로 등록
5:55 Claude 실행·구독 옵션·로그인
6:28 Channels 세팅 이어가기·작업용 폴더 준비
8:02 저장소 링크·「스킬로 설치 가이드 설치」 요청(가이드 스킬 ≠ 채널스 본체)
11:05 텔레그램 BotFather로 봇 만들기·이름·토큰
12:46 텔레그램 플러그인 설치·API 토큰 입력·스킬 리로드
15:18 텔레그램에서는 허용 창을 누를 수 없을 때—권한/스킵 관련 옵션 검토
17:08 START 후 반응 없음·페어링 코드—상황을 그대로 에이전트에 질문하기
19:38 원인 예시: Bun 미설치·안내에 따라 설치 후 재시도
21:47 페어링 코드로 연결 마무리·외출 중 텔레그램으로 세션 활용
22:35 BotFather에서 액세스 제한(본인만 등) 보안 설정
23:04 마무리·다음 편 티저(세션 끊김, tmux, 스케줄 활용 예정)

오늘 다룬 내용
- 윈도우에서 Node·Python·Git 설치 여부 확인과 Git 설치
- Git·Claude 설치 후에는 새 터미널에서 명령 인식 확인하기
- Claude CLI 설치 후 PATH에 실행 파일 경로 등록하기
- Claude 로그인 후 Claude Code Channels(텔레그램) 연동을 스킬 가이드로 단계 진행하기
- BotFather 봇 생성, 플러그인·토큰 설정, 페어링 코드로 채널 연결하기
- 안 될 때는 에이전트에 “무엇을 했는데 어떻게 됐다”고 구체적으로 물어보며 해결하기

#ClaudeCode #ClaudeChannels #텔레그램봇 #Windows설치 #개발환경 #Git #PATH #환경변수 #CLI #AI코딩 #에이전트 #BotFather #터미널 #코딩튜토리얼

클로드 코드·코덱스 쓰다 터미널만 꺼져도 작업 맥락이 통째로 사라지나요? 채팅처럼 세션을 이어가고 싶다면 tmux가 답입니다. 이번 영상은 고수용이 아니라, 에이전트 코딩 도구를 막 쓰기 시작한 분을 위한 초보자 가이드예요. 터미널이 ‘창’이고 tmux가 뒤에서 세션을 붙잡는다는 감각만 잡아도 충분합니다.

타임라인
0:00 오프닝 — tmux 초보 가이드, 대상(에이전트 도구 입문자)
0:31 왜 불편한가 — 터미널 재시작·종료 시 히스토리·맥락 소실
1:16 tmux를 쓰면 — 세션 유지, 화면 분할은 부가 기능
1:28 tmux가 뭔가 — 오래된 도구지만 에이전트 워크플로에 다시 주목
2:29 핵심 개념 — 터미널과 세션 분리, 꺼져도 세션은 살아 있음
4:23 초보 팁 ① — 접두키: Ctrl+b로 tmux 명령 시작
4:50 초보 팁 ② — Ctrl+b 후 % 로 세로 분할, 한 창에 터미널 둘
5:36 분할 끄기 — Ctrl+b 후 x (페인 종료)
6:26 tmux 나가기 — exit로 일반 터미널로 복귀
6:40 세션 이름·복구 — 세션 이름 짓기, 목록 확인 후 다시 붙기(attach)
8:23 마우스 쓰기 — 설정에서 mouse on으로 패널 전환 편하게
9:40 어디서든 — VS Code 터미널 말고 일반 터미널에서도 같은 세션
10:14 설치 — 검색·패키지 매니저, 공식 설치 문서
10:47 윈도우 — 네이티브는 비추, WSL 등 환경 안내

오늘 다룬 내용
- 클로드 코드·코덱스 등 터미널 기반 도구에서 ‘세션이 날아가는’ 문제와 한계
- tmux로 터미널 UI와 실제 작업 세션을 분리해 유지하는 원리
- Ctrl+b 접두키, % 분할, x로 페인 닫기 등 바로 쓰는 단축키 흐름
- 세션 이름 지정·목록·재접속으로 PC/앱을 껐다 켜도 이어하기
- mouse on 설정으로 분할 화면에서 마우스로 이동하기
- macOS·리눅스 설치 경로와 윈도우는 WSL 등 대안 위주 안내

#tmux #터미널 #클로드코드 #ClaudeCode #Codex #개발환경 #세션관리 #터미널분할 #개발초보 #에이전트코딩 #AI코딩 #개발팁 #macOS #Linux #WSL

커서 하나로 채팅·터미널·클로드 코드·코덱스까지 묶는 에이전트 작업 환경을, 실제 화면으로 따라잡습니다. 윈도우/맥에서 터미널·스플릿, Antigravity 연동, Gmail·구글 문서 업무 자동화, 원고 기반 보도자료 초안, 그리고 Hero UI로 카드뉴스 제작 앱까지 이어지는 흐름과 “컨텍스트·플랜 모드” 팁, 20달러 플랜 토큰 사용량까지 정리했습니다.

타임라인
0:00 인사·에이전트 가이드 복귀, 오늘 주제(클로드·커서 조합 최적 환경)
0:33 커서를 중심에 두고 클로드 코드·코덱스를 선택적으로 쓰는 그림
0:38 커서 $20 플랜·Composer 할당, 왜 커서를 같이 쓰는지
1:22 윈도우 화면으로 실습, 프로필·플랜 설정
2:17 Antigravity 대안·커서 입지, 새 프로젝트 폴더 만들기(에이전트는 폴더 기준)
3:02 레이아웃·채팅 토글, 커서를 서버/허브로 쓰는 감각
3:38 터미널에서 클로드 실행·채팅과 병행, 동시에 여러 에이전트에 일 시키기
4:13 확장·컨테이너로 클로드가 커서 안에서 잘 돌게 세팅
4:47 윈도우는 팀워크 한계 → 스플릿 터미널로 클로드·코덱스 병행
5:20 터미널과 플랫폼 연계로 생산성, 터미널 익숙해지기 조언
6:18 코덱스 결제자는 창 두 개(코덱스+커서) 열어두고 쓰기
7:24 Antigravity 설치·맥 실리콘, 터미널만 띄워도 클로드 코드
8:04 Antigravity에서 폴더·터미널·팀워크·스플릿(클로드/코덱스)
9:17 에이전트는 바이브 코딩만이 아님, 실무 활용 소개
10:02 Gmail MCP·최근 메일 요약·답장 초안·임시보관함 워크플로
11:20 출간 원고 읽고 보도자료 작성까지 시키는 흐름
12:51 커서로 동일 업무·토큰 효율 시연
13:21 원고 파악 → 보도자료 양식에 맞춰 채우기(구글 드라이브 문서)
15:34 윈도우 인코딩·파싱 이슈 언급
16:06 원고 특징 살려 카드뉴스 제작 앱 만들기, Hero UI·트렌디한 색·폰트
17:33 플랜 모드로 계획 세우고 빌드 시키기
18:24 보도자료 초안 생성·양식 맞춤·검수는 사람이 한다는 전제
20:49 예전 하루~이틀 걸리던 초안이 짧은 시간으로 줄었다는 비교
22:17 촬영 내내 토큰 사용량 체크(1~2%대 등)
23:12 인코딩 문제로 작업 멈춤·맥이 더 매끄럽다는 코멘트
24:38 플랜 문서에 UI 미리보기 반영, 4:5 비율·색 팔레트 조정
27:44 계획이 잡힌 뒤 개발 진행, 카드뉴스 앱 완성까지
29:58 로컬 실행·편집기·슬라이드·보내기 확인
31:29 텍스트 레이아웃·폰트 수정 요청으로 다듬기
32:28 참고 이미지·캡처로 디자인 의도 전달(컨텍스트의 중요성)
35:12 윈도우↔맥 이미지 넣어 레이아웃·분위기 지시
37:31 완성 앱 시연·슬라이드 추가·보내기·ZIP 확인
39:21 카드뉴스 이미지 활용, 자동화까지 확장 가능
39:54 정리·터미널에서 클로드·드래그앤드롭·교차 검증
40:18 마무리·토큰 3~4% 수준, “비는 건 컨텍스트” 메시지

오늘 다룬 내용
- 커서를 허브로 두고 채팅·터미널·클로드 코드(·코덱스)를 한 화면에서 쓰는 세팅
- 윈도우 스플릿 터미널, Antigravity에서의 폴더·팀워크·멀티 에이전트 배치
- Gmail·구글 문서(드라이브) 연동으로 메일·보도자료 같은 실무를 에이전트에 위임하는 예
- 원고·플랜 문서 등 풍부한 컨텍스트와 플랜 모드로 카드뉴스 제작 웹앱까지 만드는 과정
- Hero UI·비율·색·레이아웃을 프롬프트와 참고 이미지로 반복 수정하는 법
- Composer 포함 커서 유료 플랜에서의 토큰 사용 체감과 실무 팁

#에이전트 #Cursor #ClaudeCode #Codex #Antigravity #바이브코딩 #MCP #구글워크스페이스 #Gmail #구글문서 #HeroUI #카드뉴스 #AI코딩 #개발환경 #프롬프트엔지니어링

“뭐가 짱이에요?”에 답 대신, 제가 실제로 쓰는 AI 도구를 화면 보며 언제 쓰는지 정리했습니다. 구독 권유 영상이 아니라, 20달러 플랜부터 시승해 보라는 실전 가이드예요. Anthropic(Claude·Claude Code), Cursor, Codex, Gemini, Notebook LM, Google AI Studio, Antigravity까지 한 번에 훑습니다.

타임라인
0:00 인트로 — 왜 이 영상을 찍었는지, 다룰 도구
1:07 본인 세팅 — Gemini·Claude·Cursor·Codex를 어떻게 쓰는지
1:59 만능 도구는 없다 — 추천만 믿지 말고 20달러로 시승하라
3:42 Anthropic 계열(Claude) — 채팅·리서치·웹 검색 중심
7:27 아티팩트 — 채팅 안에서 미니 앱·에디터 써보기
11:12 정리 — 리서치·아티팩트는 Claude, Codex(웹 프로젝트)는 Claude Code 부담일 때
12:23 Claude Code — 바이브 코딩, 스킬로 리서치 보완, 요금대별 쓰는 법
14:05 Gemini — 이미지(나노 바나나 등)·리서치·구글 워크스페이스 연동
15:29 Notebook LM — 소스 넣고 질답·셀프 스터디·마인드맵·보고서
19:00 Google AI Studio — API 키 구글이 관리, 바이브 코딩·나노 바나나 활용 예시
24:16 Stitch 연계 — 디자인 후 스튜디오로 넘겨 구현
26:35 Antigravity — 코드 에이전트 특성, 모델 업데이트 속도 이야기
29:34 Cursor — 마크다운·바이브 코딩, MCP·에이전트·Composer, 모델 선택
32:49 Codex — 서버 에이전트, OpenCode 연동·구독 토큰의 활용 폭
38:17 마무리 — 댓글로 주제 주시면 이어서 준비

오늘 다룬 내용
- “하나로 끝”보다 작업에 맞는 도구를 고르고, 월 20달러대로 먼저 타보라는 관점
- Claude는 리서치 파이프라인·아티팩트, Claude Code는 코드·스킬 확장으로 역할 분담
- Gemini는 이미지·리서치·문서화, Notebook LM은 내가 넣은 소스 안에서만 답하는 학습·연구
- Google AI Studio는 유료 API를 스튜디오 안에서 쉽게 쓰고, Stitch와 이어 쓰기 좋다는 점
- Cursor는 UI·에이전트·모델 선택의 편의, Codex는 OpenCode 등 외부 앱과 토큰 쓰는 방식이 넓다는 점
- Antigravity는 교차 검증용으로는 괜찮지만, 코드 모델 경쟁만 보고 메인으로 고르기엔 애매할 수 있다는 소견

#AI도구 #Claude #ClaudeCode #Cursor #Codex #Gemini #NotebookLM #GoogleAIStudio #Antigravity #바이브코딩 #MCP #Anthropic #구글AI #개발자 #생산성

하네스 엔지니어링, 어렵게 들리지만 결국은 에이전트가 엉뚱한 방향으로 달리지 않게, 잘 달릴 수 있도록 작업 환경을 제대로 세팅하는 이야기입니다. 말의 하네스 비유를 통해 왜 AI 에이전트에게도 "제약과 가이드"가 필요한지 쉽게 풀어보고, 컨텍스트 엔지니어링부터 MCP, 스킬, 그리고 앞으로의 작업 방식 변화까지 한 흐름으로 정리해드립니다.

타임라인
0:00 하네스 엔지니어링을 초보자 관점에서 쉽게 설명
0:38 하네스의 원래 의미와 말 비유
1:27 왜 고수보다 초보에게 하네스가 더 필요한가
2:34 에이전트 제어와 컨텍스트 개념으로 연결
3:20 컨텍스트 엔지니어링이 등장한 배경
4:49 MCP와 스킬이 나온 이유
6:22 정해진 도구와 매뉴얼이 에이전트를 어떻게 제어하는가
7:19 스킬이 많아질수록 생기는 새로운 문제
8:39 작업 목적에 맞게 필요한 스킬만 골라 쓰는 방식
9:35 하네스 엔지니어링을 작업 환경 세팅으로 이해하기
10:51 역할 분리와 제한된 작업 범위의 중요성
12:21 앞으로는 잘 세팅된 환경 자체가 자산이 될 가능성
13:17 하네스 엔지니어링 핵심 한 줄 정리
14:32 왜 앞으로 이 개념이 더 중요해질까

오늘 다룬 내용
- 하네스 엔지니어링은 에이전트가 목표한 방향으로 움직이도록 환경과 제약을 설계하는 개념
- 컨텍스트 엔지니어링만으로는 초보자에게 너무 어려울 수 있었던 이유
- MCP와 스킬이 에이전트의 행동 범위를 정리해주는 방식
- 스킬을 무조건 많이 붙이는 것이 아니라 목적에 맞게 선택하는 것이 중요하다는 점
- 앞으로는 프로젝트별로 세팅된 에이전트 작업 환경이 더 중요한 자산이 될 수 있다는 전망

#하네스엔지니어링 #AI에이전트 #컨텍스트엔지니어링 #MCP #AI스킬 #Codex #Cursor #생성형AI #AI자동화 #프롬프트엔지니어링 #AI활용 #개발생산성

바이브 코딩으로 화면이 저마다 다르게 나올 때, 일정하게 맞추는 방법을 다루는 실전 가이드입니다. Cursor(Composer)와 Codex에 같은 프롬프트를 넣어 커뮤니티 사이트를 만들고, 나란히 본 뒤, shadcn/ui 같은 기성 디자인 부품을 지정했을 때 결과가 어떻게 맞춰지는지 비교합니다. 이어서 tweak.design, Hero UI로 테마를 고르고 코드를 복사해 에이전트에 넘기는 흐름까지 정리합니다. 마지막에는 “바이브 코딩”에서 에이전트가 갈 방향을 내가 어떻게 잡을지(하네스 엔지니어링과 연결)까지 짚습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

[코드팩토리 라이브 영상][3.31.오후8시] : 링크 : https://www.youtube.com/watch?v=o3sUn06H4F4

타임라인
0:00 오늘의 주제: 일관된 디자인 만들기, Cursor vs Codex·Composer 비교 예고
0:46 디자인 전문가가 아닌 입문자 관점에서 설명한다는 전제
1:02 Cursor에서 터미널·채팅 열기, 에디터/에이전트별 화면 차이
1:38 커뮤니티 사이트 예시(국내·해외)와 실습 과제 소개
2:26 Git 워크트리로 “책상 두 개”에서 서로 다른 에이전트 작업 분리
3:32 워크트리를 가상의 작업 책상에 비유, 같은 폴더에서 전환하며 비교
5:30 Cursor 쪽 결과 확인 — “모닥불” 커뮤니티, 더미 데이터·디자인만
6:43 Codex 쪽 진행, 서버 실행·워크트리 전환으로 결과 보는 법
9:05 원샷 프롬프트만으로는 두 결과가 크게 다름 — “누가 더 잘한다”보다 통제 문제
9:52 shadcn/ui(샤드시엔): UI 부품 라이브러리로 화면을 맞추는 이유
11:01 워크트리 정리·채팅 클리어 후, “디자인은 반드시 shadcn으로” 조건 추가
14:24 shadcn 지정 후 — 구성품만으로 맞춰진 화면, 레이아웃은 달라도 톤은 통일
15:13 이케아 가구로 집 꾸미기에 비유 — 기성품 조립으로 일관성 유지
17:04 tweak.design: shadcn 기반 테마 선택·코드 복사로 스타일 적용
21:08 Hero UI: 오프닝 테마 빌더(색·폰트·라운딩 등), 코드 복사해 에이전트에 지시
24:00 테마를 미리 정해 두고 바이브 코딩하면 디자인 고민을 줄일 수 있음
25:04 하네스 엔지니어링과 연결 — 에이전트에게 선택권·제약을 주는 이야기
26:18 책으로 보충 학습 가능하다는 안내(강요 아님)
27:35 코드팩토리 채널 라이브 안내(3월 31일 8시 등)

오늘 다룬 내용
- 같은 프롬프트로 Cursor(Composer)와 Codex에 커뮤니티 사이트 UI만 생성시켜 비교
- Git 워크트리로 에이전트별 결과를 폴더 단위로 나눠 동시에 진행·실행
- 원샷만으로는 레이아웃·톤이 제각각 나올 수 있음을 실例로 확인
- shadcn/ui로 “기성 컴포넌트만 쓰라”고 지정해 디자인 언어 통일
- tweak.design, Hero UI로 테마·토큰을 고르고 코드를 복사해 프롬프트에 넣는 방식
- 반응형·다크 모드까지 라이브러리 기준으로 맞춰지는 점
- 궁극적으로 에이전트가 디자인을 마음대로 흔들지 않게 방향을 잡는 것과 연결

#바이브코딩 #VibeCoding #AI코딩 #Cursor #Codex #Composer #Git워크트리 #shadcn #shadcnui #UI라이브러리 #프론트엔드 #웹디자인 #일관된디자인 #디자인시스템 #커뮤니티사이트 #에이전트코딩 #프롬프트엔지니어링 #tweakdesign #HeroUI #초보개발 #코딩강의

에이전트에 입문하려는데 커서, 클로드 코드, 코덱스 중 뭘 써야 할지 고민되시나요? 20달러 요금제 기준으로 가성비와 학습 효율을 직접 비교해 봤습니다. 왜 입문자에게 커서를 추천하는지, 에이전트 MD와 스킬은 정말 클로드 코드 전용인지, 현실적인 차이를 정리했습니다.

타임라인
0:00 왜 이 영상을 만들었나
0:44 20달러 요금제에서 유일한 선택지, 커서
1:06 클로드 코드 프로 요금제의 한계 (5시간 세션 제한)
2:17 커서 20달러 플랜 실사용 테스트 결과
2:50 학습용으로 커서가 최적인 이유
3:48 커서로 클로드 코드에서 하는 걸 다 할 수 있을까?
5:04 에이전트 MD와 스킬이란 무엇인가
6:29 에이전트 MD vs 스킬, 읽는 방식의 차이
9:40 커서의 유일한 단점과 다중 모델 지원
11:16 IDE 환경의 장점 — 문서 편집과 파일 탐색
12:55 입문자 관점에서 커서 책을 쓴 이유
14:38 입문자를 위한 최종 추천 정리

오늘 다룬 내용
- 클로드 코드 프로 요금제는 5시간 세션마다 토큰이 극소량 제공되어 실질적인 코딩 작업이 어렵다
- 커서 20달러 플랜은 1시간 작업에 약 12% 소진, 보수적으로 50시간 이상 사용 가능
- 에이전트 MD, 스킬, MCP 서버 등 에이전트 시스템은 커서에서도 동일하게 사용할 수 있다
- 스킬은 프런트매터만 먼저 읽고 필요한 스킬만 선택적으로 로드하는 구조
- 커서는 GPT, 소넷 등 다양한 모델을 자유롭게 선택할 수 있지만 클로드 코드는 자사 모델만 지원
- 커서의 IDE 환경은 문서 작업과 파일 편집을 동시에 할 수 있어 입문자에게 유리하다
- 커서로 충분히 익숙해진 뒤 클로드 코드나 코덱스로 넘어가는 것을 추천

#커서 #Cursor #클로드코드 #ClaudeCode #에이전트 #AI에이전트 #바이브코딩 #에이전트입문 #커서추천 #20달러요금제 #에이전트MD #스킬 #프롬프트엔지니어링 #코딩에이전트 #AI코딩 #입문자가이드 #커서vs클로드 #코덱스 #IDE #AI도구비교

하네스 엔지니어링, 개념은 알겠는데 도대체 어떻게 적용하는 걸까요? 이 영상은 완전 입문자를 위해 커서(Cursor)와 클로드 코드(Claude Code)를 함께 사용하면서 에이전트 MD와 스킬을 실습으로 보여드립니다. 에이전트는 바이브 코딩 전용이 아니라 여러분의 업무 전반에 쓸 수 있는 도구이고, 그 방향성을 잡아주는 것이 바로 하네스 엔지니어링입니다.

타임라인
0:00 인트로 – 완전 입문자 대상 하네스 엔지니어링 실습
0:28 에이전트는 코딩 전용이 아니다
1:00 하네스 엔지니어링 5대 요소 소개
2:28 에이전트 MD란 무엇인가
6:51 실습: 커서 Rules로 응답 언어 바꿔보기
9:04 폴더별 로컬 에이전트 MD 적용하기
11:45 클로드 코드에서 에이전트 MD(CLAUDE.md) 설정하기
13:36 에이전트 MD의 한계와 범용적 사용 원칙
15:17 스킬(Skills)이란 무엇인가
16:16 프론트 매터와 토큰 절약 원리
17:50 유튜브 소개글 스킬 활용 사례
20:32 스킬 중복 문제와 관리의 중요성
24:34 심볼릭 링크로 커서·클로드 코드 스킬 공유하기
30:50 입문자를 위한 정리와 마무리

오늘 다룬 내용
- 하네스 엔지니어링 5대 요소(에이전트 MD, 스킬스, MCP, 서버 에이전트, 훅스) 개요
- 에이전트 MD(Rules / CLAUDE.md)의 역할: 채팅 시작 시 컨텍스트에 로드되는 지침 문서
- 전역(Global)과 로컬(Local) 에이전트 MD의 차이와 실전 활용법
- 스킬의 구조: 프론트 매터를 통한 효율적 탐색과 토큰 절약
- 스킬 중복 시 에이전트가 랜덤하게 읽는 문제와 관리 방법
- 심볼릭 링크를 활용해 커서와 클로드 코드에서 동일 스킬 공유하기
- 입문자는 에이전트 MD와 스킬 두 가지만 잘 써도 업무에 충분히 적용 가능

#하네스엔지니어링 #에이전트MD #커서 #클로드코드 #Cursor #ClaudeCode #CLAUDEMD #Rules #스킬 #Skills #프롬프트엔지니어링 #AI에이전트 #바이브코딩 #AI도구 #업무자동화 #에이전트활용 #프론트매터 #심볼릭링크 #AI실습 #입문자가이드

하네스 엔지니어링, 개념은 알겠는데 도대체 어떻게 적용하는 걸까요? 이 영상은 완전 입문자를 위해 커서(Cursor)와 클로드 코드(Claude Code)를 함께 사용하면서 에이전트 MD와 스킬을 실습으로 보여드립니다. 에이전트는 바이브 코딩 전용이 아니라 여러분의 업무 전반에 쓸 수 있는 도구이고, 그 방향성을 잡아주는 것이 바로 하네스 엔지니어링입니다.

타임라인
0:00 인트로 – 완전 입문자 대상 하네스 엔지니어링 실습
0:28 에이전트는 코딩 전용이 아니다
1:00 하네스 엔지니어링 5대 요소 소개
2:28 에이전트 MD란 무엇인가
6:51 실습: 커서 Rules로 응답 언어 바꿔보기
9:04 폴더별 로컬 에이전트 MD 적용하기
11:45 클로드 코드에서 에이전트 MD(CLAUDE.md) 설정하기
13:36 에이전트 MD의 한계와 범용적 사용 원칙
15:17 스킬(Skills)이란 무엇인가
16:16 프론트 매터와 토큰 절약 원리
17:50 유튜브 소개글 스킬 활용 사례
20:32 스킬 중복 문제와 관리의 중요성
24:34 심볼릭 링크로 커서·클로드 코드 스킬 공유하기
30:50 입문자를 위한 정리와 마무리

오늘 다룬 내용
- 하네스 엔지니어링 5대 요소(에이전트 MD, 스킬스, MCP, 서버 에이전트, 훅스) 개요
- 에이전트 MD(Rules / CLAUDE.md)의 역할: 채팅 시작 시 컨텍스트에 로드되는 지침 문서
- 전역(Global)과 로컬(Local) 에이전트 MD의 차이와 실전 활용법
- 스킬의 구조: 프론트 매터를 통한 효율적 탐색과 토큰 절약
- 스킬 중복 시 에이전트가 랜덤하게 읽는 문제와 관리 방법
- 심볼릭 링크를 활용해 커서와 클로드 코드에서 동일 스킬 공유하기
- 입문자는 에이전트 MD와 스킬 두 가지만 잘 써도 업무에 충분히 적용 가능

#하네스엔지니어링 #에이전트MD #커서 #클로드코드 #Cursor #ClaudeCode #CLAUDEMD #Rules #스킬 #Skills #프롬프트엔지니어링 #AI에이전트 #바이브코딩 #AI도구 #업무자동화 #에이전트활용 #프론트매터 #심볼릭링크 #AI실습 #입문자가이드

컴공 졸업 후 취업에 실패하고, IT 출판사 편집자로 우연히 들어간 한 사람이 어쩌다 바이브 코딩의 세계에 빠지게 됐는지 솔직하게 풀어봤습니다. 600권의 도서 데이터를 수기로 입력하던 고통에서 시작된 첫 번째 문제 해결, 그리고 GPT와 클로드 코드를 만나 2년짜리 프로젝트를 하루 만에 끝낸 이야기까지. 도구보다 중요한 건 해결하고 싶은 '내 문제'가 있느냐는 것, 그 이야기를 나눠봅니다.

타임라인
0:00 영상 소개 – 코드 팩토리 라이브 방송에서 영감을 받다
2:32 자기소개 – 건국대 컴공 졸업, 그리고 취업 실패
5:35 IT 출판사 입사 – 우연한 기회로 편집 기획자의 길로
6:45 실패했다고 생각한 2년, 그래도 책 만들기가 좋았다
8:25 600권 수기 입력 – 첫 번째 진짜 문제 해결의 시작
11:45 프로그래밍으로 문제를 해결한 첫 경험이 바꿔놓은 것
13:04 GPT 등장, 의심에서 가능성으로
16:24 구글 앱스 스크립트로 업무 자동화에 눈뜨다
19:02 "무슨 도구를 써야 하나요?" – 사실 중요하지 않은 질문
22:19 클로드 코드를 만나고 폭발적으로 성장하다
30:47 2년짜리 프로젝트를 하루 만에 해결한 순간
32:55 정보를 얻는 법 – 쓰레드 커뮤니티, AI 대화, NotebookLM
39:15 탑다운 학습법 – 부딪치고 공부하고 다시 해결하기
42:32 마무리 – 내 문제부터 시작하세요

오늘 다룬 내용
- 컴공 졸업 후 취업 실패, IT 출판사 편집자로 커리어를 시작한 과정
- 600권 도서 데이터 수기 입력 문제를 파이썬으로 해결한 첫 번째 바이브 코딩 경험
- GPT 등장 이후 의심을 거두고 문제 해결 도구로 받아들이게 된 계기
- 클로드 코드로 2년짜리 프로젝트를 하루 만에 재구축한 경험
- 도구보다 해결하고 싶은 문제가 먼저라는 메시지
- 쓰레드 커뮤니티, AI 대화, NotebookLM을 활용한 학습 방법
- 탑다운 방식으로 부딪치며 공부하는 것이 효과적인 이유

#바이브코딩 #에이전트시대 #클로드코드 #GPT #AI코딩 #문제해결 #비전공개발 #커서 #ClaudeCode #구글앱스스크립트 #출판사 #IT출판 #파이썬 #프로그래밍 #코딩공부 #바이브코딩입문 #AI학습 #골든래빗 #코드팩토리 #개발자 #자동화

하네스 엔지니어링, 개발자만의 전유물이 아닙니다. 이번 영상에서는 영업·마케팅 엑셀 데이터를 처리하는 실무 시나리오를 통해 AGENTS.md, 스킬, 훅스, MCP 네 가지 도구를 언제·어떻게 쓰는지 직접 보여드립니다. 에이전트가 데이터 변환부터 품질 점검, 리포트 생성, 대시보드, 경영진 메일링까지 일관되게 수행하는 전 과정을 확인해 보세요.

하네스 실습 프로젝트 : https://github.com/Canine89/excel-harness 에서 [Code ➝ Download] 누르세요.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 입문자를 위한 하네스 엔지니어링 실습 소개
0:44 하네스 엔지니어링은 개발 전용이 아니다
1:18 오늘의 실습 과제: 엑셀 실무 작업
2:00 하네스 5대 요소 중 오늘 쓸 네 가지
2:36 AGENTS.md — 에이전트의 큰 방향키
3:00 스킬 — 단계별 업무를 구체적으로 지시하기
4:05 훅스 — 에이전트 동작을 강력하게 강제하기
5:04 엑셀 익스퍼트 하네스 전체 구조 살펴보기
8:29 커서에서 에이전트가 자동으로 작업을 인식하는 모습
10:52 일부러 넣은 이상치, 에이전트가 잡아낼까?
13:14 전수검사를 강제하는 훅스 설정법
16:57 비개발자도 하네스를 걸 수 있다
19:25 전체 워크플로우 실행 및 산출물 생성
25:03 산출물 점검: 세일즈 서머리·수익성·캠페인 리포트
28:09 경영진 보고용 세일즈 대시보드
29:08 이슈 리포트와 경영진 메일링 템플릿
30:15 MCP로 지메일 연결해서 보고 메일 발송
33:31 프로젝트 템플릿 공유 안내 및 마무리

오늘 다룬 내용
- AGENTS.md로 에이전트의 전체 작업 방향을 설정하는 방법
- 스킬을 활용해 세일즈 서머리, 수익성 분석, 캠페인 리포트 등 단계별 업무를 지시하는 구조
- 훅스로 전수검사를 강제하여 에이전트가 이상치를 빠뜨리지 않게 만드는 실전 팁
- 엑셀 데이터를 CSV로 변환 → 품질 점검 → 리포트·대시보드 생성 → 메일링까지 이어지는 일관된 워크플로우
- 커서와 클로드 코드 양쪽에서 동일한 하네스가 동작하는 모습 비교
- MCP를 통해 지메일과 연결하여 경영진 보고 메일을 자동 발송하는 과정

#하네스엔지니어링 #AI에이전트 #커서AI #클로드코드 #엑셀자동화 #AGENTS #스킬 #훅스 #MCP #AI실무 #엑셀분석 #데이터분석 #비개발자AI #프롬프트엔지니어링 #AI업무자동화 #세일즈리포트 #대시보드 #지메일자동화 #AI활용법 #생산성

카카오톡 단톡방에서 나는 어떤 사람일까? 대화 내용만으로 나의 페르소나를 AI가 분석해줍니다. 카톡 대화를 내보내고 Claude Code에 넣으면, 커뮤니케이션 스타일부터 관심사 변화, 시간대별 활동 패턴까지 6가지 관점으로 정리된 나만의 페르소나가 만들어집니다. 대시보드 시각화까지 가능한 이 프로젝트, 직접 써보면 생각보다 꽤 재밌습니다.

카톡 단톡방 페르소나 분석기 : https://github.com/Canine89/persona-builder

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 카톡 페르소나 빌더 소개
0:21 카카오톡 대화 내보내기 기능 설명
0:37 페르소나 빌더 프로젝트 개요
0:48 사용법 안내 — 다운로드 후 Claude Code에서 실행
1:15 상위 20명 유저 페르소나 분석 데모
1:46 페르소나 결과 살펴보기 — 성격 분석처럼 나오는 결과물
1:55 설치 및 실행 방법 상세 안내
2:54 카카오톡에서 대화 내보내는 방법
3:26 분석 과정 — 메시지 정렬, 패턴 추출
4:07 페르소나 파일 생성 결과 확인
4:50 주제별 관심사·시간대 변화 등 추가 분석
5:30 대시보드 시각화로 결과를 보기 좋게 변환
6:27 마크다운 대시보드 변환 과정
6:59 완성된 대시보드 미리보기
7:23 서비스화 시 주의사항 및 마무리

오늘 다룬 내용
- 카카오톡 대화를 기반으로 유저 페르소나를 자동 분석하는 프로젝트 소개
- Claude Code에서 페르소나 빌더를 실행하는 방법
- 카카오톡 채팅 내보내기 → 프로젝트 폴더에 넣기 → 분석 실행까지의 전체 흐름
- 커뮤니케이션 스타일, 대화 패턴, 관심사 변화 등 6가지 관점의 페르소나 분석
- 텍스트 결과를 대시보드 형태로 시각화하는 방법
- 개인 재미용으로만 사용하고 서비스화·상업화 시 개인정보 이슈 주의

#카카오톡 #페르소나 #페르소나분석 #카톡분석 #클로드코드 #ClaudeCode #AI에이전트 #대화분석 #성격분석 #단톡방 #카톡페르소나 #AI활용 #프로젝트공유 #대시보드 #데이터분석 #파이썬 #Python #AI프로젝트 #카톡대화 #재미있는AI

터미널 앱 씨먹스 설치해서 직접 써봤습니다. 워크스페이스 분할, 알림, 가속 렌더링 같은 기본 기능도 훌륭하지만, 진짜 놀라운 건 내장 브라우저였습니다. Claude Code의 browser 명령어와 결합하면 네이버 블로그 탐색, 알리익스프레스 데이터 추출, 구글 워크스페이스 연동까지 터미널 하나에서 가능합니다. 유일한 단점 하나도 솔직하게 짚어봤습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 씨먹스 설치 후 첫인상과 결론 미리보기
0:41 씨먹스 설치 방법 (Mac 전용)
1:11 주요 기능 6가지 개요
1:48 알람링 — 작업 완료 알림 기능
2:15 내장 브라우저 소개
2:57 가속 렌더링 — 텍스트 깨짐 방지
3:41 설치 후 기본 화면과 인터페이스
4:04 워크스페이스 개념과 사용법
5:09 분할 패널로 코덱스 + 클로드 코드 동시 작업
6:36 씨먹스의 유일한 단점 — 폴더 구조 미지원
7:42 내장 브라우저의 숨겨진 장점
8:37 browser 명령어로 브라우저 직접 조작하기
10:46 네이버 블로그 탐색 데모
12:30 알리익스프레스 상품 데이터 크롤링 데모
14:46 구글 워크스페이스 연동 — 지메일 비서 활용
17:00 정리 및 마무리

오늘 다룬 내용
- 씨먹스는 Mac 전용 네이티브 터미널 앱으로 워크스페이스 단위 멀티태스킹에 최적화
- 내장 브라우저 + Claude Code의 browser 명령어 조합이 크롬 browser-use보다 우수
- 네이버·알리익스프레스 등 봇 차단 사이트에서도 브라우징과 데이터 추출 가능
- 구글 워크스페이스 스킬 연동으로 지메일 확인·드라이브 작업까지 터미널에서 처리
- 유일한 단점은 사이드바에서 폴더 구조를 볼 수 없어 터미널을 항상 병행해야 하는 점
- 드래그 앤 드롭 파일 관리가 필요한 작업에는 부적합

#씨먹스 #Cmux #터미널 #Mac터미널 #개발도구 #ClaudeCode #클로드코드 #코덱스 #브라우저자동화 #내장브라우저 #워크스페이스 #멀티태스킹 #크롤링 #데이터추출 #구글워크스페이스 #지메일 #바이브코딩 #생산성도구 #개발자도구 #AI코딩

클로드 데스크톱, 코워크, 클로드 코드, 익스텐션… Anthropic이 내놓는 도구가 계속 늘어나면서 "이게 다 뭐가 다른 거지?"라는 질문도 함께 늘고 있습니다. 이 영상에서는 에이전트의 본질인 모델과 컨텍스트 윈도우부터 시작해서, 각 도구가 그 위에 어떤 포장지를 씌운 것인지 하나씩 뜯어봅니다. 앞으로 어떤 새 상품이 나오더라도 이 핵심만 기억하면 흔들리지 않을 겁니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 클로드 프렌즈, 이 영상을 만든 이유
1:22 모델은 에이전트의 엔진이다
2:19 보완재 총정리 — 스킬·커넥터·웹 검색·연구
3:27 컨텍스트 윈도우를 깔끔하게 관리해야 하는 이유
6:54 UI는 포장지일 뿐, 본질에 집중하자
8:27 클로드 데스크톱 — 웹 검색·연구·아티팩트
13:46 요금제 선택 가이드 (20달러 vs 100달러)
18:49 코워크(cowork) — 로컬 폴더 작업 입문용
21:39 클로드 코드 — 모든 기능을 모은 핵심 서비스
22:45 디스패치와 채널스 — 밖에서 무전기처럼 쓰기
27:12 익스텐션 — VS Code·Cursor에서 클로드 코드 쓰기
33:15 마무리

오늘 다룬 내용
- 모델은 에이전트의 엔진이며, 학습 데이터 안에서 답변을 생성한다
- 스킬·커넥터·웹 검색·연구는 모델이 모르는 것을 보완하는 외부 도구다
- 컨텍스트 윈도우는 대화의 뇌 용량이므로 주제를 섞지 말고 깔끔하게 관리해야 한다
- 클로드 데스크톱의 연구 파이프라인은 수백 개의 공신력 있는 출처를 조사해 풍부한 답변을 만든다
- 코워크(Cowork)는 로컬 폴더에 접근할 수 있지만 기능이 제한적인 반쪽짜리 도구다
- 클로드 코드는 Anthropic의 핵심 서비스로 대부분의 기능이 집약되어 있다
- 익스텐션을 통해 VS Code·Cursor에서도 클로드 코드를 그대로 사용할 수 있다

#클로드 #클로드코드 #클로드데스크톱 #ClaudeCode #Claude #Anthropic #에이전트 #AI #인공지능 #컨텍스트윈도우 #클로드프렌즈 #코워크 #cowork #익스텐션 #커넥터 #스킬 #웹검색 #아티팩트 #AI도구 #바이브코딩

터미널이 좀 밋밋하다고 느끼셨다면, Oh My Zsh 하나로 분위기가 확 달라집니다. 테마 변경부터 프롬프트 정리, 색상 커스터마이징까지 AI 에이전트에게 말로 시키면서 세팅하는 과정을 보여드립니다. 복잡한 명령어 외울 필요 없이, 에이전트와 대화하면서 내 터미널을 꾸며보세요.

추천 프롬프트 :
- oh-my-zsh를 설치해줘.
- 테마를 agnoster로 바꿔줘.
- 내 프로필을 prompt_segment black white "%(!.%{%F{yellow}%}.)$USER로 바꿔줘.
- 터미널에 보이는 프로필 외 경로 색상을 바꾸고 싶어.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 내 터미널은 왜 남들과 다르게 생겼을까?
0:29 Oh My Zsh란 무엇인가
1:01 셸(Zsh)과 터미널의 관계
1:30 Cursor 에이전트로 세팅 시작하기
1:58 에이전트에게 Zsh 테마 변경 요청
2:54 테마 바꿔보기 (robbyrussell, agnoster 등)
3:46 프롬프트 프로필 정리 — 호스트명 제거하기
5:37 계정 이름만 깔끔하게 남기기
6:04 폰트 설정 확인
6:27 색상 커스터마이징 (배경·글자색 변경)
7:17 Hex 코드로 원하는 색 정확히 지정하기
8:17 정리 및 마무리
8:53 에이전트 활용 팁 — 명령어 외울 필요 없다

오늘 다룬 내용
- Oh My Zsh 설치 후 터미널 테마를 변경하는 방법
- AI 에이전트(Cursor·Claude Code)에게 말로 시켜서 세팅하는 과정
- 프롬프트에서 호스트명을 제거하고 계정명만 표시하는 프로필 설정
- 색상 구성을 텍스트가 아닌 Hex 코드로 정확하게 지정하는 팁
- 테마·색상·폰트 설정값을 에이전트와 대화하며 조정하는 워크플로우

#OhMyZsh #터미널꾸미기 #Zsh테마 #맥터미널 #터미널커스터마이징 #agnoster #개발자터미널 #개발환경세팅 #Cursor #ClaudeCode #AI에이전트 #프롬프트설정 #개발자도구 #맥북세팅 #터미널테마 #개발생산성 #코딩환경 #Zsh설정 #터미널색상 #개발팁

안드레 카르파시가 제안한 LLM Wiki, 파편화된 지식을 AI 에이전트가 정원사처럼 가꿔주는 시스템입니다. 옵시디언 볼트 위에서 Raw → Wiki → Query 흐름으로 나만의 지식 베이스를 구축하는 과정을 처음부터 끝까지 실습합니다. 도구보다 중요한 건 결국 쓰는 사람의 도메인 지식이라는 점, 꼭 기억하세요.

링크 : https://gist.github.com/karpat....hy/442a6bf555914893e

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 인사 및 LLM Wiki에 관심을 갖게 된 이유
1:06 오늘 영상의 구성과 사전 안내
1:53 10시간 써보고 느낀 점, 도구보다 지식이 중요하다
3:13 LLM Wiki 핵심 개념 — 컨텍스트가 날아가는 문제 해결
4:05 정원사 비유로 이해하는 LLM Wiki 작동 원리
4:57 구조(Raw, Wiki, Schema)와 명령(Ingest, Query, Lint) 정리
8:31 Ingest·Query·Lint 각 명령의 역할 상세 설명
10:18 실습 시작 — 옵시디언 설치부터 볼트 생성까지
16:30 터미널 플러그인 설치 및 에이전트 실행 세팅
18:22 카르파시 원문 문서로 위키 스캐폴딩 구축하기
20:46 Ingest·Query·Lint를 스킬화해서 재사용성 높이기
23:10 자동차 지식을 Raw에 모으고 Ingest 실행하기
31:44 위키 구조 확인 — 엔티티·컨셉·소스 분류 결과
33:24 옵시디언 그래프 뷰로 지식 연결 시각화하기
35:01 Query로 내가 쌓은 지식 안에서 답변 받기
35:33 Lint로 위키 상태 점검 및 가드닝 진행
37:14 실전 적용 — 블로그 웹 인터랙션 개선 사례
39:55 마무리 및 입문자를 위한 조언

오늘 다룬 내용
- 안드레 카르파시의 LLM Wiki 개념과 정원사 비유
- 구조 세 가지(Raw, Wiki, Schema)와 명령 세 가지(Ingest, Query, Lint)
- 옵시디언 볼트 기반 위키 시스템 처음부터 세팅하는 방법
- Codex 에이전트로 스캐폴딩 구축 및 스킬화 과정
- 파편화된 지식을 모아서 위키화하고 쿼리하는 실습 흐름
- 관심사별 볼트 분리가 쿼리 품질에 미치는 영향
- 쌓은 지식 체계를 실제 블로그 개선에 적용한 사례

#LLMWiki #안드레카르파시 #옵시디언 #Obsidian #지식관리 #AI에이전트 #Codex #개인위키 #지식베이스 #PKM #RAG #위키시스템 #AITools #가드닝 #디지털정원 #프롬프트엔지니어링 #생산성 #AI활용 #클로드코드 #코딩

AI 에이전트에게 "이런 느낌으로 만들어줘"라고 말할 수 있는 설계도가 있다면 어떨까요? DESIGN.md는 에이전트가 읽고 따를 수 있는 텍스트 기반 디자인 시스템 문서입니다. 구글 Stitch에서 출발한 이 개념을 Cursor, Claude Code, Codex 세 가지 도구에서 직접 적용해 노트 트래킹 앱을 만들어보며, 디자인 일관성을 어떻게 확보할 수 있는지 보여드립니다.

AWESOME DESIGN.md : https://github.com/VoltAgent/a....wesome-design-md/tre

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 DESIGN.md 소개와 영상 배경
0:52 DESIGN.md란 무엇인가
1:18 구글 Stitch에서 시작된 디자인 문서의 흐름
2:24 Stitch의 한계와 DESIGN.md 등장 배경
3:21 awesome-design-md 프리셋 저장소 소개
5:11 Cursor에서 DESIGN.md 적용하기
6:50 SpaceX 디자인으로 노트 트래킹 앱 제작
8:41 Claude Code에서 DESIGN.md 사용법
11:13 Cursor 결과물 확인 — SpaceX 스타일 앱
11:50 Claude Code에서 Miro 디자인 적용
14:21 Codex에서 DESIGN.md 사용법과 Superhuman 디자인 적용
19:33 세 도구 결과물 비교 및 오류 수정
22:29 마무리

오늘 다룬 내용
- DESIGN.md의 개념: 사람과 에이전트 모두 읽고 수정할 수 있는 텍스트 디자인 시스템 문서
- 구글 Stitch에서 DESIGN.md로 이어진 발전 과정
- awesome-design-md에서 SpaceX, Miro, Superhuman 등 프리셋을 가져와 바로 사용하는 방법
- Cursor, Claude Code, Codex 세 도구에서 DESIGN.md를 적용해 React Native 노트 앱을 만드는 전체 과정
- 디자인 프리셋만 바꿔도 앱의 색상·타이포그래피·레이아웃이 일관되게 변하는 것을 실제 결과물로 확인
- Plan 모드로 설계를 먼저 확인한 뒤 구현으로 넘어가는 워크플로우

#DESIGN.md #디자인엠디 #바이브코딩 #Cursor #커서 #ClaudeCode #클로드코드 #Codex #코덱스 #AI디자인 #디자인시스템 #ReactNative #리액트네이티브 #앱개발 #노코드 #AI개발 #프롬프트엔지니어링 #awesome-design-md #구글Stitch #에이전트코딩

커서(Cursor)로 글을 쓰고, 커밋·푸시까지 한 번에 — 마크다운 기반 정적 블로그를 직접 만들어 봅니다. 에이전트가 글을 대신 써주는 시대, 그래도 내가 한 번은 읽고 다듬어야 진짜 내 글이 됩니다. 오늘 영상에서는 Next.js 정적 블로그를 처음부터 세팅하고, GitHub + Vercel로 자동 배포하는 전 과정을 실습합니다. 그리고 커서 본사에서 받아온 20달러 쿠폰 30장, 댓글 이벤트로 드립니다!

🔥 이벤트 참여 방법 🔥
댓글로 커서를 꼭 사용하고 싶은 사연을 남겨주시면 대댓글로 알림을 보내드리며, 쿠폰 수령 방식을 알려드립니다. 영상 찍을 때는 없다고 생각했는데 인증 방식이 있었네요. 이벤트 당첨자 발표는 4월 18일 토요일에 진행하겠습니다!

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 커서 20달러 쿠폰 이벤트 안내
2:16 오늘 주제 — 자동 관리 블로그 만들기
4:43 왜 커서를 선호하는가 & 휴먼 터치 이야기
7:02 정적 블로그 생성 툴이란?
8:06 에이전트로 글 작성·발행하는 데모
11:41 전체 구조: 로컬 → GitHub → Vercel
13:07 실습 시작 — 프로젝트 생성과 프롬프트 작성
16:41 Next.js 기반 블로그 빌드 과정
18:09 네비게이션바·소개 페이지 등 추가 기능
20:40 마크다운 렌더링과 디자인 커스터마이징
23:02 로컬 테스트 및 결과 확인
24:33 GitHub 업로드 & Vercel 배포
26:39 쿠폰 이벤트 참여 방법 정리

오늘 다룬 내용
- Next.js 기반 정적 블로그 생성 툴의 개념과 장점
- 마크다운 + 프런트매터로 글을 관리하는 구조
- 커서 에이전트를 활용한 글 작성·수정·발행 워크플로
- 디자인 레퍼런스를 프롬프트에 반영하는 방법
- GitHub 푸시만으로 Vercel 자동 배포가 되는 세팅
- 에이전트 시대에도 휴먼 터치가 중요한 이유
- 블로그를 포트폴리오·지식 아카이브로 활용하는 팁

#커서 #Cursor #정적블로그 #블로그만들기 #NextJS #마크다운 #Vercel #GitHub #AI블로그 #에이전트 #개발블로그 #포트폴리오 #블로그자동화 #프롬프트엔지니어링 #휴먼터치 #개발자도구 #코딩 #웹개발 #블로그배포 #스터디블로그

클로드 코드 안에서 코덱스를 바로 불러 쓸 수 있다면? 경쟁사 AI끼리 협업시키는 플러그인이 나왔습니다. 설치부터 실전 사용까지, 클로드 코드 × 코덱스 퓨전 플러그인을 직접 세팅하고 리뷰 기능과 작업 위임을 테스트해 봤습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 클로드 코드 × 코덱스 퓨전 플러그인 소개
1:01 클로드 코드 플러그인이란? (에이전트·스킬·MCP·훅의 묶음)
2:52 플러그인 핵심 기능 세 가지: 리뷰, 직접 작업, 상태 확인
4:24 슬래시 명령어로 코덱스 사용하기
5:53 공식 GitHub 페이지 살펴보기 (스타·포크 읽는 법)
7:04 설치 시작 및 세팅 과정
8:11 에이전트 시대의 학습법: 모르면 물어보면 된다
9:17 플러그인 설치 완료까지
13:25 코덱스 레스큐로 가족 앨범 앱 직접 작업 시키기
15:38 백그라운드 작업 확인 (코덱스 스테이터스)
19:13 전략 변경: 클로드 코드 중심으로 작업 전환
21:22 가족 앨범 앱 완성 및 에뮬레이터 테스트
22:13 코덱스 어드버서리얼 리뷰 실행
24:06 추천 워크플로우 정리: 클로드 코드 작업 → 코덱스 리뷰 → 반복
25:17 마무리 및 다음 영상(훅) 예고

오늘 다룬 내용
- 클로드 코드에서 코덱스를 플러그인으로 설치하고 연동하는 방법
- /codex review, /codex adversarial review, /codex rescue 등 슬래시 명령어 사용법
- 코덱스 레스큐로 처음부터 작업을 맡기면 속도가 느린 현실적 한계
- 클로드 코드로 작업 후 코덱스에 리뷰를 맡기는 추천 워크플로우
- 리액트 네이티브 가족 앨범 앱을 에어비앤비 디자인 가이드로 만드는 데모
- GitHub에서 좋은 오픈소스 판별하는 법 (스타, 포크의 의미)

#클로드코드 #코덱스 #ClaudeCode #Codex #OpenAI #Anthropic #AI코딩 #바이브코딩 #플러그인 #에이전트 #코드리뷰 #리액트네이티브 #AI개발 #코딩자동화 #개발자도구 #AI협업 #코딩도구 #프롬프트엔지니어링

안드레이 카파시의 LLM Wiki는 강력하지만, 모든 작업을 에이전트가 처리하다 보니 토큰 소모가 너무 큽니다. Graphify는 이 문제를 해결하기 위해 등장한 도구로, 기계적 전처리로 지식의 뼈대를 먼저 추출한 뒤 에이전트에게 넘기는 하이브리드 전략을 사용합니다. 오늘 영상에서는 Graphify의 개념부터 설치, 실습, 그래프 시각화, 질의까지 전 과정을 함께 진행합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 Graphify 소개 및 영상 배경
0:36 LLM Wiki 동작 방식 복습 (자료 인제스트 → 위키화 → 쿼리)
1:48 LLM Wiki의 단점: 토큰 낭비 문제
2:20 Graphify 등장 — 기계적 전처리와 하이브리드 전략
3:24 병렬 작업 분석과 전체 흐름 정리
3:56 설치 준비: 파이썬 패키지와 가상환경
5:12 실습 단계 정리 (uv 설치 → 자료 폴더 → 스킬 실행 → 인스톨)
5:53 Codex에서 Graphify 세팅 시작
8:40 프로젝트 폴더 세팅 및 Graphify 실행
10:57 처리 시간과 토큰 절감 결과 확인
12:29 그래프 시각화(HTML) 살펴보기
13:11 지식 베이스 기반 질의 테스트
14:25 Graphify vs LLM Wiki 정리 및 마무리

오늘 다룬 내용
- LLM Wiki(안드레이 카파시)의 토큰 과다 사용 문제
- Graphify의 하이브리드 전략: 기계적 전처리로 뼈대 추출 후 에이전트 처리
- uv 패키지 관리자와 가상환경을 이용한 Graphify 설치 과정
- 자료 폴더에 지식을 담고 $graphify 명령으로 그래프 구축 실습
- graphify codex install로 Codex 내 지식 기반 답변 세팅
- 그래프 시각화(HTML)와 리포트·JSON 산출물 확인
- 토큰 절감 효과 및 저렴한 요금제 사용자에게 유용한 점
- Graphify는 LLM Wiki와 별도 도구로 독립 사용 가능

#Graphify #그래피파이 #LLMWiki #안드레이카파시 #지식관리 #지식베이스 #토큰절감 #AI도구 #Codex #코덱스 #에이전트 #파이썬 #가상환경 #uv #그래프시각화 #하이브리드전략 #RAG #개인위키 #AI활용 #개발자도구 #지식그래프

마크다운만 작성하면 슬라이드가 만들어지는 시스템을 만들었습니다. Remotion 기반으로 6가지 슬라이드 타입, 4가지 기본 테마, 커스텀 디자인 테마까지 지원하며, 에이전트(Cursor)가 마크다운 작성부터 렌더링까지 도와줍니다. 발표용 프레젠터, 가로형 영상, 세로형 쇼츠까지 한 프로젝트에서 모두 해결할 수 있습니다.

GitHub : https://github.com/Canine89/canine-remotion-slide
사용하시면 ⭐ Star 한 번 부탁드립니다! 변형·재배포 시 출처(원본 저장소 링크)를 꼭 남겨주세요.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 슬라이드 제작의 고통, Remotion으로 해결하기
0:17 6가지 슬라이드 타입 소개
1:10 프로젝트 구조 설명 시작
1:49 assets 폴더와 markdowns 폴더 핵심 구조
2:45 스킬 시스템으로 마크다운 자동 작성하기
3:58 슬라이드 타입별 사용법 (title, bullets, tags, image, split, evolution-flow)
4:50 새 슬라이드 주제 만들기 실습
5:30 기본 테마 4종 (dark, blue, orange, yellow) 적용
7:15 이미지 추가와 서버 재시작 팁
9:24 커스텀 디자인 테마(DESIGN.md) 적용하기
12:34 evolution-flow 애니메이션 시간 설정 주의사항
13:09 Remotion Studio에서 영상 렌더링 & 쇼츠 지원
15:17 프레젠터 단축키(좌우 방향키, Esc 전체화면)와 마무리

오늘 다룬 내용
- 마크다운 하나로 슬라이드·영상·쇼츠를 만드는 Remotion 프로젝트 구조
- 6가지 슬라이드 타입과 스킬 기반 자동 마크다운 작성
- 기본 테마 4종과 DESIGN.md 커스텀 테마 적용 방법
- 에이전트(Cursor $20 플랜)로 슬라이드 생성·수정 시 토큰 효율 약 1%
- 이미지 관리, 서버 재시작, 프레젠터 단축키 등 실무 팁
- Remotion Studio를 활용한 가로형 영상·쇼츠 동시 렌더링

#Remotion #슬라이드 #마크다운슬라이드 #프레젠테이션 #Cursor #AI슬라이드 #발표자료 #슬라이드제작 #개발자발표 #리모션 #마크다운 #AI에이전트 #커서AI #슬라이드자동화 #프레젠터 #영상제작 #쇼츠 #개발도구 #오픈소스 #코딩

마크다운 하나로 슬라이드를 만들고, 에이전트가 초안까지 잡아주는 프레젠테이션 도구를 완성했습니다. 리모션 슬라이드 버전 1.0, 에디터와 프리젠터를 모두 갖춘 이 시스템의 구조와 사용법을 처음부터 끝까지 보여드립니다. 무료로 공개하니 자유롭게 가져다 쓰시면 됩니다.

깃허브 레포 : https://github.com/Canine89/canine-remotion-slide

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 리모션 슬라이드 버전 1.0 완성 소개
0:53 에이전트 기반 슬라이드 시스템의 핵심 아이디어
1:57 프로젝트 구조와 마크다운 폴더 동작 원리
2:56 에이전트로 초안 만들고 에디터에서 마무리하기
3:24 스킬 기반 템플릿 시스템 설명
4:32 라이브 데모 — 스킬로 슬라이드 추가하기
5:50 프리젠터 모드 소개 (애니메이션 발표)
7:17 에디터 모드 사용법과 주의사항
9:46 추천 워크플로우 정리
10:46 테마 7종 소개 및 폰트 설정
12:01 디자인 DNA로 테마 커스터마이징
17:20 슬라이드 종류 전체 훑어보기
20:27 프리젠터 모드 최종 데모 및 마무리

오늘 다룬 내용
- 리모션 슬라이드 버전 1.0 — 마크다운 중심의 에이전트 연동 프레젠테이션 도구
- 마크다운 파일과 에디터·프리젠터가 양방향 실시간 동기화되는 구조
- 스킬 기반 템플릿으로 슬라이드 타입별 자동 생성 (타이틀, 이미지, 스텝스, 스플릿 등)
- 에디터 모드에서 빠른 확인, 프리젠터 모드에서 애니메이션 발표
- 7가지 기본 테마 제공 및 디자인 DNA를 통한 자유로운 커스터마이징
- 무료 공개 — 코덱스·노코드 등으로 자유롭게 수정 가능

#리모션슬라이드 #RemotionSlides #마크다운프레젠테이션 #에이전트슬라이드 #AI발표자료 #AI프레젠테이션 #슬라이드에디터 #마크다운슬라이드 #프레젠테이션도구 #에이전트시대 #커서AI #CursorAI #AItools #발표자료만들기 #슬라이드자동생성 #리모션 #Remotion #오픈소스 #무료슬라이드 #개발자발표

Codex 애플리케이션에 드디어 컴퓨터 유즈(Computer Use)가 등장했습니다. 에이전트가 실제로 내 PC를 조작해주는 기능인데, 카카오톡 메시지 읽기·보내기부터 네이버 웹 브라우저 제어, 피그마 화면 편집까지 직접 시연하며 현재 수준과 한계를 솔직하게 살펴봅니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 Codex 애플리케이션에 컴퓨터 유저 등장
1:17 컴퓨터 유저란? 운영체제에 녹아드는 에이전트
1:52 Codex 앱 vs Codex Sierra 체제 변화
2:47 백그라운드 작업·알림 등 새 설정 살펴보기
3:35 자동화 기능 현황과 제한 사항
4:36 사용 조건 — Mac 전용, 200달러 요금제, 일부 유저 한정
5:36 컴퓨터 유저 세팅 — 맥 접근 권한 설정 방법
7:19 Fast 모드 켜야 쾌적한 이유
7:46 실습① 카카오톡 메시지 읽기
10:32 실습② 카카오톡 메시지 보내기
12:24 실습③ 네이버 주식 웹 브라우저 제어
16:46 실습④ 피그마 화면 복사·편집 조작
19:48 마이크 입력까지 감지? 느낀 점과 향후 계획

오늘 다룬 내용
- 컴퓨터 유저는 MCP 기반으로 에이전트가 실제 앱을 조작하는 기능
- 현재 Mac 전용이며 200달러 요금제 + 일부 유저에게만 오픈
- 카카오톡 읽기는 잘 되지만 보내기는 아직 느리고 스킬 구성 필요
- 웹 브라우저 조작 시 화면 캡처 후 확인하는 방식으로 동작
- 피그마 편집도 가능하나 속도가 느려 스킬 정의가 중요
- 자동화에서 컴퓨터 유저 연동은 아직 미지원
- 만족도 약 60~65%, 실험 단계이지만 방향성은 확실
- 백그라운드 작업 위주로 에이전트 주도권이 확대되는 흐름

#Codex #코덱스 #컴퓨터유저 #ComputerUse #AI에이전트 #MCP #카카오톡자동화 #웹브라우저자동화 #피그마 #Figma #AI자동화 #에이전트 #맥 #Mac #백그라운드작업 #OpenAI #GPT #AI도구 #코덱스앱 #생산성 #자동화

100달러 플랜에서 사주팔자 앱 와이어프레임 하나 받는데 토큰 34%가 날아갔습니다. 클로드 디자인, 정말 쓸 만한 걸까요? 직접 앱 화면과 슬라이드를 만들어 보고, 커서+디자인 앤디 조합과 비용 대비 결과물을 정면 비교해 봤습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 클로드 디자인 리뷰 시작 — 결론부터 말씀드립니다
0:31 비용 문제: 100달러 플랜에서 토큰이 얼마나 빠지나
1:32 디자인 결과물, 기존 바이브 코딩 결과와 비교
3:05 좋은 점 — 디테일한 역질문 프로세스
4:49 커서 + 디자인 앤디 조합과 비용·퀄리티 직접 비교
6:21 실제 앱 화면 시연 및 디자인 시스템 문서 비교
8:49 첫 대면 리뷰 종합 평가
9:41 슬라이드 만들기 테스트 시작
11:45 웹 리서치로 사주팔자 조사 후 슬라이드 생성
14:30 슬라이드 결과 확인 및 편집 기능 살펴보기
15:15 기술 구조 차이 — JSON vs 웹 기술 기반
17:42 슬라이드 토큰 소모량 체크
19:53 최종 정리 — 아직은 대안이 더 낫다

오늘 다룬 내용
- 클로드 디자인의 토큰 소모량이 100달러 플랜에서도 부담스러운 수준
- 사주팔자 앱 와이어프레임 원샷 결과와 기존 바이브 코딩 결과물 품질 비교
- 커서 + 디자인 앤디 조합이 20달러 플랜 5%로 유사한 결과를 낸 사례
- 초보자를 위한 역질문 프로세스는 편리하지만 토큰 효율이 상쇄
- 슬라이드 디자인이 엔트로픽 스타일에 고정되는 한계
- 펜슬과의 UI·기술 구조 차이 (JSON vs HTML/JS)
- 렌더링 버그, 슬라이드 이동 오류 등 아직 남은 안정성 문제
- 리서치 프리뷰 단계로, 본격 실무 투입은 시기상조라는 결론

#클로드디자인 #ClaudeDesign #클로드 #Claude #AI디자인 #바이브코딩 #커서AI #CursorAI #디자인앤디 #펜슬 #AI슬라이드 #사주팔자앱 #토큰효율 #AI리뷰 #클로드코드 #앤트로픽 #Anthropic #AITools #디자인툴 #와이어프레임

에이전트로 슬라이드를 만들어주는 슬라이드 메이커, 더 쉬운 버전으로 돌아왔습니다. 10가지 슬라이드 타입, 토큰을 아끼는 핀 수정 기능, 디자인 엔진으로 원하는 브랜드 색감까지 입히는 방법을 시연과 함께 보여드립니다. 코덱스·클로드 코드·커서 어디서든 쓸 수 있도록 프로젝트를 새로 정리했으니, 이 영상으로 기능부터 먼저 확인해 보세요.

"샤라웃 to Kimmy Kim"

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 슬라이드 메이커 쉬운 버전 소개
0:33 오버뷰 기능과 10가지 슬라이드 타입
1:59 핀(Pin) 수정 기능 — 토큰 절약하며 부분 수정하기
3:00 디자인 엔진으로 브랜드 색감 입히기
4:08 실전 시연: 스타벅스 디자인으로 커피빈 슬라이드 생성
6:20 에어비앤비 디자인 적용 예시와 프로젝트 구조
7:40 세팅 도구 안내 — 코덱스·클로드 코드·커서
8:34 생성 결과 확인 및 슬라이드 리뷰
9:36 슬라이드를 동영상으로 렌더링하기
10:42 마무리 및 다음 영상 예고

오늘 다룬 내용
- 슬라이드 메이커 쉬운 버전 — 에이전트 하네스 없이도 바로 사용 가능
- 10가지 슬라이드 타입: 타이틀, 스텝스, 오션 플로우, 코트, 스플릿 등
- 핀 수정 기능으로 토큰을 아끼면서 특정 부분만 수정
- 디자인 엔진(design.md)으로 스타벅스·에어비앤비 등 브랜드 스타일 적용
- 커피빈 10장 슬라이드 실시간 생성 시연 (약 8분 소요)
- 슬라이드 완성 후 동영상 렌더링까지 원스톱 워크플로우
- 코덱스·클로드 코드·커서 세 가지 도구 지원 안내

#슬라이드메이커 #AI슬라이드 #에이전트코딩 #하이퍼프레임즈 #HyperFrames #AI발표자료 #코덱스 #ClaudeCode #커서 #CursorIDE #디자인엔진 #슬라이드자동화 #AI프레젠테이션 #코딩에이전트 #발표자료만들기 #슬라이드렌더링 #AI영상제작 #개발자도구

AI 에이전트로 발표 자료를 뚝딱 만들 수 있는 슬라이드 메이커, 세팅부터 실전 수정까지 한 영상에 담았습니다. 클로드 코드와 코덱스 두 에이전트에서 동일한 프롬프트로 슬라이드를 만들어보며, 디자인 엔진(design.md)이 결과물 품질에 얼마나 큰 영향을 미치는지 직접 비교합니다. 폴더 세팅, 디자인 적용, 폰트 변경, 이미지 삽입, 동영상 내보내기까지 입문자도 바로 따라 할 수 있도록 구성했습니다.

"샤라웃 to Kimmy Kim"

깃허브 : https://github.com/Canine89/agent-slide-maker-easy

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 슬라이드 메이커 세팅 가이드 소개
0:29 프로젝트 폴더 생성 및 터미널 기본 세팅
1:30 슬라이드 메이커 저장소 클론하기
1:59 AGENTS.md 확인 및 추가 세팅
2:52 디자인 엔진 소개와 design.md 활용법
4:50 코덱스(Codex) 버전 세팅 방법
6:17 클로드 코드 vs 코덱스 슬라이드 생성 비교
8:00 폰트 설정의 중요성과 Pretendard 추천
10:15 스킬 인식 이슈 원인과 해결법
11:45 완성된 슬라이드 리뷰 및 에이전트로 수정하기
14:44 텍스트 줄 수 조정 및 배경 요소 제거
16:48 이미지·동영상 내보내기
17:28 슬라이드에 커스텀 이미지 삽입하기
19:02 디자인 엔진을 잘 고르는 것이 핵심인 이유
21:38 마무리

오늘 다룬 내용
- 슬라이드 메이커 프로젝트 폴더 생성부터 클론, 추가 세팅까지 전체 초기 설정 과정
- 디자인 사이트에서 마스터카드 스타일 design.md를 가져와 슬라이드에 적용하는 방법
- 클로드 코드와 코덱스 두 에이전트에서 동일 프롬프트로 결과물 비교
- 코덱스의 심링크 기반 스킬 인식 문제와 스킬 목록 확인을 통한 해결법
- 폰트를 Pretendard 등 원하는 폰트로 변경해 완성도를 올리는 팁
- Aim 버튼으로 요소를 선택하고 에이전트에 수정 요청하는 실전 워크플로
- 슬라이드를 이미지·동영상으로 내보내는 방법
- 디자인 엔진 선택이 에이전트 성능보다 결과물에 더 큰 영향을 준다는 핵심 교훈

#슬라이드메이커 #AI발표자료 #하이퍼프레임즈 #HyperFrames #클로드코드 #코덱스 #Codex #ClaudeCode #AI에이전트 #디자인엔진 #발표자료만들기 #AI슬라이드 #프레젠테이션 #vibe코딩 #바이브코딩 #AI도구 #개발자도구 #토스디자인 #Pretendard #슬라이드디자인

클로드 코드 요금제 변경, SpaceX 인수 가능성까지—AI 코딩 도구 시장이 요동치고 있습니다. 하지만 특정 도구에 매몰되면 요금제 하나 바뀌었을 때 대응할 수 없습니다. 결국 에이전트를 다루는 본질은 컨텍스트 관리이고, 그 핵심인 AGENTS.md·Skills·Hooks·MCP 네 가지 개념만 제대로 이해하면 어떤 도구로든 갈아탈 수 있습니다. 오늘은 이 네 가지의 역할과 왜 지금 꼭 알아야 하는지를 정리합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 근황 및 오늘 주제 소개
0:47 클로드 코드 요금제 변경 소식과 앤트로픽의 요금 설계 전략
3:34 SpaceX × Cursor 인수 가능성 뉴스
5:51 에이전트의 본질은 컨텍스트를 다루는 것
6:30 표준화된 네 가지: AGENTS.md, Skills, Hooks, MCP
8:29 AGENTS.md — 큰 방향을 잡되 200줄 이내로 얇게 관리하기
11:41 Skills — 컨텍스트 바깥에서 디테일한 가이드를 담당하는 이유
13:23 Hooks — 스크립트 실행으로 에이전트에 강력한 울타리 치기
16:14 MCP — 외부 도구 연결과 컨텍스트 확장
17:00 CLAUDE.md에서 AGENTS.md로, 표준화가 중요한 이유
19:22 남의 세팅을 무작정 따라하면 안 되는 이유
20:58 다음 영상 예고 및 마무리

오늘 다룬 내용
- 커서 Pro 20달러 요금제에서 클로드 코드 제외, Max 100·200달러 요금제로의 유도 전략
- SpaceX가 Cursor와 긴밀히 협력 중이며 인수 가능성이 거론되는 배경
- 에이전트 엔지니어링의 핵심은 도구가 아닌 컨텍스트 관리라는 점
- AGENTS.md는 큰 방향(고삐), Skills는 디테일한 작업 가이드로 역할 분담
- Hooks는 스크립트를 강제 실행하여 에이전트를 확실히 제어하는 울타리
- MCP는 외부 도구 전문성을 컨텍스트에 연결하는 수단
- CLAUDE.md 대신 AGENTS.md로 통일해야 도구 간 이동이 자유로워지는 이유
- 특정 세팅에 의존하지 말고 개념을 이해해야 요금제·도구 변화에 대응 가능

#에이전트엔지니어링 #하네스엔지니어링 #커서 #Cursor #클로드코드 #ClaudeCode #코덱스 #Codex #AGENTS_MD #스킬스 #Skills #훅스 #Hooks #MCP #컨텍스트관리 #AI코딩 #바이브코딩 #요금제변경 #SpaceX #앤트로픽 #AI도구 #개발자 #프롬프트엔지니어링

이번 영상은 슬라이드 메이커를 처음부터 만드는 과정을 따라가면서, 자연어 지시 → AGENTS.md → 스킬(Skill) → 훅(Hooks) 순서로 어떻게 하네스를 단단하게 거는지 단계별로 보여드립니다. 윈도우 + Codex + VS Code 환경에서 진행했고, 대학 강의용 슬라이드를 만들어주는 도구를 예시로 사용했습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 하네스란 무엇인가 - 스킬·에이전트·훅 한눈에 소개
0:43 왜 슬라이드 메이커 만들기로 시연하는가
1:43 Codex 설치와 yolo 모드로 실행하기
2:04 GPT-5 강제 적용과 컨텍스트 윈도우 1M 설정
3:27 VS Code에서 터미널로 Codex 띄우기
4:24 하이퍼프레임즈·리모션, 슬라이드 도구 선택
7:53 검색으로 도구 조사부터 시키기
8:30 AGENTS.md 만들기 - 목적·선행조건·구조 박아두기
11:05 대학용 슬라이드 9가지 타입 생성과 정적 뷰 확인
16:50 9개 슬라이드 타입을 프로젝트 로컬 스킬로 분리
20:22 AGENTS.md에서 스킬을 자동 참조하게 연결하기
21:38 DESIGN.md 분리, 디자인 가이드 강제
24:04 페이퍼로지 폰트 등 타이포그래피 규제
25:17 메탈 스타일로 다시 생성해 결과 비교
29:27 훅(Hooks) 도입 - 포트 3000번 고정하기
30:41 StopHook 작성과 에이전트 라이프사이클 설명
33:12 새 요청으로 훅이 실제로 동작하는지 확인
36:30 말 / 스킬 / AGENTS.md / 훅, 언제 무엇을 쓸까
38:00 마무리

오늘 다룬 내용
- 하네스를 거는 네 가지 수단: 자연어 지시, AGENTS.md, 스킬(Skill), 훅(Hooks)
- AGENTS.md는 200줄 내외로 프로젝트 목적·선행 조건·전체 흐름만 담고, 디테일은 밖으로 분리한다
- 반복되는 세부 패턴은 프로젝트 로컬 스킬로 빼고, AGENTS.md에서 호출 규칙만 알려준다
- DESIGN.md를 따로 두면 폰트·컬러·레이아웃 같은 디자인 규약과 슬라이드 구조 규약의 충돌을 줄일 수 있다
- 훅은 판단 없이 즉시 실행되기 때문에 "포트 3000 고정"처럼 절대 어기면 안 되는 규칙에 어울린다
- Codex에서 GPT-5·1M 컨텍스트·fast 모드를 강제 적용하는 흐름
- 하이퍼프레임즈 기반 슬라이드 메이커 예시로 본 하네스의 전체 그림

#코덱스 #Codex #하네스 #AgentHarness #AGENTSmd #스킬 #Skill #Hooks #훅 #슬라이드메이커 #하이퍼프레임즈 #Remotion #VSCode #AI코딩 #바이브코딩 #VibeCoding #프롬프트엔지니어링 #LLM #코딩에이전트 #에이전트설계 #프로젝트구조 #개발자도구 #자동화 #생산성

ChatGPT의 새 이미지 생성 모델, 코드네임 "덕테이프(Duck Tape)"가 등장했습니다. 공식 명칭은 GPT Image 2.0 이번 영상에서는 단순히 "이미지 잘 나온다"가 아니라, 이 기술이 어떤 방향으로 가고 있고 우리가 무엇을 다르게 봐야 하는지에 초점을 맞춰 풀어봤습니다. 공식 문서가 말하는 "프롬프트는 길 필요 없다"는 메시지부터, 나노 바나나와의 결과 비교, Instant와 Thinking 모드의 실제 차이, 한글 표현력, 그리고 코덱스 활용 가능성까지 차근차근 살펴봅니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 영상이 늦어진 이유와 이번 콘텐츠의 방향
0:48 덕테이프, 무료 ChatGPT에서 누구나 쓸 수 있다
1:44 덕테이프 등장이 만든 SNS의 반응
2:13 공식 명칭 GPT Image 2.0과 "덕테이프" 코드네임 유래
3:45 새 기술이 나오면 공식 문서부터 읽어야 하는 이유
4:58 OpenAI Academy 가이드: 좋은 프롬프트는 길 필요 없다
6:34 에이전트의 발전 방향은 단순한 UI와 강한 추론
8:30 Image 모드 vs Classic 모드, "이미지도 하나의 언어다"
10:14 한글 등 비라틴 문자 표현력의 큰 폭 향상
11:24 디자인·삽화·프로그래머 직군에 미치는 실제 영향
12:40 투명배경 미지원, 그러나 텍스트 표현은 압도적
13:21 ChatGPT 이미지 메뉴: Instant와 Thinking 모드 차이
15:44 팰리세이드 × 슬램덩크 포스터로 짧은 프롬프트 테스트
17:27 GPT 결과 vs 나노 바나나(Pro) 결과 비교
19:57 나노 바나나의 자연스러움 vs GPT의 정교함
21:44 Instant 모드에서만 되는 이미지 부분 수정 기능
23:37 짧은 한글 프롬프트 vs 길게 짠 영문 프롬프트
26:10 결론, 길게 써도 짧게 써도 결과 차이는 거의 없다
27:13 인포그래픽으로 보는 Instant vs Thinking 비교
30:25 한글 깨짐과 텍스트 디테일은 어디서 차이가 나는가
33:38 Thinking 모드는 자료 조사로 정보형 인포그래픽을 만든다
35:52 코덱스에서도 덕테이프 사용 가능, 다음 영상 예고

#덕테이프 #DuckTape #GPTImage1 #ChatGPT #ChatGPT이미지 #OpenAI #이미지생성AI #생성형AI #나노바나나 #NanoBanana #Gemini #프롬프트엔지니어링 #프롬프트 #AI디자인 #AI인포그래픽 #한글AI #에이전트네이티브 #AIAgent #Codex #코덱스 #AI트렌드 #AI리뷰 #AI툴 #생성AI비교

이번 영상에서는 모노레포가 무엇인지, 왜 바이브 코딩과 궁합이 좋은지를 쉽게 풀어 보고, 4월 29일(수) 저녁 7시에 진행되는 코드팩토리님 채널의 모노레포·멀티 플랫폼 서비스 강의도 함께 소개드립니다.

[코드팩토리 채널] : https://www.youtube.com/@codefactory_official
[강의 정보] : 4월 29일 저녁 7시, 라이브 방송

타임라인
0:00 코드팩토리님 강의 홍보를 시작하며
0:55 바이브 코딩의 한계 — "모래성 다독이기"식 수정
2:02 이제는 AI에게 무엇을 시킬지 공부해야 할 때
2:32 구조를 설계하는 키워드, 모노레포
3:45 모노레포란? 프로젝트를 한 덩어리로 관리하기
4:18 장고와 리액트, 프로젝트 단위로 따로 관리하는 방식
5:56 따로 관리할 때 에이전트가 겪는 문제
6:14 에이전트는 자신이 실행된 폴더를 홈그라운드로 본다
7:22 폴더 하나로 묶는 모노레포 구조 설명
8:20 바이브 코딩과 모노레포가 잘 맞는 이유
8:49 4월 29일(수) 7시 코드팩토리 강의 안내 — 오픈 에이전트 SDK
10:05 멀티 플랫폼 서비스 — 원소스 멀티 유즈
10:38 코드팩토리 채널 추천 포인트
11:05 채널 게시물·옛날 영상 활용 팁
12:08 마무리

오늘 다룬 내용
- 바이브 코딩만으로 키운 프로젝트의 한계: 모래성 다독이기식 수정의 함정
- 이제는 "타이핑"이 아니라 "AI에게 어떻게 시킬지"를 공부해야 한다
- 모노레포(Monorepo)는 여러 프로젝트를 한 덩어리(폴더)로 묶어 관리하는 방식
- 장고/리액트를 따로 두면 에이전트가 한쪽 폴더만 홈으로 인식해 작업이 부자연스러워진다
- 모노레포는 에이전트가 자유롭게 양쪽을 오갈 수 있어 바이브 코딩과 궁합이 좋다
- 멀티 플랫폼 서비스: 코드 한 벌로 웹·앱 등 여러 플랫폼에 배포하기
- 4월 29일(수) 저녁 7시, 코드팩토리 채널의 모노레포·멀티 플랫폼 강의 추천

#모노레포 #Monorepo #바이브코딩 #VibeCoding #AI코딩 #에이전트코딩 #코드팩토리 #장고 #Django #리액트 #React #프론트엔드 #백엔드 #풀스택 #멀티플랫폼 #원소스멀티유즈 #프로젝트구조 #개발자공부 #개발자강의 #오픈에이전트SDK #모노레포튜토리얼

Codex에서도 GPT 이미지 생성(덕테이프)을 쓸 수 있습니다. 다만 공지가 거의 없어서 모르는 분이 많고, ChatGPT의 이미지 토큰과 Codex의 이미지 토큰이 따로 관리된다는 점을 모르고 지나치면 손해를 볼 수 있습니다. 이번 영상에서는 공식 이미지 제너레이션 스킬 문서와 실제 실습을 토대로 ChatGPT vs Codex CLI vs Codex 애플리케이션의 차이, 배치 작업 한계, 그리고 한국 개발자가 만든 오픈소스 툴 ima-2-gen까지 비교해 정리했습니다.

**코덱스 기준 배치 작업 이미지 최대 1.2만장 정도 가능하답니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 인트로 - Codex에서 GPT 이미지 정말 쓸 수 있나
0:51 ChatGPT와 Codex의 이미지 토큰은 별도 관리
1:26 플랜별 이미지 생성 한도(20달러/Pro) 정리
2:13 Codex 이미지 토큰은 코드 작업 대비 3~4배 소진
2:53 일반/프로 사용자별 추천 사용 전략
3:13 ChatGPT가 더 ‘센스 있게’ 만들어 보이는 이유
4:17 공식 문서 검증 - 내부적으로 GPT Image 모델 호출
5:20 실습 시작: Codex CLI vs Codex 앱 동시 비교
7:00 가상 연예프로 출연자 20명 프로필 이미지 의뢰
8:34 이미지 제너레이션 스킬 호출 과정 관찰
10:20 배치 작업이 실제로 되는지 검증
11:10 ChatGPT는 한 캔버스에 몰아 그려 결과가 비슷해짐
11:52 ChatGPT 배치 한도 확인 - 최대 8장
14:26 ChatGPT의 ‘알아서 잘해주는’ 영역과 Codex의 차이
16:52 같은 스킬인데 얼굴 다양성이 다른 이유
17:43 Pro 토큰 한도 - 한참 만들어도 거의 안 줄어듦
19:20 오픈소스 툴 ima-2-gen 소개 (한국인 제작)
21:30 ima-2-gen 설치와 Codex CLI 연동 세팅
23:38 노드 그래프 UI로 이미지 변형하기
26:20 ima-2-gen 8장 한계와 버그 리포트
28:18 결론과 용도별 사용 전략 정리

#코덱스 #Codex #CodexCLI #ChatGPT #GPT이미지 #덕테이프 #이미지생성AI #AI이미지 #배치작업 #imatzen #이미지제너레이션스킬 #AI툴 #프롬프트엔지니어링 #AI에이전트 #자동화 #생성AI #LLM #AI개발 #AI워크플로우 #프로필이미지 #스토리보드 #AI리뷰 #오픈AI #코덱스애플리케이션

MCP가 '커넥터'로 이름이 바뀌었습니다. 클로드 데스크톱에서는 커넥터, ChatGPT에서는 앱, Codex에서는 플러그인 — 부르는 이름은 다르지만 개념은 같죠. 이 영상에서는 MCP/커넥터의 정체부터, 가장 쉬운 원클릭 설치, 리모트 호스트 URL + API 키 방식(Firecrawl), 그리고 가장 손이 많이 가는 JSON 편집 방식(Playwright)까지 세 가지 설치 패턴을 한 번에 정리합니다. 책을 구매하셨거나, 설치가 막혀 멈춰 있던 분들이 다시 따라올 수 있도록 만든 가이드 영상이에요.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 MCP가 '커넥터'로 이름이 바뀐 배경
0:45 여전히 유효한 기술 MCP, 영상 시작
1:13 ChatGPT는 앱, Codex는 플러그인 — 같은 개념 다른 이름
1:42 MCP의 본질: 외부 앱을 에이전트가 끌어다 쓰는 통로
2:08 유료(종량제) vs 무료 MCP와 안정성 차이
3:02 데스크톱 커맨더는 이제 기본 기능, 더 이상 불필요
4:37 ① 원클릭 커넥터 설치 — 가장 쉬운 길
5:42 ② Smithery에서 찾아 설치하기
6:08 ③ 커스텀 커넥터: 리모트 호스트 URL + API 키 (Firecrawl)
7:35 Firecrawl 동작 확인 — 해외주식 30건 조사
8:27 Playwright 설치: JSON 직접 편집 방식
10:13 클로드 데스크톱 종료 → 구성 파일 편집 → 재실행
10:48 Playwright로 구글 쇼핑 스마트폰 검색 시연
12:17 Computer Use 등장 — 브라우저 자동화 MCP가 사라지는 흐름
13:42 가까운 미래: 에이전트가 결국 OS가 된다
14:16 마무리

#MCP #커넥터 #클로드 #ClaudeDesktop #Claude #ChatGPT #Codex #에이전트 #AI에이전트 #파이어크롤 #Firecrawl #Playwright #플레이라이트 #컴퓨터유저 #ComputerUse #브라우저자동화 #스미더리 #Smithery #커스텀커넥터 #AI도구 #AI자동화 #생성형AI #AI활용 #에이전틱AI #AI개발

요즘 에이전트들 폼이 매주 뒤집히는데 200달러를 어디다 줘야 할지 모르겠다는 분들을 위한 정리입니다. Claude, ChatGPT/Codex, Cursor, Gemini, Copilot까지 — 어떤 요금제를 묶어 써야 가장 똑똑하게 돈을 쓰는지, 절대 하면 안 되는 결제 방식은 뭔지 한 번에 짚어드립니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 에이전트 요금제, 왜 지금 다시 정리해야 하나
0:32 원칙 1 — 한 서비스에 몰빵하지 마라
0:56 원칙 2 — 약소국 + 강대국 조합으로 할인 이벤트 챙기기
1:55 원칙 3 — 절대 연결제(연 결제) 하지 마라
3:13 Claude 요금제 분석 (Pro 20달러 vs Max 100/200달러)
4:29 Claude 100달러 사용량·세션 한도 관리법
5:15 ChatGPT/Codex 요금제 분석 (8/20/100/200달러)
7:37 Cursor 요금제 분석 (20/60/200달러, 시간 기반)
9:08 추천 조합 ① Claude 100달러 + ChatGPT 100달러
11:12 추천 조합 ② Claude 100달러 + Cursor 20달러
11:54 추천 조합 ③ Codex 100달러 + Cursor 20달러
12:20 Copilot이 추천 리스트에서 빠진 이유
12:37 돈을 더 줄이고 싶을 때의 절약 조합
13:21 이미지 작업은 Codex 배치 + ChatGPT 인스턴트로 분리
13:30 Gemini 요금제와 “출시 직후 두 달”만 쓰는 전략
15:30 정리 — 강대국은 Claude, 약소국은 Codex/Cursor

#AI에이전트 #AI요금제 #Claude #ClaudeMax #ChatGPT #Codex #Cursor #CursorAI #Gemini #GitHubCopilot #AI코딩 #바이브코딩 #AI구독 #에이전트추천 #AI툴추천 #생산성 #개발자도구 #AI리서치 #프롬프트엔지니어링 #AI비교 #AI구독료 #2026AI

검정색 터미널이 무서워서 Codex CLI 근처에도 못 가셨던 분들을 위한 초입문 가이드입니다. Codex 앱과 Codex CLI가 어떻게 다른지, Warp 같은 터미널 프로그램이 진짜 해주는 게 뭔지, 그리고 폴더 이동(cd) 한 줄만 넘으면 왜 그 다음부터는 별 문제가 없는지를 차근차근 풀어봤습니다. 마지막에는 design.md 사이트에서 가져온 디자인 가이드 + Codex CLI 이미지 생성 기능으로 인테리어 업체 랜딩페이지(Next.js)까지 바이브코딩으로 한 번에 뽑아봅니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 오늘의 주제 — Codex CLI 초입문 가이드
0:36 Codex 앱 vs Codex CLI, 뭐가 어떻게 다른가
2:31 이 강의는 누구를 위한 영상인가
2:48 Warp 쓴다고 실력이 늘지 않는다 — 오해 풀기
4:59 터미널·셸·껍데기 개념 정리 (자동차 트림 비유)
10:33 Unix 계열 vs Windows, 왜 mac에서 에이전트가 더 부드러운가
12:47 cd 명령어 + 드래그 앤 드롭으로 폴더 이동 쉽게 하기
15:22 cd 와 ls, 이 두 단계만 넘으면 끝난다
17:50 Warp 가이드 — 탭, 사이드바, 프로젝트 익스플로러, 화면 분할
22:25 Codex CLI 실행 옵션 — yolo 모드, 모델 선택, fast 모드, permissions
25:25 Codex CLI 설치 방법 한 번에 정리
26:02 실전 — 폴더 만들고 cd 로 들어가서 코덱스 실행
28:21 바이브코딩 — design.md 사이트로 디자인 가이드 가져오기
30:13 인테리어 랜딩페이지 + 이미지 생성을 Next.js로 한 번에
34:34 결과 확인 — 서버 띄우고 화면 분할로 디버깅까지
37:27 마무리

#Codex #CodexCLI #OpenAI #GPT5 #바이브코딩 #AI코딩 #터미널입문 #쉘 #zsh #bash #PowerShell #명령프롬프트 #Warp #cd명령어 #NextJS #designmd #랜딩페이지 #인테리어랜딩페이지 #AI에이전트 #프롬프트엔지니어링 #초보가이드 #개발자입문 #맥터미널 #윈도우터미널 #이미지생성

스킬을 잘 만들어도 관리 전략이 없으면 결국 복사본만 늘어나고, 에이전트를 바꾸는 순간 동작하지 않게 됩니다. 이 영상은 Claude Code, Codex, Cursor 등 여러 에이전트에서 같은 스킬을 어떻게 한 벌만 유지하면서 모두가 인식하게 만들지를 다룹니다. 핵심은 두 가지 — 전역/지역 구분, 그리고 심볼릭 링크(symlink)로 원본 한 곳만 두기. 실습에서는 Codex에서 4:3 슬라이드 이미지 생성 스킬을 만들고, 이를 Claude Code에서 그대로 끌어다 쓰는 과정까지 보여 드립니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 오늘의 주제 — 스킬 관리 전략이 필요한 이유
1:08 오해 바로잡기: 스킬은 Claude/Claude Code 고유 기능이 아니다
2:43 스킬 관리 전략 3원칙 요약
3:24 전역(Global)과 지역(Local) 스킬의 차이
5:32 전역에 스킬이 많아질 때 생기는 컨텍스트 비용 문제
6:49 무엇을 전역에, 무엇을 지역(프로젝트 폴더)에 둘 것인가
8:47 에이전트 고유 폴더(.claude / .codex / .cursor)의 함정
10:14 같은 폴더라도 다른 에이전트는 스킬을 못 보는 이유
11:46 해결책: 원본 한 벌 + 심볼릭 링크 전략
12:38 심링크(symlink)란 무엇인가 — 그림으로 이해하기
14:13 Cursor를 포함한 모든 에이전트에 동일하게 적용
15:13 실습 시작 — 테스트 폴더와 두 에이전트 띄우기
16:25 Codex의 skill-creator로 커스텀 스킬 만들기
17:31 만들 스킬 정하기 — HTML/CSS 기반 4:3 슬라이드 이미지 생성기
20:13 디자인 레퍼런스 지정과 슬라이드 구성 정의
20:50 중요한 디테일 — “전역이 아닌 지역 스킬로 만들어 줘” 지시
23:22 Claude Code 쪽에서 동일 스킬을 심링크로 연결하기
25:23 폴더에서 심볼릭 링크 실제 동작 확인
27:01 연결된 스킬로 Claude Code에서 슬라이드 한 장 생성해 보기
27:29 마무리 — 에이전트가 바뀌어도 흔들리지 않는 스킬 폴더 구조

#클로드코드 #ClaudeCode #Codex #Cursor #AI에이전트 #스킬관리 #AgentSkills #심볼릭링크 #symlink #바이브코딩 #VibeCoding #AI개발 #LLM #프롬프트엔지니어링 #개발생산성 #Anthropic #OpenAI #에이전트워크플로우 #AI도구 #스킬전략 #지역스킬 #전역스킬 #슬라이드자동화 #개발자도구 #AI워크플로우

골든래빗에서 편집자(인문, 경제경영), 마케터(팀장, 팀원)을 모집합니다.

Codex CLI와 Claude Code 양쪽에 같은 채용 랜딩페이지를 동시에 시켜보고, 어디까지 비슷하게 만들어내는지, 어디서 차이가 벌어지는지 비교해 본 작업기입니다. 골든래빗 출판사의 입문 편집자·마케팅 팀장·마케팅 팀원 채용 공고를 원페이지 사이트로 만드는 흐름을 따라가면서, 채용공고 MD 문서, 히어로 이미지, styles.refero.design의 디자인 레퍼런스까지 한 번에 컨텍스트로 밀어 넣는 방식을 보여드립니다. 단순히 "랜딩페이지 만들어줘"가 아니라, 어떤 자료를 어떻게 모아서 어떻게 떠먹여 줘야 좋은 결과가 나오는지에 대한 실전 노트로 봐주시면 좋겠습니다.

**디자인.md 사이트 : https://styles.refero.design

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 인사와 오늘의 콘셉트 - Codex CLI와 Claude Code 비교 작업
1:06 채용 랜딩페이지가 포트폴리오·회사 소개·1인기업에 쓰이는 이유
2:34 두 에이전트 환경 준비와 바이패스(권한 우회) 모드 셋업
4:03 채용공고 MD 문서 3종 작성 - 편집자, 마케팅 팀장, 팀원
6:31 히어로 섹션 이미지 프롬프트 설계 - 중앙을 비운 흰 배경
9:14 다양한 구성원 에셋과 파워퍼프걸 스타일 지정하기
12:31 한 번에 여러 장 받는 이미지 생성 시간 절약 팁
13:26 styles.refero.design에서 센터 정렬 위주 디자인 레퍼런스 고르기
16:13 "플레이풀 사이트 요구"를 이미지 컨텍스트로 함께 전달
18:07 동일 프롬프트로 양쪽 에이전트에 동시에 일 시키기
19:22 Next.js·Pretendard·Apple 카피 톤 등 세부 요구사항 정리
22:13 두 에이전트의 진행 방식 비교 관찰
23:13 Codex 결과물 점검과 카피·비율 수정 요청
27:39 Claude Code 결과물 분석과 공간 활용·애니메이션 차이
29:53 아이콘·일러스트 추가와 GPT 비전 기반 이미지 컨텍스트 활용
33:28 PNG 배경 투명화 처리로 일러스트를 자연스럽게 녹이기
36:04 두 에이전트 총평과 채용 랜딩페이지 활용 마무리

#코덱스CLI #CodexCLI #클로드코드 #ClaudeCode #바이브코딩 #vibecoding #AI코딩 #AI에이전트 #랜딩페이지 #채용페이지 #채용공고사이트 #NextJS #프리텐다드 #Pretendard #모빈 #Mobbin #이미지생성 #파워퍼프걸스타일 #프롬프트엔지니어링 #골든래빗 #포트폴리오 #1인기업 #스타트업 #프론트엔드 #웹개발

Codex CLI와 Claude Code 양쪽에 같은 채용 랜딩페이지를 동시에 시켜보고, 어디까지 비슷하게 만들어내는지, 어디서 차이가 벌어지는지 비교해 본 작업기입니다. 골든래빗 출판사의 입문 편집자·마케팅 팀장·마케팅 팀원 채용 공고를 원페이지 사이트로 만드는 흐름을 따라가면서, 채용공고 MD 문서, 히어로 이미지, styles.refero.design의 디자인 레퍼런스까지 한 번에 컨텍스트로 밀어 넣는 방식을 보여드립니다. 단순히 "랜딩페이지 만들어줘"가 아니라, 어떤 자료를 어떻게 모아서 어떻게 떠먹여 줘야 좋은 결과가 나오는지에 대한 실전 노트로 봐주시면 좋겠습니다.

**디자인.md 사이트 : https://styles.refero.design

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 인사와 오늘의 콘셉트 - Codex CLI와 Claude Code 비교 작업
1:06 채용 랜딩페이지가 포트폴리오·회사 소개·1인기업에 쓰이는 이유
2:34 두 에이전트 환경 준비와 바이패스(권한 우회) 모드 셋업
4:03 채용공고 MD 문서 3종 작성 - 편집자, 마케팅 팀장, 팀원
6:31 히어로 섹션 이미지 프롬프트 설계 - 중앙을 비운 흰 배경
9:14 다양한 구성원 에셋과 파워퍼프걸 스타일 지정하기
12:31 한 번에 여러 장 받는 이미지 생성 시간 절약 팁
13:26 styles.refero.design에서 센터 정렬 위주 디자인 레퍼런스 고르기
16:13 "플레이풀 사이트 요구"를 이미지 컨텍스트로 함께 전달
18:07 동일 프롬프트로 양쪽 에이전트에 동시에 일 시키기
19:22 Next.js·Pretendard·Apple 카피 톤 등 세부 요구사항 정리
22:13 두 에이전트의 진행 방식 비교 관찰
23:13 Codex 결과물 점검과 카피·비율 수정 요청
27:39 Claude Code 결과물 분석과 공간 활용·애니메이션 차이
29:53 아이콘·일러스트 추가와 GPT 비전 기반 이미지 컨텍스트 활용
33:28 PNG 배경 투명화 처리로 일러스트를 자연스럽게 녹이기
36:04 두 에이전트 총평과 채용 랜딩페이지 활용 마무리

#코덱스CLI #CodexCLI #클로드코드 #ClaudeCode #바이브코딩 #vibecoding #AI코딩 #AI에이전트 #랜딩페이지 #채용페이지 #채용공고사이트 #NextJS #프리텐다드 #Pretendard #모빈 #Mobbin #이미지생성 #파워퍼프걸스타일 #프롬프트엔지니어링 #골든래빗 #포트폴리오 #1인기업 #스타트업 #프론트엔드 #웹개발

저번 슬라이드 메이커 영상 이후 업그레이드해 둔 결과물을 공개하는 영상입니다. 이번에는 SNS 카드뉴스를 만드는 분들을 위해 카드뉴스 제작에 최적화한 버전을 보여드리고, 어디까지 자동으로 만들어지는지, 실제로 어떻게 쓰면 되는지를 처음부터 끝까지 따라가며 정리합니다. 슬라이드 메이커 프로젝트는 이 영상으로 마무리됩니다.

**슬라이드 메이커 깃허브 주소 : https://github.com/Canine89/agent-slide-maker-easy

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 슬라이드 메이커 업그레이드와 오늘의 주제 소개
0:44 미리 만들어 둔 8장짜리 카드뉴스 오버뷰 확인
1:33 카드뉴스의 본질은 결국 콘텐츠라는 이야기
2:00 에디트 모드에서 텍스트 빠르게 수정하기
2:31 오버뷰에서 동영상·이미지로 내보내기
2:58 마지막 페이지에 일론 머스크 이미지 자동 생성 예시
4:00 처음부터 다시 시작 — 주식 이슈 리서치
4:48 카드뉴스를 구성하는 네 가지 스킬 설명
5:55 8장 구성 전략과 이미지·디자인 지시 방법
7:19 스타일래퍼에서 디자인 이미지 골라 적용하기
8:30 디자인 이미지·텍스트 입력 후 카드뉴스 생성 시작
9:00 약 9분 만에 완성된 카드뉴스 확인
12:55 레이아웃이 비슷한 이유와 사용자 맞춤 스킬 만들기
14:25 6장 카드뉴스 제작에 드는 시간·비용 정리
15:17 슬라이드 메이커 프로젝트 마무리

오늘 다룬 내용
- 슬라이드 메이커를 SNS 카드뉴스 제작에 맞춰 업그레이드한 결과 공개
- 오버뷰에서 텍스트 수정·동영상·이미지 내보내기까지 한 번에 처리
- 리서치 → 스킬 지정 → 디자인 이미지 적용 → 자동 생성으로 이어지는 워크플로
- 코덱스 이미지 제너레이션 스킬을 활용한 일론 머스크 이미지 자동 합성 사례
- 스타일래퍼·믹스킷처럼 무료 디자인·동영상 에셋을 가져와 배경에 까는 팁
- 네 가지 기본 스킬 구조와, 원하는 레이아웃을 직접 추가하는 커스텀 스킬 방식
- 6~8장 카드뉴스를 약 8천 원·10분 안팎으로 만들 수 있다는 비용·시간 감각

#슬라이드메이커 #카드뉴스 #SNS카드뉴스 #카드뉴스제작 #코덱스 #Codex #에이전트 #AI에이전트 #AI자동화 #마케팅자동화 #콘텐츠마케팅 #이미지생성AI #프롬프트엔지니어링 #스킬만들기 #하네스 #스타일래퍼 #믹스킷 #무료에셋 #디자인툴 #자동화툴 #1인마케팅 #SNS마케팅 #인스타그램카드뉴스 #AI툴

지난 5월 11일 새벽, AI 에이전트 서비스 Manus의 가격 실수로 시작된 이른바 '마누스 대란'이 어떻게 흘러갔는지, 소비자의 입장에서 이 사건을 다시 돌아봅니다. 환불 과정의 미흡함과 그 속에서 가장 크게 잃은 자원인 '시간', 그리고 비슷한 시기 다른 AI 서비스의 프로모션 실수까지 함께 비교해 보며, 앞으로 에이전트 서비스에 돈을 쓸 때 어떤 기준을 가져야 하는지 정리해 봅니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 영상 주제 소개: Manus 대란을 소비자 관점에서 돌아보다
0:34 사건의 발단: 5월 11일 새벽 가격 실수와 1년 3만 2천 원 플랜
1:10 포인트 혜택과 쓰레드를 통한 확산
2:16 케이스 공유와 본인의 결제 실패 경험
3:26 환불 진행 과정의 미흡함과 포인트 회수 문제
4:30 진짜 비용은 가격이 아니라 '시간'이었다
5:48 글로벌 서비스의 영향력에 대해 다시 생각하다
6:08 다른 AI 서비스의 프로모션 실수와 비교
7:29 카카오 환불 정책과 앞으로의 관전 포인트
8:01 교훈 1: 시간은 금이다
8:56 교훈 2: 완성도만큼 운영과 마케팅이 중요하다
9:39 교훈 3: 자사 모델 유무가 서비스 안정성을 가른다
10:51 1년 결제는 지양, 자사 모델 서비스를 우선
11:04 채널 방향성과 마무리 인사

#Manus #마누스대란 #AI에이전트 #에이전트서비스 #AI구독 #생성형AI #챗GPT #LLM #프로모션사고 #환불대란 #쓰레드 #카카오 #구독결제 #IT뉴스 #테크리뷰 #AI리뷰 #자사모델 #소비자관점 #바이브코딩 #AI서비스선택

이번 영상은 Hermes 에이전트를 처음부터 끝까지 셋업해 보는 가이드입니다. 단순 설치를 넘어 Docker 샌드박스로 안전하게 격리하고, 마지막에는 Google Chat까지 연결해서 모바일 메신저로 내 PC의 에이전트에게 명령을 보낼 수 있는 환경을 만듭니다. 디스코드나 텔레그램 대신 굳이 Google Chat을 고른 이유는, 한 번 이해해 두면 다른 메신저 연동도 같은 구조로 풀리기 때문입니다. Codex 구독과 gcloud의 힘을 빌려, 어렵게만 보이던 과정을 최대한 자동으로 처리합니다.

**에르메스단 카톡방 : https://open.kakao.com/o/p1Ig2jqi

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 영상 소개 — Hermes + Docker + Google Chat 연동 목표
1:10 Hermes의 특징과 메신저 연동이 주는 강점
2:51 Hermes 사용 방식 두 갈래와 모바일 활용 시나리오
4:12 Hermes 설치와 Codex 장치 코드 인증 사전 세팅
5:30 Docker가 필요한 이유 — 샌드박스 컨테이너 비유
8:46 Hermes 퀵 셋업과 Docker 모드로 첫 실행
12:58 Codex로 Docker 자동 설치하고 Hermes 재실행 검증
17:42 컨테이너 내 파일 생성으로 샌드박스 동작 확인
18:55 Google Chat 연동 구조 — 게이트웨이와 Pub/Sub 우체통
22:25 gcloud 설치, 프로젝트와 OAuth 동의, 서비스 계정 만들기
30:30 결제 계정 연결, Pub/Sub 토픽·구독, Chat API 구성
36:39 가상환경 패키지 설치와 서비스 계정 인증키 배치
39:05 게이트웨이 오픈과 Google Chat에서 첫 채팅 테스트
42:24 컨테이너 파일 작업 검증과 매일 아침 주식 브리핑 활용 예시
45:57 커뮤니티 카톡방 안내와 마무리

#Hermes #에르메스에이전트 #AI에이전트 #Docker #도커 #샌드박스 #GoogleChat #구글채팅 #구글챗 #PubSub #gcloud #구글클라우드 #GCP #Codex #코덱스 #ChatGPT #AI자동화 #에이전트셋업 #개발자도구 #모바일에이전트 #바이브코딩 #생산성도구 #AI워크플로우 #챗봇연동

디스코드 연동을 요청해주신 분들이 많아서 바로 준비했습니다. 이번 영상부터는 자막이 올라가고요. 구글 채팅 연동에 비해 디스코드는 중간 연결 단계가 거의 없어 훨씬 심플합니다. 디스코드 개발자 포털에서 봇을 만들고, 토큰과 초대 링크를 받아 코덱스 안의 에르메스 게이트웨이에 연결하기까지 처음부터 끝까지 따라 할 수 있게 정리했습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 자막 도입과 후원 감사 인사
1:06 디스코드 연동이 구글 채팅보다 심플한 이유
2:47 봇을 채널에 초대하는 구조 한눈에 보기
3:18 코덱스에 에르메스 문서를 미리 로드시키는 트릭
4:00 디스코드 개발자 포털 접속과 로그인
5:08 New Application 생성과 봇 만들기
6:03 Public Bot 활성화와 Privileged Gateway Intents 설정
6:42 봇 토큰 발급(Reset Token)과 보안 주의
7:36 애플리케이션 ID로 초대 URL 만들기
9:13 디스코드 설치와 개발자 모드 켜기
10:25 내 User ID 복사하기
11:11 코덱스로 에르메스 설치하고 채팅 위치 코드 인증 켜기
13:15 로컬 vs 도커 샌드박스 선택과 도커 설치
14:48 도커 컨테이너에서 실행 중인지 확인하는 법
16:14 Hermes Gateway Setup으로 토큰·유저 아이디 입력
19:00 부족한 설정은 코덱스에 점검 요청
19:50 서버 만들고 봇 초대하기
21:02 봇은 반드시 @멘션해야 응답한다
21:48 훈민정음.txt 파일 생성으로 동작 확인

오늘 다룬 내용
- 후원 덕분에 자막 1년 결제, 이번 영상부터 자막 제공
- 디스코드 연동은 봇을 채팅방에 초대하는 방식이라 구글 채팅보다 단순
- 디스코드 개발자 포털에서 애플리케이션·봇 생성, Privileged Gateway Intents에서 Server Members와 Message Content 활성화
- 봇 토큰과 애플리케이션 ID 기반의 초대 URL 만들기, 토큰·아이디 노출 주의
- 디스코드 개발자 모드를 켜야 User ID 복사 가능
- 코덱스 채팅 위치 코드 인증을 켜야 로그인 가능, GPT-5 모델로 세팅
- 도커 샌드박스에 에르메스를 띄워 로컬 환경과 격리
- 코덱스 안의 Hermes Gateway Setup으로 토큰·유저 아이디·홈 채널 입력
- 봇은 채팅방에서 반드시 @멘션해야 응답하며, 이후 일반 대화로 진행 가능

#디스코드연동 #디스코드봇 #코덱스 #OpenAICodex #에르메스 #HermesAgent #AI에이전트 #코딩에이전트 #디스코드개발자포털 #DiscordBot #봇만들기 #도커 #도커샌드박스 #DockerSandbox #챗봇세팅 #AI코딩 #개발자도구 #프로그래밍튜토리얼 #자동화 #디스코드API #초보개발자 #AI도구

이번 영상은 클로드 코드 입문자를 위해 다시 찍었습니다. 클로드 데스크톱에서 보이는 "코워크/코드"와 터미널에서 돌아가는 클로드 코드가 헷갈리는 이유, 그리고 둘을 언제 어떻게 써야 하는지를 컨텍스트 윈도우·하네스 개념과 함께 정리했습니다. 마지막에는 코크의 '프로젝트' 기능으로 지침과 예정된 작업까지 묶어 자동화하는 실습도 함께 보여드립니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/189114943
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 영상을 다시 찍은 이유
0:30 클로드 본체 업데이트와 클로드 코드의 차이
1:40 컨텍스트와 컨텍스트 윈도우 개념 잡기
4:17 컨텍스트가 섞이면 안 되는 이유 (모임 대화 비유)
6:28 하네스(Harness)란 무엇인가
7:01 코크와 클로드 코드가 헷갈리는 이유
7:48 보조바퀴 비유: 더 좋은 게 아니라 편한 걸 쓰자
11:14 코크의 실행 환경과 작업 영역
12:23 코크 vs 클로드 코드, 언제 무엇을 쓸까
14:57 클로드 코드 터미널 환경의 장단점
17:28 코크 사용 기본: 폴더 지정과 리서치 한계
18:28 코크의 '프로젝트' 만들기 실습
19:27 프로젝트의 핵심 차이: 지침(Instructions)
20:31 예정된 작업으로 매일 자동 실행하기
22:21 메모리 기능을 끄는 걸 추천하는 이유
23:33 예약 작업으로 엑셀 보고서 자동 생성

오늘 다룬 내용
- 클로드 코드(터미널)와 클로드 데스크톱 코크의 실행 환경·기능 차이
- 컨텍스트 윈도우 개념과 대화 일관성이 결과 품질에 미치는 영향
- 하네스(Harness)가 필요한 이유와 앱·커넥터·스킬의 역할
- "더 좋은 도구는 없다, 편한 걸 쓰면 된다"는 보조바퀴 관점
- 클로드 코드의 슬래시 명령어 풍부함과 텍스트 조작의 진입장벽
- 코크 '프로젝트'에서 지침을 미리 박아두고 일관된 동작 유도하기
- 예정된 작업으로 매일 자동 실행되는 보고서·학습 루틴 만들기
- 메모리 기능을 끄는 것을 권장하는 이유와 대안

#클로드코드 #ClaudeCode #Claude #Anthropic #AI개발 #코딩에이전트 #LLM #프롬프트엔지니어링 #컨텍스트엔지니어링 #하네스 #VSCode #AI코딩 #AI툴 #AI에이전트 #생산성 #자동화 #프로젝트관리 #예약작업 #터미널 #개발자입문 #클로드데스크톱

클로드 코드를 처음 켜는 순간 가장 먼저 만나는 벽은 바로 터미널입니다. 이 영상은 그 벽을 어떻게 넘는지, 왜 폴더 이동(cd)부터 익혀야 하는지, 그리고 클로드 코드를 더 안전하고 똑똑하게 쓰는 슬래시 명령어·플랜 모드·ccusage까지 한 흐름으로 정리합니다. 터미널이 아직 낯선 분들이 "왜 이렇게 하는지"를 이해하고 그대로 따라할 수 있도록, 놀이터 비유와 껍데기/알맹이(셸) 비유를 곁들여 설명합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/189114943
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 클로드 코드의 첫 관문, 터미널과 친해지기
0:50 에이전트 네이티브 사고와 토큰 연습의 필요성
2:43 cd 명령어로 작업 폴더 이동하는 법
4:16 드래그 앤 드롭으로 cd를 쉽게 사용하기
4:51 작업 폴더에서 claude 실행하기
6:13 폴더 지정의 중요성, 놀이터 비유
7:36 터미널은 껍데기, 알맹이는 셸이다
11:15 어떤 터미널을 쓸지는 취향대로
13:36 슬래시 명령어와 Ctrl+C 두 번 종료
14:39 플랜 모드로 컨텍스트 풍부하게 만들기
17:02 슬래시 클리어와 모르는 명령 에이전트에 묻기
18:59 ESC로 작업 중간에 질문 끼워넣기
20:09 ccusage 설치로 토큰 사용량 확인하기
21:29 오토 모드의 반자동 동작 방식

오늘 다룬 내용
- 클로드 코드 입문의 가장 큰 허들은 터미널이며, "코드로 해결하겠다"는 마음가짐과 에이전트 네이티브 사고가 출발점
- 작업 폴더에 cd로 이동한 뒤 claude를 실행해야 클로드 코드가 그 폴더 안에서만 안전하게 작동 (놀이터 비유)
- 폴더 이동은 cd 뒤에 폴더를 드래그 앤 드롭하면 경로가 자동으로 입력되어 간편
- 터미널은 껍데기일 뿐이고, 명령을 해석하는 실제 주체는 셸(zsh, bash, fish 등). iTerm·Warp·VSCode 내장 터미널은 껍데기 차이일 뿐 본질은 동일
- 클로드 코드의 모든 메뉴는 슬래시(/) 명령어에 들어 있고, Ctrl+C 두 번으로 안전하게 종료
- 플랜 모드는 실행 없이 계획만 세우며 컨텍스트를 풍부하게 만들어주기 때문에 초보자에게 특히 추천
- /clear로 컨텍스트 윈도우를 정리하고, ESC와 백슬래시 두 번으로 작업 도중 질문을 끼워넣기
- 모르는 메뉴·명령은 ChatGPT가 아닌 에이전트 자신에게 직접 물어보면 웹 검색까지 해서 알려줌
- ccusage 같은 도구는 직접 다운로드하지 말고 에이전트에게 "설치해 줘"라고 시키면 끝
- 오토 모드는 완전 자동이 아니라 위험한 작업에서는 사용자에게 다시 확인을 받는 반자동 방식

#클로드코드 #ClaudeCode #터미널 #cd명령어 #에이전트네이티브 #바이브코딩 #AI코딩 #VSCode #iTerm #Warp #셸 #zsh #슬래시명령어 #플랜모드 #PlanMode #ccusage #오토모드 #토큰사용량 #프롬프트엔지니어링 #컨텍스트엔지니어링 #개발자도구 #AI에이전트 #클로드 #Claude #AI개발

스킬(Skill)은 클로드 전용 기능이 아니라 클로드 코드, 커서, 코덱스 등 모든 에이전트가 공유하는 "조건을 갖춘 폴더"입니다. 이번 영상은 클로드 코드 입문 가이드의 마지막 편으로, 스킬을 설치하고 직접 만들어 쓰는 방법, SKILL.md 프론트매터의 동작 원리, 그리고 CLAUDE.md와 함께 컨텍스트 윈도우를 효율적으로 운영하는 하네스 엔지니어링의 기본기를 정리합니다.

**한글 스킬 : https://github.com/Canine89/hwpxskill

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 스킬 오해 풀기 - 클로드 전용이 아닌 모든 에이전트의 공용 도구
0:51 스킬은 "조건을 갖춘 폴더" - 설치는 폴더 복사로 끝
1:59 실제 스킬 폴더 구조 들여다보기 (한글 스킬 예시)
3:08 SKILL.md 외 scripts·references·templates 보조 파일의 역할
5:13 스킬은 단일 문서가 아니라 "작업 폴더"로 구성하라
5:48 에이전트에게 시키면 끝나는 "에이전트 네이티브" 설치
6:23 스킬의 효능 - 지식 컷오프 보완, 정확도 상승, 토큰 절약
9:25 한글 스킬 실전 데모 - 정부 양식 자동 작성
12:39 한글 스킬 다운로드와 프로젝트 폴더에 설치하기
15:34 SKILL.md 프론트매터(description)가 핵심인 이유
18:06 CLAUDE.md - 컨텍스트 윈도우에 상주하는 프로젝트 백서
20:16 CLAUDE.md를 짧게 유지해야 하는 이유 (약 200줄 내외)
23:52 CLAUDE.md 다이어트 → 디테일은 스킬로 분리 (하네스 엔지니어링)
25:25 지역 스킬 vs 전역 스킬의 차이
27:35 전역 스킬 설치 방법과 관리 팁
30:06 유튜브 설명란 자동화 등 실제 스킬 활용 사례
30:32 스킬 만드는 법 - 결과물이 만족스러울 때 스킬화하라
32:04 스킬을 만들어야 할 두 가지 신호 - 반복 작업, 지식 컷오프
33:13 클로드 코드 입문 가이드 마무리, 다음 편은 바이브 코딩

오늘 다룬 내용
- 스킬은 클로드만의 기능이 아니라 클로드 코드·커서·코덱스 등 모든 에이전트가 공유하는 "조건을 갖춘 폴더"
- 스킬 설치는 실행 파일을 누르는 방식이 아니라 에이전트에게 시키는 "에이전트 네이티브" 방식
- SKILL.md의 프론트매터(description)만 먼저 훑어 필요한 스킬만 로드하는 토큰 절약 메커니즘
- 컨텍스트에 항상 들어가는 CLAUDE.md는 200줄 내외로 짧게, 디테일한 지침은 스킬로 분리하는 하네스 엔지니어링 원칙
- 지역 스킬과 전역 스킬의 차이, 그리고 지역 스킬 위주로 운영하다 필요할 때만 전역으로 빼는 전략
- 처음부터 설계하지 말고, 에이전트와 작업해 만족스러운 결과가 나온 뒤 스킬화하는 실전 만들기 흐름
- 반복 작업이 생기거나 지식 컷오프 때문에 매번 검색을 시켜야 할 때가 스킬을 만들 타이밍

#클로드코드 #ClaudeCode #스킬 #ClaudeSkill #에이전트스킬 #SKILLmd #프론트매터 #CLAUDEmd #하네스엔지니어링 #ContextEngineering #AI에이전트 #LLM #한글자동화 #코딩생산성 #바이브코딩 #VibeCoding #커서 #코덱스 #토큰절약 #프로젝트설정 #개발자도구

Cursor Composer 2.5가 나온 뒤, 벤치마크 숫자보다 실제로 무엇이 얼마나 빨리·얼마나 완성도 있게 나오는지가 궁금하다면 이 영상이 도움이 됩니다. 바이브 코딩만 할 때 요금제 고민이라면 Codex 성능은 인정하면서도 Cursor를 쓰는 이유, 그리고 미리 만들어 본 네 가지 데모와 라이브로 붙인 Threads 대시보드까지 한 번에 정리합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 Composer 2.5 소개와 데모 영상을 만든 이유
0:38 Composer 1 시절 대비 모델 업그레이드 속도
0:51 벤치마크 대신 실사용 데모로 검증
1:13 미리 진행한 프로젝트 다섯 가지 개요
1:27 터미널에서 프로젝트별 실행·리뷰 시작
1:53 Artemis Mission Control(지구–달 궤적 시뮬레이션)
3:33 엔터테인먼트사 시네마틱 랜딩페이지(디자인 자율 검색)
5:33 파티클·스포트라이트 등 와우 연출, 약 3분 제작
6:00 SaaS 구독형 랜딩(원샷, 한국어·요금제·데모 UI)
8:55 SparkCam: 카메라 화면 터치 반응 React Native 앱
12:28 타로카드 앱은 보류, 라이브 Threads 대시보드로 전환
12:52 에이전트 모드·프롬프트·멀티태스크 선택
15:07 공정한 테스트를 위한 새 폴더·컨텍스트 차단
16:02 Best-of-N, 디자인 이미지 없이 자율 검색
17:21 약 2분 만에 완성된 Threads 소셜 애널리틱스 대시보드
18:43 자연스러운 톤·Paperlogy·한국어 메뉴 수정
20:53 애니메이션 추가·와이드 화면 정렬 보정
23:17 Cursor Pro(약 20달러) 사용량과 마무리

오늘 다룬 내용
- Codex는 여전히 강하지만, 바이브 코딩만 할 때 Cursor 요금제를 추천하는 이유
- Artemis Mission Control: 공개 프롬프트 기반, 짧은 시간에 궤적·속도 시뮬레이션
- 디자인 레퍼런스 없이 “디자인은 네가 검색” 지시로 만든 엔터테인먼트 랜딩
- SaaS형 구독 사이트를 원샷으로: 한국어, 요금제, 가짜 라이브 데모·결제 문구
- SparkCam: 촬영 중 터치에 반응하는 모바일 앱, 시뮬레이터·실기 테스트 이슈
- 라이브 Threads 대시보드: 더미 데이터, 인사이트·랭킹 UI, 후속 디자인·한글·애니메이션 튜닝
- 새 프로젝트 폴더·Best-of-N으로 “기존 작업물 끌어다 쓰기” 오해를 피하는 방법

#Cursor #Composer #Composer25 #바이브코딩 #AI코딩 #코딩에이전트 #CursorAI #Codex #프롬프트엔지니어링 #랜딩페이지 #SaaS #ReactNative #Threads #소셜미디어 #대시보드 #UI디자인 #프론트엔드 #개발도구 #AI개발 #에이전트모드 #BestOfN #시뮬레이션 #Artemis #모바일앱 #한국어개발

AntiGravity IDE를 처음 설치한 뒤, Cursor Composer로 만든 Threads 대시보드와 동일한 프롬프트로 Gemini Flash 성능을 재현 테스트합니다. AntiGravity와 IDE 분리 논란, 초기 설정, Claude Code 확장 이슈, 완성도·속도·디자인 문서 처리까지 실사용 관점에서 정리했습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 AntiGravity IDE 리뷰 목적과 AntiGravity·IDE 분리 배경
0:42 첫 설치·온보딩(Flat, 라이트 테마, Agent Development, 배포 확인 끔)
2:35 CLI·SDK 기본값, InWave, Discord 기반 UI
3:32 VS Code 확장(Claude Code) 검색·마켓 이슈
4:14 Cursor와 동일 프롬프트로 Threads 대시보드 재현 테스트 시작
4:44 기존 Cursor 결과(Threads Pulse)와 비교 기준 소개
5:44 Gemini Flash로 빌드·플랜 단계(영어 응답·바닐라 JS)
7:58 1차 localhost 결과와 Cursor 대비 완성도
8:59 한국어·Paperlogy·디자인 참조 이미지 추가 프롬프트
10:11 제품 관점 차이(분석 대시보드 vs 검색·글쓰기 UI)
11:07 DESIGN.md 미생성 vs Cursor 자동 문서화
12:00 수정 속도·레이아웃·리소스 한계 재확인
14:02 최종 비교(속도·완성도·DESIGN.md·한국어 응답)
15:14 패널 우측 배치·Claude Code 사용 팁
17:04 스킬·에이전트 숨김 폴더를 IDE로 보는 이유
18:01 마무리·가이드 영상 요청 안내

오늘 다룬 내용
- AntiGravity와 AntiGravity IDE 분리 후 IDE가 VS Code형 코딩 경험을 담당
- 첫 설치 온보딩: Flat 스타트업, 라이트 테마, Agent Development(배포 확인 최소화)
- Cursor Composer Threads 대시보드와 동일 프롬프트·Gemini Flash 재현 벤치마크
- 1차 결과는 속도는 빠르나 오프닝·이미지·한국어 UI·전문가 뷰 완성도에서 Cursor 쪽이 유리
- DESIGN.md를 요청하지 않아도 Cursor는 자동 생성, AntiGravity IDE는 색·토큰 위주 반영에 그침
- 한국어 입력에도 에이전트·UI가 영어로 동작 → AGENTS.md로 한국어 응답 유도
- Claude Code 확장은 마켓·Open VSX 갱신 이슈가 있었으나 업데이트 후 설치 가능
- 패널 Move to Right로 기존 Claude Code 레이아웃에 가깝게 사용 가능

#AntiGravity #AntiGravityIDE #Cursor #Composer #GeminiFlash #ClaudeCode #AI코딩 #바이브코딩 #VSCode #IDE리뷰 #Threads #대시보드 #웹개발 #프롬프트 #에이전트 #DESIGNmd #AGENTSmd #한국어 #개발도구 #구글AI #코딩에이전트 #실사용리뷰 #AI도구비교

신간 《바로바로 바이브코딩》 소개 + 커서 기반 에이전트 입문이 왜 지금 괜찮은 선택인지, 책만의 학습 설계·부록·앞으로 올릴 절 단위 강의 계획까지 한 번에 정리했습니다. 도서 설명회 성격으로, 프롬프트 복사 사이트·독자 전용 자료(구매자 한정)·워밍업·퀴즈·진도표·체크리스트 등 실제로 어떻게 쓰면 좋은지도 짚습니다. 트렌드만 쫓기보다 DB·프레임워크 등 ‘기초 체력’을 왜 먼저 잡아야 하는지에 대한 저자 관점도 담겨 있습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 신간 소개, 주 3회 강의 계획, 《바로바로 바이브코딩》 컨셉
0:30 커서를 입문 도구로 두기 좋은 이유
0:55 책 구성: 바이브코딩 개념·실습, 겉과 속이 다른 점
1:14 추천의 글 감사 인사
1:48 장점 ① 편집자 제작 프롬프트 복사 사이트
2:50 독자 전용 실습 링크·약 200페이지 분량 보너스 PDF(구매자, 영상에서는 블러)
4:14 학습 설계: 워밍업, 막히는 지점 노트, 1:1 코칭 코너, 퀴즈·총정리
5:19 목차 흐름: 에이전트·DB·크롤링·클린 아키텍처·실전 프로젝트·보너스 영상 안내
6:19 바이브코딩 준비: 윈도/맥 설치 가이드(파이썬·노드), 영상 보완 예정
7:16 터미널·문서 작업, 커서 요금제·업무 활용 팁
8:17 커서 최근 변화, 1~2달 커서로 입문 후 넘어가기
9:31 골든래빗 출판사 직원 소개, 가격·풀컬러·보너스 자료 강조
11:29 트렌드 공부 vs 문제 해결·기초 체력(예: DB 이해의 중요성)
13:53 앞으로 영상: 목차 절 단위 업로드, 보너스 PDF 내용은 영상에서 비공개
15:50 제작에 도움 주신 분들 감사, 질문 채널·카톡방 안내, 마무리

오늘 다룬 내용
- 《바로바로 바이브코딩》이 겨냥하는 독자(입문·커서·에이전트)와 책의 실제 성격(개념 압축 + 실습)
- 프롬프트 복사 사이트, 독자 전용 실습·대용량 보너스 PDF(구매자 한정) 정책
- 워밍업·노트·퀴즈·진도표·체크리스트 등 학습 설계와 목차 전개(DB·크롤링·클린 아키텍처 등)
- 설치·터미널·문서 작업 등 ‘막 코딩’이 아닌 준비 과정의 중요성
- 트렌드보다 기초를 다지는 이유와 앞으로 절 단위 무료 강의 업로드 계획

#바이브코딩 #Cursor #에이전트 #AI코딩 #프롬프트엔지니어링 #입문 #개발입문 #골든래빗 #바로바로바이브코딩 #클린아키텍처 #데이터베이스 #터미널 #업무자동화 #AI활용 #신간소개

신간 강의 첫 화—윈도우에서 바이브 코딩 시작하기 전에 꼭 해둘 환경 세팅을 화면 보며 점검합니다. Python·Node.js·Git 설치부터 Cursor 가입·구독 관리, 인터페이스·모드·모델까지 한 번에 정리합니다. 도서는 쪽수를 밝히고 그 범위 안에서만 진행하며, 맥 전용 안내는 다루지 않고 Windows 기준으로만 실습합니다. 프롬프트를 잘 쓰는 법, IDE·에이전트 개념, VS Code와의 관계, On-demand 과금 주의까지 같이 짚습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 인트로 — 신간 첫 강의, 바이브 코딩 전 세팅
0:18 쪽수 안내·영상 진행 방식
0:37 Windows만 진행(맥 맹공수 유저 제외), Cursor는 Win/Mac 동일
0:46 Python 설치가 먼저 — 명령 프롬프트에서 확인
1:09 python --version, 버전·삭제·재설치
2:43 python.org·Python Install Manager로 설치
3:33 잘못 설치 시 클린 삭제 후 재설치
4:26 Node.js 설치·node --version
5:43 Git 설치·git --version
6:51 책 의도·바이브 코딩과 프롬프트 학습
7:45 IDE란 무엇인가 — Cursor는 AI가 붙은 IDE
9:00 에이전트 개념 — 폴더 정리·검색·코드까지
10:01 VS Code 베낀 게 아님 — 오픈소스 기반·Antigravity와 비교
13:58 cursor.com 가입·다운로드·구독 — 연간 청구 비추천
16:56 빌링에서 구독 취소 — 만료일까지 이용
18:28 On-demand 사용 주의 — 추가 과금 위험
19:34 설치 후 UI — 테마(Dracula 등)·레이아웃
22:56 대화 모드 — Agent / Plan / Ask(에스크)
25:54 Auto 모드·모델 선택·Composer·리스닝 모델
28:53 Context(컨텍스트)란 무엇인가
29:56 브라우저 자동화 끄기·토큰 절약
31:22 50페이지까지 진행 — 다음 영상 예고

오늘 다룬 내용
- Windows에서 Python·Node.js·Git 설치 및 명령 프롬프트로 버전 확인
- 설치 오류 시 클린 삭제 후 재설치하는 흐름
- 바이브 코딩 전에 알면 좋은 IDE·에이전트 개념과 VS Code·Cursor·Antigravity 관계
- Cursor 회원가입·월 구독·취소 시 만료일까지 사용·On-demand 옵션 주의
- 인터페이스·테마·에디터 모드 추천, Agent·Plan·Ask 모드와 모델(Composer 등)·컨텍스트·브라우저 설정

#바이브코딩 #Cursor #커서 #Python #NodeJS #Git #Windows #AI코딩 #프롬프트 #에이전트 #IDE #VSCode #프로그래밍입문 #코딩강의 #개발환경

애플 사이트를 Cursor로 클론하면서, 파일·이미지·플랜 모드·Composer까지 한 번에 익힙니다. 셋업 가이드 다음 강이라면 여기서부터 보시면 됩니다. 공용 에셋 받기, 폴더 열기, `index.html`로 Ask 모드 컨텍스트, 플랜으로 계획 세우고 빌드, 완료 후 브라우저로 확인하는 흐름을 따라갑니다. 마지막엔 “완벽히 같지 않다”는 한계와, 스크린샷·다중 이미지로 다듬는 법까지 짚습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 21페이지 시작, 바이브 코딩 본편 안내
0:17 워밍업·미리 알아두면 좋은 내용
0:42 실습 주제: 애플 사이트 따라 만들기
1:14 공용 파일 링크에서 실습 이미지 다운로드
1:50 드라이브 링크를 뷰어로 공유 설정
2:09 Open Folder, 바탕화면에 실습 폴더 만들기
2:54 Cursor가 폴더를 “보는” 이유, 에이전트에 폴더 상태 물어보기
3:34 이미지 압축 해제 후 프로젝트 폴더에 넣기
4:09 `index.html` 생성, Ask 모드로 진행
5:16 파일을 채팅에 넣고 “이 파일이 뭐야?” — 컨텍스트 집중 대화
6:15 Plan 모드, Composer, 책 프롬프트 복사 사이트
7:18 프롬프트 복사·붙여넣기로 실습
8:03 Plan 모드: 짧은 목적만 던져도 계획·질문·빌드까지
9:48 빌드 실행, Composer로 애플닷컴 클래식 스타일 제작
11:29 수정 후 Keep / Undo(되돌리기) 선택
12:45 할 일 목록으로 진행 상황 보기, 애플 사이트 구조 참고
14:06 완료 후 `index.html` 더블클릭 또는 에이전트에 열어달라고 하기
15:13 결과는 애플과 100% 동일하지 않음 — 바이브 코딩의 한계·숙제
16:15 스크린샷으로 레이아웃 개선 요청하기
17:24 이미지 다중 선택·드래그로 상품 이미지 반영
18:55 디자인은 모델 변경(예: 재미나 프로)도 시도해 볼 만함
19:50 오늘 51~60페이지까지, 다음 시간은 61페이지 사각 게임(모르는 것을 AI에게 알리는 연습)

오늘 다룬 내용
- 애플 스타일 사이트 클론 실습 전체 흐름(에셋·폴더·`index.html`)
- Ask 모드에서 파일을 컨텍스트로 넣어 “이 파일이 뭐야?”로 집중 대화
- Plan 모드 + Composer(구 컴포저 원)로 계획 수립 후 빌드, 프롬프트는 책 연동 사이트에서 복사
- 수정 적용 시 Keep/Undo, 할 일 목록으로 진행 확인
- 로컬에서 `index.html`로 결과 확인하는 방법
- 완성도 한계와 이미지·스크린샷으로 디테일을 잡는 방법, 모델 변경 팁
- 다음 강: 사각 게임으로 “AI가 모르는 것을 어떻게 지시할지” 예고

#바이브코딩 #Cursor #AI코딩 #애플사이트 #클론코딩 #Composer #플랜모드 #에이전트모드 #프롬프트 #웹개발입문 #코딩강의 #인공지능 #개발자 #프론트엔드 #AI활용

"커서만 써야 하나요?" "다른 도구는 안 되나요?" — 가장 많이 받았던 질문에 답하는 영상입니다. 바이브 코딩 도서 세 번째 강의로, 커서(Cursor)·클로드 코드(Claude Code)·구글 기반 AI 코딩 도구 세 가지를 동시에 사용해 동일한 실습을 진행합니다. 도구가 달라도 핵심 원리는 같다는 걸 사과 게임 만들기와 뉴스 크롤링 실습으로 직접 보여드립니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 강의 소개 – 세 가지 도구로 동일 실습을 진행하는 이유
1:27 폴더 세팅 방법 (커서·클로드 코드·구글 도구)
3:52 사과 게임이란? 지식 컷오프 개념
5:17 플랜 모드로 사과 게임 만들기 시작
7:42 빌드 결과 확인 및 게임 실행
11:08 로컬 서버 띄우기와 실행 방법
14:35 게임 로직 수정하기 (피드백 루프)
16:08 이미지 에셋 편집 팁 (배경 투명화)
20:50 커서 브라우저로 구글 뉴스 크롤링
24:02 CSV 파일 저장과 엑셀·스프레드시트 연동
26:01 크롤링 주의사항 (네이버 차단 이슈 등)
30:34 세 가지 도구 모드 비교 및 마무리

오늘 다룬 내용
- 커서·클로드 코드·구글 기반 AI 코딩 도구 세 가지로 동일 실습 병렬 진행
- 사과 게임(사각게임) 만들기를 통한 지식 컷오프 개념 이해
- 플랜 모드 vs 에이전트(패스트) 모드 비교
- 게임 로직 피드백과 반복 수정 과정 (사과 제거 후 빈 자리 유지 등)
- 커서 인앱 브라우저를 활용한 구글 뉴스 크롤링
- CSV 파일 저장 → 엑셀·구글 스프레드시트 연동 방법
- 크롤링 시 사이트별 차단 정책 주의사항

#바이브코딩 #커서 #Cursor #클로드코드 #ClaudeCode #AI코딩 #사과게임 #지식컷오프 #웹크롤링 #코딩입문 #AI도구 #바이브코딩도서 #프로그래밍 #AI개발 #플랜모드 #에이전트모드 #노코드 #CSV #구글뉴스 #크롤링실습

터미널은 해커들만 쓰는 어려운 도구가 아닙니다. 공항에서 비행기를 타기 위해 거치는 '창구'처럼, 컴퓨터와 소통하는 창구일 뿐이죠. 그런데 AI 에이전트 시대가 오면서 이 터미널이 다시 주목받고 있습니다. 에이전트가 텍스트 기반 명령어를 학습해 터미널을 자유자재로 다루기 때문인데요, 이번 강의에서는 터미널의 본질부터 마크다운을 활용한 문서·프레젠테이션 작업까지, 커서 하나로 실무에 바로 쓸 수 있는 흐름을 보여드립니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 강의 시작 및 도서 배송 안내
0:57 터미널이란 무엇인가 — 공항 터미널 비유
2:12 명령 프롬프트로 폴더 보기(dir, cd) 실습
3:19 GUI 이전 시대의 텍스트 기반 PC 조작
3:48 AI 에이전트가 터미널을 다시 중요하게 만든 이유
5:11 커서 에이전트로 폴더 생성·업무 구조 만들기 실습
6:35 바탕화면 정리 등 에이전트 활용 팁
8:41 3장 진입 — 커서로 문서 작업하기
9:06 마크다운이란 무엇인가 — 개발자들의 텍스트 약속
11:57 마크다운으로 '애플의 역사' 보고서 작성 실습
12:52 커서에서 마크다운 프리뷰 렌더링하는 법
14:17 마크다운을 워드(docx) 문서로 변환하기
15:10 Marp 확장 프로그램으로 프레젠테이션 만들기
17:41 에이전트에게 슬라이드 내용 보강·디자인 변경 시키기
19:58 커서 vs 클로드 코드 — 사무 작업에서의 차이
20:56 다음 강의 예고 및 마무리

오늘 다룬 내용
- 터미널의 개념과 AI 에이전트 시대에 터미널을 배워야 하는 이유
- 에이전트가 터미널 명령어로 폴더 생성·파일 정리를 자동 수행하는 과정
- 마크다운 문법의 탄생 배경과 기본 구조
- 커서에서 마크다운 프리뷰·워드 변환·Marp 프레젠테이션까지 이어지는 문서 작업 워크플로
- 커서와 클로드 코드의 사무 작업 활용 차이점

#바이블코딩 #커서AI #CursorIDE #터미널 #마크다운 #Markdown #Marp #프레젠테이션 #AI에이전트 #문서작업 #워드변환 #코딩강의 #비개발자코딩 #AI활용 #생산성 #사무자동화 #커서강의 #바이브코딩 #VibeCoding

커서(Cursor)로 바이브 코딩만 하시나요? 커서는 마인드맵, 흐름도, 수학 수식까지 시각화 문서작업에도 강력한 도구입니다. 이번 영상에서는 머메이드(Mermaid) 문법으로 마인드맵을 그리고, Draw.io로 흐름도를 만들고, 마크다운 안에서 수식까지 렌더링하는 과정을 실습합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

타임라인
0:00 오늘 실습 소개 (104페이지~)
0:37 커서·파이썬·Node.js 설치 (윈도우)
2:20 커서 로그인 및 20달러 요금제 세팅
3:53 작업 폴더 만들기 (Documentation)
4:29 머메이드(Mermaid) 마인드맵이란?
5:49 애플의 역사 마크다운 문서 작성 실습
6:28 마크다운 문서를 머메이드 마인드맵으로 변환
8:53 머메이드 라이브 에디터(mermaid.js.org) 활용법
9:46 머메이드 구문 오류 해결 팁
11:56 다른 머메이드 에디터 서비스 소개
13:43 AI 이미지 생성으로 마인드맵 꾸미기
15:02 Draw.io 확장으로 흐름도 만들기
17:00 수학 수식 입력 및 렌더링 (피타고라스 정리)
18:22 마크다운 문서작업의 미래와 마무리

오늘 다룬 내용
- 커서·파이썬·Node.js 윈도우 설치 과정 안내
- 머메이드(Mermaid) 문법으로 마크다운 기반 마인드맵 그리기
- 머메이드 라이브 에디터에서 시각화 결과 확인 및 오류 수정
- Draw.io 확장을 활용한 흐름도 작성
- 마크다운 내 수학 수식(LaTeX) 렌더링
- 정부 기관도 도입 중인 마크다운 문서작업의 중요성

#커서 #Cursor #마크다운 #Markdown #머메이드 #Mermaid #마인드맵 #바이브코딩 #문서작업 #시각화 #Drawio #흐름도 #수학수식 #AI코딩 #코딩입문 #개발자도구 #생산성 #노코드 #커서설치 #프로그래밍

바이브 코딩으로 웹사이트를 만들려면 HTML, CSS, JavaScript 세 가지 재료가 어떤 역할을 하는지 먼저 이해해야 합니다. 이번 영상에서는 각 기술의 역할을 눈으로 직접 확인한 뒤, 슬라이드 형태의 자기소개 페이지를 처음부터 만들어 보면서 프롬프트를 반복 수정하는 실전 과정을 함께 진행합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 4장 시작 — 바이브 코딩 본격 실습 안내
0:37 웹 기술의 세 가지 재료: HTML, CSS, JavaScript
1:48 순수 HTML로만 구성된 웹페이지 만들어 보기
3:13 CSS를 추가해 밋밋한 페이지에 메이크업 입히기
5:27 JavaScript 도입 — 다크 모드 전환 버튼 실습
7:01 자바스크립트의 역할 정리와 다음 단계 예고
8:33 슬라이드형 자기소개 페이지 기획
9:02 플래닝 모드로 전환하고 프롬프트 작성하기
10:15 가상 프로필을 마크다운으로 만들어 재료 준비
11:34 플래닝 결과 확인 후 빌드 실행
12:57 완성된 슬라이드 페이지 첫 확인과 문제점 파악
15:35 슬라이드 수 줄이기 — 반복 수정의 시작
16:36 웹 검색을 유도해 모던 디자인 트렌드 적용하기
18:54 디자인 개선 결과 확인과 추가 수정
19:59 한 번에 완벽하게 안 되는 게 정상인 이유
21:24 오늘 실습 정리와 다음 영상 예고 (132쪽부터)

오늘 다룬 내용
- HTML은 웹페이지의 골격 구조, CSS는 메이크업, JavaScript는 인터랙션 담당
- 순수 HTML → CSS 추가 → JavaScript 도입 순서로 각 기술의 역할을 눈으로 확인
- 가상 프로필을 마크다운으로 만들어 슬라이드형 자기소개 페이지 제작
- 플래닝 모드에서 계획을 세운 뒤 빌드하는 워크플로우 실습
- 프롬프트 한 번으로 완벽한 결과가 나오지 않으므로 반복 수정이 핵심
- 웹 검색을 컨텍스트로 활용해 디자인 품질을 끌어올리는 방법
- index.html 파일명 규칙 등 웹 개발 기본 상식 안내

#바이브코딩 #바이브코딩책 #커서AI #CursorAI #HTML #CSS #JavaScript #웹개발입문 #자기소개페이지 #슬라이드웹사이트 #AI코딩 #프롬프트엔지니어링 #코딩초보 #노코드 #웹사이트만들기 #바이브코딩실습 #AI개발 #커서IDE #플래닝모드 #웹디자인

예전에는 6만 원이 넘는 포커스 라이팅 툴을 사서 써야 했지만, 이제는 AI 에이전트와 함께 내 입맛에 맞는 노션 스타일 마크다운 글쓰기 도구를 직접 만들 수 있습니다. 이번 영상에서는 design.md라는 디자인 규격 문서를 활용해 일관된 디자인의 앱을 만들고, 버그를 수정할 때 에이전트에게 스스로 계획을 세우게 유도하는 프롬프팅 기법까지 알려드립니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 노션 스타일 마크다운 글쓰기 도구 소개
1:40 디자인 일관성 고민과 디자인 엠디의 등장
3:00 디자인 엠디(design.md)란 무엇인가
5:09 Claude 디자인 시스템 선택 및 활용법
5:39 Cursor에서 프로젝트 생성과 프롬프트 작성
7:00 에이전트의 빌드 계획 수립 과정
8:52 design.md 파일의 구조와 역할
9:49 빌드 완료 후 앱 실행 방법
11:17 완성된 마크다운 에디터 시연
12:52 나만의 앱으로 커스터마이징하기
15:22 PDF 내보내기 버그 발견과 수정
16:43 플랜 모드와 웹 서치를 활용한 디버깅 전략
19:57 에이전트에게 스스로 계획을 세우게 하는 팁
22:16 마무리 및 다음 시간 예고

오늘 다룬 내용
- 노션 스타일 마크다운 글쓰기 도구를 Cursor 컴포저로 만드는 과정
- design.md를 활용해 에이전트가 일관된 디자인을 구현하도록 유도하는 방법
- awesome-design-md 컬렉션에서 Claude 디자인 시스템을 가져와 적용하기
- PDF 내보내기 기능 추가와 인라인 코드 밀림·글자 짤림 버그 수정
- 에이전트 모드로 바로 시키지 않고 플랜 모드에서 계획을 세우게 유도하는 프롬프팅 기법
- 웹 서치로 해결 방법을 탐색하게 하고 스스로 명세를 만들게 하는 디버깅 전략

#바이브코딩 #커서 #Cursor #마크다운 #글쓰기도구 #노션스타일 #디자인엠디 #designmd #AI코딩 #프롬프트엔지니어링 #웹개발 #프론트엔드 #초보코딩 #바이브코딩입문 #AI에이전트 #클로드 #Claude #코딩교육 #앱만들기 #PDF내보내기

프론트엔드가 뭔지, 리액트는 왜 쓰는 건지 궁금하셨나요? 이번 영상에서는 리액트의 개념부터 시작해서 실제로 클리커 게임을 만들어보고, 리액트 네이티브와 엑스포를 이용해 모바일 앱으로 전환하는 과정까지 한 번에 다룹니다. AI 에이전트 시대에 왜 리액트를 골라야 하는지, 그 이유가 명확해질 거예요.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 프론트엔드란 무엇인가
1:54 리액트 소개 — 셰프의 도구 비유
3:04 리액트를 써야 하는 이유와 AI 모델의 학습 데이터
5:30 리액트 클리커 게임 소개
5:57 게임 에셋 만들기 (젬이나이 + 어도비 배경 제거)
9:04 커서에서 프로젝트 세팅 및 개발 시작
11:49 플랜 모드로 게임 개발 계획 세우기
13:34 웹 브라우저에서 모바일 화면 확인하기
14:50 게임 실행 및 기능 테스트
16:01 게임 기능 추가 — 초당 수익, 애니메이션 효과
17:24 리액트 네이티브로 모바일 앱 전환
19:18 엑스포(Expo) 설치 및 모바일 연결

오늘 다룬 내용
- 프론트엔드의 정의 — 웹뿐 아니라 게임, 셋톱박스 등 화면에 보이는 모든 것
- 리액트를 써야 하는 이유 — AI 모델이 리액트 코드를 압도적으로 잘 알고 있다
- 리액트 클리커 게임 개발 — 에셋 준비부터 커서로 게임 완성까지
- 프롬프트 하나로 게임 기능 확장하기 — 초당 수익, 레벨업 애니메이션
- 리액트 네이티브 + 엑스포로 웹 게임을 모바일 앱으로 전환하는 방법

#프론트엔드 #리액트 #React #리액트네이티브 #ReactNative #클리커게임 #바이브코딩 #커서AI #Cursor #엑스포 #Expo #웹개발 #모바일앱개발 #AI코딩 #비개발자코딩 #코딩입문 #게임개발 #프롬프트엔지니어링 #노코드 #에이전트시대

오늘은 Next.js의 핵심 개념을 짚고, 실제로 인테리어 업체 랜딩페이지를 만들면서 Cursor의 내장 브라우저로 UI를 빠르게 수정하는 방법까지 실습합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 Next.js란 무엇인가 — React의 약점을 보완한 파생 프레임워크
1:06 서버사이드 렌더링(SSR)의 핵심 개념
1:43 React의 빈 화면 문제와 검색엔진 최적화
2:40 기술 이사 — 프레임워크가 바뀌어도 흔들리지 않는 배경지식
3:12 실습 안내: 인테리어 업체 랜딩페이지 만들기
4:07 프로젝트 폴더 생성 및 프롬프트 작성
5:32 목업 데이터로 프론트엔드 화면 구성하기
5:58 디자인 템플릿 적용 및 DESIGN.md 작성
7:36 계획 검토 및 업체 컨셉 기획 (페인트 좌)
10:50 Cursor 내장 브라우저로 UI 요소 선택·수정하기
13:42 셀렉트 엘리먼트 기능으로 세부 디자인 조정
15:19 다크모드·라이트모드 토글 구현 및 수정
16:36 큐 기능으로 작업 중 수정사항 끼워넣기
17:08 마무리

오늘 다룬 내용
- Next.js는 React 기반의 프레임워크로, SSR을 통해 검색엔진 최적화 문제를 해결한다
- React는 빈 화면을 먼저 보여주고 렌더링하지만, Next.js는 미리 완성된 화면을 제공한다
- 기술 프레임워크는 계속 바뀌므로 왜 이동하는지 배경지식을 갖추는 것이 중요하다
- 디자인 템플릿과 DESIGN.md를 활용하면 일관된 UI를 빠르게 구성할 수 있다
- Cursor 내장 브라우저의 셀렉트 엘리먼트 기능으로 원하는 UI 요소를 직접 지정해 수정할 수 있다
- 큐 기능을 활용하면 에이전트 작업 중에도 추가 수정사항을 끼워넣을 수 있다

#NextJS #React #서버사이드렌더링 #SSR #프론트엔드 #웹개발 #커서AI #CursorAI #인테리어사이트 #랜딩페이지 #다크모드 #디자인템플릿 #AI코딩 #코딩입문 #웹사이트만들기 #프론트엔드개발 #리액트 #넥스트JS #AI에이전트 #코딩강의

이번 영상에서는 브라우저 내장 저장소인 로컬 스토리지의 개념부터, 실제로 CRUD 기능을 갖춘 메모 앱을 설계하고 구현하는 전 과정을 함께 진행합니다. 디자인 템플릿 적용, 달력 기능 추가, 그리고 개발자 도구로 데이터가 어떻게 저장되는지 눈으로 직접 확인하는 것까지 — 나만 쓸 간단한 웹 앱, 생각보다 쉽습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 인스타그램 사이트 실습 안내 및 스킵 이유
0:28 서버 포트 관리의 중요성 (터미널 정리법)
4:23 로컬 스토리지란 무엇인가
5:18 다크 모드 설정이 유지되는 원리
5:48 개발자 도구에서 로컬 스토리지 확인하기
6:22 로컬 스토리지 vs 데이터베이스 비교
7:40 뽀모도로 타이머 예제로 보는 로컬 스토리지 활용
9:28 메모 앱 설계 시작 — 프롬프트 작성과 CRUD 개념
12:01 CRUD 용어 정리 (Create, Read, Update, Delete)
14:19 플랜 모드로 설계 진행 및 디자인 템플릿 적용
16:51 완성된 메모 앱 테스트 및 로컬 스토리지 데이터 확인
22:15 달력 기능 추가 요청 및 핫 리로드 확인
24:57 달력 연동 후 날짜별 메모 관리 확인
25:57 다음 시간 예고 — 디자인 라이브러리와 프레임워크

오늘 다룬 내용
- Next.js 개발 시 서버 포트가 쌓이는 문제와 터미널 정리 방법
- 로컬 스토리지의 개념과 데이터베이스 대비 장단점
- CRUD(Create, Read, Update, Delete) 용어와 메모 앱 설계
- 디자인 템플릿을 활용한 UI 적용 과정
- 커서 에이전트를 활용한 바이브 코딩으로 메모 앱 구현
- 개발자 도구(F12)로 로컬 스토리지 데이터 직접 확인
- 달력 기능 추가와 핫 리로드를 통한 실시간 반영 확인

#바이브코딩 #커서AI #Cursor #Next.js #로컬스토리지 #LocalStorage #메모앱 #웹개발 #프론트엔드 #CRUD #코딩입문 #노코드 #웹앱만들기 #개발자도구 #디자인템플릿 #핫리로드 #포트관리 #뽀모도로 #자바스크립트 #리액트

바이브 코딩 6장, 디자인이 내 마음대로 안 나온다는 고민을 해결하는 방법을 다룹니다. 디자인보다 중요한 건 문제 해결이라는 관점에서 시작해, Tailwind CSS·shadcn/ui·Tweaks 같은 디자인 도구를 활용하는 법을 배우고, 실제로 학생 관리 시스템을 Next.js + Prisma + SQLite로 만들어보며 데이터베이스까지 연결하는 과정을 실습합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 디자인 고민과 바이브 코딩의 본질 (구글은 예쁜가?)
2:17 라이브러리와 프레임워크 개념 정리
3:31 프레임워크는 프랜차이즈다 — 주도권의 차이
5:11 Tailwind CSS가 바이브 코딩 시대에 사랑받는 이유
6:12 Bootstrap, shadcn/ui 소개
7:28 Tweaks로 테마 한 방에 바꾸기
10:32 네오 브루탈리즘 테마 적용 실습
12:32 마음에 안 드는 디자인 부분 수정하는 법
15:03 v0 서비스 — 디자인 특화 에이전트 소개
18:52 학생 관리 시스템 만들기 실습 시작
20:37 Prisma 통역사와 SQLite 데이터베이스 구조
25:28 리치 텍스트 에디터(Tiptap)로 상담 기록 기능 추가
27:29 완성된 시스템 테스트 및 더미 데이터 입력
32:42 마무리 — 6장 전체 정리

오늘 다룬 내용
- 디자인보다 문제 해결이 먼저라는 관점 (구글 사이트는 예쁘지 않아도 사람들이 찾는다)
- 라이브러리(도서관에서 책 빌리기)와 프레임워크(프랜차이즈 룰 따르기)의 차이
- Tailwind CSS, Bootstrap, shadcn/ui, Tweaks 등 디자인 도구 비교와 활용법
- v0 서비스로 디자인 퀄리티를 높이되 비용을 아끼는 전략
- Next.js + Prisma + SQLite 조합으로 로컬 데이터베이스 기반 학생 관리 시스템 구축
- 리치 텍스트 에디터(Tiptap)를 활용한 상담 기록 기능 구현
- 에이전트에게 더미 데이터 입력까지 시키는 실전 팁

#바이브코딩 #VibeCoding #프론트엔드 #TailwindCSS #shadcn #Tweaks #v0 #NextJS #Prisma #SQLite #커서 #Cursor #디자인도구 #웹개발 #코딩입문 #프레임워크 #라이브러리 #학생관리시스템 #데이터베이스 #AI코딩 #바이브코딩크래프트비어

이번 영상에서는 Cursor의 Rules, AGENTS.MD, CLAUDE.MD가 실제로 어떻게 동작하는지 원리부터 짚고, 직접 에이전트 지침을 작성해서 테트리스 게임까지 만들어 봅니다. 형태는 달라도 "채팅 전에 미리 로드되는 지침 문서"라는 핵심 컨셉만 이해하면, 어떤 AI 코딩 도구든 바로 적용할 수 있습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 7장 시작 — AGENTS.MD·스킬·서브 에이전트 소개
0:50 Cursor 설정에서 Rules 확인하기
1:48 에이전트가 채팅 전에 문서를 로드하는 원리
2:48 Always speak Korean → English 전환 데모
4:34 반복 지침을 AGENTS.MD로 대체하는 이유
5:46 CLAUDE.MD vs AGENTS.MD vs Cursor Rules 차이와 통합 흐름
7:15 User Rule과 Project Rule 구분
8:32 실습: AGENTS.MD 직접 작성시키기
9:55 AI에게 AGENTS.MD 문서 자동 작성 맡기기
12:12 AGENTS.MD + DESIGN.MD 세팅 확인
13:30 테트리스 게임 생성으로 에이전트 지침 검증
14:49 주의점 — AGENTS.MD는 짧게 유지하라
15:55 디자인 시스템 적용된 테트리스 결과 확인
18:57 완성된 프로젝트 브라우저에서 실행
20:23 로컬 DB 연동으로 점수 기록 기능 추가
22:15 마무리 및 다음 영상 예고

오늘 다룬 내용
- AGENTS.MD는 에이전트가 채팅 시작 전에 항상 로드하는 지침 문서다
- Cursor Rules, AGENTS.MD, CLAUDE.MD는 이름만 다를 뿐 동일한 컨셉이다
- User Rule은 모든 프로젝트 공통, Project Rule은 해당 프로젝트 전용으로 구분한다
- AGENTS.MD에 기술 스택과 디자인 규칙을 등록하면 매번 채팅에서 반복 설명할 필요가 없다
- AGENTS.MD는 너무 길면 컨텍스트가 지저분해지므로 짧고 핵심만 담는다
- 에이전트가 지침을 읽어도 판단에 따라 건너뛸 수 있으므로 결과를 관찰하고 조절해야 한다

#AGENTSMD #AI코딩 #커서IDE #Cursor #클로드코드 #ClaudeCode #Codex #바이브코딩 #에이전트지침 #CursorRules #프롬프트엔지니어링 #NextJS #Prisma #SQLite #AI개발 #코딩자동화 #개발생산성 #웹개발 #테트리스 #DESIGNMD

에이전트에게 반복 작업을 맡기고 싶은데, 매번 같은 설명을 해야 한다면 스킬(Skill)을 써야 할 때입니다. 이번 영상에서는 스킬의 원리부터 직접 만들어 쓰는 법, 그리고 남이 만든 스킬을 가져다 쓰는 법까지 실습으로 보여드립니다. AGENTS.md가 큰 가닥을 잡아주는 녀석이라면, 스킬은 뾰족한 작업을 정확하게 처리하게 만드는 녀석입니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 오늘 주제 소개 — 스킬이란 무엇인가
0:31 스킬의 내부 구성: 문서 + 리소스(코드, 이미지 등)
1:33 스킬을 써야 하는 시나리오
2:24 스킬이 필요한 대표적 증상: 반복되는 세팅
3:03 스킬과 AGENTS.md의 차이 — 항상 로드 vs 필요할 때 참조
4:01 Cursor에서 create-skill로 스킬 직접 만들기
5:46 스킬 범위 설정: 유저 전역 vs 프로젝트 한정
7:13 실습 — 고객 이벤트 대응 이메일 스킬 만들기
9:08 에이전트가 스킬을 고르는 원리: 프런트매터의 description
10:11 두 번째 스킬 추가 — 사내 동료용 이메일 스킬
11:37 스킬 테스트: 동료에게 보내는 메일 자동 작성
13:48 남이 만든 스킬 가져다 쓰기 — Smithery, Skill SMP
15:25 외부 스킬 예시: Market Research Report 설치와 사용
17:16 새 채팅 세션에서 스킬 사용법과 사용법 질문 팁
20:14 스킬 구조대로 동작하지 않을 때 피드백 주는 법
22:47 정리 및 마무리 — 228쪽까지 진행 완료

오늘 다룬 내용
- 스킬은 AGENTS.md와 달리 에이전트가 필요할 때만 프런트매터를 보고 선택적으로 참조하는 구조
- create-skill 명령으로 스킬을 직접 만들 수 있으며, 유저 전역 또는 프로젝트 단위로 범위 설정 가능
- 고객용·사내용 이메일 스킬을 각각 만들어 에이전트가 상황에 맞는 스킬을 자동 선택하는 과정 시연
- Smithery, Skill SMP 등 외부 마켓에서 13만 개 이상의 스킬을 다운로드해 프로젝트에 추가 가능
- 스킬은 특정 에이전트 전용이 아니라 Cursor, Claude Code, Codex 등 어디서든 공유해서 사용 가능

#커서 #Cursor #AI에이전트 #스킬 #Skill #AGENTS #프롬프트엔지니어링 #AI자동화 #이메일자동화 #createskill #Smithery #SkillSMP #AI코딩 #커서스킬 #에이전트스킬 #AI업무자동화 #커서강의 #AI도구 #생산성 #노코드

커서로 만든 자기소개 사이트를 GitHub Pages에 무료로 배포하는 전 과정을 다룹니다. 서브 에이전트의 개념부터, 서버·로컬호스트·포트 번호 같은 배포 기초 용어, 정적 페이지와 동적 페이지의 차이, 그리고 실제로 HTML/CSS/JS 정적 사이트를 GitHub Pages에 올려 누구나 접속할 수 있게 만드는 실습까지 한 영상에 정리했습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 서브 에이전트란 무엇인가
1:31 서브 에이전트의 동작 방식과 활용 시점
3:17 프론트엔드 디자인 서브 에이전트 예시
5:05 배포(Deploy)란 무엇인가
5:46 서버와 로컬호스트 개념 이해
7:28 포트 번호가 필요한 이유
8:34 배포 서비스 소개 — Vercel, GitHub Pages
9:39 정적 페이지 vs 동적 페이지
10:52 커서에서 자기소개 사이트 만들기 실습
16:15 HTML·CSS·JS만으로 정적 페이지 구성
22:13 GitHub Pages에 배포하고 수정 반영하기
26:45 정리 및 다음 시간 예고

오늘 다룬 내용
- 서브 에이전트: 복합 작업을 분리해 컨텍스트 집중도를 높이는 방법
- 배포의 기본 개념 — 로컬호스트(내 컴퓨터)에서 우주(인터넷)로 올리기
- 로컬호스트와 포트 번호의 역할
- 정적 페이지(단방향)와 동적 페이지(양방향)의 차이
- 디자인 레퍼런스와 자기소개 문서를 활용한 사이트 제작
- GitHub Pages를 이용한 무료 정적 사이트 배포 및 업데이트 흐름
- 다음 시간 예고: Vercel을 이용한 동적 사이트 배포

#커서 #Cursor #AI코딩 #서브에이전트 #배포 #Deploy #GitHubPages #정적사이트 #웹개발 #자기소개사이트 #포트폴리오 #HTML #CSS #JavaScript #Vercel #웹배포 #코딩입문 #개발자도구 #AI에이전트 #노코드

250페이지(영상에서는 259페이지 예제 흐름)부터 이어서, 일정·프롬프트처럼 시트에만 적어두기 불편한 데이터를 구글 스프레드시트를 무료 저장소처럼 쓰고, Cursor 에이전트로 검색·복사까지 되는 앱으로 만든 뒤 GitHub와 Vercel로 배포하는 과정을 보여 줍니다. DB 도입 전 단계에서 스프레드시트로 시작하는 이유와, 데이터가 많아질 때 필요한 페이지네이션·모달·테마·모바일 보완까지 한 흐름으로 다룹니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 강의 재개·커서 연속 영화·클라우드 동향 잠깐 언급
1:03 일정 데이터 저장 위치와 DB 없이 시작하기·구글 시트 연동 개요
2:01 책의 일정 공지 예제와 데모 방향(프롬프트 복사 사이트)
2:39 스프레드시트 데이터를 읽어 검색·복사 UI로 보여 주는 예시
4:16 Cursor 새 폴더·프롬프트 시트 준비·공유 링크(뷰어) 설정
5:50 플랜 모델로 상세 계획·스프레드시트 기반 검색·테이블·복사 사이트 요구사항
8:11 원페이지·비로그인·디자인 MCP·한글 폰트 등 에이전트에 넣을 옵션
9:25 플랜 검토·빌드·공개 시트면 불필요한 API 설정 정리
11:18 스프레드시트를 DB 대용으로 쓰는 이유·규모감·보안 관점
13:07 데이터 증가 시 UI 문제·페이지네이션·긴 프롬프트는 생략 후 모달로 전문 표시
15:35 다크·라이트 모드·모바일 개발자 도구로 반응형 점검
17:58 로컬호스트의 한계·GitHub 저장소 생성·푸시
18:28 Vercel 연동·Import·Deploy로 공개 URL 배포
21:04 마무리·Codex·Claude Code 등 다른 에이전트로도 동일하게 가능

오늘 다룬 내용
- 구글 스프레드시트를 공개(뷰어) 링크로 두고 웹에서 데이터 소스로 활용하는 흐름
- Cursor 에이전트·플랜 모드로 요구사항(검색·테이블·복사·원페이지·비로그인·디자인 MCP) 정리 후 빌드
- 데이터가 많아질 때 페이지네이션과 긴 텍스트는 줄임·모달로 상세 보기
- 다크·라이트 테마와 모바일 뷰포트 점검
- GitHub에 푸시 후 Vercel에서 프로젝트 Import·배포해 친구와 공유 가능한 URL 만들기
- 별도 DB 없이 시작할 때 스프레드시트를 쓰는 실무적인 단계와 한계 인식

#Cursor #코딩에이전트 #구글스프레드시트 #스프레드시트 #노코드DB #웹배포 #Vercel #GitHub #프론트엔드 #원페이지 #페이지네이션 #모달 #다크모드 #반응형웹 #로컬호스트 #클라우드호스팅 #AI코딩 #프롬프트관리 #검색기능 #복사UI #플랜모드 #디자인MCP #프로그래밍강의 #개발입문 #사이드프로젝트

회원가입 기능을 만들고 싶다면 이제 데이터베이스를 도입할 차례입니다. 이번 영상에서는 데이터베이스와 DBMS의 차이부터 시작해 관계형 데이터베이스(RDBMS)와 문서형 데이터베이스의 차이를 정리하고, Next.js와 데이터베이스를 이어주는 통역관인 ORM(Prisma) 개념을 설명한 뒤, 로컬 SQLite 기반의 스터디 게시판을 회원가입과 리치 텍스트 에디터까지 포함해 직접 만들어 봅니다. 비밀번호 평문 저장을 금지하고 해시로 안전하게 저장하는 방법, 그리고 prisma/schema.prisma 모델이 실제 테이블 구조와 어떻게 대응되는지까지 한 번에 정리합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 데이터베이스 도입 시점과 사전 준비
0:34 바이브 코딩에서도 DB와 구글 로그인이 어려운 이유
1:02 데이터베이스 vs DBMS 용어 정리
1:48 관계형 데이터베이스(RDBMS) 구조와 장점
4:00 문서형 데이터베이스와 JSON 형식 이해
5:04 중복 허용·읽기 속도 등 두 DB의 트레이드오프
6:00 RDBMS와 문서형 DB의 선택 기준
6:30 ORM이란? DB와 웹사이트 사이의 통역관
8:45 스터디 게시판 프로젝트 시작과 Plan 모드
11:13 Bugatti 디자인 시스템 적용 의뢰
11:56 회원가입 기능과 비밀번호 해시 요구사항
13:35 패스워드 해시 적용 여부 확인
15:22 Prisma ORM 적용 과정에서 발생하는 오류 대응
16:00 회원가입·로그인·글쓰기 동작 확인
17:24 한글 폰트(Pretendard)와 에디터 UI 개선
19:15 prisma/schema.prisma 스키마와 모델 살펴보기
21:31 관리자 모드로 실제 DB 데이터(해시된 비번) 확인
22:31 마무리 및 다음 영상 예고 (Supabase 배포)

#바이브코딩 #vibecoding #커서 #CursorAI #데이터베이스 #DB입문 #RDBMS #관계형데이터베이스 #문서형데이터베이스 #NoSQL #ORM #Prisma #프리즈마 #SQLite #NextJS #넥스트JS #타입스크립트 #회원가입 #비밀번호해시 #암호화 #스터디게시판 #리치텍스트에디터 #Pretendard #웹폰트 #Supabase #슈퍼베이스 #풀스택개발

5월 연휴를 마치고 다시 슈퍼베이스 데이터베이스 배포 영상으로 돌아왔습니다. 오늘은 가상 커뮤니티 사이트를 바이브 코딩으로 빠르게 만들고, 도커 이슈를 우회해 SQLite + Prisma 조합으로 로컬 데이터베이스를 붙인 다음, 구글 클라우드 콘솔에서 OAuth 인증까지 직접 연동해 봅니다. 난이도가 한 단계 올라가는 구간이라, 책 285쪽 전후 흐름과 함께 보시면 훨씬 수월합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 5월 연휴 인사와 오늘의 학습 주제 안내
0:17 슈퍼베이스 데이터베이스 배포의 난이도 예고
0:32 9장까지 무료 공개, 10장은 후원자 전용 영상 안내
2:37 슈퍼베이스와 파이어베이스 중 슈퍼베이스를 고른 이유
4:02 가상 커뮤니티 사이트로 실습 주제 변경
5:47 프로젝트 폴더 생성과 플랜 모드로 컨텍스트 만들기
7:18 styles repo design 사이트로 디자인 레퍼런스 확보
9:50 플랜 결과 확인 후 프론트엔드 빌드 시작
12:20 프론트엔드 화면 점검과 Pretendard 폰트 적용
16:43 슈퍼베이스 로컬 세팅 시도와 도커 데스크톱 설치
19:51 도커 포기, SQLite + Prisma 조합으로 전환
23:24 로컬에서 회원가입·로그인·글쓰기 권한 테스트
25:32 구글 클라우드 콘솔에서 OAuth 동의 화면 만들기
29:38 OAuth 클라이언트 ID와 리디렉션 URI 등록
31:18 클라이언트 시크릿 JSON을 커서에 넘겨 세팅
35:53 실제 구글 계정으로 로그인하고 글쓰기 검증
38:13 OAuth 동작 원리 정리와 다음 영상 예고

오늘 다룬 내용
- 가상 커뮤니티 사이트를 바이브 코딩으로 회원가입·로그인·글쓰기까지 구현
- 플랜 모드와 디자인 레퍼런스를 활용해 컨텍스트를 충분히 만들고 개발 시작
- 도커 데스크톱 이슈로 슈퍼베이스 로컬 대신 SQLite + Prisma 조합으로 전환
- 본인 글만 수정·삭제할 수 있도록 권한 분기까지 로컬에서 검증
- 구글 클라우드 콘솔에서 OAuth 클라이언트 ID 발급과 리디렉션 URI 등록 절차
- Pretendard 폰트 적용 등 한글 사이트 디자인을 다듬는 작은 팁
- 9장까지는 무료, 10장부터는 후원자 전용 영상으로 제공하는 운영 방향

#바이브코딩 #커서 #cursor #슈퍼베이스 #supabase #구글로그인 #OAuth #구글클라우드콘솔 #프리즈마 #prisma #SQLite #넥스트오스 #nextauth #커뮤니티사이트 #회원가입 #로그인 #프론트엔드 #백엔드 #로컬개발 #프리텐다드 #한글폰트 #도커 #docker #웹개발 #코딩공부

마지막 시간입니다. 로컬에 있던 데이터베이스를 Supabase로 옮기고, 프론트엔드는 Vercel에 배포해서 친구도 접속할 수 있는 진짜 웹 서비스로 마무리합니다. Supabase MCP를 커서에 연결해 프로젝트 생성과 스키마 마이그레이션을 명령 한 줄로 진행하고, Google 로그인까지 온라인에서 정상 동작하도록 환경변수와 리디렉트 URL을 한 번에 정리합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 오늘의 목표: DB 배포 + 프론트 배포 + 구글 로그인 마무리
1:03 데이터베이스부터 배포하는 이유와 Supabase MCP 소개
2:32 커서에 Supabase MCP 설치하고 인증 연결하기
5:36 MCP로 Supabase 프로젝트 새로 만들기 (서울 리전)
7:02 로컬 DB 스키마를 Supabase로 마이그레이션 (이사)
10:43 마이그레이션 결과 확인과 anon key 환경변수 연결
13:53 게시글 등록이 안 되는 문제 → 환경변수 입력으로 해결
14:19 Supabase Authentication에 Google Provider 등록
15:55 Site URL과 Redirect URL 설정 (브로커 구조 이해)
18:13 더미 데이터 정리 후 구글 로그인 테스트
20:14 Prisma 잔재였던 account/user 테이블 정리
22:43 프론트엔드 배포 준비: GitHub 리포지토리에 푸시
24:22 Vercel 프로젝트 임포트 + 환경변수(URL/anon key) 입력
27:31 배포 후 Supabase Site URL을 Vercel 주소로 갱신
29:39 배포된 주소에서 구글 로그인 + 글쓰기 최종 테스트
32:32 데이터가 Supabase에 실시간으로 쌓이는 것 확인
33:30 시리즈 마무리 인사와 이후 후원자 콘텐츠 안내

#커서 #CursorAI #Supabase #SupabaseMCP #MCP #Vercel #배포 #웹개발 #풀스택 #NextJS #프리즈마 #Prisma #구글로그인 #OAuth #환경변수 #스터디커뮤니티 #바이브코딩 #AI코딩 #개발강의 #데이터베이스 #마이그레이션 #프론트엔드 #백엔드 #SaaS

Google Workspace CLI가 왜 중요한지, 그리고 왜 이제는 에이전트에게 일을 시켜야 하는지 한 번에 정리한 영상입니다. 이번 영상에서는 설치부터 인증, API 권한 연결, 그리고 Codex로 Gmail/Drive/Sheets를 실제로 다뤄보는 흐름까지 보여드립니다. 처음 세팅이라 조금 복잡해 보일 수 있지만, 한 번 연결해두면 문서 작업과 반복 업무 자동화의 감각이 완전히 달라집니다. 세팅하다 막히는 부분이나 후속 실습이 궁금하시면 댓글로 남겨주세요.

**정정 : 영상 중에 크레딧을 쓰면서 자동화한다고 했는데 실제로는 크레딧을 아예 쓰지 않습니다. 기본적인 지메일, 시트, 독스, 드라이브 작업은 영상대로 세팅하시면 무료로 쓰실 수 있습니다.

**한도 정보
- Gmail API
- 프로젝트당 분당 1,200,000 quota units
- 사용자당 분당 15,000 quota units
- 요청마다 소모량이 다릅니다.
- 예: messages.list 5, messages.get 5, messages.send 100
- 공식 문서: https://developers.google.com/....workspace/gmail/api/
- Google Drive API
- 60초당 12,000 요청
- 사용자당 60초당 12,000 요청
- 추가 제한:
- 사용자 업로드/복사 총량 하루 750GB
- 업로드 가능한 최대 파일 크기 5TB
- 복사 가능한 최대 파일 크기 750GB
- 공식 문서: https://developers.google.com/....drive/api/guides/lim
- 폴더/아이템 수 관련 제한: https://developers.google.com/....workspace/drive/api/
- Google Sheets API
- 읽기: 프로젝트당 분당 300, 사용자당 분당 60
- 쓰기: 프로젝트당 분당 300, 사용자당 분당 60
- 권장 요청 크기: 2MB 이하
- 요청 처리 시간 제한: 180초
- 공식 문서: https://developers.google.com/....workspace/sheets/api
- Google Docs API
- 읽기: 프로젝트당 분당 3000, 사용자당 분당 300
- 쓰기: 프로젝트당 분당 600, 사용자당 분당 60
- 공식 문서: https://developers.google.com/....workspace/docs/api/l

타임라인
0:00 오늘 주제 소개와 핵심 메시지
1:11 Google Workspace와 CLI의 관계 설명
2:09 에이전트가 CLI 환경을 선호하는 이유
3:08 에이전트를 통해 Workspace를 다루는 구조
4:49 오늘 실습 목표 정리
5:27 GitHub 문서 기반 설치 시작
7:10 인증 준비와 gcloud 설정
15:14 OAuth 클라이언트 생성
18:01 Drive, Sheets, Gmail 등 API 활성화
19:24 Drive 파일 목록 확인으로 연결 테스트
23:13 Codex로 Gmail 읽기와 답장 실습
26:33 Drive 폴더 자동 생성 실습
28:46 Spreadsheet 생성과 밑작업 자동화
30:55 오늘 워크플로우 정리와 활용 방향

오늘 다룬 내용
- Google Workspace CLI를 왜 익혀야 하는지 큰 그림 설명
- 에이전트가 CLI를 통해 Gmail, Drive, Docs, Sheets를 다루는 방식
- 설치 후 gcloud 인증과 프로젝트 연결 흐름
- OAuth 클라이언트 생성과 권한 설정 포인트
- Drive, Gmail, Spreadsheet를 실제로 자동화하는 예시
- Codex에 스킬을 연결해 더 자연스럽게 작업시키는 방법
- 반복 문서 작업과 업무 자동화에 어떻게 활용할 수 있는지 정리

#googleworkspacewithgemini #GoogleWorkspaceCLI #Codex #업무자동화 #AI자동화 #Gmail자동화 #GoogleDrive #GoogleSheets #GoogleDocs #에이전트 #CLI #생산성 #워크플로우 #구글클라우드

윈도우에서 Google Workspace를 에이전트와 연결해서 Drive, Docs, Sheets, Gmail 작업을 자동화하는 전체 세팅 과정을 정리했습니다. Node.js 설치부터 Google Cloud 프로젝트, OAuth 클라이언트 설정, 스킬 설치, Claude Code 실습까지 한 번에 따라갈 수 있게 설명드렸습니다. 업무 자동화에 관심 있으신 분들은 순서대로 보시면서 그대로 따라오시면 됩니다.

타임라인
0:00 영상 소개 및 준비사항
0:30 Node.js 설치 방법
0:58 Node.js 설치 확인
1:10 구글 계정 및 Google Cloud 프로젝트 준비
3:57 사용할 Google 서비스 API 활성화
5:50 OAuth 클라이언트 ID 개념 설명
7:25 사용자 인증 정보 만들기
8:17 에이전트가 Google Workspace를 쓰는 구조 설명
9:06 설치 명령어로 기본 세팅 시작
10:05 PowerShell 및 Google Cloud CLI 설치
13:48 로그인, 프로젝트 선택, 권한 범위 설정
15:15 클라이언트 ID / 클라이언트 시크릿 발급
18:18 내부 설정 이슈와 외부/테스트 사용자 해결
21:16 Drive 읽기 테스트
22:00 에이전트용 스킬 설치
24:52 Claude Code로 실제 업무 자동화 시작
26:00 회계용 폴더 구조 자동 생성
27:18 매입관리용 Google Sheets 생성
31:43 Gmail 보고 메일 자동 발송
34:21 HTML 임베딩 메일 예시
36:34 비용 확인 방법

오늘 다룬 내용
- 윈도우 환경에서 Node.js 설치와 기본 실행 확인
- Google Cloud 프로젝트 생성과 API 활성화 방법
- OAuth 동의 화면, 클라이언트 ID 발급, 테스트 사용자 설정
- Google Workspace 연동을 위한 로그인 및 권한 세팅
- 에이전트가 작업할 수 있도록 스킬/매뉴얼 설치하는 방법
- Claude Code로 Drive, Sheets, Gmail 업무를 자동화하는 실습
- 회계 폴더 구성, 관리대장 생성, 보고 메일 발송 예시
- 예상 비용과 사용량을 확인하는 대시보드 위치

#구글워크스페이스 #GoogleWorkspace #ClaudeCode #Codex #GoogleCloud #OAuth #업무자동화 #AI자동화 #윈도우설치 #GoogleDrive #GoogleSheets #Gmail

설문조사 결과 정리부터 당첨자 메일 발송까지, 마케터가 반복적으로 하던 작업을 터미널에서 빠르게 처리하는 흐름을 보여드립니다. 구글 워크스페이스 CLI를 기반으로 시트를 만들고 더미 데이터를 넣은 뒤, 당첨자 선정, 메일 발송, 한글 인코딩 수정, HTML 메일 디자인까지 한 번에 이어갑니다. 작은 팀이나 실무 마케터가 바로 응용하기 좋은 자동화 예시입니다.

타임라인
0:00 오늘 영상 주제 소개
0:27 설문조사 결과 이후 마케터가 겪는 반복 업무 정리
1:36 가상 설문조사 시트 만들기 시작
2:22 Claude로 스프레드시트 생성 지시하기
3:18 설문 데이터와 더미 응답 대량 입력
5:21 이름, 연락처, 이메일 등 고객 정보 추가
6:12 당첨자 선정 후 메일 발송 시나리오 설명
7:14 랜덤 당첨자 추출 및 개별 메일 보내기
8:44 메일 제목 한글 인코딩 깨짐 문제 해결
9:50 HTML 임베딩으로 메일 디자인 개선
11:29 유료 메일 서비스 없이 브랜드형 메일 만들기
11:57 로고 삽입과 색상 반영으로 완성도 높이기
12:40 반복 업무를 10분 내외로 줄이는 실무 활용 포인트
14:12 마케터 업무 자동화 아이디어와 영상 마무리

오늘 다룬 내용
- 설문조사 결과 시트를 자동으로 생성하는 방법
- 키보드 수요조사 예시로 더미 응답 데이터를 대량 입력하는 흐름
- 고객 이름, 연락처, 이메일 등 메일 발송용 정보 구성
- 당첨자를 랜덤으로 뽑고 개별 안내 메일을 보내는 방식
- 메일 제목 한글 인코딩 깨짐 문제를 수정하는 방법
- 텍스트 메일을 HTML 기반 브랜드 메일로 바꾸는 방법
- 로고와 브랜드 컬러를 반영해 메일 완성도를 높이는 방법
- 마케터의 반복 업무를 더 짧게 처리하는 자동화 아이디어

#구글워크스페이스 #마케터업무자동화 #설문조사자동화 #이메일자동화 #HTML이메일 #클로드 #스프레드시트 #터미널자동화 #당첨자메일 #마케팅실무 #생산성향상 #AI활용

윈도우에서 Codex CLI를 처음 설치하는 분들을 위해, 클린 설치 환경에서 필요한 것만 순서대로 정리한 가이드입니다. Node.js, Python, Visual C++ 런타임 설치부터 Codex CLI 로그인, 초기 설정, 작업 폴더 잡는 법, 그리고 Codex 앱과 CLI의 차이까지 한 번에 훑어봅니다.

타임라인
0:00 윈도우 클린 설치 기준 전체 가이드 소개
0:23 Node.js 설치 방법
1:39 Python 설치 방법
2:17 Visual C++ 런타임 설치
3:36 Node / Python 정상 설치 확인
4:09 Codex CLI 설치 명령 실행
4:41 로그인과 초기 세팅 진행
5:19 Codex 앱 설치 방법 안내
6:00 Codex 앱과 CLI 차이 설명
8:36 작업용 전용 폴더를 따로 만드는 이유
9:00 cd로 작업 폴더 이동 후 Codex 실행하기
10:00 스킬 확인과 설치 방식 설명
11:10 윈도우에서 Codex CLI 활용 정리

#Codex #CodexCLI #윈도우설치 #AI코딩 #개발환경세팅 #Nodejs #Python설치 #VisualCpp #터미널사용법 #코딩도구 #생산성도구 #AI활용

터미널 세팅만 어렵고 나머진 다 쉽습니다.
원리는 간단합니다! 커서가 여러분의 폴더를 기억하고 있다는 거!

커서로 PDF 추출기 만드는 법!
커서에게 시킨다, 실행해본다, 고치라고 한다, 빌드하라고 한다, 친구에게 나눠준다

🔥 시퀀셜 씽킹 MCP 연결 방법은 제 도서 '이게 되네? 클로드 MCP 미친 활용법 27제'를 보시면 됩니다!
도서 구매 링크 : https://www.yes24.com/product/goods/147957269

🔥 시퀀셜 씽킹 MCP 연결 방법은 제 도서 '이게 되네? 클로드 MCP 미친 활용법 27제'를 보시면 됩니다!
도서 구매 링크 : https://www.yes24.com/product/goods/147957269

🚀 **블로그 포스팅이 이렇게 쉬울 줄이야!**

매일 블로그 글감 찾느라 고민이세요? 번역하고 다듬느라 시간 부족하세요? 이제 그런 걱정 끝!

✨ **이 영상에서 배울 수 있는 것들:**
- 1분 만에 완성하는 블로그 자동화 시스템
- 글 선별부터 번역, 다듬기까지 원클릭 해결
- 바이브 코딩으로 만드는 스마트한 워크플로우
- 시간은 줄이고 퀄리티는 높이는 꿀팁

💡 **누구에게 도움이 될까요?**
- 매일 블로그 업데이트에 시달리는 블로거
- 효율적인 콘텐츠 제작을 원하는 마케터
- 반복 작업을 자동화하고 싶은 개발자
- 시간 관리가 중요한 1인 사업자

⚡ 이제 더 이상 글쓰기에 매달리지 말고, 창의적인 일에 집중하세요!
자동화의 힘으로 블로그 운영이 이렇게 간단해집니다.

👆 좋아요와 구독은 더 많은 꿀팁 영상의 원동력!
💬 궁금한 점은 댓글로 남겨주세요~

#블로그자동화 #바이브코딩 #생산성향상 #콘텐츠제작 #개발자팁

🚀 **블로그 포스팅이 이렇게 쉬울 줄이야!**

매일 블로그 글감 찾느라 고민이세요? 번역하고 다듬느라 시간 부족하세요? 이제 그런 걱정 끝!

✨ **이 영상에서 배울 수 있는 것들:**
- 1분 만에 완성하는 블로그 자동화 시스템
- 글 선별부터 번역, 다듬기까지 원클릭 해결
- 바이브 코딩으로 만드는 스마트한 워크플로우
- 시간은 줄이고 퀄리티는 높이는 꿀팁

💡 **누구에게 도움이 될까요?**
- 매일 블로그 업데이트에 시달리는 블로거
- 효율적인 콘텐츠 제작을 원하는 마케터
- 반복 작업을 자동화하고 싶은 개발자
- 시간 관리가 중요한 1인 사업자

⚡ 이제 더 이상 글쓰기에 매달리지 말고, 창의적인 일에 집중하세요!
자동화의 힘으로 블로그 운영이 이렇게 간단해집니다.

👆 좋아요와 구독은 더 많은 꿀팁 영상의 원동력!
💬 궁금한 점은 댓글로 남겨주세요~

#블로그자동화 #바이브코딩 #생산성향상 #콘텐츠제작 #개발자팁

🔥 *코딩 몰라도 괜찮아! AI와 함께하는 바이브 코딩* 🔥

*"복잡한 문법 공부는 그만! 커서로 바로 만드는 실용 프로그램" 무료 강의 시리즈*

안녕하세요! 프로그래밍을 전혀 몰라도 AI의 도움으로 실무에서 바로 쓸 수 있는 프로그램들을 만들 수 있다는 걸 보여드리고 싶어서 이 시리즈를 준비했습니다.

*이런 분들께 추천합니다*
- 코딩은 어렵다고 생각해서 포기했던 분
- ChatGPT는 써봤는데 실제 프로그램은 못 만들어본 분
- 업무 자동화나 사이드 프로젝트가 필요한 직장인
- 새로운 기술에 도전해보고 싶은 분 (나이 무관!)
- 실용적인 도구를 직접 만들어보고 싶은 분

*실생활에 바로 써먹는 프로젝트들*
웹사이트 만들기 (자기소개 페이지, 인스타그램 클론, 나만의 블로그)
업무 자동화 도구 (메일 발송, PDF 편집, 데이터 분석 대시보드)
실용적인 프로그램 (주식 시세 확인, 가계부, QR코드 생성기)
재미있는 프로젝트 (카드 게임, 커뮤니티 사이트)

*바이브 코딩이 다른 이유*
복잡한 문법 공부 없이 AI가 대부분의 코드를 작성해줍니다. 여러분은 "이런 걸 만들고 싶어"라고 아이디어만 제시하면 됩니다. 컴퓨터 기초부터 단계별로 친절하게 설명드리고, 만든 프로그램은 바로 실생활에서 활용할 수 있어요.

*목표는 간단합니다*
프로그래밍에 대한 두려움을 완전히 없애고, 30개 프로젝트를 완주하면서 AI 시대에 맞는 새로운 문제해결 능력을 기르는 것입니다.

매주 새로운 프로젝트로 업데이트됩니다. 첫 번째 강의에서는 커서 설치부터 멋진 기업 웹사이트까지 함께 만들어볼 예정이에요.

구독과 알림설정 부탁드리고, 댓글로 가장 만들어보고 싶은 프로젝트를 알려주세요!

📕 책 구매하러 가기 : https://www.yes24.com/product/goods/153029475

#바이브코딩 #커서 #AI코딩 #노코드 #웹개발 #파이썬 #초보자프로그래밍 #업무자동화

🔥 *코딩 몰라도 괜찮아! AI와 함께하는 바이브 코딩* 🔥

*"복잡한 문법 공부는 그만! 커서로 바로 만드는 실용 프로그램" 무료 강의 시리즈*

안녕하세요! 프로그래밍을 전혀 몰라도 AI의 도움으로 실무에서 바로 쓸 수 있는 프로그램들을 만들 수 있다는 걸 보여드리고 싶어서 이 시리즈를 준비했습니다.

*이런 분들께 추천합니다*
- 코딩은 어렵다고 생각해서 포기했던 분
- ChatGPT는 써봤는데 실제 프로그램은 못 만들어본 분
- 업무 자동화나 사이드 프로젝트가 필요한 직장인
- 새로운 기술에 도전해보고 싶은 분 (나이 무관!)
- 실용적인 도구를 직접 만들어보고 싶은 분

*실생활에 바로 써먹는 프로젝트들*
웹사이트 만들기 (자기소개 페이지, 인스타그램 클론, 나만의 블로그)
업무 자동화 도구 (메일 발송, PDF 편집, 데이터 분석 대시보드)
실용적인 프로그램 (주식 시세 확인, 가계부, QR코드 생성기)
재미있는 프로젝트 (카드 게임, 커뮤니티 사이트)

*바이브 코딩이 다른 이유*
복잡한 문법 공부 없이 AI가 대부분의 코드를 작성해줍니다. 여러분은 "이런 걸 만들고 싶어"라고 아이디어만 제시하면 됩니다. 컴퓨터 기초부터 단계별로 친절하게 설명드리고, 만든 프로그램은 바로 실생활에서 활용할 수 있어요.

*목표는 간단합니다*
프로그래밍에 대한 두려움을 완전히 없애고, 30개 프로젝트를 완주하면서 AI 시대에 맞는 새로운 문제해결 능력을 기르는 것입니다.

구독과 알림설정 부탁드리고, 댓글로 가장 만들어보고 싶은 프로젝트를 알려주세요!

📕 책 구매하러 가기 : https://www.yes24.com/product/goods/153029475

#바이브코딩 #커서 #AI코딩 #노코드 #웹개발 #파이썬 #초보자프로그래밍 #업무자동화

🔥 *코딩 몰라도 괜찮아! AI와 함께하는 바이브 코딩* 🔥

*"복잡한 문법 공부는 그만! 커서로 바로 만드는 실용 프로그램" 무료 강의 시리즈*

안녕하세요! 프로그래밍을 전혀 몰라도 AI의 도움으로 실무에서 바로 쓸 수 있는 프로그램들을 만들 수 있다는 걸 보여드리고 싶어서 이 시리즈를 준비했습니다.

*이런 분들께 추천합니다*
- 코딩은 어렵다고 생각해서 포기했던 분
- ChatGPT는 써봤는데 실제 프로그램은 못 만들어본 분
- 업무 자동화나 사이드 프로젝트가 필요한 직장인
- 새로운 기술에 도전해보고 싶은 분 (나이 무관!)
- 실용적인 도구를 직접 만들어보고 싶은 분

*실생활에 바로 써먹는 프로젝트들*
웹사이트 만들기 (자기소개 페이지, 인스타그램 클론, 나만의 블로그)
업무 자동화 도구 (메일 발송, PDF 편집, 데이터 분석 대시보드)
실용적인 프로그램 (주식 시세 확인, 가계부, QR코드 생성기)
재미있는 프로젝트 (카드 게임, 커뮤니티 사이트)

*바이브 코딩이 다른 이유*
복잡한 문법 공부 없이 AI가 대부분의 코드를 작성해줍니다. 여러분은 "이런 걸 만들고 싶어"라고 아이디어만 제시하면 됩니다. 컴퓨터 기초부터 단계별로 친절하게 설명드리고, 만든 프로그램은 바로 실생활에서 활용할 수 있어요.

*목표는 간단합니다*
프로그래밍에 대한 두려움을 완전히 없애고, 30개 프로젝트를 완주하면서 AI 시대에 맞는 새로운 문제해결 능력을 기르는 것입니다.

구독과 알림설정 부탁드리고, 댓글로 가장 만들어보고 싶은 프로젝트를 알려주세요!

📕 책 구매하러 가기 : https://www.yes24.com/product/goods/153029475

#바이브코딩 #커서 #AI코딩 #노코드 #웹개발 #파이썬 #초보자프로그래밍 #업무자동화

🔥 *코딩 몰라도 괜찮아! AI와 함께하는 바이브 코딩* 🔥

*"복잡한 문법 공부는 그만! 커서로 바로 만드는 실용 프로그램" 무료 강의 시리즈*

안녕하세요! 프로그래밍을 전혀 몰라도 AI의 도움으로 실무에서 바로 쓸 수 있는 프로그램들을 만들 수 있다는 걸 보여드리고 싶어서 이 시리즈를 준비했습니다.

*이런 분들께 추천합니다*
- 코딩은 어렵다고 생각해서 포기했던 분
- ChatGPT는 써봤는데 실제 프로그램은 못 만들어본 분
- 업무 자동화나 사이드 프로젝트가 필요한 직장인
- 새로운 기술에 도전해보고 싶은 분 (나이 무관!)
- 실용적인 도구를 직접 만들어보고 싶은 분

*실생활에 바로 써먹는 프로젝트들*
웹사이트 만들기 (자기소개 페이지, 인스타그램 클론, 나만의 블로그)
업무 자동화 도구 (메일 발송, PDF 편집, 데이터 분석 대시보드)
실용적인 프로그램 (주식 시세 확인, 가계부, QR코드 생성기)
재미있는 프로젝트 (카드 게임, 커뮤니티 사이트)

*바이브 코딩이 다른 이유*
복잡한 문법 공부 없이 AI가 대부분의 코드를 작성해줍니다. 여러분은 "이런 걸 만들고 싶어"라고 아이디어만 제시하면 됩니다. 컴퓨터 기초부터 단계별로 친절하게 설명드리고, 만든 프로그램은 바로 실생활에서 활용할 수 있어요.

*목표는 간단합니다*
프로그래밍에 대한 두려움을 완전히 없애고, 30개 프로젝트를 완주하면서 AI 시대에 맞는 새로운 문제해결 능력을 기르는 것입니다.

구독과 알림설정 부탁드리고, 댓글로 가장 만들어보고 싶은 프로젝트를 알려주세요!

📕 책 구매하러 가기 : https://www.yes24.com/product/goods/153029475

#바이브코딩 #커서 #AI코딩 #노코드 #웹개발 #파이썬 #초보자프로그래밍 #업무자동화

🔥 *코딩 몰라도 괜찮아! AI와 함께하는 바이브 코딩* 🔥

*"복잡한 문법 공부는 그만! 커서로 바로 만드는 실용 프로그램" 무료 강의 시리즈*

안녕하세요! 프로그래밍을 전혀 몰라도 AI의 도움으로 실무에서 바로 쓸 수 있는 프로그램들을 만들 수 있다는 걸 보여드리고 싶어서 이 시리즈를 준비했습니다.

*이런 분들께 추천합니다*
- 코딩은 어렵다고 생각해서 포기했던 분
- ChatGPT는 써봤는데 실제 프로그램은 못 만들어본 분
- 업무 자동화나 사이드 프로젝트가 필요한 직장인
- 새로운 기술에 도전해보고 싶은 분 (나이 무관!)
- 실용적인 도구를 직접 만들어보고 싶은 분

*실생활에 바로 써먹는 프로젝트들*
웹사이트 만들기 (자기소개 페이지, 인스타그램 클론, 나만의 블로그)
업무 자동화 도구 (메일 발송, PDF 편집, 데이터 분석 대시보드)
실용적인 프로그램 (주식 시세 확인, 가계부, QR코드 생성기)
재미있는 프로젝트 (카드 게임, 커뮤니티 사이트)

*바이브 코딩이 다른 이유*
복잡한 문법 공부 없이 AI가 대부분의 코드를 작성해줍니다. 여러분은 "이런 걸 만들고 싶어"라고 아이디어만 제시하면 됩니다. 컴퓨터 기초부터 단계별로 친절하게 설명드리고, 만든 프로그램은 바로 실생활에서 활용할 수 있어요.

*목표는 간단합니다*
프로그래밍에 대한 두려움을 완전히 없애고, 30개 프로젝트를 완주하면서 AI 시대에 맞는 새로운 문제해결 능력을 기르는 것입니다.

구독과 알림설정 부탁드리고, 댓글로 가장 만들어보고 싶은 프로젝트를 알려주세요!

📕 책 구매하러 가기 : https://www.yes24.com/product/goods/153029475

#바이브코딩 #커서 #AI코딩 #노코드 #웹개발 #파이썬 #초보자프로그래밍 #업무자동화

🔥 *코딩 몰라도 괜찮아! AI와 함께하는 바이브 코딩* 🔥

*"복잡한 문법 공부는 그만! 커서로 바로 만드는 실용 프로그램" 무료 강의 시리즈*

안녕하세요! 프로그래밍을 전혀 몰라도 AI의 도움으로 실무에서 바로 쓸 수 있는 프로그램들을 만들 수 있다는 걸 보여드리고 싶어서 이 시리즈를 준비했습니다.

*이런 분들께 추천합니다*
- 코딩은 어렵다고 생각해서 포기했던 분
- ChatGPT는 써봤는데 실제 프로그램은 못 만들어본 분
- 업무 자동화나 사이드 프로젝트가 필요한 직장인
- 새로운 기술에 도전해보고 싶은 분 (나이 무관!)
- 실용적인 도구를 직접 만들어보고 싶은 분

*실생활에 바로 써먹는 프로젝트들*
웹사이트 만들기 (자기소개 페이지, 인스타그램 클론, 나만의 블로그)
업무 자동화 도구 (메일 발송, PDF 편집, 데이터 분석 대시보드)
실용적인 프로그램 (주식 시세 확인, 가계부, QR코드 생성기)
재미있는 프로젝트 (카드 게임, 커뮤니티 사이트)

*바이브 코딩이 다른 이유*
복잡한 문법 공부 없이 AI가 대부분의 코드를 작성해줍니다. 여러분은 "이런 걸 만들고 싶어"라고 아이디어만 제시하면 됩니다. 컴퓨터 기초부터 단계별로 친절하게 설명드리고, 만든 프로그램은 바로 실생활에서 활용할 수 있어요.

*목표는 간단합니다*
프로그래밍에 대한 두려움을 완전히 없애고, 30개 프로젝트를 완주하면서 AI 시대에 맞는 새로운 문제해결 능력을 기르는 것입니다.

구독과 알림설정 부탁드리고, 댓글로 가장 만들어보고 싶은 프로젝트를 알려주세요!

📕 책 구매하러 가기 : https://www.yes24.com/product/goods/153029475

#바이브코딩 #커서 #AI코딩 #노코드 #웹개발 #파이썬 #초보자프로그래밍 #업무자동화