278 lines
14 KiB
Markdown
278 lines
14 KiB
Markdown
# 웹벤치마크 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
|
||
<!-- Header Section -->
|
||
<header class="e1rkdor11 MuiBox-root mui-style-1c8koze">
|
||
<!-- Logo & Nav Links -->
|
||
<nav class="MuiBox-root mui-style-1ypl5o3">
|
||
<ul>
|
||
<li>About</li>
|
||
<li>Caliverse</li>
|
||
<!-- ... other links from JSON ... -->
|
||
</ul>
|
||
</nav>
|
||
<!-- Action Buttons -->
|
||
<div class="button-group">
|
||
<button class="MuiButton-root">Log-in</button>
|
||
<button class="MuiButton-root">KR</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content Section -->
|
||
<main class="e1rkdor10 MuiBox-root mui-style-17l764i">
|
||
<section id="hero">
|
||
<h1>JUMP IN CALIVERSE</h1>
|
||
<p>PC LAUNCHER 런처 클라이언트를 다운로드 후...</p>
|
||
<!-- Video/Image Content -->
|
||
<video width="1100" height="280" style="border-radius: 20px;"></video>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer Section -->
|
||
<footer class="MuiBox-root mui-style-1d7wxpy">
|
||
<p>상호: 주식회사 칼리버스 | 대표: 김동규...</p>
|
||
</footer>
|
||
```
|
||
|
||
### 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 연동**: 푸터의 주소나 연락처 등 동적으로 변경될 수 있는 데이터의 관리 구조.
|