바이브코딩

수강생 확인이 필요합니다

등록하신 이름을 입력하면 강의자료를 볼 수 있어요.

* 등록일로부터 4주(28일) 동안만 접속할 수 있습니다.

DAY 03바이브코딩 · 함께 따라하는 실습

Claude Code를 활용한 카페 웹페이지 제작

강사와 함께 동일한 프롬프트를 단계적으로 입력하면서, 가상의 카페 브랜드 MELLOW BEAN을 소개하는 한 페이지 웹사이트를 처음부터 완성된 형태까지 만들어봅니다.

1.수업 구성

수업 난이도

웹개발 경험이 거의 없는 초급자 중심

수업방식

강사와 동일한 프로젝트를 동일한 프롬프트로 단계적으로 제작하기

실습 비중

전체 수업의 약 70% 이상

핵심목표

Claude Code와 함께 하나의 카페 소개 웹페이지를 단계적으로 제작하고, 다음 수업에서 Database와 연결할 수 있는 기본 웹구조 완성하기

2.오늘 수업의 핵심 방식

오늘 집중할 내용

웹페이지를 Section 단위로 구성하기
Claude Code에게 웹페이지 기본 구조 요청하기
텍스트 콘텐츠 변경하기
글자 · 색 · 여백 수정하기
카페 메뉴 카드 만들기
이미지 적용하기
Navigation(상단 메뉴)과 버튼 기능 추가하기
Hover 효과 적용하기
모바일 반응형 웹페이지 만들기
Claude Code에게 수정 범위를 정확하게 전달하기
작은 프롬프트를 반복하여 결과물 발전시키기
DAY 04 Database 연결을 고려한 구조 만들기

오늘은 각자 처음부터 다른 웹사이트를 만드는 방식으로 진행하지 않습니다.
모두 강사와 함께 동일한 프로젝트 + 동일한 프롬프트를 사용하여 하나의 카페 웹페이지를 단계적으로 완성합니다.

동일한 프로젝트 + 동일한 프롬프트 = 함께 완성하는 카페 웹페이지

전체 실습 흐름

1카페 웹사이트 기본 구조 만들기
2실제 콘텐츠 적용하기
3글자 스타일 수정하기
4색 수정하기
5여백 수정하기
6메뉴 카드 만들기
7이미지 적용하기
8Hero 배치 수정하기
9버튼과 Navigation 연결하기
10Hover 효과 적용하기
11모바일 화면 수정하기
12전체 기능 점검하기
13개인 스타일로 일부 수정하기
핵심 — 한 번에 완성된 웹사이트를 요청하지 않고 작은 프롬프트를 순서대로 입력하면서 웹사이트를 발전시키기

3.오늘 함께 만들 결과물

카페 브랜드 소개 웹페이지

가상의 카페 MELLOW BEAN을 소개하는 한 페이지 웹사이트 제작

Navigation
Hero
About
Menu
Location
Contact
Footer

오늘 이 주제로 제작하는 이유

카페 웹사이트에는 텍스트, 이미지, 메뉴, 카드, 가격, 버튼, 위치정보, Navigation 등 다양한 웹요소가 포함되어 있습니다. 그리고 다음 수업에서는 현재 HTML에 직접 작성한 메뉴 데이터를 Database에 저장하여 웹사이트와 Database를 연결합니다.

텍스트 이미지 메뉴 카드 가격 버튼 위치정보 Navigation

4.웹페이지를 Section으로 이해하기

Section이란?

하나의 웹페이지 안에서 목적에 따라 나눈 콘텐츠 영역. 하나의 긴 페이지를 내용의 목적에 따라 여러 영역으로 나누어 구성합니다.

오늘 제작할 웹사이트 구조

Hero

카페 이름, 대표 문구, 메뉴 보기 버튼, 대표 이미지

About

카페 소개 문구

Menu

대표 메뉴 3개 카드

Location

영업시간, 주소

Contact

Instagram, Email

5.실습 준비하기

VS Code에서 새로운 프로젝트 폴더 만들기
Claude Code 실행
프로젝트 이름
mellow-bean
오늘부터는 설치나 계정 설정이 아니라 실제 제작에 집중합니다.

6.STEP 01~02. 기본 구조 만들기 & 실제 콘텐츠 적용하기

STEP 01

가장 기본적인 웹페이지 만들기

처음부터 화려하게 만들지 않고, 먼저 웹페이지의 전체 구조만 제작합니다.

결과 확인하기 — Live Server 실행 → 브라우저 확인
Navigation이 있는가? Hero가 있는가? About이 있는가? Menu 카드가 3개 있는가? Location이 있는가? Contact가 있는가? Footer가 있는가?

지금 단계에서는 예쁜지 확인하는 것이 아니라, 필요한 구조가 모두 만들어졌는지 확인합니다.

오늘 사용할 기본 작업방식 — 프롬프트 입력 → Claude Code 수정 → 브라우저 확인 → 원하는 부분과 다른 부분 찾기 → 다음 프롬프트 입력을 반복합니다 (Prompt → Result → Check → Prompt). 바이브코딩에서는 처음부터 완벽한 프롬프트를 만드는 것보다 결과를 확인하면서 계속 수정하는 과정이 중요합니다.
STEP 02

실제 카페 콘텐츠 적용하기

현재 Claude Code가 임의로 작성한 문장을 오늘 사용할 동일한 카페 콘텐츠로 변경합니다.

Claude Code에게 수정범위를 알려주는 방법

"현재 구조는 유지해줘." "다른 Section은 수정하지 마." "디자인은 그대로 유지해줘." "이 부분만 변경해줘."

이유 — AI에게 수정범위를 알려주지 않으면 요청하지 않은 부분까지 바뀔 수 있습니다.

7.STEP 03~05. 글자 · 색 · 여백 수정하기

STEP 03

글자 스타일 수정하기

글꼴 · 글자 크기 · 굵기 · 줄 간격을 조절해서 무엇이 중요한지와 분위기를 표현합니다. 디자이너들은 이것을 Typography(타이포그래피)라고 부르지만, AI에게는 "글자 스타일"이라고 말해도 충분합니다.

정보의 중요도에 따라 글자 크기와 굵기가 구분되는지 확인하기

STEP 04

카페의 색 만들기

오늘 사용할 방향 — Cream + Brown + Dark Brown으로 따뜻한 카페 분위기를 만듭니다.

배경밝은 크림 계열
글자짙은 브라운 계열
포인트따뜻한 중간톤 브라운

배경, 텍스트, 버튼, Section 전체 색상이 하나의 브랜드처럼 자연스럽게 연결되는지 확인하기

STEP 05

Section 사이의 여백 수정하기

웹페이지가 답답해 보이지 않도록 콘텐츠 사이에 충분한 공간을 만듭니다.

개발자들은 바깥쪽 여백(Margin)과 안쪽 여백(Padding)을 나눠 부르지만, 우리는 "Section 사이 간격", "카드 안쪽 여백"처럼 말해도 AI가 알아듣습니다.

8.STEP 06~07. 메뉴 데이터 적용 & 카드 디자인하기

STEP 06

Menu Section 본격적으로 만들기

현재 Menu Section에는 기본 카드 3개가 존재합니다. 이번에는 실제 메뉴정보를 적용합니다.

Cream Latte

부드러운 크림과 에스프레소가 어우러진 시그니처 라떼

6,500원
Classic Tiramisu

진한 마스카포네 크림과 커피 향을 담은 수제 티라미수

7,000원
Mellow Ade

레몬과 허브를 사용한 상큼한 시그니처 에이드

6,000원

현재 메뉴정보는 HTML 안에 직접 작성되어 있습니다. 이 부분은 다음 수업에서 다시 중요하게 사용됩니다.

STEP 07

Menu 카드 디자인하기

Card(카드)는 하나의 메뉴정보를 이미지, 이름, 설명, 가격으로 묶어서 표현하는 UI 요소입니다.

여기서 중요한 질문

현재 메뉴가 3개라면 HTML에 직접 작성해도 크게 어렵지 않습니다. 그런데 메뉴가 10개라면? 30개라면? 100개라면? 새로운 메뉴가 나올 때마다 HTML을 직접 수정해야 할까요?

지금은 이 질문만 기억하기 — 다음 수업에서 이 문제를 Database로 해결합니다.

9.STEP 08~09. 이미지 적용 & Hero 배치 수정하기

STEP 08

이미지 적용하기

프로젝트 안에 images 폴더를 만들고 강사가 제공하는 공통 이미지(hero.jpg, cream-latte.jpg, tiramisu.jpg, mellow-ade.jpg)를 추가합니다.

mellow-bean
├── index.html
├── style.css
├── script.js
└── images
    ├── hero.jpg
    ├── cream-latte.jpg
    ├── tiramisu.jpg
    └── mellow-ade.jpg
이미지가 안 보인다면 이 프롬프트 사용하기

"일부 이미지가 웹페이지에 표시되지 않고 있어. 현재 프로젝트의 images 폴더와 HTML의 이미지 경로를 확인해줘. 파일 이름과 경로가 올바른지 점검해서 이미지가 정상적으로 보이도록 수정해줘. 이미지와 관련되지 않은 다른 코드는 수정하지 마."

STEP 09

Hero 배치 수정하기

현재 Hero를 실제 카페 브랜드 웹사이트처럼 텍스트 | 이미지 2열 구조로 수정합니다.

이번 프롬프트에서는 Hero Section의 배치만 변경합니다.

10.STEP 10~12. Navigation · 버튼 연결 · Hover 효과

STEP 10

Navigation 기능 추가하기

현재 상단의 메뉴가 실제로 해당 Section으로 이동하도록 만듭니다.

STEP 11

Hero 버튼 기능 연결하기

Hero에 있는 "메뉴 보기" 버튼을 누르면 Menu Section으로 이동하도록 만듭니다.

버튼은 단순한 장식이 아니라 사용자의 다음 행동을 연결하는 요소입니다.

STEP 12

Hover 효과 추가하기

Hover(호버)는 사용자가 클릭할 수 있는 요소를 더 쉽게 인식하도록 만드는, 마우스를 올렸을 때 나타나는 변화입니다.

11.STEP 13~14. Location 정리 & 모바일 반응형 적용하기

STEP 13

Location Section 정리하기

현재 Location에는 주소와 영업시간이 있습니다. 조금 더 실제 웹사이트처럼 구성합니다.

STEP 14

모바일 반응형 적용하기

Responsive Web(반응형 웹)은 화면 크기에 따라 구조가 달라지는 웹페이지입니다. 현재는 PC 화면 중심이므로 휴대폰에서도 자연스럽게 보이도록 수정합니다.

Hero가 위아래 구조로 변경되는가? Menu 카드가 한 줄씩 표시되는가? 텍스트가 화면 밖으로 나가지 않는가? 이미지가 깨지지 않는가? 버튼을 누르기 쉬운가? 좌우 스크롤이 생기지 않는가?

12.STEP 15~16. 메뉴 카드 구조 점검 & 전체 점검하기

STEP 15

메뉴 카드 구조 점검하기

DAY 04 연결을 위해 Menu Section을 한 번 더 확인합니다. 현재 메뉴 카드는 이미지 → 메뉴 이름 → 설명 → 가격 순서로 동일한 구조를 사용합니다.

Cream Latte, Classic Tiramisu, Mellow Ade 세 카드는 구조는 동일하고 데이터만 다릅니다. 지금은 이 메뉴정보가 HTML 안에 직접 작성되어 있지만, DAY 04에서는 HTML 안에 메뉴 3개를 직접 작성하는 대신 Database에 메뉴정보를 저장하고 웹사이트가 Database에서 데이터를 가져와 Menu Card를 자동 생성하도록 바꿉니다. 새 메뉴를 추가하고 싶다면 Database에 새 데이터 한 개만 추가하면 웹사이트 새로고침 시 새로운 Menu Card가 표시됩니다.
STEP 16

전체 웹페이지 점검하기

13.STEP 17. 개인화 실습

여기까지는 모두 같은 웹사이트를 만들었습니다. 이제 마지막으로 나만의 개성을 조금 더해 봅니다 — 다음 중 2~3개를 골라 보세요.

① 카페 이름
② Hero 문구
③ 메인 색
④ 메뉴 이름
⑤ 메뉴 가격
⑥ 메뉴 설명
⑦ 이미지
단, Menu Card 구조 · Navigation · 반응형 구조는 유지합니다.

14.오늘 웹사이트가 만들어진 과정 & 좋은 요청법

Prompt 01 ~ 17의 흐름

1기본 구조
2실제 콘텐츠
3글자 스타일
4색
5여백
6Menu 데이터
7Menu Card 디자인
8이미지
9Hero 배치
10Navigation
11버튼 기능(CTA)
12Hover
13Location
14Responsive
15Menu 구조 정리
16전체 점검
17개인화
오늘 가장 중요한 바이브코딩 방식 — 큰 요청 하나가 아니라 작은 요청을 반복하며 하나씩 바꾸고 결과를 확인하기

수정 프롬프트의 기본 구조

1. 수정할 대상어디를 바꿀 것인가?
2. 원하는 변화어떻게 바꿀 것인가?
3. 유지할 내용무엇은 건드리지 않을 것인가?
X 좋지 않은 요청

"이상해. 다시 만들어줘."

O 좋은 요청

"Menu 카드의 이미지 높이가 서로 다르게 보여. 세 이미지의 높이를 동일하게 맞춰줘. 이미지 비율은 유지하고 기존 카드 디자인과 다른 Section은 변경하지 마."

핵심 — 문제가 있는 영역만 구체적으로 요청하기

15.Git · GitHub로 작업 저장하기

Source Control 열기
변경파일 확인 → Stage
Commit
Push → GitHub에서 확인
Commit Message 예시
MELLOW BEAN 카페 웹페이지 제작 카페 메뉴 및 반응형 디자인 완성

16.DAY 03 정리 & 다음 수업

웹사이트는 한 번에 완성하는 것이 아니라 작은 수정과 확인을 반복하며 발전시키기
Claude Code에게 "무엇을 바꿀지"뿐만 아니라 "무엇을 유지할지"도 함께 전달하기
Menu Card는 구조는 같지만 안에 들어가는 데이터는 다름
현재 Menu 데이터는 HTML 안에 직접 작성되어 있음
다음 수업에서는 메뉴 데이터를 HTML이 아니라 Database에서 관리

다음 수업 예고 — DAY 04

Supabase · SQL을 활용한 메뉴 데이터 관리

  • • 현재 HTML에 직접 작성된 메뉴 카드를 Database로 옮기기
  • • AI에게 필요한 SQL을 요청하는 방법 익히기
  • • 웹사이트와 Supabase 연결하기
  • • SQL로 새로운 메뉴 추가하고 자동 반영 확인하기
DAY 04. Supabase · SQL을 활용한 메뉴 데이터 관리