# VIBENTURE LABS 디자인 시스템 — Pearl Play 1.0

## 기준과 우선순위

2026-10-08 사용자가 승인한 세 제품 포스터와 회사 홈페이지 `da4cac1`의 시각 스타일을 기준으로 고정합니다. 같은 날 후속 지시로 포스터를 항상 유지하고 설명·CTA 항상 표시와 첫 입력 서비스 이동, Roblox 출시 라벨·Shello 웹 알파 라벨을 적용했습니다. 이 최신 동작이 초기 배포의 원본 스크린샷 전환보다 우선합니다. 운영 중인 원본은 `site/index.html`, `site/styles.css`, `site/app.js`, `src/hero.js`입니다. 새 브랜드 페이지와 로고는 이 기준을 확장한 제작물이며 사용자의 별도 시각 승인까지 받은 것으로 표현하지 않습니다.

우선순위: 사용자 최신 지시 → 이 문서의 의미·동작 계약 → `site/brand/tokens.json` 수치 → 원본 에셋 → 실제 기준 화면 → 생성 시안. 생성 시안에 잘못 표시된 글자·색상 코드가 있으면 JSON이 우선합니다. 홈페이지 기존 수치가 4px 배수가 아니어도 임의로 반올림하지 않습니다.

기준 화면: `output/qa/desktop-en.png`, `mobile-en.png`, `mobile-overlay-0.png`. 재현 화면 폭은 1440/390px, 추가 검사 폭은 320/768px입니다. 출력은 프레임워크와 무관하며 HTML·React·Vue·Roblox 등에서도 의미를 유지합니다. 다른 프로젝트 파일을 이 작업에서 직접 수정하지 않습니다.

## 한 문장 정의

**흰 여백 위에 정돈된 짙은 타이포를 놓고, 아쿠아·라벤더·코랄·민트의 매끈한 3D 세계로 호기심을 여는 디자인.**

회사 UI는 차분하고 명확하게, 제품의 상상력은 이미지와 캐릭터에서 풍부하게 드러납니다. 파스텔은 장식/선택 영역에 쓰고 본문에는 충분히 어두운 잉크를 씁니다. 홈페이지의 바닷속 비전 배너는 별도 콘텐츠 영역이며 전체 페이지를 어둡게 만드는 근거가 아닙니다.

## 색상 계약

| 토큰 | 값 | 용도 |
| --- | --- | --- |
| color.paper | #FFFFFF | 페이지 주 배경, 여백 |
| color.ink | #171B21 | 제목, 본문, 단색 로고 |
| color.muted | #666D77 | 보조 정보, 부제 |
| color.line | #DCE1E5 | 구획선·표면 경계; 필수 입력 경계는 대비를 별도 검증 |
| color.surface | #F6F8FA | 제품명 영역·가벼운 서식 배경 |
| color.aqua | #8DD8E1 | 핵심 브랜드 색, 연결·호기심 |
| color.lavender | #B9A7E6 | 상상력·중심 구체 |
| color.coral | #F59F98 | 생동감·포인트 |
| color.mint | #96D9CF | 보조 구체·차분한 변화 |
| color.focus | #287B8F | 키보드 포커스 3px |
| color.link | #337B8A | 흰 바탕 위 링크 |
| color.vision | #073343 | 비전 콘텐츠 한정 배경 |

흰색 본문을 파스텔 버튼 위에 두지 않습니다. 파스텔 배경에는 ink를 사용합니다. 상태는 색상과 글자/아이콘을 함께 사용합니다. 제품 팀이 오류/경고 색을 추가할 때 공통 파스텔을 억지로 사용하지 말고 의미 토큰으로 분리하고 대비를 검증합니다. 일반 본문 목표 4.5:1, 큰 글자/필수 UI 식별 목표 3:1입니다. 목표 수치만으로 전체 접근성 인증을 주장하지 않습니다.

## 타이포그래피

영문: 로컬 Manrope 가변 폰트 200–800 중 일반400·중간600·강조700·디스플레이800. 라이선스는 `site/assets/Manrope-OFL.txt`. 한국어는 Apple SD Gothic Neo / Malgun Gothic / 시스템 sans-serif로 폴백합니다. 이 때문에 OS별 한글 줄바꿈이 조금 달라질 수 있습니다. 새 유료 폰트를 추가하지 않습니다.

- 메인 디스플레이: `clamp(48px,6.05vw,84px)`, 행간1.04, 자간−.065em, 800.
- 기존 모바일 제목: `clamp(42px,9.4vw,65px)`; 긴 한국어 제목에는 자간−.045em 이하로 과도하게 압축하지 않습니다.
- 섹션 제목: 데스크톱40px / 모바일32px, 행간1.17, 자간−.045em.
- 읽는 본문: 16px / 행간1.8. 홈페이지의 짧은 보조 UI는12–13px입니다. 신규 서비스 장문을12px로 축소하지 않습니다.
- 아이브로:10px / 자간.3em; 8–9px은 기존 장식용 작은 라벨만 허용합니다. 필수 조작 글자는 최소12px 권장.
- 한국어 `word-break:keep-all; overflow-wrap:break-word`. 이미지를 읽어야만 기능을 이해하는 UI를 만들지 않습니다.

## 간격·레이아웃

신규 화면의 기본 리듬은4px이며 4/8/12/16/20/24/32/40/48/64/80/96을 사용합니다. 기존 홈페이지의 제품 간격22px(기본),16px(태블릿),25px(모바일)은 보존된 예외입니다.

컨테이너 최대1280px. 좌우 여백52px →1050px 이하32px →700px 이하20px →360px 이하16px. 세 제품은900px 초과3열,701–900px2열,700px 이하1열. 신규 대시보드·게임 HUD는 동일 열 수를 강제하지 않고 정보량·안전 영역·최소 터치 크기에 맞춥니다.

모서리: 카드5px, 작은 배지3px, 토글 알약24px. 모든 패널을 크게 둥글게 만들거나 글래스모피즘으로 바꾸지 않습니다. 기본 표면은 평면, 열렸을 때만 `0 16px 35px #243e5515` 정도의 그림자를 허용합니다.

## 세 제품 이미지 계약

| 제품 | 포스터 | 제작 참조 원본(노출하지 않음) | 고정 핵심 |
| --- | --- | --- | --- |
| Shello Friends | shello-poster-{en,ko}.webp | stargarden-studio.webp | 분홍 수달 모아·토끼·바닷속 이야기/언어/놀이 |
| 3AM Brainrot | brainrot-poster-{en,ko}.webp | 3am-studio.webp | 새벽 방·음악·코인·엄마를 피해 숨기 |
| 소라게 대이사 전쟁 | hermit-poster-{en,ko}.webp | hermit-studio.webp | 빨강/파랑 팀·해변·먹기/성장/협동·3v3 |

경로는 모두 `site/assets/`. 포스터는1024×1024, 정사각형에 `object-fit:contain`, 제목·픽토그램을 자르지 않습니다. 기존 포스터 문구와 캐릭터를 재생성 없이 그대로 사용하는 것이 기본입니다. 원본은 기존 제품 이미지이며 전부 실제 플레이 스크린샷이라고 주장하지 않습니다. 포스터에는 홍보용 아트워크라고 표시합니다.

기본 포스터는 saturate(.94), 흰 베일10%, blur0입니다. hover/focus에서 색을 드러내되 이미지와 설명은 계속 표시합니다. 소개와 실행 CTA는 이미지·제품명 아래에 항상 표시하고 내부 스크롤 없이 자연스럽게 이어집니다. 포스터 또는 CTA를 처음 누르면 서비스 새 탭으로 이동합니다. 제품명은 정적 정보이며 소개 열기 버튼·두 번 탭·Escape 닫기는 사용하지 않습니다. 키보드는 세 CTA에 순서대로 접근합니다. JavaScript가 없어도 제품 소개·링크를 이용할 수 있습니다.

Shello는 웹 알파와 앱마켓 출시 예정, Roblox 두 게임은 출시 상태입니다. 상태 리본은 I2I 커버의 일부이며 별도 CSS 라벨을 만들지 않습니다. EN/KO에 따라 src/alt를 전환하고 언어 설정을 저장합니다. 원본1024px 포스터·원본 생성PNG·서비스 주소를 보존합니다.

## 3D 재질·조명·모션

원본 수치는 tokens.json의 materials/scene와 `src/hero.js`가 기준입니다.

- 형태: 아치, 구체, 궤도, 별, 낮은 계단. 둥근 모서리와 분명한 실루엣.
- 재질: 매끈한 도자기·새틴. 크림 roughness.42/metalness0, 라벤더.39/.02, 아쿠아.17/.16·clearcoat1, 코랄.3·clearcoat.5, 민트.3·clearcoat.4.
- 조명: ACESFilmic, 노출1.0, 환경강도.65, 그림자 opacity.13. 밝지만 흰 물체의 모서리가 배경에 사라지면 실패.
- 회사 장면은 라벤더 중심 구체·아쿠아 링·크림 아치·작은 코랄 별. 제품 장면은 각자의 원본 캐릭터/플레이 공간을 유지합니다.
- 일반 UI250ms, 이미지450ms, 베일550ms, 캔버스 공개600ms. 자동 움직임은 느린 부유/회전이며 빠른 깜박임·큰 카메라 흔들림 금지.
- `prefers-reduced-motion:reduce`는 사용자 재생 상태보다 우선합니다. 자동 모션·시차·전환을 중지하고 정적 장면을 제공합니다. 일시정지는 저장되며 언어와 함께 새로고침 후 유지됩니다.
- 화면 밖/문서 비활성 때 렌더 루프를 중지합니다. pixelRatio 상한1.6. WebGL/번들 실패 시 정적 원본을 제공합니다.

서비스 엔진마다 광원/톤매핑이 달라 동일 숫자만 복사해도 같은 화면이 보장되지는 않습니다. 원본을 입력으로 사용하고 실제 캡처로 재질·색·가독성을 비교하는 검수를 함께 수행해야 합니다.

## 로고·CI/BI

회사명은 VIBENTURE LABS / 바이벤처 랩스. 슬로건은 “Imagine Boldly. Build Anything.” 홈페이지 헤더·푸터에는 `app-icon.png` 정사각형 로고와 인접 회사명을 사용합니다. LinkedIn 프로필에도 동일한 PNG를 재사용합니다. 심벌은 아쿠아 V 두 획과 라벤더 구체로 호기심과 가능성을 표현합니다. 심벌 자체는 평면이 표준이며 3D 표현은 프로모션용 보조입니다.

심벌 원도128×128: 선 두께25, 둥근 끝, 중심선(28,48)→(64,104)와(100,48)→(64,104), 원 중심(64,24), 반지름16. 최소크기24px, 주위 최소16/128(전체 폭의1/8) 여백. 가로 로고 최소160px, 세로 로고 최소120px. 더 작게 쓰면 심벌만 씁니다. 양각·색 변경·비율 왜곡·바쁜 이미지 위 직접 배치 금지. 색 배경에서는 단색 ink 또는 inverse를 사용하고 충분한 대비를 확인합니다.

색상/단색/역상 × 심벌/가로/세로 =9종, 기존 워드마크·앱 아이콘·파비콘까지 SVG12종. SVG의 워드마크는 Manrope를 내장한 편집 가능한 텍스트입니다. 폰트 내장을 지원하지 않는 인쇄/벡터 편집기에서는 함께 제공하는 PNG/PDF 또는 별도 글자 윤곽선 변환을 사용합니다. 로고 시안의 상표 검색·법적 등록은 이 작업의 완료 범위가 아닙니다.

## 확장·운영

회사 운영 패키지: 공용 명함(85×55mm 양면), A4 레터헤드, A4 제안서,16:9 소개/진행보고 슬라이드,1200×630 소셜 커버,1024px 앱 아이콘, 웹 파비콘, 회사 공용 메일 서명. 개인 이름·연락처·사업자번호·주소·금액은 임의로 만들지 않습니다. 필요한 값은 템플릿에 괄호 입력란으로 둡니다. 메일 서명 제작은 실제 회사 주소 발신 기능 설정과 별개입니다.

PDF는 디지털/사무실 출력용 RGB, 기본 재단 크기이며 인쇄소용 CMYK·도련·별색·교정쇄는 미검증입니다. 브라우저 에뮬레이션은 물리 기기 검증을 대신하지 않습니다.

새 규칙은 tokens.json을 수정한 뒤 `node scripts/build-brand.cjs`로 CSS/원본 에셋을 갱신합니다. `node scripts/export-brand.cjs`로 PNG/PDF를 재출력하고 `node scripts/verify-brand.cjs`로 확인합니다. 실제 홈페이지 수치를 바꾸는 작업은 별도 범위이며 브랜드 토큰 추가만으로 홈페이지 디자인을 바꾸지 않습니다.

- 상태 리본은 I2I 커버 이미지의 일부입니다. 별도 DOM/CSS 상태 라벨을 만들지 않고 언어별 완성 에셋을 사용합니다.

## 최종 홈페이지 적용

정사각형 로고 원본은 `/brand/assets/app-icon.png`(1024×1024)입니다. 아쿠아 V와 라벤더 구체의 기존 원본을 재사용하며 LinkedIn 프로필과 홈페이지가 같은 파일을 사용합니다. 헤더 표시 상자는64px, 모바일56px, 모바일 푸터48px입니다. 이미지 안쪽 여백을 포함한 크기이며 비율을 유지합니다. 접근 가능한 홈 링크 이름과 인접 회사명을 제공하고 중복 이미지 alt는 비웁니다.

메뉴는 제품→비전→연락 순서입니다. 헤더 위아래24px, 간격32px;700px 이하에서는 위아래16px, 회사명·언어를 첫 줄, 메뉴를 둘째 줄에 둡니다. 최소44px 조작 영역을 유지합니다.

창업자 소개는 모든 본문과 가치 섹션 다음, 푸터 바로 위의 마지막 섹션입니다. 기본 상태에는 실명 없이 David·창업자와 작은 펼침 조작만 표시합니다. 본문·경력·LinkedIn 링크는 네이티브 details/summary 안에 숨기고 누르면 공개합니다. 이름12px, 데스크톱auto/1fr열·간격24px·위아래16px, 모바일1열·위아래12px. EN/KO 전환 및 저장 복원을 따릅니다. 경력은 LinkedIn에서 실제 읽은 JP-brothers·Studio SJ·누비랩 역할만 반영하고 성과 숫자·회사별 경력 나열을 빼고 개인 경험에서 어린이를 위한 신규창업으로 이어지는 짧은 메시지로 작성합니다. 공개 프로필 내용 확인과 독립적인 경력 증빙은 별개입니다.

토큰의 panel은 실제 펼침 영역과 같은 흰색·blur0입니다. products.poster는 기본 영문 최종 커버, localizedPosters는 언어별 커버이며 originalPoster는 보존한 리본 없는 원본입니다. 서비스별 팔레트·캐릭터·두 번 탭 동작은 유지합니다. homepage 항목은 홈페이지 전용 치수이며 기존68개 공통 CSS 토큰과 분리됩니다.

- 로고 원본1024px와 HTML 표시 크기64px를 구분합니다. CSS 누락 시에도 원본 크기로 확대되지 않습니다. `scripts/package-pages.py`가 홈페이지 CSS/JS 참조에 내용 해시를 붙여 이전 캐시 혼용을 방지합니다.

## 미세 인터랙션 보완

카드 이미지만 포인터에 따라 각 축2.2도 이내로 기울입니다. 빛 반사는 흰 방사형 그라데이션, 기본opacity0에서 hover 시 공개합니다. 비전 배경은 해당 섹션의 뷰포트 위치에 따라±24px, 텍스트는 반대 방향±8px 시차를 사용합니다. 일부 섹션 제목·AI 항목·가치 문구는 화면에 처음 들어올 때750ms 동안16px 이동하며 나타납니다. 기본 HTML은 항상 보이며 JavaScript가 없거나 모션을 줄여도 정보가 사라지지 않습니다. 일시정지 시 Web Animations도 즉시 취소합니다. 히어로3D는 기존 모델·재질을 유지하고 스크롤에 따라 낮게 이동하며 궤도 구체의 깊이를 조금 바꿉니다. 반복 스크롤은 수동 RAF 하나로 병합하고 비활성 캔버스는 정지합니다.

창업자 메시지는 개인의 글로벌 카메라 앱·AI 경험을 짧게 언급한 뒤 어린이를 위한 VIBENTURE LABS의 새로운 시작으로 연결합니다. 실명·숫자·특정 앱 브랜드명·회사별 약력은 홈페이지에서 제외합니다. 개인의 이전 성과를 새 회사의 실적으로 오해하게 만들지 않습니다.


## Shello 웹 플레이어 최종 계약

Shello Friends의 포스터·웹 버튼은 첫 입력으로 거의 전체화면 native dialog를 엽니다. 별도 주소 표시 없이 iframe으로 실제 서비스를 실행합니다. 외곽만 글래스 처리하며 내용은 선명하게 유지합니다. 데스크톱 여백20px/모바일6px, 툴바52px, 닫기·새로고침44px입니다. 세 서비스 모두 실행 버튼 옆에 iOS/Android 실제 disabled 버튼과 작은 출시 예정 문구를 표시합니다. 실행 버튼은 옅은 아쿠아 배경·둥근24px 모서리·우상향 화살표를 공통 적용하고, 플랫폼 버튼은 같은 형태의 흐린 중성색입니다. Roblox 두 제품은 기존 외부 링크를 유지합니다.

iframe은 요청 시 생성하고 닫으면 제거합니다. 모달에서 배경 스크롤·홈페이지 WebGL을 정지하고 닫을 때 스크롤·초점을 복원합니다. Escape와 닫기를 지원합니다. CSP는 지정 서비스 origin만 frame-src로 허용하고 마이크는 해당 origin으로 제한합니다. 실제 녹음은 사용자 브라우저 허가가 필요하며 이번 검사에서는 녹음하지 않았습니다. 주소창에는 회사 주소가 유지되지만 개발자 도구에서 서비스 origin을 숨기는 보안 기능은 아닙니다.