Claude 웹에서 따라하며 배우는 바이브 코딩 - 30분 완성 과정
Claude Code 없이 Claude 웹만으로 회의 녹음기를 만들고, 받아쓰기를 붙이고, 회의록을 액션 아이템까지 정리해 HTML로 시각화합니다. 코딩은 한 줄도 하지 않습니다.
32:40 · 챕터 20개 · YouTube에서 보기
전체 대본
문장을 클릭하면 영상의 해당 시점으로 이동합니다.
물음표 뒤에 느낌표를 3개 더 붙여줘. 그리고 코딩을 말로 한다 뒤에 별표 하나 추가해줘. 그러면 느낌표 3개가 추가된 거 확인하실 수 있죠. 그리고 별표도 잘 붙어있는 것까지 확인할 수 있습니다.
녹음 버튼이 있고 녹음할 수 있도록 녹음기 웹사이트를 완성해주세요. 굉장히 아날로그틱한 감성의 녹음기가 완성된 걸 보실 수 있습니다. 아래 보시는 것처럼 이렇게 받아쓰기가 잘 됩니다. 이렇게 되면 이제 회의록을 완성할 수 있겠죠.
HTML로 보기 좋게 시각화해서 회의록을 정리해줘. HTML로 완성해달라고 요청했더니 오른쪽에 회의록 내용이 시각화돼서 잘 정리됐습니다. 그래서 보시는 것처럼 액션 플랜이 있을 때 체크해서 잘 수행했다라고 이렇게 인터랙션이 가능합니다.
바이브 워크 강의에 오신 여러분 진심으로 환영합니다. 저는 이번 강의를 진행하게 된 강사 보아스라고 합니다. 오늘 여러분과 함께 인트로 세션부터 차근차근 진행할 텐데요. 먼저 같이 제목부터 읽어볼까요?
AI 변화의 파도를 타자. 같이 읽어주셔서 너무 감사드립니다. 제가 중간중간 이렇게 강의 제목을 읽어달라 혹은 이거 같이 읽자 질문도 드리고 할 텐데요. 그 이후 다른 건 없고 입 밖으로 제가 전달드린 내용을 꺼내셨을 때 출력하셨을 때 훨씬 더 여러분의 뇌 속으로 들어가는 지식의 양이 더 많다고 하더라고요.
잘 기억에도 남고요. 그래서 제가 중간중간 이렇게 질문도 드리고 같이 읽자고 부탁도 드릴 건데 잘 따라주셔서 너무 감사드립니다. 오늘 이 인트로 세션 끝까지 다 듣고 나시면 AI로 어떤 것까지 내가 할 수 있는가? AI 그 변화의 파도가 도대체 무엇인가?
좀 감을 제대로 잡으실 수 있을 겁니다. 그럼 바로 시작하겠습니다. 오늘 강의를 통해서 세 가지 좀 자세히 살펴보려고 하는데요.
그래서 AI가 뭔데? AI 정의죠. AI 정의에 대해서 살펴볼 거고요. 그리고 나서 AI가 뭐 해줄 수 있는데?
AI가 어디까지 할 수 있는지 역할 같이 볼 겁니다. 실습해 보면서 볼 거예요. 그 실습이 바로 3번입니다. 직접 해볼 겁니다.
AI로요. 바로 강의 본격적으로 더 들어가려고 합니다. 한 걸음씩 깊이 들어가고 있습니다. AI가 뭔데?
그 AI의 정의부터 좀 살펴보겠습니다. AI도 소프트웨어다? 혹시 이 얘기 들어보신 적 있나요? 그렇죠?
우리가 여기서 말하는 AI라고 하면 LLM을 의미합니다. LLM, Large Language Model이죠. 이미 들어보신 분도 계시고 처음 들어보신 분도 계실 텐데 전혀 상관없습니다. 뭔가 언어 관련된 Large Language Model인가 보다.
모델. 모델이 뭔지 모르셔도 전혀 상관없습니다. 코드로 만든 겁니다. 그래서 소프트웨어다 라는 말은 어려운 말 전혀 아닙니다.
이거 그냥 뭔가 코딩, 코드 쓰는 거구나. 코드 뭐 이렇게 개발자들이 치는 그거 코드 쓰는 거구나. 인데 사실 이 코딩이라 함은 어디까지 확장할 수 있느냐. 컴퓨터로 하는 모든 일로 확장할 수 있습니다.
왜 그런지는 제가 차근차근 설명드리겠습니다. 혹시 이거 보고 계신 여러분 중에서 컴퓨터 없이 일하시는 분 계신가요?
그렇죠. 아무도 없으실 겁니다. 아마도 화이트칼라 직장인이라고 하신다면 거의 대부분의 분들이 아마 컴퓨터로 일을 하실 겁니다. 즉 여러분의 일입니다. AI는 여러분의 일과 관련이 있습니다.
그래서 소프트웨어 업의 변화는 곧 화이트칼라 업의 변화와 밀접한 연관이 있습니다. 이만큼 중요해서 제가 강조드립니다. 제가 한 가지만 더 짚고 싶은데 도대체 무엇이 바뀌고 있느냐.
이 안드레이 카파시라는 인물을 빼놓고 얘기할 수가 없습니다. 이 인물은요. 테슬라의 자율주행을 개발했던 총책임자이자 오픈 AI의 창업 멤버입니다. 그리고 얼마 전, 2026년도 6월, 7월쯤에 Anthropic이라는 회사로 이직했습니다.
이 Anthropic이라는 회사는 여러분이 잘 아시는 바로 그것. 클로드 코드, 클로드를 만든 회사입니다. 이 안드레이 카파시가요, 만든 단어가 바로 바이브 코딩이라는 단어입니다. AI로 어디까지 할 수 있어? 하는 AI의 역할을 얘기할 때 빼놓을 수 없는 개념이 바로 이 바이브 코딩이죠.
우리는 바이브 워크를 배울 거지만 바이브 코딩을 모르면 안 됩니다. 바이브 코딩을 가볍게 해볼 겁니다. 정말 가볍게요. 왜냐하면 그래야지 AI로 어디까지 할 수 있는지 훨씬 더 잘 감을 자세히 잡으실 수 있기 때문입니다. 제가 그러다 보니까 이 바이브 코딩, 결국엔 소프트웨어 얘기 빼놓을 수가 없습니다.
앞에 안드레이 카파시가 한 이어서의 얘기인데요. 소프트웨어 3.0 시대가 왔다라는 얘기입니다. 혹시 주의 깊게 이 강의를 처음부터 보셨다면 맨 처음 이 강의 제목 AI 변화의 파도를 타자 밑에 부제가 기억나실지 모르겠습니다. 앞에 영상을 잠깐 돌아보고 오셔도 괜찮은데요.
제가 설명드릴게요. 소프트웨어 3.0 시대다 라는 게 부제였어요. 이 얘기가 어떤 의미냐? 곧 영어, 즉 사람의 언어가 새로운 프로그래밍 언어다 라는 의미입니다.
소프트웨어 3.0 시대는요. 1.0 시대, 2.0 시대가 있었으니까 3.0 시대가 있겠죠. 1.0 시대는 무엇이냐? 곧 How에 대한 이야기였어요.
코드 한 줄 한 줄을 직접 작성했어요. 그때가 1.0 시대였어요. 2.0 시대에서는 Show의 시대예요. 딥러닝 시대죠.
현재 AI의 전신인데요. 이 딥러닝은 어떻게 진행하냐? 개냐, 고양이냐? 이런 걸 사진을 수없이 많이 보여주고 이거 개야, 고양이야?
보여준 다음에 답변하게 하는 시대가 바로 소프트웨어 2.0 시대였어요. 소프트웨어 3.0 시대는 What의 시대입니다. 즉 What, 결과만 말로 설명하면 코딩이 되는 겁니다. 그게 바로 소프트웨어 3.0 시대입니다.
그게 바이브 코딩의 정의입니다. 영어가 새로운 프로그래밍 언어가 되었다. 말로 하면 된다. 입니다.
결과를 말로 설명한다. 이 의미에 대해서 조금 더 감이 잡히실 수 있도록 제가 실습 사례를 정말 가볍게 준비했어요. 이거는 따라 하시는 건 아니고 제가 보여드릴 건데.
어떻게 코딩을 말로 하는 거야? 그게 도대체 무슨 의미야? 여러분 지금 갑자기 어려워졌다고 전혀 생각하실 필요 없습니다. 이거 나중에 할 거예요.
나중에 할 건데 이거는 클로드 코드라는 화면입니다. 같이 바이브 워크를 할 때 도구로 쓸 거예요. 지금은 모르셔도 돼요. 어떻게 할 거냐면요.
여기 보시는 것처럼 이 슬라이드에서 뒤에 느낌표를 3개 더 붙여줘. 코딩을 말로 한다 뒤에 별표 추가해줘 라고 할 겁니다. 수정했던 10번 슬라이드 뒤에 물음표 뒤에 느낌표를 3개 더 붙여줘. 그리고 코딩을 말로 한다 뒤에 별표 하나 추가해줘.
이렇게 하면 지금 제가 말로 했죠. 그리고 말이 그대로 명령어가 돼서 입력이 됐습니다. 그러면 이 코딩 도구가 직접 코드를 수정합니다. 그래서 바로 실제로 반영해서 수정된 것까지 확인하실 수 있습니다.
제가 일부러 이거는 전혀 끊지 않고요. 편집 없이 그대로 시간 가는 거 보여드리겠습니다. 어떻게 진행되는지 여러분들께 좀 설명드리고 싶어서 그렇습니다. 혹시 이것에 대해서 기다리시기가 조금 번거로우신 분들은 조금 앞으로 가기 누르셔서 진행하셔도 됩니다.
지금 이렇게 보시는 것처럼 뭔가 코드를 수정했습니다. 별표를 추가하고 느낌표도 추가했죠. 이렇게 추가를 했습니다. 그리고 나면 완료된 겁니다.
그래서 제가 어떻게 완료됐는지 같이 확인해 보겠습니다. 10번 슬라이드이기 때문에 새로고침하고 10번으로 가겠습니다. 그러면 느낌표 3개가 추가된 거 확인하실 수 있죠. 그리고 별표도 잘 붙어 있는 것까지 확인할 수 있습니다.
이렇게 말로 코딩할 수 있는 겁니다. 이 슬라이드들도 사실 코딩으로 다 만든 거거든요. AI랑 같이요. 그래서 여러분이 오늘 저와 함께 이렇게 말로 설명해서 뭔가 동작하는 결과물을 만드는 데까지 같이 가볼 겁니다.
이게 바이브 코딩인데요. 아니 바이브 워크 강의인데 왜 바이브 코딩을 가르쳐 주시나요? 감을 잡는 정도로 정말 가볍게 살펴볼 겁니다. 그래야지 AI로 어디까지 할 수 있는지 감을 잡으실 수 있기 때문이죠.
제가 3.0 시대를 한 번 더 정리하는 것으로 오늘 인트로 세션을 마치려고 합니다. 3.0 시대에서는요. 말만 하면 LLM이 알아서 결과를 확인해 줬습니다. 이게 얼마나 대단한 거냐면 1.0 시대에서는 원래 개발하려면 이랬어요.
말, 회의에서 말을 합니다. 그러면 기획서를 작성해야 됐고요. 요구사항을 정리해야 됐고요. 설계를 해야 됐습니다.
그리고 나서 비로소 개발자들이 구현을 합니다. 그래야지만이 결과를 확인할 수 있었습니다. 그런데 3.0 시대에 왔기 때문에 이 단계 전체를 LLM이 대신해 줄 수 있게 된 것입니다. 너무 신나는 세상입니다.
바로 실습으로 넘어가 보겠습니다.
첫 번째 실습입니다. 회의를 해서 회의 내용을 녹음한 다음 회의록을 정리하고 담당자 메신저 전달은 좀 어려울 수 있을 것 같습니다. 오늘 여기까지 해보려고 하는데 요건 고급 기능으로 제가 따로 빼겠습니다. 회의를 한 다음 녹음을 어떻게 해야 될까?
뭐 핸드폰으로 녹음하면 되나? 아닙니다. 같이 녹음기부터 만들어 볼 겁니다. 그러면 바로 실습 시작할 텐데요.
인터넷으로 다 할 거기 때문에 아무것도 하실 필요 없습니다.
다만 클로드 계정은 필요합니다. 첫 번째로는 3만원으로 가입해서 쓸 수 있는 계정을 추천드리는데 20달러죠. 가입하셨다면 클로드라고 치겠습니다. claude.ai 들어가시겠습니다.
그러면 저처럼 로그인이 안 되어 있으시다면 좀 다를텐데 로그인이 되어 있으시다면 아래처럼 이렇게 보이실 겁니다. 로그인 잘 되어 있죠. 그리고 나서 여기에서 저 따라오시면 됩니다. 정말 쉽습니다.
안 보이시는 분들은 사이드바 열면 이렇게 쭉 보일 텐데 여기에서 번째 Artifacts라고 되어 있는 한글로는 Artifacts라고 되어 있을 겁니다. 눌러서 들어가겠습니다. 그러면 아마 여러분들은 아무것도 안 만드셨다면 보이는 게 없을 텐데 저는 이것저것 만들어 놔서 그런데요. 오른쪽에 New Artifacts, 즉 새로운 Artifacts 추가하기 새로운 Artifacts 등 버튼이 있습니다.
이거 눌러서 그대로 들어가겠습니다. 그러면 여러가지 후보가 보입니다. 어떤 것들을 진행해 볼까? 오늘 저와 함께 만들 녹음기는 Apps and Websites을 선택해서 진행하시면 됩니다.
Apps and Websites 같이 선택하겠습니다. 그러면 본격적으로 클로드 코드가 아니죠. 클로드입니다. 아직 클로드 코드 안 넘어갔습니다.
클로드에서 이렇게 영어로 갑자기 답변을 합니다. 전혀 한글로 답변하시면 그대로 진행하시면 됩니다. 영어로 답변하시면 전혀 괜찮습니다. 저 따라오시면 되는데요.
이때 한 가지 확인하실 게 있습니다. 만약에 여기에 Opus 5 High라고 되어 있지 않고 다르게 되어 있으신 분들 괜찮습니다. 되어 있으신 분들은 그대로 가셔도 되는데 이 Effort만 로우로 낮춰주겠습니다.
충분하기 때문입니다. 지금은 이것에 대해서 자세히 설명드리지 않겠습니다. 그냥 그대로 저 따라오시면 됩니다. 로우하시면 더 빨리 진행될 수 있어서 그렇게 선택하고 진행하는 것입니다.
그 다음에 회의를 녹음할 수 있는 녹음기 웹사이트를 만들 거예요. 저 따라서 그대로 치시면 됩니다. 지금 이 강의는요 따라하는 실습이 많습니다. 그래서 여러분들이 직접 타자 하시면서 잠깐 멈추셨다가 타자 하시면서 진행하시면 됩니다.
만들 거예요. 하고 HTML로 HTML 하나로 완성할 거예요. 녹음 버튼이 있고 녹음할 수 있도록 녹음기 웹사이트를 완성해 주세요. 지금 여러분이 모르시는 단어는 이 HTML 하나로 완성할 거예요. 이 부분밖에 없을 겁니다.
나머지는 여러분이 다 아시는 내용입니다. 사실 이거 빼도 잘 만들어집니다 그런데 이걸 추가한 이유는요 조금 더 안정적으로 만들기 위해서일 뿐입니다.
HTML 뭔지 모르셔도 아무 상관없습니다. 그냥 이렇게 하고 엔터 누르겠습니다. 이렇게 하고 엔터 누르면 클로드가 알아서 만들어주기 시작할 겁니다 무엇을 만들어줄까? 녹음기 웹사이트를요.
그래야지 회의를 녹음할 수 있겠죠. 그래서 회의 녹음한 거 토대로 녹음한 결과물 가지고 요약하고 회의록 정리해서 공유하는 것까지 같이 해볼 겁니다. 정말 간단한 실습인데 굉장히 AI가 파워풀하구나 라는 걸 직접 느끼실 수 있는 겁니다. 완성될 때까지 조금 걸리기 때문에 잠깐 멈췄다가 완성되면 돌아오겠습니다.
진행될 때 보시면 오른쪽에 이렇게 레코더라고 해서 굉장히 아날로그틱한 감성의 녹음기가 완성된 걸 보실 수 있습니다. 특별한 게 아무것도 없고 녹음기만 딱 나왔는데요. 이렇게 되면 보시는 것처럼 동작할지 안할지 잘 모릅니다. 그리고 여러분들은 디자인이 좀 다르실 수 있습니다.
전혀 상관없습니다. 디자인은 얼마든지 다양하게 다르게 나올 수 있어요. 그런데 이 다양하게 디자인이 나오는 이유에 대해서 잠깐 설명해 드리겠습니다. LLM은요. 즉 Large Language Model은요. 제가 잠깐 여기서 말씀드릴 텐데요.
LLM. 우리가 말한 AI가 LLM이다 라고 말씀드렸죠. 이 LLM은 중요한 사실이어서 여러분 꼭 기억하셔야 됩니다. 확률론적으로 동작합니다. 아니 도대체 이게 무슨 의미인가? 확률론적인 동작이라니.
확률 즉 LLM이 동작한다는 것은 오늘의 실습 이런 식으로 조금 더 구체적인 예시를 들어보겠습니다. 나는 오늘 저녁을 뒤에 간다 먹는다 도망친다 등등 여러 단어들이 올 수 있습니다. 이 각각의 단어들이 확률이 계산됩니다. 간다는 5% 도망친다는 1% 먹는다는 80% 각각의 확률을 가지고 있습니다.
이때 먹는다 라는 단어가 가장 높기 때문에 80%의 확률을 선택해서 그 다음 먹는다 라는 단어로 채우는 겁니다 그런데 항상 높은 퍼센테이지의 단어만 선택한다면 굉장히 LLM이 예측 가능해지고 천편일률적이 됩니다.
그래서 때로는 두 번째 혹은 세 번째 순위의 단어들을 선택하기도 합니다. 그렇기 때문에 조금씩 결과물이 달라질 수 있습니다. 똑같은 요청을 해도요 그래서 저와 함께 여러분이 완전히 동일한 요청을 했다고 하더라도 그 결과물로 나오는 녹음기의 모양.
즉 사실 녹음기는요 코드로 되어 있어요. 뒷단에서 코드로 돌아가고 있는데 이 코드가 단어의 연속입니다.
이 단어가 확률론적으로 동작하기 때문에 달라진 것입니다. 그래서 녹음기의 모양도 달라진 것입니다. 그렇게 이해하시면 됩니다. 굉장히 중요한 얘기여서 제가 반드시 짚고 넘어갑니다.
다르셔도 전혀 문제 없습니다. 여기까지 오셨다면요 녹음 시작을 눌러보시겠습니까.
한번 같이 눌러볼게요 누르면 마이크 차단됨 이라는 표시가 떴는데 혹시 표시 안 뜨실 수도 있습니다. 전혀 상관없습니다.
녹음 시작 눌렀는데 아무 동작 안 합니다. 뭐야 이거 왜 이래 코드 코드라고 했는데 어디 코드가 있지 여기 보면 코드라는 표시가 있습니다. 눈 옆에 눌러보면 이렇게 코드가 보이는 건데 뭐야 이 코드가 제대로 잘못된 건가 왜 이래 괜찮습니다.
정상입니다. 일부러 이렇게 설계했습니다. 여기 웹 브라우저에서 즉 클로드 웹에서 하는 한계를 체험시켜 드리기 위해서입니다.
오른쪽 위에 보시면 카피 버튼 옆에 아래로 되어 있는 화살표가 있습니다.
눌러보겠습니다. 그리고 나서 Download as HTML 이라고 되어 있는 버튼이 보이십니다 눌러서 html 즉 우리가 말로 완성한 코드를 다운로드 받아 보겠습니다. 다운로드 받았습니다.
그러면 다운로드가 완료되었으면 크롬에서는 아마 오른쪽 위에 되어 있을 겁니다 전 다른 브라우저에서 그런데요 이렇게 오셔서 그대로 claude-recorder.html 이라고 다운로드 된 것을 클릭해서 한번 열어 보겠습니다. 클릭하면 바로 열립니다.
클릭해서 열어 보겠습니다. 그러면 클릭해서 여시면 보시는 것처럼 브라우저에서 이렇게 녹음기가 돌아가고 있는 걸 확인하실 수 있습니다. 여기까지 되셨는데 이 상태에서 다시 한번 녹음 시작을 눌러보겠습니다. 아까랑은 좀 다릅니다.
이 상태에서 누르셔야 됩니다. 즉 html 다운로드 받으시고 그 다운로드 받으신 상태에서 그 다음에 브라우저 이 크롬 브라우저에서 실행하신 이 상태에서 녹음 시작을 누르셔야 됩니다. 천천히 따라오시면 됩니다. 녹음 시작 같이 눌러보겠습니다.
그러면 왼쪽 위에 이제 마이크 권한을 요청하는 것이 보입니다. 아 나왔다 아까는 왜 안 나왔을까 그것에 대한 답변은요.
일단 허락하고 답변 드리겠습니다. 허용 누르겠습니다. 그러면 이제 녹음이 잘 되고 있는 거 보실 수 있습니다. 네.
왜 아까는 녹음기가 작동을 안 했을까 마이크 권한 요청을 안 했을까 Artifacts 클로드 웹에서 진행한 이 Artifacts에서 실행한 HTML을 실행한 HTML을 실행한 오른쪽 이 화면은요 가상의 브라우저입니다.
그래서 진짜 브라우저가 아니기 때문에 마이크 권한도 요청을 할 수 없습니다. 이런 차이점이 있습니다. 이건 가상의 브라우저예요. 진짜 브라우저는 이런 크롬 브라우저가 진짜 브라우저입니다.
이렇게 진짜 브라우저에 와서 다시 HTML을 실행해야 진짜 브라우저가 접근할 수 있는 마이크 권한이 허용할 수 있게 되는 것입니다. 여기까지 녹음을 잘 했다면 녹음 중지 눌러 보겠습니다. 그러면 재생하시면 바로 들어 보실 수 있을 겁니다 잠깐 영상 멈추시고 저 따라서 재생해서 한번 확인해 보시죠.
재생합니다. 그러면 이제 녹음이 잘 되고 있는 거 보실 수 있습니다. 왜 아까는 녹음이 잘 됐고요 내려받기도 가능합니다.
그러면 녹음한 파일을 그대로 음성 파일로 저장이 됩니다. webm 이라는 확장자로 녹음한 음성 파일이 잘 저장된 것까지 보실 수 있죠.
우리가 원하는 기능은요 회의록 기능이기 때문에 만약에요. 여러분 중에서 이미 녹음할 때 그 녹음된 내용을 회의록로 기록하는 것까지 다 구현이 된 분들도 계실 겁니다 그러면 이 부분은 건너뛰셔도 상관없습니다. 저처럼 녹음기만 딱 완성된 분들에게 필요한 내용인데요.
어떤 내용이냐면 실제로 이제 녹음기 기능 이어서 녹음한 내용을 그대로 브라우저 안에서 STT해서 회의록로 저장하는 기능을 추가해 저 그대로 따라 입력하시면 됩니다. 녹음한 내용을 그대로 브라우저 안에서 STT해서 이 부분을 모르실 겁니다 회의록로 저장하는 기능을 추가해 다 하실 거예요. 이 부분을 모르실 수 있어요.
그대로 브라우저 안에서 STT해서 브라우저 안에서 라는 말은 제가 실행했던 이 크롬 브라우저 안에서 라는 말씀을 드립니다. 왜 제가 이렇게 제약을 걸었냐면 바깥으로 풀어주면 너무나도 복잡한 다양한 기능을 추가할 수 있기 때문에 브라우저 안에서 실행할 수 있도록 이렇게 제약을 걸었습니다. 그리고 STT해서 라는 건 무엇이냐 Speech To Text 라는 키워드입니다.
STT Speech To Text 즉 음성 스피치를 텍스트로 전환해 주는 기능을 의미합니다. STT 에서 회의록로 저장하는 기능을 추가해 라는 이 기능에 대해서 요청을 한번 더 해보겠습니다. 그러면 수정이 되기 시작할 겁니다 오른쪽에 제가 만들어 놨던 그 결과물이 수정되는 것을 보실 수 있습니다.
조금 기다렸다가 다시 찾아오겠습니다. 이제 막 회의록 기능이 추가 되었습니다. 보시면 오른쪽에 받아쓰기 라고 되어 있는 부분이 추가된 것을 확인하실 수 있습니다. 도대체 이게 무슨 내용일까 확인하고 싶으시다면 저 따라오셔야 됩니다.
오른쪽 위에 카피 버튼 따라가서 오른쪽에 내려가는 화살표 있습니다. 눌러보면 Download as HTML html 다운받기 버튼이 있습니다. 눌러보겠습니다. 그러면 새롭게 개발한 내용의 코드가 다시 다운로드 받아집니다 반드시요 이 새롭게 개발된 내용은요 다시 html을 다운받으셔야 됩니다.
그래야지 이 새롭게 개발된게 반영됩니다.
다시 다운 받으셔야 됩니다. 이거 꼭 기억하셔야 됩니다. 그래서 다운로드 받았던 새로운 html 파일을 클릭해서 다시 열어 보겠습니다. 새롭게 연 버전입니다. 이전 버전이랑 다르죠 이전 버전이랑 다릅니다.
이 버전으로 다시 한번 녹음 시작 버튼 누르면 마이크 권한 요청이 나와서 허락해 주면요 이제 녹음이 시작됩니다. 이렇게 되면요 지금 녹음이 진행되고 있는데 보시면 실시간으로 여기에 기록된다 라고 되어 있는데 기록이 안되고 있어요. 기록이 안되고 있습니다. 충분히 이럴 수 있습니다. 그러면 제가 그대로 멈춘 다음에 여러분도 이렇게 될 수 있기 때문에 너무 좋은 예시입니다.
만약에 기록이 잘 되시면 이제 회의록 완성하신 거기 때문에 넘어가시면 됩니다. 다음 섹션으로요 저는 여기서 이 버그까지 고치고 가겠습니다. 버그가 뭐냐 이런 잘못된 에러입니다. 분명히 회의록 실시간으로 녹음하라고 했는데 실시간 기록이 정상 동작 하도록 코드 고쳐줘 지금은 녹음만 되고 실시간으로 내용이 기록이 안된다.
라고 해서 요청해 보겠습니다. 이렇게 되면요 이 버그 에러를 클로드가 알아서 수정해 줄 겁니다 지금 저희가 하는게 바로 말로 하는 코딩 소프트웨어 3.0 시대입니다. 바이브 코딩이죠. 이게 바로 바이브 코딩이에요.
특별히 어려운게 전혀 없죠 다만 중간중간 키워드를 알아야 한다 라는 어려움은 있을 수 있습니다. 이 키워드를 어떻게 알 수 있냐 그것도 클로드에게 물어보면 됩니다. 나 녹음하고 싶은데 어떤 기능이 필요해 이런 식으로 물어보면 STT 같은 키워드를 얻을 수 있을 겁니다 처음에는요 아무것도 모르시기 때문에 저처럼 이런 강사들이 주는 가이드 안에서 바이브 코딩을 진행하시는 것이 도움이 되실 겁니다.
그런데 조금만 실력이 쌓이시면요 저는요 개인적으로 무조건 다 AI와 함께 개발해 보시는 거 바이브 코딩 해 보시는 걸 추천드려요. 다 개발해 보시는 것을요 그러다 보면 필요를 알아서 조금 더 수정해야 되거나 배워야 될 것들이 보이기 때문입니다.
이렇게 돼서요 지금 수정이 완료됐다고 하니까 한번 다운로드 받아서 다시 한번 실행해서 제대로 동작하는지 확인해 보겠습니다. 이번엔 제대로 동작해야 할 텐데요.
여전히 동작을 안 합니다. 그래서 요 부분은 제가 수정하고 오겠습니다.
여러분과 완전 동일하게 크롬에서 제가 방금 만든 녹음기를 실행해 보았더니요 그대로 정상 동작 하더라고요 제가 한번 보여드릴게요 녹음 시작 버튼을 누르게 되면 마이크 권한을 허용해 주게 되면요.
아래 보시는 것처럼 이렇게 받아쓰기가 잘 됩니다. 이렇게 되면 이제 회의록을 완성할 수 있겠죠. 오늘 제가 지금 추천드리는 것은 잠깐 영상 멈추시고요 오늘 진행하셨던 이 강의 내용을 한번 여러분들의 언어로 정리해 보세요.
그렇게 되면 회의록을 대체할 내용이 녹음될 겁니다 그렇게 정리를 하신 다음에 그 다음 이 강의를 이어가시길 추천드립니다. 왜냐하면 만약에 회의록이 있으시면 상관없지만요 없으신 분들이요.
왜 그러냐면 이제 이어서 진행할 실습은요 여러분이 만드신 이 회의록을 보기 좋게 정리하는 것을 진행해 보려고 합니다. 그래서요 지금 잘 보시는 것처럼 이렇게 녹음이 잘 되는데 저의 경우는요 제가 지금까지 진행한 이 강의 내용에 대해서 잠깐 녹화를 멈추고 정리한 다음 다시 오겠습니다. 그럼 여러분들은 저 따라서 같이 멈추시고 강의한 내용을 정리하셔도 되고 만약에 회의록이 이미 있다 하시는 분들은 그 회의록을 그대로 가져오시면 됩니다.
그리고 나서 바로 다음으로 넘어가시면 됩니다. 그러면 저 정리하고 다시 오겠습니다. 저는 이제 앞에 진행했던 강의 내용을 전부 정리했습니다. 이렇게 되면 녹음 중지하겠습니다.
그리고 나서 회의록 저장 버튼이 있습니다. 만약에 회의록 저장 버튼이 없으신 분들은요 회의록 저장 버튼 만들어줘 라고 바이브 코딩 하시면 됩니다. 말로요 클로드 코드 클로드 웹에서 요청하시면 되는 겁니다.
그렇게 해서 회의록 저장 버튼 눌러보겠습니다. 그러면 이렇게 회의록이 잘 저장되어 있는 걸 확인하실 수 있죠 크롬에서 오른쪽 보시면 폴더 모양이 있는데요. 폴더 모양 같이 천천히 눌러보겠습니다.
그러면 저장된 위치가 열립니다 어떻게 열리냐면요 여기에서 보시는 것처럼 이렇게 열립니다 잘 열렸죠.
그러면 이 회의록 파일이 있을텐데요 이 회의록 파일을요 보시는 것처럼 클로드에서 새로운 채팅을 새로 여셔야 됩니다. 똑같은 데서 하시면 안 됩니다.
새로 여셔야 됩니다. 새로 여신 다음에 플러스 버튼 눌러서 Add Files라는 버튼 파일 첨부하기 파일 추가하기 버튼 있습니다. 이거 눌러서 진행하겠습니다. 그러면 우리가 오늘 다운 받았던 회의록 파일 첨부하여 선택해서 첨부해 보겠습니다.
첨부 됐죠 그리고 나서 이 저 따라서 그대로 치시면 됩니다. 이거는 Opus 선택하시고 로우 만약에 Opus 안 되시면 Sonnet 쓰셔도 됩니다. 선택하신 후에 회의록을 정리해줘 이 때 액션 아이템을 뽑아줘 그리고 결정 사안과 미결정 사안을 구분해서 정리해줘 정리해줘 여기까지 오셨다면 여러분 다 오신 겁니다.
그냥 엔터 누르면 됩니다. 제가 지금 뒤에 첨부한 내용이 뭐냐 회의록을 정리해줘 라고 하면서 어떻게 회의록을 정리했지 회의록에 대한 기준을 제가 잡아줬습니다. 그러면 클로드가 알아서 회의록을 정리해 줄 겁니다 그렇게 되면 정말 1차적인 회의록 정리가 끝나는 겁니다.
정말 1차적인이요 근데 이거는 1차적인 회의록 정리를 뿐이지 않습니까 그래서 그 뒤에 어떤 걸 할 거냐 정리한 회의록을 보기 좋게 바꾸는 작업까지 하는 것이 오늘 실습의 마무리 일 겁니다 그래서 보시는 것처럼 조금 기다렸다가 다시 오겠습니다.
이렇게 되면 보시는 것처럼 결과물이 나왔습니다. 회의록 정리하면서 저 같은 경우는 제가 진행한 강의 내용을 녹음해서 회의록처럼 전달했기 때문에 제가 진행한 강의 내용을 녹음해서 회의록처럼 전달했기 때문에 TLDR 하면서 핵심 논의사항 결정사항 미결정사항 제가 요청한 그대로 정리를 해 주었어요. 액션플랜까지 이렇게 정리된 내용이요 이렇게 정리된 내용을 그대로 저희가 복사할 수 있습니다.
복사하려면 여기 마우스를 가져다 대시면 밑에 첫 번째 카피 즉 복사하기 버튼이 있습니다. 복사를 그대로 하겠습니다. 그리고 나서요 다시 Artifacts로 가겠습니다.
Artifacts로 가게 되면요 그리고 나서 여기서 그대로 요청하겠습니다.
그리고 나서 여기서 그대로 요청하겠습니다.
그러면 첫 번째로 진행했던 내용은 회의록을 정리해줘 이때 액션 아이템을 뽑아줘 그리고 결정사항 미결정사항 구분해서 정리해줘 라고 했기 때문에 결정사항 미결정사항 그리고 액션 플랜 이렇게 잘 정리가 되었죠 이것을 충분히 이대로도 좋지만 팀원들에게 공유하려면 좀 더 보기 좋은 게 좋겠죠. HTML이라는 것을 활용하면 시각화를 잘 해줍니다 그래서 HTML이라는 이 이름은 기억해 두시는 게 좋습니다.
바이브 코딩 하시는 분들은 아마 대부분 아실 거예요. 그런데 제가 그냥 이름만 가볍게 말씀드립니다. 혹시 이 강의가 처음으로 보는 강의일 수도 있으니까요.
그래서 HTML로 완성하시면 시각화가 잘 되기 때문에 보기가 좋습니다. 조금 같이 기다리겠습니다. HTML로 완성해 달라고 요청했더니 마치 Artifacts에서 진행했던 것처럼 오른쪽에 회의록 내용이 시각화 돼서 잘 정리됐습니다.
이거 보시면 이제 눈치채셨을 겁니다 아 내가 꼭 Artifacts로 들어와서 요청해야지만이 이렇게 HTML 만들 수 있는 게 아니었네 그냥 클로드에서 클로드 웹에서 바로 시작하고 요청해도 이렇게 HTML로 완성해줘 라고 하면 오른쪽에 미리 보기 창이 열리네 라는 거 눈치채셨을 겁니다 그래서 바이브 코딩 실습 내용 제 강의 내용을 회의록으로 정리를 해달라고 요청했기 때문에 강의한 내용에 대해서 이렇게 잘 정리를 해 주었죠.
날짜 TLDR 깔끔하게 시각화해서 잘 정리해 주었죠 결정된 사안 미결정 사안 액션 플랜까지 있습니다. HTML의 강점 하나만 짚으면서 오늘 전체 인트로 세션을 마치려고 합니다. 강점이 무엇이냐 인터랙션이 가능하다는 겁니다.
그래서 보시는 것처럼 액션 플랜이 있을 때 체크해서.
잘 수행했다 라고 이렇게 인터랙션이 가능합니다. 회의할 때 이 HTML 회의록을 띄워놓고 다음 회의 때 잘 액션 플랜 잘 처리했는지를 체크하면서 진행하면 훨씬 더 높은 시각화를 가지고 같은 이해를 가지고 회의를 진행할 수 있겠죠. 도움이 많이 될 것 같습니다.
여기까지 오셨다면 오늘 저와 함께 진행하는 인트로 세션은 끝입니다. AI 변화의 파도 조금은 감을 잡으셨나요 그렇죠 바이브 코딩 즉 말로 코딩하는 시대가 왔구나 AI로 이렇게 하면 이제 바이브 워크 말로 일도 할 수 있겠네.
여기까지 넘어가시면 됩니다. 잘 따라오셨습니다. 오늘 저와 함께 강의 들어주셔서 대단히 감사드립니다. 공부해 주셔서요.
그러면 다음 시간에 곧 이어서 뵙겠습니다. 그럼 안녕.