기획·디자인·배포까지 클로드로 웹 서비스 하나 통째로 만드는 법 | EP.09
관심사 유튜브 채널 전일 영상 번들로 수집한 YouTube 자료. 채널: AI 사용성연구소, 게시: 2026-06-10 19:48 KST.
핵심 메타데이터
- URL: https://www.youtube.com/watch?v=8dV-vS7uZEk
- Video ID:
8dV-vS7uZEk - Channel: AI 사용성연구소
- Raw: 2026-06-10-yt-8dv-vs7uzek-기획-디자인-배포까지-클로드로-웹-서비스-하나-통째로-만드는-법-ep-09
기존 관련 문서 연결
- 확인 필요
설명
00:00 클로드 코드로 사주 서비스 만들기 소개 02:15 개발 환경 세팅 및 클로드 코드 연결하기 05:40 AI 사주 서비스 핵심 프롬프트 설계 11:20 웹 화면 인터페이스 디자인 및 구현 18:45 오류 수정 및 최종 배포하기 24:30 나만의 AI 서비스 확장 팁
TRANSCRIPT
저희는 오늘 코딩 한 줄 안 쓰고 4주 팔자 서비스를 실제 인터넷에 올려 보겠습니다. 아이디어만 있었어도 도메인, 서버, 디자이너도 없어도 됩니다. AI한테 이런 서비스 만들어 줘 했더니 30분 만에 진짜 URL을 생기게 할 수 있습니다. 자, 누구나 들어갈 수 있는 실제로 들어가는 서비스로요. 딱네 단계만 만드시면 됩니다. 자, 첫 번째 단계는 G스텍의 슬래시커맨드로 PRD 즉 제품 기획서를 만듭니다. 자, 두 번째 단계는 그 PRD를 클로드 디자인에 던져서 동작하는 HTML을 뽑습니다. 세 번째 단계는 그 파일을 브라우저로 열어서 진짜 돌아가나 확인합니다.네 번째 단계는 넬릭 파일이에 드래그 앤 드롭면 끝입니다. 자, 왜 4주 팔자를 만드냐면 한국에서 점 4주 관련은 연간 수천만 건입니다. 결과면도 시각적으로 관해서 데모 임팩트가 크고요. 수익화 가능성도 충분합니다. 자, 그럼 지금부터 하나씩 보여 드리도록 하겠습니다. 자, 우선 첫 번째입니다. G스택입니다. 혼자서 팀 다섯 명처럼 검증하는 도구인데요. 자, 머릿속에 사업 아이디어가 개가 있다고 칩시다. 근데 그걸 실제로 검증하려면 얼마나 걸릴까요? 기획자가 PRD를 써야 합니다. CEO 시각으로 시장성 우선 순위를 검토하는데요. 엔지니어가 아키텍처를 잡습니다. 디자이너가 UI 플로우를 짜죠. QA가 시나리오를 검증합니다. 최소 팀 네명에서 다섯 명인데 최소 몇 주가 걸려요. 아직 아무것도 만들어지지 않았는데 말이죠. 자, 그 모든 역할을 슬래시커맨드로 빙이시킨게 바로이 G스택입니다. 게리텐 와이스 콤비네이터의 CEO Airbnb 드롭스 스트라이프를 키운 그 사람이죠. 자,이 올해 3월에 자기 클러드 코드 셋업을 오픈 소스로 풀었는데요. 자, 16일 만에 깃업 스털 5만 개를 찍은 이유가 있습니다. 자, G스텍은 클러드 코드 역할을 심어 주는데요. 자, 슬래시오피스 아월은 브레인스토밍 파트너, 플랜 CO 리뷰는 CEO 시각으로 기획 검토. 그래서 저희는 오늘이 두 가지 슬래시 커맨드를 우선 활용할 예정이고요. 자, 혼자 이걸 돌리면은 이제 여러 검토를 거친 PRD가 나옵니다. 그러니까 빠르게 실험해 보고 싶은 아이디어 10열 개가 있는 사람에게 G쥐스택은 최강 무게입니다. 아이디어 하나를 팀단위 수준보다 더 높게 혼자 수분으로 줄어들어서 검증을 할 수 있습니다. 그래서 오늘 쓸 거는 오피스 아워랑 플랜 CEO 리뷰 어떻게 쓰는지 바로 보여 드리겠습니다. 자, 그럼 우선 G스텝 설치부터 한번 알아볼 텐데요. 어, 설치 방법은 굉장히 간단합니다. 그냥 G스택이라고 인터넷에 검색하신 다음에 요렇게 기터브 코드가 있습니다. 네.이 기터브 코드를 그대로 복사를 해서이 클로드에 와서 집어 넣은 다음에 G스텍 설치해 줘. 자, 요렇게 입력을 해서 설치를 완료를 하시면 되겠습니다. 물론 이게 지금 설치가 안 된다고 하면은 여기에 있는이 게이 여기 MD라고 써 놨습니다. 네. 그래서 여기서 어떻게 설치하는지이 방법을 천천히 읽어 보시면서 따라해 보시면은 다 설치를 누구나 쉽게 할 수가 있습니다. 자, 그럼 이렇게 G스텍을 설치를 완료를 했으면은 슬래시오피스 아워라고네 입력을 해 보시면 됩니다. 네. 그래서 오피스워를 입력한 다음에 AI에게 이제 어떤 아이디어인지 물어보는 겁니다. 그래서 여기에 간단한 아이디어를 집어넣어 주면은 어이 아이디어들을 굉장히 비판을 해 주면서 한편으로 또 좋은 방향으로이 Y 콤비네이터의 실제로 코치 같이 저에게 디렉션을 주면서 더 좋은 방향으로 이끌어 줍니다. 자, 그럼 AI가 이제 설계 문서 초안을 작성해 주고 뭐 핵심 기능, 사용자 플로우, 뭐 기술 스택 체한, 뭐 리스크까지 뭐 요런 것들을 기본적으로 추천을 굉장히 잘해 줍니다. 자, 그러면 이렇게 저한테 질문을 해 줍니다. 네, 지금 보시면은 자, 골 모드가 먼저 나옵니다.이 프로젝트의 목적이 무엇인가? 4주 팔자 해석 웹 서비스. 자, 그래서 같은 아이디어라도 진짜 회사에서 만들 거야. 와, 주말에 만 재밌게 만들 거야는 완전히 다른 질문이다. 자, 그래서 저한테 요런 식으로 지금 질문들을 해 줍니다. 그래서 좋은 점, 나쁜 점. 네. 그래서 지금 어떤 시장을 네가 타겟을 하고 있냐? 어 나는 실제로 지금 어 돈을 벌고 싶다라고 엔터를 쳐 주면은 이제부터 굉장히 날카로운 질문들을 해 주기 시작합니다. 자 그러면 Y 콤비네이터의 6대 질문을 하나씩 이제 가져온다고 합니다.네 지금부터 얼마나 저의 아이디어가 형편 없는지 저는 그 내용을 바탕으로 이제 피드백을 받고 조금 더 좋은 아이디어의 방향성을 잡아갈 수 있는 겁니다. 자, 그래서 G스텍에서는 이렇게 아이디어 정리를 하고 도움을 받는데 굉장히 큰 도움을 받을 수 있습니다. 자, 그러면 이제 저한테 어 물어봅니다. 네, 솔직하게 지금 D를 골라라 레커멘데이션까지 나옵니다. 네. 그래서 그냥 베타자가 지금 제 방문 중이다. 어, 내가 보고 싶었다 수준. 네. 레커맨드를 해 보시면은 이제 추천을 해 나갑니다. 자, 그 네. 그러면 꽤나 긴 인터뷰가 이제 끝났고 자 그래서 제가 이제 PRD 작성을이 폴더 안에다가이 서비스 엣지를 잡아서 해 달라고 요청을 한번 해 보겠습니다. 그래서 저희는 지금 여기서이 작성된닷m 파일을 들고 이제 클로드 웹에 가서 저희는 디자인 폴더를 만들 겁니다. 자, 그럼 이제 제가 여기서 플랜 CEO 모델을 한번 해 보도록 하겠습니다. 네. 그래서 C 리뷰를 입력을 해서 네, prd. MD를 확인해 줘라고 입력을 해 보겠습니다. 그럼 저기 지금 폴더 안에 있는이 prd.md를 이제 읽어 보고 확인을 하고 리뷰를 진행을 해 주겠죠. 빠르게 MVP를 먼저 만들어야 해. 자, 좋습니다. 자, 그러면 이제 요렇게 PRD 작성이 다 완료가 되었습니다. 자, 그러면 저희가 이렇게 클로드 와서요.이 웹 버전에서만 반드시 현재 디자인이 가능합니다. 자, 그래서 이렇게 클로드 디자인으로 넘어오셔서요. 여기서 저희가 포t춘이라고 동일하게 입력을 해 보겠습니다. 네. 그리고 디자인 시스템은 지금 현재 네. 아무런 디자인 시스템도 사용하지 않고네 하이달리티를 우선은 만들어 달라고 요청을 해 보겠습니다. 자 그러면 여기에 이제 저희가 아까 작성했던 파일을 이렇게 업로드를 해 놓고요. 네. PRD를 바탕으로 디자인 제작해 줘. 네. 이제 입력을 해 놓으면은 이제 클로드 디자인이 알아서 디자인을 다 해 줍니다. 그래서 저희는이 디자인이 끝나고 나면은 여기에 쉐어를 눌러서 저희는 이제 엑스포트를 해서 지금 현재 어떤 포맷으로 다운로드 받으실 것인가 하면은 저희는 이제 이렇게 파일로 다운로드를 받아서이 폴더에다가 집어 넣어 주면 됩니다. 자, 그러면은 우선은 지금 4주 디자인 방향을 잡는다라고 합니다. 자, 그러면 우선은 네, 전체 흐름네 디바이스 프레임 네, 디바이스 프레임 어떻게 할 거냐? 네, 그냥 우선은 어, 우선은 웹으로 먼저 웹 모바일 네. 요렇게 입력을 해 놓고 자, 그다음 비주얼 톤은 어떻게 할 거냐? 네. 네가 알아서 좀 골라줘라. 네. 그리고 어떤 시각화가 좋을 거냐. 네. 이런 것들도 잘 모르겠으면은 decide이드 for me 이렇게 누르시면 됩니다. 네. 해서 그다음에 컨티뉴 누르시면은 네. 이제 실제로 디자인이 다 제작이 됩니다. 근데 여기서 그냥 만들어지는게 아니라 HTML, CSS 이런 것들이 다 어 만들어지고 있습니다. 그래서 지금이 PRD를 바탕으로네 4주 팔자 서비스를 만들어야 된다라고 하면은 긴 프롬프트 칠 필요가 없이 우리가 이미이 PRD를 다 만들어 놨기 때문에 그냥 제작 요청을 진행하시면 됩니다. 자, 근데 단점은이 시간이 조금 오래 걸리긴 합니다. 그리고 클로드 디자인이이 토큰이 생각보다 굉장히 많이 먹기는 하나 그냥 클로드 코드에 내가 프롬프트를 넣고 제작을 해 달라고 하는 것보다 디자인이 더 이쁘고 그다음에 더 세련되게 잘 나옵니다. 이걸로 활용을 하면은. 자, 그럼 이렇게 디자인을 만들어 줬는데요. 네, 꽤나 괜찮은 아이디어가 나온 거 같습니다. 이직 결정에 관련된 4주 팔자 아이디어를 만들어 줬는데 자, 그래서 디자인도 어느 정도 나쁘지 않은 거 같습니다. MVP 모델로서는. 네. 그래서 지금 다니는 직장네 AX랩스로 입력을 해 보겠습니다. 그래서 직문은 현재 어, 나는 기획이다 하고 다음을 누르고 이직 제한을 어디서 받았냐? 네. 메켄지 컨설팅. 네. 직무는 네. 영업으로 받았다. 네.이 서비스 이직 결정 하나만 답합니다. 신년 운세는 보지 않습니다. 하고 그죠? Y 콤비너트에서는 딱 하나에 집중해서 돈을 벌 수 있는 방법을 창고를 마련해라. MVP를 만들어서 너무 거창하게 만들지 말고 빠르게 만들어서 5일 안에이 시장의이 아이디어를 던져보고 테스팅을 해 봐라. 요런 것들이 이제 어떻게 보면이 스타트업에서 바이블 같은 이야기들이죠. 자, 그래서 이제 생년 월일 여기서 네, 제가 요렇게 한번 입력을 해 보겠습니다. 남하고 네, 지금 미시 13시에서 15시 네주 보기를 누르면 네. 이렇게 지금 명리 분석 중이라는 프로그래스바가 지금 흘러가면서 지금 이렇게 나왔습니다. 그래서 지금은 이직 제한은 당신의 기운 흐름과 맞물립니다. 가는 쪽을 추천합니다. 자, 이렇게 본 이유는 명리학 근거가 자, 이러하다. 지금 가라, 머물라. 미루라 이런 것들이 나오죠. 그래서 상세 분석을 5,900원을 내고 내면은 카드 정보하고 자 이런 것들을 내고 나면은 자 이렇게 4주 분석 지금 보시는 것처럼 요런 식으로 굉장히 어 잘 나오는 걸 볼 수가 있습니다. 의묘해서 지금 어떠한 것이 드러납니다. 명리와 근거는 이러하며 자시기 분석 자 언제 지금 새 환경에서 더 좋은지에 대해서 와 이런 것도 지금 추천을 굉장히 잘해 주고요. 행동 권고 어떻게 해라이 결과가 도움이 됐나요? 하고 그죠 바이러를 만들기 위해서 친구한테 이렇게 지금 카카오톡으로 보내기까지 다 만들어졌습니다. 자 근데 지금 이거는 그냥 디자인만 여기서 만들어진 거라 실제로 뒷단에 이제 데이터베이스라든지 API라든지 이런 것들은 어 추가적으로 연결해서 만들면 됩니다. 자 그래서 우선은 저희가 이렇게 셰어를 눌러서 어 샌드투 클로드 코드가 또 있습니다. 네. 그래서 이렇게 클로드 코드로 보내면은 여기에 다운로드 집 인스테드도 있는데 그냥네 다운로드 파일을 받아서 넣는게 제일 빠르고 싶습니다. 네. 그리고 다운로드 받으신 다음에네 본인이 원하시는 아까 만들었던 포춘 거기에다가 요렇게 어 집 파일을 넣어 주시면 됩니다. 자 그럼 이렇게 집 파일이 나왔는데네 요것도 이렇게 집 파일을네 해제하셔서네 해제하시고 휴시통으로 버리면은 자 이제 여기에 디자인이 다 접목이 됐습니다.네 그러면 지금 이렇게네 html로도 나왔습니다.네 네. 자, 근데 지금 이렇게 모바일 웹뷰가 이런 식으로 나왔는데 네. 요런 것들을 이제 없애 달라고 한번 요청을 해 보도록 하겠습니다. 이게 아무래도 클로드 디자인에서 그대로 넘어온 거라서 어, 수정 요청을 해 주면 됩니다. 제 수정 요청은 지금 모바일 뷰로 나오고 있는데 어, 웹 버전으로 만들어 줘. 모바일 친화적으로 지금. 네. 그리고 여기서 좀 좋은 점은 여러분들이 스크린 캡처를 할 수 있다는 건데 자 이렇게 스크린 캡처를 한 다음에 그래서이 테두리 부분을 없애 달라고네 올리시면 됩니다. 하얀색 박스가 나오고 있음. 자, 요렇게 이제 수정 요청을 해 주면은 어, 알아서 수정을 클로드 코드가 다 해 줍니다. 네. 그래서 바이브 코딩을 할 때 팁은 내가 원하지 않는 결과가 나오면은 사진을 찍어서 업로드하고 이렇게 변경을 해 달라고 요청을 하시면 됩니다. 네, 그러면 요렇게 하얀 그리드 박스가 지금 사라졌고 네. 요런 식으로 지금 네. 어디서나 열었을 때 웹 페이지로 열리게끔 어 수정 요청을 다 해서 어 잘 나온 거 같습니다. 예. 근데 지금 여기서 실제로 만들 때는 네. 여기서 이제 제가 요런 식으로 사주 보기를 누르면 지금 프로그래스바가 이렇게 흘러가고 있죠. 네. 근데 여기서 이제 지금 실제로 안 나오는 것들이 뭐냐면은 네. 여기서 이제 페이먼츠 붙였거나 그다음에 실제로 네. 4주 팔자의 내용이 진짜로 제대로 나오지 않을 겁니다. 왜냐면 그냥 인터넷 검색이 나오는 것도 아니고 여기 뒤에다 API를 붙인 것도 아니기 때문에 이제 그런 데이터베이스를 실제로 연결을 하려면은 무엇이 필요한지 물어보면 됩니다. 제로 연결하려면 상용화 어떤 것들이 추가적으로 필요한지 평가하고 알려줘. 네. 자, 요렇게 이제 물어보면은 클로드 코드가 알아서 어떤 것들이 필요한지 다 말해 줍니다. 그래서 지금 페이먼츠도 붙이세요. 여기에 이제 데이터베이스도 필요합니다. API, 언어 모델 API도 필요합니다. LM API도 넣으세요. 자, 이런 이제 다양한 것들을 이제 말을 할 텐데 그런 것들은 그냥 클로드 코드가 시키는 대로 정말 하시면은 여러분들이 서비스 배포 정말 다 잘하실 수 있습니다. 그리고 페이먼트 붙일 때는 어 제가 가장 추천드리는 거는 포트 1이라고 있습니다.네 포트원네 저도요 포트을 사용을 하고 있는데요. 어 포트원이 여러분들 그 입력을 해서 도입을 하는 것까지 가장 빠르고 제일 쉽습니다. 어 정말 쉽기 때문에 어 그냥 여러분들이 로그인을 해서네 아이디를 만드시고 그 그다음에 도큐먼트가 있습니다.네 네. 개발 가이드. 그래서이 모듈 결제를 읽어 보시면서 만들면 되는데 여기서 제가 완전 또 꿀팁을 드리겠습니다. 자, 여러분들 잘 하는 법 모르시잖아요. 개발도 자, 그러다 보니까 그냥 여기에 클로드 크롬 익스텐션을 다운로드 받으세요. 네. 그래서 크롬 익스텐션 다운로드 받으신 다음에 여기서 도대체 뭘 해야 되는지 알려 달라고 하면 됩니다. 도대체 뭘 해야 하는 거야? 나 왕초보라서 몰라. 알려 줘 쉽게. 자, 요렇게 입력을 하면은 지금이 왼쪽에 보고 있는 화면을 클로드가 확인을 하고 저에게 굉장히 어, 하는 방법을 쉽게 알려 줍니다. 네. 그리고 제가 로그인을 해서 들어간 상태여서도 상태에서도 여러분들이 그 포트원을 그냥 어 켜 놓은 상태에서 크롬 익스텐션 켜고 하는 방법 모르겠다. 네가 여기다가 다 도입을 해서 알려 달라라고 하면은 클로드가 다 알려줍니다. 네. 굉장히 쉽게 연동을 할 수가 있습니다. 자, 그러면 런치닷.닷 MD를 지금 어, 글을 작성을 해 줬습니다. 자, 그 상용화까지 지금 가려면은 4에서 6주 정도 걸리고 초기 비용은 150에서 300만 원 정도 든다. 우선 사업자 등록증, 통신 판매 신고서 그렇죠? 그리고 결제 감행점. 네. 이런 것들 다 그냥 포트원 쓰시면은 어 굉장히 쉽게 연결할 수 있고 이니시스 같은 것들을 연결하는게 정 절대 어렵지 않습니다. 너무나도 쉽고 그냥 가이드대로 따라하시면은 다 할 수가 있습니다. 자 실제 빌드 현 프로토타입 가짜네 스펙 MD 기준 자 이런 것들이 지금 엔트로픽 API 연결까지 다 필요하다.네 네. 그래서 가장 큰 리스크는 무엇이고? 네. 여기에 지금 이렇게 런치닷 MD에 다 뭐가 필요한지 작성을 해 줬습니다. 네. 그러면은 이제 여기에 필요한 내용들을 하나하나씩 만들어 가면은 정말 누구나 서비스를 다 만들어서 런칭을 할 수 있게 되는 거겠죠? 네. 정절대 어렵지 않습니다. 자, 그러면은 우선은 요렇게 지금 제가 실제로 웹사이트를 하나, 제품을 하나 기획을 해서 제작을 해 보았고요. 자, 그럼 이제 이거를 제가 드래그 앤 드롭겠죠? 그래서 G 파일로 만들어 주기만 하면 됩니다. 자, 그래서 이렇게 지금 압축 파일을 만들어서요. 그다음에 이제 우리가 이제 이동할 곳은 넬릭 파일라는 곳입니다. 그래서 넬리 파일가 뭐냐면 다운로드이 HTML 파일을 이제 브라우저로 실제로 열어서 그냥 드래그 앤 드론만 하면은 네, 실제 URL이 생기면서 여러분들이 서비스 온라인 세상에 배포를 할 수 있게 되는 겁니다. 이렇게 검색을 하시고요. 자, 그다음에 랜리파이에 들어오셔서 아이디 생성을 하시고 이렇게. 자, 그러면 이제 너무나도 간단합니다. 네, 여기서 이제 뉴 프로젝트를 애드 뉴 프로젝트를 이렇게 누르시고 그다음 여기에 드래그 앤드롭을 하라고 나오죠? 네. 그러면 아까 만들었던 요거를 드래그 앤 드롭을 요렇게 해 주면은 끝입니다. 그래서 여기에 리네임 앤디플로 하면은 네. 이제 다시 리네이밍이 되고 바로 상용화 가능한 웹사이트가 만들어집니다. 네, 이렇게 굉장히 간단하고요. 그래서 여기 눌러서 들어가면 이제 이렇게 작동이 실제로 잘 되고이 웹사이트에 들어오면 이제 누구나 정말로 사용할 수 있게 있는 URL이 만들어진 겁니다. 아까는 로컬에서만 돌아갔는데 이제 실제로 온라인 세상에 올라간 겁니다. 이게 네. 그다음에 이제 MCP 연결하는 방법을 알려 드리겠습니다. 너무나도 간단합니다. 네. 그냥 넬리파이 MCP 설치해 줘. 검색해서. 자, 요렇게만 입력을 하면은 이제 넬리파이 MCP를 그냥 연결을 할 수가 있습니다. 자, 그러면 지금 넬리파이 MCP가 설치가 완료되었다라고 합니다. 네. 그래서 지금 여기이 프로젝트에서 지금 현재 MCP 설치가 되었는데 근데이 MCP를 확인하려면은 종료를 했다가 다시 들어와야 됩니다. 네. 엑시을 했다가 다시 클로드라고 입력을 한 다음에 여기에 MCP라고 치면은 이제 여기 보시는 것처럼 로컬 MCP가 나옵니다. 자, 근데 지금 로컬은 내 폴더 지금 내가 만들어 놓은이 포춘이라는 폴더 안에서만 넬리파이가 작동이 되는 겁니다. 자, 그래서 우리는 그걸 원하지 않죠. 자, 그래서 저는 네, 넬리파이 MCP를 글로벌로 설정해 줘라고 입력을 하면 됩니다. 자, 그러면 글로벌이 뭐냐면 지금이 폴더만 하는게 아니라이 클로드 전체에 내 컴퓨터 전체 이걸 먹이는 겁니다. 그래서 내가 어떤 폴더에서 열어도이 낼리파이 MCP가 네, 연동이 돼서 나올 수 있게끔 만드는 겁니다. [콧방귀] 네. 그러면 이제 MCP가 글로벌로 유저스코프로 설정이 되었습니다. 네. 엑시을 했다가 네. 다시 클로드를 입력을 한 다음에 슬래시 MCP를 치면은 네. 자, 이렇게 넬리파이가 이제 유저 MCP라고 해서 글로벌 설정이 지금 다 완료가 된 겁니다. 네. 그래서 아까 처음에 최초에이 토큰 값을 발급받으라고 하는데 네.요 토큰값을 여러분들이이 순서대로만 진행을 해 주시면 됩니다. 네. 그래서 링크를 여기다가 이렇게 입력을 하고 여기에서 지금 토큰을 만들려고 나오죠? 네. 그래서 여기서 뉴 어세스 토큰을 이제 여러분들이 생성을 하시면 됩니다. 네. 그래서 여기다 그냥 4주 팔자라고 입력을 하고 그다음에 제너레이 토큰을 누르시면 됩니다. 자, 그럼 누르면 여기에 이렇게 번호가 나오는데요. 자, 요걸 이렇게 복사를 하셔서 그다음에 다시 돌아와서 네, 여기 다 클로드 제이슨에서 항목을 추가해라는게 나오죠. 네. 그래서 여기다가 해줘. 해줘라고 입력을 한 다음에 아까 복사했던 네. 복사했던 네. 요거를 카피를 해서 여기에 요렇게 넣어 주면 됩니다. 그러면 지금 이제이 토큰 키값이 여기에 들어가는 겁니다. 수를 추가했다라는게 나오고 클로드 코드를 다시 재시작하라고 나오는데 슬래시익 ex하고 클로드 입력을 하면은 자 이게 지금 다 어 검증이 되고 연결이 된 겁니다.네 네. 넬리파이 지금이 프로젝트하고 연결이 잘 되었는지 확인해 줘. MCP. 자, 이렇게 입력을 해 보면 됩니다. 자, 그러면 델리파이에 지금 프로젝트 등록이 잘 되었다라는게 나오고 있습니다. 네. 그래서 이제 어 연결되어서 웹사이트를 조작하고 배포를 할 수 있다라고 합니다. 자, 그럼 이제 제가 여기서 어 수정 요청을 한번 해 보겠습니다. 여기에 밑에 모바일에서 우리가 클릭을 해야 된다고 하면은 지금 여기 이게 버튼이 위에 있죠? 네. 그래서 이렇게 클릭을 한 다음에 네.이 스크린 캡처를 하고 네. 모바일에서 버튼 클릭이 위치가 이상하다. 어, 버튼은 항상 어, 하단에 있어야지 수정해 줘. 어, 전체적으로 이런 문제점들이 있네. 해결해. 예. 그냥 이렇게 입력을 하면 알아서 수정을 해 주고 그다음에 제가이 수정된 내용을 이제 넬리파이에 배포해 하면은 자동으로 지금 현재 라이브 프로젝트를 수정을 해 줍니다. 물론 여기에 기터이라는 걸 연결을 해서 진행을 하고 그다음에 거기에 이제 풀 위퀘스트도 만들고 그다음에 내가 이제 뭐 스테이징 서버나 이런 것들을 만들어야 하지만 저희는 이제 완전 지금 기초 레벨에서 만들고 있다 보니까 그냥 가장 쉬운 방법 엘리 파일을 연결을 해서 진행을 하시고 그다음에 이제 내가 이게 스케일을 점점 해 간다라고 하면은 클로드 코드한테 기터브 연결해서이 서비스를 운영하는 방법을 알려 달라고 요청을 해 주시면 알아서 또 자동으로 하는 방법을 다 알려줍니다. 입니다. 그래서 정말 내가 코딩을 몰라도 이런 식으로 하나하나 해 가면서 트라이언앤 에러를 많이 만들어 보셔야 됩니다. 그러면 지금 문제 해결이 다 잘 되었습니다. 네. 그래서 요렇게 누르면은 버튼이네 제가 요렇게네 늘렸다 줄였다 해도 지금 제가 어떤 디바이스 모바일에서 열어도 지금요 버튼이 하단에 잘 고정이 되게끔 수정이 완료가 되었습니다. 자 그러면 제가 이제 여기에 어 넬리파이 MCP로 배포해 줘. 라고 입력을 해 주면 됩니다. 자, 그러면 이렇게 지금 현재 프로덕션 배포까지 완료가 되었다라는게 나옵니다. 네. 그래서 실제로 들어가서 지금 다시 한번 보도록 하겠습니다. 네. 요렇게 지금 링크를 타고 들어가면 네. 업데이트가 잘 되었죠. 네. 근데 사실이 링크를 여러분들이 보시는 것처럼 지금 센세이셔널 그 죄놈이라고 나오는데 여기에 이제 여러분들이이 프로젝트에 커스텀 도메인을 연결하시면 됩니다. 네. 그래서 여기 도메인 매니지먼트가 있는데 여기에 보시면 도메인 매니저트 애드 도메인이 있습니다. 그래서 여기서 도메인을 사셔도 되고 그 원래 가고 있던 도메인을 여기에다가 연결을 해서 또 여러분들이 원하시는 대로 진행을 하시면 됩니다. 자, 그래서 오늘 저희가 정리를 해 보자면은 오늘 한 건 세 가지입니다. 네. G스택으로 저희가 아이디어를 한번 확장을 시켜 보고 그다음에 PRD.닷m를 MD를 만들어 봤습니다. 그리고 클로드 디자인으로 HTML을 실제로 디자인을 만들어 보았고요. 그리고 넬리 파일이로 드로벌해서 실 배포까지 해 보았습니다. 저들이 이제 실제로 데이터베이스를 연결하고 이런 이제 기업 연결하고 해야 되는 것들이 있는데 제가 그거는 다음 시간에 한번 제대로 어떻게 사용을 하면 되는지에 대해서 한번 알아보도록 하겠습니다. 네. 그럼이 영상이 도움이 되셨다면 하실게 있죠? 구독과 좋아요 꼭 부탁드리겠습니다.