00:00여러분, 이제 진짜 코딩을 1도 모르는 사람도 말만으로 앱을 만들 수 있다는 거 알고 계셨나요? 오늘은 요즘 아주 트렌디하게 떠오르는이 바이브 코딩이란 거를 통해서 여러분 모두가 나만의 웹사이트, 나만의 서비스를 만드실 수 있도록 도와드릴 거예요
00:14제가 며칠 만에 지금 이렇게 보여 드리는 웹사이트를 한 열 개도 더 만들었거든요
00:18이제는 진짜 전문 지식 하나 없어도 이런 걸 만들 수가 있어요
00:22자, 그럼 바로 시작해 봅시다
00:24웹사이트를 이렇게 만들어 봤는데 딱 봐도 정말 정말 고급지고 화려하지 않나요? 이거 한번 보여 드리겠습니다
00:30이런 식으로 나와요
00:32이런 식으로 되게 깔끔하게 옛날에는이 정도 웹사이트 만들려면은 근데 이거를 그냥 프롬프트 한 줄로 딸깍하면 만들어진다는게 진짜 그게 놀라운 거 같습니다
00:41일단 먼저이 바이브 코딩이 뭔지 잠깐 설명드려보고 시작해 보도록 할게요
00:46사실이 바이브 코딩이라는 말은 유명한 인공지능 개발자이자 선두다 중 하나인 안드레이 카르파티의 트위터에서 시작된 건데 처음에는 좀 우스갯 소리로 나왔다가 이제는 진지한 트렌드가 돼 버렸어요
00:57쉽게 얘기하면은 이제 코딩은 개발자들이 전문적으로 하는게 아니라 대충 말만 해도 만들 수 있겠더라는 말이에요
01:05여러분들도 아시다시피 요즘 인공지능이 못 하는게 없잖아요
01:07코딩도 마찬가지입니다
01:09처음에는 사실 되게 어려운 작업이었는데 요즘에는 인공지능이 발달하면서이 코딩이라는 거를 너무 잘해 버려서 이제는 개발자가 필요 없어지는 거 아닌가라는 이야기도 나오고 있어요.이 바이브라는 거는 정말 그 느낌 있게 그냥 말만으로 느낌적으로 코딩한다 이런 거거든요
01:25정말 누구나 그냥 아이디어만 있으면 말로 표현을 해서이 서비스를 구현시키고 만들어 나간다라는 거죠
01:32오늘은이 바이브 코딩을 제가 직접 하는 걸 보여 드릴 건데 여러 가지 툴들 중에서 제가 생각하기에 가장 쓰기 쉽다고 생각되는이 레플리라는 서비스를 써서 앱을 만드는 모습을 보여 드릴 겁니다
01:42진짜 너무 쉬워서이 영상 끝나고 나서 바로 나만의 웹사이트 만드실 수 있을 거예요
01:48자, 그러면이 랩플릿이라는 서비스가 뭐고 왜 이게 쓸모 있는 건지 조금 알아보도록 하죠
01:52일단이 레플리 서비스의 웹사이트를 한번 들어가 봤는데요
01:56여러분의 아이디어를 앱으로 만들어 보세요라고 강력한 무궁금과가 나와 있죠
02:01비개발자들이 인공지등을 써서 개발자들처럼 쉽게 앱 제작을 웹사이트 제작을 만들도록 도와준다
02:07그리고 심지어 무료로 할 수 있거든요
02:09근데 일단 왜 제가이 레플릭 같은 서비스를 여러분들에게 추천드리냐면 아무리 바이브 코딩이라는 애가이 개발을 쉽게 만들었어도 사실 개발에는 두 가지의 가장 큰 진입 장벽이 있어요
02:21첫 번째가 바로 사용 환경입니다
02:22뭐 코딩을 인공지능이 도와준다고 하는데 사실 코딩을 시작하기 위한 셋업을 하는게 되게 어렵거든요
02:29뭐 예를 들어서 이런 것들을 설치를 해야 돼요
02:32근데 그 셋업 자체가 되게 어려워요
02:34근데이 레플릭 같은 서비스는 그냥 웹사이트에서처럼 되게 쉽게 코딩을 할 수 있게 만들어 줬거든요
02:39그래서 특별히 여러분들이 쓰실 수 있을 것 같아서 한번 가져왔습니다
02:43그냥 로그인하고 이런 이런 앱 만들어 줘 하면 끝이거든요
02:47그 데모를 직접 시원해 볼 거예요
02:49자, 그럼 바로이 레플리 서비스의 작동 환경을 한번 살펴보도록 하죠.이 이 오른쪽에 로그인하기를 눌러서 어 계정으로 로그인을 하면은이 저희가 되게 친숙한 이런 창이 나와요
02:59여기 보면은 하라고 나와 있는데 그냥 내가 만들고 싶은 앱을 이런 웹사이트를 만들고 싶어 이러 이렇게 만들어 줘라고만 하면 바로 앱을 제작해 주는 거예요
03:11그럼 거기서부터 계속해서이 인공지능이랑 대화를 하면서 앱을 만들어 나가는 거죠
03:15그럼 일단 바로 한번 해 볼까요? 나는 나를 잘 소개해 주는 나만의 웹사이트를 만들고 싶어
03:23멋진 디자인을 활용해서 나만의 웹사이트 만들어 줘라고 하고 엔터 쳐서 바로 만들어 보도록 하겠습니다
03:32사실 너무 심플하죠? 뭐 일단은 되게 심플한 프롬프트를 가지고 여러분들에게 보여 드리려고 가져왔는데 자 그러면 여기 이렇게 여러 가지가 나오는데 맨 처음에는 이렇게 팔로오업 question들을 해 줘요
03:42예를 들어서 어 네가 개인 웹사이트를 만들고 싶어 하는 거를 알겠는데 그러면은 자기 소개하는 섹션을 만들고 너의 스킬과 경험을 나타내는 그런 섹션도 만들고 그 외에 네가 추가적으로 넣고 싶은 기능이 이런 것들이 있을 것 같은데 어때? 일단은 저는이 다크 모드랑 라이트 모드 만드는 거 여러 가지 언어를 동시에 활용할 수 있는 기능을 넣어 달라고도 체크를 해 보고 시작해 보도록 하겠습니다
04:07만약에이 영어가 조금 어렵다면 요거 그대로 복사해서 넣어서 번역해 달라고 하면 될 거 같거든요
04:13아니면 여기 프롬프트에 모든 지스 사항을 한국어로 알려 줘라고 해도 한국어로 나올 것 같습니다
04:17일단은 눌러 보도록 할게요
04:19이렇게 버튼을 누르면은 그대로 실행이 되면서 오른쪽에이 프리뷰라는 창이 하나 떠요.이 이 프리뷰라는 거는 뭐냐면 미리 보기라는 건데 어 계속해서이 코드가 어떤 식으로 인공지능이 입력을 넣고 있고 그 코드가 다 완성됐을 때 웹사이트가 실제로 어떻게 모여질지 미리 보여 주는 기능을 제공하거든요
04:40그래서 이렇게 실시간으로 웹사이트가 만들어지는 것을 볼 수가 있습니다
04:45일단 이렇게 헤더에 포트폴리오 뭐 홈 소개 기술 프로젝트 연락처 이렇게 나왔네요
04:50그리고 하나씩 바로 웹사이트가 만들어지는 것을 볼 수가 있습니다
04:54벌써부터 되게 예쁜 거 같은데
04:56안녕하세요
04:58저는 홍길동입니다
04:58뭐 창의적인 개발자로서 사용자 중심의 디자인과 효율적인 코드 작성의 열증을 가지고 있습니다
05:04그리고 막 이렇게 버튼 같은 건 또 추가를 했죠
05:05그리고 여기 사진 같은 것도 넣었고요
05:07이런 것도 하나씩 나중에 인공지능이랑 대화를 하면서 바꿔 나갈 수가 있거든요
05:12근데 기본적으로 이렇게 큰 웹사이트의 구조를 만든 것을 볼 수가 있습니다
05:18자, 여기서부터는 한 5분 정도가 걸릴 수도 있는데 저는 그러면은 잠깐 커피를 가지러 갔다 오도록 하겠습니다
05:24뭐 딱 돌아오니까 완성이 된 거 같은데 한번 볼까요? 자, 첫 번째 페이지가 이렇게 딱 됐고 내려가서 보니까 나에 대하여 저의 이야기, 저는 개발과 디자인을 조화를 추구하는 개발자로 프론트엔드와 백핸드 기술을 갖춘 풀스택 개발에 관심이 있습니다
05:39뭐 이런 식으로 나왔고 개인 정보가 나왔고 관심 분위가 나왔고 뭐 이력서 다운로드 하는 것도 나왔네요
05:45뭐 아직은 된 거는 아니지만 그리고 요렇게 기술 및 전문성도 예쁘게 한 눈으로 볼 수 있게 나타내 준 것을 볼 수가 있었습니다
05:53어 되게 깔끔한데요
05:55뭐이 정도면은 뭐 참이이 심플한 두 줄짜리 프롬프트로요 정도 퀄리티의 웹사이트가 나왔다는게 상당히 놀랍네요
06:03어 일단 기본적으로는 이렇게 작동한다는 것을 볼 수가 있어요
06:07왼쪽에는이 채비티처럼이 대화하는 창이 있고이 대화 한번 끝날 때마다 오른쪽에 그 대화 내용이 이렇게 눈으로 보여지게 되는 건데 여기서부터 하나씩 바꾸면 되는 거예요
06:18자 그러면은 저는 홍길동이 아니니까 요거를 바꿔 달라고 한번 해 보겠습니다
06:22내 이름은 알렉스라고 하고 나는 메타에 다니는 소프트웨어 엔지니어야
06:32어, 엔터해 보도록 하겠습니다
06:34그러니까 이게 이런 식으로 하면은 여기 오른쪽 웹사이트가이 채팅과이 프롬프트에 기반을 해서 업데이트가 된다는 거예요
06:42그거를 진짜 눈앞에서 바로바로 볼 수가 있거든요
06:46어, 방금 이름이 바뀌었죠? 저는 알렉스입니다라고 나왔고요
06:49또 어떤게 바뀌게 될까요? 오, 이렇게 저의 이야기가 조금 바뀌었네요
06:54저는 메타에서 근무하는 소프트 엔지니어로 인공지능에 깊은 관심을 가지고 있다
06:58그리고 커리에커 알렉스라는 유튜브 채널을 운영하면서 기술 지식을 공유하고 커뮤니티에 기여하고 있다
07:04이렇게 알렉스이 웹사이트 이메일 주소도 바뀌었고 메타에 다닌다고 나와 있고 이런 것들이 많이 나왔네요
07:11여기 보면은 뭐 이런 것들도 사실 하나씩하나씩 다 바꿀 수가 있거든요
07:15하나 더 보여 드리면은 일단이 사진이 제가 아니잖아요
07:19그거부터 조금 바꿔야 될 거 같거든요
07:21근데 이런 거는 사진을 업로드를 하면은 그 사진 또한 잘 바꿔 주거든요
07:26그래서 그걸 한번 보여 드릴게요
07:28제가 지금이 제 사진을 폴더에서 가져와서 이렇게 드래그 앤드롭을 해 볼 거예요
07:34그래서 여기 사진도 추가가 된다는 점 알려 드리고 싶고 그러면 문서 같은 것도 추가가 되겠죠? 자, 내 프로필 사진을 지금 업로드하고 있는 사진으로 바꿔줘라고 명령을 하면은이 프로필 사진도 잘 바뀌는 것을 볼 수가 있습니다
07:51한번 확인해 볼까요? 오, 업데이트가 이렇게 됐네요
07:53깔끔하게 제 사진으로 변경이 된 것도 볼 수가 있죠
07:57이런 식으로 하나씩 선택을 해 가지고 바꿀 수가 있어요
08:00그리고 요번에는 하나 더 보여 드릴 건데 이게 그냥 말로 하면은 사실 되게 어려울 수도 있거든요
08:05여기 왼쪽 밑에 보면은 파일 추가하는 버튼 옆에이 포인터 같은 버튼이 있는데 엘레멘트 솔렉터라는 건데 요걸 눌러서 내가 바꾸고 싶은 프로젝트 뭐 섹션 뭐 이런 것들을 누르면은 그거에 대한 변경을 되게 직접적으로 얘기를 할 수가 있는 거죠
08:22자, 그래서 이번에는요 프로젝트 박스를 눌러서 이렇게 얘기를 해 볼게요
08:25프로젝트 섹션을 내가 인스타그램 광고 팀에서 일하면서 할 만한 프로젝트들로 바꿔죠
08:34그러면은 얘가 어디를 바꿔야 되는지 조금 더 정확하게 아니까 이러한 업데이트들이 훨씬 더 깔끔하게 에러 없이 될 수가 있거든요
08:45엘레멘트 솔렉터를 활용하는 것도 되게 유용합니다
08:48오, 벌써 업데이트가 됐네요
08:50인스타그램 광고 효율 분석 대시보드 같은 거를 만들었다고 조금 더 관련성 있는 프로젝트를 들고 왔고 타겟 고객 AI 세그멘테이션 툴 뭐 크리에이터 협업 플랫폼 뭐 이런 것들을 만들었다 잘 반영이 된 것을 볼 수가 있었습니다
09:04자, 그러면은 하나 더 해 볼까요? 요게 이거 자체로도 너무 깔끔하고 예쁜데 조금 더 멋들어지게 바꾸기 위해서 저는요 홈 화면에 좀 더 화려한 애니메이션을 넣어 보고 싶어요
09:16뭐 예를 들면 3D 객체가 이렇게 백그라운드로 돌아다니는 모습
09:21그런 것들을 한번 설명해서 넣어 볼게요
09:22이제는 홈페이지가 조금 더 유니크하고 머던하게 보이기 위해서 3D 객체가 애니메이션으로 배경 화면에 보여지는 이펙트를 넣어 줘라고 해보도록 하겠습니다
09:36자, 그랬더니이 홈페이지에 3D 애니메이션 효과를 추가하기 위해서이 3.js 라이브러리라는 거를 사용하겠대요
09:43개발 프리목이거든요
09:43것들을 잘 찾아서 설치를 하고 필요한 곳에 알아서 잘 개발을 해서 넣는 모습을 보여주고 있습니다
09:50그래서 여기 보면은이 3D 객체들이 돌아다니는 것을 볼 수가 있어요
09:54처음에는 이런 모형이 컬러풀하게 나와서 그라디에이션으로 나오는 것을 볼 수가 있고 여기도 도넛이 하나 움직이고 있고 이런 식으로 되게 멋들어지게 구현이 되고 동작하는 것을 볼 수가 있죠
10:06아,이 정도면 솔직히 기가 막힌 거 같은데요? 그니까 옛날에는이 정도 웹사이트 만들려면은 정말 어지간한 노력과 어지간한 공부가 없었으면은 안 됐어요
10:15근데 이거를 그냥 프롬프트 한 줄로 딸깍하면 만들어진다는게 진짜 그게 놀라운 거 같습니다
10:21그게이 바이브 코딩의 핵심이고이 개발 시대의 혁명인 거죠
10:28아, 진짜 믿기지가 않는데요
10:28자, 근데 이게 실제로 뒷단에 어떤 식으로 동작하는지 한번 보여 드리면은 이런 막 코드 이런 거를 추가했다 막 이런 식으로 나오는데 실제로 코드가 어떻게 변경되었는지 볼 수가 있어요
10:38그걸 한번 까서 볼 건데
10:41자, 여기 보면은이 뭐 3D 배경 애니메이션을 추가하기 위해서 컴포넌트를 만들었다고 하는데 그 코드가 요거든요.이 버튼을 누르고이 드랍다운을 눌러서 어 코드를 열어 보면은 실제로 그 코드가 어떻게 구현됐는지도 볼 수가 있어요
10:54이런 것들을 인공지능이 알아서 적제 족소에 만들어서 변경을 했다는 거예요
11:00사실 요런 것들을 바꾸는게 코딩인 건데 그거를 개발자들이 할 필요가 없이이 인공지능이 다 해 준다는 거죠
11:07여기 다양한 3D 도형 생성을 했다고 하는데 옥타 히드런 지오메트리 이런 건데 이런 것들을 한번 바꿔 볼까요? 직접 바꿀 수도 있거든요
11:15이거 바꿀 때마다 얘네 오브젝트가 조금씩 바뀌는 거를 볼 수가 있어요
11:19그런 식으로 요렇게 요거는 크기가 완전히 바뀐게 보이죠? 원래는 이거를 한 땀 한 땀 바꾸는 건데 이제는 인공지능이 다 해 버린다는게 그게 진짜 대박인 거 같아요
11:30이렇게 했더니 갑자기 애들이 엄청 커졌네요
11:32뭐 크게 하니까 또 멋있는 거 같은데 한번 다 키워 가지고 내놔 내둬 보도록 할게요
11:36그 조금 더 나아가면은 이거는 개발자들이 쓸 수 있는 건데이 왼쪽 위에 상단에 파일 폴더를 누르면은이 웹사이트를 만들기 위해서 사용된 그리고 쓰여진이 모든 컴포넌트들이 다이 왼쪽 파일 리포지토리에 나와 있습니다
11:55그래 가지고 만약에 내가 개발자여서 여기서 조금 추가적으로 내가 가져가서 코딩을 하고 싶다
12:01나는 직접 손으로 바꾸고 싶다 하면은 얘네를 하나씩까 가지고 바꿀 수가 있는 거죠
12:04근데 사실 뭐 그럴 필요는 없겠죠
12:06어, 어차피이 에이전트가 다 해 줄테니까이 에이전트가 생각보다 되게 잘 디텍트하고 원하는 대로 잘 바꿔 주거든요
12:14뭐 하여튼 그런 식으로 사람과의 상호 작용 또한 가능하게 해 놨다라고 알려 드리고 싶습니다
12:19자, 그래서 웹사이트는요 정도로 만들 수 있는 거를 보여 드렸는데 사실 요것만 가져서는 그렇게 큰 도움이 되지 않잖아요
12:28자, 그럼 이거를 어떻게 하면은 내가 직접이 웹사이트로 만들어서 배포를 할 수 있는지까지 보여 드릴게요
12:35자,이 웹사이트 배포라는 거는 이거는 내가 그냥 지금 가지고 놀고 사용하기 위해서 이렇게 미리 보기로 보여 주는 건데 이거를 다른 사람들도 쓸 수 있게 만들어야 되는 거잖아요
12:47그러려면 링크가 필요한 건데 그 링크를 만드는 작업을 배포라고 합니다
12:51그 배포 과정을 하기 위해서는이 왼쪽에이 초록색 디플로이먼트라는 아이콘이 있는데 얘를 눌러서 하는 거예요
12:58그리고 여기 보면은 뭐 여러 가지 옵션이 있고 어떤 앱이냐에 따라서 배포 환경이 조금씩 다른 건데 웹사이트가 얼만큼 유동적으로 잘 작동하는지 그런 것들을 설정해 주는 건데 일단 기초적인 거를 시작해 볼테니까요 recomed어도 스케일이 이미 선택되어 있는 거를 가지고 셋업 디플로먼트를 누르면은 뭐 요만큼 차지가 된다 이런 건데 그렇게 큰 돈이 드는 거는 아니니까 한번 시험서 한번 해 보자면이 버튼 그냥 누르면 끝이거든요
13:23그냥 세 번만 누르면은 바로 웹사이트 링크가 생성이 되는 거거든요
13:28그렇게 되면 내가 여기서 그냥 미리 보기로 나만 가지고 노는게 아니라 여러분들도 엑세스를 할 수 있는 웹사이트가 완성이 되는 거예요.이이 작업이 사실 되게 어려운 거거든요
13:39이제 되게 개발자들도 사실 많이 안 해 본 그런 작업인데 이거를 정말 그냥 버튼 몇 개만 눌렀더니 웹사이트가 딸깍하고 나왔다는게 그게 조금 핵심인 거 같아요.이 이 래플릿 서비스를 소개시켜 드리는 이유도 이렇게 정말 개발 전문 지식 아니면 개발 환경에 대한 이해도 없이도 웹사이트를 제작하고 배포해서 당장 온을 쓸 수 있다는게 조금 핵심인 거 같아서 추천을 드리고 있습니다
14:00자, 그럼 이게 배포가 완성이 된 그러한 메시지인데요 웹사이트리트 링크 있잖아요
14:07이게 웹사이트 페이지가 되는 겁니다
14:10자, 그럼 저는요 링크를 가지고 여러분들에게 보내 드린다면은 여러분들도이 페이지를 보실 수가 있는 거예요.이 영상 하단에도이 링크를 달아볼테니까 한번 구경해 보시면 좋을 것 같아요
14:21그리고 여러분들도 만약에 여러분들이 제작한 그러한 웹사이트가 있다면은 저에게 꼭 보여 주시면은 제가 또 피대에 드릴 수도 있으니까 한번 시도해 보시는 거를 추천드리겠습니다
14:30너무 좋죠? 이제 너무 잘 되는 거고이 링크가 있으면은 모바일로도 어 볼 수가 있겠죠
14:38제가 방금 모바일로도 링크를 받아 가지고 실행을 해 봤는데 너무 잘 보여지거든요
14:43한번 보여 드리겠습니다
14:45이런 식으로 나와요
14:47이런 식으로 되게 깔끔하게 모바일 환경에서도 잘 어 렌더링이 되는 것을 볼 수가 있습니다
14:53이런 식으로 여러분들도 오늘 웹사이트를 만들어서 링크를 바로 친구들한테 공유를 할 수도 있고 뭐 사업에 쓰실 수도 있는 거예요
15:01진짜 너무 쉽고 너무 깔끔하지 않나요? 뭐 이렇게 되면은 솔직히 웹사이트 하나쯤은 가지고 있는게 너무 당연할 것 같아요
15:09인공지능이 이렇게나 쉽게 만들어 주니까요
15:11자, 그럼요 페이지로 들어와서 한 가지 기능만 더 보여 드릴게요
15:14바로이 버전 컨트롤이라는 건데 만약에 제가 막이 웹사이트를 만들다가 막 왔다 갔다 했다가 어 옛날의 버전이 조금 더 좋았던 거 같다
15:23예를 들어서요 3D 오브젝트가 없던 애를 돌아가고 싶으면은이 마지막에 저장했던이 체크포인트로 돌아갈 수가 있는데 세이브 기능이 자동적으로 되거든요
15:35그거를 체크포인트라고 하는 건데이 roll back to here이라는 거를 누르면은 그 버전으로 돌아갈 수가 있어요
15:42그런 식으로 하면은이 웹사이트가 그 버전으로 돌아가서 마지막에 사용했던 그 웹사이트로 돌아가서 보여진다라는 것을 말씀드리고 싶었어요
15:53이렇게 하면은 어 내가 막이 인공진을 가지고 막 엄청나게 많은 변화들을 했는데 어 해 보니까 별로네
15:59그러면은 예전 버전으로 돌아가자
16:01그럼 이렇게 실행 취소가 되는 거예요
16:03그러면은 아까 했던 그 3D 오브젝트가 다시 없어졌죠
16:05근데 이렇게 하면은 다시는 못 돌아가는 거 같아서 어, 요거는 주의하면서 사용해 보시면 좋을 것 같습니다
16:12뭐 그 외도 사실 여러 가지 기능이 있는데 뭐 데이터베이스 같은 거는 어떤 거냐면 내가 진짜 서비스를 만들고 싶어서이 웹사이트에 막 정보를 저장을 해야 된다
16:22그리고 사용자들을 위한 그런 서비스를 만들어야 된다 하면은 그런 데이터베이스까지 잘 싸업해 주는 그러한 것들도 있고이 콘솔이라는 거는 어 서버를 관리를 하는 건데요 웹사이트를 구현하기 위해서 그 명령어를 쉽게 관리할 수 있도록 만들어 준 콘솔 페이지예요
16:37뭐요거는 뭐 많이 쓰지는 않겠지만 나중에 어 조금 더 고도화된 어 그러한 웹사이트를 만드신다면은 한번 돌아가서 뭐 클라이언트 서버 관리는 어떻게 하고 뭐 백엔드 서버 관리는 어떻게 하는지 그런 것들도 한번 터치해 보면은 좋을 것 같습니다
16:53근데 일단은 여기서 마무리하면 좋을 것 같아요
16:59자, 이런 식으로 계속해서 웹사이트를 만들 수가 있는데 물론 이거는 되게 쉬운 방법이었고 만약에 내가 조금 더 내가 원하는 웹사이트를 전문적으로 바로 실행을 해 보고 싶다
17:11바로 만들어 보고 싶다 하면은 당연히 프롬프트를 만들 수가 있겠죠
17:16그러려면 최지T 웹사이트에 와서 저라면 이렇게 해 볼 거 같아요
17:19어 나는 어 래플릿이라는 서비스를 사용해서 오늘의 할 일을 관리해 주는 투 웹사이트를 만들고 싶어
17:30가장 모던하고 사용 친화적이고 어 유용하고 웹사이트를 만들기 위한 프롬프트 작성해 줘라고 하면은이 처음 프롬프트가 어떻게 해야 될지 모르는 분들을 위해서이 커리어에코 프롬프트 생성기를 가지고 프롬프트를 조금 더 고도화하면은 조금 더 멋들어진 웹사이트가 어 내가 생각했던 거보다 조금 더 잘 나올 수가 있겠죠
17:53그런 식으로 사용을 해도 되거든요
17:55그것도 한번 얘들을 보여 드리면서 어 마무리를 짓도록 하겠습니다
18:00그래서 요거를 복사를 해서 바로 붙여 넣기를 하면 되는 거예요
18:03그래가지고 이렇게 하면은 웹사이트가 나오고 거기서 이제 또 돌려 깎기를 하면 되겠죠
18:06요건 한번 로딩을 해 보고 다른 것들을 볼게요
18:11그니까 제가 지금까지는 웹사이트를 만드는 기능을 보여 드렸는데 사실 여기는 더 많은 기능들도 많아요
18:18모바일 앱도 당연히 만들고 싶잖아요.이 모바일 앱을 만드는 어 과정은 다음 영상에서 한번 다뤄보도록 하겠습니다
18:24어이 투드리스트 벌써 잘 나오고 있네요
18:26그럼 이번에는 제가이 플리시라는 서비스를 통해서 만든 웹사이트 몇 개 데모를 보여 드릴게요
18:32일단은 어 요거 제 웹사이트 저번의 웹사이트를 이렇게 만들어 봤는데 딱 봐도 정말 정말 고급지고 화려하지 않나요? 그러니까 옛날에는 제가 이런 거를 코딩해서 만들려면 만들 수는 있었겠지만 뭐 적어도 한 선호 시간에서 10시간까지는 걸릴 수 있었을 거예요.이 애니메이션부터가 되게 어 디자인 세비하다고 해야 되나? 이러한 디테일들을 만드는게 사실 되게 어렵거든요
18:57심지어이 다크 모드 라이트 모드도 있어요
18:59정말 화려한 웹사이트를 잘 이렇게 만들 수 있다는 거
19:03제 강의를 소개하는 그런 것도 넣었고 트레즈 어카운트를 어 팔로우하기 위한 그런 버튼도 넣고 제 소개를 집어넣어서 실제로 이거는 배포를 해서 활용을 할 생각이고요
19:15조금 더 다른 느낌의 어 개인 웹사이트를 만들어 보는 것도 한번 시도를 해 봤고 그리고 요거는 조금 서비스 같은 거를 만든 건데 이렇게 로그인 기능까지 넣어서 내 목표를 넣고 내 목표에 관한 데일리 테스크 매니지먼트를 할 수 있는 뭐 그런 것도 해 봤어요
19:29예를 들어서 매일 독서를 하고 싶다
19:31그런 것들을 관리하는 그런 웹사이트도 만들 수가 있었고요
19:34요거는 어 조금 디지털 펫 같은 거라고 해야 되나? 뭐 먹이를 주면서 그렇게 놀 수 있는 이런 게임 같은 그러한 웹사이트들도 만들어 보는 시도를 했었고 뭐 오늘 뭐 먹지 같은 웹사이트도 만들 수 있고 룰렛을 돌려서 오늘 뭐 먹을지 이렇게 정해 주는 그러한 프로토타입도 만들 수가 있었고요
19:55뭐 아니면은 성격 테스트도 만들 수 있었거든요
19:57그래서 뭐 테스트를 시작해서 여러 가지를 설정을 해 주면은 어 디자인도 되게 깔끔하게 잘 나왔죠
20:03이런 식으로 내가 원하는 내가 옛날부터 만들어 보고 싶었던 그러한 웹사이트 서비스를 제작해 보는 것도 되게 도움이 될 거 같아요
20:12저의 성격은 뭐 INFP라고 나오네요
20:13뭐 일단 엄청 막 그냥 때려던 건데 뭐이 정도면은 지금 당장 배포해도 될 것 같은 정도의 퀄리티의 서비스가 나왔다고 볼 수 있겠죠
20:22카카오톡, 페이스북 이런 어 쉐어 기능도 잘 넣어 줬네요.이 정도면 진짜 잘 나온 거 같고
20:26뭐 하여튼 이런 식으로 여러 가지의 웹사이트를 서비스까지도 만들 수 있다라는 걸 보여 드리고 싶었습니다
20:32자, 그럼 마지막으로이 서비스 가격을 한번 보고 갈게요
20:36일단은 공짜로 사용을 하실 수 있고 어,이 공짜 티어로는 세 개의 앱을 만들 수 있도록 도와주고 있습니다
20:43근데 단점은 모두에게 공개가 되는 그러 단점이 있고 그리고 사람들이 가장 많이 쓰는이 레플릭 코어가 어 20불 하나로는 한 27,000원에서 3만 원까지 되는 건데 저희가 채비 쓰는 것처럼 어 웬만한 경우의 앱은 다 만들 수가 있고 적어도 프로토타입은 어 어느 정도 완성해 나갈 수 있지 않을까라고 생각을 합니다
21:02내가 진짜 찐으로 앱 하나 만들어 보고 싶다
21:04그게 뭐 웹사이트 앱이든 모바일 앱이든 일단 무료로 시작을 해 봐 가지고 아 요런 느낌으로 하는 거구나 하고 그걸로 안 됐을 때 막혔을 때 한번 결제를 해 보는 것도 어 도움이 될 거 같아요
21:16일단은 무료로 사용해 보시는 거를 추천드리고요
21:18그리고 제가 또 감사하게도 레플릿에서 엠버서드로 선정이 돼서 할인 코드를 하나 가져왔습니다
21:24그래서 어 제 레퍼럴 코드를 하나 넣을 건데이 링크를 타고 들어가셔서 회원 과십을 하시면은 어 일단 10불이 충전이 돼서 한 13,000원 가량의 크레딧을 사용하실 수가 있고요
21:34그리고 만약에 나는 무료로는 성에 안 찬다
21:37유료로 정말 진으로 앱을 만들어 보고 싶다 하시는 분들은이 플릿 코어를 조인하실 때이 프로모 코드를 넣는 섹션이 있거든요
21:47여기에 이제이 알렉스 KR이라는 프로모 코드를 사용하시면은 15% 한의를 해 준다고 하니까 어 여러분들이 원하시는만큼 사용을 하시면 될 거 같습니다
21:55일단은 무료로 한번 써 보세요.네 여러분 오늘 드디어이 랩플리라는 서비스를 통해서 우리가 모두 바이브 코딩이 어떤 건지 어떻게 하는 건지 알아보는 시간을 가졌는데요
22:09여러분들이 보시기에는 어땠나요? 어은 드디어 드디어이 비개발자들도 앱을 만들 수 있는 시대가 왔구나라고 생각이 들었어요
22:18정말 제가 생각했던 거보다 퀄리티가 훨씬 더 높고 아 심지어는 이런 생각도 들었어요
22:24웬만한 실리콘밸리 엔지니어보다 잘하는 거 같은데 어 여러분들이 진짜 유용하실 거라고 느낄 거 같고 정말 원하시던 꿈에 그리시던 나만의 웹사이트 아니면 앱을 만드실 수 있지 않을까 생각이 듭니다
22:34사실 저는 예전부터이 비발자들을 위한 비전공자들을 위한 코딩하는 방법을 가르쳐 드리고 싶었는데 오늘은 웹사이트를 만드는 거를 했지만 어 만약에 반응이 좋으면 다음번에는 모바일 앱은 어떻게 만드는 건지 모바일 앱을 한번 출시하는 것까지 다뤄보면 좋을 것 같습니다
22:51계속해서 몇 개를 조금 더 시리즈로 만들어 볼 것 같아요
22:54저는이 바이브 코딩이라는 툴이 정말 모두에게 엄청난 기회를 제공할 수 있다고 생각하거든요
22:59꼭 한번 도전해 보시고 멋진 프로덕트를 만들어 보셨으면 좋겠어요
23:03질문이 있으시다면 언제든지 댓글에 남겨 주시고요
23:07그럼 저는 다음에 더 좋은 서비스들과 기능들을 소개드리는 영상으로 찾아뵙도록 하겠습니다
23:12그럼 오늘도 시청해 주셔서 감사드리고요
23:16구독과 좋아요는 언제나 사랑입니다
23:19그럼 저는 다음 영상에서 뵐게요
23:21오늘도 이번 주도 커리어 해킹하세요
23:24안녕
23:26[음악] 고
코딩 지식이 없어도 말로만으로 앱을 만들 수 있는 '바이브 코딩'의 혁신적인 방법을 소개한다. 