홈페이지 만들기 — 고급

이 과정에서 만드는 것

홈페이지 만들기 과정을 마친 분이 터미널과 외부 도구(API·Vercel 도구·MCP·백엔드) 로 홈페이지를 한 단계 더 키우는 고급 과정입니다. 지도 API, 방문자 분석, 브라우저 자동화, 도메인 고급 설정, 어드민 대시보드, SEO 고급까지 다룹니다. 기본 작업은 Claude 데스크탑 앱의 Code 탭에서 하고, 터미널과 CLI는 보조로 씁니다. 홈페이지 과정을 먼저 마치고 오세요.

전체 흐름

난이도는 ★ 쉬움 / ★★ 보통 / ★★★ 어려움이며, 이 과정은 대부분 ★★ 이상입니다. 쉬운 것부터 하려면 아래 표의 별 수를 보고 골라서 하세요.

강	난이도	한 줄 요약
12강	★	Vercel Analytics·Speed Insights로 방문자와 속도 확인 (가장 먼저 추천)
14강	★★	도메인 구입과 연결, 서브도메인·짧은 주소
13강	★★	Chrome 확장·Aside 브라우저로 낯선 설정 화면 돌파
18강	★★	JSON-LD, 속도, 지역 키워드로 검색 최적화
11강	★★★	네이버·카카오 지도 API로 마커·길찾기 (API 키 필요)
15강	★★★	MCP 서버로 Claude 능력 확장
16강	★★★	Pocketbase 어드민으로 메뉴·문의 관리 (선택)
17강	★★★	Supabase·카카오 로그인·예약 저장 (선택, 가장 어려움)
19강	★★★	방문자·예약·검색 현황을 모은 통합 대시보드 (선택)

강 번호는 홈페이지 과정(011강)에 이어 1119강이며, 위 표는 쉬운 순서이고 강의 순서와 다릅니다.

실습 결과물

• 방문자 통계와 속도 지표를 볼 수 있는 대시보드
• 마커·길찾기 버튼이 있는 지도, 검색 결과에 영업시간이 뜨는 구조화 데이터
• (선택) 어드민에서 메뉴를 고치면 홈페이지에 반영되는 구조
• (선택) 예약이 저장되고 한 화면에서 보이는 관리자 페이지

준비물

• 홈페이지 과정으로 만든 공개된 홈페이지와 GitHub·Vercel 연결
• 내 도메인(14강), 지도·Supabase·카카오 등 각 서비스의 무료 계정
• 서비스 키는 본인이 직접 발급해 안전한 곳에 보관 (대화창에 비밀번호·비밀 키를 붙여 넣지 않기)

끝나면 할 수 있는 것

• 내 홈페이지의 방문자·속도·검색 노출을 숫자로 확인할 수 있다
• 낯선 설정 화면에서 Claude에게 도움을 받거나 맡길 수 있다
• 도메인을 직접 사서 서브도메인과 짧은 주소까지 설정할 수 있다
• 필요하면 어드민·로그인·예약 같은 백엔드 기능의 구조를 이해하고 붙여 볼 수 있다

🔎 같은 방식으로 만든 실제 사이트는 홈페이지 1강 "실제 사례로 보는 홈페이지"에서 볼 수 있습니다: makeupforl.co.kr · punolchi.com · mp3-free.org