# 다른 개발 에이전트에게 전달할 디자인 지시

아래 내용을 그대로 전달하고 대상 서비스의 기존 프로젝트 규칙·소유자를 함께 확인합니다. 이 명세는 자동 위임을 활성화하지 않습니다.

---

이 서비스는 VIBENTURE LABS의 **Pearl Play 1.0** 디자인을 따른다. 승인된 기준 홈페이지는 https://vibenturelabs.com, 브랜드 가이드는 https://vibenturelabs.com/brand/ 이다. 기존 제품의 캐릭터 정체성·플레이 규칙·접근성·사용자 변경을 보존한다.

1. 먼저 회사 저장소 `docs/brand/DESIGN-SYSTEM.md`와 `site/brand/tokens.json`, 이 서비스에 해당하는 원본/포스터를 읽고 실제 이미지를 확인한다. 다운로드 묶음은 `/brand/vibenture-brand-kit-v1.zip`. 추측으로 비슷한 스타일을 새로 만들지 않는다.
2. 흰 바탕 #FFFFFF, 글자 #171B21, 보조 #666D77, 아쿠아 #8DD8E1, 라벤더 #B9A7E6, 코랄 #F59F98, 민트 #96D9CF를 기본으로 쓴다. 어두운 전면 UI, 검정 딤, 전체 글래스모피즘, 네온/크롬 스타일로 바꾸지 않는다. 제품의 기존 어두운 게임 공간은 원본을 존중한다.
3. 영문 Manrope, 한국어 시스템 sans-serif. 제목은 굵고 촘촘하게, 본문은 읽기 편하게. 신규 간격은4px 리듬. 카드5px, 기본은 평면과 얇은 경계, 그림자는 필요한 강조에만. 파스텔은 장식/표면이며 작은 글자나 흰 글자 버튼의 배경으로 무분별하게 쓰지 않는다.
4. 3D는 둥근 실루엣·새틴 도자기·부드러운 조명·접지 그림자. 각 제품의 인물/동물/소라게·색·소품·구도를 보존한다. Shello는 언어·이야기·놀이, 3AM은 음악·수집·숨기, 소라게는 먹기·성장·협동을 유지한다. 세 제품의 캐릭터를 섞지 않는다.
5. 포스터는 정사각 contain, 흰 베일10%, blur0, saturate.94. 설명과 서비스 CTA는 항상 표시한다. 포스터/CTA 첫 입력으로 Shello는 웹 플레이어 모달, Roblox는 새 탭을 연다. 제품명은 정적 텍스트이며 카드 두 번 탭·소개 펼침 동작은 폐기했다. 설명은 이미지 아래에 두고 포스터를 가리지 않는다. I2I 언어별 커버6종과 상태 리본을 그대로 사용한다. 별도 CSS 상태 라벨 금지. Shello 앱마켓만 출시 예정이다. 데스크톱 hover의 미세한 기울기·빛 반사는 장식이며 필수 내용을 숨기지 않는다.
6. 큰 화면 변경은 현재 화면/에셋을 먼저 보고 실제 파일을 첨부한 I2I 시안부터 진행한다. 캐릭터/로고/배치를 텍스트 설명만으로 재생성하지 않는다. 생성 시안은 참고이고 tokens.json·원본 이미지가 우선한다. 별도 유료 API나 결제는 하지 않는다.
7. 모션은 느린 부유/회전·작은 시차. 일시정지·저장·reduced-motion 우선·화면 밖 중지·정적 폴백을 구현한다. 게임에서 모션이 핵심 정보이면 정보를 제거하지 말고 정적 상태 표시로 대체한다.
8. 언어 저장, 긴 한국어 문장,320/390/768/1440px, 터치44px, 키보드 포커스, 본문 대비4.5:1을 검사한다. 공개 제품 기능과 개발 중 기능을 구분하고 실적/교육 효과를 만들어내지 않는다.
9. 변경 전후 같은 뷰포트 화면을 남긴다. 실제 입력·렌더링·모션 프레임·저장·콘솔을 검증한다. 코드/문서가 존재한다는 이유로 완료라고 하지 않는다. 엔진별 차이는 실제 캡처 비교로 조정하고 허용 오차를 실패 은폐에 사용하지 않는다.
10. 결과 보고는 한국어로: 변경 파일, 적용 토큰, 실제 화면/동작 근거, 남은 미검증을 구분한다. 적용할 수 없는 요구는 이유와 최소 대안을 명시한다. 사용자 승인 범위 밖 배포·개인정보 복제·다른 세션 수정은 하지 않는다.

합격 기준: 원본 캐릭터와 제품 정체성이 유지되고, 첫 화면에서 같은 회사의 세계로 인식되며, 흰 여백·타이포·재질·색 규칙이 실제 렌더에 반영되어야 한다. 필수 기능·키보드·모바일·동작 줄이기와 콘솔 검사에 실패한 상태를 최종 산출물로 제출하지 않는다.

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

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

- 헤더와 푸터, 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을 숨기는 보안 기능은 아닙니다.