hero-section-background
hero-section-image

비개발자의 서비스 제작 도전: 바이브 코딩부터 배포까지

20%452,800원
566,000원

권장 수강 대상

누구나, 창업 준비자, 이직 준비자, 대학생, 취업 준비생

카테고리

온라인 강의

수강시간

38시간 58분

강의수

46개

강의 소개

커리큘럼

AI에게 시켜는 봤는데… 왜 내 업무와 서비스로 이어지지 않을까요?

AI에게 질문하면 답변은 나오고,

코드를 부탁하면 그럴싸한 결과물이 만들어집니다.


하지만 정작 “이 결과를 믿어도 될까?”, “내가 원하는 서비스로 어떻게 완성할까?”라는 질문 앞에서는 고민이 앞섭니다.

AI를 써보는 것과, 원하는 결과를 끝까지 만들어내는 것은 다르기 때문입니다.


👉 이 과정은 AI와 함께 ‘업무의 결과물’과 ‘나만의 서비스’를 직접 완성하는 시간입니다.

목적과 판단 기준을 담은 업무 요청부터 결과 검증, 자동화, 웹서비스 제작과 배포까지 차근차근 경험하세요.


1️⃣ GPTs·Codex로 업무 비서와 데이터 분석 보고서를 만들고,

2️⃣ Cursor로 게임·명상 앱·기업 웹사이트를 구현합니다.

3️⃣ 나아가 회원관리·데이터베이스·대화 기록·관리자 화면을 갖춘 AI 챗봇까지 완성하며,

요청 설계 → 결과 검증 → 구현 → 배포·운영으로 이어지는 실전 역량을 자신의 것으로 체득하게 됩니다.

왜 지금, 이 과정이어야 할까요?

✔️ 원하는 결과를 이끄는 AI 업무 활용력

명확한 요청과 결과 검증을 바탕으로, GPTs·Codex를 활용한 업무 비서와 자동화 시스템을 만듭니다.


✔️ 비개발자도 완성하는 나만의 웹서비스

Cursor로 게임·명상 앱·기업 웹사이트를 만들고, GitHub와 Vercel로 저장·배포합니다.


✔️ 제작부터 운영까지 연결하는 실전 경험

회원관리·데이터베이스·대화 기록·관리자 화면을 갖춘 AI 챗봇을 구현하고, 비용과 보안까지 살펴봅니다.

강의 미리보기

수치가 빠지면 추정하지 않고 되묻는 업무용 GPTs

‘주간 운영 보고 비서’ GPTs에 지난주 수치가 없는 요청을 보내면 필요한 수치를 먼저 되묻고, 값을 채운 뒤에는 보고서 양식에 맞춰 작성합니다.

Codex로 매출 분석 HTML 보고서 만들기

‘이 내용으로 만들어줘’ 요청으로 HTML 파일이 만들어지면, 열어서 분석 범위와 집계 기준이 담긴 ‘통합 매출 분석 보고서’를 확인합니다.

AI 사주 서비스: 상담가를 고르고 대화하기

OpenAI API로 만든 AI 사주 서비스에서 상담가를 선택해 질문하고, 딱딱하던 답변을 프롬프트로 고쳐 더 자연스러워진 대화를 확인합니다.

바이브코딩 with Cursor: AI 기반 실시간 영어 회화 서비스

과정에서 완성하는 영어회화 AI 챗봇 웹앱의 시연 영상입니다(Cursor + OpenAI API).

작게 만들고, 실행하고, 수정하며 서비스를 완성합니다.

프롬프트와 업무용 GPTs에서 시작해, 게임·웹앱·랜딩페이지·AI 챗봇과 데이터베이스 연동까지 단계적으로 확장합니다.


💬 원하는 기능을 설명합니다

목적·입력·출력과 필요한 조건을 구체화합니다.


▶ 직접 실행합니다

AI가 작성한 코드가 어떻게 동작하는지 확인합니다.


🔧 오류와 기능을 다듬습니다

문제를 나눠 수정하고 원하는 동작을 점검합니다.


🌐 배포하고 확장합니다

웹앱을 배포하고 API·DB·회원 기능을 연결합니다.

이런 고민이 있나요?

만들고 싶은 서비스는 있지만 개발을 어디서 시작해야 할지 모르겠어요.

이미지
서비스 아이디어가 있는 비개발자

AI가 코드를 만들어줬지만 오류가 나면 어떻게 고칠지 막막해요.

이미지
AI 코딩 입문자

화면은 만들었지만 로그인과 데이터 저장·배포까지 연결하지 못했어요.

이미지
웹앱 제작 경험자

대화 기록과 관리자 기능이 있는 챗봇을 직접 만들고 싶어요.

이미지
챗봇을 만들고 싶은 학습자

이렇게 성장할 수 있어요!

기능과 조건을 정리해 AI 코딩 도구에 작업을 요청합니다.

이미지
서비스 아이디어가 있는 비개발자

코드를 실행하고 수정하면서 개발 과정을 경험합니다.

이미지
AI 코딩 입문자

GitHub 저장·Vercel 배포와 DB·회원 기능을 연결합니다.

이미지
웹앱 제작 경험자

DB·회원 기능을 연결합니다. 웹앱 제작 경험자 사용자 대화·기록·관리자 화면을 갖춘 챗봇을 제작합니다.

이미지
챗봇을 만들고 싶은 학습자

본 과정이 해결하는 핵심 학습 방식

1️⃣ 요청 설계·검증

프롬프트와 GPTs로 요구사항을 표현하고 결과를 검토합니다.

2️⃣ 작은 웹앱 제작

Cursor로 달리기 게임·명상 타이머·기업 사이트를 만듭니다.

3️⃣ API·DB·권한 연결

데이터 저장과 회원·관리자 기능을 구현합니다. 사용자 관리·API 사용량·비용 모니터링을 갖춘 백오피스 프로젝트 결과 화면입니다.

4️⃣ 챗봇 배포·고도화

대화 기록이 있는 AI 챗봇을 완성하고 기능을 다듬습니다. 과정에서 완성하는 영어회화 AI 챗봇 시연 영상의 화면입니다.

어떤 기술을 습득하게 되나요?

ChatGPT · GPTs · Codex

ChatGPT · GPTs · Codex

요청 설계와 업무용 비서·데이터 분석 결과물을 만듭니다.

Cursor

Cursor

AI와 대화하며 코드를 생성·실행·수정합니다.

GitHub · Vercel

GitHub · Vercel

프로젝트를 저장하고 웹서비스를 배포합니다.

Supabase · API

Supabase · API

로그인·대화 기록·데이터 저장과 AI 기능을 연결합니다.

크리에이터

김도현

모두의연구소 콘텐츠 프로듀서

반복하는 업무는 AI에 맡기고, 만들고 싶던 웹 서비스에도 도전해 봐요. 프롬프트를 설계하고 작은 기능을 구현하는 과정을 차근차근 안내해 드릴게요. 직접 실행하며 업무와 서비스에 활용할 결과물을 함께 완성해 봐요!

모두의연구소 콘텐츠 MD

직장인 대상 AI·생산성 교육 기획

생성형 AI의 실무·일상 활용

상위 1% 일잘러를 위한 고급 프롬프트 엔지니어링 기획 및 제작

[왕초보] 비개발자도 할 수 있는 바이브 코딩 웹 개발 기획 및 제작

김정현

풀스택 프로덕트 개발자 · AI/ML 엔지니어

떠올린 아이디어를 실제로 사용할 수 있는 서비스로 만들어봐요. LLM 서비스와 클라우드·데이터베이스를 개발하고 운영한 경험을 바탕으로, 구현부터 운영까지 차근차근 안내해 드릴게요. 작은 기능을 하나씩 연결하며 서비스를 완성해 봐요!

LLM 서비스·챗봇·RAG 시스템 기획과 개발

클라우드·DevOps·데이터베이스 설계 및 운영

공공·B2B AI 솔루션 개발 프로젝트

[AI 능력자] 바이브 코딩 with Cursor: 챗봇, DB 배포까지 제작

커리큘럼

입문

38시간 58분

1-1
학습을 시작하며
5분
1-2
과정 오리엔테이션
11분
1-3
업무 요청 설계표 다섯 칸
12분
1-4
AI의 성질과 대화로 고치기
8분
1-5
ChatGPT 기본 사용법
10분
1-6
설계표로 회의록 만들기
14분
2-1
GPTs는 언제 만들 가치가 있나
11분
2-2
GPTs 이해하기
3분
2-3
GPTs 제작 1 - 만들기와 지침 생성
6분
2-4
GPTs 제작 2 - 지침 다듬기
5분
2-5
GPTs 제작 3 - 완성과 확인
3분
2-6
GPTs 사용해보기
12분
3-1
구글 시트 세팅하기
4분
3-2
앱스스크립트 세팅
8분
3-3
스크립트 코드 수정하기
8분
3-4
추가 기능 구현하기
21분
3-5
VBA 코드 구현하기
11분
3-6
VBA 추가 기능 구현하기
8분
4-1
ChatGPT에서 Codex로
16분
4-2
내 컴퓨터 관리하기 1 - 파일의 기본 동작
7분
4-3
내 컴퓨터 관리하기 2 - 업무 폴더 정리
10분
4-4
엑셀 데이터 폴더 정리와 통합
7분
4-5
데이터 분석과 표 그래프 만들기
7분
4-6
분석 결과를 HTML 보고서로 만들기
13분
5-1
발주서 양식 자동 입력 시작하기
14분
5-2
에이전트와 스킬 만들기
8분
5-3
발주서 여러 건 일괄 생성하기
5분
5-4
플러그인으로 내 자료에 연결하기
10분
5-5
예약 기능으로 반복 작업 자동화
5분
5-6
사이트로 회사 안내 페이지 배포하기
8분
6-1
프로젝트 안내 — 나의 업무용 GPTs 제작
1시간
7-1
심화 프로젝트 안내 — Codex 데이터 통합 분석 보고서
2시간
8-1
바이브코딩이란?
30분
8-2
Windsurf 설치 및 설정
30분
8-3
Windsurf와 Cursor 요금제
30분
8-4
Windsurf에서 사용 가능한 모델
30분
9-1
포트폴리오 웹페이지 생성, 캐스케이드 활용
20분
9-2
모델의 답변 리뷰하기
10분
9-3
Rule: 캐스케이드가 따르는 규칙 선언 방법
15분
9-4
Rule 정의 및 새 프로젝트 생성
20분
10-1
LLM이란?
10분
10-2
OpenAI Playground에서 파라미터 조정하기
20분
10-3
다양한 프롬프트 예시와 기법
20분
11-1
Rule 업데이트: 역할 및 구체적 지시사항 부여
5분
11-2
프로젝트 개선 계획 세우기
5분
11-3
섹션 크기 수정
15분
11-4
콘텐츠 영역을 바꾸는 프롬프트
15분
11-5
섹션 위치 이동
15분
12-1
GitHub 소개
10분
12-2
GitHub Desktop 설치
10분
12-3
GitHub 저장소 생성
10분
12-4
GitHub 저장소 복제
5분
13-1
Git 설치하기
10분
13-2
커밋 추가
10분
13-3
GitHub 저장소로 push
5분
13-4
로컬 저장소에서 fetch & pull
10분
13-5
Windsurf와 GitHub Desktop
10분
14-1
브랜치 생성
10분
14-2
브랜치 이동
10분
14-3
브랜치 병합
10분
15-1
프로젝트 1: 나의 첫 Git
1시간
16-1
Windsurf 저장소 초기화
10분
16-2
포트폴리오 웹페이지 원격 저장소 생성
5분
16-3
GitHub 계정 인증
5분
16-4
원격 저장소 연동
5분
17-1
Gemini와 함께 이력서 수정
5분
17-2
자기소개 섹션 수정
20분
17-3
Gemini 이미지 생성 기능 활용
10분
17-4
Windsurf 이미지 업로드 기능
10분
17-5
오류 해결
10분
17-6
커밋 추가
20분
18-1
Claude 웹페이지 개발
20분
18-2
Figma 디자인 초안 생성
20분
18-3
ChatGPT 활용
5분
18-4
Figma 디자인 수정
10분
19-1
Rule 수정
5분
19-2
GitHub Pull Request
20분
19-3
원격저장소 동기화 및 새 브랜치 생성
15분
20-1
다양한 AI 어시스턴트 답변 참고
25분
21-1
개선 1 - 타임라인 디자인 반영
20분
21-2
경력사항 수정
10분
22-1
개선 2 - 컬러 팔레트
20분
22-2
커밋 추가
5분
22-3
프로젝트 컬러 팔레트 수정
15분
22-4
커밋 추가 및 브랜치 병합
15분
23-1
개선 3 - 좌우 교차 레이아웃 반영
10분
23-2
반응형 웹 만들기
5분
23-3
오류 해결 및 Revert
15분
23-4
브랜치 병합
15분
24-1
개선 1 - 타임라인 디자인 반영
20분
24-2
경력사항 수정
10분
25-1
프로젝트2: 내가 만든 웹 포트폴리오
1시간
26-1
Threejs와 인터랙티브 웹
15분
26-2
TRELLIS 소개
10분
26-3
Tripo3D
10분
27-1
가방 쇼핑몰 웹페이지 기획
10분
27-2
가방 쇼핑몰 프로젝트 생성
15분
27-3
3D 가방 애셋 생성
15분
27-4
커밋 추가
15분
28-1
3D 가방 회전 기능
10분
28-2
3D 가방 캐러셀
15분
28-3
3D 가방 색상 변경 기능
15분
29-1
웹 배포
15분
29-2
프로젝트 소개글 작성
15분
29-3
나의 개발 여정 마무리
10분
30-1
최종 프로젝트: 3D 웹앱 만들기
2시간
31-1
Hello! Vibekode?
5분
31-2
What's the vibe?
10분
31-3
Beware your vibe
10분
31-4
The vibe we're going to build
5분
32-1
개발환경 구성: Cursor 설치
10분
32-2
개발환경 구성: Node 설치
10분
32-3
개발환경 구성: Git 설치
10분
32-4
개발환경 구성: MacOS
10분
33-1
바이브 코딩 툴 (IDE, Agent) 이해
10분
33-2
어떤 바이브 코딩 툴이 좋을까?
10분
33-3
Cursor 기초 사용방법
5분
33-4
강의 자료 소개
5분
34-1
What vibe are we gonna be in?
10분
34-2
The vibe-ground
10분
34-3
Go further vibe
5분
34-4
스벨트 프로젝트 생성
3분
34-5
IDE 사용 세부 설정 설정
10분
34-6
나만의 영어회화 챗봇 서비스 아키텍처
10분
35-1
첫 바이브 코드
5분
35-2
UI 다듬기
15분
35-3
파일 컨텍스트 사용법
10분
35-4
API 문서 활용법
15분
35-5
API 구현 및 연결
15분
35-6
Vibe Tactics: 정신일도 하사불성
5분
36-1
환경변수 정의
5분
36-2
디버거 구현
10분
36-3
API 연결과 챗봇 구현
5분
36-4
배포의 의미
10분
36-5
vercel 가입, 설치 및 배포
5분
37-1
전체 프로젝트 아키텍처 확장 설명
5분
37-2
git 커맨드라인 사용법 회고
15분
37-3
Supabase 가입부터 DB 테스트까지
30분
37-4
데이터베이스 저장 테스트해보기
10분
37-5
주석 달기, 테스트 페이지 삭제
5분
37-6
Vibe Tactics: 검색 기반 답변요청
5분
38-1
UI 구현하기
5분
38-2
UI 테스트하기
15분
38-3
리다이렉션 경로 설정하기
15분
38-4
확인 메일 테스트하기
10분
38-5
SMTP 설정하기
10분
39-1
필요한 DB 목록과 내용 검토
10분
39-2
기록용 DB 테이블 생성
20분
39-3
대화 기록 UI 구현
10분
39-4
대화 기록 구현 돌아보기
10분
39-5
Vibe Tactics: 빅 스텝 스몰 스텝
5분
40-1
여러 톤 설정하기
5분
40-2
대화 기록에 프롬프트 톤 기록하기
15분
40-3
나만의 대화 프롬프트 저장해서 쓰기
15분
40-4
긴 코드 파일 리팩토링하기
10분
41-1
개인 정보 보호 정책 구현하기
5분
41-2
약관 동의 구현하기
15분
41-3
Vibe Tactics: 코드, 파일의 적절한 리팩토링
5분
42-1
개인 정보 관리
10분
42-2
사용량 및 요금 계산
5분
42-3
API 사용량 관리하기
15분
42-4
API 데이터 추적하기
15분
43-1
배포 및 구현 마일스톤 점검
5분
43-2
관리자 페이지 프로젝트 클로닝 1
10분
43-3
관리자 페이지 프로젝트 클로닝 2
10분
43-4
Show your hidden vibe
10분
44-1
관리자 기능 구현하기
5분
44-2
사용량 조회 페이지 구현하기
10분
44-3
API 사용량 시각화하기
10분
44-4
서비스 보안 검증하기
10분
45-1
전체 아키텍쳐 리뷰
10분
45-2
서비스 고도화 가이드
5분
45-3
바이브 코딩의 의미
10분
46-1
최종 프로젝트 제출
1시간

지금 20% 할인가에 시작하세요.