# 웹벤치마크 caliverse.io 2026-06-08
- **원본 URL**: caliverse.io
- **스캔 시각**: 2026-06-08T01:38:24.128Z
- **크롤 옵션**: depth 3 · 최대 8페이지
- **생성**: Astra /benchmark · Datacollect web-benchmark
# NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE) 레퍼런스 사이트 재구축 명세
> **레퍼런스 URL**: https://caliverse.io
> **분석 일자**: 2026-06-08
> **분석 관점**: 4-렌즈 (Visual / Layout / Interaction / Voice) + IA 및 페이지 템플릿 + 재구축 명세
> **스캔된 페이지**: 1개 (crawlDepth: 3)
## 한 줄 요약 (One-line Impression)
무채색 중심의 정제된 팔레트와 강렬한 민트색 포인트(Accent)를 사용하여, 미지의 세계(NEW EARTH)에 대한 신비로움과 미래지향적 가치를 시각적으로 구현한 몰입형 웹사이트입니다.
## 1. 시각적 정체성 (Visual Identity)
### 1-1. 컬러 팔레트 (Color Palette)
전체 구성 중 무채색이 94%로 매우 압도적인 비중을 차지하며, 포인트 컬러인 민트색(Accent)은 6%로 제한하여 시각적 주목도를 높였습니다.
* **Primary Background/Text**: `rgb(32, 3lam, 32)` (가장 높은 빈도: 142회) 및 `rgb(255, 255, 255)`
* **Accent Color**: `rgb(26, 229, 172)` (민트색 포인트, 16회)
* **Link/Opacity Color**: `rgba(255, 255, 255, 0.4)` 및 `rgba(255, 255, 255, 0.6)`
* **Base Neutral**: `rgb(28, 28, 28)` (4회)
### 1-2. 타이포그래피 (Typography)
Pretendard와 Noto Sans KR을 기반으로 한 산세리프 계열의 폰트 스택을 사용하여 높은 가독성을 확보했습니다.
* **Font Stack**: `Pretendard, "Noto Sans KR", "Noto Sans JP", sans-serif`
* **Body Text**: `16px`, `400` weight (기본 본문 크기)
* **Typography Scale**:
* Large: `24px` (주요 버튼 및 헤드라인 요소)
* Small: `12px` (최소 단위 텍스트)
* 기타 중간 크기: `13px`, `14px`, `15px` 분포
## 2. 레이아웃 및 여백 (Layout & Whitespace)
### 2-1. 그리드 시스템 (Grid System)
* **Viewport**: `1440px * 900px` 기준 설계
* **Container**: `header`, `main`, `footer` 모두 `width: 144*0px`로 설정되어 있으며, `maxWidth: none`을 사용하여 화면 전체를 활용하는 구조입니다.
* **Header Padding**: `0px 30px`의 좌우 여백을 가집니다.
### 2-2. 섹션 간 여백 (Section Spacing)
* 스캔 데이터 내 명시적인 섹션 간 마진(Margin) 수치는 스캔 데이터 부족으로 확인되지 않으나, `main` 영역은 `padding: 0px`로 설정되어 있습니다.
### 2-3. 카드/카드 그리드 (Card Spacing)
* **Card Layout**: `MuiList-root` 클래스를 사용하는 리스트 형태의 구조입니다.
* **Gap**: 가로 간격(Horizontal Gap)은 `25px`를 유지합니다.
### 2-4. Border Radius / 컨테이너
다양한 곡률을 사용하여 요소의 성격을 구분합니다.
* **Small/Standard**: `4px`, `8px`
* **Large/Round**: `20px` (비디오 요소 등에 적용), `100px` (알약 모양 버튼)
## 3. 마이크로 인터랙션 (Micro Interaction)
### 3-1. Hover / Focus 효과
* **Button Hover**: `rgba(32, 32, 32, 0.1)`의 배경색 변화 또는 `color: inherit` 적용.
* **Link/Input**: `:hover` 및 `:active` 상태에서 트랜지션이 발생하며, 특히 `input:autofill`에 대한 특수 처리가 포함되어 있습니다.
### 3-2. Transition 패턴
* 모든 애니메이션은 `0.2s`의 짧은 지속 시간과 `ease-in-out` 또는 `ease` 이징(Easing)을 사용하여 부드럽고 즉각적인 반응을 유도합니다. (`duration: 0.2s`)
### 3-3. 레이어링 (z-index / position)
* **Fixed Header**: `header` 요소는 `position: fixed`, `z-index: 1000`으로 설정되어 스크롤 시 상단에 고정됩니다.
* **Layering Depth**: 최상위 레이어(`z-index: 3100`)부터 하위 레이어(`z-index: 0`)까지 정교하게 분리되어 있습니다.
## 4. 마이크로카피 및 보이스 (Microcopy & Voice)
### 4-1. 헤드라인 / 서브헤드라인 / CTA 카피
* **Headline/Description**: "In our exploration, we’ve discovered a strange new world..." 문구를 통해 미지의 세계에 대한 탐험적 분위기를 조성합니다.
* **CTA (Call to Action)**: `Shop`, `Workshop`, `Log-in` 등 명확하고 직관적인 명령형 단어를 사용합니다.
### 4-2. Placeholder 및 보이스 신호
* **Voice Tone**: 감정적이거나 질문을 던지는 방식이 아닌, `usesPolite: false`, `usesEmoji: false`로 확인되는 담백하고 정보 전달 중심의 어조를 유지합니다.
* **Language**: 한국어(`kr`)와 영어(Description)가 혼용된 글로벌 타겟의 톤앤매너를 가집니다.
---
## 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)
- **메인 랜딩 페이지**: 칼리버스 브랜드의 세계관과 서비스(PC Launcher, Metaverse 등)를 소개하는 단일 페이지 구조로, 헤더(Navigation), 메인 섹션(Hero/Feature), 푸터(Information)로 구성됨.
### 5-4. IA 특징 정리
- **단일 페이지 구조**: 별도의 하위 페이지 이동 없이 스크롤을 통해 정보를 전달하는 싱글 페이지 애플리케이션(SPA) 형태의 레이아웃을 가짐.
- **내비게이션 중심**: `About`, `Caliverse`, `Guide`, `Company`, `Contact` 등 서비스 핵심 정보로 연결되는 상단 내비게이션이 명확하게 설계됨.
- **콘텐츠 계층**: 브랜드 비전(Hero) $\rightarrow$ 서비스 기능(PC Launcher/Metaverse) $\rightarrow$ 법적/기업 정보(Footer) 순의 전형적인 기업형 랜딩 구조를 따름.
### 5-5. 재구축용 컴포넌트 명세 (Component Reconstruction Spec)
- **Buttons**:
- `Shop Button`: `width: 63px`, `height: 24px`, `borderRadius: 4px`, `fontSize: 24px`
- `Workshop Button`: `width: 99px`, `height: 24px`, `borderRadius: 4px`, `fontSize: 24px`
- `Log-in Button`: `width: 125px`, `height: 42px`, `borderRadius: 100px`, `background: rgb(0, 0, 0)`, `border: 1px solid rgb(26, 229, 172)`, `fontSize: 14px`
- `KR (Language) Button`: `width: 69px`, `lang: kr`, `borderRadius: 8px`, `fontSize: 14px`
- **Navigation/List Items**:
- `Nav Links`: `About`, `Caliverse`, `Guide`, `Company`, `Contact` 등을 포함하는 리스트 아이템.
- `Card List Item`: `Metaverse`, `Pc Launcher`, `New Earth`, `PLANET IGM` 등 텍스트 기반의 리스트 컴포넌트.
- **Cards**:
- `List Card`: `padding: 0px`, `borderRadius: 0px`, `fontSize: 16px`.
### 5-6. 미디어 처리 (Media Treatment)
- **Images**: 로고 및 UI 요소로 사용되는 이미지 (`width: 207px` 등 스캔 데이터 기준).
- **Videos**: 배경 또는 섹션 강조용 비디오 (`width: 1100px`, `height: 280px`, `borderRadius: 20px`).
- **Icons**: UI 인터랙션을 위한 아이콘 세트 (스캔 데이터 내 `12x12` 등 존재).
---
## 6. 준비해야 할 리소스 (Resources You Need to Prepare)
### 6-1. 페이지별 이미지/비디오 수
- **이미지(Images)**: 총 19개 (로고, UI 아이콘, 배너 등)
- **비디오(Videos)**: 총 4개 (배경 재생용 비디오 섹션)
### 6-2. 카피라이팅 분량
- **Headline**: "NEW EARTH의 발견, 칼리버스"
- **Body Copy**: 서비스 소개 및 PC Launcher 다운로드 안내 문구 ("런처 클라이언트를 다운로드 후...")
- **Footer Info**: 주식회사 칼리버스 관련 법적 정보 (주소, 대표자명, 이메일 등)
### 6-3. 폼/입력 필드 목록
- 스캔 데이터 내 `formField` 항목은 존재하지 않음 (스캔 데이터 부족).
---
## 7. 디자인 토큰 (Design Tokens)
| 분류 | 속성 | 값 (Value / Reference) |
|---|---|---|
| **Color** | Primary Text | `rgb(32, 32, 32)` |
| | Accent Color | `rgb(26, 22 $\rightarrow$ 229, 172)` |
| | Link/Opacity Text | `rgba(255, 255, 255, 0.4)` |
| | Background (Neutral) | `94%` (무채색 위주 구성) |
| **Typography** | Primary Font Family | `Pretendard`, `Noto Sans KR`, `sans-serif` |
| | Body Size | `16px` |
| | Button/Heading Size | `24px` |
| | Font Weight | `400`, `500`, `600`, `700` |
| **Spacing** | Card Gap (Horizontal) | `25px` |
| **Radius** | Border Radius Scale | `4px`, `8px`, `20px`, `100px` |
| **Border** | Button Border | `1px solid rgb(26, 229, 172)` (Log-in 기준) |
| **Motion** | Transition | `0.2s ease-in-out` |
---
## 8. 페이지 템플릿 맵 (Page Template Map)
| 템플릿 ID | 적용 URL | 공통 블록 순서 (위 $\rightarrow$ 아래) | 페이지별 차이점 | 재사용 컴포넌트 |
|---|---|---|---|---|
| T1: Brand Landing | / | Header $\rightarrow$ Hero(Video) $\rightarrow$ Feature(Main) $\rightarrow$ Footer | (없음 / 단독 페이지) | Header, VideoPlayer, Button, Footer |
| T2: Service Info | / | Header $\rightarrow$ Content(Text/Img) $\rightarrow$ Footer | 서비스 설명 및 런처 안내 문구 차이 | Header, ListCard, Button, Footer |
**[템플릿 상세 명세]**
- **T1 (Brand Landing)**: `header` 태그의 고정된 내비게이션을 기반으로, `main` 섹션에서 비디오(`video`)와 대형 텍스트를 사용하여 브랜드 경험을 극대화함. `z-index: 1000`의 Fixed Header 적용 필요.
- **T2 (Service Info)**: `MuiList-root` 클래스를 활용하여 서비스의 주요 기능(Metaverse, PC Launcher 등)을 리스트 형태로 나열하며, 각 항목은 클릭 가능한 카드 형태를 유지함.
---
## 9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch)
### 9-1. 디자인 토큰 정의 (원본 값 그대로)
```css
/* CSS Variables Definition */
:root {
/* Color Palette */
--color-neutral-dark: rgb(32, 32, 32);
--color-white: rgb(255, 25SS, 255); /* 스캔 데이터 기반 white */
--color-transparent: rgba(0, 0, 0, 0);
--color-accent: rgb(26, 229, 172);
--color-black: rgb(0, 0, 0);
--color-white-alpha-4: rgba(255, 255, 255, 0.4);
--color-white-alpha-6: rgba(255, 255, 255, 0.6);
--color-dark-grey: rgb(28, 28, 28);
/* Typography */
--font-primary: "Pretendard", "Noto Sans KR", "Noto Sans JP", sans-serif;
--font-body: "Noto Sans KR", -apple-string, BlinkMacSystemFont, "system-ui", Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
--font-button: Arial;
--font-size-body: 16px;
--font-size-button: 24px;
--font-size-small: 14px;
--font-size-large: 24px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 20px;
--radius-pill: 100px;
/* Transitions */
--transition-standard: 0.2s ease-in-out;
}
```
### 9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비)
| 컴포넌트 타입 | 속성 (Properties) | 상세 수치 및 스타일 |
| :--- | :--- | :--- |
| **Button (Primary)** | `padding`, `border-radius`, `bg`, `color` | `8px 25px`, `100px`, `rgb(0, 0, 0)`, `rgb(26, 229, 172)` (Border) |
| **Button (Ghost)** | `width`, `height`, `font-size` | `63px x 24px`, `24px` (Shop), `99px x 24px` (Workshop) |
| **Navigation Link** | `font-size`, `font-weight` | `16px`, `400` |
| **Card (List Item)** | `padding`, `border-radius`, `font-size` | `0px`, `0px`, `16px` |
| **Header Container** | `width`, `padding`, `display` | `1440px`, `0px 30px`, `flex` |
### 9-3. 페이지별 레이아웃 마크업 가이드
#### [Template: Main Page (Single Page Application Structure)]
```html
JUMP IN CALIVERSE
PC LAUNCHER 런처 클라이언트를 다운로드 후...
```
### 9-4. 인터랙션 재현 명세
- **Button Hover State**: `.mui-style-1s7qa4e:hover` 적용 시 `background: rgba(32, 32, 32, 0.1)` 및 `color: rgb(32, 32, 32)`로 변경.
- **Global Transition**: 모든 요소에 대해 `transition: all 0.2s ease-in-out` 적용 (스캔 데이터의 transitionDistribution 근거).
- **Input Autofill**: `input:-webkit-autofill` 선택자에 대해 `background-color: transparent` 및 `box-shadow: white inset 0px 0px 0px 1000px` 처리.
### 9-5. 콘텐츠 및 자산 준비 목록
- **이미지/아이콘**: 로고 이미지(207x19px), 각종 UI 아이콘(12x12px, 24x24px 등)
- **비디오**: 메인 섹션용 비디오 소스 (1100x280px, aspect-ratio 3.93)
- **텍스트 카피**:
- 헤더 메뉴: "ABOUT", "METAVERSE", "MUSIC PERFORMANCE", "CALIVERSE VR", "SHOP", "WORKSHOP", "Log-in", "KR"
- 푸터 정보: 주식회사 칼리버스 사업자 정보 및 연락처
- **기타**: 폰트 라이선스 (Pretendard, Noto Sans KR 등)
### 9-6. 개발 티켓 (원본 복원 기준)
- **[FE]** Material UI(MUI) 기반 레이아웃 구조 설계 (`header`, `main`, `footer` 컨테이너 구현)
- **[FE]** 디자인 토큰(Color, Typography, Spacing) CSS 변수화 작업
- **[FE]** 컴포넌트 개발 (Button, List Item, Navigation Nav)
- **[Asset]** 비디오 및 이미지 에셋 최적화 및 경로 설정
- **[FE]** 반응형 뷰포트 대응 (`max-width: 430px`, `1280px` 등 미디어 쿼리 구현)
---
## 🔍 복원 시 추정이 필요한 영역 (Buildability Gaps)
- **동적 데이터 소스**: `AboutCaliverseCaliumGuideCompanyContact`와 같이 텍스트가 하나로 붙어 있는 부분의 개별 분리 구조.
- **비디오/이미지 경로**: 스캔된 `src` 값이 없으므로 실제 원본 서버의 미디어 파일 경로 추정 필요.
- **상호작용 로직**: 버튼 클릭 시 발생하는 구체적인 팝업(Modal)이나 드롭다운 메뉴의 동작 로직.
- **CMS 연동**: 푸터의 주소나 연락처 등 동적으로 변경될 수 있는 데이터의 관리 구조.