01
첫 빌드 — 와이어프레임 사진 → HTML
STEP 2
W1에서 만든 와이어프레임 사진을 Claude에 드래그 + 아래 프롬프트 복사. 빈칸은 본인 정보로.
PROMPT
첨부한 와이어프레임 사진을 보고 index.html 한 파일로 만들어줘.
- 색상: 톤 (예: 파스텔 블루)
- 폰트: Pretendard 또는 깔끔한 산세리프
- 반응형 (모바일·데스크탑 둘 다)
- 콘텐츠는 일단 Lorem Ipsum 채워두고 다음에 진짜로 바꿀게
- HTML/CSS 인라인으로, 한 파일에 다 넣어줘
먼저 골격만. 디테일은 나중에.
02
영역별 다듬기 — 4단계 (한 번에 하나씩!)
STEP 3
① 헤더
헤더 영역을 다듬어줘. 왼쪽에 로고 자리 (텍스트로 ''),
오른쪽에 메뉴 3개 (About, Works, Contact). 스크롤 시 살짝 투명해지는 sticky 헤더로.
② 히어로
히어로 영역에 큰 한 줄 메시지를 넣어줘:
''. 그 아래 CTA 버튼 'Works 보기'.
③ 갤러리
메인 영역에 작품 갤러리. 3열 그리드, 정사각형 카드,
호버하면 살짝 올라가는 효과.
④ 푸터
푸터에 이메일 ,
인스타 @, 카톡 ID .
가운데 정렬, 간결하게.
03
콘텐츠 교체 — Lorem Ipsum → 내 정보
STEP 4
PROMPT
이제 진짜 콘텐츠로 바꿔줘.
히어로 메시지: ''
자기소개:
- 이름:
- 나이/학년/직업:
- 한 줄 소개:
작품 3개 (이미지는 일단 picsum.photos):
1. —
2. —
3. —
연락처: 이메일 ,
인스타 , 카톡
04
자주 막힘 — 처방전 5
DEBUG
💢 Claude가 코드 안 줌
처방: 파일 이름·형식을 명시 → "index.html 한 파일로, HTML+CSS 인라인으로"
💢 저장했는데 화면 안 바뀜
처방: Cmd+S (저장) → 브라우저에서 Cmd+R 새로고침. 캐시 깊으면 Cmd+Shift+R
💢 한꺼번에 다 망가짐
처방: Cursor에서 Cmd+Z로 되돌리거나, Claude에 "방금 전 버전으로 복구해줘"
💢 한글 깨짐 (○○○ 표시)
처방: HTML 상단에 <meta charset="utf-8"> 있는지 확인. 없으면 Claude에 "한글 깨짐. utf-8 추가"
💢 모바일에서 글자 너무 큼/작음
처방: "모바일에서 본문 16px, 헤드라인 32px로 줄여줘. @media (max-width:640px)로 분기"
05
오늘의 점검 — 다 됐는지 체크
CHECK
W1 와이어프레임 사진 → Claude가 index.html 생성
파일 Google Drive/Dropbox 백업
이번 주에 나오는 용어들. 처음 듣는 게 정상입니다. 막힐 때 사전처럼 펴서 보세요.
클로드 코드Claude Code
Anthropic의 AI 코딩 도구. 사진·텍스트로 시키면 HTML을 만들어줌.예: "이 사진 같은 랜딩 만들어줘" → 코드 생성.
커서Cursor
AI가 내장된 코드 에디터. cursor.com에서 무료 다운로드.예: VS Code 위에 AI를 입힌 형태.
VS 코드VS Code
Microsoft의 무료 에디터. 개발자들의 표준. code.visualstudio.com.예: 워드와 비슷한데 코드 전용.
HTMLHyperText Markup Language
웹페이지의 구조를 만드는 언어. 제목·문단·이미지 배치.예: 건물의 골조와 같은 역할.
CSSCascading Style Sheets
웹페이지의 디자인·레이아웃 언어. 색·여백·폰트.예: 건물에 페인트칠하는 것.
자바스크립트JS · JavaScript
웹페이지의 인터랙션·동적 동작 언어. 버튼 클릭 등.예: 건물에 엘리베이터·자동문 다는 것.
반응형Responsive
모바일·태블릿·데스크탑 화면 크기에 맞게 자동 변형.예: 신축성 있는 옷처럼 화면에 맞춤.
로렘 입숨Lorem Ipsum
가짜 더미 텍스트. 진짜 콘텐츠 전 임시로 채워둠.예: "Lorem ipsum dolor sit amet…"
랜덤 이미지picsum · Unsplash
무료 샘플 이미지 사이트. picsum.photos · unsplash.com.예: 디자인 시안에 임시 이미지 넣을 때.
비전Vision
Claude의 이미지 인식 능력. 사진을 보고 코드를 만듦.예: 손그림 와이어프레임 → HTML.
스티키 헤더Sticky Header
스크롤해도 상단에 붙어있는 헤더. 메뉴 접근성 ↑.예: 네이버 메인 상단 검색바.
개발자 도구F12 · DevTools
브라우저 내장 개발자 도구. 디버깅·모바일 미리보기.예: F12 누르면 코드와 화면이 동시에 보임.