WEEK 11 · 2026 · CLASS II
구글이 내 사이트를
찾게 한다
예쁘게 만들었는데 — 아무도 못 찾으면? 오늘은 구글·네이버 검색에 노출시키고, 누가 왔는지 데이터로 본다. 메타 태그·OG 이미지·Google Analytics·Search Console — 진짜 비즈니스로 가는 길.
Duration120 minutes
ToolGA4 · Search Console
Output검색 등록 + 분석 코드
Phase사이트 운영·확장 (11/12)
02 / Learning Goals⏱ 5분
오늘의 학습 목표
1
SEO 메타 태그
title·description·keywords·canonical — 검색엔진에게 내 사이트 정체 알리기.
2
Open Graph 이미지
카톡·인스타·페북에 URL 붙였을 때 보이는 미리보기 카드. 클릭률 3배.
3
Google Analytics 4
누가·어디서·몇 명·뭘 봤는지 실시간 데이터. 무료 + 30초 설치.
4
Search Console + Sitemap
구글에게 "여기 사이트 있어요, 등록해줘" 신청. sitemap.xml 제출까지.
03 / Concept⏱ 10분
명함 → 검색 노출 → 진짜 비즈니스
사이트만 띄워놓으면 전기세 내는 명함일 뿐. 검색에 노출돼야 — 일주일에 모르는 사람 100명이 자동으로 찾아옴. 오늘이 그 분기점이에요.
📇
사이트 1.0
예쁘지만
아무도 모름
아무도 모름
→
🔍
SEO + GA4
구글 등록
방문자 측정
방문자 측정
=
💼
비즈니스
자동 유입
의뢰·매출
의뢰·매출
핵심: "있다"와 "찾을 수 있다"는 다르다. 검색에 안 잡히면 — 인스타·카톡으로만 알릴 수밖에. 오늘 작업 하나로 구글이 알아서 손님 데려옴.
04 / Prompt Pattern⏱ 15분
SEO 프롬프트 — 막연 vs 명확
❌ 막연한 SEO 요청
"내 사이트
SEO 잘 되게 해줘.
구글 1등 만들어줘."
SEO 잘 되게 해줘.
구글 1등 만들어줘."
왜 안 되나? "잘 되게"가 너무 모호. 1등은 검색어·경쟁사에 따라 다름. AI가 100가지를 들이부어도 검증 불가.
결과: 어디부터 봤는지 모르는 코드 떡칠.
✓ 핵심 5가지 명확 요청
1단계: "메타 5개 추가:
title·description·keywords·
canonical·viewport"
2단계: "Open Graph 4개:
og:title·og:description·
og:image·og:url"
3단계: "GA4 측정 ID
G-XXXXX 코드 삽입"
4단계: "sitemap.xml 생성"
title·description·keywords·
canonical·viewport"
2단계: "Open Graph 4개:
og:title·og:description·
og:image·og:url"
3단계: "GA4 측정 ID
G-XXXXX 코드 삽입"
4단계: "sitemap.xml 생성"
왜 좋나? 4단계 명확. 각 단계 검증 가능 (소스 보기). 막히면 그 단계만.
결과: 검색엔진이 진짜 이해하는 깨끗한 메타.
💡 오늘의 비법: SEO는 "기본 5개부터" — 메타 5개·OG 4개·GA 1줄·sitemap 1개. 그 이상은 다음 학기. 욕심 X, 완성 O.
05 / Live Build · Step 1⏱ 10분
Step 1 — 메타 태그 5개
검색엔진은 <head> 안의 메타 태그를 가장 먼저 본다. 구글 검색 결과에 뜨는 그 파란 제목·회색 설명이 바로 여기서 나옴.
1
필수 메타 5개 — index.html <head>에 추가
<!-- ① title: 구글 검색 결과 파란 제목 (50-60자) -->
<title>홍길동 · 포토그래퍼 포트폴리오</title>
<!-- ② description: 그 아래 회색 설명 (150-160자) -->
<meta name="description" content="서울 기반 일상 사진가 홍길동. 결혼식·가족·반려동물 촬영. 부드러운 자연광이 강점.">
<!-- ③ keywords: 검색어 5-10개 (이젠 가중치 낮지만 작성 권장) -->
<meta name="keywords" content="서울 사진가, 결혼식 스냅, 가족 사진, 반려동물 촬영, 홍길동">
<!-- ④ canonical: 중복 페이지 방지 (구글 권장) -->
<link rel="canonical" href="https://내도메인.com/">
<!-- ⑤ viewport: 모바일 대응 (이미 있을 것) -->
<meta name="viewport" content="width=device-width, initial-scale=1">
🎙
멘토 멘트
"title이 가장 중요해요. 구글에 검색했을 때 파란 글씨로 뜨는 그 한 줄. '홍길동' 이렇게만 쓰면 아무도 안 눌러요. '서울 결혼식 사진가 홍길동' 처럼 — 검색하는 사람이 진짜 찾는 단어를 넣어야 해요."
📝
학생 액션 (8분)
Claude에 "내 index.html <head>에 메타 5개 추가해줘. 내용은 [내 직업·지역·강점]" 요청. 받은 코드 붙여넣기 → 저장 → 브라우저 탭 제목 바뀌었는지 확인.
05 / Live Build · Step 2⏱ 15분
Step 2 — Open Graph 미리보기 카드
카톡·인스타·페북에 내 URL 붙였을 때 — 큰 이미지 + 제목 + 설명이 박힌 카드가 뜨는 그 마법. og: 태그 4개로 끝.
2
Open Graph 4개 + 트위터 카드 1개
<!-- ① OG 이미지: 1200×630px 권장 (필수!) -->
<meta property="og:image" content="https://내도메인.com/og-cover.jpg">
<!-- ② OG 제목 (title보다 더 어필) -->
<meta property="og:title" content="홍길동 · 서울 결혼식 사진가">
<!-- ③ OG 설명 -->
<meta property="og:description" content="부드러운 자연광. 자연스러운 순간.">
<!-- ④ OG URL -->
<meta property="og:url" content="https://내도메인.com/">
<!-- ⑤ 트위터 카드 (보너스) -->
<meta name="twitter:card" content="summary_large_image">
💡
OG 이미지 만들기 — 3가지 방법
// ① Canva 무료 템플릿 (가장 쉬움)
canva.com → "Open Graph" 검색 → 1200×630 템플릿 선택
// ② Figma로 직접 (이미 W6에서 배움)
1200×630 프레임 → 내 작품 사진 + 이름·타이틀 텍스트
// ③ Claude한테 SVG 요청 → 스크린샷
"1200×630 OG 이미지용 SVG 만들어줘.
배경 [내 색], 큰 제목 '홍길동', 부제 '사진가'"
// 검증: 카톡 미리보기 테스트
- 카카오 디버거: developers.kakao.com/tool/debugger/sharing
- 페북 디버거: developers.facebook.com/tools/debug
🎙
멘토 멘트
"OG 이미지가 진짜 무기예요. 친구가 카톡으로 내 URL 보냈을 때 — 큰 사진이 뜨면 클릭률 3배. 그냥 회색 박스만 뜨면 아무도 안 눌러요. 오늘 30분 투자해서 평생 써먹는 거예요."
🎨
학생 액션 (12분)
Canva에서 OG 이미지 1장 제작 → Firebase Storage 업로드 → URL 복사 → og:image에 박기 → 카카오 디버거에서 미리보기 확인.
05 / Live Build · Step 3⏱ 15분
Step 3 — Google Analytics 4 설치
방문자 수·체류 시간·어디서 왔는지 실시간으로 보는 무료 도구. 30초 설치 + 평생 데이터 쌓임.
3
GA4 가입 3단계
// ① 가입
analytics.google.com → "측정 시작" → Google 계정 로그인
// ② 속성 만들기
- 계정 이름: [내 이름]
- 속성 이름: [내 사이트 이름]
- 시간대: 대한민국 / 통화: KRW
- 비즈니스 카테고리: 아무거나 (예술/엔터)
// ③ 데이터 스트림: 웹
- 웹사이트 URL: https://내도메인.com
- 스트림 이름: 메인 사이트
→ "스트림 만들기"
→ 측정 ID 받음: G-XXXXXXXXXX (복사!)
💡
코드 삽입 — index.html <head> 맨 위
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
// 저장 → 배포 (W3에서 배운 firebase deploy)
// → 본인 사이트 한 번 방문 → GA4 "실시간" 탭에서 본인 확인 ✨
🎙
멘토 멘트
"이거 안 깔고 사이트 운영하는 건 — 가게 열어놓고 손님 들어왔는지 안 봤는지 모르는 거예요. 처음엔 본인 혼자 봐도 OK. 1주일 지나면 모르는 사람들이 보이기 시작해요. 그게 진짜 짜릿한 순간."
📊
학생 액션 (13분)
GA4 가입 → 측정 ID 복사 → Claude에 "이 G-XXX 코드를 head 맨 위에 추가해줘" → 저장 → 배포 → 본인 사이트 1회 방문 → GA4 실시간 탭에 본인 점 1개 보이면 성공.
05 / Live Build · Step 4⏱ 15분
Step 4 — Search Console + Sitemap
구글에게 직접 신청: "우리 사이트 검색에 등록해줘". + sitemap.xml로 페이지 목록 제공 → 24-48시간 내 검색 등재.
4
Search Console 등록 4단계
// ① 가입
search.google.com/search-console → Google 로그인 → "지금 시작"
// ② 속성 추가 — "URL 접두어" 선택
URL 입력: https://내도메인.com/
→ "계속"
// ③ 소유권 확인 — 가장 쉬운 방법: HTML 태그
구글이 메타 태그 1줄 줌:
<meta name="google-site-verification" content="abc123...">
→ Claude에 "이거 내 head에 추가해줘"
→ 저장·배포 → Search Console "확인" 클릭 → ✅ 완료
// ④ Sitemap 제출
좌측 메뉴 → Sitemaps → sitemap.xml 입력 → 제출
💡
sitemap.xml 만들기 — Claude에 요청
// Claude 프롬프트
"내 사이트의 sitemap.xml 만들어줘.
페이지는 5개:
- / (메인)
- /about
- /works
- /blog
- /contact
각각 lastmod 오늘 날짜, priority 적절히."
// Claude가 준 XML 내용
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://내도메인.com/</loc>
<lastmod>2026-05-17</lastmod>
<priority>1.0</priority>
</url>
// ... 나머지 4개 동일 구조
</urlset>
→ public/sitemap.xml 파일로 저장 → 배포 → Search Console 제출
🎙
멘토 멘트
"등록한다고 바로 검색에 안 떠요. 보통 24시간, 길면 일주일. 그 사이 sitemap.xml은 구글한테 '여기 페이지 5개 있어요, 다 봐주세요' 알리는 안내장이에요. 1번만 제출하면 끝."
🔍
학생 액션 (13분)
Search Console 등록 → 소유권 확인 메타 추가·배포 → ✅ 확인 → Claude에 sitemap.xml 요청 → public/sitemap.xml 저장·배포 → Search Console에 sitemap 제출 → "성공" 메시지.
05 / Live Build · Step 5⏱ 10분
Step 5 — 첫 방문자 통계 + 마케팅 박기
설치만 하고 끝? 인스타·노션·이력서·메일 서명에 URL 박아야 진짜 사람이 옴. 그래야 GA4에 점이 찍힘.
5a
GA4 첫 데이터 확인
// GA4 좌측 메뉴 → 보고서 → 실시간
✓ 현재 활성 사용자 (지금 내 사이트 보고 있는 사람 수)
✓ 어디서 왔는지 (Direct / 검색 / SNS)
✓ 어떤 페이지 보고 있는지
✓ 어느 나라·도시에서 접속
// 보고서 → 참여도 → 페이지 및 화면
✓ 어떤 페이지가 가장 인기?
✓ 평균 체류 시간 (목표: 30초 이상)
5b
URL 박기 — 7곳 체크리스트
□ 인스타 프로필 바이오 링크 (가장 효과 큼)
□ 노션 개인 페이지 상단 + 푸터
□ 카톡 프로필 메시지
□ 이력서·자기소개서 상단
□ 메일 서명 (Gmail 설정 → 서명)
□ 유튜브 채널 소개 + 영상 설명
□ 링크드인 프로필 웹사이트 칸
✓
오늘의 5분 추가 — 검색에 잡혔는지 확인
site:내도메인.com ← 구글에 이렇게 검색
→ 내 페이지가 나오면 등록 완료 (24-48시간 후)
→ 안 나오면 아직 크롤링 중 (정상)
내 이름 + 직업으로 검색
→ 일주일 후 1페이지에 뜨면 성공
🎙
오늘의 마무리
"오늘부터 매주 한 번씩 GA4 들어가서 데이터 보세요. 누가·어디서·뭘 봤는지. 처음엔 본인 1명일 거예요. 한 달 후엔 모르는 사람 30명. 그게 진짜 사이트가 살아있다는 증거예요."
📣
학생 액션 (8분)
GA4 실시간 보고서 확인 → 7곳 중 최소 3곳에 URL 박기 (인스타·노션·카톡 우선) → 친구 3명에게 카톡으로 URL 공유 → 다시 GA4 → 점이 늘었는지 확인.
10 / Checkpoint⏱ 5분
SEO 점검 5가지
✅오늘 잘 됐다면
- 메타 5개 head에 추가됨 (소스 보기로 확인)
- OG 이미지 카톡 디버거에서 미리보기 뜸
- GA4 측정 ID 코드 삽입 + 실시간 본인 점 1개
- Search Console 소유권 확인 ✅
- sitemap.xml 제출 "성공" 메시지
⚠️자주 막히는 부분
- 카톡 미리보기 안 바뀜 → 카카오 디버거에서 "새로 갱신" 클릭
- GA4 실시간 데이터 0명 → 광고 차단 확장 끄고 다시 방문
- Search Console 확인 실패 → 메타 태그 배포 됐는지 (소스 보기)
- sitemap.xml 404 → public/ 폴더에 있는지, 배포됐는지
- "site:내도메인" 검색 안 뜸 → 48시간 더 기다리기 (정상)
11 / Challenge⏱ 10분
마케팅 깊이 도전
📰
블로그 RSS 피드 — blog/ 페이지의 글들을 rss.xml로 자동 생성. 구독자 받을 수 있는 첫 발.
난이도 ★
💬
카카오톡 채널 + 친구추가 버튼 — pf.kakao.com 채널 개설 → 사이트 푸터에 "카톡 상담" 버튼. 의뢰 자동 들어옴.
난이도 ★★
🔑
SEO 키워드 분석 + 글 1편 — Search Console "성과" 탭 → 내 사이트가 어떤 검색어로 노출되는지 확인 → 그 키워드로 블로그 글 1편 작성.
난이도 ★★★
12 / Student Gallery⏱ 7분
선배들 SEO 결과
📊
GA4 첫 100명
🔍
구글 1페이지 진입
💌
첫 의뢰 메일
📈
한 달 트래픽 그래프
🎨
OG 이미지 모음
🌐
검색 결과 스크린샷
📌 첫 학기 종료 후 학생 운영 데이터·SEO 결과 스크린샷을 여기에 채울 예정입니다.
13 / Next Week⏱ 5분
다음 시간 예고
WEEK 12 · GRADUATION
통합 런칭 +
🎓 졸업 데이
12주 코스 — 마지막 주. 사이트 1.0 → 정식판 + 뮤비 임베드 통합 마무리. 친구·가족 베타 테스트 → SNS·이력서·노션에 박기 → 2분씩 발표 → 졸업!
PREPARE · 다음 주 준비물
- 오늘 작업한 SEO 적용 사이트 (메타·OG·GA4 완료)
- W10에서 만든 뮤직비디오 파일/링크 (사이트 임베드용)
- 친구·가족 3명 베타 테스터 섭외 (수업 중 카톡 가능한 분)
- 발표 자료 — 2분 스피치 (제목·콘셉트·기억나는 한 장면)
- 축하 마인드 🍰 — 12주 끝 + 새로운 시작