바이브코딩으로 웹사이트 만들기, 배포까지 클로드랑 힉스필드면 진짜 작동합니다. transcript

지금 보고 계신이 페이지 제가 실제로 운영하는 교육 과정의 모집 페이지입니다.이 이미지 영상부터 디자인, 신청 폼까지 진짜 작동합니다. 제가 한 거라곤 대화하고 수정 두 세 번 한게 다 해요. 코딩은 한 줄도 없었어요. 오늘이 페이지 처음부터 끝까지 만드는 방법 클로드와 익스필드를 활용해서 자세히 알려 드리도록 하겠습니다. 웹페이지 만들 때 진짜 어려운 건 코딩이 아닙니다. 코드는 이제 AI가 다 짜 줘요. 어려운 건 그다음입니다. 그래서 오늘은 역할을 둘로 나눕니다. 뭘 만들지 정리하는 기획은 클로드 페이블 파브가 실제로 만들고 인터넷에 띄우는 건 필드 앱 빌더가 그리고 익스필드에는 특별한게 하나 더 있습니다. 이미지랑 영상을 만드는 기능이 앱 빌더 안에 들어 있어요. 첫 화면에 흐르던 배경 영상. 그것도 페이지 만들면서 그 자리에서 생긴 겁니다. 우선 익스필드 연결부터 하겠습니다. 커넥터 메뉴로 가셔서 커스텀 커넥터 추가로 익스필드들을 연결합니다. 이렇게 한 번만 연결해 두시면 클로드에서 익스필드를 불러올 수 있습니다. 이제 본격적으로 웹페이지를 만들어 볼 건데요. 먼저 기획이 가장 중요하겠죠. 클로드 페이블 5로 쓰는 이유가 여기에 있습니다. 페이블 5는 간단하게 전진 질문에도 지금까지 나눈 대화를 다 기억해서 구체적인 결과물을 만들어 줍니다. 그래서 기획을 통째로 맡길 수 있어요. 방법은 간단합니다. 제가 만들고 싶은 내용에 대해서 이렇게 설명을 하면서 클로드가 나를 인터뷰하게 만드는 겁니다. 이렇게 한번 입력을 해 볼게요. 제가 실제로 AI 강사 양성 과정을 모집을 한번 해 보려고 했는데 제가 앱 기획 이런 걸 한 번도 안 해봤기 때문에 나한테 질문을 하나씩 던져서 필요한 정보를 정리해 줘라고 했습니다. 자, 이렇게 요청을 해 보도록 하겠습니다. 요청하시면 이제 과정 방식부터 어 저녁 시간대 핵심 멤버 프로세스 어 이런 것들을 이제 하나씩 계속 물어봅니다. 물어보신 거 그대로 내가 답변만 해 주시면 돼요. 일곱 가지 정도에 질문을 했고 이렇게 인터뷰가 완료됐고 정리된 정보 전체를 반영해서 프롬프트가 나왔습니다. 기본 정보부터 디자인 톤 페이지벌 섹션 어떤 멘트가 들어갈지 이게 정리가 됐어요. 이렇게 기획을 먼저 하는게 핵심이겠죠. 여기서 수정 사항을 있으시면 수정을 하셔도 되고 웹페이지 제작 후에 수정하셔도 무방합니다. 보통 웹페이지는 클로드 코드에서 만들거나 다른 여러 웹페이지를 만드는 기능이 있지만 저는 익스필드에서 한번 만들어 볼 거예요. 클로드 mcp로 익스필드를 불러서 요청을 할 수도 있고요. 익스필드로 들어가셔서요. 로그인 하신 후에 여기 앱이라고 돼 있는 부분이 있을 거예요. 여기를 클릭을 합니다. 화면 한가운데에 입력창이 보이죠? 클로드에서 만들어 준 프롬프트를 이제 붙여 넣으면 되는 거예요. 해당 내용 복사를 하시고 붙여 넣기 해 보도록 하겠습니다. 여기에 모델은 최신 모델들이 다 들어가 있는데 여기에서도 클로드 페이블로 진행을 해 보도록 할게요. 그리고 여기 자동 모드에는 승인 없이 자동 실행으로 하도록 하겠습니다. 요청을 해 보도록 할게요. 페이지와 이미지까지 만들어지는 과정이 나타나고 있습니다. 페이지 구조가 잡히고 이미지가 생성되고 이렇게 완성이 된 걸 볼 수 있어요. 클릭을 하시면 완성된 초안을 한번 볼 수 있어요. 이런 동영상이나 이미지 같은게 알아서 들어간게 하나의 핵심 포인트라고 볼 수 있습니다. 부분엔 제 사진을 넣어 주시기만 하면 이미지가 추가가 돼요. 그런데 첫 결과물이 다 마음에 들 수는 없습니다. 이미지를 넣어 달라고 했더니 제 얼굴이 아니라 모르는 사람 이미지가 이렇게 들어갔더라고요. 자, 이런 경우에 그냥 말로 고치시면 됩니다. 자, 이미지를 전부 다시 생성해 줘. 이렇게 하셔도 되고요. 실제 사람이 나오는 거보다는 실루엣이나 무대 조명, 마이크 이런 이미지로 교체해 줘. 이렇게 한번 요청을 해 보도록 하겠습니다. 이미지가 교체되고 있고요. 여기에서 가장 좋은 방법은 이미 잘 만들어 놓은 다른 사람의 디자인을 이렇게 캡처를 해서 두 장 농도를 한번 넣어 봤는데요. 이렇게 넣으시고 이런 인포르 그래픽이나 디자인 참고해서 추가 수정해 줘라고 요청을 했습니다. 그리고 유튜브 신샘 로고와 제 채널 이미지도 이제 캡처를 해서 넣었고요. 코리큘럼도 좀 수정을 해서 또 추가 요청을 했어요. 로고의 경우 원하는 느낌으로 딱 안 나올 때도 있어서 클로드 그리고 유튜브 로고를 추가로 넣어 주었습니다.이 정도 요청을 하고 이렇게 기다렸더니 완성본이 이렇게 나왔습니다. 훨씬 더 깔끔한 느낌으로 완성이 됐고요. 이런 영상도 추가가 됐습니다. 커리큘럼이나 내용도 다 수정이 됐습니다. 주차별로 이렇게 이미지가 들어가 있고요. 그리고 제 유튜브 신샘 채널 로고와 사이트까지 이렇게 나와 있고요. 여기에서 내용 일부 수정을 원하신다면 에디트 버튼 눌러 주시면 여기서 바로 클릭하셔서 수정을 할 수 있습니다. 이렇게 저는 한 2, 3회 정도의 추가 요청만 했을 뿐인데요. 꽤 괜찮은 웹사이트가 완성이 되었습니다. 여기에서이 첫 화면을 추가 수정 요청을 해 볼게요. 픽스필드의 장점이 영상이 들어가는거다 보니까 따로 나온 영상이 아니라 텍스트 뒤에 배경으로 영상이 들어가면 좋겠다라고 생각해서 30대 남성 대한민국 사람 이미지 그리고 강의하는 모습의 영상을 놓고 텍스트가 잘 보이게 요청을 했습니다. 요청을 했더니 첫 번째 화면이 이런 식으로 바뀌었어요. 배경 영상 하나도 어 세밀하게 요청해서 원하는 느낌의 이미지나 영상을 넣을 수 있다는 점. 이게 필드 액필더의 장점이라고 볼 수 있습니다. 이번에 제가 필드로 만든 건 이유가 있어요. 모지 페이지에서 중요한 거는 디자인도 중요하지만 신청하기 버튼 눌러 주시면 이름, 연락처 이런 걸 넣을 수 있죠. 이게 안 되면 아무리 예뻐도 모집 페이지가 아니에요. 픽스필드에서는 신청을 하면 데이터베이스에서 바로 다른 사람이 신청한 걸 확인까지 할 수 있었어요. 여기 오픈 웹사이트를 한번 눌러 보겠습니다. 실제로 이거를 웹사이트로 만들어 주는 과정이고요. 해당 링크를 그대로 복사해서 공유를 하셔도 돼요. 클로드 코드에서나 다른 사이트에서 하면 링크를 따로 만드셔야 되는데 스스필드에서는 인터넷 주소 이걸 그대로 사용하셔도 전혀 문제가 없습니다. 신청하기에서 제가 한번 신청을 해 볼게요. 자, 이름, 연락처, 이메일 간단히 한번 쓰고 신청 완료를 한번 눌러 보겠습니다. 내가 신청한 걸 보시기 위해서는 링크에서 슬어드민라고 검색을 하시면요. 관리자 키를 입력하세요라고 돼 있는데 여기에 이렇게 관리자 키를 알려 줘라고 요청을 하시면 돼요. 그러면 관리자 키가 나왔고 이거 복사해서 그대로 여기에 붙여 넣기 하시면 됩니다. 신청한 걸 이렇게 확인을 할 수 있습니다. 이게 지금 제가 휴대폰으로도 해보고 다른 PC에서도 해 봤는데요. 이렇게 잘 들어오는 거 확인을 해 보았습니다. 오히려 초보자분들도 이런 홈페이지를 어 꽤 괜찮은 디자인으로 누구나 만들 수 있고 지금 바로 사용까지 가능하다는 점 이게 핵심이라고 보실 수 있겠고요. 만약 여기에서 이제 결제까지 받고 싶다라고 하시면 결제까지 페이지에서 받는 기능은 따로 없더라고요. 신청 접수를 받고 결제 안내를 따로 보내는 방식으로 운영을 하시면 좋을 것 같아요. 토스나 페이앱 이런 결제 링크를 하나 추가하시는 거죠. 자, 그러면 이제 제일 궁금하실 비용 같은 경우는 이제 수정까지 해서 이거 하나에 쓴 크레딧이 약 400 정도였거든요. 클로드에서 익스필드를 처음 연결하면 100 크레딧을 무료로 줍니다. 짧은 페이지를 만들 때는 무료로도 충분히 하실 수 있을 것 같고요. 이제 크레딧 형태로 이제 구성이 되는데 홈페이지 제가 만든게 400 크레딧 정도가 나왔기 때문에 한번 구매해서 사용하신다면 충분히 홈페이지를 만드는데 큰 문제는 없을 거예요. 그리고 하나 더 만들고 나서는 돈이 안 나갑니다. 서버비, 호스팅 이런게 없어요. 방문자가 아무리 들어와도 유지비가 전혀 안 된다는 거죠. 홈페이지뿐만 아니라 이미지 영상 생성에도 뛰어나기 때문에 한번 구매를 해 놓으시면 계속해서 쓰시기는 편하실 거예요.이 내용은 클로드 코드로 만든 페이지입니다. 같은 프롬프트로 만들었고요. 디자인적으로의 큰 차이는 없습니다. 근데 이제 몇 가지 아쉬운 포인트가 있었어요. 첫째 이미지입니다. 클로드 코드에는 이미지를 만드는 모델이 없어서 이미지 자리가 이렇게 들어가진 않습니다. 직접 이미지를 넣어서 할 수 있지만 이미지를 자동으로 만들어 주진 않아요. 둘째 배포입니다. 아까는 이렇게 인터넷 주소가 바로 나왔었어요. 그래서 이걸 배포를 할 수 있었는데요. 지금은 이런 식으로 나오기 때문에이 페이지를 인터넷에 올리는 건 따로 요청을 하셔야 되는데 초보자분들이 호스팅하고 이런 부분이 쉽지 않더라고요. 세 번째는이 데이터입니다. 클로드 코드에서는 다른 사람이 신청한 거를 확인을 할 수가 없어요. 이걸 따로 구글 폼이든 다른 도구를 연결해서 만들어야 되는데이 부분도 상당히 허이 있어요. 이런 관점에서 완성된 페이지를 빨리 만들어서 바로 쓰는게 목적이라면 익스필드로 쓰시는게 훨씬 더 사용하기도 쉽고 퀄리티도 더 좋았다라고 생각을 합니다. 이렇게 웹페이지 그리고 앱을 한번 직접 만들어 봤는데요. 여러분도 한번 사용해 보시고 첫 페이지 한번 만들어 보셨다면 댓글에 공유해 주시고요. 설명란에 있는 링크로 시작하시면 무료 크레딧개 받고 한번 만들어 보실 수 있습니다. 참고로 여기에서 만든 앱을 제출을 하시면요. 총상금 10만 달러의 앱 대회도 진행 중이라고 합니다.