# Pearl Play — 컴포넌트와 서비스 테마 규격

2026-10-08 최종 사용자 방향: 포스터 유지, I2I 커버 내부의 왼쪽 위 상태 리본, 언어별 커버6종, CSS 상태 라벨 제거. 공통 토큰은 `tokens.json`, 세부 레시피는 `components.json`, 실제 구현은 홈페이지 및 `/brand/`를 기준으로 합니다.

## 1. 스타일 이름과 재현 방법

브랜드 내부 명칭은 **Pearl Play**입니다. 시각적 표현은 **토이 3D / 둥근 입체 레터링 / 부드러운 새틴 재질**로 정의합니다. 흰 외곽선·크림색 받침·부드러운 아래 그림자를 겹쳐, 장난감 글자가 밝은 공간에 놓인 것처럼 만듭니다. 회사 본문까지 장난감 글꼴로 바꾸지 않습니다.

정확히 같은 결과가 필요한 경우 완성 포스터·로고·CSS를 재사용합니다. 이미지 생성 모델의 재생성은 픽셀 단위 동일성을 보장하지 않습니다. 숫자·프롬프트만으로 동일한 그림이 나온다고 가정하지 않습니다. 새 아트워크는 원본 포스터를 실제 입력으로 첨부한 I2I 편집으로 만들고, 캐릭터·제목·배치 보존을 확인합니다. 승인 전에는 기존 에셋을 교체하지 않습니다. 생성 포스터의 글자는 이미지의 일부이며, 동일한 설치형 폰트라고 특정하지 않습니다.

## 2. 글자 계층

| 용도 | 고정 규칙 |
| --- | --- |
| 회사 워드마크·큰 제목 | Manrope 800, 짙은 `#171B21`, 넓은 흰 여백. 홈페이지의 실제 크기·자간 유지 |
| 본문·설명·내비게이션 | Manrope와 시스템 한글 글꼴, 일반 가독성 중심. 게임식 외곽선 금지 |
| 상태 리본 | 이미지에 포함된 둥근 입체 레터링. 제목과 같은 재질·크림 외곽선·접지 그림자. 별도 HTML 글꼴로 재현하지 않음 |
| 포스터 제목 | 기존 아트워크의 도톰한 3D 레터링 그대로 사용. 새 문구는 I2I로 해당 제목 영역만 편집 |
| 제품명 | 홈페이지 카드의 기존 글꼴 유지. 상태 리본보다 정보 구조상 명확히 분리 |

## 3. 이미지에 통합된 상태 코너 리본

- 최종 구현은 **I2I로 편집한 포스터 이미지 자체**입니다. CSS 리본·웹 폰트 상태 라벨·별도 배지를 덧씌우지 않습니다.
- 커버 왼쪽 상단의 대각선 띠, 바탕은 Shello 라벤더 / 게임 민트. 둥근 두꺼운 입체 글자와 크림색 외곽선·부드러운 아래 그림자를 기존 제목 재질에 맞춥니다.
- 문구: Shello `ALPHA` / `알파 오픈`, 3AM·소라게 `OUT NOW` / `출시`. 보조 플랫폼 문구는 없습니다.
- 원본1024px 포스터를 입력해 영문 상태 커버를 만들고, 그 결과를 입력해 **상태 문구만** 한국어로 편집합니다. 나머지 제목·하단 행동 문구는 원본 영어를 보존합니다.
- 공개 파일은 `{shello,brainrot,hermit}-poster-{en,ko}.webp`, 각각1024×1024입니다. 최초 원본 `{서비스}-poster.webp`는 보존합니다.
- 언어 선택 시 이미지 src와 alt를 함께 교체하고 언어 설정을 저장합니다. alt와 카드의 텍스트 상태에서도 출시/알파를 설명합니다. 상태를 이미지에서만 읽을 수 있게 만들지 않습니다.
- 리본의 실제 글자·기울기·색·그림자와 안전영역은 완성 커버가 기준입니다. 생성 모델을 CSS 수치처럼 결정적으로 제어할 수 있다고 표현하지 않습니다. 컴포넌트 JSON의 파일 해시가 재현 기준입니다.
- 새 시안은 해당 원본을 반드시 I2I 입력으로 첨부하고, 큰 제목·캐릭터·하단 아이콘·맞춤법을 비교합니다. 커버를 다시 만들 필요가 없으면 완성 파일을 그대로 씁니다.

## 4. 제품 카드와 설명

| 컴포넌트 | 형태 / 상태 / 동작 |
| --- | --- |
| 카드 | 흰 배경·모서리5px·얇은 경계, 데스크톱3열/태블릿2열/모바일1열 |
| 포스터 | 정사각 contain, 원본·언어별 I2I 리본 유지, 클릭 시 바로 서비스 새 탭 |
| 기본 흰 베일 | 흰색10%, blur0, saturate.94. hover/focus 시 베일 제거 |
| 제품명 | 정적 텍스트. 펼침 버튼·aria-expanded·두 번 탭 없음 |
| 소개 | 이미지·제품명 아래 항상 전체 표시. 내부 스크롤·이미지 가림 없음 |
| 실행 링크 | 항상 표시하는 실제 a 태그·46px 높이, 첫 클릭/Enter로 새 탭. 쿼리·해시 보존 |
| 출시 예정 | Shello의 Google Play·Apple App Store 출시 예정. 가짜 링크 없음 |

필수 정보는 JavaScript나 hover 없이도 보입니다. 포스터 링크는 중복 Tab 정지를 피하고 키보드는 명확한 본문 CTA로 이동합니다. Tab은 세 제품의 CTA를 순서대로 방문합니다. 설명 본문·빈 공간에 숨은 실행 핸들러를 두지 않습니다. 이전의 첫 탭 소개·두 번째 탭 이동 계약은 사용자 후속 지시로 폐기했습니다.

미세한3D는 데스크톱의 실제 mouse 입력에서만 적용합니다. 이미지 기울기는 각 축2.2도 이내, 포인터 위치의 약한 빛 반사와 카드 그림자를 사용합니다. 모바일·reduced-motion·일시정지는 기울기를 끕니다. 콘텐츠를 모션 뒤에 숨기지 않습니다.

## 5. 서비스 테마

공통 구성·상태 리본·흰 베일·접근성은 세 제품이 공유합니다. 아래 팔레트는 후속 작업을 위한 **의도한 테마 값**이며 생성 이미지 전체 픽셀의 정확한 역산값이나 실제 게임 엔진 재질값은 아닙니다.

| 항목 | Shello Friends | 3AM Brainrot | 소라게 대이사 전쟁 |
| --- | --- | --- | --- |
| 주조색 | 바다 아쿠아 `#8DD8E1` | 밤 보라 `#7857D9` | 하늘 파랑 `#78BCE8` |
| 보조색 | 모아 분홍 `#F2A4BE`, 라벤더 `#B9A7E6` | 네온 시안 `#66DDEB`, 노랑 `#FFD56A` | 팀 빨강 `#EE7D79`, 팀 파랑 `#65ACE2` |
| 받침색 | 크림 `#FFF3DC` | 따뜻한 크림 `#FFF0D1` | 모래 `#F4DFB7` |
| 제목 구조 | 파란 윗줄·코랄 아랫줄, 둥근 흰 외곽선 | 보라 윗줄·노랑/주황 아랫줄, 두꺼운 흰 외곽선 | 파란 윗줄·코랄 아랫줄, 흰 외곽선 |
| 공간 | 부드럽고 밝은 바닷속 놀이방 | 장난기 있는 새벽 방, 네온 윤곽, 무섭거나 잔혹하지 않게 | 햇살·모래성·조개·해변, 빨강/파랑 팀 구분 |
| 캐릭터 보존 | 분홍 수달 모아와 토끼 | 기존 Roblox 캐릭터와 친구들 | 기존 두 팀 소라게, 집과 팀 색 |
| 상태 | 알파 오픈 / ALPHA | 출시 / OUT NOW | 출시 / OUT NOW |

Shello에 3AM의 어두운 방을 섞거나 소라게의 전투 구도를 적용하지 않습니다. 회사 홈페이지는 흰 바탕을 유지합니다. 서비스 앱과 게임 HUD는 별도 정보 구조를 쓰되 팔레트·라운드 형태·재질·글자 계층만 계승합니다.

## 6. 이미지 속 입체 제목 레시피

기존 포스터는 수정 없이 재사용하는 것이 기본입니다. 새 제목이 필요할 때 아래 상대 비율을 I2I 지시와 시각 비교 기준으로 씁니다. 이는 생성 모델의 결정적 렌더링 파라미터가 아닙니다.

1. 큰 x-height, 둥근 끝, 두꺼운 획, 짧고 두 줄 이내인 문구. 좁고 각진 산세리프·얇은 글자 금지.
2. 기준 글자 높이 H에 대해 흰 외곽선 약0.06H–0.10H, 아래 입체 두께0.04H–0.07H. 구멍이 메워지지 않게 유지.
3. 글자 윗면은 밝고 아랫면은 같은 계열의 짙은 색. 크롬 반사·날카로운 유리 대신 새틴 장난감 재질.
4. 부드러운 위왼쪽 주광, 작은 흰 하이라이트, 아래쪽 짧고 흐린 그림자. 검은 두꺼운 만화 외곽선 금지.
5. 회사 본문·실행 링크는 실제 웹 텍스트를 유지합니다. 포스터 상태 레터링은 이미지 안에 포함하되 언어별 이미지와 alt·일반 텍스트 상태를 함께 제공합니다.

## 7. 나머지 공통 컴포넌트

- 버튼·링크: 흰 배경/명확한 글자, 최소44px, focus-visible 3px. hover만으로 필수 내용을 숨기지 않습니다.
- 언어 스위치: EN/KO, 선택 저장. 새 라벨도 같은 사전을 사용합니다.
- 모션 제어: 일시정지 상태 저장, 시스템 reduced-motion 우선. 시차·부유의 실제 값은 DESIGN-SYSTEM.md의 장면/모션 규격과 src/hero.js를 따릅니다.
- 색상칩: 키보드로 복사 가능, 복사 결과 알림. 색만으로 의미를 전달하지 않습니다.
- 토큰표: 검색 가능, 빈 결과 안내, 모바일 가로 넘침은 표 안에서 처리.
- 다운로드: 버전이 있는 실제 ZIP·SVG·PNG·PDF·HTML 제공. 회사 연락처만 사용하며 개인 정보를 예시로 채우지 않습니다.
- 로고·명함·레터헤드·제안·슬라이드·소셜: 같은 원본 심벌, 팔레트와 폰트 사용. 정확한 치수는 템플릿·DESIGN-SYSTEM.md에서 고정합니다.

## 8. 다른 에이전트에게 주는 합격 기준

AGENT-BRIEF.md, DESIGN-SYSTEM.md, 이 문서, tokens.json, components.json, 원본 포스터3종을 함께 전달합니다. 원본 이미지 SHA-256을 확인하고 임의 재생성을 금지합니다. 320/390/768/1440px×한국어/영어에서 실제 화면을 확인합니다. 커버 언어 전환·이미지 로드·상태 문구·제목 가림를 검사합니다. 첫 입력 서비스 이동, Tab/Enter, 언어 저장, reduced-motion, 콘솔, 실제 다운로드를 확인합니다. 코드를 읽은 것만으로 시각 검증 완료라고 하지 않습니다.

## 홈페이지 최종 로고·소개 계약

- 헤더와 푸터, LinkedIn 프로필용 파일은 동일한 `/brand/assets/app-icon.png`(1024×1024). 기존 원본 재사용, 회사명은 옆에 표시. 헤더64px/모바일56px/모바일푸터48px 상자, 원본 안쪽 여백 유지.
- 모바일 메뉴는 별도 두 번째 줄, 제품→비전→연락 순서. 조작 영역44px 이상.
- 창업자 소개는 본문 맨 마지막에 작게 배치. David·창업자와 소개 본문을 기본 펼침으로 표시하고 실명은 노출하지 않음. 이전 개인 경험에서 어린이를 위한 신규창업으로 이어지는 짧은 메시지와 LinkedIn 링크를 기본 열린 details/summary 안에 배치. 숫자·앱 브랜드명·회사별 약력 제외. 키보드 Enter/Space로 펼침. EN/KO 전환·저장 적용.
- JP-brothers 창업과 카메라 제품, Studio SJ CTO/PO, 누비랩 Engineer/Tech Lead를 실제 LinkedIn 프로필에서 확인. 미확인 경력·수치 추가 금지.
- 공통68개 CSS 토큰과 홈페이지 전용 치수(`tokens.json.homepage`)를 구분. 흰 소개 패널 blur0. 서비스별 최종 cover는 localizedPosters의en/ko; originalPoster는 보존 원본. CSS 리본 금지.

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


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

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

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