내 도메인에 살아 있는 진짜 웹사이트를, 말로 만든다
완성하면 생기는 것
전 세계 누구나 접속 가능한 내 웹사이트 주소(https://...vercel.app)
Claude Pro 이상 구독필수
바이브코딩의 두뇌입니다. 최소 Claude Pro($20/월)면 충분히 시작할 수 있고, 하루에 많이 만들 계획이면 Max 요금제가 한도가 넉넉합니다. 무료 플랜으로도 맛보기는 되지만 금방 한도에 걸립니다.
컴퓨터 (윈도우 또는 맥)필수
사양은 크게 중요하지 않습니다. 인터넷이 되는 노트북이면 충분합니다.
Node.js LTS 버전필수
코드를 실행하는 엔진입니다. nodejs.org에서 'LTS'라고 적힌 안정 버전을 받습니다. 설치는 아래 1단계에서 같이 합니다.
VS Code (비주얼 스튜디오 코드)필수
무료 코드 편집기입니다. 여기에 Claude Code 확장을 깔아서 'AI와 대화하며 코딩'합니다. 마이크로소프트의 Visual Studio(유료 IDE)와는 다른 프로그램이니 이름에 주의하세요.
예전엔 웹사이트 하나 만들려면 HTML, CSS, 디자인, 서버를 다 알아야 했습니다. 지금은 Claude에게 '카페 소개 웹사이트 만들어줘'라고 말하면 됩니다.
우리는 Next.js라는 가장 인기 있는 웹 도구를 씁니다. 만드는 동안엔 내 컴퓨터에서 미리보고, 완성되면 Vercel이라는 무료 서비스로 인터넷에 올립니다.
팁
더 빠른 맛보기를 원하면, Claude에게 '한 개의 index.html 파일로 된 간단한 소개 페이지 만들어줘'라고 한 뒤 그 파일을 브라우저로 열어도 됩니다. 이 트랙은 제대로 된 버전을 다룹니다.
코드를 실행할 엔진 Node.js를 nodejs.org에서 'LTS' 버전으로 설치합니다(계속 '다음').
VS Code에서 터미널 → 새 터미널을 열고 아래 명령으로 설치를 확인합니다.
$node -v$npm -v
v20.18.0 10.8.2
이렇게 나오면 성공
버전 숫자 두 개가 나오면 성공입니다. 숫자 값은 달라도 됩니다.
오류가 나면?
code.visualstudio.com에서 VS Code를 설치합니다. 왼쪽 확장(네모 4개) 아이콘에서 'Claude Code'를 검색해 설치합니다.
사이드바의 Claude 아이콘 → Sign in으로 로그인하면 Pro/Max 구독이 연결됩니다. 이제 한국어로 시키면 됩니다.
팁
확장 검색 결과가 여러 개면 게시자(Publisher)가 Anthropic인 것을 고르세요.
작업할 위치(예: 바탕화면)에서 터미널을 열고 아래 명령을 입력합니다. 질문이 나오면 대부분 그냥 엔터(기본값)를 쳐도 됩니다.
TypeScript? Tailwind CSS? App Router? 같은 질문엔 모두 Yes를 권장합니다. 완료되면 my-site 폴더가 생깁니다.
$npx create-next-app@latest my-site
✔ Would you like to use TypeScript? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use App Router? … Yes Creating a new Next.js app... Success! Created my-site
이렇게 나오면 성공
'Success! Created my-site'가 보이면 성공입니다.
오류가 나면?
만들어진 폴더로 들어가 개발 서버를 켭니다. 아래 두 줄을 차례로 입력합니다.
'http://localhost:3000' 주소가 나오면 브라우저에서 그 주소를 엽니다. Next.js 기본 화면이 보이면 성공입니다. 이 창은 작업 내내 켜둡니다.
$cd my-site$npm run dev
▲ Next.js 15 - Local: http://localhost:3000 ✓ Ready in 1.4s
이렇게 나오면 성공
브라우저에 기본 페이지가 뜨면 개발 환경이 완성된 것입니다.
오류가 나면?
VS Code의 Claude에게 만들고 싶은 사이트를 설명합니다. 예: "app/page.tsx를 우리 동네 카페 '무브'의 소개 페이지로 바꿔줘. 상단에 가게 이름과 슬로건, 메뉴 3개, 영업시간, 지도 링크, 하단에 인스타 링크를 넣고 따뜻한 갈색 톤으로 디자인해줘."
저장하면 브라우저가 자동으로 새로고침되며 결과가 보입니다. '메뉴를 카드 형태로', '버튼을 더 둥글게', '모바일에서도 예쁘게'처럼 계속 다듬습니다.
팁
참고할 사이트가 있으면 'OO 사이트처럼 깔끔하게'라고 말하거나, 원하는 색의 HEX 코드(예: #6b4f3a)를 알려주면 의도대로 잘 나옵니다.
오류가 나면?
인터넷에 올리기 전에, 사이트가 문제없이 '완성본'으로 만들어지는지 확인합니다. 아래 명령을 실행합니다.
'Compiled successfully'가 나오면 배포해도 안전하다는 뜻입니다. 빨간 에러가 나오면 그 내용을 Claude에게 보여 주고 고친 뒤 다시 실행합니다.
$npm run build
✓ Compiled successfully ✓ Generating static pages Route (app) Size ┌ ○ / 5.2 kB
이렇게 나오면 성공
성공 메시지와 함께 페이지 목록·용량이 표로 나오면 OK입니다.
Next.js를 만든 회사가 운영하는 Vercel에 올리면 가장 쉽습니다. 아래 명령으로 Vercel 도구를 깔고 실행합니다. 처음이면 가입(깃허브/구글 계정으로 가능) 안내가 나옵니다.
질문엔 대부분 기본값(엔터)으로 진행하면 됩니다. 끝나면 'Production: https://my-site.vercel.app' 같은 진짜 주소가 나옵니다. 그 주소를 누구에게나 보내면 접속됩니다.
$npm i -g vercel$vercel
Vercel CLI ? Set up and deploy? yes ? Link to existing project? no ✅ Production: https://my-site.vercel.app
이렇게 나오면 성공
https://...vercel.app 주소가 나오고 열리면, 여러분의 사이트가 전 세계에 공개된 것입니다.
팁
vercel.com 웹사이트에서 깃허브 저장소를 연결해 배포하는 방법도 있습니다. 코드를 고칠 때마다 자동으로 사이트가 갱신돼 편합니다.
오류가 나면?
축하합니다. 진짜 주소를 가진 웹사이트가 생겼습니다.
다음엔 문의 폼, 블로그, 다국어, 내 도메인(예: mycafe.com) 연결까지 전부 같은 방식으로 시킬 수 있습니다. 완성한 사이트는 런치패드에 올려 피드백을 받아 보세요.
