바

바이브 코딩

AI와 대화하며 웹사이트를 기획하고, 만들고, 로컬에서 확인하며 다듬는 과정입니다.

오늘의 여정 — 지금 여기에 있습니다

소개
세팅
디자인
4
코딩
5
마무리
Part 1 / 3

바로 시작하기

강의는 끝! 이제 직접 만들어봅시다

전체 프로세스

이 순서대로 따라가면 웹사이트가 완성됩니다.

이 순서대로 따라가면 나만의 웹사이트가 완성됩니다

프로젝트 생성

↓

코드 작성

↓

로컬 확인

↓

GitHub 연동

↓

Vercel 배포

시작 전에, 기대치 하나만

AI는 80%까지는 얼추 만들어줍니다. 나머지 20% — 디테일, 취향, 마감 — 를 대화로 다듬는 것이 오늘 배우는 기술이에요. 한 번에 완벽하게 안 나오는 게 정상입니다.

1. 프로젝트 생성

프로젝트 이름은 반드시 영어로!

  • - 영어 소문자만 사용 (한글 X, 대문자 X)
  • - 공백 대신 하이픈(-) 사용
  • - 좋은 예: my-portfolio, todo-app, vibe-coding-site
  • - 나쁜 예: 내 프로젝트, My Project
1

Claude에게 프로젝트 생성 요청

Claude Code 채팅창에서 이렇게 말하세요:

Claude에게 이렇게 말하세요

Next.js로 프로젝트 만들어줘. 이름은 my-first-app으로

AI가 자동으로 프로젝트를 만들고, 필요한 파일과 폴더를 전부 설치해줍니다. 1~2분 정도 걸릴 수 있어요. 여러 줄이 빠르게 지나가는 건 정상입니다!

2

프로젝트 폴더로 이동

AI가 프로젝트를 만들면 자동으로 폴더로 이동하거나, 아래처럼 직접 말해도 됩니다.

Claude에게 이렇게 말하세요

방금 만든 프로젝트 폴더로 이동해줘

터미널 경로로 진행할 때 — 선택지 팁

명령어 입력창에서 (y/N) 형태로 물어볼 때:
  • - 대문자(N)가 기본값입니다
  • - 그냥 Enter = N 선택
  • - y를 원하면 y 입력 후 Enter

2. 로컬 서버 실행

로컬 서버란?

웹사이트를 인터넷에 올리기 전에, 내 컴퓨터에서 먼저 미리 보는 장치입니다. 네이버나 유튜브 같은 "진짜 서버"는 멀리 있는 컴퓨터에서 돌아가지만, 로컬 서버는 내 컴퓨터가 잠깐 서버 역할을 하는 거예요.

아직 인터넷에 올리지 않았으므로 나만 볼 수 있고, 나중에 Vercel에 배포하면 전 세계 누구나 볼 수 있게 됩니다.

1

Claude에게 서버 실행 요청

Claude에게 이렇게 말하면 됩니다:

Claude에게 이렇게 말하세요

로컬 서버 켜줘

2

미리보기 확인 — 두 가지 방법

서버가 켜지면 만든 페이지를 확인할 수 있습니다. 두 가지 방법이 있어요.

방법 1: Desktop 앱 내장 미리보기 (수업 기본)

Claude Desktop 앱의 Code 탭에는 미리보기 패널이 내장되어 있어서, 별도의 브라우저 없이도 결과를 오른쪽 패널에서 바로 볼 수 있습니다.

방법 2: 브라우저에서 직접 열기

Claude가 "localhost:3000에서 실행 중입니다"라고 알려주면, 그 주소를 복사해서 Chrome 같은 브라우저 주소창에 붙여넣으세요.

브라우저에서 직접 열면 개발자 도구로 에러를 확인하거나, 모바일 크기로 미리보기를 할 수 있어서 더 정확합니다.

Parse Error가 나타났나요?

웹사이트를 수정했는데 빨간 에러 화면이 나타났나요? 빨간 에러 화면의 메시지를 복사해서 Claude에게 붙여넣으세요. 몇 초 안에 해결됩니다!

3. 실시간 수정 (Hot Reload — 자동 새로고침)

코드를 수정하면 브라우저에서 자동으로 반영됩니다. 새로고침할 필요가 없어요!

  1. 1코드 수정 → 저장 (Ctrl+S 또는 Cmd+S)
  2. 2브라우저가 자동으로 새로고침됩니다
  3. 3변경사항이 즉시 반영됩니다!

실시간 반영 (Hot Reload)

코드를 수정하면 브라우저에서 자동으로 반영됩니다. 새로고침할 필요 없어요!
localhost에서 웹사이트가 보이나요? 수정하면 바로 반영되나요? 여기까지 되었으면 성공!
Part 2 / 3

기획하기

뭔가 만들어졌다! 이제 뭘 만들지 정해봅시다

MD

나만의 스타일로 만들고 싶다면?

사이트마다 색·폰트·분위기를 정해두고 싶다면 이 프로젝트 폴더의 CLAUDE.md에 적어두면 돼요. 그러면 이 사이트를 고칠 때마다 Claude가 같은 스타일을 지켜요.

글로벌 CLAUDE.md — ‘나’에 대한 규칙

모든 프로젝트에 똑같이 적용돼요. 한국어로 대화하기처럼 어디서나 원하는 것만 적어요.
위치: C:\Users\내이름\.claude\CLAUDE.md (Mac은 ~/.claude/CLAUDE.md)

프로젝트 CLAUDE.md — ‘이 사이트’에 대한 규칙

그 프로젝트 폴더 안에서만 적용돼요. 이 사이트의 색·폰트·톤, 무엇을 위한 사이트인지 적어요.
위치: 프로젝트 폴더 맨 위의 CLAUDE.md

Claude는 둘 다 함께 읽어요. 그래서 ‘나’에 관한 건 글로벌에, ‘이 사이트’에 관한 건 프로젝트에 나눠 쓰면 깔끔해요. 아래 예시는 차분한 갤러리 느낌 스타일이에요. 색과 폰트를 내 취향대로 바꿔서 보내세요.

Claude에게 이렇게 말하세요

이 프로젝트에서는 내 스타일로 만들고 싶어. 아래 내용을 이 프로젝트 폴더의 CLAUDE.md에 넣어줘. (글로벌 CLAUDE.md는 건드리지 마) # CLAUDE.md ## 프로젝트 소개 내 작업과 나를 소개하는 페이지. ## 브랜드 스타일 - 메인 컬러: #5D8A80 (청자) — 제목, 포인트, 버튼 - 배경: #FBF9F5 (아이보리) / 글자: #3C372F (먹) - 폰트: 명조 계열 (Noto Serif KR) - 톤앤매너: 차분하고 정제된, 갤러리처럼 ## 규칙 - 모바일/태블릿/PC 화면 크기에 맞게 자동 대응 (반응형) - 한국어로 UI 텍스트 작성 - 이미지는 /public/images 폴더에 저장

CLAUDE.md가 뭔지 궁금하면 → 완성도를 높이는 기술에서 자세히 다룹니다

4. AI와 먼저 상의하기

바로 "만들어줘"부터 시작하면 AI가 추측해서 만들기 때문에 원하는 결과가 안 나올 확률이 높습니다. 30초만 투자해서 방향을 잡으면, 수정 왕복을 절반으로 줄일 수 있어요.

자료가 없을 때 추천
1

AI와 같이 기획서를 만들기

아이디어만 있을 때, AI에게 "같이 기획서부터 만들자"고 화두를 던지세요. 핵심은 "너가 직접 만들 거니까, 너가 이해하기 쉬운 구조로 정리해줘"라고 하는 것. AI가 스스로 구현하기 좋은 형태로 구성안을 잡아주고, 여러분은 확인만 하면 됩니다.

Claude에게 이렇게 말하세요

여름 할인 이벤트 페이지를 만들려고 해. 같이 기획서를 만들어보자. 너가 직접 만들 거니까 너가 이해하기 쉬운 구조와 형태로 정리해줘

AI가 구성안을 보여주면 → 확인/수정 → "이대로 만들어줘" — 이 사이클이 바이브코딩의 핵심입니다

2

레퍼런스를 보여주면서 시작하기

벤치마킹할 사이트가 있을 때. 스크린샷을 찍거나 URL을 붙여넣으면 Claude가 비슷한 구조로 만들어줍니다.

Claude에게 이렇게 말하세요

[스크린샷 붙이기] 이런 느낌으로 내 소개 페이지 만들어줘. 색은 차분한 톤으로

Claude에게 이렇게 말하세요

이 사이트 참고해서 만들어줘: [URL 붙이기]

자료가 있을 때 추천
3

기존 기획서/자료를 업로드하기

이미 만들어둔 자료가 있다면 가장 빠른 방법입니다. 파일을 Claude Code 입력창에 드래그하면 Claude가 내용을 읽고 구현합니다.

이런 파일을 던지면 됩니다

PDF기획서, 제안서
PPT발표 자료
Word기획 문서
Excel상품 목록, 데이터
이미지스크린샷, 시안
TXT메모, 텍스트
Claude에게 이렇게 말하세요

[PPT 첨부] 이 기획서에 나온 이벤트 페이지를 그대로 웹으로 만들어줘

Claude에게 이렇게 말하세요

[엑셀 첨부] 이 상품 목록을 보기 좋은 카탈로그 페이지로 만들어줘

Claude에게 이렇게 말하세요

[이미지 첨부] 이 디자인 시안대로 웹페이지를 만들어줘

+

어느 방법이든 통하는 만능 한 줄

요청 끝에 이 한 줄을 붙여보세요. AI가 추측으로 달리는 대신, 애매한 것을 먼저 물어보고 여러분의 답을 반영해서 만듭니다. 말을 잘하는 것보다 질문하게 만드는 것이 훨씬 쉽습니다.

Claude에게 이렇게 말하세요

만들기 전에, 네가 알아야 할 것들을 나에게 먼저 질문해줘. 내 답을 듣고 나서 시작해.

매번 붙이기 귀찮다면 CLAUDE.md에 “큰 작업을 시작하기 전에는 항상 먼저 질문해줘”라고 적어두면 자동이 됩니다 → 완성도를 높이는 기술

실험: 같은 내용, 다른 주문

가상의 티 브랜드 ‘하루끝’의 같은 제품 정보(3종·가격·스토리·쇼룸)를 주고, 지시만 다르게 해서 AI에게 실제로 만들게 했습니다. 아래 두 페이지는 손대지 않은 산출물 그대로예요. 직접 스크롤해서 비교해보세요.

A. 형용사로 주문

“허브티 브랜드 ‘하루끝’ 랜딩 페이지 만들어줘. 미니멀하고 세련되게, 예쁘게 부탁해.”

B. 파일(design.md)로 주문

“design.md 읽고, 그 가이드대로 하루끝 랜딩 페이지 만들어줘.”

C. 여러 사이트를 섞어서 주문 — 파일 없이 고유명사만으로

“하루끝 랜딩 페이지 만들어줘. 킨포크 매거진의 에디토리얼 지면감에, 이솝의 절제된 제품 소개 방식을 섞고, 무인양품의 담백한 실용성도 얹어줘.”

레퍼런스로 언급한 실제 사이트 — 킨포크 kinfolk.com · 이솝 aesop.com · 무인양품 muji.com

A도 못 만들지 않았습니다 — 요즘 AI는 형용사만 줘도 그럴듯하게 뽑아요. 하지만 A는 어디서 본 듯한 미니멀이고, B는 이 브랜드의 얼굴입니다. 차이는 누가 결정했는가예요. A의 결은 AI가 골랐고, 내일 다시 시키면 다른 게 나옵니다. B의 결은 내 파일이 골랐고, 100번 시켜도 같은 방향이 나옵니다. “미니멀하게” 같은 형용사보다 “킨포크 같은 지면” 같은 고유명사가 강한 이유 — AI는 형용사에는 평균적인 그림을, 고유명사에는 특정한 그림을 그립니다.

C가 보여주는 것 — 파일을 만들기 전에도 여러 사이트를 던지면 AI가 꽤 잘 섞어줍니다.킨포크의 지면, 이솝의 절제, 무인양품의 정보 정리가 한 페이지에 융합됐어요. 그래서 실전 순서는 이렇습니다: 먼저 C처럼 고유명사를 조합해 방향을 탐색하고, 마음에 드는 조합이 나오면 “지금 이 스타일을 design.md로 저장해줘” — 그 순간 B가 됩니다. 탐색은 말로, 확정은 파일로.

한 걸음 더 · 같은 기술, 정반대의 결

위 하루끝은 킨포크·이솝의 잔잔한 조합이었죠. 이번엔 정반대로 — 대담하고 쨍한 브랜드를 똑같은 A·B·C 3단계로 만들어봤어요. 완성품만 “짠” 보여주면 어떻게 나온 건지 안 보이니까, 이번엔 과정을 그대로 펼칩니다. 브랜드는 하나(심야 페스티벌), 바꾸는 건 주문하는 방식뿐 — 형용사로, 파일로, 고유명사 조합으로.

A. 형용사로 주문

“심야라는 밤샘 뮤직 페스티벌 랜딩 페이지 만들어줘. 힙하고 강렬하게, 멋지게 부탁해.”

B. 파일(design.md)로 주문

“design.md 읽고, 그 가이드대로 심야 페스티벌 랜딩 만들어줘.”

C. 여러 사이트를 섞어서 주문 — 파일 없이 고유명사만으로

“심야 페스티벌 랜딩 만들어줘. Awwwards 수상 페스티벌 사이트처럼 대담하게, Spotify Wrapped의 색 폭발을 얹고, 사이버펑크의 네온 타이포로.”

C에서 던진 레퍼런스 — Awwwards(수상 웹사이트 갤러리) · Spotify Wrapped(연말 결산의 색 폭발) · 사이버펑크풍 네온 타이포. A는 어디서 본 듯한 다크 템플릿, B·C는 심야만의 얼굴이죠. B는 앱 화면(내 라인업·타임테이블)까지, C는 스크롤마다 색면이 바뀌는 포스터 결로 갈라졌어요 — 같은 조합도 매번 조금씩 다르게 나옵니다.

이렇게도 조합해보세요 — 쨍한 방향 아이디어

막막할 땐 “내가 좋아하는 브랜드·영화·앱 두세 개”를 고유명사로 던지면 됩니다. 아래는 출발용 조합 예시예요.

스니커즈 드롭 페이지

“나이키 SNKRS 앱의 긴장감 + 오프화이트의 산업 타이포 + 형광 스프레이 자국”

레트로 게임 런칭

“스팀 인기 인디게임 랜딩 + 8비트 픽셀 노이즈 + 독한 보색 대비”

러닝 크루 모집

“나이키 런클럽의 속도감 + 브루탈리즘 그리드 + 형광 트랙 라인”

Y2K 뷰티 브랜드

“90s 레이브 플라이어 + 홀로그램 질감 + 통통 튀는 산세리프, 이모지 없이”

심야도 하루끝과 똑같은 A·B·C였어요. A(형용사)는 어디서 본 듯한 다크 템플릿 — 내일 다시 시키면 또 딴 게 나옵니다. B(파일)는 심야만의 얼굴이고 100번 시켜도 같은 방향. C(조합)는 파일 없이도 방향을 탐색해줬죠. 실전 순서는 C로 탐색 → 마음에 들면 design.md로 굳혀 B. 탐색은 말로, 확정은 파일로.

잔잔하든 쨍하든 방법은 하나예요. “예쁘게”는 AI가 고르지만, “어떤 예쁨”은 내가 고른 고유명사가 정합니다.그래서 레퍼런스를 많이 아는 사람이 바이브코딩을 잘해요 — 코드가 아니라 취향이 결과를 가릅니다.

5. 뭘 만들지 정하기

막막하면 규칙 하나 — 내가 지금 실제로 필요한 것 하나를 고르세요. 오늘 만든 걸 그대로 쓰게 되면 배움이 훨씬 오래 남습니다. 아래는 출발용 예시예요.

바로 쓸모 있는 것부터

내 소개 · 프로필

"나를 소개하는 한 페이지 사이트 만들어줘. 소개, 지금 하는 일, 연락처 섹션으로. 차분하고 미니멀하게"

전시 · 행사 안내

"작은 전시 오프닝 초대 페이지 만들어줘. 전시 소개, 일정·장소, 오시는 길, 관람 안내로"

강좌 · 프로그램 소개

"새 강좌를 소개하는 랜딩 페이지 만들어줘. 히어로, 커리큘럼, 대상, 신청 버튼으로"

한눈에 보는 대시보드

"이번 달 지표를 한눈에 보는 대시보드 만들어줘. KPI 카드와 간단한 차트로. 샘플 데이터 넣어서"

[주제] + [형태] + [분위기]로 요청하면 결과가 확 좋아집니다. 예: “전시 소개(주제)를 한 페이지 랜딩(형태)으로, 여백 넉넉한 갤러리 톤(분위기)으로”. 처음부터 완벽한 문장일 필요 없어요 — 대충 말하고 결과를 보며 하나씩 고치면 됩니다.

실습 팁

처음에 완벽한 문장을 만들 필요 없어요. 일단 대충 말하고, 결과를 보면서 "색상 바꿔줘", "이 섹션 삭제해줘"처럼 하나씩 수정하면 됩니다. 대화를 많이 할수록 결과물이 좋아집니다.
뭘 만들지 정했나요? AI와 기획을 마쳤으면 이제 본격적으로 만들어봅시다!
Part 3 / 3

만들면서 익히기

개발 중에 필요한 실전 스킬들

6. 이미지 넣기 — 이제 AI가 찾아서 넣어줍니다

예전에는 직접 받아서 넣어야 했지만, 지금은 달라졌어요

요즘 Claude Code는 웹에서 이미지를 찾아 다운로드하고 코드까지 연결하는 걸 대체로 해줍니다. 회사·브랜드 로고, 배경 사진, 파비콘(브라우저 탭 아이콘) — “찾아서 넣어줘” 한 마디면 public 폴더에 받아서 화면에 붙여줘요. (아이콘·간단한 도형은 예전처럼 SVG로 직접 그려주기도 합니다.)

이렇게 시켜보세요

분위기 사진 — 무료 출처에서

Claude에게 이렇게 말하세요

히어로 배경에 어울리는 잔잔한 바다 사진을, 저작권 걱정 없는 무료 출처(Unsplash 등)에서 받아서 public 폴더에 넣고 배경으로 깔아줘

여러 장 한 번에 — 갤러리 채우기

Claude에게 이렇게 말하세요

이 전시 소개 페이지에 어울리는 작품 느낌의 이미지 6장을 무료 출처에서 받아서 갤러리에 넣어줘. 세로형 위주로

회사·브랜드 로고 — 공식 소스 확인해서

Claude에게 이렇게 말하세요

상단에 넣을 우리 회사 로고가 필요해. 공식 사이트에서 로고 이미지를 찾아서 넣고, 어디서 가져왔는지 출처도 알려줘

파비콘 — 브라우저 탭 아이콘까지

Claude에게 이렇게 말하세요

이 사이트 파비콘(브라우저 탭에 뜨는 작은 아이콘) 만들어줘. 우리 로고를 파비콘 크기로 맞춰서 넣고, 없으면 어울리는 아이콘으로 하나 만들어줘

이미 찾아둔 이미지 주소로 — 복붙 한 방

웹에서 마음에 드는 이미지를 우클릭 → “이미지 주소 복사” 하면 그 이미지의 인터넷 주소가 복사돼요. 그 주소를 그대로 붙여넣고 이렇게 말하면, 클로드가 직접 다운로드해서 public에 넣고 써줍니다.

Claude에게 이렇게 말하세요

이 주소 이미지 받아서 상단 배경으로 넣어줘: https://images.example.com/photo.jpg

여러 장이면 주소를 줄바꿈해서 여러 개 붙여넣어도 됩니다. 단, 내가 쓸 권리가 있는 이미지(무료 출처·직접 촬영·구매한 것)인지만 확인하세요. 가끔 사이트가 막아둬서 주소로는 안 받아질 때도 있는데, 그럼 이미지를 저장해서 채팅창에 드래그하면 됩니다(아래 방법 3).

찾아주긴 하지만 — 세 가지만 챙기세요

- 저작권: “무료 상업 이용 가능한 출처에서”라고 못박아 주세요. 확실치 않으면 그 이미지는 쓰지 말라고 하면 됩니다.

- 정확도: “머릿속의 바로 그 사진”은 AI가 못 읽어요. 특정 이미지가 있으면 직접 주는 게 빠릅니다(아래 방법).

- 확인: 로고·인물처럼 틀리면 곤란한 건 어디서 가져왔는지 출처를 물어보고 한 번 보세요.

7. 에러가 나면? — 그냥 던지세요

가장 중요한 마인드셋

우리는 개발을 배우러 온 게 아닙니다. 바이브 코딩을 하러 왔습니다!

에러 메시지를 이해할 필요가 없습니다. 빨간 글씨가 나오면 그대로 복사해서 붙여넣거나, 화면을 캡쳐해서 보내세요. AI가 읽고 알아서 고칩니다.

Claude Code에게 요청하는 방법은 두 가지예요. 말로 설명해도 되고, 화면을 캡쳐해서 이미지로 보내도 됩니다. 에러 화면이든 디자인 수정이든 — 스크린샷 한 장이 말 백 마디보다 빠를 때가 많아요.

바이브코딩의 핵심 루프

AI에게 말하기 → 결과 확인
↓
에러 발생? → 에러 메시지를 그대로 붙여넣기
↓
AI가 스스로 수정 → 다시 확인
↑ 이 사이클을 반복

AI가 이해 못했을 때

AI가 잘못 이해했거나 다른 걸 했나요?

Claude에게 이렇게 말하세요

아니야, 내가 원한 건 ___야

에러 메시지가 떴을 때

터미널이나 브라우저에 빨간 글씨? 복사해서 붙여넣거나 스크린샷을 보내세요.

Claude에게 이렇게 말하세요

이거 해결해줘: [에러 복사해서 붙여넣기 또는 스크린샷]

뭔가 안 될 때

예상대로 작동하지 않나요?

Claude에게 이렇게 말하세요

이게 안 되는데 확인해줘

터미널이 물어볼 때

(y/N) 같은 선택지가 나왔나요?

대문자로 쓰인 쪽이 권장 대답이에요. 그냥 Enter 누르면 자동으로 골라지고 넘어갑니다.

알아두면 든든한 세 가지

Esc

AI가 엉뚱한 방향으로 달리기 시작하면 끝날 때까지 기다릴 필요 없어요. Esc를 누르면 바로 멈추고, 그 자리에서 다시 말하면 됩니다.

되돌리기

수정하다 망가졌어도 괜찮습니다. “방금 그거 되돌려줘”라고 말하면 이전 상태로 되돌려줘요. 실험은 과감하게 해도 됩니다.

claude -c

창을 실수로 닫아도 대화는 사라지지 않아요. Desktop 앱은 이전 대화를 다시 열면 되고, 터미널이라면claude -c를 입력하면 직전 대화가 그대로 이어집니다.

8. 브라우저 개발자 도구 사용법

웹사이트에서 문제가 생겼을 때, 브라우저 개발자 도구를 사용하면 AI가 문제를 더 빠르게 해결할 수 있어요!

1

개발자 도구 열기

웹사이트에서 마우스 오른쪽 클릭 → "검사" 클릭

마우스 오른쪽 클릭 후 검사 메뉴
오른쪽 클릭 → '검사' 클릭

단축키: F12 또는 Ctrl+Shift+I (Mac: Cmd+Opt+I)

2

Console 탭과 모바일 미리보기

브라우저 개발자 도구 화면
개발자 도구에서 Console 탭을 클릭하면 에러를 볼 수 있어요
  • - Console(콘솔) 탭: 에러 메시지가 표시되는 곳
  • - 모바일 아이콘: 개발자 도구 왼쪽 상단에 있는 아이콘을 클릭하면 모바일 화면을 미리 볼 수 있어요
3

콘솔(Console) 에러 → Claude에게 전달

Console(콘솔) 탭에 빨간색 에러 메시지가 보이면:

  1. 1. 에러 메시지를 드래그해서 선택
  2. 2. 복사 (Ctrl+C 또는 Cmd+C)
  3. 3. Claude에게 붙여넣고 이렇게 말하세요:
Claude에게 이렇게 말하세요

이 에러를 해결해줘: [에러 메시지 붙여넣기]

꿀팁

개발자 도구의 에러 메시지를 그대로 Claude에게 보내면, 정확히 어디가 문제인지 파악하고 빠르게 고쳐줍니다.

9. 모바일에서도 예쁘게 — 반응형 꿀팁

반응형이란?

같은 웹사이트가 화면 크기에 따라 자동으로 모양이 바뀌는 것을 말해요. 아래에서 오른쪽 핸들을 드래그하거나, 프리셋 버튼을 눌러보세요.

드래그해서 화면 크기를 조절해보세요

PC600px
모바일
태블릿
PC
myshop.vercel.app
MyShop
HomeShopAboutContact

Summer Sale

Up to 50% off everything

Shop Now →

Products

Sneakers

$89

Backpack

$45

Watch

$120

3열 카드 + 전체 메뉴

처음부터 말해두세요!

프로젝트를 만들 때 "모바일에서도 잘 보이게 만들어줘"를 꼭 넣으세요. 나중에 고치는 건 처음부터 만드는 것보다 훨씬 어렵습니다.

CLAUDE.md에 규칙을 넣어두면 편해요

CLAUDE.md에 반응형 규칙을 넣었다면, AI가 만드는 페이지가 자동으로 모바일/태블릿/PC에 맞게 나와요. 아직 안 넣었다면 "반응형으로 만들어줘"라는 규칙을 CLAUDE.md에 추가해 달라고 말해보세요.

2

만들 때 모바일을 구체적으로 언급하기

AI에게 페이지를 요청할 때, 모바일을 구체적으로 언급하면 결과물이 달라집니다. "예쁘게", "깔끔하게" 같은 막연한 말 대신 구체적인 숫자와 동작을 알려주세요.

"카드 3개가 나란히 보이는 소개 페이지 만들어줘"

"카드 3개가 PC에서는 나란히, 모바일에서는 세로로 쌓이는 소개 페이지 만들어줘"

"상단에 네비게이션 바 만들어줘"

"PC에서는 가로 메뉴, 모바일에서는 햄버거 메뉴로 보이는 네비게이션 만들어줘"

레퍼런스 이미지 활용법

마음에 드는 모바일 사이트를 폰으로 스크린샷 찍고, Claude에게 붙여넣으면서 "이런 모바일 레이아웃으로 만들어줘"라고 하세요. AI가 머릿속에 있는 걸 읽진 못하지만, 이미지를 보여주면 정확하게 따라갑니다.

3

개발자 도구 + 실제 폰으로 확인

앞에서 배운 개발자 도구의 모바일 아이콘을 활용하세요.

1개발자 도구 열기 → 왼쪽 상단 모바일 아이콘 클릭
2상단 드롭다운에서 iPhone SE(375px) 선택 — 가장 작은 화면
3깨지는 부분이 있으면 스크린샷 찍어서 Claude에게 보내기
4

모바일에서 자주 생기는 문제 → 해결 프롬프트

글씨가 넘침/잘림

Claude에게 이렇게 말하세요

모바일에서 제목이 잘려. 화면 너비에 맞게 줄바꿈되게 해줘

카드가 옆으로 넘침

Claude에게 이렇게 말하세요

모바일에서 카드가 가로로 넘쳐. 세로로 쌓이게 바꿔줘

버튼이 너무 작음

Claude에게 이렇게 말하세요

모바일에서 버튼이 손가락으로 누르기 힘들어. 크기 키워줘

이미지가 화면 밖으로

Claude에게 이렇게 말하세요

이미지가 모바일 화면보다 커서 가로 스크롤이 생겨. 고쳐줘

메뉴가 화면을 가림

Claude에게 이렇게 말하세요

모바일에서 메뉴바가 콘텐츠를 가려. 햄버거 메뉴로 바꿔줘

여백이 너무 넓음

Claude에게 이렇게 말하세요

모바일에서 좌우 여백이 너무 커서 콘텐츠가 좁아 보여. 줄여줘

프로 꿀팁: 스크린샷 + 붙여넣기

모바일 미리보기에서 깨진 화면을 스크린샷 찍고 Claude에게 붙여넣으세요. "이 모바일 화면에서 이 부분이 이상해, 고쳐줘" — AI가 정확히 뭘 고쳐야 하는지 바로 파악합니다.
에러도 잡고, 모바일에서도 잘 보이면 거의 다 왔습니다!

다 만들었으면 → 저장하고 세상에 공개하기

완성한 사이트를 GitHub에 저장하고 Vercel로 인터넷에 공개하는 방법은 다음 페이지에서 다룹니다. 저장하고 세상에 공개하기 페이지로 →

이 페이지에서 배운 것

프로젝트를 만들고, AI와 기획하고, 반복 수정하며 완성도를 높이는 과정.

다음에 할 것

저장과 공개(GitHub · Vercel), 그다음 완성도를 높이는 기술(CLAUDE.md, 자동/계획 모드). API 키 보안은 수업 2에서 AI를 붙일 때 함께 다룹니다.