배포와 SEO

🔄 복습: 지난 레슨에서 이슈를 디버깅하고 성능을 최적화했어요 — Core Web Vitals, 이미지 최적화, 접근성 감사. 이제 사이트를 라이브로 올리고 검색 엔진에 보이게 만들어볼게요.

호스팅 플랫폼 선택

정적 웹사이트(서버 사이드 코드 없는 HTML, CSS, JavaScript)의 경우:

Help me choose a hosting platform for my static website:

My site: [describe: portfolio, blog, business landing page, etc.]
Files: HTML, CSS, JavaScript (no server-side code)
Expected traffic: [low / medium / high]
Custom domain: [yes/no, do I have one?]
Budget: [free / minimal / flexible]

Compare these options for my needs:
1. Netlify — What are the pros, cons, and free tier limits?
2. Vercel — What are the pros, cons, and free tier limits?
3. GitHub Pages — What are the pros, cons, and limitations?
4. Cloudflare Pages — What are the pros, cons, and free tier limits?

Which is best for my specific situation and why?

한국에서 웹사이트를 호스팅할 때, Netlify와 Vercel은 글로벌 CDN으로 한국 사용자에게도 빠른 속도를 제공해요. 한국 호스팅인 카페24도 옵션이에요 — 특히 .kr 도메인이나 한국 결제 연동이 필요할 때요. AWS 서울 리전을 활용하면 한국 사용자에게 최적의 레이턴시를 제공할 수 있어요.

배포 전 체크리스트

라이브로 올리기 전에 모든 것을 확인하세요:

Create a pre-deployment checklist for my website:

[describe your site structure and features]

Check these categories:

CONTENT:
- All placeholder text replaced with real content
- All links work (no 404s)
- Contact information is correct
- Legal pages present (privacy policy, terms if needed)

TECHNICAL:
- Favicon and touch icons configured
- 404 error page created
- HTTPS enabled (SSL certificate)
- Redirects configured for old URLs (if migrating)
- Analytics tracking installed
- Console free of errors and warnings

PERFORMANCE:
- Images optimized and lazy-loaded
- CSS and JavaScript minified
- Critical CSS inlined
- Fonts preloaded

SEO:
- Every page has unique title and meta description
- Open Graph tags for social sharing
- Sitemap.xml generated
- robots.txt configured
- Structured data added

Organize as a checklist I can work through before launch.

SEO 최적화

모든 페이지의 메타 태그

Write the HTML head meta tags for this page:

Page type: [home / about / blog post / product / portfolio]
Page title: [your page title]
Page description: [what this page is about]
Primary keyword: [target search term]
Page URL: [full URL]

Generate:
1. Title tag (under 60 characters, keyword near the beginning)
2. Meta description (150-160 characters, compelling, includes keyword)
3. Canonical URL
4. Open Graph tags (og:title, og:description, og:image, og:url, og:type)
5. Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image)
6. Viewport meta tag
7. Language declaration

Also include a robots meta tag (index, follow for public pages).

한국 웹 SEO에서는 Google뿐 아니라 네이버도 중요해요. 네이버 서치어드바이저에 사이트를 등록하고, 다음 웹마스터도구에도 등록하는 것을 잊지 마세요. 한국 검색 시장에서 네이버의 점유율이 여전히 높기 때문이에요.

검색 엔진	등록 도구	핵심 포인트
Google	Google Search Console	국제 표준, 구조화 데이터 중시
네이버	네이버 서치어드바이저	네이버 블로그/카페 콘텐츠와 연동
다음	다음 웹마스터도구	카카오 검색 생태계

구조화 데이터 (JSON-LD)

Generate JSON-LD structured data for this page:

Page type: [Article / FAQ / HowTo / Product / LocalBusiness / Person]
Content: [describe the page content]

For an Article, include:
- headline, description, author, datePublished, dateModified
- publisher with logo
- Image (main image of the article)

For a FAQ page, include:
- Each question and answer pair

For a HowTo, include:
- Steps with text and optional images
- Total time, tools needed

Output valid JSON-LD wrapped in a script tag. Verify against Google's structured data guidelines.

✅ 확인 질문: 인라인 마이크로데이터 대신 JSON-LD 형식으로 구조화 데이터를 넣는 이유는?

JSON-LD는 Google이 권장하는 형식이에요. HTML과 분리돼 있어서 — head에 스크립트 블록을 추가하면 페이지 마크업이 깔끔하게 유지돼요. 마이크로데이터(itemscope, itemtype, itemprop 사용)는 메타데이터를 HTML 요소에 섞어서 마크업을 읽고 유지보수하기 어렵게 만들어요. JSON-LD는 AI가 생성하기도 쉬워요 — 그냥 JSON 객체예요.

사이트맵과 robots.txt

Generate a sitemap.xml and robots.txt for my website:

Pages:
- / (homepage, updated weekly)
- /about (static, updated monthly)
- /blog/ (listing page, updated weekly)
- /blog/post-1/ (article, published [date])
- /blog/post-2/ (article, published [date])
- /contact (static, updated rarely)
[list all pages]

For sitemap.xml:
- Include lastmod dates
- Set changefreq appropriately
- Set priority (1.0 for homepage, 0.8 for main sections, 0.6 for posts)

For robots.txt:
- Allow all crawlers
- Disallow admin or private paths (if any)
- Point to sitemap location

도메인과 DNS 설정

Help me configure DNS for my custom domain:

Domain registrar: [GoDaddy / Namecheap / Google Domains / Cloudflare / other]
Hosting platform: [Netlify / Vercel / GitHub Pages / other]
Domain: [yourdomain.com]

Provide step-by-step instructions for:
1. Adding the domain to my hosting platform
2. Configuring DNS records (A records, CNAME, etc.)
3. Setting up www to non-www redirect (or vice versa)
4. Enabling HTTPS / SSL certificate
5. Verifying the domain is working correctly

Include the specific DNS record values I need to enter.

런칭 후 모니터링

Create a post-launch monitoring checklist for my website:

Week 1:
- What to check daily for the first week
- How to verify search engine indexing (Google Search Console setup)
- How to confirm analytics are tracking correctly

Month 1:
- Key metrics to track
- Common post-launch issues to watch for
- When to check Core Web Vitals in the field (real user data)

Ongoing:
- Monthly maintenance tasks
- How to monitor for broken links
- When to update content for SEO freshness

✅ 확인 질문: Core Web Vitals에서 랩 데이터 대신 “실제 사용자 데이터"를 확인하는 이유는?

랩 데이터(Lighthouse, PageSpeed Insights)는 한 위치에서 한 디바이스로 한 연결 속도로 테스트해요. 실제 사용자 데이터(Chrome User Experience Report, Search Console)는 실제 방문자가 느리는 폰, 지방 연결, 오래된 브라우저에서 사이트가 어떻게 작동하는지 보여줘요. Lighthouse에서 95점이지만 3G 연결의 실제 사용자에게는 60점일 수 있어요.

연습: 프로젝트 배포하기

호스팅 플랫폼을 선택하세요 (초보자에게는 Netlify 또는 Vercel 추천)
배포 전 체크리스트를 프로젝트에 실행하세요
모든 페이지에 메타 태그와 Open Graph 데이터를 추가하세요
sitemap.xml과 robots.txt를 생성하세요
사이트를 배포하고 커스텀 도메인(또는 무료 서브도메인)에서 작동하는지 확인하세요
Google Search Console에 사이트맵을 제출하세요 (네이버 서치어드바이저도 잊지 마세요)

핵심 정리

메타 디스크립션은 검색 결과의 세일즈 피치예요 — 사용자가 여러분의 링크를 클릭할지 경쟁사의 링크를 클릭할지 결정하는 150-160자
구조화 데이터(JSON-LD)는 검색 결과에서 리치 스니펫을 활성화해요 — 별점, FAQ, 가이드 단계 — 가시성을 극적으로 높여요
기술적 SEO 기초(속도, 모바일 반응성, 올바른 HTML)가 콘텐츠 전략이 의미를 가지기 전에 먼저 견고해야 해요
모든 페이지에 고유한 타이틀 태그(60자 미만)와 타겟 키워드가 포함된 메타 디스크립션이 필요해요
Netlify, Vercel 같은 플랫폼에 배포하면 무료 HTTPS, CDN 배포, 간단한 커스텀 도메인 설정이 가능해요
런칭 후 실제 사용자 Core Web Vitals를 모니터링하세요 — 랩 점수는 실제 사용자 경험을 반영하지 않아요

다음 레슨: 마지막 레슨에서 처음부터 완전한 웹사이트를 만들어요 — 배운 모든 것을 하나의 실제 배포 가능한 프로젝트로 결합해요.