바이브 코딩 With Claude Code로 웹 서비스 만들기

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

Whisper를 로컬에서 실행하고, FastAPI와 Next.js를 활용해 AI 음성 인식 앱을 빠르게 개발하는 실전 프로젝트 강의입니다. 실시간 음성 인식까지 구현하며, 짧은 시간 안에 간단한 포트폴리오로 활용할 수 있는 결과물을 완성할 수 있습니다.

데스크탑과 모바일에서 모두 동작하는 1인칭 3D 웹사이트를 만들어 보는 강의입니다.

테스트를 먼저 설계하면, 구현은 AI가 대신합니다. 개발 속도와 품질을 동시에 잡는 실무형 개발 방식!

"왜 AI가 이런 코드를 짰지?", "왜 방금 말한 걸 기억 못 하지?" 클로드 코드(Claude Code)와 같은 AI 도구를 쓰다 보면 마주하는 답답함, 그 원인은 도구가 어떻게 동작하는지 모르니까입니다. 이 강의는 그 블랙박스를 투명하게 열어젖힙니다. 우리는 25강에 걸쳐 LLM에게 파일을 보는 '눈(Read)', 코드를 고치는 '손(Edit)', 명령을 수행하는 '발(Bash)'을 직접 달아주며, 실제 현업 도구와 똑같이 동작하는 나만의 Coding Agent를 밑바닥부터 구현합니다. 단순히 라이브러리 사용법을 배우는 것이 아닙니다. AI가 어떻게 프로젝트 구조를 파악하고, 왜 긴 대화에서 기억을 잃는지, 그것을 기술적으로 어떻게 해결하는지(Sliding Window, Summary) 직접 코드로 구현하며 체득합니다. 이 과정을 통해 여러분은 AI 도구의 단순한 '사용자'에서, 작동 원리를 꿰뚫고 도구를 내 입맛대로 개조하고 평가할 수 있는 'AI 공급자'의 시야를 갖게 될 것입니다.

문서 → 코드 자동화. 프롬프트 치지 말고 시스템이 일하게 만드세요. Skills, Sub-agents, Commands로 나만의 AI 개발 에이전트를 구축하고, 5개 실전 프로젝트로 수익화 서비스까지 완성합니다.

[Tailwind CSS로 만드는 멋진 웹 UI 스타일링] 강의는 현재 가장 핫한 프레임워크인 Tailwind CSS v3.4.1을 이론부터 실전 반응형 웹사이트까지 19시간 충실하게 다루고 있습니다. 수업 시간이 길다고 좋은 강의는 아닙니다. 하지만 해당 강의는 시간도 긴 좋은 강의라고 자부합니다. 특히, Tailwind CSS 모든 이론을 8시간 30분 동안 상세하게 다루기 때문에 CSS 이론이 부족한 사람에게 CSS 이론을 충실히 학습할 수 있습니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

강의에서는 Claude Code architecture를 통해 왜 모델보다 하네스가 중요한지 설명합니다. 그리고 Context Harness, Permission Harness, Verification Harness, Tool Harness, Subagent & Worktree Harness, Debugging Harness라는 6가지 구조로 Claude Code 작업 시스템을 설계하는 방법을 다룹니다. 이후에는 CLAUDE.md, 세션 관리, 큰 코드베이스 제어, worktree 병렬 운영, 에러 로그 분석, 환경변수 및 설정 스코프 문제 추적까지 연결하면서, 실제 백엔드·DevOps 실무에서 Claude Code를 계속 쓸 수 있는 기준을 잡아드립니다.

전통적인 React 개발 방식과 Next.js를 이용해서 개발하는 방식은 전혀 다릅니다. 이 강의는 최신 Next.js 16의 핵심을 꿰뚫고, '진짜' Next.js다운 개발 방식을 알려드립니다. 취업 포트폴리오부터 실무 프로젝트까지, 성능과 효율을 모두 잡는 방법을 경험하세요. Next.js 스럽게 개발 합시다! Next.js의 기능을 어떻게 적용해야하는지 실제 예제를 만들면서 몸으로 배울 수 있도록 구성되었습니다. 서버 컴포넌트를 중심으로 보고 서버 액션과 캐싱 전략등을 이론보다는 실제로 코드를 통해서 더 빠르게 학습합니다. 강의의 목표는 최대한 빨리 Next.js의 분위기를 따라가는 것이 때문에 강의 자체는 JavaScript를 이용해서 진행합니다. 하지만 각 강의의 예제는 Typescript로 제작된 것을 추가로 수업자료로 제공합니다. 2025년 12월 18일 - Next.js 16버전으로 업데이트

개발자에게 매번 부탁하던 방식은 이제 그만! 비싼 외주 쓰지 않고 웹사이트와 다양한 서비스들을 만들어보아요!

코딩 없는 풀스택 시스템 구축: 한국어 프롬프트(바이브 코딩)만으로 데이터 수집부터 AI·ML 분석, 웹 대시보드까지 전체 파이프라인을 직접 완성합니다. 100% 자동화 파이프라인 소유: 매일 아침 텔레그램으로 S&P 500 스크리닝 및 투자 의견을 수신하는 독립적인 주식 분석 도구를 확보합니다. 실전 데이터 기반 투자 프레임워크 체득: 실제 운영 중인 소스 코드를 바탕으로 기관 수준의 데이터 분석 및 리스크 관리 역량을 내 것으로 만듭니다.

React 가 처음이라면? React의 기본 개념을 튼튼히 하면서도 빠르게 배울 수 있는 방법을 고민해야 합니다. Next.js와 JavaScript로 최소한의 지식으로 시작해 보세요. 실무에서 개발에 필요한 필수적인 예제들만 간추려 개발해 봅시다. Todo 예제는 너무나 중요하므로 2번 개발해야 합니다. 한번은 컴포넌트 중심으로 다음에는 브라우저의 경로에 맞게 처리되는 라우팅 중심으로! 로그인은 Zustand를 이용하세요! 정말 적은 양의 코드로 전역 상태를 처리할 수 있습니다.

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

머신러닝에 대한 이해가 전혀 없어도! Google의 티처블머신과 HTML, CSS, JS로 있어보이는 프로젝트를 만드실 수 있습니다. 함께 비슷한 연예인 찾는 서비스를 만들어봐요!

IntelliJ를 사용하는 Java 백엔드 개발자들이 Claude Code를 이용해 생산성을 극대화 할 수 있는 방법을 알려드립니다. 특히 윈도우 환경을 사용하는 분들이 겪는 바이브 코딩 환경 문제를 완벽히 해결할 수 있도록 도와드립니다.

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

Obsidian을 단순 메모장에서 벗어나 개인 지식 데이터베이스로 진화시키고, Claude Code를 활용해 내 노트와 문서를 이해하는 AI 비서를 구축합니다. 반복 업무를 자동화하는 워크플로우를 직접 제작하며, 매일의 작업과 학습 내용이 복리로 쌓이고 나만의 노하우로 변환되는 지식 시스템을 완성합니다.

풀스택 개발에 날개를 달아줄 Supabase! 3가지의 클론 프로젝트를 통해 Next.js 14와 Supabase로 실무 수준의 풀스택 개발을 하는 법을 속성으로 배우게 됩니다.

개발 유형을 테스트하는 웹 페이지를 만들어보세요! MBTI아닌 MBIT(My Best IT personalities)! 'MBIT 테스트 페이지'를 직접 만들어보며 웹 개발의 전반적인 프로세스를 익혀볼 수 있습니다. (Django 3.1 버전을 사용합니다.)