https://tilnote.io/_next/static/chunks/pages/vibecoding-01c188454ab16ffd.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6182],{35620:(e,t,s)=>{"use strict";s.d(t,{A:()=>o});var a=s(37876),r=s(14232),l=s(18042),d=s(89099),n=s(48230),i=s.n(n),x=s(58471),c=s(69327);let o=function({message:e=!1,business:t=!1,isExpand:s=!1,marginBottom:n="1rem"}){let o=(0,d.useRouter)(),[m]=(0,r.useState)({general:"틸노트 | 사업자등록번호: 147-10-02214 | 통신판매업: 2022-서울중랑-1696 | 대표: 문지학 | 개인정보책임자: 문지학",contact:"이메일: [email protected] | 전화: 0507-0178-0131",address:"주소: 서울특별시 중랑구 양원역로 92, 104동 702호",notice:"틸노트가 직접 판매하는 서비스 외에 크리에이터가 판매하는 경우 틸노트는 통신판매중개자이며, 통신판매의 당사자가 아닙니다. 상품, 상품정보, 거래에 관한 의무와 책임은 거래 당사자 각자에게 있습니다."}),[h,g]=(0,r.useState)(s);return(0,a.jsxs)("div",{className:"pb-32 sm:pb-0",style:{marginBottom:n},children:[e?(0,a.jsxs)("div",{style:{marginBottom:"1rem"},children:[(0,a.jsx)("div",{className:"mb-10",children:(0,a.jsx)("div",{className:"mb-10",children:(0,a.jsx)("strong",{children:"틸노트 (tilnote.io)"})})}),(0,a.jsx)(l.A,{variant:"contained",onClick:()=>o.push("https://tilnote.io/register"),children:"무료로 사용하기"})]}):null,t?(0,a.jsx)("footer",{children:(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{style:{display:"flex",cursor:"pointer",borderRadius:"8px",border:"1px #bdbdbd solid",justifyContent:"space-between",alignItems:"center"},className:"p-3 mb-4",onClick:()=>g(!h),children:[(0,a.jsx)("div",{children:"틸노트 사업자 정보"}),h?(0,a.jsx)(c.A,{}):(0,a.jsx)(x.A,{})]}),h?(0,a.jsxs)("div",{className:"text-gray-600 text-sm space-y-2 mb-8",children:[(0,a.jsx)("div",{children:m.general}),(0,a.jsx)("div",{children:m.contact}),(0,a.jsx)("div",{children:(0,a.jsx)("a",{href:"https://open.kakao.com/o/sfLiUf1f",className:"text-indigo-600 hover:underline",children:"틸노트 카카오톡 문의하기"})}),(0,a.jsx)("div",{children:m.address}),(0,a.jsx)("div",{className:"text-xs text-gray-500 mt-4",children:m.notice}),(0,a.jsx)("div",{className:"text-xs text-gray-500",children:"본 서비스는 생성형 AI 기술을 활용합니다."}),(0,a.jsx)("div",{className:"mt-4 pt-4 border-t border-gray-200",children:(0,a.jsxs)("div",{className:"flex gap-4",children:[(0,a.jsx)(i(),{href:"/terms",className:"text-gray-500 hover:text-gray-700",children:"이용 약관"}),(0,a.jsx)(i(),{href:"/privacy",className:"text-gray-500 hover:text-gray-700",children:"개인정보처리방침"}),(0,a.jsx)(i(),{href:"/refund",className:"text-gray-500 hover:text-gray-700",children:"환불 정책"})]})})]}):null]})}):null]})}},58471:(e,t,s)=>{"use strict";var a=s(29563);t.A=void 0;var r=a(s(94471)),l=s(37876);t.A=(0,r.default)((0,l.jsx)("path",{d:"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"}),"ExpandMore")},66313:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>A});var a=s(37876),r=s(14232),l=s(77328),d=s.n(l),n=s(48230),i=s.n(n),x=s(16684),c=s(35620),o=s(36438);let m=s(65364).env.NEXT_PUBLIC_VIBECODING_PRESALE_BOOK_ID||"",h="《비개발자의 첫 서비스》 얼리버드 사전등록",g="vibecodingLandingCtaView";function p(e,t){return{action:e,variant:"VIBECODING_LANDING_V1",source:"vibecoding-presale-landing",pageId:"vibecoding-landing",pageTitle:h,referrer:"u">typeof document?document.referrer:"",pageUrl:window.location.href,keyword:t,round:7}}function j(e){o.A.post("/stats/cta-log",p("click",e)).catch(()=>{})}let u=["“아이디어는 있는데 개발자가 없어서 못 해.”","터미널 화면만 봐도 무섭다.","“나는 문과라서…” 하고 접어둔 게 있다."],b=["내 손으로 만든 서비스 URL이 생긴다.","막혀도 AI에게 물어서 스스로 빠져나온다.","“어? 또 만들 수 있겠는데?”라는 자신감이 남는다."],y=[{free:"“이 도구 신기해요” 구경으로 끝",book:"끝까지 따라하면 진짜 배포된 결과물이 남음"},{free:"잘 되는 부분만 보여줌",book:"막히는 지점\xb7에러\xb7멘붕을 다루는 게 핵심"},{free:"개발자가 개발자 언어로 설명",book:"비개발자 언어로 번역, “당연한 것” 안 건너뜀"},{free:"구경꾼이 정리한 정보",book:"실제 수익 나는 서비스를 만든 사람의 실전"}],N=[{part:"Part 0",title:"시작하기 전에 — 겁부터 내려놓기",tag:null}

1,{part:"Part 1",title:"작업실 차리기 — 환경 세팅",tag:"배관"},{part:"Part 2",title:"30분 만에 첫 화면 띄우기",tag:"첫 성공"},{part:"Part 3",title:"안전벨트 매기 — Git & GitHub",tag:"배관"},{part:"Part 4",title:"AI와 대화하는 법 — 핵심 스킬",tag:null},{part:"Part 5",title:"화면 만들기 — Next.js 프론트엔드",tag:null},{part:"Part 6",title:"진짜 일하는 서버 — Node.js 백엔드",tag:null},{part:"Part 7",title:"AI 기능 붙이기 — 서비스의 심장",tag:"성공"},{part:"Part 8",title:"막혔을 때 빠져나오기 — 생존 스킬",tag:"배관"},{part:"Part 9",title:"기억하는 서비스 — 데이터베이스",tag:"배관"},{part:"Part 10",title:"회원 기능 — 로그인 만들기",tag:"배관"},{part:"Part 11",title:"세상에 내놓기 — 배포",tag:"큰 성공"},{part:"Part 12",title:"그다음 — 키우고, 고치고, 돈 벌기",tag:null}],f=[{q:"코딩을 정말 하나도 몰라도 되나요?",a:"네. 이 책의 전제가 그것입니다. 코드는 AI 코딩 도구가 짜고, 당신은 방향을 잡고 막히는 구간(설치, 계정, API 키, 배포, 에러)을 통과하는 법을 배웁니다. 개발자들이 “당연하다”며 건너뛰는 ê·¸ 구간을 가장 정성껏 다룹니다."},{q:"따라하는 데 별도 비용이 드나요?",a:"AI 코딩 도구와 서버(배포) 비용으로 월 몇천 원~2만 원 수준의 실습 비용이 들 수 있습니다. 책에서 요금 폭탄을 피하는 법까지 함께 안내합니다."},{q:"분량은 얼마나 되나요?",a:"두꺼운 책이 아닙니다. 완독해서 결과물이 남는 것을 최우선으로 설계했습니다. 하나의 서비스를 0부터 배포까지 만드는 여정 하나로 구성됩니다."},{q:"얼리버드로 사면 언제 읽을 수 있나요?",a:"공개된 파트(Part 0~1)는 바로 읽을 수 있고, 이후 파트는 집필되는 대로 같은 책에 업데이트됩니다. 얼리버드 구매자는 추가 비용 없이 전체를 받습니다."},{q:"환불이 되나요?",a:"네. 전체 파트가 공개되기 전까지는 100% 환불해 드립니다. 부담 없이 시작하세요."}];function v(e){return e.toLocaleString("ko-KR")}function w({position:e}){let[t,s]=(0,r.useState)(""),[l,d]=(0,r.useState)("idle"),[n,x]=(0,r.useState)("");return m?(0,a.jsxs)("div",{className:"mt-8 flex flex-col items-center",children:[(0,a.jsx)(i(),{href:`/books/${m}`,children:(0,a.jsxs)("button",{onClick:()=>j(`purchase-${e}`),className:"px-8 py-4 bg-emerald-600 hover:bg-emerald-700 text-white text-lg font-bold rounded-xl shadow-lg transition-colors",children:["얼리버드로 시작하기 — ",v(19900),"원"]})}),(0,a.jsxs)("p",{className:"mt-3 text-sm text-gray-500",children:["정가 ",v(29e3),"원 \xb7 전체 공개 전까지 100% 환불"]})]}):"done"===l?(0,a.jsxs)("div",{className:"mt-8 max-w-md mx-auto bg-emerald-50 border border-emerald-200 rounded-xl p-6 text-center",children:[(0,a.jsx)("p",{className:"text-emerald-800 font-bold text-lg",children:"사전등록이 완료되었습니다 \uD83C\uDF89"}),(0,a.jsx)("p",{className:"text-emerald-700 text-sm mt-2",children:"얼리버드가 열리면 이메일로 가장 먼저 알려드릴게요."})]}):(0,a.jsxs)("form",{onSubmit:s=>{if(s.preventDefault(),!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(t)){d("error"),x("이메일 형식을 확인해 주세요.");return}d("sending"),o.A.post("/subscriptions",{email:t,pageTitle:h,authorId:"62786a31832df874c8962804",type:"email"}).then(()=>{d("done"),x(""),j(`preregister-${e}`)}).catch(e=>{d("error"),x(e.response?.data?.error||"등록에 실패했습니다. 잠시 후 다시 시도해 주세요.")})},className:"mt-8 max-w-md mx-auto w-full",children:[(0,a.jsxs)("div",{className:"flex flex-col sm:flex-row gap-3",children:[(0,a.jsx)("input",{type:"email",value:t,onChange:e=>s(e.target.value),placeholder:"이메일을 입력해 주세요",className:"flex-1 px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 text-gray-900"}),(0,a.jsx)("button",{type:"submit",disabled:"sending"===l,className:"px-6 py-3 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-60 text-white font-bold rounded-xl transition-colors whitespace-nowrap",children:"sending"===l?"등록 중…":"얼리버드 사전등록 (무료)"})]}),"error"===l&&(0,a.jsx)("p",{className:"mt-2 text-sm text-red-600 text-center",children:n}),(0,a.jsxs)("p",{className:"mt-3 text-sm text-gray-500 text-center",children:["사전등록자에게 얼리버드 ",v(19900),"원 (정가"," ",v(29e3),"원) 오픈을 가장 먼저 알려드립니다. 스팸은 보내지 않아요."]})]})}let A=()=>((0,r.useEffect)(()=>{!function(){try{if(window.sessionStorage?.getItem(g))return;window.sessionStorage?.setItem(g,"1")}catch{}o.A.post("/stats/cta-log",p("view","vibecoding")).catch(()=>{})}()},[]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(d(),{children:[(0,a.jsx)("title",{children:"비개발자의 첫 서비스, 바이브코딩으로 만든다 | 틸노트"}),(0,a.jsx)("meta",{name:"description",content:"코딩 한 줄 몰라도, AI와 대화해서 첫 웹 서비스를 직접 만들어 출시합니다. 환경 세í

1Œ…부터 배포까지, 비개발자가 포기하는 구간을 절대 건너뛰지 않는 실전 책."}),(0,a.jsx)("meta",{property:"og:title",content:"비개발자의 첫 서비스, 바이브코딩으로 만든다"}),(0,a.jsx)("meta",{property:"og:description",content:"코딩 0에서 내 서비스 출시까지. AI와 대화로 만드는 첫 웹 서비스 실전 가이드."})]}),(0,a.jsx)(x.A,{}),(0,a.jsxs)("div",{className:"bg-white min-h-screen",children:[(0,a.jsx)("section",{className:"bg-gray-900 text-white",children:(0,a.jsxs)("div",{className:"container-large py-20 md:py-28 text-center",children:[(0,a.jsx)("div",{className:"inline-flex items-center px-4 py-1.5 bg-emerald-500/15 border border-emerald-400/40 rounded-full text-emerald-300 text-sm font-medium mb-6",children:"얼리버드 선판매 \xb7 한정 가격"}),(0,a.jsxs)("h1",{className:"text-3xl md:text-5xl font-bold leading-tight md:leading-tight max-w-3xl mx-auto",children:["코딩 한 줄 몰라도,",(0,a.jsx)("br",{}),(0,a.jsx)("span",{className:"text-emerald-400",children:"내 첫 서비스"}),"를 직접 만들어 출시한다"]}),(0,a.jsx)("p",{className:"mt-6 text-lg text-gray-300 max-w-2xl mx-auto",children:"AI와 대화하며 진짜 웹 서비스를 0부터 배포까지 만드는 실전 책. 개발자들이 “당연하다”며 건너뛰는 설치\xb7계정\xb7에러\xb7배포 구간을 절대 생략하지 않습니다."}),(0,a.jsx)(w,{position:"hero"})]})}),(0,a.jsxs)("section",{className:"container-large py-16 md:py-20",children:[(0,a.jsx)("h2",{className:"text-2xl md:text-3xl font-bold text-gray-900 text-center",children:"이 책이 약속하는 변화"}),(0,a.jsxs)("div",{className:"mt-10 grid md:grid-cols-2 gap-6 max-w-4xl mx-auto",children:[(0,a.jsxs)("div",{className:"bg-gray-50 border border-gray-200 rounded-2xl p-6 md:p-8",children:[(0,a.jsx)("p",{className:"text-sm font-bold text-gray-400 mb-4",children:"BEFORE — 지금의 당신"}),(0,a.jsx)("ul",{className:"space-y-3",children:u.map(e=>(0,a.jsxs)("li",{className:"flex items-start text-gray-600",children:[(0,a.jsx)("span",{className:"mr-2 mt-0.5 text-gray-400",children:"✕"}),e]},e))})]}),(0,a.jsxs)("div",{className:"bg-emerald-50 border border-emerald-200 rounded-2xl p-6 md:p-8",children:[(0,a.jsx)("p",{className:"text-sm font-bold text-emerald-600 mb-4",children:"AFTER — 책을 끝낸 당신"}),(0,a.jsx)("ul",{className:"space-y-3",children:b.map(e=>(0,a.jsxs)("li",{className:"flex items-start text-gray-800",children:[(0,a.jsx)("span",{className:"mr-2 mt-0.5 text-emerald-600",children:"✓"}),e]},e))})]})]})]}),(0,a.jsx)("section",{className:"bg-gray-50 border-y border-gray-200",children:(0,a.jsx)("div",{className:"container-large py-16 md:py-20",children:(0,a.jsxs)("div",{className:"max-w-3xl mx-auto text-center",children:[(0,a.jsx)("h2",{className:"text-2xl md:text-3xl font-bold text-gray-900",children:"책 전체가 하나의 진짜 서비스를 만듭니다"}),(0,a.jsxs)("p",{className:"mt-4 text-lg text-gray-600",children:[(0,a.jsx)("strong",{className:"text-gray-900",children:"AI 상품 설명 생성기"}),"— 상품 정보를 입력하면 AI가 판매용 설명을 써주는 서비스를 로그인, 저장(DB), AI 기능, 배포까지 전부 갖춰 직접 만듭니다."]}),(0,a.jsx)("div",{className:"mt-8 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm",children:["화면 만들기","AI 기능 연결","로그인 \xb7 저장","인터넷에 배포"].map((e,t)=>(0,a.jsxs)("div",{className:"bg-white border border-gray-200 rounded-xl py-4 px-2 font-medium text-gray-700",children:[(0,a.jsx)("span",{className:"block text-emerald-600 font-bold mb-1",children:t+1}),e]},e))}),(0,a.jsxs)("p",{className:"mt-6 text-gray-500",children:["그리고 같은 방법으로 ",(0,a.jsx)("strong",{children:"당신의 아이디어"}),"(자소서 첨삭기, 이메일 답장기, 식단 추천기…)를 끼워넣으면 됩니다."]})]})})}),(0,a.jsxs)("section",{className:"container-large py-16 md:py-20",children:[(0,a.jsx)("h2",{className:"text-2xl md:text-3xl font-bold text-gray-900 text-center",children:"무료 영상\xb7블로그와 무엇이 다른가"}),(0,a.jsx)("div",{className:"mt-10 max-w-3xl mx-auto overflow-hidden rounded-2xl border border-gray-200",children:(0,a.jsxs)("table",{className:"w-full text-left",children:[(0,a.jsx)("thead",{children:(0,a.jsxs)("tr",{className:"bg-gray-50 text-sm text-gray-500",children:[(0,a.jsx)("th",{className:"px-5 py-3 font-medium w-1/2",children:"흔한 무료 콘텐츠"}),(0,a.jsx)("th",{className:"px-5 py-3 font-medium w-1/2 text-emerald-700",children:"이 책"})]})}),(0,a.jsx)("tbody",{children:y.map(e=>(0,a.jsxs)("tr",{className:"border-t border-gray-200",children:[(0,a.jsx)("td",{className:"px-5 py-4 text-gray-500",children:e.free}),(0,a.jsx)("td",{className:"px-5 py-4 text-gray-900 font-medium bg-emerald-50/50",children:e.book})]},e.book))})]})})]}),(0,a.jsx)("section",{className:"bg-gray-50 border-y border-gray-200",children:(0,a.jsxs)("div",{className:"container-large py-16 md:py-20",children:[(0,a.jsx)("h2",{className:"text-2xl md:text-3xl font-bold text-gray-900 text-center",children:"목차 — 0에서 출시까지의 전체 여정"}),(0,a.jsxs)("p",{className:"mt-3 text-center text-gray-500",children:[(0,a.jsx)("span",{className:"font-medium",children:"배관"})," = 비개발자가 포기하는 구간(가장 정성껏) \xb7 ",(0,a.jsx)("span",{className:"font-medium",children:"성공"})," = “내가 만들었어!” 도파민 지점"]}

1),(0,a.jsx)("div",{className:"mt-10 max-w-2xl mx-auto space-y-2",children:N.map(e=>(0,a.jsxs)("div",{className:"flex items-center bg-white border border-gray-200 rounded-xl px-5 py-3.5",children:[(0,a.jsx)("span",{className:"text-sm font-bold text-gray-400 w-16 shrink-0",children:e.part}),(0,a.jsx)("span",{className:"flex-1 text-gray-900",children:e.title}),e.tag&&(0,a.jsx)("span",{className:`ml-3 text-xs font-bold px-2.5 py-1 rounded-full shrink-0 ${e.tag.includes("성공")?"bg-emerald-100 text-emerald-700":"bg-amber-100 text-amber-700"}`,children:e.tag})]},e.part))})]})}),(0,a.jsx)("section",{className:"container-large py-16 md:py-20",children:(0,a.jsxs)("div",{className:"max-w-3xl mx-auto text-center",children:[(0,a.jsx)("h2",{className:"text-2xl md:text-3xl font-bold text-gray-900",children:"구경꾼의 정리가 아니라, 만드는 사람의 실전"}),(0,a.jsxs)("p",{className:"mt-4 text-lg text-gray-600",children:["저자는 AI와 함께 노트\xb7블로그 플랫폼 ",(0,a.jsx)("strong",{children:"틸노트"}),"를 혼자 만들어 운영하고 있습니다. 이 책의 모든 막힘과 탈출법은 실제로 서비스를 만들고 돈을 벌며 겪은 것들입니다."]})]})}),(0,a.jsx)("section",{className:"bg-gray-50 border-y border-gray-200",children:(0,a.jsxs)("div",{className:"container-large py-16 md:py-20",children:[(0,a.jsx)("h2",{className:"text-2xl md:text-3xl font-bold text-gray-900 text-center",children:"자주 묻는 질문"}),(0,a.jsx)("div",{className:"mt-10 max-w-2xl mx-auto space-y-3",children:f.map(e=>(0,a.jsxs)("details",{className:"bg-white border border-gray-200 rounded-xl px-5 py-4 group",children:[(0,a.jsxs)("summary",{className:"font-medium text-gray-900 cursor-pointer list-none flex items-center justify-between",children:[e.q,(0,a.jsx)("span",{className:"text-gray-400 group-open:rotate-180 transition-transform ml-3",children:"⌄"})]}),(0,a.jsx)("p",{className:"mt-3 text-gray-600 leading-relaxed",children:e.a})]},e.q))})]})}),(0,a.jsxs)("section",{className:"container-large py-20 md:py-24 text-center",children:[(0,a.jsxs)("h2",{className:"text-2xl md:text-4xl font-bold text-gray-900 max-w-2xl mx-auto leading-snug",children:["“언젠가 만들어야지”의 ",(0,a.jsx)("span",{className:"text-emerald-600",children:"언젠가"}),"를 지금으로"]}),(0,a.jsx)("p",{className:"mt-4 text-lg text-gray-600",children:"이 책이 끝나면, 당신에게는 친구에게 보낼 수 있는 서비스 링크가 있습니다."}),(0,a.jsx)(w,{position:"bottom"})]})]}),(0,a.jsx)(c.A,{})]}))},69327:(e,t,s)=>{"use strict";var a=s(29563);t.A=void 0;var r=a(s(94471)),l=s(37876);t.A=(0,r.default)((0,l.jsx)("path",{d:"m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"}),"ExpandLess")},80084:(e,t,s)=>{"use strict";var a=s(29563);t.A=void 0;var r=a(s(94471)),l=s(37876);t.A=(0,r.default)((0,l.jsx)("path",{d:"m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"}),"ArrowForward")},97036:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/vibecoding",function(){return s(66313)}])}},e=>{e.O(0,[8230,8384,4997,4587,8212,304,2289,7559,1494,5870,807,6684,636,6593,8792],()=>e(e.s=97036)),_N_E=e.O()}]);