바이브 코딩 튜토리얼! 모노레포로 멀티 플랫폼 개발하기.

Video: 바이브 코딩 튜토리얼! 모노레포로 멀티 플랫폼 개발하기.
Channel: 코드팩토리
Duration: 14m 48s
Source: subtitle (auto, ko)
Transcript:
자, 오늘 또 여러분께 도움이 될 만한 튜토리얼 시리즈로 돌아왔습니다. 자, 제가 사실 AI 유튜버가 되기 전에 완전 개발 콘텐츠만 올리던 시절에는 튜토리얼을 정말 많이 했었는데 어, 제가 AI 콘텐츠를 하기 시작하면서 깨달았어요. 아, 튜토리얼은 아무도 안 보는구나. 자, 근데 또 제가이 강사 출신으로서 이런 콘텐츠를 하는 거를 굉장히 좋아하는데 사실 제 강의들을 보시면 알겠지만 굉장히 길어요, 콘텐츠가. 근데 제가 그런 긴 콘텐츠라고서 아무도 안 보면 상처를 받기 때문에 만약에 오늘 같은 내용을 조금 더 자세하게 상세하고 더 길게 완전 풀 튜토리얼로 만들었으면 좋겠다라는 생각이 들면은 구독과 좋아요, 알림 설정 그리고 댓글에 하이보이까지 해 주시면은 제가 한번 기억을 해 보도록 할게요. 자, 오늘의 망상은 이겁니다. 자, 저는 이제 MBTI가 극이기 때문에 우리 한번 망상부터 시작을 해 볼 건데 우리가 사업가라고 한번 가정을 해 볼 거예요. 자, 그래서 우리가 어, 일단 웹 서비스를 만들어야 되죠.

그죠? 웹을 만들었는데 갑자기 이게 너무 잘 되는 거야. 그래 가지고 어 트래픽이 너무 많이 몰려 가지고 웹이 막 다운되기 시작하니까 랜딩 페이지는 우리가 스태틱하게 따로 뽑아야겠다 생각을 한 거죠. 자, 그랬는데도 트래픽이 엄청나게 몰리고 난리가 터지니까 어 그러면 사용성을 위해서 앱도 한번 만들어 봐야겠다라고 우리가 한번 가정을 해 보겠습니다. 자, 그래서 웹을 만들고 거기에서 우리가 조금 더 서버에 부담이 덜 가는 스태틱 웹을 만들고 그리고 거기에서 만약에 모바일까지 우리가 개발을 한다면은 어떤 스텝을 따라서 우리가 진행을 하면 좋을까에 대해서 한번 이야기를 해 볼 거고 어 제가 TCRII라는 프레임워크를 한번 커버를 한 적이 있는데 거기에서 이제 레퍼런스가 얼마나 중요한지 여러분이 깨닫게 되는 과정이 될 것 같아요. 자, 제가 커뮤니티를 굉장히 이제 오래 운영을 했는데 보통 여러분들이 가장 만들고 싶은 서비스를 물어보면은 보통 커뮤니티 형태가 또 되게 많아요. 사실이 커뮤니티는 진짜 돈이 안 되는데 진짜 오래 버티지 않으면은 뭐 어쨌든 여러분이 좋아하니까 저희도 커뮤니티 형태를 한번 개발해 보도록 할게요.

자, 컨셉은 로컬 취미 모임이고요. 예를 들어서 뭐 축구를 하고 싶다. 뭐 동네에서 뭐 축구 모임을 만들고 가까운 사람들한테 추천해 가지고 조인을 할 수 있도록 우리가 하는 거죠. 자, 그러면 어떻게 하면 될까? 무조건 고민할 필요 없이 무조건 그냥 웹사이트부터 만드면 됩니다. 완전 초보면 초보일수록 절대적으로 저는 웹사이트부터 만드는 거를 무조건 추천을 드릴게요. 자, 그럼 오늘 우리를 도와줄 AI를 잠깐 제가 한번 말씀을 드릴 건데 저희는 오늘 미니맥스 M2.7을 사용을 할 거고요. 자, 그 이유는 오퍼스 4.6이 SW프 벤치마크에서 57.3%를 달성을 했는데 미니맥스 M2.7이 56.2를 2를 달성을 했습니다. 자, 그럼에도 불구하고 굉장히 저렴하고 굉장히 빠른 모델이요. 그래서 우리가 개발을 할 때 큰 장점을 누릴 수가 있고 아직 우리가 한국어로 하다 보면은 뭐 답변에 뭐 일본어나 중국어가 포함돼 가지고 답변이 되는 경우가 있는데 사실 우리가 개발을 할 때는 별로 상관이 없기 때문에 여러분이 적극적으로 활용을 해 보면은 어 토큰을 어 비용을 많이 아낄 수 있기 때문에 어 한번 꼭 봐 보시면 좋고이 관련 내용은이 영상의 설명과 고정 댓글에서 한번 또 확인을 해 보세요.

자, 그러면은 요청을 한번 해 볼 건데. 자, 오늘 내용은 완전 초보를 타게팅한 건 아니고요. 환경 설정으로 돼 있고 미니맥스를 세팅을 할 수 있는 분이다라고 우리가 가정을 한번 해 볼 거예요. 자, 미니맥스 세팅법은 제가 또 미니맥스 다룬 영상이 하나 더 있거든요. 그 영상가 가지고 또 봐 보시면 될 거 같습니다. 자, 중요한 거는 자, 이렇게 미니맥스 모델이 선택이 돼 있으면은 설정이 제대로 된 거고요. 자, 우리가 일단은 플래닝부터 한번 작업을 해 보도록 할 거예요. 자, 현재이 빈 폴더에다가 소모임 서비스 MVP를 만들어 줘. 자,지도 위에 운동 모임이 핀으로 표시되고 리스트로도 조회가 가능하고 사용자가 모임을 개체 참여할 수 있는 서비스를 우리가 만들 거야. 자, 데스크탑은 왼쪽에 리스트, 오른쪽은지도 스플릿뷰를 우리가 할 거고 ANMB처럼. 자, 모바일은지도 플러스 바텀 시트 당근 마켓처럼 우리가 만들 거야. 모노레포 형태로 할 거고. 자, 이거 중요합니다. 모노래 포인트. 자, 넥스트 JS, 엠라우터, 슈퍼베이스, 카카오, 테일윈드, 그리고 데이터베이스 쪽은 슈퍼베이스를 사용을 할 거야.

제 슈퍼베이스 자바스크립트 클라이언트를 사용을 해 주고 작업을 완료한 후에 내가 또 추가로 작업해야 되는 것들이 있으면 나한테 말을 해 줘. 직접 할 수 있다면은 그럼 직접 디버깅이나 이터레이션 할 수 있는 요소들은 직접 진행을 해 줘. 자, 이렇게 정리해서 요청을 갈 거고요. 어, 저는 지금 타입스라는 걸 쓰고 있는데 제가 좀 아이디어를 말을 하면은 알아서이 타입스라는 툴이 굉장히 이쁘게 이렇게 정리를 해 주거든요. 자, 그래서 저는 바이브 코딩할 때 굉장히 많이 씁니다. 자, 조금 기다렸다 보니까 이렇게 바로 플랜이 나온 거를 볼 수가 있죠. 자, 아마도 모노레퍼에 대한 이야기를 하면은 자, 이렇게 터보. 이라는 파일이 무조건 생길 거예요. 토버리 포를 굉장히 많이 쓰거든요. 자, 괜찮습니다. 자, 그러면은 바로 우리가 진행을 시키도록 할게요. 자, 바이스 퍼미션스 모드로 일단은 구현을 하면 됩니다. 자, 구현을 하고서 자, 여기에서 이제 자, 스탠더드한 거는 제가 그냥 진행을 시키고 그 과정 속에서 중요한 포인트다 싶은 것들 여러분들한테 포인트 하웃을 해 줄게요.

자, 실행을 시키면은이 미니맥스 같은 경우에는 속도가 굉장히 큰 강점이기 때문에 정말 빠르게 돌아가는 거를 확인을 할 수가 있어요. 여러분이 진짜 체감을 할 겁니다. 자, 이게 되는 동안 여러분이 뭘 하셔야 되냐면은 당연히 슈퍼베이스 프로젝트를 만들어 주셔야 되고요. 다 생성이 되고 나면은 자, 그냥 링크를 복사해서 우리가이 프로젝트다라고 한번 어, 얘기를 해 주면 돼요. 자, 그럼 작업이 이렇게 완료된 거를 확인할 수가 있죠. 자, 그러면은 우리 새로 만든 슈퍼베이스 프로젝트를 그대로 링크를 복사해서 자, 그대로 붙여 넣게 하고요. 자, 여기서부터 여러분이 중요한게 뭐냐면요. 우리가 직접 눌러가면서 디버깅을 하거나 아니면 세팅을 하게 되면은 그 자체가 병목이에요. 이제는이 AI가 지금까지 많이 발전한 지금이 시기부터는 옛날 같으면은 우리 사람이 하는게 좀 더 조금 더 빨랐던 구간들이 있었는데 이제는 워낙에 AI가 빠르게 작업을 하기 때문에 여러분이 최대한 미니맥스에게 모든 디버까지 맡겨 줘야 됩니다.

자, 그래서 이렇게 입력을 해 주고 이렇게 해 볼게요. 자, 슈퍼베이스 MCP 사용해서 마이그레션 같은 직접 할 수 있는 작업들을 직접 실행해 달라고 요청을 하겠습니다. 자,이 과정이 굉장히 중요해요. 그리고이 다음엔 뭐 할 거냐면요. 보여 드릴 건데 이터레이션도 자동으로 돌릴 거예요. 자, 그러면은 바로 테이블과 어, 정책들 그리고 트리거까지 전부 다 생성이 되고 우리 효율적인 검색을 위해서 인덱스까지 생성이 다 된 거를 볼 수가 있죠. 자, 슈퍼베이스 연결 정보를 입력하라고 하는데 이것마저도 우리가 MCP로 적용하도록 할 수가 있어요. 슈퍼베이스 MCP 사용해서 환경 변수까지 설정해 줘라고 이렇게 요청을 하도록 할게요. 자, 그다음에 우리가 뭘 하면 되냐면요. 우리 항상 플레이라이트로 우리가 웹버깅을 하죠. 그리고 그 이유 때문에 저희가 모바일 개발 있다고 할 때도 리액트네이티브를 쓰게 될 건데 우리가 디버깅하는 루프를 완전히 AI에게 맡길 거예요. 그래서 뭐라고 하면 되냐면요. 플레이라이트를 사용해서 직접 디버인과 이터레이션을 진행해 줘.

지금까지 구현한 모든 요소들이 잘 실행이 되는지 확인하고 안 되는 부분들이 있다면은 직접 확인하고 수정해 줘라고 이렇게 요청을 하게 되면은 자동으로 이렇게 화면을 띄워서 각각 하나의 포인트들을 수정하면서 확인해 주는 걸 볼 수가 있어요. so eas지 자동으로 이게 다 돌아가게 될 겁니다.이 이 과정이 정말 중요한 이유가 여러분이 직접 디버깅하는 시간을 줄이고 AI가이 루프 안에서 반복적으로 작업을함으로써 여러분의 시간을 확보를 할 수가 있고 사람이 클릭하고 작업하고 확인하는게 병목이 되지 않도록 할 수가 있다라는 거예요. 자, 그러면 이렇게 문제들을 찾아내면서 확인하고 수정하고 있는 걸 확인 볼 수가 있죠. 자, 대기를 하니까 제가 이렇게 어, 모든 우리가 작업했던 요소들이 전부 다 나오는 걸로 볼 수가 있죠. 자, 확인을 해 보면은 자, 이렇게지도 잘 나오는 거를 볼 수가 있죠. 이렇게 확대해도 자, 리스트에 이렇게 잘 반영이 되고요. 그죠? 자, 축구 포스의 모임을 예를 들어서 선택을 했다라고 하면은 정보도 잘 나오고 우리가 지도도 역시나 볼 수 있고 정확한 위치를 알 수 있는 걸 볼 수 있어요.

저희가 요청을 했던 것처럼 참여자도 이렇게 잘 나오고요. 로그인하면 우리가 참여를 할 수 있도록 이렇게 로그인까지 다 만들어졌고 참여하기를 눌러 주면은 참여까지 진행이 됩니다. 자, 그럼 여기까지 진행을 하면 여러분들이 가져가야 되는 포인트는 우리가 AI한테 이터레이션을 시켜서 반복적으로 개선을 할 수 있도록 해야 된다라는게 포인트예요. 그죠? 자, 그리고 그 순간에 우리가 미니맥스 같이 굉장히 빠른 그리고 퍼포먼스 좋은 에를 사용을 하게 된다면은 굉장히 좋은 결과를 얻어낼 수 있다라는게 포인트인 거죠. 자, 그럼 다음 망상은 뭐였죠? 자, 우리가 이런 식으로 서비스를 이건 굉장히 다이나믹한 페이지이기 때문에 아무래도 상대적으로 서버에 부담이 조금 더 갈 수가 있습니다. 자, 그러면은 우리가 스태틱하게 만들 수 있는 영역들. 그러니까 쉽게 말하면은 랜딩 페이지 같은 것들이죠. 그죠? 랜딩 페이지는 전부 따로 굉장히 편하게 트래픽을 받도록 우리가 설정을 하게 되면은 비용을 굉장히 많이 아낄 수가 있어요.

그래서 우리 다음 망상인 랜딩 페이지 작업하기로 한번가 보도록 할게요. 서비스가 잘 구현됐으니까 아스트로 프레임워크를 사용해서 랜딩 페이지를 구현하려고 해. 실제 우리 서비스의 UI를 사용해서 랜딩 페이지를 현대적으로 구현해 줘. 그리고 최대한 트래픽을 많이 받을 수 있도록 웹사이트를 잘 최적화해 줘라고 이렇게 요청을 하게 되면요. 애초의 아스트로 프레임워크 자체가 굉장히 트래픽을 받기 편하도록 스태틱하게 만들어진 프레임크이기 때문에 여러분이 효율을 올릴 수가 있고요. 우리가 이미 서비스를 만들어 놨기 때문에 그 컴포넌트들을 그대로 갖다가 에스트로에다가 쓰도록 우리가 유도를 할 수가 있어요. 그러면은 굉장히 우리 서비스에 적합한 랜딩 페이지가 나오도록 할 수가 있거든요. 결과가 나오면 한번 봐 보도록 할게요. 자, 그러면 이렇게 기다렸을 때 작업이 완료가 되는 거 볼 수 있어요. 자, 8분 33초만에 완료가 됐고 굉장히 빠르죠? 그리고 결과는 이렇게 나왔습니다. 자, 저희가 실제 화면을 기반으로 해 달라고 했다 보니까 우리 스크린샷과 비슷한 느낌을 실제로 직접 만들어 가지고 이렇게 붙여 넣어 버린 걸로 볼 수가 있어요.

자, 그래서 이렇게 됐고요. 자, 우리 기능들도 이렇게 잘 구현이 돼서 보이는 거를 확인할 수가 있습니다. 자, 이렇게 시작하세요라고 하면서 이런 스텝바이 스텝 과정까지 들어가고요. 자, 이렇게 소모입 시작하기에서 로그인 바로 들어갈 수 있도록 되는 거를 볼 수가 있죠. 자, 그래서 여러분이 랜딩 페이지 만들 때 순서를 무조건 맵을 먼저 만들고 기능을 먼저 만든 다음에 그 모을 기반으로 랜딩 페이지를 만들어 달라고 하면은 굉장히 그냥 바로 랜딩 페이지를 작업하고 들어가는 것보다 훨씬 더 설득력이 있는 페이지를 만들 수가 있습니다. 그죠? 이해가 되시죠? 자, 그래서이 순서대로 여러분이 진행을 했으면 좋겠고요. 저희 다음 망상은 뭐였죠? 자, 이제 여기서도 너무 잘 돼 가지고 이걸로 우리가 앱도 만들어야 된다라고 우리가 한번 또 가정을 해 볼게요. 우리가 만든 웹서비스를 기반으로 이제는 앱을 만들려고 해 리액트 네이티브를 사용을 할 건데 지금 우리가 플레이라이트로 웹서비스를 검증을 했던 것처럼 리액트네이티브도 마찬가지로 반복적으로 AI가 직접 검증할 수 있도록 이터레이션 루프를 돌려주고 완성이 되고 나면은 웹과 앱이 완전히 동일한 기능들을 수행하고 있다는 거를 반복해서 확인하고 검증해 줘.

그리고 개선해 줘. 자라고 이렇게 이야기를 하게 되면은요. 모노래프로 우리가 이미 설정을 해 놨기 때문에 바로 실행을 할게요. 자, 모노래프로 설정을 해 놨기 때문에 알아서 우리 독립적인 폴더에다가 우리 리액트네이티브 앱을 설정을 할 겁니다. 자, 그리고 제가 굳이 리액트 네이티앱을 고른 이유가 저건 저는 개인적으로 어 개발 손을 손코딩을 하던 시절에 플러터한 프레워크를 정말 좋아했는데 렉트네이티브가이 AI로 이터레이션 루프를 형성을 해 주기에는 훨씬 더 유리해요. 아무래도 리액트 기반이다 보니까. 자, 그렇기 때문에 꼭 리액이네이티브를 저는 사용하는 거를 추천을 드리겠습니다. 자, 그리고 왜이 순서대로 가느냐? 자, 첫 번째로 자, 우리가 웹을 만드는게 앱을 만드는 것보다 절대적으로 편합니다. 그거는 이제 사람 기준에서 그렇다면 뭐 애 기준에서도 똑같긴 하겠죠. 그죠? 자, 그다음에 우리가 TCRI 프레임워크에서 제가 항상 강조를 하는게 레퍼런스가 중요하다고 제가 말씀을 드리잖아요. 자, 우리가 가장 빠르게 일단은 기능 하나 만들어 놓고 나면요.

그걸 기반으로 우리가 다른 거를 만들었을 때 훨씬 더 완성도와 높은 결과를 받을 수 있다는 거는 모든 AI를 사용하는 분들이 이제 다 알죠. 그죠? 그렇기 때문에 일단은 하나를 프레임워크를 완성을 시켜 놓고요. 동시에 개발하지 마시고 일단 웹을 완성을 시켜 놓고 그걸 기반으로 서로 대조해 가면서 완성도를 높이라고 우리가 요청을 하면은 훨씬 더 종도가 높게 나오도록 우리가 할 수가 있습니다. 자, 그래서 오늘 튜토리얼의 포인트는 그거였고요. 웹트네이티브 앱 완성되는 거 확인하고서 우리가 또 마무리해 보도록 할게요. 자, 이터레이션까지 자동으로 돌도록 했더니 자, 이렇게 시뮬레이터도 다 자동으로 켜지고 로그인까지 화면이 나온 거를 볼 수가 있죠. 자, 그럼 로그인 한번에 볼게요. 자, 로그인 누르면은 자, 이렇게 잘 들어가진 거 볼 수 있고 지도까지 잘 나오는 거 볼 수 있죠? 그리고 저희가 원래이 모바일에서는 리스트 아래 있고 그리고 위에 지도가 있도록 저희가 요청을 했었죠. 자, 누르면은 자, 이렇게 상세 페이지까지 다 이동이 되고요.

그죠? 완전 똑같이 구성이 됐죠? 자, 그래서 이번 튜토리얼에서 여러분들이 가져가야 되는 내용은 뭐냐면요. 일단 첫 번째로 가장 구현하기 쉽고 가장 AI로 이터레이션하기 쉬운 프레임워크로 여러분들의 아이디어를 구현을 하세요. 그게 저희는 넥스트 JS였고 그거를 우리가 플레이라이트 사용을 해서 사용이 사람 개입 없이 자동으로 이터레이션이 돌도록 저희가 설정을 했었죠. 최대한 MCP를 써서요. 자, 그다음에 그걸 기반으로 우리가 랜딩 페이지를 만들고 리액트네이티브 앱을 만들게 되면은 레퍼런스가 이미 존재하기 때문에 우리가 그걸 기반으로 서로 일치하는지를 계속 검증을 하면서 우리가 업데이트를 해 나갈 수가 있다라는 겁니다. 그렇게 되면은 우리가 적은 인력으로도 굉장히 적은 토큰을 사용하고 굉장히 빠르게 우리 시간을 최대한 아끼면서 사람이 개입해야 되는이 순간들을 아끼면서 작업을 할 수가 있게 된다는 거죠. 거기에다 추가로 만약에 우리가 미니맥스 같은 굉장히 빠른 AI까지 사용을 하게 되면은 훨씬 더 효율적으로 우리가 구현을 할 수가 있겠죠.

자, 그래서 미니맥스 여러분이 관심 있으시다면 영상 설명과 고정 댓글에서 프로모션 확인해 보시고요. 적극적으로 활용하면서 여러분이 어, 많은 서비스 제작하는 계기가 됐으면 좋겠습니다. 자, 미니맥스의 경우 여러분이 다양한 요금제를 사용해 보실 수가 있는데 기본적으로 스타터 플러스 맥스 이렇게 여러분이 확인해 볼 수가 있고요. 거기에 그 위로 가는 거는 울트라 프라이싱이 하나 더 있습니다. 자, 근데 스탠더드 플랜에는 없고요. 자,이 스탠더드 플랜으로 여러분이 고려할 수 있는 다음 플랜은 하이 스피드 플랜인데 하이스피드 플랜 같은 경우에는 굉장히 빠른 속도를 자랑합니다. 그래서 요즘 속도 자체가 시간이 금인이 시대에, AI 시대 여러분이 더 빠르게 작업을 하고 싶으면은 하이 스피드 플랜을 추천을 드리고 일단 기본 플러스 하이스피드 플랜으로 시작을 해 보시는 걸 저는 추천을 드리고 싶어요. 자, 그러면은 얼마나 빠른지 여러분이 충분히 체감을 할 수가 있을 거고 플러스 사이 스피드 플랜을 통해서 자, 고작 40달러에 5시간 동안 4,500 리퀘스트를 보낼 수가 있고 거의 두 배 가까이 빠른 속도를 자라갑니다.

자,이 스탠더드 플랜들이 보통 50토큰/세컨이라면은 하이스피드 플랜 같은 경우에는 100/세컨을 자랑하기 때문에 여러분이 훨씬 빠른 속도로 바이브 코딩을 할 수 있다라고 기억을 해 주시면 될 거 같아요. 자, 오늘 제가 준비한 영상 여기까지고요. 이번 영상이 좋았다면은 구독과 좋아요 설정 그리고 댓글에 할보까지 해 주시면은 제가 다음에 더 좋은 영상으로 찾아뵙도록 하겠습니다. 쏘as지.