00:00영상을 재생할 수 있는 페이지로 이동이 되게끔 구현을 했습니다라는 문구를 볼 수가 있고요

00:04여기서 이제 순간 신청을 한번 눌리면 예 보시는 것처럼 이러한 화면이 만들어지게 됩니다

00:12기가 막히게도 예 영상도 재생이 되고 있습니다

00:14그리고 나서요

00:16디플로이를 눌러 주게 되면 배포가 끝이 나게 됩니다

00:19네

00:20안녕하세요 여러분

00:20AI 알려준 남자 데부남입니다

00:22오늘은 저희가 바이브 코딩을 통해서 VOD 강의 사이트를 제작을 해 보도록 하겠습니다

00:28이제 AI에게 몸을 맡기고 코드를 작성을 하고 이러한 과정을 저희는 이제 바이브 코딩이라고 하는데 AI 툴들을 적극적으로 사용을 해서 저희가이 바이브 코딩을 같이 한번 하는 과정들을 전체적으로 이제 보여 드릴 거고요

00:41VOD 강의 사이트를 어떻게 만드는지 어 지켜보시게 될 거고요

00:46일단은 기획하는 거부터 시작을 할 겁니다

00:48기획하는 것도 저희가 GPT를 통해서 어 진행을 하게 될 거고요

00:51그다음에 웹으로 이제 러버블이라는 걸 사용을 해서 웹 형태로 저희가 이제 사이트를 만들게 될 텐데 어 그리고 나서는 이제 커서 AI를 사용을 해서 서버를 구축을 한 다음에 마지막으로 이제 버셀을 사용을 해서 배포까지 하는 과정들을 진행을 해 보도록 하겠습니다

01:06자 우선은 기획을 먼저 해 볼게요

01:08자 채 G 집 GPT로 왔습니다

01:10VOD 강의 사이트 제작이 저희의 목표였죠

01:14VOD 강의 사이트를 제작하고자 하는데 어 이제 프롬프트를 고민을 해야 되잖아요

01:20근데 사실은 프롬프트도 이제 고민하지 않고 GPTS로 가도록 하겠습니다

01:24예

01:26그리고 나서 여기에다가 프롬프트라고 한번 적어 보도록 하겠습니다

01:29그러면 여기에 이제 프롬프트 엔지니어라는 레 뭐 이게 뜨고 뭐 두 번째 거도 뜨는데 맨날 첫 번째 거만 하면 좀 식상하니까 두 번째 걸로 한번 해 보겠습니다

01:40프롬프트 메이커라는 걸 사용을 해서 저희가 이제 프롬프트를 먼저 업데이트를 시켜 볼게요

01:45어 홈페이지 제작을 위한 프롬프트를 작성해 줘라고 하겠습니다

01:50그래서 VOD 강의 사이트를 제작하려고 하는데 홈페이지 제작을 위한 프롬프트 작성을 해 주세요.라고 하는 거죠

02:00그러면 이제 뭐 여기에 이제 액트라이커 시니어 first 웹로퍼처럼 이제 액션을 하고 아래의 어떤 과정들을 거쳐라라고 되어 있습니다

02:09그래서 이거를 복사를 한 다음에음 대구남의 BOD 강의 사이트을 기획을 해 주세요라고 우선은 요청을 하도록 하겠습니다

02:21백심 기능을 정의를 하고 스트리밍 기능까지 되어 있다

02:27예, 예, 복사를 하고이 러버블에다가 아, 이렇게 해 주도록 하겠습니다

02:33저희가 이제 GPT랑 기획을 했는데 기획은 좀 넓게 했습니다

02:38그래서 기획을 진행을 했고 그다음에는 이제 러버블이라는 사이트로 가서 UI를 만드시는 거예요

02:44그래서 이러한 페이지들이 있는데 이러한 UI들을 만들어 주세요라고 요청을 한 거죠

02:51그러면 일단은 여기까지 해서 저희가 잠깐 기다리면 이제 프론트 엔드 그러니까 이제 화면단이 구성이 되게 될 겁니다

02:58예

02:58그러면서 여기 슈퍼베이스라는 DB에 대한 내용들도 이렇게 담아 주고 있고요

03:02그래서 이제 DB까지 활용을 하고 싶으신 분들은 여기서이 수파베이스 연결을 진행을 하시면 온라인 기반의 데이터베이스고요

03:11거기에다가 이제 어 데이터를 저장을 해 주게 됩니다

03:16일단은 저는 지금은 어이 러버블에서는 화면을 구성을 할 거고 그다음에 나중에 저희가 이제 커서 AI로 가서 따로 이제 또 백엔드를 구축을 해 줄 겁니다

03:26그래서 일단은 이제 러버업을 사용을 해서 저희가 이제 기본적인 홈페이지의 와꾸를 잡아 보도록 하겠습니다

03:32여기를 이제 클릭을 해 보시면요

03:36열심히 이제 저희를 대신해서 코딩을 해 주고 있습니다

03:38바이브 코딩에 대해서 말이 많아요

03:40그래서 이걸로 실무에 쓸 수 있다, 쓸 수 없다

03:44이런 것들이 많은데 어 저는 뭐 전략에 따라 다르다고 생각하는데 실제로 쿠팡이나 뭐 페이스북 같이 뭔가 고도화된 시스템에서는 AI를 부분적으로 활용을 할 수 있겠지만 이렇게 뭔가 찍어내기 식으로 사용하기는 쉽진 않겠죠

03:57근데 초기 단계 있는 스타트업들은 이런 것들을 사용을 해서 일단 제품을 빠르게 테스트하는게 중요하지 않나라고 생각을 합니다

04:06그래서 뭐 맞냐 틀리냐보다는 상황에 따라서 다르게 적용을 하는게 필요하다

04:11이게 좀 말씀을 드리고 싶고요

04:13예

04:13제가 이제 강의를 만들어 달라고 했을 때 이런 식으로 사이트들을 만들어 줬습니다

04:17음

04:19여기서 만약에 여러분들이 더 추가하고 싶잖아요

04:21그러면 수강 신청을 눌렸을 때 영상을 재생하는 페이지도 추가해 주세요

04:28지금은 그냥 딱 껍데기만 만들어 준 거예요

04:32그래서 껍데기 여기 클릭을 해 봐도 아무런 반응이 없죠

04:34그래서 지금은 껍데기만 만들어 준 건데 우선 그다음에는 수강 시청을 눌렸을 때 영상을 재생하는 페이지도 추가해 주세요라고 요청을 해 보도록 하겠습니다

04:46그러면이 껍데기 안에서 이거를 클릭을 했을 때 기능을 추가를 하는 거죠

04:50이런게 이제 바이브 코딩이에 그래서 그냥 노래 들으면서 뭐 저 같은 경우에는이 이렇게 이제 질문을 하고 나서 뭐 유튜브를 볼 때도 있고요

04:58뭐 다른 강의들을 때도 있고 그냥 이제 화면 하나를 그냥 띄워 놓고 예 뭐 딴짓 하는 거죠

05:03예

05:03AI가 이제 열심히 해 주니까

05:07예

05:07그러면 이제 어 그 하나의 상세 페이지 그죠? 콜스 디테일이라고 만들었고 여기까지 하면 이제 화면이 완성이 되는데 여기에서 저희가 필요로 하는게 어 이런 어떤 강의에 대한 부 내용들을 저희가 데이터베이스에서 불러오고 그러한 과정들이 필요하겠죠

05:23그래서 뭐 여기서 수파베이스로 바로 해도 되는데 그다음 과정은 저는 이제 커스 AI라는 걸 통해서 진행을 할 거다

05:32그럼 이제 수강 신청 버튼을 눌리면 예 영상을 재생할 수 있는 페이지로 이동이 되게끔 구현을 했습니다라는 문구를 볼 수가 있고요

05:41여기서 이제 수강 신청을 한번 눌리면 예 보시는 것처럼 이러한 화면이 만들어지게 됩니다

05:46기가 막히게도 예 영상도 재생이 되고 있습니다

05:49그래서 뭐요 정도 UI면 어 괜찮은 거 같아요

05:53그래서이 정도 UI로 그냥 바로 뭔가 이제 DB만 붙이고 백엔드만 구축을 하면 실제로 이제 활용할 수 있을 만한 정도의 사이트가 만들어진 거 같습니다

06:03자 그러면 그다음에 어떻게 하느냐? 그다음에는 자 오른쪽 위쪽을 보시면 고양이 모양이 있습니다.이 기터브라는 사이트는 코드를 저장해 주는 코드 저장소인데요

06:13저희가 지금 이제이 러버브를 통해서 화면을 구현을 했는데 그죠? 화면이 구현이 됐는데 이거를 이제 코드로 가져와서 저희가 좀 더 이제 디벨롭을 시켜 줄 겁니다

06:25그래서 여기 이제 기터브 링크를 눌리면 처음에는 이렇게 이제 커넥트 깃업이라고 해서 깃업 계정과 연동을 시키도록 되어 있습니다

06:32저는요 커넥트를 늘리고 예 이거를 이제 프로젝트를 커넥팅을 해 주도록 하겠습니다

06:38그럼 일단은이 계정에 대한 연동이 필요하시고요

06:41그다음에는 이제 프로젝트 연동이 필요합니다

06:45그래서이 두 개 계정에 대한 연동과 프로젝트에 대한 연동이 두 개다가 필요하다

06:49그러면 이제 프로젝트 연동이 끝났죠

06:51그럼 어떤게 되냐면 여기 보시면 이제 링크가 만들어집니다

06:55그래서이 링크를 저희가 타고 이제 들어가 보면 예브 에듀허브라고 되어 있고 러버블에서 만들어진 사이트에 대한이 코드들이 전부 다 이렇게 포함이 되어 있는 거를 확인해 보실 수가 있습니다

07:08그러면 이거를 저희가 이제 불러와야겠죠

07:10어, 이거를 다운을 받아서 로컬에서 이제 커서 AI로 돌리는게 목표입니다

07:15자, 여기서요

07:17어,이 코드를 눌리고 여기에 이제 다운로드 집이라고 되어 있습니다.이 버튼을 클릭을 해서 저희가 다운을 받아 주도록 하겠습니다

07:24이렇게 다운이 되게 되었고요

07:25이거를 저희가 바탕 화면에 저장을 해 준 다음에 커서 AI를 프로그램으로 열어 보도록 하겠습니다.이 커서 AI를 검색을 해서 들어가 보시면 AI랑 같이 코딩을 할 수 있는 이러한 프로그램이 어, 뜨게 됩니다

07:39이거를 이제 쓰셔야 하는 이유는 만약에 여러분들이 어떤 코딩을 하다가 오류가 발생을 하거나 아니면 어떤 코드를 업데이트를 하고 싶을 때 보통은 어 코드를 복사해서 GPT에 붙여 놓고 해결을 해 주고 다시 붙여 놓고 그런 경우들이 많은데이 커서 AI 같은 경우에는 저희가 작성하고 있는 코드를 직접 볼 수가 있어요

08:00그리고 오류가 났을 경우에는 그 오류 문구도이 커서 AI에서 직접 볼 수가 있기 때문에이 커서 AI를 사용을 하시면 AI가 에디트에 붙어 있다

08:09그래서 그냥 가외 선생님 같은 거죠

08:11그러면서 붙어 가지고 오류나면 바로 잡아주고 이런 것들이 가능하다

08:15그래서이 다운로드 저는 이제 맥이와서 맥이라고 뜨는데 뭐 윈도우나 이런 것들을 이제 받으셔 가지고 프로그램을 열어 주시면 자 이러한 화면이 이제 뜨시게 됩니다

08:26예 커설 AI라고 되어 있고요

08:28예 처음에 가입하시면 2주 동안은 무료로 사용하실 수 있는 플랜이 주어집니다

08:32거기서 이제 오픈 프로젝트를 눌려서 아까 제가 어 다운을 받았던이 폴더를 선택을 해서 이렇게 열어 주도록 하겠습니다

08:43자, 이렇게 열어 주게 되면요

08:43무슨 일이 벌어지냐? 여기가 아까 그 저희의 홈페이지를 만들어 준 그 코드입니다

08:50예

08:50자, 여기서 리듬이라고 되어 있는데 리듬을 들어오신 다음에요

08:55쭉 내려 보시면 이렇게 이제 뭐 인하고 서버를 실행해라라는 명령어가 있습니다

09:02그래서 이제 윈도우 사용자분들 같은 경우에는요.이 노드 JS라는 거를 다운을 받아 주셔야 됩니다

09:10노드 JS를 다운을 받으셔서 이번 기회에 어차피 MCP 쓰실 때도 노드 JS가 필요해요

09:15그래서로드 js를 받아 주시면 여기에 있는이 npm이라는이 명령을 저희가 이제 여기 터미널에서 사용을 할 수가 있게 됩니다

09:25그래서 여기서 이제 터미널 탭 컨트롤 J를 하면 터미널 탭이 열립니다

09:30그래서 이제 여기 현재 설치되어 있는 패키지들을 i가 이제 인스톨인데 줄여서 i 겁니다

09:35그래서 패키지들을 설치를 해 주세요

09:38그리고 나서이 코드를 저희가 런 실행을 하게 되면 아까 저희가 러버업블에서 봤던 그 홈페이지가 제 실제 컴퓨터에서 이제 돌아가게 되는 거를 확인해 보실 수가 있습니다

09:51자, 이렇게 하고 설치가 끝났죠? 설치가 끝나고 나서는 이건 이제 서버를 실행을 해 달라는 뜻입니다

09:57MPM런 DEV 서버를 실행을 하게 되면 들어가 보겠습니다

10:03네

10:03로컬러스트로 들어왔죠? 그러면 지금은 대부분 애주라고 되어 있는데 이게 별로 마음에 드지가 않아요

10:09그래서 제가 대부분 애듀를 검색을 한 다음에 예, 여기가 이제 대분합 매뉴라고 되어 있죠

10:16그러면 그냥 뭐 대부분함 뭐 이라고만 하겠습니다

10:19그리고 나서 이제 저장을 하게 되면 자동으로 얘가 이제 새로 굳침을 해 줍니다

10:24여기로 들어갔을 때 데브남이라고이 내용이 바뀐게 보일 수가 있죠

10:28자, 여기까지

10:30그럼 이제 저희가 어 실제로 러업을 해서 화면을 그렸고 그다음에 그린 화면을 다운을 받아 가지고 여기 커서 AI에다가 불러왔습니다

10:41그다음에 커서 창을 하나를 더 엽니다

10:43참고로 얘는 이제 컨트롤 시프트 N을 눌리면 이렇게 여러 개도 띄우실 수가 있어요

10:49그리고 나서 오픈 프로젝트를 하신 다음에 폴더를 하나 만들어서 백엔드를 만들어 주는 거예요

10:57그래서 패스트 API라고 폴더를 만들고 강의 사이트 제작에 필요한 백엔드 패스트 API 서버 구조를 세팅해 주세요.라고 이제 요청을 하게 되면 예 요청을 보고 지금이 친구가 이제 파일을 확인을 했죠

11:13파일로 확인을 하고 이제 백엔드에 필요한 시스템을 구축을 하게 됩니다.이 패스트 API라는 거는 이제 간단하게 서버를 만들 수 있는 백핸드 파이썬 프레임워크입니다

11:24그래서 이런 식으로 이제 우리가 요청을 했을 때이 친구가 코드를 보고 이렇게 저희 대신해서 예 코드 구조 구성들을 이렇게 해 주게 됩니다

11:35그러면 이제이 구조를 따라서 가셔도 되고 아예 만약에 뭐 내가 좋아하는 구조가 있다라고 하면 기터브에서 그거를 이제 어 다운을 받아서 그 구조를 하게끔 만드셔도 되는데요

11:46일단은 이렇게 지금 요청을 하면 어 백엔드를 만들어 준다

11:48그러면이 백엔드랑 저희가 아까 했던이 UI를 연동을 시켜서 어 서버도 구축을 할 수가 있겠죠

11:56근데 만약에 아 나는 좀 이런 뭐 어떤 이런 프레임워크까지 어려워라고 하시면 M8N이라 이런 것들을 사용을 해서 충분히 또 구현을 하실 수도 있습니다

12:05자 그리고 나면요

12:07자 여기까지 해서 저희가 이제 사이트에 대한 어떤 기본적인 구성이 완료가 되었는데 이거를 이제 배포까지도 저희가 한번 해 보겠습니다

12:16배포를 할 때는이 버셀이라는 걸 사용을 해서 여러분들이 무료로 배포를 하실 수가 있습니다

12:23그래서 버셀을 검색을 해 주시고요

12:26접속을 해 주도록 하겠습니다

12:28여러 가지 이제 메뉴들이 있는데요

12:30여기서 저희는 임포트 프로젝트를 통해서 에더레프 from your 프로이더깃에서 저희가이 데이터를 불러오도록 하겠습니다

12:38그래서 여기서 임포트 버튼을 눌리게 되면요

12:39여기 이제 제 기터브 레포지토리가 뜨게 됩니다

12:45여기 보시면 대부분 에듀허브라고 해서 방금 저희가 러버블에서 만든 그 사이트 기터브 레포지토리가 여기에 뜨게 됩니다

12:53이거를 저희가 이제 임포트를 눌려 가지고 여기에서 내가 이제 코드 불러오겠다라는 명령어들이 이렇게 쭉 있습니다

12:59그리고 나서요

12:59저희가 이제 디플로이를 눌러 주게 되면 배포가 끝이 나게 됩니다

13:04음

13:06현재는 이제 파일을 이제 예, 붙고 있고 그런 것들이 끝나면 실제로 사람들이 접속할 수 있는 사이트가 만들어지게 됩니다

13:13그다음에 저희가 남은 거는 뭐예요? 가비아에 가셔 가지고 어 GPT 마스터 클래스 뭐 이렇게 검색을 해 보면 도메인이 등록이 되는지 안 되는지 뭐 가격은 얼만지 이런 것들이 나와 있습니다

13:27그러면 뭐 이거 괜찮네요

13:27이거 이거 이제 구매를 하셔 가지고 버셀에다가 연동을 하면 예 접근이 가능하다

13:36그래서 이거를 저희가 이제 클릭을 뿅 해 보도록 하겠습니다

13:39여기에 이제 접근이 가능한 이제 주소가 뜨게 됩니다

13:43그래서이 아이콘 여기 도메인이라고 되어 있죠

13:45여기를 클릭을 하게 되면 어 대분함 에듀하고 이런 강의 사이트가 만들어지고 수관 시청에 들어가면 수강할 수 있는 페이지가 뜨게 됩니다

13:53그래서이 링크로 이제 여러분들도 접속하실 수가 있다

13:57근데 만약에 내가 이제 도메인을 바꾸고 싶다 그러면 가비아에서 이제 도메인 사셔 가지고 버셀해서 여기 이제 도메인에다가 저희가 이제 등록해 줄 수가 있습니다

14:06여기 보시면 이제 어사이닝 커스텀 도메인이라고 되어 있죠

14:10그래서 이제 여기 도메인즈라는 메뉴에 가시면이 애드 도메인 하셔 가지고 도메인을 이게 쉽게 추가를 하실 수가 있게 됩니다

14:19예

14:19요렇게 해서 저희가 이제 배포까지 끝내 봤어요

14:21그래서 이걸 이렇게 만들었을 때 물론 뭐 이게 뭐 어 허습하다 뭐 아니다 이런 의견들도 많으실 수가 있는데 이거를 좋은 샘플을 가져와서 그것과 뭐 비슷하게 만들어 달라거나 UI적으로는 이제 디벨롭을 좀 시키긴 해야겠죠

14:39해서 그런 것들 통해서 이러한 강의 사이트도 어 이렇게 뚝딱 만들 수가 있다

14:43네.요 얘기를 드리고 싶었습니다

14:45그래서 오늘 저희가 사용한이 GPT를 통해서 기획을 하고 러버뷰를 통해서 화면을 구현하시고 그다음에 커세 AI를 통해서 코드를 이제 디벨롭을 시키시는 겁니다

14:54예

14:57물론 이제 커사 AI에서 프런트 핸드도 같이 구현을 하셔도 돼요

15:00근데 어 제가 사용을 해 봤을 때는 러업을 해서 해주는 화면들이 저는 이제 되게 괜찮다고 생각을 해서 러버에서 화면을 먼저 구현을 하시고 그걸 커서 이어에서 불러와서 마무리 작업을 해 주시면 된다

15:12예

15:12그리고 나서는 버셀을 통해서 배포를 하면 예 끝이 나게 됩니다

15:16예

15:16이렇게 해가지고 여러분들도 직접 이제 뭐 어떤 서비스들 이런 것들도 꼭 만들어 보시고 백엔드가 좀 어려우시면 프론트는 구현을 해 놓고이 백엔드만 개발자한테 돈 주고 맡겨도 되겠죠

15:29그래서 그런 구조도 있으니까 여러분들이 만들고자 하는게 있으셨다면 이번에이 단계를 통해서 여러분들만의 웹사이트를 구현을 해 보시면 좋을 것 같습니다

15:38네

15:38이렇게 해서 오늘 영상을 마무리하도록 하겠습니다.