바이브코딩으로 만드는 진짜 웹서비스 - 여행 MBTI 웹서비스 완성하기 1편

0:00여러분 안녕하세요. 보아스입니다. 바이브 코딩으로 만드는 진짜 웹서비스 여행 MBTI 웹사이트 완성하기 강의에 오신 여러분 진심으로 환영합니다. 저는 강사 보아스라고 합니다. 이 강의 다 듣고 나시면요.

0:15오른쪽에 보이시는 나의 여행 성향 진단 MBTI라는 웹사이트를 완성하실 수 있을 거예요. 제가 간단하게 보여드릴게요. 탑승 시작 버튼 누르게 되면요. 질문이 총 16가지 정도 나옵니다.

0:29테스트로니까 제가 답변 빠르게 해서 결과지 좀 보여드릴게요. 이렇게 답변이 딱 끝나고 나는 순간 나의 여행 성향을 분석한 후 결과지를 보여드리게 됩니다. 가성비 도시 탐험가가 나왔습니다. 그리고 아래 내려가시면 이미지 저장 공유 버튼도 있습니다.

0:47이런 식으로 간단하게 웹앱을 완성할 수가 있는데요. 이때 중요한 포인트는요. 아래 보시면 실제 데이터 즉 한국관광공사의 오픈 API를 활용해서 연결해서 실제 데이터를 보여주는 것까지를 저와 함께 해볼 겁니다.

1:06이것으로 조금 더 API를 활용해서 실제 서비스를 만드는데 가까운 실습을 할 수 있을 겁니다. 결과물도 실제 웹 서비스에 가까운 결과물을 얻으실 수 있을 거예요. 그래서 단순히 바이브 코딩해서 결과물 만드시는 거는 아마 해보신 분들 꽤 계실 겁니다. 그런데 저와 함께는 API까지 연결해 보는 것이 차별점이라고 할 수 있겠습니다.

1:31그리고 이 강의에 또 하나의 핵심 차별점이 있습니다. 이 결과물을 만드는 것 자체는요. 조금만 노력해 보시면 금방 하실 수 있을 거예요. 그런데 이 강의에서는요.

1:42결과물 만드는 것 뿐만 아니라 마인드셋에 대한 이야기 그리고 바이브 코딩에 대한 기본 개념에 대한 이야기를 알기 쉽게 풀어드립니다. 이것만 가져가셔도요. 나중에 진짜 바이브 코딩을 본격적으로 하시게 될 때 큰 도움 받으실 수 있을 겁니다. 왜냐하면 성장 방향성을 잡아드리기 때문입니다.

2:03그래서 이 마인드셋 가지시고 그리고 바이브 코딩에 대한 기본 개념 가지시고 활활 날아서 더 높은 실력으로 성장하시기를 기원하겠습니다. 그러면 저와 함께 강의 시작하시고 완주하시는데 정말 얼마 안 걸립니다. 두 시간도 안 걸린 시간에 끝나는 거라서 끝까지 한번 쭉 쉬지 않고 달려보시는 걸 추천드리겠습니다. 그러면 완강 화이팅입니다.

2:26오늘은 여러분과 첫 번째 시간으로 진짜 바이브 코딩에 대해서 함께 배워보려고 합니다. 바이브 코딩 강의 많이 들어보셨을 수도 있고 이름은 한 번쯤 다들 들어보셨을 텐데 오늘 저와 함께 배울 바이브 코딩은 조금 다른 더 기초적인 부분부터 시작해서 실제로 개발자처럼 바이브 코딩을 하는 것까지 조금씩 한 걸음씩 나아가 보려고 합니다. 가장 먼저 오늘 제가 가르쳐드릴 바이브 코딩은 조금 다른 점이 있습니다.

2:58그것은 단순히 바이브 코딩을 하는 기술만 가르쳐드리는 것은 아닙니다. 물론 스킬셋 즉 기술에 대해서도 가르쳐드립니다. 그런데 사실은 바이브 코딩을 잘하기 위해서 더 중요한 건 스킬셋 기술보다는 마인드셋입니다. 그래서 어떤 마인드셋을 가지고 바이브 코딩을 하느냐에 따라서 결과물이 천차만별이 되기 때문에 제가 강조하는 것은 마인드셋입니다.

3:23물론 스킬셋도 가르쳐드립니다. 이 스킬셋과 마인드셋이 둘 다 갖춰져야 많이 AI 네이티브 빌더가 될 수 있다고 생각합니다. 그때야 비로소 진짜 바이브 코딩을 할 수 있는 것이죠. 그래서 오늘 저와 함께 스킬셋뿐만 아니라 마인드셋까지 같이 배워보는 시간 가지려고 하겠습니다.

3:44먼저 바이브 코딩이란 무엇인가에 대한 개념부터 좀 잡으려고 합니다. 바이브 코딩에서의 바이브라는 단어는 들어보신 분들은 이미 잘 아실 수 있겠지만 그렇습니다. 느낌이라는 한국말로 번역할 수 있습니다. 짬바라는 단어 들어보셨을 텐데 한 번쯤이요.

4:04짬에서 나오는 바이브 할 때 그 바이브가 바로 이 바이브 코딩과 같은 말입니다. 그래서 느낌인데요. 사실 이 바이브 코딩이라는 단어는 안드레이 카파시라는 사람이 가장 먼저 만들었습니다. 이 사람은 테슬라에서 자율주행을 총책임하면서 개발했던 사람이고 오픈 AI로 이직해서 챗GPT를 만드는데 기여했죠.

4:29이제는 Anthropic으로 이직했습니다. 그래서 클로드를 만들고 있습니다. 정말 유명한 사람인데 AI 씬에서는요. 그 사람이 가장 먼저 바이브 코딩이라는 단어를 만들었어요.

4:40트윗을 제가 캡처해 왔는데 이제는 X죠. 그래서 이 바이브 코딩을 처음 이름 붙인 안드레이 카파시라는 사람이 내린 정의는 느낌에 완전히 몸을 맡기고 코드가 존재한다는 사실조차 잊어버린 채 하는 코딩 아이러니하죠. 그런데 코딩이지만 코드 존재를 잃어버리는 거예요. 지금 제가 하는 건 뭐냐면 바이브 코딩 할 때 그냥 개념 없이 바로 바이브 코딩 결과물 내는 거 할 수 있어요.

5:09충분히 가능합니다. 그런데 그렇게 하면 어떤 마인드셋을 가지고 해야 하는지가 충분히 손에 잡힐 듯이 구체적이지가 않아서요. 먼저 개념부터 잡고 있는 중입니다. 그 중에서 첫 번째로 바이브 코딩이랑 무엇인가에 대한 개념을 잡았고요.

5:24그런데 조금씩 더 구체적으로 들어가 보겠습니다. 바이브 코딩이라는 건 앞서서 말씀드린 것처럼 포인트는요.

5:34코드를 직접 치지 않는 것에 있습니다. 바이브 코딩은요. 한 번 더 강조드립니다. 절대로 코드를 직접 치지 않는 것입니다.

5:47그러면 어떻게 코딩을 할 수 있을까? 말로 어떤 느낌을 표현하면 그 결과 코딩이 되는 것입니다. 제가 조금 유행이 지난 것 같은데 짤을 가져왔어요. 김동연 짤입니다.

6:01그래서 김동연 씨가 운동 많이 된다. 이런 말 많이 해서 사실은 중요한 포인트는 이 된다입니다. 그래서 제가 이 짤을 가져왔고 코딩 많이 된다라는 글을 덧붙였는데 이 된다는요. 수동이잖아요.

6:14수동태. 그래서 내가 직접 능동적으로 코딩을 하는 것이 아니라 코딩을 하는 것이 아니라 수동으로 코딩이 되어지는 것입니다. 어떻게 되어지냐면 내가 하는 일은 말로 그냥 느낌을 표현하기만 하는 것 뿐입니다. 그 결과 코딩이 되어지는 것입니다.

6:32제가 굉장히 강조하고 있는데 그 이유가 있겠죠. 그만큼 중요하니까죠. 왜냐하면 코딩이 된다라는 개념을 알아야 내가 말로 어떻게 표현하면 되겠다라는 것을 더 구체적으로 감을 잡을 수 있기 때문입니다.

6:43사실은 컴퓨터가 이해할 수 있는 글을 쓰는 일이 바로 코딩입니다. 왜냐하면 코딩이라는 것 자체가 코드라는 것 자체가 컴퓨터가 알아들을 수 있는 언어이기 때문입니다. 그래서 아래 이런 코딩, 언어 보셨을 거예요. 이 언어는 사실은 HTML이라고 합니다.

7:08HTML에 대해서는 다 아실 필요는 없는데요. 코딩의 한 종류입니다. 간략하게 이 약어를 설명드리면 Hypertext Markup Language라는 전체 풀 언어의 줄임말입니다. Hypertext Markup Language 근데 이제 이런 하나의 코딩 언어죠.

7:26이 코딩 언어는 원래는 컴퓨터가 이해하고 컴퓨터가 쓰는 언어입니다. 그렇기 때문에 사람이 컴퓨터가 이해할 수 있도록 이 HTML이라는 코딩 언어를 원래는 작성했었는데 그런데 이게 바로 코딩이었는데 하는 것까지가 코딩의 정의입니다. 제가 다시 한번 강조드리지만 코딩이라는 것은 원래 컴퓨터가 이해할 수 있는 글을 쓰는 일이었다라는 개념을 여러분 머릿속에 넣어두시면 그 뒤에 있는 이야기들을 이해하시는데 훨씬 도움이 되실 겁니다.

7:59이야기는 이어집니다.

8:03코딩은 컴퓨터가 이해하는 글을 쓰는 작업이었죠. 그렇기 때문에 언어의 종류도 글쓰기기 때문에 꽤나 다양합니다. 예를 들면 점점 더 기계가 이해하기 쉬운 언어부터 사람이 이해하기 쉬운 언어까지요. 그 중에서 어셈블리어 같은 게 있습니다.

8:25예를 들면 0, 1, 1, 0, 0, 1, 0 이런 언어도 코딩입니다. 코딩으로 직접 글을 쓰는 거죠. 이게 글입니다. 지금 우리가 봤을 때는 그냥 0과 1의 숫자에 불과하지만요.

8:38한번 좀 들어보셨을 겁니다. 이게 이제 기계, 여기서 기계라는 컴퓨터죠. 기계에 더 가까운 언어입니다. 그런데 조금씩 더 사람에 친숙한 언어로 진화했습니다.

8:52왜냐하면 결국 사람이 더 쉽게 작성하기 위해서겠죠. 더 많은 사람이요. 그래서 C 언어, 자바 언어 이런 것들이 전부 언어입니다. 코딩입니다.

9:03제가 바이브 코딩이라고 강의라고 설명드렸지만 꽤 개념을 초반에 좀 깊게 설명하는 이유가 있습니다. 두 가지입니다. 마인드셋과 스킬셋을 같이 가르쳐드리고 싶어서입니다. 이후에 바로 프롬프트를 입력하고 결과물이 나오는 등의 수수는 같이 이어서 겪겠지만 그 전에 개념을 정확히 잡고 가면 마인드셋과 스킬셋을 더 탄탄하게 갖출 수 있기 때문에 한 걸음씩 가고 있습니다.

9:33그래서 코딩은 컴퓨터에게 글 쓰는 건데 컴퓨터가 이해할 수 있는 글을 쓰는 건데 언어가 다양하다까지 왔습니다. 언어가 다양하다. 점점 더 기계가 이해하기 쉬운 기계 쪽에 가까운 컴퓨터 쪽에 가까운 언어는 어셈블리어 부터 시작해서 C 언어, 자바 언어 이런 게 다양하고 사람이 이해하기 쉬운 언어는 파이썬들이 있다. 라는 얘기입니다.

9:55그런데 이 파이썬조차 사실은 문법이 있습니다. 그래서 이 문법을 지켜서 써줘야 컴퓨터가 이해할 수 있습니다. 만약에 문법을 써주지 않으면 컴퓨터가 이해하기 어렵습니다. 그래서 원래대로라면 이런 어셈블리어, C 언어, 자바 언어, 파이썬 같은 언어들을 썼어야 하는데

10:16그런데 상황이 바뀌었습니다. AI가 등장하면서 더 이상 이런 컴퓨터가 알아들을 수 있는 프로그래밍 언어로 글을 쓸 필요가 없게 됐습니다. 이게 없어지고요. 필요 없어지고 이제는 영어라고 되어 있지만 어쨌든 말입니다. 쉽게 얘기하면 기계가 이해하기 쉬운 언어가 기계어라면 사람이 그냥 기계를 고려하지 않고 하는 말을 자연어라고 부릅니다.

10:46이 기계어와 대척점에 있는 단어겠죠. 자연어인데 그런 말을 하는 잉글리시 혹은 한글 이런 말로 코딩을 할 수 있는 시대가 온 것입니다. AI가 등장하면서 이제 코딩이 말하기가 된 것이죠. 더 이상 글쓰기가 아닙니다.

11:02그냥 더 정확히 말하면 기계어를 사용할 필요가 없습니다. 뭐 글쓰기나 말하기나 어차피 같은 얘기인데요. 중요한 건 기계어를 알 필요가 없다는 겁니다. 프로그래밍 언어도 알 필요가 없다는 겁니다.

11:16프로그래밍 언어도 필요가 없어졌죠. 이제는 그냥 자연어로 한글이든 영어든 그냥 사람이 이해하기 가장 쉬운 자연어로 말하면, 글 쓰면 그대로 코딩이 된다 까지 왔습니다. 이제 그런 시대가 된 것입니다.

11:35그러면 큰 틀에서 바이브 코딩 에 대한 개념 정리는 다 끝이 났는데요. 그러면 이제 진짜 실습을 시작하려고 하는데 그래서 어떻게 시작할까요? 가장 간단하게 제일 쉬운 바이브 코딩 방법은요. 인터넷상에서 바로 시작하시는 겁니다.

11:54인터넷상이라 함은 특정 브라우저 웹 서비스에 접속해서 바로 바이브 코딩을 시작할 수가 있습니다. 먼저 바이브 코딩 시작하기에 앞서서

12:05도구를 소개해 드리려고 합니다. 제가 아무래도 한국관광공사 즉 공기관에서 진행하는 공모전이다 보니 특정 도구를 사용을 권장하는 것은 전혀 없습니다. 그런 건 아니고요. 클로드도 가능하고 챗GPT도 가능하고 제미나이도 가능합니다.

12:26여러분들이 바이브 코딩을 해보셨다면 다들 한 번씩은 들어보셨을 서비스 이름들입니다. 클로드는 Anthropic이라는 회사에서 만들었고요. 챗GPT는 오픈 AI죠. 그리고 제미나이는 제일 유명한 구글에서 만들었습니다.

12:41그렇기 때문에 어떤 서비스를 사용하셔도 웹 서비스를 만드는 바이브 코딩에는 큰 무리가 없습니다. 다만 저는 클로드를 활용해서 만들어보려고 합니다. 첫 번째 실습이에요. 실습 1이죠.

12:57그래서 우리가 진행할 실습 내용은요.

13:00여행 MBTI 진단하는 간단한 웹앱을 만들어 볼 겁니다. 그래서 프롬프트 요청을 여행 MBTI 진단 웹앱을 만들어줘 사용자에게 몇 가지 질문을 하고 결과에 따라 여행 유형을 알려줘 모바일에서도 보기 좋게 만들어줘 라는 것까지 제가 그대로 각 사이트 방문해서 한 번 입력하는 실습 진행 과정 한 번 보여드리겠습니다. 특별히 어려운 건 아니기 때문에 만약에 내가 챗GPT에 대해서 제미나이 대해서 클라우드에서 다 아시는 분들은요.

13:35이걸 복습 차원에서 보시면 될 것 같습니다. 그런데 제가 알려드릴 팁이 몇 가지 있습니다. 첫 번째는 클로드로 진행해 보겠습니다. 클로드에서는 이 여행 MBTI 진단 웹앱을 만들어줘라는 프롬프트를 클로드라는 사이트에 접속하셔서요.

13:51클로드.ai 사이트입니다. 여기서 여셔서 여행 MBTI 진단 웹앱을 만들어줘 MBTI 진단 웹앱을 만들어줘 그리고 제가 프롬프트를 여러분들도 똑같이 쳐보시도록 제가 여러분들과 동일한 상황에서 진행하는 것입니다. 사용자에게 몇 가지 질문을 하고 결과에 따라 여행 유형을 알려줘 따라 여행 유형을 알려줘 그리고 모바일에서도 보기 좋게 만들어줘 하는 이 프롬프트를 입력해 보겠습니다. 클로드 웹사이트에 들어와서는 이렇게 바로 채팅에 로그인하신 후에 입력하시면 됩니다.

14:51특별히 유료 버전을 써야 되는 건 아니지만 유료 버전을 쓸 경우에는 조금 더 시간이 단축되거나 그런 부분은 있습니다. 골라서 하시면 됩니다.

15:02두 번째, 챗GPT랑 제미나이인데 챗GPT에도 동일하게 로그인을 한 후에 채팅 입력창에 가셔서 아까 입력하셨던 프롬프트를 그대로 입력할 건데요. 이번에는 차이점이 있습니다. HTML로 결과물을 완성해줘 라는 프롬프트를 덧붙이셔야 합니다. 왜냐하면 그냥 챗GPT에게 얘기했을 때는 위에 HTML로 결과물을 완성해줘'를 제외한 위에 프롬프트만 입력했을 때에는 결과물이 조금 다르게 나올 수 있기 때문에 한 번 더 명시적으로 HTML로 결과물을 완성해줘 라는 프롬프트를 덧붙여야 합니다.

15:39마찬가지입니다. 제가 한 번 진행시켜놓고 제미나이 가서도 동일합니다. 여기서도 챗GPT와 동일하게 HTML로 결과물을 완성해줘 까지 추가해야 하는데요. 이 HTML이라는 것은 제가 앞서서 한 번 설명드린 적이 있죠.

15:53앞서서 설명드린 내용처럼 여기에 챗GPT와 그리고 제미나이 이 둘은 HTML로 결과물을 완성해줘 라는 프롬프트를 덧붙였어요. 그 이유는 결과물의 형식이 다양할 수 있기 때문인데 그 중에서 HTML이라는 것은 앞서서 말씀드린 것처럼 Hypertext Markup Language 즉 웹 브라우저라는 프로그램 이런 크롬이라든지 뭐 혹은 다른 사파리라든지 이런 브라우저 프로그램이 이해할 수 있는 컴퓨터 프로그래밍 언어이기 때문에 그런 HTML로 결과물을 완성해줘 라는 결과물의 형식 그 타입을 지정해준 것입니다.

16:43결과물 형식을 지정해준 거예요. 그렇게 했을 때 HTML로 나오는 거고요. 이 HTML이 우리가 만들고자 하는 웹 사이트가 될 겁니다. 웹 사이트 웹앱이라고도 하죠.

16:54그래서 웹 서비스도 다 같은 얘기입니다. 지금 우리가 하고 있는 실습은 여행 MBTI를 진단하는 웹앱 웹 서비스 웹 사이트를 만드는 것이죠. 이 세 가지는 같은 언어라서 제가 한 번 더 말씀드렸습니다.

17:08도구는 세 가지입니다. 클로드도 좋고 챗GPT도 좋고 제미나이도 좋습니다. 혹은 이 외에 다른 서비스를 이용하셔도 좋습니다. 그록도 있고요.

17:17많이 있습니다. 여러 가지 서비스들 뭐 나눌 수도 있고 제가 다시 한 번 강조드리지만 지금 제가 진행하고 있는 이 바이브 코딩 강의는 한국관광공사에서 제공하고 있기 때문에 그 공모전에 사용될 강의이기 때문에 공모전 참가자분들이 이 강의 수강생이 이게 된다고 전해들었습니다. 그렇기 때문에 여러분들께서 특정 서비스에 종속돼서 반드시 그 서비스를 사용하실 필요는 전혀 없습니다. 골라서 아무거나 사용하시면 됩니다.

17:47그래서 이야기를 이어가겠습니다. 먼저 클로드로 저는 쭉 진행을 해보려고 하기 때문에 비교는 좀 하겠지만 가볍게 클로드로 시작하려고 합니다. 그래서 클로드에게 말을 했더니 실제로 구현을 만들고 있는 걸 확인하실 수 있습니다. 그리고요.

18:07나머지 챗GPT에서는 이미 동작이 나온 것을 보실 수 있습니다. 그리고 마찬가지로 제미나이에서도 동작이 진행되고 있습니다. 실제로 대화형 시각 요소를 생성하고 있다고 나오고 있습니다. 그리고 HTML 소스 코드가 나왔네요.

18:25소스 코드가 잘 나왔고 아직 클로드 코드에서만 조금 더 시간이 걸리는 중인 것 같습니다. 왜냐하면 실제로 완성했을 때 여기서 볼 수 있게 하기 위해서 클로드 코드는 조금 더 복잡한 앱을 만들고 있는 것 같아요. 실제 여러분들도 잠깐 여기서 강의를 멈추시고 여러분들 사이트에 접속하셔서 저와 동일하게 실습 1을 따라해보시길 바랍니다. 프롬프트 이렇게 입력하시고요.

18:51저는 계속해서 진행하면서 설명을 좀 이어가겠습니다. 이어서 설명드릴 내용은 이제 앞으로 클로드 코드 이 클로드 라는 웹 서비스를 통해서 개발한 내용을 그대로 가지고 이어서 설명을 좀 진행하려고 합니다. 클로드가 개발할 때는 시간이 비교적 오래 걸리는데요. 그만큼 기획부터 개발까지 차근차근 단계별로 진행하는 부분이 있어서 그런 것 같습니다.

19:17단계별로 진행하는 부분이 어떤 부분을 진행하고 있는지 살펴보려면 여기 있는 화살표를 눌러보면 어떤 코드를 짜고 있는지가 대략적으로 보입니다. 열심히 코드를 짜고 있죠. 이렇게 해서 이제 HTML 파일을 포함한 웹 앱을 만들고 있는 걸 볼 수 있습니다. 앞에서 간략하게 기획한 것도 볼 수 있습니다.

19:38실제로 이 클로드 코드로 클로드로 동일한 웹사이트를 만들었을 때 여러분들이 제가 자꾸 클로드 코드라고 말씀드리는데 그것은 이따가 넘어가서 바로 실습을 추가로 할 프로그램이기 때문입니다. 클로드로 여러분들이 동일한 프롬프트를 만들었을 때 여러분들께 설명드려야 할 중요한 포인트가 하나 있습니다. 그래서 만들어지는 동안에 기다리면서 그 포인트에 대해서 먼저 잠깐 짚고 넘어가겠습니다. 같은 프롬프트라도

20:09결과물이 다를 수 있다라는 점을 꼭 짚고 싶습니다. 왜냐하면 여러분들이 앞서서 우리가 만들고 있는 이 여행 MBTI 웹앱 은 완전히 동일한 그 같은 프롬프트를 넣었지만 결과물로 나오는 웹앱이 다 다를 수 있기 때문에 제가 그래서 여러분들이 어 강사님 따라서 똑같이 입력했는데요. 결과물이 다릅니다.

20:39라고 문의 주실 수 있기 때문에 제가 미리 말씀드리는 겁니다. 이유를 설명드리겠습니다. 우리가 바이브 코딩 에서 설명하고 있는 이 AI 라는 단어는 사실은 그 의미를 까보면 LLM 입니다. LLM 은 Large Language Model 입니다.

20:54즉 Language Model 어떤 단어를 연속해서 붙여서 생성해내는 그런 AI Model 이라고 볼 수 있습니다. 여기 있는 짤처럼 실제 동작 과정은 이렇습니다. 1, 2, 이렇게 는 39% ! 엔드 는 16% 2 는 7% 등으로 확률론적으로 다음 단어를 결정하게 됩니다.

21:24이것이 바로 LLM 즉 Large Language Model의 동작 원리입니다. 뒷단에서는 이런 동작 원리를 가지고 돌고 있다는 거죠. 그렇기 때문에 매번 같은 프롬프트로 요청을 하더라도 그 결과물 생성하는 문장이 다음 단어를 확률론적으로 결정하기 때문에 다를 수 있는 것입니다. 다시 한번 제가 강조해서 설명드립니다.

21:47여러분들이 저를 따라서 제가 앞서서 말씀드린 것처럼 여행 MBTI 웹앱을 만들 거야 몇 개 질문을 던지고 결과물을 받는 유형을 받는 그런 웹앱이야 모바일에서 보기 좋게 만들어줘 라는 완전한 동일한 같은 프롬프트로 요청을 했더라도 그 결과물로 만들어지는 웹앱이 모두 다를 수 있습니다. 그 다를 수 있는 이유 다른 이유는 우리가 바이브 코딩에 사용하는 AI 즉 LLM Large Language Model이 확률론적으로 동작하기 때문입니다.

22:15그렇기 때문에 매번 다른 단어들이 연결되어서 그 결과물이 전혀 다른 결과물이 나올 수도 있다 라는 점을 설명해 드립니다. 여기까지 오셨으면 이때쯤에 멈추셨다가 다시 진행해 보면 이제 어느 정도 웹앱이 등장했을 텐데요. 클로드 코드 클로드에서 나중에 제가 클로드 코드로 넘어가겠지만 지금은 웹사이트에서 제공하는 클로드에서는 보시는 것처럼 바로 완성된 결과물을 확인할 수 있습니다.

22:45챗GPT도 가능합니다. 재미난이도 가능합니다. 조금 다른 방법이지만요. HTML을 저장해서 봐야 하지만 챗GPT에서는 또 가능하고요.

22:53여기에서 보시는 것처럼 바로 보이시죠. 이렇게 실제로 돌려볼 수도 있습니다. 챗GPT도 이런 게 가능합니다. 클로드도 가능합니다.

23:01그래서 제가 어떤 도구든지 상관은 없다고 말씀드렸습니다. 그러나 저는 오늘은 클로드를 활용해서 진행해 볼 계획입니다. 클로드로 진행하고 있는 중입니다. 설명드립니다.

23:11그래서 나의 여행 유형 진단 이라고 되어 있죠. 나의 여행 유형 진단 이라고 되어 있고 탑승 시작 이라고 해서 마치 비행기표를 받아서 탑승하는 것처럼 공항에서 탑승하는 것처럼 게이트 1으로 들어가게 되어 있습니다. 제가 한번 진행해 보겠습니다. 뭐 이런 식의 질문이 있고 여행 한 달 전 나의 모습은 하면서 질문이 있습니다.

23:37질문이 있어서 질문을 한번 선택해 보겠습니다. 선택하면 이전 질문으로 돌아가는 버튼도 있고 돌아가보면 선택이 잘 되어 있는 걸 확인하실 수 있습니다. 처음으로 가보면 이렇게 되고요. 선택한 것들은 저장이 되어 있죠.

23:49그래서 선택을 하고 넘어가서 진행 상황을 위에처럼 공유를 해줍니다. 제가 지금은 동작하는 걸 보여드리기 위해서 질문을 일일이 읽지 않고 클릭 클릭해서 진행한 후 결과를 보여주는 곳으로 넘어가려고 합니다. 질문들이 꽤 자세하게 나와 있고 질문들에 대해서 하나씩 답변을 하게 되면 마지막 질문인 12번째 질문의 답변이 끝나면 이제 결과를 분석해서 알려줍니다. 그러면서 보딩 패스라고 해서 마치 티켓처럼 이렇게 나오게 되는데요.

24:24이 티켓이 나온 것이 내 여행 MBTI다 하면서 여유로운 호캉스 플래너다 하는 것을 보여주고 있네요. 꽤나 잘 만들어지긴 했는데 이 결과물 여러분들도 여러분만의 결과물이 있을 겁니다.

24:39그런데 저는 제 결과물에 대해서 리뷰를 한번 해보려고 합니다. 왜냐하면 이어서 진행할 내용이

24:481차로 만든 결과물을 함께 리뷰해 보는 것이기 때문입니다. 잘 만들 점이랑 아쉬운 점을 제가 미리 적어놨는데 이것은 이전에 만들었던 웹 이런 1차적인 결과물을 통해서 어느 정도 공통점이 나와 있기 때문에 제가 그 공통점을 뽑아서 설명드리는 건데요. 실제로 완성된 앱을 보고 몇 가지 장점과 단점을 구분해 보죠. 장점과 단점을 구분해 보면 사실 굉장히 비슷합니다.

25:11딱 봤을 때 어느 정도의 컨셉은 있습니다. 어느 정도의 컨셉은 있고 다만 이 컨셉이요. 보시는 것처럼 이 질문 안에서 구체적으로 이게 무엇인지에 대한 근거가 좀 부족합니다. 더 여행 끌리는 키워드는 해서 A를 선택했다 했을 때 이 A를 선택했을 때 내 여행 MBTI가 왜 그런 결과가 나왔는지를 최종 결과에서 근거를 가지고 설명해 주는 게 살짝 부족합니다.

25:39그런 부분들이 있습니다. 어느 정도 대략적인 성향은 알지만 근거가 부족하다 하는 아쉬운 점이 있는 거죠. 지금 제가 말씀드리는 거는 1차적으로 완성한 이 웹서비스에 대해서 아쉬운 점을 찾고 그리고 어떻게 그 아쉬운 점을 개선할지 에 대해서 바이브 코딩을 한 걸음 더 깊이 들어가서 심화 바이브 코딩으로 넘어가는 과정 중에 있습니다.

26:03그래서 제가 지금 말씀드리지만 앞에서 지금 보시는 것처럼 지금 완성된 건 굉장히 좀 잘 나온 것처럼 보이기도 하지만 이런 점이 아쉬운 거죠. 근거가 좀 부족하고 그 다음에 이렇게 나왔을 때 추천 여행지 베를린, 멜버른, 서울 힙한 골목으로 가라 로컬 탐방을 해라 알려주는데 조금 더 구체적인 데이터가 나왔으면 좋겠습니다. 이런 부분들이 좀 아쉽네요. 여러분들도 잠깐 여기서 강의를 멈추시고요.

26:31여러분들이 1차적으로 프롬프트로 완성한 그 웹서비스의 장점과 단점을 1차적으로 한번 리뷰해 보시는 걸 추천드려요. 왜냐하면 그래야지만이 그 다음에 저를 따라서 진행하실 때 여러분들만의 리뷰를 기반으로 프롬프트를 개선할 수 있기 때문입니다. 이제 진행을 이어서 해보겠습니다. 1차 결과물 당연히 마음에 안 드는 점이 있습니다.

26:58뭐 질문 내용의 근거가 부족하다 여기도 써있는데 기본적으로 저희가 앞서서 완성했던 결과물의 한계점입니다. 한계점이 당연히 있을 수밖에 없습니다. UI 완성도도 부족하고 결과에 대한 분석도 좀 부족하죠.

27:13이런 아쉬운 점이 있어요. 물론 잘된 점도 있어요. 질문 수가 12개로 충분하다. 앞에서도 또 12개였는데 몇 번 해보니까

27:1912개 정도 나오더라고요. 그래서 이제 공통점으로 뽑아낸 부분입니다. 이렇게 됐을 때

27:24잘 만드는 법 더 잘 만드는 법을 소개해드리려고 합니다. 사실은 이게 제일 중요한 마인드셋입니다. 제가 앞서서 바이브 코딩을 잘할 때 두 가지가 필요하다고 말씀드렸죠. 마인드셋과 스킬셋입니다.

27:40그런데 마인드셋 어떤 마인드셋이 중요할까 했을 때 이 마인드셋이 바로 더 잘 만드는 법과 연관된 마땅쪼입니다. 마땅쪼라는 것은 제가 이제 지어낸 말인데 결국엔 마인드셋입니다. 이제 정리하다 보니까

27:55요약이 돼서 정리가 된 단어인 거죠. 수많은 수강생들을 가르쳤을 때 공통점이 있습니다. AI를 무작정 두려워하거나 AI가 다 해줄 거라고 생각은 하지만 어떻게 맡겨야 될지 잘 모릅니다. 그럴 때 그 분들께 이 마인드셋을 소개해드리면 두 가지로 갈립니다.

28:14결과적으로 정말 끝까지 더 많이 사용해서 정말 잘 사용하는 잘 쓰는 사람이 되거나 AI 진짜 별거 없네 별거 없네 하고 실망하고 등 돌리는 사람 이 두 사람을 구분하는 근본적인 차이는 바로 마인드셋이었습니다. 마인드셋을 제가 정리해서 뽑아낸 키워드입니다.

28:35마땅쪼입니다.

28:35그래서 첫 번째 맛은 맡긴답니다. 프롬프트 한 줄로 웹서비스를 만들 수가 있네 너무 신기합니다. 그래서 가능하면 모든 일 맡길 수 있는 모든 일을 다

28:49AI에게 맡기는 것입니다. 이게 시작점입니다. 왜 이게 중요하냐면 AI한테 일단 맡겨봐야 AI가 어디까지 할 수 있는지를 파악할 수 있기 때문입니다. 처음에 만약에 맡기지 않는다면 어디까지 AI가 할 수 있는지 조차도 알 수가 없습니다.

29:08그래서 AI에게 전부 다 맡기는 것입니다. 이게 굉장히 중요합니다.

29:12그리고 나면 당 당연히 실패합니다. 왜 제가 이렇게 말씀드리냐면 처음부터 AI가 어디까지 할 수 있는지에 대한 감을 완벽히 잡고 시작하는 사람은 없기 때문입니다. 그래서 AI에게 무언가를 맡겨보면 그것이 실패하는 경험이 굉장히 중요합니다. 필요합니다.

29:32그러면 이제 깨닫게 됩니다. 아 충분하지 않네. 이런 게 이제 앞에서 저희가 살펴본 아쉬운 점들입니다. 분명히 웹서비스를 잘 만들었음에도 불구하고 질문의 내용의 근거가 부족하다던가 혹은 UI의 완성도가 조금 아쉽다거나 결과에 대한 분석이 없다거나 여기 지금 만들어진 것들에 대한 얘기입니다.

29:50이런 부분들이 아쉬운 점이 발견이 됩니다. 그런 것이 바로 제가 말씀드렸던 당 당연히 실패한다 라는 키워드입니다. 머릿속에 넣어두시면 너무 좋습니다.

30:03마땅쪼입니다. 맡긴다. 당연하다.

30:05그리고 마지막으로 쫍니다. 쪼갠답니다. 왜냐하면 왜 실패하냐면 쪼개서 시키지 않았기 때문입니다. 쪼갠다라는 거는 구체적이 된다는 거고요.

30:18구체적이 된다는 거는 디테일이 살아있다는 뜻입니다. 즉 프롬프트를 명령어를 입력할 때 이 명령어가 구체적이어야 하고 디테일이 살아있어야 합니다. 디테일해야 해요. 그래야지 우리가 원하는 결과물이 나옵니다.

30:35원하는 결과물이라는 말의 의미는 퀄리티가 그렇죠. 당연히 좋다라는 의미겠죠. 퀄리티가 좋은 결과물이 나온다는 의미입니다. 어떻게 그렇게 가능하냐면 쪼개서 명령할 때 즉 구체적으로 디테일하게 명령할 때 퀄리티가 좋은 결과물이 나올 수 있다

30:56라는 말씀을 드립니다. 그러면 여기까지 오셨으면 여러분들은 여러분들이 만든 서비스를 1차적으로 리뷰했을 때 저와는 다른 어떤 문제점 아쉬운 점이 발견되셨을 수 있습니다. 괜찮습니다. 제가 앞서서 말씀드린 것처럼 LLM이기 때문에 결과물이 항상 그렇죠

31:19다르다라고 말씀드렸죠. 다릅니다. 그래서 다를 수 있기 때문에 걱정하지 않으셔도 됩니다.

31:25다만 아쉬운 점은 반드시 있을 겁니다. 그 아쉬운 점을 찾으셨다면 이제는 단순히 예쁘게 만들어줘 라고 명령할 게 아니라 그게 아니라 무엇이 부족한지를 명확하게 정해야 됩니다. 즉 쪼개서 말을 해야 한다 라는 겁니다.

31:41첫 번째 우리가 1차적으로 맡겼습니다. 그러니까 당연히 실패했습니다. 그러니까

31:47이제는 쪼개서 다시 맡겨야 됩니다. 이걸 반복하는 겁니다. 이 사이클을 계속 반복하는 거예요. 그렇게 되면 이제는 조금씩 결과물의 퀄리티 우리가 만드는 바이브 코딩으로 완성한 웹 서비스의 결과물의 퀄리티가 조금씩 올라가게 될 겁니다.

32:12다시 한번 복습해서 말씀드립니다. 이게 굉장히 중요하기 때문에 오늘 바이브 코딩 강의의 사실상 핵심입니다. 처음에는 맡깁니다. 만들고 싶은 것만 간단하게 말했습니다.

32:23세 줄 정도로 여행 MBTI 그리고 이 MBTI 웹 만들 때 질문 몇 개 던져서 결과물 주어라. 그리고 모바일에서도 볼 수 있도록 쉽게 보기 쉽게 만들어줘. 이 정도 간단하게 만들고 싶은 것만 말했다면 이제는 쪼개야 합니다. 어떻게 쪼개냐.

32:47분석 축 어떤 근거를 가지고 분석할지 그리고 질문 수는 몇 개 정도가 좋을지 결과 구조를 어떻게 보여주는 게 좋겠다. 데이터 구조까지 사실 데이터 구조는 많이 어드벤스드 그러니까 즉 고급 지식입니다. 그래서 다 알지 않으셔도 괜찮습니다. 중요한 건 여기까지입니다.

33:05이거는 옵셔널로 따로 빼겠습니다. 분석 축 질문 수 결과 구조 이런 것들을 쪼개서 구체적으로 쪼개서 디테일하게 쪼개서 전달해야 합니다. 그래야지 웹서비스 우리가 바이브 코딩으로 만든 웹서비스의 퀄리티 그 결과물의 퀄리티가 올라가는 것입니다. 그러면 여기까지 오셨으면 이제 강의를 잠깐 멈추시고요.

33:32여러분들만의 그 리뷰를 토대로 기존에 썼던 프롬프트를 개선해 보겠습니다. 명령어를 개선해서 조금 더 구체적으로 쪼개 보겠습니다. 어떤 식으로 쪼갤지 제가 예시를 먼저 보여드리겠습니다.

33:47예시는요. 쪼갠 프롬프트로 갈 건데요. 이 쪼갠 프롬프트는 이게 여러분들께 보여드릴 수 있는 개선된 프롬프트입니다. 그래서 보시는 것처럼 여행 성향 MBTI 스타일을 진단하는 웹앱을 만든다

34:04했을 때 HTML로 모바일 우선으로 만들어라 까지는 동일합니다. 그런데 앞서서 제가 말씀드린 것처럼 분석 결과가 근거가 있으면 좋겠다라는 게 근거가 있으면 좋겠다라는 게 핵심 수정요청 개선요청이었죠. 그렇기 때문에 여기서 어떤 축으로 분석했는지 그 축을 먼저 제가 직접 기획했습니다. 계획과 즉흥 도시냐 자연이냐 휴양이냐 체험이냐 가성비냐 혹은 프리미엄이냐 4가지 축으로 나누어서 각각을 MBTI처럼 구분해서 총 16가지 유형을 만들어냈죠.

34:47그리고 나서 이 축을 통해서 실제로 이 축을 알아볼 수 있는 질문들을 하도록 그렇게 기획을 했습니다. 기획을 제가 스스로 했습니다. 직접 제가 직접 그러면서 이 기획도 당연히 AI랑 같이 했지만 중요한 거는 제가 컨펌을 더 많이 했다. 제 의견이 많이 들어갔다.

35:09라는 게 핵심입니다. 그렇게 여러분들도 여러분들의 의견을 넣어서 기획을 하시는 거겠죠. 당연히 그렇겠죠. 너무 잘하고 계십니다.

35:18그게 맞습니다. 그렇게 했을 때 제가 이어서 개선된 프롬프트를 조금 더 자세하게 살펴보려고 합니다. 지금 살펴보고 있는 중입니다. 앞에서 세 줄로 했던 것보다

35:29훨씬 더 자세해졌죠. 분석 축이 생겼고 질문을 어떤 식으로 질문할지 이지선다로 하되 한 축이 한 문항이다. 문항 가중치를 둔다. 100점으로 30점 25점 15점 씩 문항의 가중치를 두어서 한 문항씩 진행률 표시 하면서 돌아가기 이런 것들은 기본적으로 다 있었죠.

35:48그리고 나서 결과 구조에 아래 요소를 모두 포함하도록 제가 정확하게 어떤 결과에 들어갈 데이터들이 무엇인지 어떤 결과가 들어가면 좋을지 그 데이터를 정의를 해두었어요. 보시면 유형 카드가 들어가면 좋겠다. 이건 원래도 약간 있었죠. 근데 보링패스 메타포다

36:06하는 부분이 조금 더 강조가 되었고요. 그리고 축별 분석 막대 그래프 퍼센트 이런 것들도 어느 정도 있었지만 좀 더 자세하게 보여지는 거죠. 추천 여행 스타일 그리고 결과를 캔버스 요약 이미지로 보여지도록 이런 것들 즉 기존에 보여줬던 결과 구조에 조금 더 개선해서 정확히 넣었습니다. 데이터 구조도 들어갔습니다.

36:28나중에 이어서 저희가 배울 오픈 API를 연동하기 위해서 오픈 API 연동을 위해서 그걸 염두에 두고 데이터 구조를 대략적으로 설계 봤습니다. 지금 여러분들께 설명드렸지만 이것은 여러분들께 필수적인 것은 아닙니다. 옵셔널하게 취사 선택하셔서 데이터 구조를 설계 미리 설계해 두시면 앱을 개발해서 실제 API를 연결할 때 도움이 많이 되실 것입니다.

36:55디자인 UX도 조금 개선해 봤습니다. 모바일 우선적으로 큰 터치 영역들 가독성 좋은 폰트로 여행 항공 테마로 바꾸자 그리고 접근성도 이런 부분들을 추가했습니다. 텍스트 짤림이 없어야 한다 까지요.

37:10이렇게 추가해서 제가 입력을 해보려고 합니다. 여기에 이제 앞에서 입력했던 간단한 프롬프트에서 훨씬 더 쪼갰죠. 쪼개서 구체적이고 디테일해졌죠. 모바일 우선으로 만들어줄까

37:25지는 동일한데 입력해놓고 제가 같이 살펴보겠습니다. 분석축 어떤 것들이 있다 하는 거 보여주었죠. 분석축 자체가 여기 보시면 조금 기존과 다릅니다.

37:41그래서 동행이나 혼행이냐 이런 부분이 있고 액티브냐 휴양이냐 비슷한 부분도 있는데 이제 가성비냐 프리미엄이냐 하는 부분을 제가 수정해서 넣어봤습니다. 왜냐하면 실제적으로 여행 MBTI에서 또 중요한 포인트라고 생각이 들기 때문에 동행이냐 혼행이냐 는 기존의 MBTI로도 충분히 알 수 있는 부분이니까요. 이런 부분이 이제 포인트적으로 기획이 들어가야 되는 부분이겠죠. 내가 원하는 웹앱 웹서비스 결과물이 나오기 위해서요.

38:10그래서 디테일하게 쪼갰습니다.

38:12질문을 쪼갰습니다. 16문항으로 한 축당 4문항씩 균등하게 배분을 했죠. 총 16개 질문이 들어갈 텐데 16개가 성향이 4개니까 4개 성향을 골고루 잘 파악하도록 4문항씩 4x4로 16개 문항을 넣자.

38:30원래는 12개 였잖아요. 그래서 그런 부분들이 질문이 추가된 것을 확인하실 수 있습니다. 이런 식으로 웹앱 웹서비스가 어떻게 동작했으면 좋겠다 하는 동작의 모습이 조금 더 구체적으로 쪼개서 요청된 것을 볼 수 있습니다.

38:46결과 구조도 마찬가지입니다. 아래 요소를 모두 포함해라 하면서 최종적인 결과 두 번째 시간 두 번째 시간 두 번째 시간 때 오픈 API 연결하는 방법 에 대해서 같이 배울 겁니다. 그렇기 때문에 그걸 배우기 전에 기존의 데이터 구조가 이렇게 됐구나 까지 정도만 아시면 됩니다. 디자인 UX에 대한 것도 접근성 일관된 브랜딩 이런 부분들에 대해서 제가 추가로 요청을 해봤습니다.

39:20여러분들은 여러분들이 만드신 웹앱 처음에 나온 웹앱을 보시면서 직접 단점 아쉬운 점을 파악하신 후에 그 후에 저처럼 동일하게 요청을 하시는 이 프롬프트를 개선해보는 것을 추천드립니다. 왜 제가 이거를 강조하냐면 결국에는 마땅쪼입니다. 같은 맥락의 이야기인데 맡긴다 당연하다

39:46실패하는 게 당연하다 그러면 쪼갠다 이 사이클을 반복해서 여러 번 돌수록 결과물의 퀄리티가 올라가기 때문입니다. 그런데 제가 여기서 한 걸음 더 나아가기 전에

40:01실제로 결과물의 퀄리티가 올라갔는지 개선된 프롬프트로 그 웹앱을 보면서 조금 더 어떻게 개선됐는지 결과물이 그것까지 설명드리려고 합니다. 여러분도 요청해서 여기서 잠깐 강의 멈추시고 기존에 요청했던 프롬프트 이 프롬프트죠 명령어 여행 MBTI 진단 웹을 만들어줘 이 프롬프트를 여러분들이 1차적으로 만든 결과물을 보시면서 리뷰까지 리뷰 결과를 토대로 이 요청한 프롬프트를 쪼개서 좀 더 자세하게 저처럼 써보세요. 써보신 후에 써보신 프롬프트를 다시 한번 요청을 보내보세요.

40:37그러면 어떻게 개선되는지 에 대해서 여러분이 직접 확인하실 수 있을 거예요. 저는 지금 실제로 제가 이거를 보내서 요청했기 때문에 이 나온 결과물을 토대로 한번 같이 이제 개선된 프롬프트로

41:00기존에 만들었던 웹서비스를 한번 개선해봤습니다. 한번 어떤 식으로 개선됐는지 같이 살펴보시죠. 첫 화면은 크게 달라진 점은 없는 것 같은데 16개 질문으로 보여준다 라는 것이 좀 추가됐네요.

41:13그래서 탑승 시작해보겠습니다. 디자인 자체는 크게 달라지지 않았어요. 처음도 사실은 완성도가 어느 정도 있는 편이어서 물론 조금 더 개선할 여지는 있겠지만 크게 달라진 점은 없는 것 같습니다. 그러면서 어떤 이 질문에 대해서 질문이 어떤 성향을 판단하는 질문이다

41:31하는 근거를 같이 제안했는데 이 근거를 제안하는 건 어떻게 보면 또 취향 차이일 수 있을 것 같아요. 질문을 이 근거를 보지 않고 질문에 대해서 답했을 때 내 성향을 자연스럽게 알아가는 것이 더 좋을 수도 있겠지만 또 어떤 분께서는 이 질문이 정확히 어떤 근거를 가지고 어떤 성향을 파악하는 것인지 에 대해서 궁금하실 수도 있을 것 같아서 저는 궁금한 편이라 이런 식으로 추가했습니다. 이건 여러분들이 만드실 서비스는 여러분들이 만든 서비스의 개선점이 다

42:01다를 것이기 때문에 그 다른 개선점을 잘 수정하도록 반영하면 될 것 같아요. 저는 근거를 알려달라 라고 얘기했기 때문에 이런 식으로 개선해 준 것 같아요. 지금 제가 아무거나 막 누르고 있는데 크게 봐서는 동작을 확인하기 위해서입니다. 그래서 실제적으로 여행DNA를 분석했을 때 보시는 것처럼 정말 보딩 패스처럼 어떤 성향이다

42:21하는 게 자리까지 배치가 됐죠. 그리고 발길 따라가는 이런 시티 노마드 다 하는 성향이 완성이 됐고 정말 탑승권 처럼 나왔어요. 그리고 내가 어떻게 된다

42:32하면서 제가 근거를 분석해서 결과에 포함해 달라고 했기 때문에 그 결과 왜 이 유형인가 에 대해서 설명해주는 근거 자료를 같이 포함시켜 주는 게 이전과는 차이점입니다. 여러분이 이 동영상 강의를 앞서서 돌려보신다면 조금 더 확실하게 이 차이점에 대해서 이해하실 수 있을 거예요.

43:05추천 여행스타일 이건 제가 그렇게 기획 자체를 프롬프트 요청 자체를 더 쪼개서 구체적으로 했기 때문에 가능해진 것 같아요. 물론 비슷한 부분이 있을 수 있지만 조금 더 디테일하게 이런 시각화 자료라던지 시각화 UI 이런 식으로 개선할 수 있다. 쪼개야 된다. 내가 원하는 걸 구체적으로 지시해야 한다.

43:25라는 설명을 계속 드립니다. 그게 바이브 코딩의 핵심이기 때문이에요. 그리고 나서 추천여행스타일 해서 설명해주고요. 이어서 보시는 것처럼 국내 여행 추천 국내 여행지 하면서 조금 더 구체적인 대국 김광석 다시 그리기길 서울 홍대거리 서울 광장시장 하는 내용들이 이제 보이네요.

43:47그리고 결과 이미지를 저장하거나 공유하는 버튼도 추가되었고 결과 텍스트를 복사하는 버튼 처음부터 다시 진단하기 버튼들이 있네요. 앞에서 제가 만들었던 건 버튼 두 개밖에 없었던 것 같은데 이런 식의 차이점이 생겼죠. 충분히 여러분들도 여러분들만의 웹앱을 마땅쪼 방식으로 계속 개선해 나갈 수 있다는 점을 설명드리는데요. 여기서 제가 명확히 짚고 나가야 될 이 강의의 두 번째로 중요한 지점 마땅쪼 다음으로 마땅쪼 다음으로 두 번째로 중요한 지점에 대해서 같이 거의 비슷하게 중요한 지점에 대해서 설명드리려고 합니다.

44:24AI가 잘하는 것과 못하는 것이 극명하게 나뉘어진다는 점입니다. 왜 이게 중요하냐면 먼저 AI 우리가 쓰는 바이브 코딩에서의 이 AI가 무엇을 잘하고 무엇을 못하는가에 대해서 이해하실 필요가 있습니다. 그래야 AI의 한계를 명확히 알고 그 다음에 AI를 제대로 잘 써서 바이브 코딩을 잘 할 수 있기 때문입니다. AI가 잘하는 것은 보시는 것처럼 만들기를 잘합니다.

44:52곧 구현이라고도 하죠. 구현은 정말 빠르고 능숙하게 잘해요. 이제 넣고 뭐 한 10분 5분 기다리면 웹사이트 하나가 나올 정도예요. 예전에 이런 것들은 개발자가 최소 몇 시간 3, 4시간 걸릴 일이었어요.

45:073, 4시간 훨씬 넘죠. 더 디테일하게 하면 하루 아니면 일주일도 걸리는 작업들이 많았어요. 그런데 이제는 5분에서 10분이면 웹사이트 하나 간단한 페이지 정도는 뚝딱 만들어줍니다. 구현을 너무 잘해주죠.

45:20빠르고 능숙하게 잘해요. 그게 AI가 잘하는 거예요. 그런데 못하는 것도 있어요. 무엇을 만들어야 하는지를 생각하는 걸 잘 못해요.

45:28제가 여행 MBTI 앱을 만들어줘 라고 했기 때문에 여행 MBTI 앱을 이렇게 만들 수 있었던 거지 AI가 그냥 여행 관련된 내 마음 하나 만들어봐 하면 이 MBTI 라는 키워드를 생각해서 연결해내지 못했을 거예요. 이 연결해내는 창의적인 생각 무엇을 만들지를 생각하는 과정 바로 이게 기획입니다. 즉 IT 서비스들의 기획자가 하는 역할이죠. 제가 강조하고 싶은 지점은 이건데 AI는 스스로 기획을 뛰어나게 할 수 없어요.

46:01왜냐하면 앞단어 즉 학습해서 이미 훈련된 내용을 기반으로 추론해서 뒷단어를 확률로 정하기 때문이에요. 앞단어 즉 학습한 것들 그리고 플러스 관계 이 단어들의 관계를 고려했을 때 뒤에가 나오기 때문에 전혀 다른 새로운 걸 만들기 어렵다는 말씀이 인 것입니다.

46:23여러분 혹시 이런 짤 보신 적 있는지 모르겠는데 제가 너무 그림을 정말 여러분들이 알아보기 쉽게 대략 그려서 그런데 동그라미에서 이렇게 뾰족 튀어나온 부분 이 짤 보신 적 있나요? 그렇죠? 이거는 박사 과정에 대해서 설명하는 짤인데요. 이게 무슨 의미냐?

46:42박사들이 하는 일은 동그란 지식의 세계에서 확장을 이뤄나갈 때 어떤 식으로 확장하냐? 이 뾰족하게 튀어나온 이 지점들을 만드는 일 이 바로 박사일이다. 박사 논문이 여기 뾰족하게 나온 이 부분이다. 이렇게 뾰족뾰족뾰족 많은 박사들이 다 일을 해서 이것이 지식의 원이 이만큼 확장되는 것이다.

47:02세계의 지식의 원은 이렇게 넓어져 왔다. 라는 과정을 설명하는 글이었어요. 제가 이걸 왜 그렸냐면 AI는요. 여기에 나온 이 뾰족하게 튀어나온 이걸 못해요.

47:13지금 만들어진 AI들은 이걸 못해요. 이게 뭐냐면 창의적인 서비스 즉 무엇을 만들지 생각하는 거예요. 이 생각하는 건 AI들이 못해요. 그럼 만드는 것만 잘해요.

47:26그러니까 여러분들 께서는 실제로 여행 관련된 한국 관광 공사 에서 제공하는 수많은 API들이 있을 거예요. 이 API를 보시면서 아 이런 서비스 나오면 좋겠다 하고 생각하는 것 이게 바로 여러분들이 하시는 일입니다.

47:43여러분들 많이 하실 수 있는 일이죠. 그래서 그저 그런 서비스와 정말 좋은 서비스를 가르는 핵심 기준은 AI 만으로 그냥 만들어내는 서비스가 아니라 나만의 기획 그 관점 기획 반드시 들어가야 한다는 말씀을 드리고 싶습니다. 그래야지 여러분들의 완성된 서비스가 정말 좋은 서비스가 될 수 있을 거예요. 이 두 개를 가르는 이유는 제가 앞서 설명 드렸죠.

48:09AI 는 무엇을 만들지를 잘 못하기 때문에 결정하는 일을 잘 못 하기 때문에 물론 기획 과정도 시작하고 개선하는 이런 모든 과정 들도 AI 와 함께 하실 수 있어요. 질문 하고 답 하면서 만들 수 있어요. 그런데 결론 적으로는 나만의 기획 그 관점이 반드시 들어가야 정말 좋은 서비스가 된다. 라는 말씀을 다시 한번 드립니다.

48:32정말 강조해서 드려요. 이 강의가 정말 한 시간 동안 쭉 진행 했는데 본질 적으로 알려주는 것은 단순히 만드는 방법 정도 입니다. 바이브 코딩 이 무엇인가 바이브 코딩 이 무엇 인가 그리고 그것을 어떻게 활용해서 실제 앱 만들 수 있는가 정도 에 대해서 제가 알려드리는 거예요. 이게 다

48:51그런데 훨씬 더 중요한 게 여러분의 몫으로 남아 있습니다. 그것은 바로 기획 자체입니다. 무엇을 만들 것인가 이 무엇을 만들 것인가 에 대한 것은 누가 가르쳐 줄 수 있는 게 아니에요. 여러분들이 직접 여러분들만의 서비스에 대해서 찾아 내셔야 돼요.

49:12그렇게 하실 수 있습니다.

49:14그리고 나서 제가 한 가지 정도 팁을 더 드릴게요. 이 팁은 중간에 잠깐 드리는 건데요. 이 사이트 입니다. 이 사이트도 전부 다

49:23공짜 에요. 무려 21st.dev 인데 이 사이트 에 가시면 굉장히 양질 레퍼런스들 코드 모음 조각 부품들 웹사이트를 만들 때 필요한 부품들이 잔뜩 있습니다. 예를 들면 아까 MBTI 에서 번호 특정 페이지로 이동 하고 싶다

49:45했을 부품을 재사용할 수 있겠죠. 재사용하는 방법은 간단합니다. 여기는 카피 프롬프트 입니다. 이거 눌렀을 때 만약 로그인 안되셨다면 회원가입 안되셨다면 회원가입 하라고 안내할 거예요.

49:57가입 하시면 됩니다. 저는 로그인 했기 때문에 이렇게 카피 가 될 거고요. 이 카피 된 걸 가지고 여기에 붙여 넣으면 그대로 앞서서 만들었던 페이지네이션을 넣을 수 있습니다. 위 부품을 질문 진행시에 넣어줘 하게 되면 질문 진행할 때 보시면 앞서서 처음부터 다시 해볼게요.

50:21여기에서 질문 진행할 때 번호를 바로 이동할 수 없잖아요. 1번부터 16번까지 순차적으로만 이동할 수 있는데 이게 생기면 여기에서 양질의 부품들이 많기 때문에 이게 생긴다면 번호로 바로 이동할 수 있겠죠. 이런 식으로 여기 있는 양질의 부품들을 사용해서 개선할 수 있겠죠. 이런 꿀팁까지 마지막으로 드립니다.

50:40이렇게 드리면서 진짜 제가 하고 싶은 얘기들은 다 했기 때문에 여러분들이 다음 시간에 바로 이어서 실제로 그러면 한국관광공사 오픈API를 어떤 식으로 연동할지 그렇게 해서 MBTI 앱에다가 지금은 저희가 임의로 넣어놓은 데이터예요. 근데 그게 아니라 실제 한국관광공사에서 제공하는 API를 연동해서 실제 데이터를 제공하는 방법을 진행해보려고 합니다.

51:09여기까지 오늘 강사를 맡은 저는 황경찬이었고요. 보아스라는 이름입니다. 그렇게 활동하고 있어서 함께 해주셔서 대단히 감사합니다. 바로 이어서 다음 강의 때 뵙겠습니다.

51:22그럼 안녕