Add caliverse.io web benchmark output and meeting memory update

- Add /benchmark scan results for www.caliverse.io (tokens, screenshots, analysis) - Add 2026-05-19 meeting episode record - Update Topics_meeting long-term memory Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 13:26:51 +09:00
parent 5d34b7d237
commit 2a4a5046b6
8 changed files with 1828 additions and 1 deletions
@@ -0,0 +1,284 @@
+# NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE) 레퍼런스 사이트 재구축 명세
+
+> **레퍼런스 URL**: https://www.caliverse.io
+> **분석 일자**: 2026-05-20
+> **분석 관점**: 4-렌즈 (Visual / Layout / Interaction / Voice) + IA 및 페이지 템플릿 + 재구축 명세
+> **스캔된 페이지**: 1개 (crawlDepth: 3)
+
+## 한 줄 요약 (One-line Impression)
+무채색(Neutral) 중심의 정적인 컬러 팔레트와 강렬한 포인트 컬러(`rgb(26, 229, 172)`)를 사용하여 미래지향적이고 몰입감 있는 메타버스 세계관을 시각적으로 구현한 사이트입니다.
+
+## 1. 시각적 정체성 (Visual Identity)
+### 1-1. 컬러 팔레트 (Color Palette)
+*   **Primary Neutral**: `rgb(32, 32, 32)` (가장 높은 비중의 핵심 컬러)
+*   **Accent Color**: `rgb(26, 229, 17 ලෙස)` (전체 구성 중 6%를 차지하는 포인트 컬러)
+*   **Secondary Neutral**: `rgb(255, 255, 255)`
+*   **Composition**: 무채색이 94%로 매우 우세하며, 액센트 컬러는 6%로 제한되어 있어 시각적 집중도를 높임.
+*   **Background/Link**: 배경은 `rgba(0, 0, 0, 0)`이며, 링크 컬러는 `rgba(255, 255, 255, 0.4)`를 사용함.
+
+### 1-2. 타이포그래피 (Typography)
+*   **Font Family**: `Pretendard`, `"Noto Sans KR"`, `"Noto Sans JP"`, `sans-serif` 기반의 산세리프 체계.
+*   **Body Text**: 기본 크기 `16px`, `fontWeight: 400`.
+*   **Button Text**: `24px`, `fontWeight: 400`, Font Family는 `Arial`로 지정됨.
+*   **Font Weights**: `400`(가장 많음), `500`, `600`, `300`, `700` 등 다양한 두께를 사용함.
+*   **Font Sizes**: `16px`가 가장 빈번하게 사용되며, `24px`, `14px`, `13px`, `12px` 순으로 구성됨.
+
+## 2. 레이아웃 및 여백 (Layout & Whitespace)
+### 2-1. 그리드 시스템 (Grid System)
+*   **Viewport**: `1440px` x `900px` 기준.
+*   **Container**: `header`와 `main`은 `width: 1440px`, `maxWidth: none`으로 설정되어 있으며, `padding: 0px 30px`를 통해 내부 여백을 확보함.
+
+### 2래오 2-2. 섹션 간 여백 (Section Spacing)
+*   스캔 데이터 내 명시적인 섹션 간 마진 값은 "스캔 데이터 부족".
+
+### 2-3. 카드/카드 그리드 (Card Spacing)
+*   **Card Container**: `MuiList-root` 클래스를 사용하며, 자식 요소 간 `horizontalGapPx: 25px`의 간격을 유지함.
+
+### 2-4. Border Radius / 컨테이너
+*   **Scale**: `4px`, `8px`, `20px`, `100px`(Pill형) 등 다양한 반경이 사용됨.
+*   **Video/Media**: 비디오 요소에는 `20px`의 큰 `borderRadius`를 적용하여 부드러운 느낌을 줌.
+
+## 3. 마이크로 인터랙션 (Micro Interaction)
+### 3-1. Hover / Focus 효과
+*   **Button Hover**: `.mui-style-1s7qa4e`와 같은 요소에 호버 시 `background: rgba(32, 32, 32, 0.1)` 및 `color: rgb(32, 32, 32)`로 변화함.
+*   **Button (Log-in)**: `rgb(26, 229, 172)` 보더와 `rgb(0, 0, 0)` 배경을 가진 특수 버튼 존재.
+*   **Input Focus**: `outline: none` 및 `boxShadow: none` 처리를 통해 기본 포커스 링을 제거함.
+
+### 3-2. Transition 패턴
+*   **Distribution**: `0.2s`, `ease-in-out` 및 `ease` 속성의 `all` 프로퍼티에 대한 트랜지션이 적용됨 (count: 3, 1).
+
+### 3-3. 레이어링 (z-index / position)
+*   **Fixed Header**: `header`는 `position: fixed`, `zIndex: 1000`으로 설정되어 상단에 고정됨.
+*   **Layering Structure**: `z-index: 1000` (Header/Nav), `z-index: 3100` (Static Content) 등 계층 구조가 명확함.
+
+## 4. 라이팅 톤앤매너 (Microcopy & Voice)
+### 4-1. 헤드라인 / 서브헤드라인 / CTA 카피
+*   **CTA Samples**: `Shop`, `Workshop`, `Log-in`, `KR` 등의 짧고 명확한 명령형/명사형 키워드 사용.
+*   **Description**: "In our exploration, we’ve discovered a strange new world..."와 같이 신비롭고 탐험적인 톤의 영문 설명 제공.
+
+### 4-2. Placeholder 및 보이스 신호
+*   **Voice Signals**: `usesPolite: false`, `usesEmoji: false`로 확인되며, 감정적이거나 과장된 표현보다는 정보 전달 위주의 담백한 어조를 유지함.
+*   **Body Sample**: "About" (스캔 데이터 기준).
+
+---
+
+## 5. 정보 구조 / 사이트 맵 (Information Architecture)
+
+### 5-1. 사이트 트리 다이어그램 (Page Tree)
+```text
+/ (other · list-card · imgs:19 · CTA:4) NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE)
+```
+
+### 5-2. 페이지 목록 (Flat View)
+- `https://www.caliverse.io/` (메인 랜딩 페이지)
+
+### 5-3. 페이지별 구성 요약 (Page Composition)
+| 페이지 URL | 주요 콘텐츠 역할 (Role) | 구성 요소 요약 |
+| :--- | :--- | :--- |
+| `/` | Landing Page | Header(Navigation), Main(Hero/Feature), Footer(Company Info) |
+
+### 5-4. IA 특징 정리
+- **단일 페이지 구조**: `totalPages: 1`로 명시된 바와 같이, 별도의 하위 페이지 없이 하나의 도메인 내에서 모든 정보를 제공하는 싱글 페이지 형태임.
+- **내비게이션 구조**: `nav` 태그를 통해 `About`, `Caliverse`, `Guide`, `Company`, `Contact` 등 서비스의 주요 섹션으로 연결되는 구조를 가짐.
+*참고: 상세 페이지나 하위 카테고리 구조에 대한 데이터는 스캔 데이터 부족으로 확인 불가함.*
+
+### 5-5. 재구축용 컴포넌트 명세 (Component Reconstruction Spec)
+| 컴포넌트 타입 | 명칭/텍스트 | 주요 속성 및 스타일 (Size, Radius, Border, BG) |
+| :--- | :--- | :--- |
+| **Button** | Shop | `width: 63px`, `height: 24px`, `border-radius: 4px`, `bg: rgba(0,0,0,0)`, `font-size: 24px` |
+| **Button** | Workshop | `width: 99px`, `height: 24px`, `border-radius: 4px`, `bg: rgba(0,0,0,0)`, `font-size: 24px` |
+| **Button** | Log-in | `width: 125px`, `padding: 8px 25px`, `border-radius: 100px`, `border: 1px solid rgb(26,229,172)`, `bg: rgb(0,0,0)` |
+| **Button** | KR (Lang) | `width: 70px`, `height: 24px`, `border-radius: 8px`, `border: 0px none rgb(32,32,32)`, `bg: transparent` |
+| **List Item** | Nav Link | `font-size: 16px`, `font-weight: 400`, `bg: transparent` (About, Caliverse, Guide 등) |
+| **List Item** | Info Text | `font-size: 16px`, `font-weight: 4* (AboutCaliverseCaliumGuideCompanyContact)*` |
+
+### 5-6. 미디어 처리 (Media Treatment)
+- **이미지(Img)**: 로고 및 기타 UI 요소로 사용됨. (최대 `width: 207px`, `height: 19px`, `object-fit: contain`)
+- **비디오(Video)**: 메인 섹션의 배경 또는 기능적 요소로 활용됨. (`width: 1100px`, `height: 280px`, `border-radius: 20px`, `object-fit: cover`)
+
+---
+
+## 6. 준비해야 할 리소스 (Resources You Need to Prepare)
+
+### 6-1. 페이지별 이미지/비디오 수
+- **이미지(Images)**: 총 19개 (로고 및 UI 요소 포함)
+- **비디오(Videos)**: 총 4개
+
+### 6-2. 카피라이팅 분량
+- **Headline**: "NEW EARTH의 발견, 칼리버스"
+- **Body/Description**: "In our exploration, we’ve discovered a strange new world..." (약 150자 내외)
+- **Footer Info**: 주식회사 정보, 주소, 연락처 등 (상세 텍스트 존재)
+
+### 6-3. 폼/입력 필드 목록
+- 스캔 데이터에 명시된 `formField` count는 0으로, 별도의 입력 폼은 확인되지 않음 (스캔 데이터 부족).
+
+---
+
+## 7. 디자인 토큰 (Design Tokens)
+
+### Color
+| Type | Value | Usage |
+| :--- | :--- | :--- |
+| Primary | `rgb(26, 229, 172)` | Accent Color (Top Accents) |
+| Neutral | `rgb(32, 32, 32)` | Primary Text / Dark Gray |
+| Neutral | `rgb(255, 255, 255)` | White / Secondary Text |
+| Transparent | `rgba(0, 0, 0, 0)` | Background / Button BG |
+| Link/Alpha | `rgba(255, 255, 255, 0.4)` | Link Color / Low Opacity Text |
+
+### Typography
+| Property | Value |
+| :--- | :--- |
+| Primary Font | `Pretendard, "Noto Sans KR", "Noto Sans JP", sans-name` |
+| Body Size | `16px` (Font Weight: `400`) |
+| Button Size | `24px` (Font Weight: `400`, Family: `Arial`) |
+| Font Sizes | `16px, 15px, 14px, 13px, 24px, 12px` |
+| Font Weights | `400, 500, 600, 300, 700` |
+
+### Layout & Spacing
+| Property | Value |
+| :--- | :--- |
+| Viewport | `1440px x 900px` |
+| Max Width | `none` (Body), `1440px` (Header/Main/Footer) |
+| Header Padding | `0px 30px` |
+| Footer Padding | `20px 0px` |
+| Border Radius | `4px, 8px, 20px, 100px` |
+
+### Motion
+| Property | Value |
+| :--- | :--- |
+| Transition | `all (duration: 0.2s, easing: ease-in-out)` |
+
+---
+
+## 8. 페이지 템플릿 맵 (Page Template Map)
+
+| 템플릿 ID | 적용 URL | 공통 블록 순서 (위 → 아래) | 페이지별 차이점 | 재사용 컴포넌트 |
+|---|---|---|---|---|
+| T1: Landing Page | `/` | Header → Nav → Main(Hero/Feature) → Footer | (없음 / 단독 페이지) | Header, Nav, Button, Footer |
+
+**[Template Specification]**
+- **T1 (Landing Page)**: `header` 태그는 `position: fixed`, `z-index: 1000`으로 설정하여 상단 고정. `main` 섹션 내에는 비디오 요소(`video`)를 활용한 배경 구현이 필요하며, `border-radius: 20px`가 적용된 카드 형태의 레이아웃을 구성함. 모든 버튼은 `MuiButton` 기반의 클래스를 따름.
+
+---
+
+## 9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch)
+
+> **⚠️ 이 단계의 미션 (절대 이탈 금지)**
+> - 이 섹션은 **원본 레퍼런스 사이트와 가능한 한 같은 사이트를 처음부터 다시 만들기 위한 개발 명세**다.
+> - 다른 서비스로 재해석하거나 확장하지 않으며, 원본 그대로를 복원하는 것을 유일한 목적으로 한다.
+> - 모든 결정값(색상, 폰트, 여백, Radius, 전환 속도)은 제공된 JSON 스캔 데이터의 수치를 정확히 인용한다.
+
+### 9-1. 디자인 토큰 정의 (원본 값 그대로)
+
+```css
+/* CSS Variables Definition */
+:root {
+  /* Color Palette */
+  --color-primary: rgb(32, 32, 32);
+  --color-text-main: rgb(32, 32, 32);
+  --color-text-secondary: rgba(255, 255, 255, 0.4);
+  --color-accent: rgb(26, 229, 172);
+  --color-bg-neutral: rgb(32, 32, 32); /* Based on dominant count */
+  --color-white: rgb(255, 255, 255);
+  --color-black: rgb(0, 0, 0);
+  --color-transparent: rgba(0, 0, 0, 0);
+  --color-subtle-white: rgba(255, 255, 255, 0.6);
+
+  /* Typography */
+  --font-primary: "Pretendard", "Noto Sans KR", "Noto Sans JP", sans-serif;
+  --font-body: "Noto Sans KR", -apple-term-system, BlinkMacSystemFont, "system-ui", Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  --font-size-base: 16px;
+  --font-size-button-text: 24px; /* From button.fontSize */
+
+  /* Layout & Spacing */
+  --container-max-width: 1440px;
+  --border-radius-pill: 100px;
+  --border-radius-small: 4px;
+  --border-radius-medium: 8px;
+  --border-radius-large: 20px;
+
+  /* Transitions */
+  --transition-standard: all 0.2s ease-in-out;
+}
+```
+
+### 9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비 등)
+
+| 컴포넌트 타입 | Props / Style Specification |
+| :--- | :--- |
+| **Button (Primary/Log-in)** | `padding: 8px 25px;`, `border-radius: 100px;`, `background: rgb(0, 0, 0);`, `border: 0px none rgb(26, 229, 172);`, `color: rgb(32, 32, 32);`, `font-weight: 600;`, `font-size: 14px;` |
+| **Button (Ghost/Shop)** | `width: 63px;`, `height: 24px;`, `display: flex;`, `padding: 0px;`, `background: rgba(0, 0, 0, 0);`, `border: 0px none rgb(32, 32, 32);`, `font-size: 24px;` |
+| **Button (KR/Language)** | `width: 70px;`, `height: 24px;`, `padding: 0px;`, `border-radius: 8px;`, `background: rgba(0, 0, 0, 0);`, `font-size: 14px;`, `font-weight: 600;` |
+| **Navigation Item** | `font-size: 16px;`, `font-weight: 400;`, `color: rgb(32, 32, 32);` (Based on card/list items) |
+| **Video Card (Feature)** | `width: 1100px;`, `height: 280px;`, `border-radius: 20px;`, `object-fit: cover;` |
+
+### 9-3. 페이지별 레이아웃 마크업 가이드
+
+**Template: Main Landing Page (Single Page Application Structure)**
+```jsx
+<HTML>
+  <body>
+    {/* Header Section */}
+    <header className="e1rkdor11 MuiBox-root mui-style-1c8koze" style={{ position: 'fixed', top: 0, zIndex: 1000, width: 1440, padding: '0 30px', display: 'flex' }}>
+      <nav className="MuiBox-root mui-style-1ypl5o3">
+        {/* Nav Links: About, Metaverse, Music Performance, etc. */}
+      </nav>
+      <div className="Button-Group">
+        <button className="mui-style-17i3o03">Shop</button>
+        <button className="mui-style-17i3*">Workshop</button>
+        <button className="mui-style-login">Log-in</button>
+      </div>
+    </header>
+
+    <main className="e1rkdor10 MuiBox-root mui-style-17l764i" style={{ display: 'flex', width: 1440 }}>
+      {/* Hero Section */}
+      <section className="hero">
+        <h1>JUMP IN CALIVERSE</h1>
+        <p>Experience the Ultimate FPS Battle</p>
+        {/* Video/Media Content */}
+      </section>
+
+      {/* Feature List/Cards */}
+      <section className="features">
+        {/* Card items with MuiList-root structure */}
+      </section>
+    </main>
+
+    <footer className="MuiBox-root mui-style-1d7wxpy" style={{ padding: '20px 0px' }}>
+      <p>상호: 주식회사 칼리버스 | ... (Footer Text)</p>
+    </footer>
+  </body>
+</HTML>
+```
+
+### 9-4. 인터랙션 재현 명세
+
+*   **Button Hover Effect**: `.mui-style-1s7qa4e:hover { background: rgba(32, 32, 32, 0.1); color: rgb(32, 32, 32); }`
+*   **Global Transition**: `all 0.2s ease-in-out` 적용 (스캔 데이터의 transitionDistribution 근거)
+*   **Input Autofill Fix**: `input:-webkit-autofilter... { transition: background-color 9999s ease-out; box-shadow: white 0px 0px 0px 1000px inset; }` 적용
+
+### 9-5. 콘텐츠 및 자산 준비 목록
+
+*   **[Assets] 이미지/아이콘**:
+    *   로고 및 브랜드 이미지 (스캔 데이터 기준 `img` 태그 총 19개 항목 확인)
+    *   아이콘 라이브러리: Inline SVG 사용 (`hasInlineSvg: true`)
+*   **[Assets] 비디오**:
+    *   메인 피처용 비디오 4개 세트 (스캔 데이터 `videoCount: 4` 근거, 각 `1100x280` 규격)
+*   **[Copywriting]**:
+    *   헤드라인: "JUMP IN CALIVERSE", "Experience the Ultimate FPS Battle"
+    *   푸터 정보: 주식회사 칼리버스 사업자 정보 및 연락처 전문
+
+### 9-6. 개발 티켓 (원본 복원 기준)
+
+*   **[FE]** 디자인 토큰(CSS Variables) 설정 및 테마 구축
+*   **[FE]** Material UI(MUI) 기반 레이아웃 구조(`MuiBox`, `MuiList`) 구현
+*   **[FE]** Header/Navigation 고정(Fixed) 및 반응형 미디어 쿼리 적용 (`max-width: 1280px` 등)
+*   **[Asset]** 비디오 소스 및 이미지 에셋 확보 (총 19개 이미지, 4개 비디오)
+*   **[FE]** 버튼 컴포넌트별 상태(Hover, Active) 인터랙션 구현
+
+## 🔍 복원 시 추정이 필요한 영역 (Buildability Gaps)
+
+*   **Dynamic Data**: `AboutCaliverseCaliumGuideCompanyContact` 등 텍스트가 하나로 뭉쳐 있는 부분의 개별 분리 구조.
+*   **Backend/CMS**: 각 섹션(Hero, Feature, Footer)에 들어가는 비디오 및 이미지의 동적 로딩 구조.
+*   **Font License**: `Pretendard` 및 `Noto Sans KR` 등의 웹폰트 호출 경로 및 라이선스 설정.
+*   **Navigation Logic**: 드롭다운 메뉴(`ul` 태그 `top: 100%`)의 상세 동작 트리거.