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