- Raw_Data 자동 정리 산출물이 각 도메인 From_RawData/ 로 편입, 00_INDEX 연결 갱신
- 컴퓨터_이사_체크리스트.md 추가 (두뇌-상대 경로 규약 v2.2.304 — 새 컴퓨터에서
바꿀 절대 경로는 localBrainPath 1개)
- Astra 세션 산출물(에피소드 기억·기능 인벤토리) 갱신
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
헤더/GNB: header 태그를 사용하며, post-header 클래스를 가진다. 너비는 416px로 고정되어 있다.
메인 콘텐츠 영역: main-content 클래스를 가진 div가 본문 내용을 담으며, 너비는 1150px, 최대 너비는 "1150px"로 설정되어 있다. 좌우 마진은 145px이다.
사이드바: aside 태그를 사용하며, 너비는 340px, 최대 너비는 "340px"이다. 상단 패딩은 85px이며, 본문 영역의 좌측에 배치된다.
푸터: footer 태그를 사용하며, boxed-wrapper clear-fix 클래스를 가진다. 너비는 1150px, 최대 너비는 "1150px"이며, 본문 영역과 동일한 좌우 마진(145px)을 가진다.
콘텐츠 흐름: [class*="container"] 클래스를 가진 div가 전체 콘텐츠의 컨테이너 역할을 하며, 너비는 1150px로 설정되어 있다.
2-2. 그리드 시스템 (Grid System)
콘텐츠 컨테이너: [class*="container"] 클래스를 가진 div가 전체 레이아웃의 기준 너비(1150px)를 설정한다.
카드 그리드: 콘텐츠 카드 배열 시 세 가지 패턴이 관찰된다:
6개 항목 배치, 가로 간격 5px, 세로 리듬 0.
10개 항목 배치 (블로그 그리드), 가로 간격 -753px, 세로 리듬 763px.
6개 항목 배치, 가로 간격 9px, 세로 리듬 0.
2-3. 섹션 간 여백 (Section Spacing)
섹션 간의 명확한 수직적 리듬은 각 콘텐츠 블록의 verticalRhythmPx 값에 의해 결정되며, 이는 0px 또는 763px 등 특정 값을 가진다.
2-4. 카드/카드 그리드 (Card Spacing)
각 카드는 13px 너비와 높이를 가지는 작은 요소들(예: 슬라이더 도트)부터, 157px 너비와 60px 높이를 가지는 메뉴 항목까지 다양한 크기로 존재한다.
2-5. Border Radius / 컨테이너
전반적인 borderRadius 값은 스캔 데이터에서 명확하게 추출되지 않았으나, 특정 컴포넌트(예: slick-active 상태의 리스트 아이템)는 50%의 borderRadius를 가진다.
3. 마이크로 인터랙션 (Micro Interaction)
3-1. Hover / Focus 효과
커버 이미지 텍스트: .wp-block-cover-image-text 또는 그 내부의 링크(a)에 마우스 오버 시 텍스트 색상이 rgb(255, 255, 255)로 변경된다.
파일 버튼: :where(.wp-block-file__button):where(a):active 상태에서는 텍스트 색상이 rgb(255, 255, 255)로 바뀌며, opacity가 "0.85" 적용된다.
슬라이더/넘버링: slick-arrow와 같은 슬라이더 요소는 특정 위치(top: 205px)에 절대적으로 배치되어 있다.
3-2. Transition 패턴
전환(Transition) 분포에 대한 구체적인 CSS 값은 스캔 데이터에서 추출되지 않았다.
3-3. 레이어링 (z-index / position)
페이지의 주요 콘텐츠는 zIndex: 1000을 가진 컨테이너 내에 위치하며, 슬라이더 추적(slick-track)은 zIndex: 999를 사용한다.
상단/하단의 슬라이더 화살표(slick-arrow)는 zIndex: 1010으로 가장 높은 레이어에 위치한다.
4. 톤앤매너 (Tone & Manner)
4-1. 시각적 톤앤매너 한 문단 (Visual Personality)
rgb(249, 249, 249) 배경과 rgb(0, 0, 0) 본문 색상을 사용하여 정보 전달에 극도로 집중된 차분하고 전문적인 블로그 톤을 유지한다. 전체적으로 무채색이 85%를 차지하며, rgb(33, 195, 255)의 액센트 컬러는 최소한의 시각적 가이드 역할을 수행한다. 폰트는 "Open Sans"를 기반으로 하여 높은 가독성을 확보하고 있다.
4-2. 헤드라인 / 서브헤드라인 / CTA 카피
사이트 타이틀: "Kori's Tips - Lived. Learned. Shared."
본문 샘플: "Lived. Learned. Shared."
푸터 텍스트 (예시): "카테고리 Blogging Tips (28) BANNER ADS 살면서 건진 소소한 팁들을 매주 나눠드려요. 구독하고 오늘 하나만 건져가세요."
검색 플레이스홀더: "Search..." 및 "Type & hit Enter...".
4-3. Placeholder 및 보이스 신호
보이스 시그널: 공식적인 어조를 유지하며, usesPolite: false, usesCasual: false로 나타나 격식 있으면서도 친근함을 잃지 않는 정보 제공자적 태도를 취한다.
ARIA 레이블: "검색", "사이드바", "Dark Mode Switcher" 등의 접근성 레이블이 사용된다.
⚠️IA·토큰 파트 합성 실패: 모델 출력이 붕괴(반복/깨짐)했습니다. — 나머지 파트는 계속 진행됨.
9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch)
9-1. 디자인 토큰 정의 (원본 값 그대로)
/* Color Palette Tokens */:root{--color-text-primary:rgb(0,0,0);/* Primary Text */--color-text-secondary:rgb(70,70,70);/* Secondary Text */--color-background-page:rgb(249,249,249);/* Global Background */--color-background-dark:rgb(3,3,3);/* Deepest Black/Primary Element BG */--color-accent-blue:rgb(33,195,255);/* Primary Accent */--color-border-mid:rgb(188,188,188);/* Mid-tone Border/Separator */--color-border-dark:rgb(51,51,51);/* Footer/Secondary Border */--color-white:rgb(255,255,255);/* Pure White */}/* Typography Tokens */:root{--font-primary:"Open Sans",sans-serif;--font-heading:Oswald,serif;--font-body-size:19px;--font-h2-size:27px;--font-h3-size:17px;--line-height-body:21.85px;}/* Layout & Spacing Tokens */:root{--container-width-lg:1150px;--margin-horizontal-lg:145px;/* Applies to main content wrapper */--sidebar-width:340px;}
name="s" (검색), name="author", name="email" 등 필드 존재.
글 제목 (H2)
각 페이지
5~6개
해당 시점의 최신 글 제목 목록을 반영해야 함.
9-6. 개발 티켓 (원본 복원 기준)
태그
작업 내용
범위 및 목표
[FE]
글로벌 스타일 및 토큰 구현
rgb() 기반의 모든 색상, Open Sans/Oswald 폰트 및 크기(19px, 27px 등)를 CSS 변수로 구현.
[FE]
레이아웃 시스템 구축
1150px 컨테이너 너비, 0px 145px 마진을 가진 메인 콘텐츠 영역 및 340px 사이드바 구조 구현.
[FE]
컴포넌트 빌딩 (Article Card)
다양한 크기(13x13, 56x60)와 테두리/패딩을 가진 Article Card 컴포넌트를 구현.
[FE]
페이지 템플릿 구현 (T1, T2, T3)
홈/목록(T1), 상세(T2), 법적 페이지(T3)의 HTML 골격을 정확히 재현.
[FE]
반응형 및 레이어링 구현
min-width: 782px 등의 미디어 쿼리 및 z-index, position: absolute/relative를 사용하여 레이어링 구조 재현.
[FE]
인터랙션 및 접근성 구현
스크롤러, 슬라이더 화살표의 position과 zIndex를 포함한 모든 인터랙션 및 포커스 규칙을 재현.
[Asset]
이미지/미디어 자산 준비
페이지별 요구되는 width, height 및 aspectRatio에 맞는 원본 이미지 파일 준비.
[BE]
CMS/데이터 바인딩 (추정)
list-article 및 form 페이지의 동적 콘텐츠(글 제목, 본문, 댓글 폼)를 바인딩할 백엔드 구조 정의.
🔍 복원 시 추정이 필요한 영역 (Buildability Gaps)
다음은 스캔 데이터만으로는 정확한 구현이 불가능하거나, 원본 사이트의 동적 동작을 재현하기 위해 추정이 필요한 영역입니다.
CMS/데이터 흐름: 본문 내용, 댓글 폼 데이터(author, email 등), 페이지네이션 번호 (123)가 어떻게 동적으로 로드되고 관리되는지에 대한 백엔드(CMS) 구조는 스캔 데이터에 포함되어 있지 않습니다.
글꼴 라이선스 및 로딩:Open Sans와 Oswald의 정확한 웹폰트 파일 경로 및 로딩 전략(예: <link> 태그 사용 여부)은 명시되어 있지 않습니다.
슬라이더 라이브러리:slick-initialized, slick-slider 등의 클래스가 사용된 것으로 보아, 슬라이더 구현에 특정 라이브러리(예: Slick Carousel)가 사용되었으며, 해당 라이브러리의 초기화 및 동작 로직은 스캔 데이터에 포함되어 있지 않습니다.
폼 제출 처리: 댓글 및 검색 폼(name="s", name="author" 등)의 데이터가 서버로 전송되고 처리되는 엔드포인트 및 로직은 정의되어 있지 않습니다.
10. 서비스 정의 & 포지셔닝 (What Are They Selling)
10-1. 한 줄 포지셔닝 분석
헤드라인(microcopy.headline) 공식: 스캔 데이터 부족 — 메인 헤드라인이 존재하지 않습니다.
핵심 가치 제안 (서브헤드라인 기반): "Lived. Learned. Shared."라는 부제와 함께, 방문자에게 전문 지식을 공유하는 것을 목적으로 합니다. 구체적인 주제는 "토픽 클러스터 효과, 블로그 SEO 상위 노출의 비밀" 또는 "워드프레스 수익형 블로그 만들기: 안정적인 수익화 로드맵" 등 기술적이고 심층적인 가이드 제공입니다.
10-2. 타깃 사용자와 핵심 가치 제안
타깃 고객: 블로그 운영자, 웹사이트 구축에 관심 있는 IT 기술 사용자. (근거: h2List 및 페이지 URL의 주제가 SEO, 워드프레스, 시놀로지 NAS 등 전문 기술 영역임).
핵심 가치 제안: 방문자가 직접 경험하고 학습한 지식(Lived. Learned.)을 공유하여, 독자들이 블로그 운영 및 웹사이트 구축의 문제 해결(Troubleshooting)에 필요한 구체적인 노하우를 얻도록 합니다.
대체하는 기존 비용: 정보 탐색에 소요되는 시간 및 시행착오 비용.
10-3. 서비스 유형 분류
서비스 유형: 콘텐츠 (Content).
핵심 엔진: 정보 전달 및 지식 공유. 이 서비스는 특정 기능을 수행하는 도구(Tool)가 아닌, 전문적인 지식 아티클을 발행하는 플랫폼입니다. (근거: contentType이 list-article, blog 페이지가 주를 이룸).
11. 가격 & 수익 구조 (Pricing & Unit Economics)
11-1. 가격 티어 추출
가격/구독 문구: 스캔 데이터 부족 — 본 사이트의 페이지 텍스트, CTA 샘플, 또는 h2List에서 유료 서비스나 가격 정책을 나타내는 문구를 발견하지 못했습니다.
수익 모델 추정: 페이지 푸터 및 사이드바에서 "BANNER ADS"라는 문구를 통해 광고를 통한 수익화가 이루어지고 있음을 추정할 수 있습니다.
11-2. AI 원가 추정 (표)
적용 불가: 본 서비스는 콘텐츠 발행 및 정보 전달을 목적으로 하며, 핵심 기능으로서의 AI 생성 엔진(Generative Engine)을 사용하지 않습니다. 따라서 AI 원가 추정은 해당되지 않습니다.
11-3. 마진 시뮬레이션
적용 불가: 본 서비스는 콘텐츠 발행 및 트래픽 유입을 통한 광고 수익 모델이며, 제품 판매나 구독료를 받지 않아 마진 시뮬레이션의 대상이 아닙니다.
12. 기능 인벤토리 & 사용자 여정 (Feature Inventory)
12-1. 사용자 여정 지도
방문 (Visit): 방문자가 사이트에 진입합니다. (main-menu-container 너비 1060px, bodyMaxWidth 없음).
탐색 (Browse): 방문자는 메인 메뉴(main-menu-container) 또는 카테고리별 페이지(/category/blogging/)를 통해 콘텐츠에 접근합니다.
정보 소비 (Consume): 방문자는 아티클(article tag)을 읽으며 정보를 습득합니다. (근거: body 폰트 크기 19px, 줄 높이 21.85px).
피드백/참여 (Engage): 방문자는 댓글 작성 또는 검색(formField의 search 타입)을 통해 상호작용합니다.
법적 고지 확인 (Legal Check): 방문자는 이용약관 또는 개인정보 처리방침 페이지를 통해 서비스의 운영 규칙을 확인합니다.
12-2. 백엔드 요구 기능
콘텐츠 관리 시스템 (CMS): 다양한 주제의 아티클 발행 및 분류 (Blogging Tips 카테고리, list-article 타입).
검색 기능: 사이트 내 정보 검색을 위한 search 필드 구현.
댓글/상호작용 시스템: 방문자의 댓글 작성을 위한 form 필드 구현 (필수 입력: author, email).
사이트 구조 관리: 페이지네이션(blog-pagination 너비 753px) 및 사이트맵 관리가 필요합니다.
모바일 대응:responsiveHints에 따라 다양한 화면 크기(min-width: 782px, max-width: 781px)에 대응하는 레이아웃이 필요합니다.
12-3. MVP 컷 (2~3일 버전)
핵심 기능: 고품질의 핵심 콘텐츠 발행 및 노출. (가장 중요한 것은 정보 자체).
필수 기능:main-menu-container를 통한 주요 페이지(Home, About, Contact) 접근성 확보.
제외 기능: 복잡한 댓글 시스템이나 고급 검색 필터링은 초기 단계에서 제외하고, 콘텐츠의 질적 향상에 집중합니다.
13. 운영 & 방향성 제안 (Operations & Direction)
13-1. 시리즈화 아이디어
시리즈 공식: 전문 지식 공유 (정보 제공 + 문제 해결).
인접 서비스 3가지:
"워드프레스 SEO 플러그인 비교: Rank Math와 Yoast" (도구/비교 분석 시리즈)
Antigravity Agent
2cc6eff2dd