bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
af11d666d27c084c274ecd770e3ada8f1875c7f2
2nd/10_Wiki/Topics/Topics_Rag/웹벤치마크 caliverse.io 2026-06-08.md
T

14 KiB
Raw Blame History

웹벤치마크 caliverse.io 2026-06-08

  • 원본 URL: caliverse.io
  • 스캔 시각: 2026-06-08T01:38:24.128Z
  • 크롤 옵션: depth 3 · 최대 8페이지
  • 생성: Astra /benchmark · Datacollect web-benchmark

NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE) 레퍼런스 사이트 재구축 명세

레퍼런스 URL: https://caliverse.io 분석 일자: 2026-06-08 분석 관점: 4-렌즈 (Visual / Layout / Interaction / Voice) + IA 및 페이지 템플릿 + 재구축 명세 스캔된 페이지: 1개 (crawlDepth: 3)

한 줄 요약 (One-line Impression)

무채색 중심의 정제된 팔레트와 강렬한 민트색 포인트(Accent)를 사용하여, 미지의 세계(NEW EARTH)에 대한 신비로움과 미래지향적 가치를 시각적으로 구현한 몰입형 웹사이트입니다.

1. 시각적 정체성 (Visual Identity)

1-1. 컬러 팔레트 (Color Palette)

전체 구성 중 무채색이 94%로 매우 압도적인 비중을 차지하며, 포인트 컬러인 민트색(Accent)은 6%로 제한하여 시각적 주목도를 높였습니다.

  • Primary Background/Text: rgb(32, 3lam, 32) (가장 높은 빈도: 142회) 및 rgb(255, 255, 255)
  • Accent Color: rgb(26, 229, 172) (민트색 포인트, 16회)
  • Link/Opacity Color: rgba(255, 255, 255, 0.4) 및 rgba(255, 255, 255, 0.6)
  • Base Neutral: rgb(28, 28, 28) (4회)

1-2. 타이포그래피 (Typography)

Pretendard와 Noto Sans KR을 기반으로 한 산세리프 계열의 폰트 스택을 사용하여 높은 가독성을 확보했습니다.

  • Font Stack: Pretendard, "Noto Sans KR", "Noto Sans JP", sans-serif
  • Body Text: 16px, 400 weight (기본 본문 크기)
  • Typography Scale:
    • Large: 24px (주요 버튼 및 헤드라인 요소)
    • Small: 12px (최소 단위 텍스트)
    • 기타 중간 크기: 13px, 14px, 15px 분포

2. 레이아웃 및 여백 (Layout & Whitespace)

2-1. 그리드 시스템 (Grid System)

  • Viewport: 1440px * 900px 기준 설계
  • Container: header, main, footer 모두 width: 144*0px로 설정되어 있으며, maxWidth: none을 사용하여 화면 전체를 활용하는 구조입니다.
  • Header Padding: 0px 30px의 좌우 여백을 가집니다.

2-2. 섹션 간 여백 (Section Spacing)

  • 스캔 데이터 내 명시적인 섹션 간 마진(Margin) 수치는 스캔 데이터 부족으로 확인되지 않으나, main 영역은 padding: 0px로 설정되어 있습니다.

2-3. 카드/카드 그리드 (Card Spacing)

  • Card Layout: MuiList-root 클래스를 사용하는 리스트 형태의 구조입니다.
  • Gap: 가로 간격(Horizontal Gap)은 25px를 유지합니다.

2-4. Border Radius / 컨테이너

다양한 곡률을 사용하여 요소의 성격을 구분합니다.

  • Small/Standard: 4px, 8px
  • Large/Round: 20px (비디오 요소 등에 적용), 100px (알약 모양 버튼)

3. 마이크로 인터랙션 (Micro Interaction)

3-1. Hover / Focus 효과

  • Button Hover: rgba(32, 32, 32, 0.1)의 배경색 변화 또는 color: inherit 적용.
  • Link/Input: :hover 및 :active 상태에서 트랜지션이 발생하며, 특히 input:autofill에 대한 특수 처리가 포함되어 있습니다.

3-2. Transition 패턴

  • 모든 애니메이션은 0.2s의 짧은 지속 시간과 ease-in-out 또는 ease 이징(Easing)을 사용하여 부드럽고 즉각적인 반응을 유도합니다. (duration: 0.2s)

3-3. 레이어링 (z-index / position)

  • Fixed Header: header 요소는 position: fixed, z-index: 1000으로 설정되어 스크롤 시 상단에 고정됩니다.
  • Layering Depth: 최상위 레이어(z-index: 3100)부터 하위 레이어(z-index: 0)까지 정교하게 분리되어 있습니다.

4. 마이크로카피 및 보이스 (Microcopy & Voice)

4-1. 헤드라인 / 서브헤드라인 / CTA 카피

  • Headline/Description: "In our exploration, we’ve discovered a strange new world..." 문구를 통해 미지의 세계에 대한 탐험적 분위기를 조성합니다.
  • CTA (Call to Action): Shop, Workshop, Log-in 등 명확하고 직관적인 명령형 단어를 사용합니다.

4-2. Placeholder 및 보이스 신호

  • Voice Tone: 감정적이거나 질문을 던지는 방식이 아닌, usesPolite: false, usesEmoji: false로 확인되는 담백하고 정보 전달 중심의 어조를 유지합니다.
  • Language: 한국어(kr)와 영어(Description)가 혼용된 글로벌 타겟의 톤앤매너를 가집니다.

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)

  • 메인 랜딩 페이지: 칼리버스 브랜드의 세계관과 서비스(PC Launcher, Metaverse 등)를 소개하는 단일 페이지 구조로, 헤더(Navigation), 메인 섹션(Hero/Feature), 푸터(Information)로 구성됨.

5-4. IA 특징 정리

  • 단일 페이지 구조: 별도의 하위 페이지 이동 없이 스크롤을 통해 정보를 전달하는 싱글 페이지 애플리케이션(SPA) 형태의 레이아웃을 가짐.
  • 내비게이션 중심: About, Caliverse, Guide, Company, Contact 등 서비스 핵심 정보로 연결되는 상단 내비게이션이 명확하게 설계됨.
  • 콘텐츠 계층: 브랜드 비전(Hero) \rightarrow 서비스 기능(PC Launcher/Metaverse) \rightarrow 법적/기업 정보(Footer) 순의 전형적인 기업형 랜딩 구조를 따름.

5-5. 재구축용 컴포넌트 명세 (Component Reconstruction Spec)

  • Buttons:
    • Shop Button: width: 63px, height: 24px, borderRadius: 4px, fontSize: 24px
    • Workshop Button: width: 99px, height: 24px, borderRadius: 4px, fontSize: 24px
    • Log-in Button: width: 125px, height: 42px, borderRadius: 100px, background: rgb(0, 0, 0), border: 1px solid rgb(26, 229, 172), fontSize: 14px
    • KR (Language) Button: width: 69px, lang: kr, borderRadius: 8px, fontSize: 14px
  • Navigation/List Items:
    • Nav Links: About, Caliverse, Guide, Company, Contact 등을 포함하는 리스트 아이템.
    • Card List Item: Metaverse, Pc Launcher, New Earth, PLANET IGM 등 텍스트 기반의 리스트 컴포넌트.
  • Cards:
    • List Card: padding: 0px, borderRadius: 0px, fontSize: 16px.

5-6. 미디어 처리 (Media Treatment)

  • Images: 로고 및 UI 요소로 사용되는 이미지 (width: 207px 등 스캔 데이터 기준).
  • Videos: 배경 또는 섹션 강조용 비디오 (width: 1100px, height: 280px, borderRadius: 20px).
  • Icons: UI 인터랙션을 위한 아이콘 세트 (스캔 데이터 내 12x12 등 존재).

6. 준비해야 할 리소스 (Resources You Need to Prepare)

6-1. 페이지별 이미지/비디오 수

  • 이미지(Images): 총 19개 (로고, UI 아이콘, 배너 등)
  • 비디오(Videos): 총 4개 (배경 재생용 비디오 섹션)

6-2. 카피라이팅 분량

  • Headline: "NEW EARTH의 발견, 칼리버스"
  • Body Copy: 서비스 소개 및 PC Launcher 다운로드 안내 문구 ("런처 클라이언트를 다운로드 후...")
  • Footer Info: 주식회사 칼리버스 관련 법적 정보 (주소, 대표자명, 이메일 등)

6-3. 폼/입력 필드 목록

  • 스캔 데이터 내 formField 항목은 존재하지 않음 (스캔 데이터 부족).

7. 디자인 토큰 (Design Tokens)

분류 속성 값 (Value / Reference)
Color Primary Text rgb(32, 32, 32)
Accent Color rgb(26, 22 $\rightarrow$ 229, 172)
Link/Opacity Text rgba(255, 255, 255, 0.4)
Background (Neutral) 94% (무채색 위주 구성)
Typography Primary Font Family Pretendard, Noto Sans KR, sans-serif
Body Size 16px
Button/Heading Size 24px
Font Weight 400, 500, 600, 700
Spacing Card Gap (Horizontal) 25px
Radius Border Radius Scale 4px, 8px, 20px, 100px
Border Button Border 1px solid rgb(26, 229, 172) (Log-in 기준)
Motion Transition 0.2s ease-in-out

8. 페이지 템플릿 맵 (Page Template Map)

템플릿 ID 적용 URL 공통 블록 순서 (위 \rightarrow 아래) 페이지별 차이점 재사용 컴포넌트
T1: Brand Landing / Header \rightarrow Hero(Video) \rightarrow Feature(Main) \rightarrow Footer (없음 / 단독 페이지) Header, VideoPlayer, Button, Footer
T2: Service Info / Header \rightarrow Content(Text/Img) \rightarrow Footer 서비스 설명 및 런처 안내 문구 차이 Header, ListCard, Button, Footer

[템플릿 상세 명세]

  • T1 (Brand Landing): header 태그의 고정된 내비게이션을 기반으로, main 섹션에서 비디오(video)와 대형 텍스트를 사용하여 브랜드 경험을 극대화함. z-index: 1000의 Fixed Header 적용 필요.
  • T2 (Service Info): MuiList-root 클래스를 활용하여 서비스의 주요 기능(Metaverse, PC Launcher 등)을 리스트 형태로 나열하며, 각 항목은 클릭 가능한 카드 형태를 유지함.

9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch)

9-1. 디자인 토큰 정의 (원본 값 그대로)

/* CSS Variables Definition */
:root {
  /* Color Palette */
  --color-neutral-dark: rgb(32, 32, 32);
  --color-white: rgb(255, 25SS, 255); /* 스캔 데이터 기반 white */
  --color-transparent: rgba(0, 0, 0, 0);
  --color-accent: rgb(26, 229, 172);
  --color-black: rgb(0, 0, 0);
  --color-white-alpha-4: rgba(255, 255, 255, 0.4);
  --color-white-alpha-6: rgba(255, 255, 255, 0.6);
  --color-dark-grey: rgb(28, 28, 28);

  /* Typography */
  --font-primary: "Pretendard", "Noto Sans KR", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans KR", -apple-string, BlinkMacSystemFont, "system-ui", Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-button: Arial;
  
  --font-size-body: 16px;
  --font-size-button: 24px;
  --font-size-small: 14px;
  --font-size-large: 24px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  /* Transitions */
  --transition-standard: 0.2s ease-in-out;
}

9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비)

컴포넌트 타입 속성 (Properties) 상세 수치 및 스타일
Button (Primary) padding, border-radius, bg, color 8px 25px, 100px, rgb(0, 0, 0), rgb(26, 229, 172) (Border)
Button (Ghost) width, height, font-size 63px x 24px, 24px (Shop), 99px x 24px (Workshop)
Navigation Link font-size, font-weight 16px, 400
Card (List Item) padding, border-radius, font-size 0px, 0px, 16px
Header Container width, padding, display 1440px, 0px 30px, flex

9-3. 페이지별 레이아웃 마크업 가이드

[Template: Main Page (Single Page Application Structure)]

<!-- Header Section -->
<header class="e1rkdor11 MuiBox-root mui-style-1c8koze">
  <!-- Logo & Nav Links -->
  <nav class="MuiBox-root mui-style-1ypl5o3">
    <ul>
      <li>About</li>
      <li>Caliverse</li>
      <!-- ... other links from JSON ... -->
    </ul>
  </nav>
  <!-- Action Buttons -->
  <div class="button-group">
    <button class="MuiButton-root">Log-in</button>
    <button class="MuiButton-root">KR</button>
  </div>
</header>

<!-- Main Content Section -->
<main class="e1rkdor10 MuiBox-root mui-style-17l764i">
  <section id="hero">
    <h1>JUMP IN CALIVERSE</h1>
    <p>PC LAUNCHER 런처 클라이언트를 다운로드 후...</p>
    <!-- Video/Image Content -->
    <video width="1100" height="280" style="border-radius: 20px;"></video>
  </section>
</main>

<!-- Footer Section -->
<footer class="MuiBox-root mui-style-1d7wxpy">
  <p>상호: 주식회사 칼리버스 | 대표: 김동규...</p>
</footer>

9-4. 인터랙션 재현 명세

  • Button Hover State: .mui-style-1s7qa4e:hover 적용 시 background: rgba(32, 32, 32, 0.1) 및 color: rgb(32, 32, 32)로 변경.
  • Global Transition: 모든 요소에 대해 transition: all 0.2s ease-in-out 적용 (스캔 데이터의 transitionDistribution 근거).
  • Input Autofill: input:-webkit-autofill 선택자에 대해 background-color: transparent 및 box-shadow: white inset 0px 0px 0px 1000px 처리.

9-5. 콘텐츠 및 자산 준비 목록

  • 이미지/아이콘: 로고 이미지(207x19px), 각종 UI 아이콘(12x12px, 24x24px 등)
  • 비디오: 메인 섹션용 비디오 소스 (1100x280px, aspect-ratio 3.93)
  • 텍스트 카피:
    • 헤더 메뉴: "ABOUT", "METAVERSE", "MUSIC PERFORMANCE", "CALIVERSE VR", "SHOP", "WORKSHOP", "Log-in", "KR"
    • 푸터 정보: 주식회사 칼리버스 사업자 정보 및 연락처
  • 기타: 폰트 라이선스 (Pretendard, Noto Sans KR 등)

9-6. 개발 티켓 (원본 복원 기준)

  • [FE] Material UI(MUI) 기반 레이아웃 구조 설계 (header, main, footer 컨테이너 구현)
  • [FE] 디자인 토큰(Color, Typography, Spacing) CSS 변수화 작업
  • [FE] 컴포넌트 개발 (Button, List Item, Navigation Nav)
  • [Asset] 비디오 및 이미지 에셋 최적화 및 경로 설정
  • [FE] 반응형 뷰포트 대응 (max-width: 430px, 1280px 등 미디어 쿼리 구현)

🔍 복원 시 추정이 필요한 영역 (Buildability Gaps)

  • 동적 데이터 소스: AboutCaliverseCaliumGuideCompanyContact와 같이 텍스트가 하나로 붙어 있는 부분의 개별 분리 구조.
  • 비디오/이미지 경로: 스캔된 src 값이 없으므로 실제 원본 서버의 미디어 파일 경로 추정 필요.
  • 상호작용 로직: 버튼 클릭 시 발생하는 구체적인 팝업(Modal)이나 드롭다운 메뉴의 동작 로직.
  • CMS 연동: 푸터의 주소나 연락처 등 동적으로 변경될 수 있는 데이터의 관리 구조.
Reference in New Issue View Git Blame Copy Permalink