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

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

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

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

총 학습 시간

16시간

수강 레벨

중급자

총 강의 수

84개

고민 & 해결책

혹시, 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를 바로 구현합니다.

학습 로드맵

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

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

22개 레슨 무료 공개

바이브 코딩 입문

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분

Gemieni Cli, Claude Code 마스터 클래스

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

5시간

SDLC 및 전략적 기획

Cursor와 GitHub 연동 및 Next.js 초기 설정무료 공개

11분

AI 코딩 에이전트용 PRD 작성 가이드무료 공개

14분

AI 에이전트 기반 소프트웨어 설계 전략무료 공개

13분

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

10분

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

MCP와 AI 에이전트의 이해무료 공개

15분

Cursor에 MCP 연동하기무료 공개

17분

Context7 MCP를 활용한 Supabase 초기화 및 최신 문서 참조

5분

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) 및 Context Engineering

Spec Kit을 활용한 개발로 Context Engineering에 대한 이해

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분

깃허브 워크플로우와 AI 기반 코드 클린업

8분

AI 에이전트를 활용한 개발 명세(Spec) 추출 및 우선순위 설정무료 공개

8분

Spec-Kit을 활용한 대시보드 기획 및 스펙 생성

7분

Spec-Kit을 활용한 요구사항 구체화와 개발 계획 수립

13분

클로드 코드를 활용한 효율적인 개발 프로세스: 분석부터 검증까지

11분

대시보드 구현 및 Git 워크플로우 자동화

11분

n8n 으로 백엔드 구축하기

n8n으로 AI 연동 마스터하기

미정

n8n 개념과 셀프호스팅 환경 구축

n8n의 이해와 AI 음식 분석 시스템 구축

12분

n8n 설치 및 3가지 호스팅 방법 비교

10분

Railway로 n8n 서버 구축하기

5분

n8n으로 AI 에이전트 백엔드 구축하기

Gemini AI를 활용한 첫 AI 에이전트 구축

15분

AI 식단 분석기 백엔드 구축 w/ Meta-Prompting

17분

웹훅 연동과 프로덕션 배포

n8n 웹훅 연동 및 AI 코드 생성 가이드

14분

Spec-kit을 활용한 웹훅 요구사항 구체화 (Clarify)

11분

웹훅 구현 및 태스크 실행 분석

8분

n8n 웹훅 프로덕션 배포 및 서비스 적용

6분

웹훅 디버깅과 AI 파이프라인 안정화

웹훅 완성 및 JSON 파싱 오류 해결

19분

이미지 분석 파이프라인 완성: 타임아웃 해결 및 모델 최적화

6분

Supabase 인증 시스템 연동

Supabase 기초 및 구글 소셜 로그인 연동

15분

Custom Command 명령어 작성 및 AI 에이전트 스킬 확장

11분

Supabase 인증 시스템 스팩 설계

10분

Supabase Auth 인증 시스템 Clarify

8분

Supabase Auth 구현: AI 시대의 코딩 패러다임과 설계의 중요성

13분

AI 에이전트를 활용한 Supabase Auth 디버깅

12분

Supabase 데이터 저장과 프로젝트 마무리

Supabase 저장하기: Plan 모드를 활용한 근본 원인 분석

13분

Supabase 데이터 저장 구현 및 Spec-Kit 활용

5분

Supabase CLI 데이터베이스 마이그레이션 및 테이블 생성

8분

Supabase 연동 및 n8n 자동화 노드 추가

17분

기능 마무리: 데이터 연동 및 UI 최적화

3분

결제 시스템 연동

실전 결제 연동과 프로젝트 완성

미정

국내외 결제 시스템(PG)의 이해

국내외 결제 시스템(PG)의 이해와 선택

6분

토스페이먼츠 연동

토스페이먼츠 MCP 연동 및 AI 코딩 가이드

17분

결제 정보 데이터베이스 준비 및 시스템 구현

12분

프로젝트 분석 방법 및 컨텍스트 엔지니어링

프로젝트 분석 방법 및 컨텍스트 엔지니어링의 중요성

13분

커리큘럼을 모두 완료하면

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

지금 시작하세요

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