2nd/00_Raw/웹벤치마크 www.caliverse.io 2026-05-20.md

웹벤치마크 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, 3‌‌32) (가장 높은 빈도: 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)

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

<!-- 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 선언 경로.