시리즈 · 음성봇 직접 만들기 — 실시간 음성봇의 뼈대를 바닥부터 만든 8편 기록입니다. 1. 끼어들기(barge-in) — 재생 중인 TTS를 실시간으로 끊는 법 2. "말이 끝났다"는 판단 — VAD 엔드포인터 3. 엔진을 코드 수정 없이 바꾸는 인터페이스 설계 4. 로컬 LLM 대화 두뇌와 도구 호출 루프 5. 매 턴 지연시간을 재는 이유 6. 브라우저 마이크에서 서버까지 — 오디오 프로토콜 7. 로컬 Whisper STT 연결하기 8. 스텁부터 만든 이유 — 테스트 우선 설계 (완결) — 지금 보는 글 돌아보며 시작하는 마지막 편 이 시리즈를 시작할 때부터 정해 둔 규칙이 하나 있었습니다. 진짜 음성 인식 모델과 진짜 합성 모델이 준비되기 전까지는, 그 둘을 흉내만 내는 가짜 엔진으로 전체 구조를 먼저 돌려본다는 규칙입니다. 여덟 편을 거치며 끼어들기 처리, 상태 흐름, 프로토콜, 엔진 인터페이스를 하나씩 다뤘는데, 그 모든 것이 사실 이 가짜 엔진 위에서 검증됐습니다. 지금 코드를 다시 열어 보면 그때는 별생각 없이 세운 규칙이 결과적으로 시리즈 전체의 진행 속도를 결정했다는 게 눈에 들어옵니다. 이번 편에서는 왜 굳이 가짜부터 만들었는지, 그리고 그 선택이 시리즈 전체에 어떤 영향을 남겼는지 정리하면서 이 시리즈를 마무리하려 합니다. 실제 모델을 기다리지 않기로 한 이유 음성봇의 핵심 로직은 사실 음성 인식이나 음성 합성 자체가 아닙니다. 사용자가 말을 시작했는지 끝냈는지 판단하는 상태머신, 합성 중에 끼어들기가 들어왔을 때 스트림을 멈추는 동시성 처리, 이벤트가 순서대로 오가는 흐름 제어 같은 것들이 훨씬 까다롭습니다. 반면 실제 인식·합성 모델은 무겁고 설치가 까다롭고 실행 속도도 느립니다. 이 두 가지를 한꺼번에 붙잡고 있으면 어려운 동시성 버그를 실제 모델의 로딩 시간과 뒤섞어 디버깅하게 됩니다. 모델이 느려서 반응이 늦은 건지, 상태머신이 잘못 짜여서 늦은 건지 구분이 안 되는 상황을 미...
공유 링크 만들기
Facebook
X
Pinterest
이메일
기타 앱
캔바로 2주 걸릴 강의 슬라이드 60장, 클로드 코드로 하루 만에 만들었다
공유 링크 만들기
Facebook
X
Pinterest
이메일
기타 앱
-
클로드 코드 강의 제작을 다른 도구가 아니라 클로드 코드로 직접 했습니다. 바이브코딩을 가르치는 풀데이(09:00~17:00) 강의를, 그 도구인 클로드 코드로 만든 셈입니다. 그런데 출발점은 슬라이드도, 커리큘럼도 아니었습니다. 회의였습니다.
커리큘럼을 어떻게 짤지 논의한 기획 회의를 녹취해 STT로 전사하고, 그 전사 원문을 클로드 코드에 통째로 넘긴 것이 시작이었습니다. 거기서 커리큘럼이 나오고, 노션 페이지가 나오고, 슬라이드 통합본이 나왔습니다. 예전 같으면 캔바나 피그마로 60장을 만드는 데 2주는 걸렸을 일이, 회의 한 번과 하루로 끝났습니다.
아래에서는 말(회의)에서 완성된 강의 자료까지, 어떤 순서로 시켰고 어디서 막혔는지를 직접 만든 경험 그대로 풀어봅니다.
클로드 코드로 만든 통합 슬라이드 덱 — 전체 커버와 세션 1·2·3 커버 (회사·실명 부분은 모자이크 처리).
1. 왜 강의 자료를 클로드 코드로 만들었나
슬라이드를 AI로 만든다고 하면 보통 감마(Gamma)를 떠올립니다. 실제로 슬라이드 검색 수요는 대부분 감마로 쏠려 있습니다. 그런데 강의 자료처럼 분량이 크고, 여러 번 고치고, 일관성을 유지해야 하는 작업에서는 감마 같은 웹 도구가 의외로 답답합니다. 수정할 때마다 웹에 들어가야 하고, 버전 관리가 안 되고, 세밀한 커스텀이 어렵습니다.
그래서 클로드 코드 + HTML 슬라이드로 갔습니다. 장점은 분명합니다.
버전 관리: 슬라이드가 텍스트(HTML)라 git으로 이력이 남습니다.
일괄 수정: "전 슬라이드 폰트 키워줘" 한마디로 한 번에 바뀝니다.
완전 커스텀: 레이아웃·구조를 코드 수준에서 통제합니다.
재사용: 세션별 HTML을 부품처럼 합쳐 통합본을 만들 수 있습니다.
그리고 하나 더 — 가르치는 도구(클로드 코드)로 가르칠 자료를 만든다는 자기참조가, 강의 자체의 설득력이 됩니다. "이 자료도 클로드 코드로 만들었습니다"가 첫 슬라이드의 증거가 되니까요.
2. 출발점 — 회의를 녹취해 전사본으로
가장 강조하고 싶은 게 이 단계입니다. 강의 자료의 원천 데이터는 멋진 문서가 아니라 말이었습니다.
커리큘럼을 어떻게 구성할지 논의한 기획 회의를, 그냥 흘려보내지 않고 녹취했습니다. 그리고 그 녹음을 STT(음성→텍스트)로 전사해 한 덩어리의 텍스트로 만들었습니다. 이 전사 원문이 이후 모든 산출물의 입력값이 됐습니다.
왜 이 단계가 중요했냐면, 회의에서 나온 맥락·뉘앙스·결정의 근거가 전사본에 고스란히 담기기 때문입니다. 빈 화면에서 "강의 커리큘럼 짜줘"라고 하는 것과, 실제로 사람들이 논의한 전사본을 통째로 주고 "이걸 커리큘럼으로 정리해줘"라고 하는 것은 결과물의 밀도가 완전히 다릅니다. 전자는 일반론이 나오고, 후자는 우리 상황에 맞는 구조가 나옵니다.
핵심 팁: AI에게 기획을 시킬 때, 백지에서 시키지 말고 말한 것을 전사한 원문을 출발점으로 주세요. 회의·브레인스토밍을 녹취·전사하는 습관 하나가 산출물 품질을 가릅니다.
3. 커리큘럼 — 전사본이 노션 페이지가 된다
전사본을 받은 클로드 코드는 먼저 일정을 구조화했습니다. 몇 시부터 무엇을 하고, 휴식과 점심은 언제이고, 언제 끝나는지를 자연어로 정리한 내용을 마크다운으로 변환하고, 그 마크다운을 그대로 노션 페이지로 자동 생성했습니다.
손으로 표를 그린 게 아닙니다. 전사본 속 일정 논의를 받아서:
개요 표 (일시·장소·대상·준비물)
색으로 구분된 타임테이블 (세션별 컬러)
세션 3개의 목표·내용 (각 목표를 콜아웃으로)
준비물 체크리스트 (API Key 발급 안내 포함)
참고자료 카드 (공식 문서·커뮤니티 링크)
까지 갖춘 노션 페이지 한 장으로 만들어줬습니다. 이 페이지로 그대로 공지까지 마쳤습니다 — 참석 여부와 사전 질문을 페이지 댓글로 받는 형태로요.
전사본 → 클로드가 만든 노션 커리큘럼 페이지. 타임테이블·세션 목표·준비물·참고자료 카드까지 한 페이지에 자동 구성됩니다.
세션 구성은 이렇게 잡혔습니다.
Session 1 — 바이브코딩 입문 & 환경 만들기: 왜 지금 AI 코딩인지(도구 혁명의 반복, 패러다임 전환)부터, 노션·디스코드·AI 에디터·음성 받아쓰기까지 실습 환경 설치.
Session 2 — Claude Code 파워 가이드: 에이전틱 사고방식(문제 쪼개기, 계획 모드 vs 실행 모드, 컨텍스트 관리), 슬래시 명령어와 CLAUDE.md, 음성 코딩, Git 자동화, 그리고 MCP·Hooks·Skills·서브에이전트 같은 고급 기능.
Session 3 — Case Study: 유튜브 영상을 노션에 자동 요약·정리하는 웹앱을, 웹 UI부터 Vercel 배포까지 직접 완성.
목표를 세션마다 한 문장으로 못 박은 게 핵심이었습니다(예: S3 = "내 손으로 만든 앱을 URL로 공유한다"). 목표가 분명하니 슬라이드 한 장 한 장의 역할도 자동으로 정해졌습니다.
4. 슬라이드 생성 — 감마 대신 HTML로
슬라이드는 "1장 = HTML 한 섹션" 구조로 설계했습니다. 각 슬라이드를 class="slide" 블록으로 만들고, 세션별로 테마 클래스(t1·t2·t3)를 달아 구분했습니다. 이렇게 하면 세션을 따로 만들어도 나중에 한 파일로 합치기 쉽습니다.
작업은 세션별로 진행했습니다. Session 1, 2, 3을 각각의 HTML로 먼저 뽑고, 마지막에 셋을 합쳐 통합본을 만들었습니다. 분량이 커서 — 통합본 한 파일이 슬라이드 수십 장 규모입니다 — 한 번에 다 시키기보다, 세션 단위로 끊어 만들고 합치는 쪽이 안정적이었습니다.
일관성은 CLAUDE.md와 프롬프트 패턴으로 잡았습니다. 슬라이드 디자인 규칙(폰트·여백·색·구조)을 미리 정해두면, 매번 같은 톤으로 나옵니다.
세션별 HTML 슬라이드 소스 (Session 1·2·3). 슬라이드 1장이 HTML 한 섹션 — 텍스트라 git 버전 관리와 일괄 수정이 됩니다.
5. 막힌 점은 거의 없었다 — 유일한 손질은 수정 반복
솔직히 말하면, 이 과정에서 크게 막힌 페인 포인트는 없었습니다. 보통 이런 글에는 "이런 에러를 만났고 이렇게 풀었다"가 들어가는데, 이번엔 그럴 만한 큰 벽이 없었습니다.
유일하게 손이 간 건 수정 반복이었습니다. 슬라이드는 본질적으로 고치고 또 고치는 작업이라, 발표를 준비하며 군데군데 문구·순서·강조를 다듬었습니다. 그런데 이마저도 HTML이라 편했습니다. 캔바나 피그마였다면 슬라이드를 하나하나 열어 고쳐야 했을 텐데, "이 부분 이렇게 바꿔줘" 한마디로 반영되니까요.
오히려 흥미로운 건, 막힐 만한 지점들이 막히지 않았다는 점이었습니다. 세션을 따로 만들다 통합할 때의 일관성, 긴 분량의 컨텍스트 관리 — 걱정했던 부분들이 전사본이라는 분명한 출발점과 미리 정해둔 디자인 규칙 덕에 자연스럽게 넘어갔습니다.
6. 시간 단축 체감이 가장 컸다 — 2주가 하루로
이 작업에서 가장 크게 느낀 건 시간입니다. 솔직히 말이 안 되는 수준이었습니다.
예전 같으면 60장 분량의 슬라이드를 캔바(Canva)나 피그마(Figma)로 만들려고 했을 때 적어도 2주는 걸렸습니다. 레이아웃 잡고, 장마다 디자인 맞추고, 내용 채우고, 다시 다듬고. 그런데 이번엔 회의한 내용을 가지고 뚝딱 만들어냈습니다. 같은 60장을, 며칠이 아니라 하루 안에 통합본까지요.
특히 컸던 건 디자인이었습니다. 디자인은 늘 가장 손이 많이 가는 영역인데, 클로드 코드의 디자인 스킬을 불러와서 원하는 스타일로 완성해주니 훨씬 편했습니다. 디자인 감각이나 도구 숙련도가 병목이 아니게 된 겁니다. "이런 느낌으로 만들어줘"가 곧 결과물이 되니까요.
정리하면, 강의 자료를 만드는 일이 "디자인 노동"에서 "무엇을 가르칠지 정하는 일"로 바뀌었습니다. 손이 묶여 있던 2주가 사라지고, 그 시간을 내용의 질에 쓸 수 있게 된 것 — 이게 클로드 코드로 강의를 만들며 얻은 가장 큰 것입니다.
7. 후속 시리즈 예고
이번 편은 "회의 전사본에서 강의 자료까지 만든 과정"이었습니다. 각 단계가 다음 글들의 소재가 됩니다.
(2편) 회의·브레인스토밍을 녹취·STT 전사해 AI 입력으로 쓰는 워크플로우 (음성→노션 시리즈 연결)
(3편) Session 3 앱(YouTube→Notion 요약 → Vercel 배포) 직접 따라 만들기
관련 글: 음성 메모를 노션으로 보내는 PWA 편 / 디스코드 유튜브 봇 → 노션 아카이브 편
마치며
강의 자료를 만들며 확실해진 게 있습니다. AI에게 일을 시키는 출발점은 멋진 문서가 아니라 말한 것을 전사한 원문이라는 것, 그리고 어떤 도구를 가르치는 가장 좋은 방법은 결국 그 도구로 자료를 만들어 보이는 것이라는 점이었습니다. 캔바로 2주 걸릴 일을 회의 한 번과 하루로 끝낸 이 경험이, 그대로 강의 첫 슬라이드의 증거가 됐습니다.
Discord 구글 캘린더 봇 을 직접 만들어 운영하면 일정 입력이라는 잡일이 거의 사라집니다. 입력 방법은 두 가지입니다. 첫째, 텍스트 한 줄 — 채널에 "내일 오후 3시 강남역 미팅"처럼 적기만 하면 됩니다. 둘째, 이미지 캡처 — 카카오톡으로 받은 모임 안내, 학원 시간표, 행사 포스터를 그대로 드래그하면 됩니다. 둘 다 Claude CLI가 읽어 Google Calendar에 자동 등록합니다. 매번 손으로 캘린더 앱을 열어 제목·시간·장소를 입력하던 마찰이 사라집니다. 본인은 이 봇으로 누적 [N]건+ 일정을 자동 등록하며 운영 중입니다. 아래에서는 Discord 메시지(텍스트 또는 이미지) → Claude CLI → Google Calendar MCP 파이프라인을 하나씩 짜 나갑니다. macOS + Python + discord.py + Claude Code CLI + Google Calendar MCP + SQLite 조합이고, 한 시간 남짓이면 본인 환경에서 그대로 따라 만들 수 있습니다. 직전 편 Discord 유튜브 봇 → Notion 아카이브 와 같은 "Discord = 인박스" 패턴의 캘린더 버전입니다. 텍스트 한 줄이든 카톡 캡처든 → Google Calendar 자동 등록 + [수정]/[삭제] 버튼 결과 임베드 (사용자 본인 실제 화면) 1. 왜 이 조합인가 구조 자체는 복잡하지 않습니다. 무엇이든 일단 Discord 채널에 던져 두면 , 그걸 Claude가 읽어 일정으로 정리한 뒤 Google Calendar에 옮겨 박아 줍니다. 채팅창은 그때그때 떠오른 일정을 아무렇게나 흘려 넣는 자리이고, 캘린더는 그렇게 들어온 것들이 제대로 자리 잡는 곳입니다. 사람이 하는 일은 텍스트 한 줄을 적거나 캡처 한 장을 드래그하는 것까지입니다. 입력은 두 경로로 나뉩니다. 텍스트 메시지 는 이미지 처리 없이 바로 Claude CLI가 일정으...
클로드 코드 ollama 연동 은 매달 누적되는 Anthropic API 토큰 비용을 가장 빠르게 줄이는 방법입니다. Claude Code(Sonnet 3.5 호출 기준) 헤비 유저는 하루에 수 달러 단위, 한 달이면 $100~200 수준의 토큰 비용이 쌓입니다. Ollama로 로컬 LLM(qwen2.5-coder:7b)을 띄워 단순 작업을 위임하면 호출 횟수 기준 약 70%, 비용 기준 약 30~50% 수준의 절감이 가능합니다. 복잡한 다파일 리팩토링은 Claude Code, 자동완성·단일 함수 작성·코드 검색은 Ollama로 나누는 구조입니다. macOS M3 맥북 16GB에서 Claude Code와 Ollama로 하이브리드 환경을 약 90분에 구축하고, 1주일간 실제 비용을 측정하며 겪은 과정을 담았습니다. 따라 하면 그대로 재현할 수 있도록 명령어와 결과 스크린샷을 함께 두었습니다. Claude Code(왼쪽) + Ollama(오른쪽) 동시 실행 화면, iTerm2 분할화면 1. 왜 Claude Code + Ollama 하이브리드인가 Claude Code 단독 사용 시 토큰 비용이 빠르게 누적됩니다 Anthropic Sonnet 3.5의 입력 토큰은 $3/M, 출력은 $15/M입니다. 대규모 코드베이스에서 에이전트를 한 세션 굴리면 한 번에 200K 토큰을 가볍게 넘습니다. 하루에 수 달러 단위가 꾸준히 누적되면 한 달이면 $100~200, 1인 개발자에게는 결코 가벼운 부담이 아닙니다. Ollama 로컬 LLM은 단순 작업에는 충분합니다 qwen2.5-coder 7B는 자동완성, 함수 작성, 코드 검색, docstring 생성 같은 단순 코딩 작업에서 단독 사용에 충분한 품질의 응답을 냅니다. 인터넷도 API 키도 비용도 필요 없습니다. 로컬에서 1~2초 만에 응답합니다. 작업을 80/20으로 나누면 비용이 줄어듭니다 경험적으로 코딩 작업의 약 80%는 단순 작업이고 Ollama로 처리 가능하며, 20% 정도가 진짜로 에...
Claude CLI로 만든 1인 콘텐츠 아카이브 봇 — Discord URL 한 줄을 Notion에 자동 저장 (사용자 본인 실제 화면) discord 유튜브 봇 노션 자동 저장 파이프라인을 만든 진짜 이유는 영어 유튜브 영상의 디테일을 놓치는 페인 포인트 때문이었습니다. 좋은 영어 영상을 발견해도 그 자리에서는 흘려듣게 되고, "나중에 자막 켜고 디테일하게 다시 봐야지" 해도 알고리즘 휘발성 때문에 다시 찾기가 거의 불가능합니다. 어렵게 다시 찾아도 매번 자동 번역 자막을 켜고 영상 길이만큼 다시 보는 마찰이 큽니다. 결국 영어로 흘려들은 좋은 내용은 대부분 그대로 증발합니다. 이 봇은 그 마찰을 0으로 줄입니다. Discord 채널에 YouTube URL 한 줄만 올리면 자막 원문을 자동 추출하고, Claude가 한국어로 번역·정제해서 Notion DB에 영구 박제합니다. 30분 후에는 영상을 다시 재생하지 않아도 디테일이 본인 vault에 텍스트로 남아 있습니다. 본인은 이 봇을 233일간 운영하며 vault에 콘텐츠 559건을 박제 했습니다(2025-10-12 시작, 평균 활동일 4.14건/일). 사람이 옮기는 단계는 Discord에 URL 한 줄 붙여넣는 것뿐 입니다. Discord(사람 인박스) → Claude CLI MCP(자동 번역·정제) → Notion(영구 아카이브)의 3단 파이프라인 을 본인이 처음 세울 때 밟았던 순서 그대로 아래에 풀어둡니다. macOS·Python·discord.py·Claude Code CLI·Notion API·yt-dlp·SQLite Queue 조합이고, 실제로 쓴 명령어와 구조도를 붙여 두었으니 본인 맥에서 같은 흐름을 그대로 재현할 수 있습니다. 233일 누적 Notion DB — 자동 적재된 영상 페이지 목록 (사용자 본인 실제 화면) 1. 왜 Discord + Claude CLI + Notion 조합인가 진짜 페인...
댓글
댓글 쓰기