# 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 {/* Header Section */}
{/* Hero Section */}

JUMP IN CALIVERSE

Experience the Ultimate FPS Battle

{/* Video/Media Content */}
{/* Feature List/Cards */}
{/* Card items with MuiList-root structure */}
``` ### 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%`)의 상세 동작 트리거.