단계 1 / 6 · 약 8분

Next.js 앱 만들기

Node.js를 설치한 뒤 터미널에서 실행: npx create-next-app@latest my-landing — 기본값으로 진행. 설치가 부담되면 StackBlitz 같은 온라인 편집기를 써도 됩니다.

💡 1분Next.js는 진짜 웹앱을 만드는 인기 프레임워크예요. 가장 큰 도약이지만, 나중에 실제 제품으로 키울 수 있는 토대를 줍니다.

✅ 확인: 'npm run dev' 실행 시 localhost:3000에 시작 앱이 보입니다.

단계 2 / 6 · 약 8분

홈페이지 글자 바꾸기

app/page.tsx 를 열어 시작 내용을 지우고 헤드라인+부제를 넣으세요. 카피는 ChatGPT로 뽑아도 좋아요.

💡 1분app/page.tsx 가 홈페이지예요. 태그 사이 내용을 바꾸면 방문자가 보는 화면이 바뀝니다. 저장하면 브라우저가 즉시 갱신돼요.

✅ 확인: 저장 후 localhost:3000에 내 헤드라인이 보입니다.

단계 3 / 6 · 약 8분

이메일 입력칸이 있는 <form>을 추가하세요. 지금은 무료 폼 백엔드(예: Formspree)로 보내 제출이 받은편지함에 오게 하면 됩니다 — DB 불필요.

💡 1분Formspree 같은 폼 백엔드는 서버나 DB 없이도 가입을 받아줘요. 더 투자하기 전에 수요를 검증하기에 딱입니다.

✅ 확인: 폼을 제출하면 메일이 옵니다.

단계 4 / 6 · 약 8분

무료 GitHub 저장소를 만들고 프로젝트를 push 하세요(영상에 명령어 있음).

💡 1분GitHub는 코드를 온라인에 저장하고 호스팅과 연결해줘요. 개발자들이 프로젝트를 백업·공유하는 표준 방식이기도 합니다.

✅ 확인: 코드가 GitHub 저장소에 보입니다.

단계 5 / 6 · 약 8분

vercel.com 에서 GitHub로 로그인 → 저장소 import → Deploy. 약 1분이면 라이브 URL이 나옵니다.

💡 1분Vercel이 GitHub 저장소를 자동으로 웹사이트로 만들어줘요. 이후 push할 때마다 자동 재배포 — 페이지가 스스로 갱신됩니다.

✅ 확인: Vercel URL을 열면 랜딩페이지가 공개로 보입니다.

🌐 your-app.vercel.app 라이브 — 직접 코딩한 진짜 랜딩페이지, 완전히 내 것.

단계 6 / 6 · 약 8분

5명에게 URL을 보내고 솔직한 반응을 받아보세요.

💡 1분페이지만 만든 게 아니라, 계속 키워갈 수 있는 진짜 앱을 출시한 거예요. 첫 가입이 그 가치를 증명합니다.

✅ 확인: 최소 한 명이 폼으로 실제 가입했습니다.