바이브코딩으로 배우는 Context Engineering

코딩 문법 공부 없이, AI와 대화하며 완성하는 나만의 서비스

에러 메시지 앞에서 밤새 고민하던 날들은 이제 끝입니다. AI의 잠재력을 200% 끌어내는 컨텍스트 엔지니어링으로, 기획서 한 장이면 며칠 만에 실제 서비스를 배포할 수 있습니다.

바이브코딩Cursor AIAI 에이전트컨텍스트 엔지니어링Next.jsSupabasen8n제미나이 API노코드 개발소프트웨어 개발 방법론

총 학습 시간

10시간

수강 레벨

중급자

총 강의 수

51개

고민 & 해결책

혹시, AI를 쓰면서도 여전히 이런 상황인가요?

많은 분들이 공감하는 이런 고민들, 이 강의가 해결해 드립니다.

유튜브 강의를 따라 했는데, 라이브러리 버전 하나만 달라도 에러가 터져서 주말 내내 구글링만 하고 계신가요?

AI에게 코드를 짜달라고 했더니 자꾸 옛날 방식의 코드를 알려줘서(할루시네이션), 결국 '내가 직접 치는 게 빠르겠다'며 포기하셨나요?

간단한 화면은 만들겠는데, 로그인이나 데이터베이스 연동 같은 진짜 '서비스' 단계로 넘어가려니 막막한가요?

Cursor나 Claude 같은 AI 도구를 결제는 했지만, 어떻게 물어봐야 원하는 결과가 나오는지 몰라서 사용량만 낭비하고 계신가요?

남들은 AI로 며칠 만에 앱을 런칭했다는데, 나는 환경 설정과 배포 단계에서부터 막혀서 불안하신가요?

이 모든 고민의 해결책

THE SOLUTION

이 모든 고민을 해결하는 방법

이 강의는 코드 복사 붙여넣기가 아닙니다. 컨텍스트 엔지니어링(AI가 내 프로젝트를 정확히 이해하게 만드는 기술)의 핵심을 배웁니다. 51개 실전 영상을 마치면, 백엔드(서버) 구축부터 배포까지 AI와 대화하며 며칠 만에 완성하는 실력을 갖게 됩니다.

솔루션

AI에게 제대로 일 시키는 법, 여기서 배웁니다

핵심 도구 1

Cursor AI & Claude Code

단순한 코드 편집기가 아니라, AI가 내장된 차세대 개발 도구입니다. 컨텍스트 최적화(AI에게 프로젝트 구조를 알려주는 기법)를 통해 에러 발생률을 80% 이상 줄일 수 있습니다.

Cursor AI & Claude Code

핵심 도구 2

MCP (AI에게 도구를 연결하는 기술)

AI가 직접 브라우저를 열어 웹페이지를 확인하고, 에러를 찾아 수정하게 만듭니다. 여러분이 수동으로 할 일을 AI가 대신 처리해줍니다.

MCP (AI에게 도구를 연결하는 기술)

핵심 도구 3

PRD(기획서) & Spec Kit

AI에게 일을 시키기 전에 명확한 설계도를 만드는 방법입니다. 기획 단계에서 AI에게 '프로젝트 규칙'을 알려주면, 프로젝트가 커져도 코드가 꼬이지 않습니다.

PRD(기획서) & Spec Kit

핵심 도구 4

n8n(자동화) & Supabase(데이터베이스)

복잡한 서버 코딩 없이도 자동화 시스템과 데이터베이스를 구축합니다. 1인 개발자도 대기업 수준의 서비스를 운영할 수 있게 됩니다.

n8n(자동화) & Supabase(데이터베이스)

커리큘럼 살펴보기

학습 목표

이 과정을 통해 여러분이 얻게 될 핵심 역량입니다.

AI와 대화하며 코딩하는 바이브 코딩(Vibe Coding)의 핵심 개념과, SDLC(아이디어→개발→배포까지의 전체 흐름)의 변화를 이해한다.

Cursor AI와 Claude Code를 활용하여 에러를 빠르게 디버깅(해결)하고, AI가 내 프로젝트를 정확히 이해하도록 컨텍스트를 최적화한다.

PRD(기획서)와 Spec Kit을 활용한 명세 기반 개발 방법론으로, AI에게 처음부터 정확한 코드를 받아내는 법을 익힌다.

MCP(AI에게 브라우저·외부 도구를 연결하는 기술)를 설정하여 AI의 자동화 능력을 확장한다.

Next.js(웹 프레임워크), Supabase(데이터베이스), Gemini API를 결합하여 실제 서비스 가능한 AI 애플리케이션을 구축하고 배포한다.

n8n(자동화 도구)으로 서버 없이 백엔드를 구축하고, 디자인 시스템을 만들어 풀스택(화면~서버) 개발 전체를 경험한다.

수강 대상

이런 분들께 인생 강좌가 될 거예요!

여러분의 배경과 목표가 무엇이든
이 강의는 AI 시대에 적합한 도구와 방법론을 제공합니다

아이디어는 넘치는데 코딩이 어려워서 3개월째 서비스를 시작도 못 한 예비 창업자

코딩 문법 대신 AI에게 의도를 전달하는 법을 배워, 2주 안에 실제로 작동하는 MVP(최소 기능 제품)를 시장에 내놓을 수 있습니다.

AI를 쓰고는 있는데 할루시네이션(AI가 엉뚱한 답을 내놓는 현상) 때문에 오히려 시간이 더 걸리는 주니어 개발자

컨텍스트 엔지니어링 기법을 익혀서 AI의 오답률을 줄이고, 지금보다 5배 빠르게 복잡한 기능을 구현할 수 있습니다.

기획부터 디자인, 배포까지 혼자 다 해야 하는 1인 개발자/기획자

AI를 팀원처럼 활용하는 워크플로우를 구축하여, PRD(기획서) 한 장으로 프론트엔드(화면), 백엔드(서버), 디자인까지 일관성 있게 뽑아낼 수 있습니다.

핵심 특징

강의 특징

51개 영상으로 끝내는 실전 풀스택 로드맵

바이브 코딩 입문부터 Next.js(웹 프레임워크), Supabase(DB) 연동, Vercel(배포) 까지 전 과정을 담았습니다. 3개 이상의 실제 프로젝트를 직접 빌드하며 체득합니다.

AI가 내 프로젝트를 완벽히 이해하게 만드는 컨텍스트 설계법

AI에게 대충 물어보면 엉뚱한 답이 나옵니다. 프로젝트의 규칙과 구조를 AI에게 체계적으로 알려주는 기법으로, 할루시네이션(AI의 엉뚱한 답변)을 원천 차단합니다.

MCP 기술을 활용한 AI 자동 디버깅

MCP(AI에게 브라우저 등 외부 도구를 연결하는 기술)를 활용해, AI가 직접 화면을 열어 에러를 찾고 수정합니다. 에러 메시지를 하나하나 읽을 필요가 없어집니다.

디자인 감각이 없어도 완성되는 AI 디자인 시스템

핀터레스트나 드리블에서 마음에 드는 디자인을 AI에게 보여주면 비슷한 스타일로 만들어줍니다. 모바일 반응형부터 다크모드까지 전문가 수준의 UI를 바로 구현합니다.

학습 로드맵

완벽한 커리큘럼으로 차근차근 배우기

모듈, 챕터, 레슨으로 구성된 체계적인 커리큘럼으로 효과적인 학습 경험을 제공합니다. 총 6개 모듈, 51개 레슨이 준비되어 있습니다.

10개 레슨 무료 공개

바이브 코딩 입문

AI와 함께하는 새로운 개발 패러다임의 시작

1시간

강의 개요

바이브 코딩(Vibe Coding) 입문 가이드무료 공개

8분

바이브 코딩의 이해와 핵심 개념

AI 주도 개발의 새로운 패러다임, 바이브 코딩 입문

1시간

바이브 코딩의 핵심 철학

바이브 코딩(Vibe Coding) 입문 가이드무료 공개

9분

AI 주도 서비스 개발 강의 개요무료 공개

6분

바이브 코딩의 역사와 AI 개발 도구의 진화무료 공개

7분

AI 스튜디오 기초

구글 AI 스튜디오 바이브 코딩 입문무료 공개

7분

Gemini로 만드는 AI 이미지 편집 앱무료 공개

12분

Google AI Studio 마스터리

바이브 코딩부터 컨텍스트 엔지니어링까지

1시간

컨텍스트 엔지니어링과 PRD

AI 코딩과 컨텍스트 엔지니어링무료 공개

10분

AI 스튜디오로 PRD 작성하기무료 공개

14분

Google AI Studio PRD 기반 앱 제작 실습무료 공개

7분

Cursor IDE 기초 마스터하기

AI 코딩의 표준, Cursor의 핵심 기능부터 실전 프로젝트 구축까지

1시간

개발 환경 구축 및 최적화

AI 코딩 툴 Cursor 완벽 가이드

15분

Cursor AI와 Next.js 개발 환경 구축

6분

커서 AI 프로젝트 룰 설정 가이드

7분

실전 프로젝트 구현

Cursor AI로 만드는 이미지 편집 챗봇

11분

바이브 코딩 시대의 소프트웨어 개발 생애주기

6분

풀스택 AI 앱 개발 마스터 클래스

바이브 코딩과 AI 에이전트를 활용한 현대적 소프트웨어 개발

5시간

SDLC 및 전략적 기획

Cursor와 GitHub 연동 및 Next.js 초기 설정

11분

AI 코딩 에이전트용 PRD 작성 가이드

14분

AI 에이전트 기반 소프트웨어 설계 전략

13분

Cursor AI 개발 전략: 컨텍스트와 추측 방지

10분

모델 컨텍스트 프로토콜 (MCP)

MCP와 AI 에이전트의 이해

15분

Cursor에 MCP 연동하기

17분

UI 및 프론트엔드 구축

Shadcn UI와 AI 에이전트 활용법

5분

Cursor AI 실전 에러 해결 및 Git 관리 가이드

11분

AI 채팅 클론: 사이드바 구현 및 UI 디버깅

10분

CLI 도구 및 버전 관리

제미나이 CLI 설치 및 인증 가이드

4분

제미나이 초기화 및 MCP 설정 가이드

10분

AI 코딩 도구 활용 및 오류 복구 가이드

8분

핵심 기능 구현 및 디버깅

Cursor와 Gemini를 활용한 AI 앱 개발 실전

10분

Stagewise를 활용한 UI 컴포넌트 수정 가이드

7분

제미나이 API 연동 및 디버깅 가이드

10분

Cursor와 MCP를 활용한 AI 채팅 앱 개발

17분

Cursor AI 파일 업로드 구현 및 디버깅

13분

Cursor AI 브라우저 디버깅 및 MCP 최적화

5분

AI 챗 앱 개발: 세팅 및 모바일 반응형 구현

4분

백엔드 통합 및 배포

Supabase로 로그인 기능 구현하기

25분

Supabase DB 구축 및 보안 설정

18분

Vibe Coding: SDLC 이해와 Vercel 배포 가이드

16분

플랫폼 업데이트

커서(Cursor) 2.0 업데이트 주요 기능 가이드

12분

스펙 중심 개발(Spec-driven Development) 및 고급 도구 활용

AI 에이전트와 최신 IDE를 활용한 효율적인 제품 개발 전략

4시간

고급 개발 방법론 및 도구 소개

Cal AI와 Spec-driven 개발 방법론

10분

Antigravity AI 코딩 툴 설정 가이드

10분

프로젝트 초기화 및 요구사항 정의

AI 에이전트 기반 Next.js 프로젝트 구축

12분

Antigravity를 이용한 Cal AI 클론 PRD 작성

10분

도구 자동화 및 명세 기반 개발

Spec Kit을 활용한 명세 기반 개발 입문

9분

Spec-kit과 컨텍스트 엔지니어링: 효율적인 AI 개발 워크플로우

17분

Claude Code 컨텍스트 최적화: 토큰 효율 극대화 전략

6분

SpecKit Constitution과 메타 프롬프팅의 이해

11분

SpecKit을 활용한 명세 구체화 및 워크플로우 최적화 (Specify & Clarify)

16분

AI 에이전트 워크플로우: 기획부터 구현까지의 체계적 흐름

18분

SpecKit을 활용한 실전 웹 개발 및 GitHub 워크플로우

14분

AI를 활용한 웹 디자인 커스터마이징 및 리소스 적용

15분

AI 기반 바이브 디자인과 디자인 시스템 구축

39분

커리큘럼을 모두 완료하면

모든 학습을 완료한 후 수료증을 발급받아 여러분의 성취를 증명하세요.
새로운 기술을 습득하고 개인 포트폴리오에 추가할 수 있습니다.

지금 시작하세요

실력을 한 단계 끌어올릴 준비가 되셨나요?