# 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%`)의 상세 동작 트리거.