사진·지도·글 채우기

사진 준비

사진이 있다면

프로젝트 폴더 안에 images 폴더를 만들고 거기에 넣습니다. 파일 이름은 영어 소문자로 (hero.jpg, menu-1.jpg). 한글 이름은 인터넷에 올렸을 때 깨질 수 있습니다.

사진이 없다면

무료 사진 사이트(Unsplash, Pexels)에서 받아 쓰면 됩니다. 상업 이용도 가능합니다. Claude Code에게 "카페 분위기 무료 사진을 Unsplash에서 찾는 검색어 알려줘"라고 물어봐도 됩니다.

크기 줄이기 — 중요

폰으로 찍은 사진은 5MB가 넘습니다. 그대로 넣으면 홈페이지가 느려집니다. Claude Code에게 시키세요.

도구 설치 허락을 물어보면 Yes. 끝나면 파일 크기가 확 줄어 있습니다.

사진 넣기 (★ 쉬움 · 약 10분)

새로고침. 사진이 늘어나 보이거나 잘리면:

지도 넣기 (★★ 보통 · 약 15분 · 선택)

지도가 어렵게 느껴지면 주소 글자만 두고 건너뛰어도 됩니다. 나중에 다시 와서 해도 홈페이지는 완성됩니다.

지도는 직접 그리지 않고 지도 서비스의 삽입 코드를 가져옵니다. 한국 가게라면 네이버 지도 또는 카카오맵을 씁니다.

네이버 지도 (기본 권장)

1. map.naver.com 에서 가게 주소 검색
2. 가게 이름 클릭 → 공유 → 지도 퍼가기 → <iframe> 코드 복사
3. Claude Code에게:

카카오맵 (선택)

1. map.kakao.com 에서 가게 주소 검색
2. 가게 이름 클릭 → 지도 퍼가기 → <iframe> 코드 복사
3. 위와 같이 Claude Code에게 전달

두 서비스 모두 <iframe> 코드를 복사해 붙여넣는 방식이 같습니다. 네이버 지도는 네이버 앱과 연동, 카카오맵은 카카오내비·카카오맵 앱과 연동됩니다.

글 다듬기 (★ 쉬움 · 약 10분)

홈페이지에서 가장 많이 읽히는 건 첫 화면 한 줄과 메뉴/서비스 설명입니다. 직접 써도 좋고 Claude Code에게 초안을 받아도 됩니다.

마음에 드는 걸 고르고:

메뉴 설명도 마찬가지입니다. "각 메뉴에 한 줄 설명을 추가해줘. [메뉴1은 …, 메뉴2는 …]".

링크 살리기 (★ 쉬움 · 약 5분)

전화번호와 인스타그램을 누르면 동작하게 만듭니다.

폰에서 확인하려면 8강까지 기다려야 하지만, PC 브라우저에서 링크에 마우스를 올려보면 왼쪽 아래에 tel:010…이 보이면 됩니다.

세이브

git add .
git commit -m "사진, 지도, 소개 글 추가"

앞으로 뭔가 하나 잘 되면 바로 커밋. 이게 리듬입니다.

오늘의 실습 체크

다음 강의

6강, 디자인. 색 3개와 글꼴 1개만 정해도 "AI가 만든 티"가 사라집니다.