Video: 바이브코딩? AI로 투자 앱을 만들어봤다!
Channel: 노마드 코더 Nomad Coders
Duration: 12m 31s
Source: subtitle (auto, ko)
Transcript:
오늘은 프로그래밍에 대한 모든 것을 잊고 완전 초보자인 척하며, 현재 시장에서 가장 인기 있는 AI 도구인 Vault를 유료로 구매하여 AI만으로 앱을 만들어 볼 생각입니다. 새로운 vzero repol it 에이전트와 lovable을 사용해서 제가 어디까지 갈 수 있는지, 그리고 프롬프트를 작성하는 것만으로 실제로 유용한 무언가를 만들 수 있는지 확인해 보려고 합니다. 개발자의 시대가 끝났고 새로운 AI 모델이 나올 때마다 개발자가 대체될 거라는 식의 클릭베이트 제목에 질렸습니다. 코딩을 배우는 초보자들이 코딩을 배우는 건 의미가 없다고 말하는 마케팅 캠페인 때문에 의욕을 잃는 것도 안타깝습니다. 그런 캠페인은 프롬프트 강좌나 GPT 마스터챗 책을 팔려는 회사들이 돈을 주고 홍보하는 거죠. 저는 지금이 프로그래머가 되거나 코딩을 배우기에 가장 좋은 시기라고 생각합니다. 개발자들의 황금기가 곧 도래할 거라고 생각합니다. 이 부분은 나중에 더 자세히 다루겠습니다. 그럼 우리가 만들려는 건 뭘까요? 제가 할 일 목록 앱이나 랜딩 페이지 같은 걸 요청하면 AI가 작동하는 코드를 제공해 줄 수 있다는 건 알지만, 어차피 직접 구글에서 검색해서 찾을 수 있는 코드이니 의미가 없죠.

그래서 우리가 만들려고 하는 건 개발자가 고용될 만한 앱, 즉 여러 구성 요소가 있는, 할 일 목록 앱보다 훨씬 더 복잡한 앱입니다. 사용자가 계정을 만들고 주식을 검색하고 관심 목록에 추가할 수 있는 투자 앱을 만들어 보려고 합니다. 간단하지는 않지만 그렇다고 어렵지도 않습니다. 하루 이틀 정도면 만들 수 있는 앱입니다. 첫 번째 도구는 Repol Agent입니다. 월 25달러, 연 180달러로 저렴하지는 않습니다. Repol Agent 웹사이트에 가서 주식 추적 앱을 만들고 싶다고 적었습니다. 사용자는 이메일과 비밀번호로 계정을 만들고 주식을 검색하고 관심 목록에 추가할 수 있어야 하며, 차트, 가격, 회사 정보 등 주식 관련 정보를 볼 수 있는 페이지에 접속할 수 있어야 한다고 적었습니다. 그런 다음 '프롬프트 개선' 버튼을 클릭했습니다. 이 버튼을 누르면 모델에 맞게 프롬프트가 더 구체화됩니다. 영어 로 설명하는 데 서툴기 때문에 이 기능이 꽤 유용하다고 생각합니다. 이제 모든 것이 완성될 때까지 계속 기다려야 합니다.

드디어 완성되었습니다. 괜찮네요. 이제 가입해서 확인해 보겠습니다. 잘 된다면 이메일과 비밀번호를 입력하고 등록해야겠네요. 비밀번호 확인도 해야 하고요. 꽤 괜찮네요. 좋아요, 등록 완료! 이제 진짜 되는 것 같네요. 좋아요, 로그인해 볼게요. 로그인 버튼을 클릭했는데, 쾅! 오류가 나네요. 기억하시겠지만 저는 초보자인 척하고 있어요. 코드에 대해 아무것도 모르는 척하는 거죠. 좀 더 기다려 봐야겠어요. 좋아요, 로그인에 성공했네요. 멋지네요! 하지만 로그인하기 전에 Cloud.net 주식을 검색해 볼게요. 보시다시피 또 오류가 나네요. 등록하고 로그인은 되는데 주식 검색이 안 되네요. 좋아요, 다시 로그인해 봐야겠어요. 로그인 버튼을 클릭해 보고 주식을 검색해 봤는데 Cloud.net 주식을 찾지 못했어요. 이상하네요. 'net' 같은 주식은 검색이 안 되네. 다시 검색해 봤더니 cloud.net을 찾았다고 나오네요. 하지만 믿을 수가 없어요. 주식 API에 가서 확인해 봐야겠어요. 주식 API는 없고 그냥 가장 흔한 주식들만 보여주네요.

제가 원하는 게 아니에요. 그래서 저는... 어떤 주식이든 검색할 수 있도록 하려면 Y Finance 같은 API를 사용해야 한다고 가정해 보겠습니다. 작동하는지 확인해 보죠. 하드코딩된 주식들이 삭제된 것 같네요. 좋습니다. 이제 넷(Net)이나 코인베이스(Coinbase) 같은 주식을 다시 검색해 보겠습니다. 여전히 안 되네요. 맙소사, 안 돼요. 주식 검색이 안 됩니다. 그래서 코드를 수동으로 수정해야겠습니다. 자, 이제 계속 진행하거나 다른 기능이 추가되었는지 확인해 보겠습니다. 이제 넷(Net)을 검색할 수 있습니다. 하지만 관심 목록에 또 오류가 있네요. 넷 클라우드(Net Cloud), 슬레이(Slay), 넷플릭스(Net Netflix)를 관심 목록에 추가했는데, 맙소사, 또 오류가 있습니다. 이 오류를 복사해서 붙여넣고 오류가 수정될 때까지 기다려야겠습니다. 아, 정말. 기다리고 또 기다리고... 아, 지루해지네요. 이제 데이터베이스에 저장되는 것 같습니다. M으로 차트를 만들었네요. 나쁘지 않습니다. API를 사용해서 회사 정보도 얻었네요.

좋습니다. vz로 시도해 봅시다. Versel에서 만든 월 20달러짜리 제품을 개발해 보겠습니다. Nextjs, Tailwind, Yahoo Finance를 사용하여 이 애플리케이션을 만들라는 프롬프트를 붙여넣겠습니다. 이제 v0가 생각해서 Nextjs 애플리케이션을 만들어 줄 겁니다. 좋습니다. 시작해 볼까요? 아, 기다리는 거 정말 싫지만, 얼마나 걸리는지 기다려 보겠습니다. 이번에는 잘 될 것 같은 예감이 드네요. 잘 되기를 바랍니다. 잘 될 것 같아요. 완료되었습니다. 좋습니다. 로그인 및 회원가입 양식이 생겼네요. v0는 데이터베이스를 제공하지 않아서 작동하지 않는 것 같습니다. Reple은 제공하는데 말이죠. v0는 데이터베이스를 제공하지 않는 것 같네요. 회원가입을 클릭해 봤는데 아무 일도 일어나지 않네요. 이런. v0로 수정하기를 클릭해 보겠습니다. 문제가 뭔지 확인해 보죠. 좋습니다. 완료된 것 같네요. 대시 보드로 다시 가 보겠습니다. 또 다른 오류가 발생하네요. 무슨 문제일까요? 대시보드 페이지에 이상한 오류가 있네요.

정말 이상합니다. 다시 시도를 클릭해서 더 나은 응답을 받을 수 있는지 확인해 보겠습니다. 이제 교체되고 있습니다. 코드에 있는 몇몇 부분이 제대로 작동하지 않을 것 같네요. 시간 낭비인 것 같습니다. 자, 다시 해 볼게요. 대시 보드로 가보니 여전히 오류가 있네요. 음, 어떻게 해야 할까요? 프롬프트를 복사해서 새 프로젝트를 만들어 보겠습니다. 아마 거기에 문제가 있는 것 같아요. 완전히 새로운 프로젝트를 만들고 같은 프롬프트를 사용해서 제대로 작동하는지 확인해 보겠습니다. 네, 잘 작동하네요. 거의 똑같은 결과가 나옵니다. 다시 SL 대시보드로 가보죠. 주식이 몇 개 보이는데, 실제 데이터가 아닌 것 같습니다. 클라우드 플레어를 검색해 볼게요. 역시 실제 데이터가 아니네요. 애플을 클릭해 보겠습니다. 차트가 보이네요. 음, 이 차트는 쓸모가 없네요. 실제 데이터로는 제대로 작동하지 않는 것 같습니다. 이제 종목 코드로 주식을 검색할 수 있도록 해 보겠습니다. Yahoo Finance의 mpm 패키지를 사용해야 한다는 것을 알겠네요.

세상에, 그냥 코드를 덮어쓰고 있네요. Yahoo Finance와는 아무런 관련도 없는 것 같습니다. 대시 보드로 가보죠. 아, 맙소사, 또 같은 오류가 나네요. 좋아요, vzer는 끝났습니다. 다음으로 넘어가죠. 다음은 Vault입니다. 새로 나온 서비스인데, 기대가 꽤 큽니다. SuperBase와의 연동 기능이 있어서 정말 궁금하거든요. Vault는 무료 플랜과 토큰을 선불로 결제하는 유료 플랜이 있는데, 월 20달러부터 시작합니다. 자, 전에 사용했던 프롬프트를 그대로 사용해서 어떻게 되는지 지켜보죠. 다음 JS 프로젝트를 시작합니다. Radic을 설치하고 있는데, Shat CN에 필요한 것 같네요. O 페이지가 생성됐습니다. 사용자 상태도 표시되고요. 이제 대시 보드 페이지와 심볼 페이지를 생성하고 있습니다. 좋습니다. 이제 다 된 것 같네요. 홈페이지로 가보니 프롬프트 시작이라고 나옵니다. 인덱스 페이지는 안 생성됐네요. 괜찮습니다. SL 대시보드로 가보죠. 검색이 되네요. 주식을 검색할 수 있습니다. 검색해 볼게요.

그런데 오류가 발생합니다. 주식을 검색 중입니다. 자, 이제 고쳐보죠. 맙소사, 모든 게 다시 쓰여버리겠네요. 아, 이제 희망은 사라졌습니다. 기대가 컸는데, 이제 실망스럽네요. 자, 이제 검색이 되네요. 아니, 오류를 고칠 수 없네요. 계속 오류가 뭔지 안다고 하면서 페이지를 다시 쓰고 있습니다. 완료. 안 됐네요. Lovable로 가보죠. Lovable이 제대로 작동하길 바랍니다. Lovable도 무료 체험이 가능하고, 유료 플랜은 월 20달러부터 시작합니다. 자, 모두에게 알려줬던 프롬프트를 복사해서 붙여넣겠습니다. 자, 이제 엔터 키를 누르고 진행해 보죠. 모두 비슷해 보이네요. 보시다시피 모두 같은 것을 사용하고 있는 것 같습니다. 같은 AI 모델을 사용하는 것 같네요. 모두 CLA를 사용하는 것 같습니다. 적어도 L은 Yahoo Finance도 설치해야 한다는 것을 알고 있네요. 멋지네요. 자, 이제 Nextjs 애플리케이션이 아닌 TSX 앱을 만들고 있습니다. Nextjs가 아닌 애플리케이션을 만들라고 했으니 괜찮습니다.

Nextjs는 제대로 처리하지 못할 것 같거든요. 자, 모든 페이지를 만들고 있습니다. 대시 보드 멋지네요. 아마 이게 맞을지도 몰라요. 그리고 SuperBase와의 연동 기능도 있는데 정말 써보고 싶어요. 네, 해볼게요. 오류가 발생했네요. 앱에서 오류가 발생했고 빌드가 실패했다고 나와요. 왜 그럴까요? 알겠습니다. 수정해 볼게요. 좋아요. 보세요. 로그인 화면이 보이네요. 어? 무슨 일이지? 인덱스 페이지가 사라졌네요. 어? 없어졌네. 무슨 일이죠? 어떻게 해야 할지 모르겠어요. 아무것도 안 보여요. 세상에. 자, 이제 마무리할게요. 잘 안 됐네요. 어쨌든 끝냈어요. 고마워요, 러블. 정말 고마워요. 솔직히 이 영상이 이렇게 될 줄은 몰랐어요. Repit Agent가 제일 나았지만, 그것조차도 실제 사용자가 사용할 수 없는 걸 만들었잖아요. 개인용 도구라면 모를까, 스트림 리드 앱에서 사용자가 직접 사용할 수 있는 앱으로 바꾸는 건 정말 긴 여정이에요. 사용 경험 자체도 엉망이었어요. 도구들이 오류를 수정하려고 계속 시도하다가 실패하고 제가 지불한 크레딧을 낭비하는 동안 그냥 앉아서 기다리고 또 기다렸어요.

게다가 이런 도구들을 사용하면서 즐거움을 잃어버렸다는 것도 깨달았어요. 제가 실제로 아무것도 만들지 않았다는 사실을 깨닫고 나니, AI 코드 리뷰어가 되기 위해 돈을 지불하고 있다는 생각이 들었습니다. 저는 코드 리뷰를 정말 싫어하는데, AI가 작성한 코드를 디버깅하는 데 시간을 낭비할 생각은 전혀 없습니다. 제가 공정하지 못했고 AI에게 너무 일반적인 지시를 내렸다고 말할 수도 있겠죠. 프로젝트를 단계별로 나누어 " 폼을 만들고 가운데 정렬하세요" 또는 " 버튼을 만들고 검은색 배경에 흰색 텍스트를 넣으세요"와 같이 구체적으로 지시했어야 했다고 말할 수도 있습니다. 하지만 그렇게까지 세부적이고 구체적으로 지시할 바에는 차라리 코드를 직접 작성하는 게 낫습니다. 폼을 가운데 정렬하는 데 필요한 몇 줄의 CSS 코드를 작성하는 데 드는 시간과 비용은, 그런 지시를 작성하고 응답을 기다리고 AI가 실수를 할 때마다 일일이 봐주는 데 드는 시간과 비용보다 훨씬 적습니다. 긍정적인 면은 이 결과가 개발자에게 황금기가 도래하고 있다는 제 의견에 더욱 확신을 준다는 것입니다.

왜냐하면 이러한 도구들이 개발자의 생산성을 높여준다고 말할 수 있기 때문입니다. 물론 제가 더 기술적인 지시와 더 구체적인 작업을 제시했다면 이러한 도구들이 더 효과적이었을지도 모르겠습니다. 두 번째로, 좀 더 낙관적인 관점에서 보면, 저처럼 조급하지 않은 사람들이 있을 것이고, 그들은 AI가 작동하는 프로토타입을 만들 때까지 인내심을 갖고 지켜볼 것입니다. 그리고 그 프로토타입은 스타트 업으로 성장하여, 유지보수, 문제 해결, 새로운 기능 추가를 위해 실제 개발자를 고용해야 할 수도 있습니다. 세 번째로, 과거에 비해 이러한 도구 덕분에 생성되는 코드의 양과 속도는 엄청납니다. 코드가 많아질수록 더 많은 문제가 발생하고, 이는 곧 더 많은 개발자 일자리로 이어지기 때문에 개발자들도 이득을 봅니다. 결론적으로, AI 덕분에 개발자들은 생산성이 향상되거나, AI로 구현된 MVP를 유지보수하거나 확장하기 위해 고용되거나, AI로 인해 발생하는 문제를 해결하기 위해 투입될 것입니다. 그러니 과장된 광고에 현혹되지 마세요.

당신은 괜찮을 겁니다. 어쨌든 당신은 예전에는 토니 스타크였지만, AI 덕분에 아이언맨이 된 겁니다. 안녕.