2nd/00_Raw/_benchmarks/site/site_분석.md

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)

/ (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 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)

<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%)의 상세 동작 트리거.