[{"data":1,"prerenderedAt":523},["ShallowReactive",2],{"blog-vibe-coding-deploy-guide":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"tags":12,"thumbnail":18,"author":19,"body":20,"_type":517,"_id":518,"_source":519,"_file":520,"_stem":521,"_extension":522},"\u002Fblog\u002Fvibe-coding-deploy-guide","blog",false,"","바이브코딩으로 만든 사이트, 인터넷에 올리는 방법 (클로드 코드·러버블·커서)","클로드 코드, 러버블, 커서로 만든 사이트를 내 컴퓨터 밖으로 꺼내 누구나 들어올 수 있게 배포하는 순서를 툴별로 정리했어요.","2026-10-02","바이브코딩",[13,14,15,16,17],"바이브코딩 배포","클로드 코드 배포","러버블 배포","커서 배포","Vercel 배포","\u002Fimages\u002Flanding\u002Fvibe-coding-og.png","날다데브",{"type":21,"children":22,"toc":503},"root",[23,39,46,81,87,180,185,191,198,300,306,346,352,357,363,420,426,431,461,467],{"type":24,"tag":25,"props":26,"children":27},"element","p",{},[28,31,37],{"type":29,"value":30},"text","바이브코딩으로 만든 사이트를 인터넷에 올리려면 ",{"type":24,"tag":32,"props":33,"children":34},"strong",{},[35],{"type":29,"value":36},"코드를 깃허브에 올리고, Vercel 같은 배포 서비스에 연결한 뒤, 환경 변수(비밀 키)를 넣어 주면",{"type":29,"value":38}," 돼요. 러버블처럼 자체 배포 버튼이 있는 툴은 버튼 한 번으로 임시 주소가 생기고, 내 도메인은 그다음에 연결해요.",{"type":24,"tag":40,"props":41,"children":43},"h2",{"id":42},"이런-상황이라면-이-글이-맞아요",[44],{"type":29,"value":45},"이런 상황이라면 이 글이 맞아요",{"type":24,"tag":47,"props":48,"children":49},"ul",{},[50,63,68],{"type":24,"tag":51,"props":52,"children":53},"li",{},[54,61],{"type":24,"tag":55,"props":56,"children":58},"code",{"className":57},[],[59],{"type":29,"value":60},"localhost:3000",{"type":29,"value":62},"에서는 잘 되는데, 친구에게 보낼 주소가 없어요.",{"type":24,"tag":51,"props":64,"children":65},{},[66],{"type":29,"value":67},"AI가 \"배포했어요\"라고 했는데 실제로는 아무 주소도 없어요.",{"type":24,"tag":51,"props":69,"children":70},{},[71,73,79],{"type":29,"value":72},"올리긴 했는데 하얀 화면이나 ",{"type":24,"tag":55,"props":74,"children":76},{"className":75},[],[77],{"type":29,"value":78},"404: NOT_FOUND",{"type":29,"value":80},"만 나와요.",{"type":24,"tag":40,"props":82,"children":84},{"id":83},"먼저-알아-둘-것-배포는-3단계예요",[85],{"type":29,"value":86},"먼저 알아 둘 것: 배포는 3단계예요",{"type":24,"tag":88,"props":89,"children":90},"table",{},[91,115],{"type":24,"tag":92,"props":93,"children":94},"thead",{},[95],{"type":24,"tag":96,"props":97,"children":98},"tr",{},[99,105,110],{"type":24,"tag":100,"props":101,"children":102},"th",{},[103],{"type":29,"value":104},"단계",{"type":24,"tag":100,"props":106,"children":107},{},[108],{"type":29,"value":109},"하는 일",{"type":24,"tag":100,"props":111,"children":112},{},[113],{"type":29,"value":114},"대표 서비스",{"type":24,"tag":116,"props":117,"children":118},"tbody",{},[119,138,156],{"type":24,"tag":96,"props":120,"children":121},{},[122,128,133],{"type":24,"tag":123,"props":124,"children":125},"td",{},[126],{"type":29,"value":127},"1. 코드 보관",{"type":24,"tag":123,"props":129,"children":130},{},[131],{"type":29,"value":132},"내 컴퓨터에 있는 코드를 인터넷 저장소에 올려요",{"type":24,"tag":123,"props":134,"children":135},{},[136],{"type":29,"value":137},"GitHub",{"type":24,"tag":96,"props":139,"children":140},{},[141,146,151],{"type":24,"tag":123,"props":142,"children":143},{},[144],{"type":29,"value":145},"2. 빌드·배포",{"type":24,"tag":123,"props":147,"children":148},{},[149],{"type":29,"value":150},"저장소의 코드를 받아 사이트로 만들어 띄워요",{"type":24,"tag":123,"props":152,"children":153},{},[154],{"type":29,"value":155},"Vercel, Netlify, Cloudflare Pages",{"type":24,"tag":96,"props":157,"children":158},{},[159,164,175],{"type":24,"tag":123,"props":160,"children":161},{},[162],{"type":29,"value":163},"3. 주소 연결",{"type":24,"tag":123,"props":165,"children":166},{},[167,173],{"type":24,"tag":55,"props":168,"children":170},{"className":169},[],[171],{"type":29,"value":172},"my-shop.vercel.app",{"type":29,"value":174}," 대신 내 도메인을 붙여요",{"type":24,"tag":123,"props":176,"children":177},{},[178],{"type":29,"value":179},"도메인 구매처, DNS 설정",{"type":24,"tag":25,"props":181,"children":182},{},[183],{"type":29,"value":184},"AI 툴은 1단계까지는 잘 도와주지만, 2단계에서 계정 연결과 비밀 키 설정을 사람이 직접 해야 해서 여기서 가장 많이 멈춰요.",{"type":24,"tag":40,"props":186,"children":188},{"id":187},"툴별로-순서대로-해-보세요",[189],{"type":29,"value":190},"툴별로 순서대로 해 보세요",{"type":24,"tag":192,"props":193,"children":195},"h3",{"id":194},"클로드-코드커서코덱스로-만들었다면",[196],{"type":29,"value":197},"클로드 코드·커서·코덱스로 만들었다면",{"type":24,"tag":199,"props":200,"children":201},"ol",{},[202,212,229,250,283],{"type":24,"tag":51,"props":203,"children":204},{},[205,210],{"type":24,"tag":32,"props":206,"children":207},{},[208],{"type":29,"value":209},"깃허브 저장소 만들기.",{"type":29,"value":211}," GitHub에서 새 저장소(New repository)를 만들어요. 공개하기 싫으면 Private으로 골라요.",{"type":24,"tag":51,"props":213,"children":214},{},[215,220,222,227],{"type":24,"tag":32,"props":216,"children":217},{},[218],{"type":29,"value":219},"코드 올리기.",{"type":29,"value":221}," 터미널에서 AI에게 \"이 프로젝트를 방금 만든 깃허브 저장소에 push 해 줘\"라고 부탁해요. 끝나면 ",{"type":24,"tag":32,"props":223,"children":224},{},[225],{"type":29,"value":226},"깃허브 웹사이트에서 파일이 정말 올라갔는지 꼭 눈으로 확인",{"type":29,"value":228},"해요. AI가 올렸다고 말해도 로그인이 안 되어 있어서 실패한 경우가 많아요.",{"type":24,"tag":51,"props":230,"children":231},{},[232,237,239,248],{"type":24,"tag":32,"props":233,"children":234},{},[235],{"type":29,"value":236},"Vercel에 연결하기.",{"type":29,"value":238}," ",{"type":24,"tag":240,"props":241,"children":245},"a",{"href":242,"rel":243},"https:\u002F\u002Fvercel.com",[244],"nofollow",[246],{"type":29,"value":247},"vercel.com",{"type":29,"value":249},"에 깃허브 계정으로 가입하고, Add New → Project에서 방금 만든 저장소를 골라요. Next.js, Vite 같은 프레임워크는 대부분 자동으로 알아봐요.",{"type":24,"tag":51,"props":251,"children":252},{},[253,258,260,266,268,274,276,281],{"type":24,"tag":32,"props":254,"children":255},{},[256],{"type":29,"value":257},"환경 변수 넣기.",{"type":29,"value":259}," 프로젝트 폴더의 ",{"type":24,"tag":55,"props":261,"children":263},{"className":262},[],[264],{"type":29,"value":265},".env",{"type":29,"value":267}," 파일에 있던 값(예: ",{"type":24,"tag":55,"props":269,"children":271},{"className":270},[],[272],{"type":29,"value":273},"NEXT_PUBLIC_SUPABASE_URL",{"type":29,"value":275},")을 Vercel 프로젝트의 Settings → Environment Variables에 똑같은 이름으로 넣어요. ",{"type":24,"tag":55,"props":277,"children":279},{"className":278},[],[280],{"type":29,"value":265},{"type":29,"value":282}," 파일은 깃허브에 올라가지 않는 게 정상이라, 여기서 따로 넣어 줘야 해요.",{"type":24,"tag":51,"props":284,"children":285},{},[286,291,293,298],{"type":24,"tag":32,"props":287,"children":288},{},[289],{"type":29,"value":290},"다시 배포하기.",{"type":29,"value":292}," 환경 변수는 넣은 뒤 ",{"type":24,"tag":32,"props":294,"children":295},{},[296],{"type":29,"value":297},"새로 배포해야",{"type":29,"value":299}," 적용돼요. Deployments 탭에서 Redeploy를 눌러요.",{"type":24,"tag":192,"props":301,"children":303},{"id":302},"러버블lovable로-만들었다면",[304],{"type":29,"value":305},"러버블(Lovable)로 만들었다면",{"type":24,"tag":199,"props":307,"children":308},{},[309,329,334],{"type":24,"tag":51,"props":310,"children":311},{},[312,314,319,321,327],{"type":29,"value":313},"편집 화면 오른쪽 위의 ",{"type":24,"tag":32,"props":315,"children":316},{},[317],{"type":29,"value":318},"Publish",{"type":29,"value":320},"를 누르면 ",{"type":24,"tag":55,"props":322,"children":324},{"className":323},[],[325],{"type":29,"value":326},"프로젝트이름.lovable.app",{"type":29,"value":328}," 주소가 생겨요. 이것만으로도 누구나 들어올 수 있어요.",{"type":24,"tag":51,"props":330,"children":331},{},[332],{"type":29,"value":333},"내 도메인을 붙이고 싶다면 프로젝트 설정의 Domains 메뉴에서 연결해요. 요금제에 따라 유료 플랜이 필요할 수 있어요.",{"type":24,"tag":51,"props":335,"children":336},{},[337,339,344],{"type":29,"value":338},"나중에 다른 개발자에게 맡기거나 직접 고치려면 ",{"type":24,"tag":32,"props":340,"children":341},{},[342],{"type":29,"value":343},"GitHub 연동",{"type":29,"value":345},"을 켜 두세요. 코드가 깃허브 저장소로 계속 복사돼서, 그 저장소를 Vercel에 연결하는 방법도 쓸 수 있어요.",{"type":24,"tag":192,"props":347,"children":349},{"id":348},"볼트boltv0로-만들었다면",[350],{"type":29,"value":351},"볼트(Bolt)·v0로 만들었다면",{"type":24,"tag":25,"props":353,"children":354},{},[355],{"type":29,"value":356},"볼트는 Netlify로, v0는 Vercel로 바로 올리는 배포 버튼이 있어요. 버튼으로 먼저 띄워 보고, 계속 고쳐 나갈 생각이면 코드를 깃허브로 옮겨 두는 게 안전해요.",{"type":24,"tag":40,"props":358,"children":360},{"id":359},"올렸는데-안-열린다면-여기부터-보세요",[361],{"type":29,"value":362},"올렸는데 안 열린다면 여기부터 보세요",{"type":24,"tag":47,"props":364,"children":365},{},[366,384,410],{"type":24,"tag":51,"props":367,"children":368},{},[369,374,376,382],{"type":24,"tag":32,"props":370,"children":371},{},[372],{"type":29,"value":373},"하얀 화면만 나와요.",{"type":29,"value":375}," 브라우저에서 F12를 눌러 Console 탭을 보세요. ",{"type":24,"tag":55,"props":377,"children":379},{"className":378},[],[380],{"type":29,"value":381},"supabaseUrl is required.",{"type":29,"value":383},"처럼 나오면 환경 변수가 빠진 거예요. 위 4번, 5번을 다시 확인해요.",{"type":24,"tag":51,"props":385,"children":386},{},[387,392,394,400,402,408],{"type":24,"tag":32,"props":388,"children":389},{},[390],{"type":29,"value":391},"새로고침하면 404가 나와요.",{"type":29,"value":393}," 리액트 라우터 같은 화면 이동을 쓰는 Vite 프로젝트라면, 모든 주소를 ",{"type":24,"tag":55,"props":395,"children":397},{"className":396},[],[398],{"type":29,"value":399},"index.html",{"type":29,"value":401},"로 보내는 설정이 필요해요. 자세한 방법은 ",{"type":24,"tag":240,"props":403,"children":405},{"href":404},"\u002Fblog\u002Fvercel-deploy-error-causes",[406],{"type":29,"value":407},"Vercel 배포가 실패할 때 가장 많은 원인 5가지",{"type":29,"value":409},"에 정리했어요.",{"type":24,"tag":51,"props":411,"children":412},{},[413,418],{"type":24,"tag":32,"props":414,"children":415},{},[416],{"type":29,"value":417},"빌드 단계에서 빨간 글씨가 나와요.",{"type":29,"value":419}," 배포 로그 맨 아래쪽 오류 문장을 복사해서 AI에게 그대로 보여 주는 게 가장 빨라요.",{"type":24,"tag":40,"props":421,"children":423},{"id":422},"혼자-하기-어려운-신호",[424],{"type":29,"value":425},"혼자 하기 어려운 신호",{"type":24,"tag":25,"props":427,"children":428},{},[429],{"type":29,"value":430},"아래 중 하나라도 해당되면, 계속 AI에게 맡기기보다 사람이 코드를 한 번 봐 주는 게 시간과 비용을 아끼는 길이에요.",{"type":24,"tag":47,"props":432,"children":433},{},[434,439,444,456],{"type":24,"tag":51,"props":435,"children":436},{},[437],{"type":29,"value":438},"같은 오류를 AI에게 다섯 번 넘게 부탁했는데 그대로예요.",{"type":24,"tag":51,"props":440,"children":441},{},[442],{"type":29,"value":443},"고치고 나면 다른 기능이 깨지는 일이 반복돼요.",{"type":24,"tag":51,"props":445,"children":446},{},[447,449,454],{"type":29,"value":448},"로그인, 결제, 회원 정보처럼 ",{"type":24,"tag":32,"props":450,"children":451},{},[452],{"type":29,"value":453},"남의 정보를 다루는 기능",{"type":29,"value":455},"이 들어가 있어요. 배포는 됐는데 다른 사람 정보가 보이면 큰일이에요.",{"type":24,"tag":51,"props":457,"children":458},{},[459],{"type":29,"value":460},"배포 비용이나 무료 한도 초과 알림이 갑자기 와요.",{"type":24,"tag":40,"props":462,"children":464},{"id":463},"막히면-이어서-마무리해-드려요",[465],{"type":29,"value":466},"막히면 이어서 마무리해 드려요",{"type":24,"tag":25,"props":468,"children":469},{},[470,472,477,479,485,487,493,495,501],{"type":29,"value":471},"날다데브는 클로드 코드, 러버블, 커서로 만들다 멈춘 서비스를 ",{"type":24,"tag":32,"props":473,"children":474},{},[475],{"type":29,"value":476},"지금 만든 그대로 이어받아",{"type":29,"value":478}," 고치고 배포해 드려요. 처음부터 다시 만들 필요는 대부분 없어요. 어떤 걸 도와드리는지는 ",{"type":24,"tag":240,"props":480,"children":482},{"href":481},"\u002Fvibe-coding",[483],{"type":29,"value":484},"바이브코딩 마무리·배포",{"type":29,"value":486},"에서 볼 수 있고, 쓰신 툴과 막힌 화면만 ",{"type":24,"tag":240,"props":488,"children":490},{"href":489},"\u002Fcontact?from=vibe-coding",[491],{"type":29,"value":492},"무료 상담 문의",{"type":29,"value":494},"로 보내 주시면 돼요. 내 도메인을 붙이는 방법은 ",{"type":24,"tag":240,"props":496,"children":498},{"href":497},"\u002Fblog\u002Fvibe-coding-custom-domain",[499],{"type":29,"value":500},"내 도메인 연결하기",{"type":29,"value":502},"에서 이어서 볼 수 있어요.",{"title":7,"searchDepth":504,"depth":504,"links":505},2,[506,507,508,514,515,516],{"id":42,"depth":504,"text":45},{"id":83,"depth":504,"text":86},{"id":187,"depth":504,"text":190,"children":509},[510,512,513],{"id":194,"depth":511,"text":197},3,{"id":302,"depth":511,"text":305},{"id":348,"depth":511,"text":351},{"id":359,"depth":504,"text":362},{"id":422,"depth":504,"text":425},{"id":463,"depth":504,"text":466},"markdown","content:blog:vibe-coding-deploy-guide.md","content","blog\u002Fvibe-coding-deploy-guide.md","blog\u002Fvibe-coding-deploy-guide","md",1791454319940]