강좌 소개 및 학습 목표
강좌 소개
- 코드를 몰라도 AI와 대화하는 방식으로 소프트웨어를 만드는 "바이브 코딩"을 배웁니다
- Claude Code를 설치하고 실무에 바로 적용 가능한 도구를 매주 하나씩 완성합니다
- 8주 후 본인이 직접 만든 AI 비서·문서 자동화·미니 대시보드 등 결과물을 갖게 됩니다
수강 후 할 수 있는 것
- Claude Code로 웹페이지·자동화·봇을 직접 만들 수 있다
- 인터랙티브 보고서를 v1 → v2 → v3로 발전시켜 GitHub로 팀과 공유할 수 있다
- Telegram 봇·자동 리포트·지식 위키를 운영할 수 있다
- Jarvis(팀 AI 비서)를 만들고 유지관리할 수 있다
주차별 사용 도구
WEEK 01 – 02
기초 환경
VSCode + Claude Code
CLAUDE.md · Hooks
.claude 설정 파일
CLAUDE.md · Hooks
.claude 설정 파일
WEEK 03 – 04
협업 & 도구
GitHub · gh CLI
VS Code Timeline
/frontend-design 스킬
VS Code Timeline
/frontend-design 스킬
WEEK 05 – 06
위키 & LLM
Obsidian · 옵시디언 CLI
LLM Wiki (Karpathy)
수집·가공·질문·린트
LLM Wiki (Karpathy)
수집·가공·질문·린트
WEEK 07 – 08
지식 DB & 시연
회의록·영상·PDF
다양 콘텐츠 ingest
통합 시연 · Q&A
다양 콘텐츠 ingest
통합 시연 · Q&A
주차별 강의 계획
총 8주 · 각 주 실습 포함
01
환경설정
02
인터랙티브 보고서
03
GitHub 사용법
04
스킬 & MCP
05
Obsidian (사람 위키)
06
LLM Wiki 입문
07
지식 DB 구축
08
보강 & Q&A
W01
1주차
이번 주 빌드
🚀 첫 번째 Claude 프로젝트
학습 목표
- 바이브 코딩 개념과 원리를 설명할 수 있다
- Claude Code를 설치하고 첫 실행을 한다
- 핵심 용어 7가지를 이해한다
- CLAUDE.md · Hooks의 역할을 설명할 수 있다
- plan · ask · edit 명령어를 활용할 수 있다
주요 내용
- 바이브 코딩이란 — 코드 없이 대화로 만드는 소프트웨어
- Claude Code 설치 (VSCode 플러그인 방식)
- 핵심 용어 — 컨텍스트 창 · 토큰 · 스킬 · MCP · 에이전트
- Claude 실행 구조 — 입력 → 처리 → 출력 흐름
- CLAUDE.md · Hooks · .claude 설정 파일
- plan · ask · edit — 대화로 코딩하는 3가지 명령어
🟢 기초 실습
첫 프로젝트 만들기 — Claude와 대화로 간단한 웹 페이지 제작
🔴 고급 실습
plan · ask · edit 모두 활용해 코드 수정 · 기능 추가 실전 적용
빌드 결과물 & 숙제
🚀 첫 번째 Claude 프로젝트
plan · ask · edit으로 대화하며 직접 만든 첫 번째 웹 페이지 → Claude Code 실사용 경험
📝 숙제: 작성할 문서 아젠다 선정 · 기존 PPT 준비
→ W2: Claude Code로 인터랙티브 보고서 만들기
→ W2: Claude Code로 인터랙티브 보고서 만들기
W02
2주차
정적 자료(PPT/PDF/회의록) → 인터랙티브 HTML · v1 → v2 → v3 점진적 발전 · 비주얼·움짤·체크리스트
이번 주 빌드
📊 인터랙티브 보고서 v3
학습 목표
- 인터랙티브 보고서의 개념·기준을 안다
- 본인 자료(PPT/PDF/링크)에 맞는 인터랙션을 고른다
- 한 줄 입력으로 v1 (첫 결과)를 받는다
- 키워드 한 줄 추가로 v1 → v2 디자인을 발전시킨다
- 이미지·움짤·인터랙션을 채워 v2 → v3로 완성한다
주요 내용
- 정적 → 인터랙티브 — 인터랙션 5종 + 자료 매핑
- 발전·실습 사이클 — 4단계 반복 (주제·입력·점검·발전)
- v1: "이 링크로 만들어 줘" 한 줄 → 첫 결과
- v2: 키워드 5 카테고리 → 다크 카드형 발전
- v3: "가공 없이 그대로" → 원본 이미지·움짤 임베드
- 마지막 팁: 이미지 비교로 픽셀 단위 디테일 보정
🟢 기초 실습
참고 링크 1개 → "이 링크로 만들어 줘" → v1 6장 받기
🔴 고급 실습
본인 자료 → v1 → 키워드로 v2 → 이미지 임베드로 v3
빌드 결과물 & 다음 주
🏗 slides.html (v3까지 진화)
단일 HTML 인터랙티브 보고서 → 8주 후 대시보드의 "발표 자료" 섹션
📌 준비: GitHub 계정 만들어 오기 (github.com · 3분)
→ W3: slides.html을 GitHub repo에 v1·v2·v3 commit 시점으로 보존
→ W3: slides.html을 GitHub repo에 v1·v2·v3 commit 시점으로 보존
W03
3주차
slides.html 한 파일 + commit으로 v1·v2·v3 시점 보존 · STAGE 1~4 + 보너스 2 · Claude로 자연어 git
이번 주 빌드
📦 본인 repo + ⏪ 시점 3개 보존
학습 목표
- GitHub의 본질(같은 파일 + commit 시점)을 설명할 수 있다
- 7개 핵심 용어를 흐름으로 이해한다 (push·pull·commit·branch·PR·revert·repo)
- Claude에게 자연어로 git을 시킨다 ("올려줘"·"받아줘"·"v1로 돌려줘")
- slides.html을 v1 → v2 → v3 commit 시점으로 누적·롤백한다
- /frontend-design 스킬을 설치하고 v3를 다듬는다 (다음 주 맛보기)
주요 내용
- GitHub = 무한 ctrl+z + 공유 가능한 폴더 (비유)
- 3 동사 — 올린다(push)·받는다(pull)·되돌린다(rollback)
- 5가지 사용 이유 — 이전 버전 복구·자동 백업·공개 URL·협업·변경 이력
- CLI ↔ 자연어 매핑 — git 명령어 30개 → 한국어 6문장
- 실습 STAGE 1~4 — repo 생성 → v2/v3 push → 롤백 → frontend-design 맛보기
- 보너스 — VS Code Timeline + .gitignore (안전망)
🟢 기초 실습
repo 생성 + slides.html(v1 상태) 첫 push + commit 확인
🔴 고급 실습
v2·v3 commit 시점 누적 → "v2로 돌려줘" 롤백 → frontend-design 스킬로 v3 다듬기
빌드 결과물 & 숙제
🏗 본인 GitHub repo + commit 3개 시점
slides.html 1개 파일 + commit 3개(v1·v2·v3) → 언제든 "v1·v2 시점으로 돌려줘" 한 줄로 복귀. 다음 주부터 모든 결과물의 고정 저장소.
📝 숙제 없음 — 그냥 오시면 됩니다
→ W4: 스킬 & MCP 원리 — 오늘 본 frontend-design 같은 스킬 수십 가지
→ W4: 스킬 & MCP 원리 — 오늘 본 frontend-design 같은 스킬 수십 가지
W04
4주차
이번 주 빌드
🧩 스킬·MCP 도구함
학습 목표
- 스킬이 무엇인지 — 실제 SKILL.md를 열어보고 안다
- MCP가 무엇인지 — 실제 도구 코드를 열어보고 안다
- 스킬과 MCP의 결정적 차이를 한 문장으로 설명한다
- 스킬·MCP를 직접 설치하고, 나만의 스킬을 만든다
주요 내용
- 스킬 = 업무 매뉴얼 — frontend-design·impeccable SKILL.md 직접 까보기
- MCP = 외부 연결선 — Figma MCP의 도구 코드 직접 까보기
- progressive disclosure · MCP 작동 구조 (Claude↔서버↔API)
- 스킬 vs MCP 비교 — "MCP는 연결, 스킬은 방법" · 지원 범위 · 토큰=비용
- 직접 만들기 — 손으로 / skill-creator 스킬 활용
🟢 기초 실습
frontend-design · impeccable 스킬 설치 → 컴포넌트 생성·진단
🔴 고급 실습
Figma MCP + 헌법 MCP 설치(OC키 발급) → 디자인 연결·"헌법 제1조" 실시간 검색 + skill-creator로 나만의 SKILL 만들기
빌드 결과물 & 숙제
🏗 SKILL 3 + MCP 2 + 나만의 SKILL
frontend-design·impeccable·skill-creator SKILL과 Figma·헌법 MCP를 내 워크스페이스에 설치 + 나만의 SKILL.md 1장 → 이후 모든 주차에서 쓰는 확장 도구함
📝 숙제: 내 업무에 쓸 스킬 아이디어 1개 메모
→ W5: Obsidian으로 팀 지식 쌓기 시작
→ W5: Obsidian으로 팀 지식 쌓기 시작
W05
5주차
이번 주 빌드
📚 Obsidian Vault (5쪽)
학습 목표
- Obsidian을 설치하고 첫 Vault를 만든다
- 마크다운 + [[ ]] 링크로 노트를 직접 작성한다
- 그래프뷰로 흩어진 노트들의 연결을 본다
- 회의록·자료를 모아 팀 위키의 첫 5쪽을 채운다
주요 내용
- Obsidian 설치 — 내 PC에 마크다운 지식창고 (Windows·macOS)
- Vault·인터페이스 둘러보기 — 트리·에디터·메타 3등분
- 마크다운 6개 기호 (# · - · [ ] · ** · > · ```)
- wikilink [[ ]] · 그래프뷰 (Ctrl+G)
- 실전 활용 3가지 — 회의록 · 자료 요약 · 일일 노트
🟢 기초 실습
설치 + Vault → 회의록 1 · 자료 1 · 일일 노트 3 (마크다운 직접 작성 5쪽)
🔴 고급 실습
위키 구조 직접 설계 — 폴더 4~6개 + 템플릿 3종 + 허브 노트 + 10쪽
빌드 결과물 & 숙제
🏗 Obsidian Vault — 사람 손 위키 5쪽
설치된 Obsidian + 마크다운으로 직접 쓴 5쪽 · [[ ]] 5개 이상 · 그래프뷰 스크린샷 → 8주 후 대시보드의 "팀 위키" 섹션 원형
📝 숙제: 위키 5쪽 채워두기 (Claude한테 시킬 거리 확보)
→ W6: 이 위키를 Claude와 연결 (LLM Wiki 입문)
→ W6: 이 위키를 Claude와 연결 (LLM Wiki 입문)
W06
6주차
정원사(가드닝) 비유 · Raw·Wiki·Schema + 수집·가공·질문·린트 · 옵시디언 CLI 연결 · 모바일 디자인 인사이트 실습
이번 주 빌드
🔌 LLM Wiki 위키
학습 목표
- LLM Wiki 패턴 (Karpathy)과 RAG의 차이를 설명한다
- Raw·Wiki·Schema 3구조 + 수집·가공·질문·린트 3동작을 안다
- 옵시디언 CLI 연결 + 볼트 지정 + llm-wiki 다운로드·세팅을 한다
- URL→수집→가공→질문(출처)→린트 한 사이클을 직접 돌린다
주요 내용
- 왜 — 카르파시: 대화·탐색 컨텍스트가 매번 날아가는 문제
- 정원사(가드닝) 비유 — LLM이 내 지식 정원을 가꾼다
- 옵시디언 CLI 연결(Register CLI) + 볼트 경로 지정
- llm-wiki 다운로드(gist)→스캐폴딩 + 실제 llm-wiki.md 원문
- 실습 — 모바일 디자인 동향(WWDC·Google I/O) URL → 수집·가공·질문·린트
- 활용 & 관리 — 트렌드 리포트·플랫폼 비교 / 볼트 분리·주간 린트
🟢 기초 실습
옵시디언 CLI 연결 + 볼트 지정 → llm-wiki 다운로드·세팅 → URL 1개 수집 → 가공(인제스트) → 질문 1번
🔴 고급 실습
발표 3개 수집 → 공통 개념으로 연결(가공) → 출처 추적 질문 → 린트 + 트렌드 리포트 초안 활용
빌드 결과물 & 숙제
🏗 LLM Wiki — 디자인 인사이트 위키
옵시디언 + Claude 연결 → 모바일 디자인 동향(WWDC·Google I/O)을 수집·가공해 출처와 함께 인사이트를 뽑는 나만의 위키
📝 숙제: 관심 주제 URL 3개 수집 → 가공 → 질문 3건 누적
→ W7: 날씨 연결 + 매일 알림 '데일리 브리프(나우 브리프)' 만들기
→ W7: 날씨 연결 + 매일 알림 '데일리 브리프(나우 브리프)' 만들기
W07
7주차
회의록·영상·PDF·이메일·기사 — 다양한 콘텐츠를 ingest 패턴으로 자기만의 지식 데이터베이스 풍성하게
이번 주 빌드
🗂 풍성한 개인 지식 DB
학습 목표
- 회의록을 매주 자동으로 위키에 누적한다
- 영상(YouTube·강의 녹화)을 자막·요약으로 위키에 저장한다
- PDF·기사·이메일·메모 등 다양한 소스에 맞는 ingest 패턴을 익힌다
- 한 달 후 본인이 만든 지식 DB의 모습을 청사진으로 그릴 수 있다
주요 내용
- 회의록 ingest 깊게 — 안건·결정·액션 자동 분리, 참석자 추출, 후속 추적
- 영상 → 위키 — 자막 다운로드, 타임스탬프 인용, 핵심 추출
- PDF·문서 ingest — 본문 추출, 인용 자동 표시, 관련 위키 백링크
- 이메일·채팅·메모 캡처 — 스레드 압축, 자동 분류
- 웹 기사·블로그 — 출처·요약·내 메모 4섹션
- 내 지식 DB 청사진 — 5가지 콘텐츠 통합된 모습
- 매주 루틴 — 회의록 5분 + 영상 10분 + 회고 자동
🟢 기초 실습
5종 콘텐츠 각 1건씩 ingest (회의록·영상·PDF·이메일·기사) → 위키 5쪽 추가
🔴 고급 실습
본인만의 ingest 패턴 1개 설계 + 주간 루틴 자동화 (예: 매주 월요일 영상 1개 자동 정리)
빌드 결과물 & 숙제
🏗 풍성한 개인 지식 DB
5종 콘텐츠로 풍성해진 위키 — 그래프뷰가 별자리 → 은하수로. 본인만의 영구 외부 뇌
📝 숙제: 본인 위키 청사진 1쪽 (어떤 콘텐츠·어떤 구조)
→ W8: 1~7주 결과물 통합 시연 + (선택) 자동화 발송
→ W8: 1~7주 결과물 통합 시연 + (선택) 자동화 발송
학습 목표
- 1~7주 핵심 개념을 스스로 정리하고 설명할 수 있다
- 막히거나 미완성된 결과물을 보강해 완성한다
- 실습 중 어려웠던 부분을 Q&A로 해소한다
- 7개 결과물을 하나의 흐름으로 시연한다
주요 내용
- 1~7주 핵심 복습 — 환경설정·보고서·GitHub·스킬/MCP·위키·LLM Wiki·지식 DB
- 결과물 점검 — 7개 빌드 중 미완성·오류 항목 집중 보강
- 자유 Q&A — 실습 중 막혔던 부분을 모아 함께 해결
- 최종 시연 — 7개 결과물을 하나의 흐름으로 발표
- (선택) 자동화 챕터 — CronCreate + 텔레그램 발송 (옛 데일리 브리핑 패턴) 옵션 데모
🟢 기초 실습
1~7주 결과물 점검 → 미완성 항목 1개 보강해 완성하기
🔴 고급 실습
7개 결과물을 하나의 데모 흐름으로 연결 → 최종 시연 리허설 + (선택) 자동 발송 설치
최종 결과물
🏆 1~7주 학습 결과물 통합
👥 포트폴리오 (W1)📊 인터랙티브 보고서 (W2)
📦 GitHub repo (W3)🧩 스킬·MCP (W4)
📚 위키 (W5)🔌 LLM Wiki (W6)
🗂 지식 DB (W7)🎓 통합·시연 (W8)★
🎤 최종 발표 · 시연 · 자유 Q&A
→ 이후: 팀 노하우 축적 · 지속 개선
→ 이후: 팀 노하우 축적 · 지속 개선
8주 후 만들어낼 학습 결과물
WEEK 01
포트폴리오 인트로
개인 소개·역할·관심 분야
WEEK 02
발표 자료
인터랙티브 슬라이드
WEEK 03
GitHub 저장소
개인 repo · v1·v2·v3 commit 보존
WEEK 04
스킬·MCP 도구함
스킬 2 + MCP 1 설치
WEEK 05
Obsidian Vault
사람 손 위키 5쪽
WEEK 06
LLM Wiki
정원사 패턴 · 인사이트 위키
WEEK 07
개인 지식 DB
5종 콘텐츠 ingest · 풍성한 위키
WEEK 08 ★
통합 & 보강
1~7주 결과물 통합·보강