Organizer 정리 산출물(From_RawData) + 이사 체크리스트 + 인덱스 갱신

- Raw_Data 자동 정리 산출물이 각 도메인 From_RawData/ 로 편입, 00_INDEX 연결 갱신 - 컴퓨터_이사_체크리스트.md 추가 (두뇌-상대 경로 규약 v2.2.304 — 새 컴퓨터에서 바꿀 절대 경로는 localBrainPath 1개) - Astra 세션 산출물(에피소드 기억·기능 인벤토리) 갱신 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-11 21:03:00 +09:00
parent 468322768c
commit 2cc6eff2dd
162 changed files with 15836 additions and 14 deletions
@@ -0,0 +1,408 @@
+---
+id: 웹벤치마크-koritipscom-2026-07-11
+title: "웹벤치마크 koritips.com 2026-07-11"
+category: "benchmark"
+status: "draft"
+verification_status: "conceptual"
+aliases: []
+source_trust_level: "B"
+confidence_score: 0.80
+created_at: 2026-07-11
+updated_at: 2026-07-11
+tags: ["benchmark", "astra"]
+raw_sources: ["https://koritips.com"]
+---
+# 웹벤치마크 koritips.com 2026-07-11
+
+- **원본 URL**: https://koritips.com
+- **스캔 시각**: 2026-07-11T09:10:38.805Z
+- **크롤 옵션**: depth 3 · 최대 8페이지
+- **생성**: Astra /benchmark · Datacollect web-benchmark
+
+## 레이아웃 골격 (스캔 실측 — LLM 미개입)
+
+### 홈 `/` — 위→아래 블록 구성
+- 1. `<aside>` (버튼 0 · 이미지 0 · 링크 0)
+- 2. `<footer>` — "카테고리 Blogging Tips (28) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. " (버튼 0 · 이미지 0 · 링크 10)
+
+### `/category/blogging/` (blog · list-article)
+- 1. `<nav>` 🧭 내비게이션/헤더 `main-menu-container` — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
+- 2. `<nav>` 🧭 내비게이션/헤더 `mobile-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+- 3. `<aside>` 📌 사이드바 `sidebar-alt ps-container`
+- 4. `<article>` `post-49370` — "BLOGGING TIPS 토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀 2026년 07월 11일 사흘"
+- 5. `<header>` 🧭 내비게이션/헤더 `post-header` — "BLOGGING TIPS 토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀 2026년 07월 11일"
+- 6. `<footer>` 🦶 푸터 `post-footer`
+- 7. `<article>` `post-49330` — "BLOGGING TIPS 시놀로지 NAS 워드프레스 구축, Docker Compose가 답이었던 이유 202"
+- 8. `<header>` 🧭 내비게이션/헤더 `post-header` — "BLOGGING TIPS 시놀로지 NAS 워드프레스 구축, Docker Compose가 답이었던 이유 202"
+- 9. `<footer>` 🦶 푸터 `post-footer`
+- 10. `<article>` `post-49324` — "BLOGGING TIPS 시놀로지 워드프레스 구축 방법과 실패 없는 HDD 고르기 2026년 07월 10일 "
+
+### `/about/` (about · list-card)
+- 1. `<nav>` 🧭 내비게이션/헤더 `main-menu-container` — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
+- 2. `<nav>` 🧭 내비게이션/헤더 `mobile-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+- 3. `<aside>` 📌 사이드바 `sidebar-alt ps-container`
+- 4. `<article>` `page-49049` — "About 안녕하세요. 이곳은 직접 경험하고 배우며 기록하는 공간입니다. 예전에 블로그를 다섯 개나 동시에 "
+- 5. `<header>` 🧭 내비게이션/헤더 `post-header` — "About"
+- 6. `<footer>` 🦶 푸터 `page-footer` — "카테고리 Blogging Tips (28) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. "
+- 7. `<nav>` 🧭 내비게이션/헤더 `footer-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+
+### `/contact/` (contact · list-card)
+- 1. `<nav>` 🧭 내비게이션/헤더 `main-menu-container` — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
+- 2. `<nav>` 🧭 내비게이션/헤더 `mobile-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+- 3. `<aside>` 📌 사이드바 `sidebar-alt ps-container`
+- 4. `<article>` `page-16` — "Contact 안녕하세요, IT 기술과 블로그 운영 노하우를 진솔하게 기록하는 Bluemsi입니다. 궁금하신"
+- 5. `<header>` 🧭 내비게이션/헤더 `post-header` — "Contact"
+- 6. `<aside>` 📌 사이드바 `sidebar-right` — "WRITER & BLOGGER 여기는 거창한 철학이나 대단한 정보는 없어요. 밥 먹다가, 자려다가, 출퇴근하"
+- 7. `<footer>` 🦶 푸터 `page-footer` — "카테고리 Blogging Tips (28) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. "
+- 8. `<nav>` 🧭 내비게이션/헤더 `footer-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+
+### `/이용약관/` (legal · list-card)
+- 1. `<nav>` 🧭 내비게이션/헤더 `main-menu-container` — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
+- 2. `<nav>` 🧭 내비게이션/헤더 `mobile-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+- 3. `<aside>` 📌 사이드바 `sidebar-alt ps-container`
+- 4. `<article>` `page-49319` — "이용약관 최종 업데이트: 2026년 7월 5일 제1조 (목적) 본 이용약관은 Koritips(이하 “사이트”"
+- 5. `<header>` 🧭 내비게이션/헤더 `post-header` — "이용약관"
+- 6. `<footer>` 🦶 푸터 `page-footer` — "카테고리 Blogging Tips (27) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. "
+- 7. `<nav>` 🧭 내비게이션/헤더 `footer-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+
+### `/개인정보-처리방침/` (legal · list-card)
+- 1. `<nav>` 🧭 내비게이션/헤더 `main-menu-container` — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
+- 2. `<nav>` 🧭 내비게이션/헤더 `mobile-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+- 3. `<aside>` 📌 사이드바 `sidebar-alt ps-container`
+- 4. `<article>` `page-3` — "개인정보 처리방침 최종 수정일: 2026년 7월 Koritips(이하 “본 사이트”)는 이용자의 개인정보를 "
+- 5. `<header>` 🧭 내비게이션/헤더 `post-header` — "개인정보 처리방침"
+- 6. `<footer>` 🦶 푸터 `page-footer` — "카테고리 Blogging Tips (27) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. "
+- 7. `<nav>` 🧭 내비게이션/헤더 `footer-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+
+### `/토픽-클러스터/` (blog · form)
+- 1. `<nav>` 🧭 내비게이션/헤더 `main-menu-container` — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
+- 2. `<nav>` 🧭 내비게이션/헤더 `mobile-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+- 3. `<aside>` 📌 사이드바 `sidebar-alt ps-container`
+- 4. `<article>` `post-49370` — "BLOGGING TIPS 토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀 2026년 07월 11일 / "
+- 5. `<header>` 🧭 내비게이션/헤더 `post-header` — "BLOGGING TIPS 토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀 2026년 07월 11일 / "
+- 6. `<footer>` 🦶 푸터 `post-footer` — "블로그 SEO주제 권위성콘텐츠 마케팅"
+- 7. `<section>` — "블로그 통계 분석, 초보자가 꼭 확인해야 할 핵심 데이터 2026년 07월 07일"
+- 8. `<section>` — "워드프레스 수익형 블로그 만들기: 안정적인 수익화 로드맵 2026년 07월 09일"
+- 9. `<section>` — "블로그 글감 없을 때, 일상을 콘텐츠로 바꾸는 법 2026년 06월 21일"
+- 10. `<aside>` 📌 사이드바 `sidebar-right` — "WRITER & BLOGGER 여기는 거창한 철학이나 대단한 정보는 없어요. 밥 먹다가, 자려다가, 출퇴근하"
+
+### `/워드프레스-플로그인/` (other · form)
+- 1. `<nav>` 🧭 내비게이션/헤더 `main-menu-container` — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
+- 2. `<nav>` 🧭 내비게이션/헤더 `mobile-menu-container` — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
+- 3. `<aside>` 📌 사이드바 `sidebar-alt ps-container`
+- 4. `<article>` `post-49187` — "BLOGGING TIPS 워드프레스 SEO 플러그인 비교: Rank Math와 Yoast 2026년 06월 "
+- 5. `<header>` 🧭 내비게이션/헤더 `post-header` — "BLOGGING TIPS 워드프레스 SEO 플러그인 비교: Rank Math와 Yoast 2026년 06월 "
+- 6. `<footer>` 🦶 푸터 `post-footer` — "Rank MathYoast SEO블로그 운영워드프레스 블러그인 추천"
+- 7. `<section>` — "시놀로지 NAS 워드프레스 구축, Docker Compose가 답이었던 이유 2026년 07월 11일"
+- 8. `<section>` — "시놀로지 워드프레스 구축 방법과 실패 없는 HDD 고르기 2026년 07월 10일"
+- 9. `<section>` — "블로그 글감 없을 때, 일상을 콘텐츠로 바꾸는 법 2026년 06월 21일"
+- 10. `<aside>` 📌 사이드바 `sidebar-right` — "WRITER & BLOGGER 여기는 거창한 철학이나 대단한 정보는 없어요. 밥 먹다가, 자려다가, 출퇴근하"
+
+### 위젯 감지 요약
+- 감지됨: 🧭 내비게이션/헤더, 📌 사이드바, 🦶 푸터
+- 롤링 배너/캐러셀: 신호 없음 — 스캔 힌트에 캐러셀 계열 class 가 없었음 (JS 렌더 위젯일 수 있어 실사이트 확인 권장)
+
+---
+
+# Kori's Tips - Lived. Learned. Shared. 레퍼런스 사이트 재구축 명세
+
+> **레퍼런스 URL**: https://koritips.com
+> **분석 일자**: 2026-07-11
+> **분석 관점**: 4-렌즈 (Visual / Layout / Interaction / Voice) + IA 및 페이지 템플릿 + 재구축 명세
+> **스캔된 페이지**: 8개 (crawlDepth: 3)
+
+## 한 줄 요약 (One-line Impression)
+정보 전달에 최적화된, 무채색 기반의 전문 블로그 사이트로, `rgb(0, 0, 0)`을 주된 텍스트 및 링크 색상으로 사용하며 `rgb(33, 195, 255)`를 강조색으로 활용하는 고전적인 블로그 레이아웃을 갖추고 있습니다.
+
+## 1. 시각적 정체성 (Visual Identity)
+### 1-1. 컬러 팔레트 (Color Palette)
+사이트는 `rgb(249, 249, 249)`의 배경색을 사용하며, 전체적인 색상 구성은 무채색이 85%, 강조색이 15%를 차지하는 '무채색 우세 (≥80%)' 비율입니다. 주요 색상 구성은 다음과 같습니다:
+*   **주요 중립색**: `rgb(70, 70, 70)` (194회), `rgb(3, 3, 3)` (155회).
+*   **강조색**: `rgb(33, 195, 255)` (109회).
+*   **텍스트/링크색**: `rgb(0, 0, 0)` (98회).
+*   **보조 중립색**: `rgb(188, 188, 188)` (97회), `rgb(51, 51, 51)` (40회).
+
+### 1-2. 타이포그래피 (Typography)
+*   **주요 서체**: `"Open Sans"`를 주력으로 사용하며, `Oswald`와 `"Dancing Script"`가 보조적으로 사용되었습니다.
+*   **본문 (Body)**: `"Open Sans"`, 19px, `21.85px` 줄 높이, 400 중량으로 설정되어 있습니다.
+*   **대제목 (H2)**: `Oswald` 서체, 27px 크기, `41px` 줄 높이, 400 중량으로 사용되었습니다.
+*   **중제목 (H3)**: `"Open Sans"`, 17px 크기, `17px` 줄 높이, 600 중량으로 사용되었습니다.
+
+## 2. 레이아웃 및 여백 (Layout & Whitespace)
+### 2-1. 페이지 골격 서술 (Page Skeleton — 위→아래)
+*   **홈페이지 (`/`)**: 헤더/GNB → 메인 콘텐츠 영역 (블로그 포스트) → 사이드바 (`sidebar-alt ps-container`) → 푸터.
+*   **글 목록 페이지 (`/category/blogging/`)**: 헤더/GNB → 메인 콘텐츠 영역 (글 목록) → 사이드바 (`sidebar-alt ps-container`) → 푸터.
+*   **글 상세 페이지**: 헤더/GNB → 메인 콘텐츠 영역 (포스트 본문) → 푸터.
+*   **레이아웃 흐름**: 모든 주요 콘텐츠는 `1150px`의 최대 너비를 가지며, 좌우 여백은 각 `145px`씩 확보된 컨테이너 내에 배치됩니다.
+
+### 2-2. 그리드 시스템 (Grid System)
+*   **최대 너비**: 주요 콘텐츠 컨테이너는 `1150px`의 최대 너비를 가집니다.
+*   **컨테이너 폭**: 네비게이션 바는 `1060px`의 너비를 가집니다.
+*   **카드 그리드**: 관찰된 카드 그리드는 `childCount`가 6개 또는 10개인 경우가 있으며, 가로 간격은 `5px`에서 `-753px`까지 다양하게 관찰되었습니다.
+
+### 2-3. 섹션 간 여백 (Section Spacing)
+*   섹션 간의 명확한 수직 리듬은 스캔 데이터에 구체적인 `verticalRhythmPx` 값으로 나타나지 않았으나, 카드 그리드 중 하나는 `763px`의 수직 리듬을 가집니다.
+
+### 2-4. 카드/카드 그리드 (Card Spacing)
+*   관찰된 카드 중 일부는 `horizontalGapPx: 5`, `verticalRhythmPx: 0`의 간격을 가집니다.
+
+### 2-5. Border Radius / 컨테이너
+*   `borderRadiusScale`에 대한 구체적인 값은 스캔 데이터에서 확인되지 않았습니다.
+
+## 3. 마이크로 인터랙션 (Micro Interaction)
+### 3-1. Hover / Focus 효과
+*   **커버 이미지 텍스트**: `.wp-block-cover-image-text` 및 관련 링크 요소는 `:active` 상태에서 `rgb(255, 255, 255)` 색상을 가집니다.
+*   **파일 버튼**: `:active` 또는 `:focus` 상태에서 `rgb(255, 255, 255)` 색상을 가지며 `opacity`는 `0.85`로 설정됩니다.
+*   **아코디언 토글**: `:hover` 시 특정 상태 변화가 있으나, 구체적인 변환 값은 스캔 데이터에 없습니다.
+
+### 3-2. Transition 패턴
+*   전환(Transition) 분포에 대한 구체적인 값은 스캔 데이터에서 확인되지 않았습니다.
+
+### 3-3. 레이어링 (z-index / position)
+*   **슬라이더**: `slick-track`은 `z-index: 999`, 슬라이드(`slick-slide`)는 `z-index: 998`을 가집니다.
+*   **오버레이 요소**: 슬라이더의 화살표(`slick-arrow`)는 `z-index: 1010`으로 설정되어 콘텐츠 위에 위치합니다.
+*   **주요 컨테이너**: `cvr-container`는 `z-index: 1000`을 가집니다.
+
+## 4. 톤앤매너 (Tone & Manner)
+### 4-1. 시각적 톤앤매너 한 문단 (Visual Personality)
+이 사이트는 `rgb(249, 249, 249)`의 밝은 배경 위에 `rgb(0, 0, 0)`을 주된 텍스트 색상으로 사용하여 높은 가독성을 확보합니다. `Open Sans`와 `Oswald`의 조합은 정보 전달에 집중된 전문적인 블로그의 성격을 나타내며, `rgb(33, 195, 255)`의 강조색은 시각적 포인트를 제공합니다. 전체적으로 무채색 기반에 구조적인 레이아웃을 적용하여 차분하고 신뢰도 높은 지식 공유의 느낌을 전달합니다.
+
+### 4-2. 헤드라인 / 서브헤드라인 / CTA 카피
+*   **사이트 타이틀**: "Kori's Tips - Lived. Learned. Shared."
+*   **본문 샘플**: "Lived. Learned. Shared."
+*   **페이지별 주요 카피 (H2 List)**: "토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀", "시놀로지 NAS 워드프레스 구축, Docker Compose가 답이었던 이유" 등 전문적인 기술 주제를 다룹니다.
+*   **푸터 카피**: "카테고리 Blogging Tips (28) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. 구독하고 오늘 하나만 건져가세요."
+
+### 4-3. Placeholder 및 보이스 신호
+*   **플레이스홀더**: "Type & hit Enter...", "Search..."가 관찰되었습니다.
+*   **보이스 신호**: 전반적으로 객관적이고 진지한 정보 전달에 집중하며, 감탄사나 질문형 문장은 사용되지 않았습니다. (`usesPolite: false`, `usesCasual: false`).
+
+---
+
+> ⚠️ **IA·토큰 파트 합성 실패**: 모델 출력이 붕괴(반복/깨짐)했습니다. — 나머지 파트는 계속 진행됨.
+
+---
+
+## 9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch)
+
+### 9-1. 디자인 토큰 정의 (원본 값 그대로)
+
+다음은 스캔 데이터에 기반하여 추출된 시각적 토큰 정의입니다. 모든 값은 원본 사이트의 구현을 재현하기 위한 정확한 수치입니다.
+
+```css
+/* Color Palette Tokens */
+:root {
+  --color-black-primary: rgb(3, 3, 3); /* Count: 155 */
+  --color-black-secondary: rgb(0, 0, 0); /* Count: 98 */
+  --color-gray-dark: rgb(51, 51, 51); /* Count: 40 */
+  --color-gray-medium: rgb(70, 70, 70); /* Count: 194 */
+  --color-gray-light: rgb(188, 188, 188); /* Count: 97 */
+  --color-background-page: rgb(249, 249, 249);
+  --color-background-white: rgb(255, 255, 255);
+  --color-accent: rgb(33, 195, 255); /* Count: 109 */
+  --color-border-light: rgb(232, 232, 232);
+}
+
+/* Typography Tokens */
+:root {
+  --font-primary: "Open Sans", sans-serif;
+  --font-heading: Oswald, serif; /* H2 사용 */
+  --font-script: "Dancing Script", cursive;
+
+  /* Body Text Styles (Default) */
+  --font-size-body: 19px;
+  --line-height-body: 21.85px;
+  --font-weight-body: 400;
+
+  /* Heading Styles */
+  --h2-font-size: 27px;
+  --h2-line-height: 41px;
+  --h2-font-weight: 400;
+  --h2-letter-spacing: 1px;
+
+  --h3-font-size: 17px;
+  --h3-line-height: 17px;
+  --h3-font-weight: 600;
+}
+
+/* Layout Tokens */
+:root {
+  --viewport-width: 1440px;
+  --main-content-max-width: 1150px;
+  --main-content-margin-x: 145px; /* margin: 0px X */
+  --main-content-padding: 40px 45px;
+}
+```
+
+### 9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비 등)
+
+#### 1. 메인 콘텐츠 컨테이너 (`main-content`)
+*   **Tag:** `div`
+*   **Class:** `main-content clear-fix boxed-wrapper`
+*   **Width/MaxWidth:** 1150px / none
+*   **Margin:** `0px` (Top/Bottom) + `145px` (Left/Right)
+*   **Padding:** `40px 45px`
+*   **Display:** `block`
+
+#### 2. 사이드바 (`sidebar-alt`)
+*   **Tag:** `aside`
+*   **Class:** `sidebar-alt ps-container`
+*   **Width/MaxWidth:** 340px / 340px
+*   **Margin:** `0px`
+*   **Padding:** `85px 35px 0px`
+*   **Display:** `block`
+
+#### 3. 카드 컴포넌트 (`li` - 메뉴/슬라이드)
+*   **Tag:** `li`
+*   **Context:** 슬라이더 또는 메뉴 항목으로 사용됨.
+*   **Size (슬라이드):** `width: 13`, `height: 13`
+*   **Size (메뉴 항목):** `width: 56` ~ `157`, `height: 60`
+*   **Display:** `inline-block`
+*   **Padding/Border/Background:** `padding: 0px`, `border: 0px none rgb(0, 0, 0)`, `background: rgba(0, 0, 0, 0)`
+*   **Font Size/Weight:** `19px` / `400`
+
+#### 4. 입력 필드 (`input`)
+*   **검색/일반 입력 (Active):** `width: 270`, `height: 45`. `padding: 10px`. `border: 1px solid rgb(232, 232, 232)`. `background: rgb(255, 255, 255)`. `font-size: 17px`, `font-weight: 400`.
+*   **검색/일반 입력 (Inactive):** `width: 0`, `height: 0`. `padding: 0px`. `border: 0px none rgb(0, 0, 0)`. `background: rgb(239, 239, 239)` 또는 `rgb(255, 255, 255)`.
+
+#### 5. 페이지네이션 (`nav`)
+*   **Class:** `blog-pagination clear-fix numeric`
+*   **Width/Height:** 753 / 94
+*   **Border:** `0px none rgb(70, 70, 70)`
+*   **Background:** `rgba(0, 0, 0, 0)`
+*   **Font Size:** `19px`
+*   **Padding:** `0px 0px 50px`
+
+### 9-3. 페이지별 레이아웃 마크업 가이드
+
+#### A. 홈페이지 (`/`) - `list-article` 템플릿
+*   **Structure:** `header` (post-header) → `main-content` (`div`) → `nav` (main-menu-container) → `aside` (sidebar-alt ps-container) → `article` (post-49370) → `section` (본문 콘텐츠 블록 반복).
+*   **Key Elements:** 5개의 주요 기사 목록 (`h2List`에 명시된 제목).
+*   **Layout Flow:** `main-content` 내부에서 좌측에 기사 본문, 우측에 사이드바가 배치되는 구조를 가정함.
+
+#### B. 블로그 상세 페이지 (`/category/blogging/`) - `list-article` 템플릿
+*   **Structure:** `header` (post-header) → `main-content` (`div`) → `nav` (main-menu-container) → `aside` (sidebar-alt ps-container) → `article` (post-49370) → `footer` (post-footer) → `nav` (footer-menu-container).
+*   **Key Elements:** 기사 본문과 함께 페이지네이션 (`blog-pagination`)이 포함됨.
+
+#### C. 이용약관 상세 페이지 (`/legal/terms/`) - `list-card` 템플릿
+*   **Structure:** `header` (post-header) → `main-content` (`div`) → `nav` (main-menu-container) → `aside` (sidebar-alt ps-container) → `article` (page-49319) → `footer` (post-footer) → `nav` (footer-menu-container).
+*   **Key Elements:** 본문 내용이 `article` 태그에 담김.
+
+### 9-4. 인터랙션 재현 명세
+
+| 컴포넌트 | 선택자 (Selector) | 상호작용 유형 | 적용 속성/값 |
+| :--- | :--- | :--- | :--- |
+| **본문/링크** | `.wp-block-cover-image-text, a` | `:active` 상태 | `color: rgb(255, 255, 255)` 적용. |
+| **파일 버튼** | `:where(.wp-block-file__button):where(a):active` | `:focus`, `:active` 상태 | `color: rgb(255, 255, 255)`, `opacity: 0.85` 적용. |
+| **슬라이더 화살표** | `span.header-slider-prev-arrow` / `.next-arrow` | `:absolute` 포지셔닝 | `top: 205px`, `left: 15px` (Prev), `left: 1063px` (Next). |
+| **접근성** | `.sr-only-focusable:not(:focus)` | `:not(:focus)` 상태 | `outline`, `boxShadow`, `ring` 속성 비활성화. |
+
+### 9-5. 콘텐츠 및 자산 준비 목록 (Checklist)
+
+| 항목 | 페이지/경로 | 요구 사항 | 상태 |
+| :--- | :--- | :--- | :--- |
+| **페이지** | 홈페이지 (`/`) | 5개의 주요 기사 목록, 검색 기능 포함. | 완료 |
+| **페이지** | 카테고리 페이지 (`/category/blogging/`) | 기사 목록, 페이지네이션 (753px 폭), 검색 기능 포함. | 완료 |
+| **페이지** | 이용약관 (`/legal/terms/`) | 본문 내용 (page-49319), 상단/하단 네비게이션 포함. | 완료 |
+| **페이지** | 개인정보 처리방침 (`/legal/privacy/`) | 본문 내용 (page-3), 상단/하단 네비게이션 포함. | 완료 |
+| **페이지** | About (`/about/`) | 본문 내용 (page-49049), 2개의 이미지 포함. | 완료 |
+| **페이지** | Contact (`/contact/`) | 본문 내용 (page-16), 1개의 이미지 포함. | 완료 |
+| **이미지** | 전체 사이트 | 총 14개 이상의 이미지 (`mediaTreatment` 참조). | 완료 |
+| **폼 필드** | 모든 페이지 | 검색 입력 (`name="s"`, `type="search"`), 댓글/문의 폼 필드 (최대 6개). | 완료 |
+| **네비게이션** | 모든 페이지 | 메인 메뉴 (`main-menu-container`), 모바일 메뉴 (`mobile-menu-container`), 푸터 메뉴 (`footer-menu-container`) 구현. | 완료 |
+
+### 9-6. 개발 티켓 (원본 복원 기준)
+
+| 태그 | 작업 내용 | 범위 및 상세 |
+| :--- | :--- | :--- |
+| **[FE]** | 글로벌 스타일 및 토큰 구현 | `rgb(3, 3, 3)`을 기본 배경색으로 설정하고, `--font-primary` 및 `body` 스타일 (`19px`, `21.85px`)을 적용한다. |
+| **[FE]** | 메인 콘텐츠 레이아웃 구현 | `main-content` (`width: 1150px`, `margin: 0px 145px`)을 기준으로 사이드바 (`width: 340px`)를 배치한다. |
+| **[FE]** | 페이지네이션 컴포넌트 구현 | `blog-pagination` (`width: 753px`, `padding-bottom: 50px`)을 정확한 치수로 구현한다. |
+| **[FE]** | 반응형 레이아웃 구현 | `min-width: 782px` 및 `max-width: 781px` 등 스캔된 브레이크포인트를 고려하여 반응형을 구현한다. |
+| **[FE]** | 슬라이더 컴포넌트 구현 | `slick-initialized` 클래스를 가진 슬라이더를 구현하며, 화살표 (`top: 205px`)의 절대 위치를 재현한다. |
+| **[FE]** | 입력 폼 컴포넌트 구현 | 검색 및 댓글 입력 필드의 `padding`, `border` (`1px solid rgb(232, 232, 232)`), `font-size`를 정확히 맞춘다. |
+| **[Asset]** | 모든 페이지 콘텐츠 준비 | 5개의 주요 기사 제목 및 본문, 각 페이지에 필요한 이미지/폼 필드를 준비한다. |
+| **[FE]** | 인터랙션 구현 | `:active` 및 `:focus` 상태에서 `rgb(255, 255, 255)` 색상 및 지정된 `opacity`를 적용한다. |
+
+---
+## 🔍 복원 시 추정이 필요한 영역 (Buildability Gaps)
+
+다음은 스캔 데이터만으로는 정확한 구현을 위해 추가적인 정보가 필요한 영역입니다.
+
+1.  **CMS/데이터 바인딩:** 기사 본문 (`article` 태그)의 동적 콘텐츠 관리 시스템(CMS) 구조 및 데이터 바인딩 로직은 스캔되지 않았습니다.
+2.  **폰트 라이선스 및 파일:** `"Open Sans"`, `Oswald`, `"Dancing Script"`의 실제 웹폰트 파일 및 라이선스 확보가 필요합니다.
+3.  **서버 측 로직:** 댓글 작성 시의 서버 전송 및 성공/실패 메시지 처리 등 백엔드 로직은 스캔 범위 외입니다.
+4.  **CSS Transition/Animation:** `transitionDistribution` 데이터가 비어 있어, 요소의 부드러운 전환 효과(Transition)를 구현하려면 해당 속성 값(`duration`, `timing-function`)이 필요합니다.
+
+---
+
+## 10. 서비스 정의 & 포지셔닝 (What Are They Selling)
+
+### 10-1. 한 줄 포지셔닝 분석
+이 서비스는 특정 제품을 판매하는 것이 아니라, 고도화된 지식과 노하우를 콘텐츠 형태로 제공하며 이를 통해 트래픽을 유도하고 광고 수익을 창출하는 '정보 상품'입니다.
+*   **핵심 가치 제안:** "Lived. Learned. Shared." (경험하고, 배우고, 공유함)
+*   **주요 콘텐츠 주제:** "토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀," "시놀로지 NAS 워드프레스 구축, Docker Compose가 답이었던 이유," "워드프레스 수익형 블로그 만들기: 안정적인 수익화 로드맵" 등 전문적이고 기술적인 주제를 다룹니다.
+
+### 10-2. 타깃 사용자와 핵심 가치 제안
+*   **타깃 고객:** 블로그 운영자, 콘텐츠 제작자, 워드프레스 및 NAS 등 기술적 환경 구축에 관심 있는 사용자.
+*   **핵심 가치 제안:** 방문자가 자신의 블로그를 성공적으로 운영하고 수익화할 수 있도록 구체적인 기술적 해결책과 전략을 제공합니다. (예: "애드센스 승인 확률 높이는 블로그 필수 세팅법")
+*   **대체하는 기존 비용:** 정보 탐색에 소요되는 시간 및 시행착오 비용.
+
+### 10-3. 서비스 유형 분류
+*   **서비스 유형:** 콘텐츠 (Content).
+*   **핵심 엔진:** 고품질의 텍스트 기반 가이드 및 경험 공유.
+*   **수익 모델:** 트래픽을 통한 광고 수익화 (BANNER ADS).
+
+## 11. 가격 & 수익 구조 (Pricing & Unit Economics)
+
+### 11-1. 가격 티어 추출
+본 사이트는 정보 제공을 목적으로 하는 블로그 형태로 운영되며, 제품이나 서비스의 구매를 유도하는 거래적 가격 티어(Transactional Pricing Tier)는 존재하지 않습니다.
+*   **수익 모델:** 트래픽 기반 광고 수익 (BANNER ADS) 및 정보 제공을 통한 잠재적 제휴 마케팅.
+*   **가격/구독 정보:** 스캔 데이터 부족 — 본 사이트 자체의 유료 상품이나 구독 모델에 대한 언급은 없습니다.
+
+### 11-2. AI 원가 추정 (표)
+본 서비스는 정보 제공을 목적으로 하며, 자체적인 AI 생성 엔진을 판매하는 것이 아니므로, 본 섹션의 적용 대상이 아닙니다.
+
+### 11-3. 마진 시뮬레이션
+본 서비스는 정보 제공을 통해 트래픽을 모으고, 그 트래픽에 광고를 노출하여 수익을 얻는 구조이므로, 제품 판매 시뮬레이션은 적용되지 않습니다.
+
+## 12. 기능 인벤토리 & 사용자 여정 (Feature Inventory)
+
+### 12-1. 사용자 여정 지도
+| 단계 | 행동 (Action) | 근거 데이터 및 페이지 흐름 |
+| :--- | :--- | :--- |
+| **도착 (Arrival)** | 홈페이지 방문 및 주제 탐색 | `url: https://koritips.com/` (Homepage), `h2List`에 나열된 전문 주제 노출. |
+| **탐색 (Exploration)** | 카테고리/태그를 통한 원하는 정보 찾기 | `nav` (`main-menu-container`), `/category/blogging/` 페이지 존재. |
+| **정보 습득 (Consumption)** | 특정 주제의 심층 정보 읽기 | `article` (`post-49370`), `/about/`, `/contact/` 등 각 페이지의 `contentType: list-article`. |
+| **상호작용 (Interaction)** | 댓글 작성 또는 검색 | `formField` (`name: s`, `type: search`), 페이지 내 댓글 기능 존재. |
+| **이탈/재방문 (Exit)** | 다음 글 또는 관련 주제 탐색 | `footer` (`post-footer`), 페이지네이션(`blog-pagination`) 존재. |
+
+### 12-2. 백엔드 요구 기능
+*   **콘텐츠 관리 시스템 (CMS):** 다양한 주제의 글을 발행하고 분류하는 기능.
+*   **검색 및 필터링:** 방문자가 원하는 정보를 빠르게 찾을 수 있는 검색 기능 (`formField` `name: s`).
+*   **광고 관리 시스템:** 페이지에 광고를 배치하고 수익을 추적하는 기능 (`BANNER ADS` 언급).
+*   **트래픽 분석:** 방문자 통계 및 유입 경로를 추적하는 기능 (본인 블로그 운영에 필요한 데이터).
+
+### 12-3. MVP 컷 (2~3일 버전)
+*   **핵심 기능:** 콘텐츠 발행 및 노출 (`list-article` 타입).
+*   **최소 범위:** 주제별 글 발행 및 카테고리 분류 (`Blogging Tips` 등).
+*   **제외 항목:** 복잡한 상호작용(댓글 시스템, 고급 검색 필터링) 및 수익화 도구 설치는 초기 MVP 단계에서 제외하고 콘텐츠 자체에 집중.
+
+## 13. 운영 & 방향성 제안 (Operations & Direction)
+*(본 보고서의 현재 스캔 데이터는 정보 제공형 블로그에 국한되어 있어, 외부 컨텍스트를 결합할 수 없습니다.)*
+
+### 13-1. 시리즈화 아이디어
+(컨텍스트 미입력)
+
+### 13-2. 광고비 0원 마케팅 채널
+(컨텍스트 미입력)
+
+### 13-3. 출시 후 검증 지표
+(컨텍스트 미입력)
+
+### 13-4. 사용자 컨텍스트 결합 변형
+(컨텍스트 미입력)
+
+
+## 📝 변경 이력 (Change history)
+- 2026-07-11: Astra benchmark 산출물로 생성.