과정 1 입문
Vercel 랜딩페이지 편
코딩 몰라도 내 웹사이트를 만들고 배포하기
- 대상
- 완전 비개발자 · 직장인 · Windows 사용자
- 결과물
- 직장인이 바로 쓰는 개인·서비스 소개 랜딩페이지
- 도구
- Cursor · Next.js · GitHub · Vercel
AI로 직접 만드는 웹게임과 서비스
제가 만든 실제 웹페이지를 예제로 삼아, 기획부터 프롬프트, 코드 수정, Cloudflare 배포까지 한 번에 이어가는 바이브코딩 강의입니다.
카카오, 네이버 출신 개발경력 15년 Mac이 아닌 Windows 기준 실습
길건너 친구들 cross.aipocket.ai
설명만 듣는 강의가 아니라, 직접 열리는 웹페이지를 만듭니다.
길건너 친구들, 대항해시대, 귤 수학 게임처럼 실제로 배포된 예제를 보며 아이디어 정리, AI 도구 사용, 코드 수정, Windows 환경 배포까지 한 흐름으로 따라갑니다.
말보다 결과물
수업의 기준은 설명이 아니라 실제 주소로 열리는 웹페이지입니다.
AI와 같이 고치기
처음 나온 코드를 그대로 쓰지 않고, 원하는 방향으로 읽고 다듬습니다.
배포까지 한 흐름
화면 제작에서 끝내지 않고 Cloudflare와 도메인 연결까지 이어갑니다.
지금까지 바이브코딩으로 만든 프로덕트
각 화면은 실제 사이트에 들어가 캡처한 결과입니다.
전체 시리즈 · 2 PARTS
직장인을 위한 Cursor 바이브코딩
코딩을 몰라도 내 웹사이트를 직접 배포하고, 다음 편에서는 AI가 녹음을 해석하는 Windows 앱까지 만드는 직장인 실전 시리즈입니다.
과정 2 실전/심화
Windows AI 앱 편
Whisper와 Codex로 녹음 해석기 만들기
- 대상
- 입문 강좌 수강자 · AI로 앱까지 만들고 싶은 직장인
- 결과물
- Whisper 기반 녹음 해석기 Windows 앱
- 도구
- Cursor · Codex · Whisper · Electron 또는 Tauri
COURSE 01 · 10 LESSONS
비개발자를 위한 Cursor 바이브코딩 입문
예시는 ‘나의 업무 포트폴리오’ 또는 ‘내 사이드프로젝트 소개’로 진행합니다. 각 강의를 누르면 영상과 상세 학습 내용을 한 화면에서 볼 수 있습니다.
01 02 03 04 05 06 07 08 09 10
비개발자도 웹사이트를 만들 수 있는 시대
바이브코딩과 Cursor의 역할을 이해하고, 랜딩페이지를 Vercel에 배포하는 전체 흐름을 먼저 그립니다.
강의 열기Windows 개발 환경 세팅
처음 개발하는 Windows 사용자도 막히지 않도록 필요한 도구와 프로젝트 폴더를 차근차근 준비합니다.
강의 열기Next.js 프로젝트 만들기
Cursor에게 프로젝트 생성을 요청하고, 첫 화면을 실행하고 수정하는 경험을 만듭니다.
강의 열기랜딩페이지 구조 만들기
방문자가 내용을 빠르게 이해하고 행동할 수 있도록 한 페이지의 기본 구조를 완성합니다.
강의 열기문구와 디자인 다듬기
직장인 대상 메시지를 선명하게 만들고, 데스크톱과 모바일에서 읽기 좋은 화면으로 정리합니다.
강의 열기이미지와 아이콘 추가하기
이미지와 아이콘을 활용해 정보의 우선순위를 보여주고 카드 중심의 반응형 화면을 만듭니다.
강의 열기문의 버튼과 링크 연결하기
완성한 랜딩페이지가 실제 문의와 신청으로 이어지도록 필요한 링크와 버튼 동작을 연결합니다.
강의 열기에러가 났을 때 Cursor로 해결하기
에러를 무서워하지 않고 필요한 정보를 찾아 Cursor와 함께 해결하는 기본 루틴을 익힙니다.
강의 열기GitHub에 코드 올리기
프로젝트를 안전하게 저장하고 Vercel과 연결할 수 있도록 GitHub 저장소에 코드를 올립니다.
강의 열기Vercel로 배포하기
GitHub 저장소를 Vercel에 연결하고, 수정할 때마다 자동으로 다시 배포되는 랜딩페이지를 완성합니다.
강의 열기 COURSE
바이브코딩 강의 상품
왕초보반은 Lovable과 Replit로 바이브 코딩의 재미를 먼저 느끼고, 초보반은 Domain, 인프라, 개발 도구를 연결해 실제 프로젝트를 다루는 흐름으로 진행합니다.
왕초보반 입문 코스
Windows 기준 실습 Lovable, Replit을 이용한 바이브 코딩
코드보다 결과물을 먼저 보면서 AI로 웹앱을 만드는 재미를 느끼는 단계입니다.
추천 대상 코딩이 처음이어도 바로 시작
완성 목표
아이디어를 화면으로 만들고, 브라우저에서 실행되는 첫 웹앱을 완성합니다.
Lovable
- 아이디어를 바로 화면과 기능으로 만들어보기
- 랜딩 페이지와 간단한 웹앱 흐름 잡기
Replit
- 브라우저에서 코드를 실행하고 결과 확인하기
- 작은 웹앱을 직접 고치고 공유해보기
초보반 실전 코스
Windows 기준 실습 Domain, 인프라, 개발 도구를 연결합니다.
실제 프로젝트를 고치고 배포하기 위해 필요한 주소, 서버, AI 개발 도구의 역할을 익힙니다.
추천 대상 내 프로젝트를 고치고 배포까지 진행
완성 목표
도메인, 서버, 배포 도구를 연결해 다른 사람이 접속할 수 있는 프로젝트로 만듭니다.
Domain이란?
- 도메인이 왜 필요한지 이해하기
- 구입한 도메인을 배포된 웹앱에 연결하기
Vercel, AWS, Cloudflare
- 배포 플랫폼과 서버 역할 구분하기
- 내 웹앱을 인터넷 주소로 열리게 만들기
Cursor, Codex, Claude Code
- 프로젝트 파일을 읽고 원하는 방향으로 수정하기
- AI 개발 도구로 빌드, 오류 수정, 배포 흐름 다루기
AI 도구를 목적에 맞게 골라 씁니다.
왕초보반은 Lovable과 Replit로 먼저 재미를 느끼고, 초보반에서는 Cursor, OpenAI Codex, Claude Code로 넘어가 실제 프로젝트를 고치는 흐름으로 진행합니다.
Lovable, Replit으로 시작
설치와 개발 환경 부담을 낮추고, 바로 결과물을 보면서 재미를 느끼는 단계입니다.
Cursor, Codex, Claude Code로 확장
프로젝트가 커지면 파일 구조를 읽고 고치며 빌드와 배포까지 다루는 개발 도구로 넘어갑니다.
Lovable
아이디어를 빠르게 웹앱 화면과 기능으로 만들어보는 도구
처음 프로토타입을 만들고 화면 흐름을 잡아볼 때Replit
브라우저에서 코드를 실행하고 공유할 수 있는 개발 환경
설치 없이 실습하거나 작은 웹앱을 바로 실행해볼 때Cursor
코드 편집기 안에서 AI와 함께 파일을 읽고 고치는 도구
프로젝트 구조를 보며 화면, 스타일, 오류를 빠르게 수정할 때OpenAI Codex
요구사항을 코드 변경, 테스트, 배포 작업으로 이어주는 개발 에이전트
여러 파일을 고치고 빌드·검증까지 한 번에 진행할 때Claude Code
터미널에서 코드베이스를 읽고 수정하는 AI 개발 도구
기존 프로젝트를 분석하고 큰 흐름의 변경을 차근차근 처리할 때커리큘럼 로드맵
처음부터 모든 것을 배우려 하지 않습니다. 하나의 결과물을 만들기 위해 필요한 순서대로만 차근차근 쌓습니다.
무엇을 만들지 정하기
게임, 학습 도구, 소개 페이지처럼 만들고 싶은 결과물을 한 문장으로 좁힙니다.
왕초보반: Lovable
아이디어를 빠르게 화면과 기능으로 바꾸며 바이브 코딩의 첫 결과물을 만듭니다.
왕초보반: Replit
브라우저에서 코드를 실행하고 직접 수정하며 작은 웹앱을 공유해봅니다.
초보반: Domain이란?
도메인이 무엇인지, 구입한 주소를 배포된 웹앱에 어떻게 연결하는지 배웁니다.
초보반: 인프라
Vercel, AWS, Cloudflare가 각각 맡는 배포, 서버, 보안 역할을 구분합니다.
초보반: 도구
Cursor, OpenAI Codex, Claude Code로 프로젝트를 읽고 수정하는 흐름을 다룹니다.
오류 읽고 고치기
에러 메시지, 깨진 레이아웃, 이상한 동작을 작은 문제로 나눠 해결합니다.
초보반: 배포 흐름 이해하기
수정한 프로젝트를 빌드하고 배포해 실제 주소에서 확인하는 과정을 익힙니다.
초보반: CLI와 MCP 연결하기
터미널 명령으로 배포하고, MCP 연결로 AI가 프로젝트 도구와 함께 일하게 만드는 흐름을 익힙니다.
초보반: 도메인 구입하고 연결하기
도메인을 구입한 뒤 DNS와 배포 서비스를 연결해 다른 사람이 접속할 수 있는 주소로 완성합니다.
강의 경력
카카오, 네이버 출신 개발경력 15년을 바탕으로 AI를 실제 결과물로 연결하는 수업을 진행해왔습니다.
AI 사용 방법 강의
AI 도구를 처음 쓰는 사람도 바로 실습할 수 있도록 질문법, 결과 확인, 수정 흐름을 다룹니다.
바이브코딩
아이디어를 웹페이지와 웹앱으로 만들고, AI와 함께 고치며 배포까지 이어가는 수업입니다.
Suno로 AI 노래 만들기
가사, 분위기, 장르를 정리해 Suno로 AI 음악을 만들고 결과물을 다듬는 과정을 안내합니다.
이런 분에게 맞습니다.
코딩을 오래 배운 사람이 아니어도 괜찮습니다. 중요한 건 만들고 싶은 대상이 있고, AI가 내놓은 결과를 조금씩 고쳐가며 완성하려는 태도입니다.
코딩 입문자
문법 공부만 반복하기보다, 내 결과물을 만들며 필요한 코드를 익히고 싶은 분
기획자·디자이너
아이디어를 문서가 아니라 동작하는 프로토타입으로 보여주고 싶은 분
강사·창업자
수업, 홍보, 검증에 쓸 작은 웹서비스를 빠르게 만들고 싶은 분
자주 묻는 질문
강의 문의 전에 많이 궁금해하는 내용을 간단히 정리했습니다.
코딩을 잘 몰라도 들을 수 있나요?
가능합니다. 목표는 완벽한 개발자가 되는 것이 아니라, AI와 함께 결과물을 만들고 고칠 수 있는 감각을 익히는 것입니다.
수업에서 실제로 배포까지 하나요?
네. 로컬에서 보이는 화면으로 끝내지 않고, Vercel, Cloudflare 등에 올려 웹 주소로 공유할 수 있는 상태까지 다룹니다.
수업은 Mac으로 진행하나요?
아니요. Mac이 아닌 Windows 환경을 기준으로 진행합니다. Windows 노트북에서 AI 도구, 코드 수정, 배포 흐름을 따라올 수 있게 구성합니다.
게임 말고 다른 서비스도 만들 수 있나요?
가능합니다. 게임은 예제일 뿐이고, 크롬 도구, Windows용 앱, WebPage 등에도 같은 흐름을 적용할 수 있습니다.
내 아이디어도 웹에서 작동하게 만들어보세요.
강의, 워크숍, 팀 교육 문의를 받고 있습니다.
강의 문의하기