바이브코딩으로 첫 웹페이지 만들기

목표

코드를 몰라도 말로 설명해서 나만의 소개 페이지 한 장을 만들고 인터넷 주소로 공유합니다. 바이브코딩은 이렇게 말로 요청해 AI가 코드를 짜게 하는 방식을 말해요. 1시간이면 충분해요.

준비물

• 셋 중 하나
  • Lovable — 브라우저에서 바로, 배포까지 한 번에 (가장 쉬움)
  • Cursor — 코드 편집기 + AI, 내 컴퓨터에서 작업
  • Claude Code — 터미널에서 AI에게 맡기기
• 페이지에 넣을 내용 메모: 이름, 한 줄 소개, 보여주고 싶은 것 3가지, 연락처

순서

1. 화면 그림부터 정하기 — 종이에 대충 위에서 아래로 그려 봅니다. 대부분 이 순서예요.
   • 맨 위 메뉴: 헤더·내비바
   • 첫 화면 큰 제목: 히어로 섹션
   • 소개 카드 3개: 카드
   • 행동 버튼: CTA 버튼
   • 맨 아래: 푸터
2. 부품 이름으로 첫 요청 — 1번에서 정한 이름을 그대로 씁니다.

   개인 소개 웹페이지를 만들어줘. 맨 위에 내비게이션 바, 그 아래 큰 제목과 한 줄 소개가 있는 히어로 섹션, 내가 하는 일 3가지를 카드 3개로, 마지막에 “연락하기” CTA 버튼과 푸터. 밝고 깔끔한 느낌으로.

3. 내용 채우기 — 메모해 둔 실제 내용을 붙여 넣고 “가짜 문구를 이걸로 바꿔줘”라고 합니다.
4. 한 군데씩 고치기 — 마음에 안 드는 곳은 캡처해서 동그라미 치고 “이 부분 글씨 더 크게”처럼 하나씩 요청합니다.
5. 휴대폰 화면 확인 — “휴대폰에서도 보기 좋게 반응형으로 해줘”라고 하고, 실제로 휴대폰으로 열어 봅니다.
6. 공유하기 — Lovable이면 배포(Publish) 버튼으로 바로 주소가 생겨요. Cursor·Claude Code로 만들었다면 “이 페이지를 무료로 배포하는 방법 알려줘”라고 물어보세요.

결과

내 이름이 들어간 소개 페이지와 공유할 수 있는 주소.

막히면

• AI가 원하는 걸 못 알아들어요 → 부품 이름을 모르면 UI 용어에서 모양을 보고 이름을 찾으세요. “옆에 메뉴”보다 “왼쪽 고정 사이드바”가 훨씬 정확해요.
• 고칠수록 망가져요 → 마음에 들었던 시점으로 되돌리고(대부분의 도구에 되돌리기 기능이 있어요), 요청을 더 작게 나누세요.
• 디자인이 뻔해요 → 마음에 드는 사이트 캡처를 보여주며 “이런 느낌으로”라고 하면 확 달라져요.