Files

T

Antigravity Agent 2cc6eff2dd 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

28 KiB

Raw Blame History

id, title, category, status, verification_status, aliases, source_trust_level, confidence_score, created_at, updated_at, tags, raw_sources

title

웹벤치마크 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)
1. <footer> — "카테고리 Blogging Tips (28) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. " (버튼 0 · 이미지 0 · 링크 10)

`/category/blogging/` (blog · list-article)

1. <nav> 🧭 내비게이션/헤더 main-menu-container — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
1. <nav> 🧭 내비게이션/헤더 mobile-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
1. <aside> 📌 사이드바 sidebar-alt ps-container
1. <article> post-49370 — "BLOGGING TIPS 토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀 2026년 07월 11일 사흘"
1. <header> 🧭 내비게이션/헤더 post-header — "BLOGGING TIPS 토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀 2026년 07월 11일"
1. <footer> 🦶 푸터 post-footer
1. <article> post-49330 — "BLOGGING TIPS 시놀로지 NAS 워드프레스 구축, Docker Compose가 답이었던 이유 202"
1. <header> 🧭 내비게이션/헤더 post-header — "BLOGGING TIPS 시놀로지 NAS 워드프레스 구축, Docker Compose가 답이었던 이유 202"
1. <footer> 🦶 푸터 post-footer
1. <article> post-49324 — "BLOGGING TIPS 시놀로지 워드프레스 구축 방법과 실패 없는 HDD 고르기 2026년 07월 10일 "

`/about/` (about · list-card)

1. <nav> 🧭 내비게이션/헤더 main-menu-container — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
1. <nav> 🧭 내비게이션/헤더 mobile-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
1. <aside> 📌 사이드바 sidebar-alt ps-container
1. <article> page-49049 — "About 안녕하세요. 이곳은 직접 경험하고 배우며 기록하는 공간입니다. 예전에 블로그를 다섯 개나 동시에 "
1. <header> 🧭 내비게이션/헤더 post-header — "About"
1. <footer> 🦶 푸터 page-footer — "카테고리 Blogging Tips (28) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. "
1. <nav> 🧭 내비게이션/헤더 footer-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"

`/contact/` (contact · list-card)

1. <nav> 🧭 내비게이션/헤더 main-menu-container — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
1. <nav> 🧭 내비게이션/헤더 mobile-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
1. <aside> 📌 사이드바 sidebar-alt ps-container
1. <article> page-16 — "Contact 안녕하세요, IT 기술과 블로그 운영 노하우를 진솔하게 기록하는 Bluemsi입니다. 궁금하신"
1. <header> 🧭 내비게이션/헤더 post-header — "Contact"
1. <aside> 📌 사이드바 sidebar-right — "WRITER & BLOGGER 여기는 거창한 철학이나 대단한 정보는 없어요. 밥 먹다가, 자려다가, 출퇴근하"
1. <footer> 🦶 푸터 page-footer — "카테고리 Blogging Tips (28) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. "
1. <nav> 🧭 내비게이션/헤더 footer-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"

`/이용약관/` (legal · list-card)

1. <nav> 🧭 내비게이션/헤더 main-menu-container — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
1. <nav> 🧭 내비게이션/헤더 mobile-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
1. <aside> 📌 사이드바 sidebar-alt ps-container
1. <article> page-49319 — "이용약관 최종 업데이트: 2026년 7월 5일 제1조 (목적) 본 이용약관은 Koritips(이하 “사이트”"
1. <header> 🧭 내비게이션/헤더 post-header — "이용약관"
1. <footer> 🦶 푸터 page-footer — "카테고리 Blogging Tips (27) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. "
1. <nav> 🧭 내비게이션/헤더 footer-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"

`/개인정보-처리방침/` (legal · list-card)

1. <nav> 🧭 내비게이션/헤더 main-menu-container — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
1. <nav> 🧭 내비게이션/헤더 mobile-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
1. <aside> 📌 사이드바 sidebar-alt ps-container
1. <article> page-3 — "개인정보 처리방침 최종 수정일: 2026년 7월 Koritips(이하 “본 사이트”)는 이용자의 개인정보를 "
1. <header> 🧭 내비게이션/헤더 post-header — "개인정보 처리방침"
1. <footer> 🦶 푸터 page-footer — "카테고리 Blogging Tips (27) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. "
1. <nav> 🧭 내비게이션/헤더 footer-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"

`/토픽-클러스터/` (blog · form)

1. <nav> 🧭 내비게이션/헤더 main-menu-container — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
1. <nav> 🧭 내비게이션/헤더 mobile-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
1. <aside> 📌 사이드바 sidebar-alt ps-container
1. <article> post-49370 — "BLOGGING TIPS 토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀 2026년 07월 11일 / "
1. <header> 🧭 내비게이션/헤더 post-header — "BLOGGING TIPS 토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀 2026년 07월 11일 / "
1. <footer> 🦶 푸터 post-footer — "블로그 SEO주제 권위성콘텐츠 마케팅"
1. <section> — "블로그 통계 분석, 초보자가 꼭 확인해야 할 핵심 데이터 2026년 07월 07일"
1. <section> — "워드프레스 수익형 블로그 만들기: 안정적인 수익화 로드맵 2026년 07월 09일"
1. <section> — "블로그 글감 없을 때, 일상을 콘텐츠로 바꾸는 법 2026년 06월 21일"
1. <aside> 📌 사이드바 sidebar-right — "WRITER & BLOGGER 여기는 거창한 철학이나 대단한 정보는 없어요. 밥 먹다가, 자려다가, 출퇴근하"

`/워드프레스-플로그인/` (other · form)

1. <nav> 🧭 내비게이션/헤더 main-menu-container — "HOME BLOGGING TIPS ABOUT CONTACT 이용약관 개인정보 처리방침"
1. <nav> 🧭 내비게이션/헤더 mobile-menu-container — "Home Blogging Tips About Contact 이용약관 개인정보 처리방침"
1. <aside> 📌 사이드바 sidebar-alt ps-container
1. <article> post-49187 — "BLOGGING TIPS 워드프레스 SEO 플러그인 비교: Rank Math와 Yoast 2026년 06월 "
1. <header> 🧭 내비게이션/헤더 post-header — "BLOGGING TIPS 워드프레스 SEO 플러그인 비교: Rank Math와 Yoast 2026년 06월 "
1. <footer> 🦶 푸터 post-footer — "Rank MathYoast SEO블로그 운영워드프레스 블러그인 추천"
1. <section> — "시놀로지 NAS 워드프레스 구축, Docker Compose가 답이었던 이유 2026년 07월 11일"
1. <section> — "시놀로지 워드프레스 구축 방법과 실패 없는 HDD 고르기 2026년 07월 10일"
1. <section> — "블로그 글감 없을 때, 일상을 콘텐츠로 바꾸는 법 2026년 06월 21일"
1. <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. 디자인 토큰 정의 (원본 값 그대로)

다음은 스캔 데이터에 기반하여 추출된 시각적 토큰 정의입니다. 모든 값은 원본 사이트의 구현을 재현하기 위한 정확한 수치입니다.

/* 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)

다음은 스캔 데이터만으로는 정확한 구현을 위해 추가적인 정보가 필요한 영역입니다.

CMS/데이터 바인딩: 기사 본문 (article 태그)의 동적 콘텐츠 관리 시스템(CMS) 구조 및 데이터 바인딩 로직은 스캔되지 않았습니다.
폰트 라이선스 및 파일: "Open Sans", Oswald, "Dancing Script"의 실제 웹폰트 파일 및 라이선스 확보가 필요합니다.
서버 측 로직: 댓글 작성 시의 서버 전송 및 성공/실패 메시지 처리 등 백엔드 로직은 스캔 범위 외입니다.
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 산출물로 생성.

28 KiB Raw Blame History

웹벤치마크 koritips.com 2026-07-11

레이아웃 골격 (스캔 실측 — LLM 미개입)

홈 / — 위→아래 블록 구성

/category/blogging/ (blog · list-article)

/about/ (about · list-card)

/contact/ (contact · list-card)

/이용약관/ (legal · list-card)

/개인정보-처리방침/ (legal · list-card)

/토픽-클러스터/ (blog · form)

/워드프레스-플로그인/ (other · form)

위젯 감지 요약

Kori's Tips - Lived. Learned. Shared. 레퍼런스 사이트 재구축 명세

한 줄 요약 (One-line Impression)

1. 시각적 정체성 (Visual Identity)

1-1. 컬러 팔레트 (Color Palette)

1-2. 타이포그래피 (Typography)

2. 레이아웃 및 여백 (Layout & Whitespace)

2-1. 페이지 골격 서술 (Page Skeleton — 위→아래)

2-2. 그리드 시스템 (Grid System)

2-3. 섹션 간 여백 (Section Spacing)

2-4. 카드/카드 그리드 (Card Spacing)

2-5. Border Radius / 컨테이너

3. 마이크로 인터랙션 (Micro Interaction)

3-1. Hover / Focus 효과

3-2. Transition 패턴

3-3. 레이어링 (z-index / position)

4. 톤앤매너 (Tone & Manner)

4-1. 시각적 톤앤매너 한 문단 (Visual Personality)

4-2. 헤드라인 / 서브헤드라인 / CTA 카피

4-3. Placeholder 및 보이스 신호

9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch)

9-1. 디자인 토큰 정의 (원본 값 그대로)

9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비 등)

1. 메인 콘텐츠 컨테이너 (main-content)

2. 사이드바 (sidebar-alt)

3. 카드 컴포넌트 (li - 메뉴/슬라이드)

4. 입력 필드 (input)

5. 페이지네이션 (nav)

9-3. 페이지별 레이아웃 마크업 가이드

A. 홈페이지 (/) - list-article 템플릿

B. 블로그 상세 페이지 (/category/blogging/) - list-article 템플릿

C. 이용약관 상세 페이지 (/legal/terms/) - list-card 템플릿

9-4. 인터랙션 재현 명세

9-5. 콘텐츠 및 자산 준비 목록 (Checklist)

9-6. 개발 티켓 (원본 복원 기준)

🔍 복원 시 추정이 필요한 영역 (Buildability Gaps)

10. 서비스 정의 & 포지셔닝 (What Are They Selling)

10-1. 한 줄 포지셔닝 분석

10-2. 타깃 사용자와 핵심 가치 제안

10-3. 서비스 유형 분류

11. 가격 & 수익 구조 (Pricing & Unit Economics)

11-1. 가격 티어 추출

11-2. AI 원가 추정 (표)

11-3. 마진 시뮬레이션

12. 기능 인벤토리 & 사용자 여정 (Feature Inventory)

12-1. 사용자 여정 지도

12-2. 백엔드 요구 기능

12-3. MVP 컷 (2~3일 버전)

13. 운영 & 방향성 제안 (Operations & Direction)

13-1. 시리즈화 아이디어

13-2. 광고비 0원 마케팅 채널

13-3. 출시 후 검증 지표

13-4. 사용자 컨텍스트 결합 변형

📝 변경 이력 (Change history)

28 KiB

Raw Blame History

홈 `/` — 위→아래 블록 구성

`/category/blogging/` (blog · list-article)

`/about/` (about · list-card)

`/contact/` (contact · list-card)

`/이용약관/` (legal · list-card)

`/개인정보-처리방침/` (legal · list-card)

`/토픽-클러스터/` (blog · form)

`/워드프레스-플로그인/` (other · form)

1. 메인 콘텐츠 컨테이너 (`main-content`)

2. 사이드바 (`sidebar-alt`)

3. 카드 컴포넌트 (`li` - 메뉴/슬라이드)

4. 입력 필드 (`input`)

5. 페이지네이션 (`nav`)

A. 홈페이지 (`/`) - `list-article` 템플릿

B. 블로그 상세 페이지 (`/category/blogging/`) - `list-article` 템플릿

C. 이용약관 상세 페이지 (`/legal/terms/`) - `list-card` 템플릿