koriweb
2a4a5046b6
- 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>
291 lines
14 KiB
Markdown
291 lines
14 KiB
Markdown
# 웹벤치마크 www.caliverse.io 2026-05-20
|
||
|
||
- **원본 URL**: www.caliverse.io
|
||
- **스캔 시각**: 2026-05-20T04:11:24.529Z
|
||
- **크롤 옵션**: depth 3 · 최대 8페이지
|
||
- **생성**: Astra /benchmark · Datacollect web-benchmark
|
||
|
||
# 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)
|
||
전체 구성 중 무채색이 94%로 매우 압도적인 비중을 차지하며, 포인트 컬러(Accent)는 6%로 제한되어 있어 극도의 대비를 보여줍니다.
|
||
* **Primary Neutral**: `rgb(32, 332)` (가장 높은 빈도: 142회)
|
||
* **Primary Accent**: `rgb(26, 229, 172)` (포인트 컬러로 사용됨)
|
||
* **Secondary Neutral**: `rgb(255, 255, 255)` (48회)
|
||
* **Link/Disabled State**: `rgba(255, 255, 255, 0.4)` (6회)
|
||
* **Background**: `rgba(0, 0, 0, 0)` (스캔 데이터상 투명값으로 명시됨)
|
||
|
||
### 1-2. 타이포그래피 (Typography)
|
||
글꼴은 가독성이 높은 산세리프 계열을 사용하며, 시스템 폰트 스택을 정교하게 구성하고 있습니다.
|
||
* **Primary Font Stack**: `Pretendard`, `"Noto Sans KR"`, `"Noto Absent JP"`, `sans-serif`
|
||
* **Body Text**: `16px` 크기, `400` 웨이트, `normal` 라인 높이 적용
|
||
* **Button Text (UI Component)**:
|
||
* `24px` 크기의 대형 버튼 요소 존재 (`fontFamily: "Arial"`)
|
||
* 일반 텍스트는 `14px` 및 `16px` 위주로 구성됨
|
||
* **Font Weights**: `400`(166회), `500`(35회), `600`(18회) 순으로 사용되어 정보의 계층을 분리함
|
||
|
||
## 2. 레이아웃 및 여백 (Layout & Whitespace)
|
||
### 2-1. 그리드 시스템 (Grid System)
|
||
* **Viewport**: `1440px` x `900px` 기준 설계
|
||
* **Container**: `header`와 `main`은 `width: 1440px`이며, `maxWidth: none`으로 설정되어 화면 전체를 활용함
|
||
* **Header Padding**: `0px 30px`의 좌우 여백을 가짐
|
||
|
||
### 2-2. 섹션 간 여백 (Section Spacing)
|
||
* 스캔 데이터 내 명시적인 섹션 간 간격 수치는 "스캔 데이터 부족"으로 확인됨
|
||
|
||
### 2 3. 카드/카드 그리드 (Card Spacing)
|
||
* **Card Layout**: `MuiList-root` 클래스를 통해 구현된 리스트 형태의 구조를 가짐
|
||
* **Gap**: 요소 간 `horizontalGapPx: 25px`의 간격이 적용됨
|
||
|
||
### 2-4. Border Radius / 컨테이너
|
||
* **Button/UI**: `4px`(버튼), `8px`(KR 선택기), `100px`(Log-in 버튼) 등 목적에 따라 상이함
|
||
* **Media**: 비디오 요소(`video`)에는 `20px`의 큰 곡률 적용
|
||
|
||
## 3. 마이크로 인터랙션 (Micro Interaction)
|
||
### 3-1. Hover / Focus 효과
|
||
* **Button Hover**: `.mui-style-1s7qa4e:hover` 시 배경색이 `rgba(32, 32, 32, 0.1)`로 변화하며 색상 대비를 제공함
|
||
* **Link/Input**: `input:focus` 시 `outline: none` 처리가 되어 있으며, 특정 요소에 대해 `box-shadow`를 통한 피드백을 설계함
|
||
|
||
### 3-2. Transition 패턴
|
||
* 모든 속성(`all`)에 대해 `0.2s` 동안 `ease-in-out` 및 `ease` 가속도가 적용되어 부드러운 움직임을 구현함 (`duration: 0.2s`, `count: 3/1`)
|
||
|
||
### 3-3. 레이어링 (z-index / position)
|
||
* **Fixed Header**: `header` 요소는 `position: fixed`, `z-index: 1000`으로 설정되어 스크롤 시 상단에 고정됨
|
||
* **Overlay/Layer**: `MuiBox-root mui-style-5iw4aw`와 같이 `z-index: 1000`을 가진 레이어가 존재함
|
||
|
||
## 4. 라이팅 톤앤매너 (Microcopy & Voice)
|
||
### 4-1. 헤드라인 / 서브헤드라인 / CTA 카피
|
||
* **Headline/Description**: "In our exploration, we’ve discovered a strange new world..."와 같이 미지의 세계를 탐험하는 듯한 서사적 문체를 사용함
|
||
* **CTA Samples**: `Shop`, `Workshop`, `Log-in`, `KR` 등 명확하고 짧은 명령형/명사형 단어를 사용하여 행동 유도력을 높임
|
||
|
||
### 4-2. Placeholder 및 보이스 신호
|
||
* **Voice Signal**: 감정적 동요가 없는 정중한(Polite) 톤을 유지하며, 이모지나 느낌표 등의 과도한 사용은 배제됨 (`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 | 주요 역할 | 주요 섹션 구성 (Section Roles) | 콘텐츠 타입 |
|
||
| :--- | :--- | :--- | :--- |
|
||
| `/` | 브랜드 및 서비스 소개 랜딩 | `header` → `main` → `footer` | `list-card` |
|
||
|
||
### 러5-4. IA 특징 정리
|
||
* **단일 페이지 구조**: 전체 사이트가 하나의 페이지(`totalPages: 1`)로 구성된 싱글 페이지 애플리케이션(SPA) 형태의 랜딩 페이지입니다.
|
||
* **내비게이션 중심**: `header`와 `nav`를 통해 `About`, `Caliverse`, `Guide`, `Company`, `Contact` 등 서비스의 주요 섹션으로 연결되는 구조를 가집니다.
|
||
* **콘텐츠 집중도**: 텍规律적인 페이지 이동보다는 스크롤을 통한 정보 전달(Depth 3~4)에 집중되어 있습니다.
|
||
|
||
### 5-5. 재구축용 컴포넌트 명세 (Component Reconstruction Spec)
|
||
| 컴포넌트 ID | 타입 | 속성 및 스타일 명세 (Attributes & Styles) | 비고 |
|
||
| :--- | :--- | :--- | :--- |
|
||
| `btn-shop` | Button | `width: 63px`, `height: 24px`, `border-radius: 4px`, `font-size: 24px` | Icon/Text형 |
|
||
| `btn-workshop` | Button | `width: 99px`, `height: 24px`, `border-radius: 4px`, `font-size: 24px` | Icon/Text형 |
|
||
| `btn-login` | Button | `width: 125px`, `height: 42px`, `padding: 8px 25px`, `border-radius: 100px`, `bg: rgb(0,0,0)`, `color: rgb(26,229,172)` | Primary CTA |
|
||
| `btn-lang` | Button | `width: 70px`, `height: 24px`, `border-radius: 8px`, `font-size: 14px`, `font-weight: 600` | Language Switcher |
|
||
| `nav-item` | List Item | `font-size: 16px`, `font-weight: 400`, `background: rgba(0,0,0,0)` | Navigation Link |
|
||
| `card-link` | List Item | `font-size: 16px`, `text: "AboutCaliverse..."`, `padding: 0px` | Footer/Menu Link |
|
||
|
||
### 5-6. 미디어 처리 (Media Treatment)
|
||
* **이미지(Img)**: 총 19개 요소 중 스캔 데이터상 확인된 규격화된 이미지 포함 (`width: 207px, height: 19px` 등). `object-fit: contain` 적용 필요.
|
||
* **비디오(Video)**: 4개의 비디오 소스 존재. `width: 1100px`, `height: 280px`, `aspectRatio: 3.s93`, `border-radius: 20px` 규격 준수 필요.
|
||
|
||
---
|
||
|
||
## 6. 준비해야 할 리소스 (Resources You Need to Prepare)
|
||
|
||
### 6-1. 페이지별 이미지/비디오 수
|
||
* **이미지**: 총 19개 (로고, 아이콘, 배너 등 포함)
|
||
* **비디오**: 4개 (`aspectRatio: 3.93`의 고정 규격 영상)
|
||
|
||
### 6-2. 카피라이팅 분량
|
||
* **Headline/Description**: "In our exploration, we’ve discovered a strange new world..." (약 150자 내외 영문 텍스트)
|
||
* **Footer Info**: 상호, 대표자명, 주소, 연락처 등 법적 고지 정보 포함.
|
||
|
||
### 6-3. 폼/입력 필드 목록
|
||
* 스캔 데이터상 `formField` 개수: 0 (입력 폼 없음)
|
||
|
||
---
|
||
|
||
## 7. 디자인 토큰 (Design Tokens)
|
||
|
||
### Color & Typography
|
||
| 분류 | Token | Value (Exact) |
|
||
| :--- | :--- | :--- |
|
||
| **Color** | Primary Text | `rgb(32, 32, 32)` |
|
||
| | Accent Color | `rgb(26, 229, 172)` |
|
||
| | Link Color | `rgba(255, 25*s, 255, 0.4)` |
|
||
| | Background (Neutral) | `rgb(32, 32, 32)` (count: 142), `rgb(255, 255, 255)` (count: 48) |
|
||
| **Typography** | Primary Font | `Pretendard`, `"Noto Sans KR"`, `"Noto Sans JP"`, `sans-serif` |
|
||
| | Body Size | `16px` |
|
||
| | Button Size | `24px` |
|
||
| | Font Weight | `400`, `500`, `600`, `700` |
|
||
|
||
### Layout & Spacing
|
||
| 분류 | Token | Value (Exact) |
|
||
| :--- | :--- | :--- |
|
||
| **Spacing** | Header Padding | `0px 30px` |
|
||
| | Footer Padding | `20px 0px` |
|
||
| **Radius** | Border Radius Scale | `4px`, `8px`, `20px`, `100px` (Pill shape) |
|
||
| **Layout** | Viewport Size | `1440px * 900px` |
|
||
|
||
---
|
||
|
||
## 8. 페이지 템플릿 맵 (Page Template Map)
|
||
|
||
| 템플릿 ID | 적용 URL | 공통 블록 순서 (위 → 아래) | 페이지별 차이점 | 재사용 컴포넌트 |
|
||
|---|---|---|---|---|
|
||
| T1: Brand Landing | `/` | Header → Nav → Main(Hero/Content) → Footer | (단독 페이지) | Header, Nav, Main, Footer |
|
||
|
||
**Template Specification Notes:**
|
||
* **T1 (Brand Landing)**: `header`와 `nav`는 `position: fixed` 또는 `sticky`로 상단 고정(`zIndex: 1000`)을 기본으로 하며, `main` 섹션 내의 콘텐츠는 `viewport` 높이에 따라 스크롤되는 구조임. `main` 태그 내부에는 비디오 요소(`video`, `borderRadius: 20px`)가 포함된 섹션이 배치되어야 함.
|
||
|
||
---
|
||
|
||
## 9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch)
|
||
|
||
> **⚠️ 이 단계의 미션 (절대 이탈 금지)**
|
||
> - 이 섹션은 **원본 레퍼런스 사이트와 가능한 한 같은 사이트를 처음부터 다시 만들기 위한 개발 명세**다.
|
||
> - 다른 서비스로 재해석하거나 개선하지 않으며, 오직 원본의 수치를 그대로 복원하는 데 집중한다.
|
||
> - 모든 결정값(색상, 폰트, 여백, Radius, 전환 속도)은 제공된 JSON 스캔 데이터의 값을 정확히 인용한다.
|
||
|
||
### 9-1. 디자인 토큰 정의 (원본 값 그대로)
|
||
|
||
```css
|
||
/* CSS Variables Definition */
|
||
:root {
|
||
/* Colors - Palette from JSON */
|
||
--color-neutral-dark: rgb(32, 32, 32);
|
||
--color-white: rgb(255, 255, 255);
|
||
--color-accent: rgb(26, 229, 172);
|
||
--color-black: rgb(0, 0, 0);
|
||
--color-transparent-white: rgba(255, 255, 255, 0.4);
|
||
--color-transparent-white-low: rgba(255, 255, 255, 0.6);
|
||
--color-black-alpha: rgba(0, 0, 0, 0);
|
||
|
||
/* Typography */
|
||
--font-primary: "Pretendard", "Noto Sans KR", "Noto Sans JP", sans-serif;
|
||
--font-body: "Noto Sans KR", -apple-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 in JSON */
|
||
|
||
/* Layout & Spacing */
|
||
--viewport-width: 1440px;
|
||
--viewport-height: 900px;
|
||
--header-padding: 0px 30px;
|
||
--footer-padding: 20px 0px;
|
||
|
||
/* Border Radius Scale */
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
러
|
||
--radius-lg: 20px;
|
||
--radius-pill: 100px;
|
||
|
||
/* Transitions */
|
||
--transition-standard: 0.2s ease-in-out;
|
||
}
|
||
```
|
||
|
||
### 9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비 등)
|
||
|
||
| 컴포넌트 타입 | 속성 (Props/CSS) | 상세 수치 및 값 (JSON 근거) |
|
||
| :--- | :--- | :--- |
|
||
| **Button (Primary)** | `background`, `color`, `border-radius`, `padding` | `rgb(0, 0, 0)`, `rgb(255, 255, 255)`, `100px`, `8px 25px`, `font-weight: 600` |
|
||
| **Button (Ghost/Link)** | `background`, `border`, `font-size` | `rgba(0, 0, 0, 0)`, `0px none rgb(32, 32, 32)`, `24px` |
|
||
| **Navigation Item** | `font-size`, `font-weight` | `16px`, `400` |
|
||
| **Card (List Item)** | `padding`, `border-radius`, `font-size` | `0px`, `0px`, `16px` |
|
||
| **Video/Media Container**| `border-radius`, `object-fit` | `20px`, `cover` |
|
||
|
||
### 9-3. 페이지별 레이아웃 마크업 가이드
|
||
|
||
#### [Template T1: Main Landing Page]
|
||
**구조 (HTML Skeleton):**
|
||
```html
|
||
<!-- Header Section -->
|
||
<header class="e1rkdor11 MuiBox-root mui-style-1c8koze" style="padding: 0 30px; display: flex;">
|
||
<!-- Logo & Navigation -->
|
||
<nav class="MuiBox-root mui-style-1ypl5o3">
|
||
<ul>...</ul>
|
||
</nav>
|
||
<!-- CTA Buttons (Shop, Workshop, Log-in, KR) -->
|
||
<div class="button-group">...</div>
|
||
</header>
|
||
|
||
<!-- Main Content Section -->
|
||
<main class="e1rkdor10 MuiBox-root mui-style-17l764i">
|
||
<!-- Hero/Video Section -->
|
||
<section class="hero-section">
|
||
<video width="1100" height="280" style="border-radius: 20px;"></video>
|
||
<h1>JUMP IN CALIVERSE...</h1>
|
||
</section>
|
||
<!-- Content List/Cards -->
|
||
<section class="content-grid">
|
||
<!-- MuiList-root components -->
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer Section -->
|
||
<footer class="MuiBox-root mui-style-1d7wxpy" style="padding: 20px 0px;">
|
||
<p>상호: 주식회사 칼리버스 | ...</p>
|
||
</footer>
|
||
```
|
||
|
||
### 9-4. 인터랙션 재현 명세
|
||
|
||
* **Button Hover (Link/Icon Type):**
|
||
* `selector: .mui-style-1s7qa4e.MuiButtonBase-root:hover`
|
||
* `background: rgba(32, 32, 32, 0.1)`
|
||
* `color: rgb(32, 32, 32)`
|
||
* **Global Transition:**
|
||
* `property: all`, `duration: 0.2s`, `easing: ease-in-out` (또는 `ease`)
|
||
* **Input Autofill Fix:**
|
||
* `selector: input:-webkit-autofint`
|
||
* `transition: background-color 9999s ease-out`
|
||
|
||
### 9-5. 콘텐츠 및 자산 준비 목록
|
||
|
||
* **[이미지/비디오 자산]**
|
||
* [ ] 로고 이미지 (Width: 207px, Height: 19px)
|
||
* [ ] 메인 비주얼 비디오 (3개 세트, 1100x280px, `object-fit: cover`, `border-radius: 20px`)
|
||
* [ ] 기타 아이콘 및 UI 요소 (12px~24px 크기의 PNG/SVG)
|
||
* **[텍래프트/카피]**
|
||
* [ ] 메인 헤드라인 ("JUMP IN CALIVERSE...")
|
||
* [ ] 푸터 정보 (주소, 대표자명, 이메일 등 텍스트 데이터)
|
||
* **[기타]**
|
||
* [ ] KR 언어 선택을 위한 국가 아이콘/텍스트
|
||
|
||
### 9-6. 개발 티켓 (원본 복원 기준)
|
||
|
||
* **[FE]** 디자인 토큰(CSS Variables) 기반 테마 설정 (`:root` 정의)
|
||
* **[FE]** Material UI(MUI) 스타일 클래스(`mui-style-...`)를 활용한 레이아웃 구조 구현
|
||
* **[FE]** Header/Navigation 컴포넌트 및 반응형 미디어 쿼리(`max-width: 1280px` 등) 적용
|
||
* **[Asset]** 비디오 플레이어 컴포넌트 제작 (`border-radius: 20px` 적용)
|
||
* **[Asset]** 로고 및 UI 아이콘 에셋 등록
|
||
|
||
---
|
||
|
||
## 🔍 복원 시 추정이 필요한 영역 (Buildability Gaps)
|
||
|
||
* **Dynamic Data:** `AboutCaliverseCaliumGuideCompanyContact`와 같이 하나의 문자열로 뭉쳐 있는 리스트 항목들의 개별 분리 구조.
|
||
* **Video Source:** 비디오 태그(`video`) 내부에 실제 재생될 소스 파일의 경로 및 포맷.
|
||
* **Navigation Logic:** `nav` 태프트 내의 각 메뉴 클릭 시 이동할 내부/외부 링크(URL) 매핑 정보.
|
||
* **Font Files:** `Pretendable`, `Noto Sans KR` 등의 웹폰트 호스팅 및 `@font-face` 선언 경로.
|