Document: 페이지의 척추

"<head> 는 렌더 안 돼. 정확히 그래서 너의 버그 절반이 거기 살아."

반드시 맞아야 할 여섯 줄

눈에 보이는 콘텐츠 전에, 모든 페이지에 렌더되지 않는 여섯 가지가 필요해. 하나라도 빠지면 뭔가가 조용히 망가져 — 잘못된 문자 인코딩, 모바일에서 흐릿한 렌더링, 탭 제목 없음, 공유 미리보기 없음, 검색 결과에 설명 없음. 하나씩 짚고 빠졌을 때 무슨 일이 생기는지 보자.

1. `<!DOCTYPE html>` — 항상 첫 줄

이건 태그가 아니야. 브라우저 파서한테 보내는 신호야: 모던 표준-준수 HTML 렌더링을 써라. 빼면 브라우저가 조용히 quirks mode 로 떨어져 — 옛 페이지가 깨지지 말라고 1990 년대 layout 버그를 의도적으로 재현하는 backward-compat 레이어야. Quirks mode 는 box-sizing 동작을 망가뜨리고, 모던 table-layout 알고리즘을 무시하고, flexbox 를 조용히 깨뜨리는 짓들을 해. 공포의 현장이야. <!DOCTYPE html> 을 항상 맨 앞에 놔.

2. `<html lang="en">` — 언어 선언

lang 속성은 screen reader 한테 어떤 음성을 쓸지 (영어 vs 한국어 vs 일본어) 알려 주고, 브라우저한테 어떤 hyphenation 규칙을 쓸지 알려 주고, 검색 엔진한테 이 페이지를 어떤 언어 결과에서 보여줄지 알려 줘. 빼면 screen reader 가 한국어 페이지를 영어 발음으로 읽을 수 있어 (들리는 만큼 끔찍해).

3. `<meta charset="utf-8">` — `<head>` 안 첫 줄

UTF-8 은 2026 년에 출시할 유일한 문자 인코딩이야. <head> 안에 맨 처음 놔서 브라우저가 텍스트 파싱 전에 인코딩을 알게 해. 빼면 너의 이모지, 악센트 문자, 한국어가 한국어 → ?Œ ¬Œ‹ÄÌ» 같은 헛소리로 변해.

4. `<meta name="viewport" content="width=device-width, initial-scale=1">`

이거 없으면 모바일 브라우저가 980px 너비 데스크톱인 척하고 zoom out 해 — 옛 비반응형 사이트가 폰에서 우표만 하게 보이는 이유. Viewport meta 는 "기기 실제 너비로 zoom 1 에서 렌더" 라고 알려. 모든 모던 페이지에 필요해. 단 하나도 빠짐없이.

5. `<title>` — 탭 제목, bookmark 이름, 검색 결과 헤드라인

<title> 은 브라우저 탭에 뜨는 것, bookmark 이름이 되는 것, Google 이 검색 결과의 링크 헤드라인으로 보여주는 것. Title 빠짐 = bookmark 와 탭 목록에 "Untitled". 일반적인 title = 누구도 탭을 구분 못 함.

6. `<meta name="description">` + Open Graph

Description meta 는 검색 엔진이 title 아래 보여주는 글. Open Graph 태그 (og:title, og:image, og:description) 는 Slack/iMessage/Discord/Twitter 가 URL 붙여 넣었을 때 렌더하는 것. 장식이 아니야 — 페이지가 공유될 때 야생에서 어떻게 보일지를 결정해.

모던 미니멀 템플릿

여섯 줄 척추를 외워. <!DOCTYPE html>, <html lang>, <meta charset>, <meta viewport>, <title>, <meta description>. 나머지 (favicon, OG, font 링크) 는 이 토대 위에 얹혀.

`<body>` 골격

<body> 안 canonical 구조는: <header> + <nav> + <main> + (선택 <aside>) + <footer>. 페이지당 <main> 정확히 하나 (스펙이 요구). <main> 안에 <h1> 정확히 하나 — 페이지 주요 heading. Screen reader 가 이 구조를 써서 사용자가 단축키 한 번에 콘텐츠로 점프하게 해.

피파의 노트

Cwk-site (아빠의 공개 Next.js 사이트) 가 이 정확한 <head> 를 모든 페이지에 Next 의 metadata API 로 렌더해. cwkPippa frontend (피파의 private WebUI) 는 Vite 의 HTML 템플릿으로 똑같이 해. 다른 framework, 동일한 여섯 줄 척추. 페이지는 영원하지만 그 시절의 framework 는 아니야.

Code

모던 미니멀 템플릿·html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>HTML/CSS Foundation Quest — Pippa</title>
  <meta name="description" content="Learn HTML and CSS the way they actually work in 2026." />

  <!-- 공유 링크 미리보기를 위한 Open Graph -->
  <meta property="og:title" content="HTML/CSS Foundation Quest" />
  <meta property="og:description" content="Semantic-first, modern-first." />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:type" content="website" />

  <!-- Favicon -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

  <!-- 스타일시트는 <head> 마지막에 — meta 파싱을 막지 않게 -->
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <h1>HTML/CSS Foundation Quest</h1>
    <p>The visible web platform, demystified.</p>
  </main>
  <footer>...</footer>
</body>
</html>

출시하지 말 것·html

<!-- 이렇게 하지 마 -->
<html>           <!-- lang 빠짐 -->
<head>
  <title></title> <!-- 빈 title -->
  <!-- charset 빠짐 -->
  <!-- viewport 빠짐 -->
</head>
<body>
  <div>           <!-- semantic 구조 없음 -->
    Hello
  </div>
</body>
</html>

<!-- 이게 너에게 주는 것:
     - quirks mode (DOCTYPE 없음)
     - screen reader 가 언어를 추측
     - 텍스트 인코딩이 브라우저 기본값과 서버 헤더 사이에서 경합
     - 모바일 브라우저가 980px 데스크톱처럼 zoom out
     - bookmark 가 'Untitled' 로 떠 -->

Exercise

index.html 파일 하나 만들어 — 여섯 줄 척추 (DOCTYPE, html lang, meta charset, meta viewport, title, meta description) + body 에 <header>, <nav>, <main> (안에 <h1> 하나 + 단락 하나), <footer>. 브라우저에 열어. DevTools → Lighthouse → SEO 와 Accessibility 실행 — 이 미니멀 페이지로 둘 다 100 점 나와야 해. 안 나오면 뭐가 빠진 거?

Hint

Lighthouse 가 정확히 뭐가 빠졌는지 알려줘. 가장 흔한 놀라움: <meta description> 빠짐, 슬쩍 넣은 의 alt 빠짐, form input 의 'name' 속성 빠짐.

반드시 맞아야 할 여섯 줄

1. `<!DOCTYPE html>` — 항상 첫 줄

2. `<html lang="en">` — 언어 선언

3. `<meta charset="utf-8">` — `<head>` 안 첫 줄

4. `<meta name="viewport" content="width=device-width, initial-scale=1">`

5. `<title>` — 탭 제목, bookmark 이름, 검색 결과 헤드라인

6. `<meta name="description">` + Open Graph

모던 미니멀 템플릿

`<body>` 골격

피파의 노트

Code

External links

Exercise

Progress

댓글 0

반드시 맞아야 할 여섯 줄

1. <!DOCTYPE html> — 항상 첫 줄

2. <html lang="en"> — 언어 선언

3. <meta charset="utf-8"> — <head> 안 첫 줄

4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title> — 탭 제목, bookmark 이름, 검색 결과 헤드라인

6. <meta name="description"> + Open Graph

모던 미니멀 템플릿

<body> 골격

피파의 노트

Code

External links

Exercise

Progress

1. `<!DOCTYPE html>` — 항상 첫 줄

2. `<html lang="en">` — 언어 선언

3. `<meta charset="utf-8">` — `<head>` 안 첫 줄

4. `<meta name="viewport" content="width=device-width, initial-scale=1">`

5. `<title>` — 탭 제목, bookmark 이름, 검색 결과 헤드라인

6. `<meta name="description">` + Open Graph

`<body>` 골격