홈페이지 만들기

과정 안내 영상 (8분) — 사업자 홈페이지+챗봇 구축 사례

쇼츠: https://youtube.com/shorts/x_-kasQ_aFQ , https://youtube.com/shorts/0nzvo1_H1p4

이 과정에서 만드는 것

코딩을 몰라도, 클로드 데스크탑 앱의 Code 탭에 한국어로 말해서 내 도메인으로 공개되는 홈페이지를 만듭니다. 가장 쉬운 한 페이지 소개 사이트로 시작해, 사진·지도·디자인·여러 페이지·검색 등록까지 한 단계씩 늘려 갑니다. 터미널은 열지 않아도 되고, 터미널 방법은 각 강의의 '터미널로도 할 수 있어요'에 보조로 남겨 두었습니다.

전체 흐름

강	한 줄 요약
0강	핵심 요약본: 파일 만들기 → Git 저장 → Vercel 배포를 10분 만에 맛보기
1강	홈페이지가 파일·호스팅·도메인 3가지로 이루어진다는 것을 알고 종이에 구상하기
2강	Claude 데스크탑 앱과 Git 설치, Code 탭 열기
3강	my-site 폴더를 만들어 Code 탭에 연결하고 첫 대화 나누기
4강	먼저 이것부터(한 페이지 소개)로 첫 결과를 보고, 내 유형으로 확장한 뒤 Git으로 첫 세이브
5강	사진·지도·소개 글을 채우고 전화·인스타 링크 살리기
6강	색 3개·글꼴 1개·간격 규칙(DESIGN.md)으로 디자인 정리, 폰 화면 점검
7강	두 페이지로 나누기(필요하면 네 페이지), 공통 메뉴 관리
8강	GitHub와 Vercel로 공개해 폰에서 열어 보기
9강	내 도메인 연결, 페이지 제목·설명, (선택) 공유 미리보기
10강	구글 서치 콘솔·네이버 서치 어드바이저 등록
11강	문의 받는 법(링크 버튼, 선택으로 폼)과 혼자 관리하는 루틴

난이도 기준: 섹션 수, 이미지·입력 폼 유무, 외부 서비스 연동 여부, 프롬프트 길이로 ★ 쉬움 / ★★ 보통 / ★★★ 어려움을 매기고, 4강의 유형별 예시는 쉬운 것부터 어려운 순서로 놓았습니다.

4강 유형 순서(쉬운 것부터): 먼저 이것부터(한 페이지 소개, ★) → 개인·블로그(★) → 가게·매장(★★) → 포트폴리오(★★) → 소규모 회사(★★) → 행사·웨딩(★★★)

실습 결과물

• 내 이름·소개·사진·연락처가 들어간 한 페이지 홈페이지 (4강, 15분 안에)
• 사진·지도·디자인 규칙이 적용된 폰에서도 보기 좋은 홈페이지 (5~7강)
• https://….vercel.app 주소, 이후 내 도메인으로 열리는 공개 사이트 (8~9강)
• 구글·네이버에 등록된 사이트, 문의 버튼, 수정→커밋→push 루틴 (10~11강)
• 다음 홈페이지에도 쓸 CLAUDE.md, DESIGN.md

🔎 완성된 모습이 궁금하면 1강의 실제 사례로 보는 홈페이지에서 오쌤이 만든 사이트 3곳을 구경해 보세요.

준비물

• Claude 계정(유료 구독)과 Claude 데스크탑 앱, Git(Windows만 설치)
• GitHub·Vercel 무료 계정
• 바탕화면 my-site 폴더, 사진 1~5장(없어도 회색 상자로 진행 가능), 이름·한 줄 소개·연락처
• 9강부터는 도메인 구입비(연 1~2만 원대, 선택)

끝나면 할 수 있는 것

• 말로 시켜서 홈페이지를 만들고 고칠 수 있다
• 마음에 안 들면 한 번에 하나씩 고치고, 망치면 Git으로 되돌릴 수 있다
• 내 홈페이지를 인터넷에 공개하고, 도메인을 달고, 검색에 나오게 할 수 있다
• 수정할 때마다 확인 → 커밋 → push로 1분 만에 반영할 수 있다