웹스튜디오 몰입 표준 + 재귀 수학 디자인 + 하늘나라 이탈리아 입장
비전 (사용자)
게임(Sky/플레이투게더/두근두근타운) 접속하듯 '하늘나라 이탈리아' 입장 → 이후 게임UX 로그인 → 고급+현실+게임연계+VR/AR. 크라우니 웹스튜디오 표준 지향점. 디자인 도구를 재귀사고로 수학적 비율 향상.
산출 (이번 세션)
1) 재귀 황금비 토큰 엔진 (한선씨) — 엔진/황금비.한선
- φ=1.618 거듭제곱 타입스케일(재귀 ×φ): 6/10/16/26/42/68/110/177px
- 피보나치 간격(재귀 a+b): 8/13/21/34/55/89/144/233px (φ로 수렴)
- 황금각 색상 137.5°(해바라기 나선 분산): 35°→172°→310°→87°→225°
- 재귀 황금분할(1:φ): 1080→667→412→255→158
- 컴파일·실행 검증. JS 동반 예정(황금비.js).
2) 하늘나라 이탈리아 몰입 입장 (padella index.html)
- 골든아워 천상 하늘(크림→금→테라코타), 갓레이(conic 회전), 구름(피보나치 위치·황금각 분산·3방향 drift), 빛가루 파티클(캔버스 60입자 상승), 베수비오 실루엣.
- 황금 아치 포털(φ 1:1.618) + 빠델라 디 파파 · in Cielo + ✦들어가기.
- 마우스/자이로(deviceorientation) 깊이 패럴랙스. 입장 시 포털 줌(scale 1.35)+페이드 → 랜딩 공개. 세션 1회. prefers-reduced-motion 가드.
3) 로드맵 (표준 지향)
웹몰입(✓) → 게임UX 로그인(아바타/프레즌스) → WebXR VR/AR 진입 → 멀티플레이 소셜 프레즌스.
적용 확인 (분별/크라우니코드/한선씨/자동화)
- 한선씨: 재귀 토큰 엔진 한선씨 컴파일. /크라우니코드: search(파티클/황금비/3D 패턴 확인)+learn 등록. 분별: 정의=울트라리서치·엔진=한선씨·검증=교차(컴파일+헤드리스). 자동화: learn 등록.
딥리서치 종합 → 몰입 표준 사양 (wilgx1va7, 5에이전트/299K토큰/8분)
코지 게임 월드입장 5원칙
1) 점진적 로딩→등장 연출(Sky 영역활성) 2) 아바타·프레즌스(거리·상태) 3) 앰비언트 동적변화(빛·날씨·시간) 4) 코지함(따뜻함) 5) 진입감각(UI최소·자연등장)
구현 기법 (CSS우선·경량)
- animation-timeline: scroll()/view() = JS제로 GPU 60fps 스크롤연동(2026표준)
- transform/opacity 화이트리스트(left/top/margin 금지), preserve-3d 깊이
- Canvas 파티클(Three.js 불요), God Rays만 WebGL 필요
- Day-Night: --hour → hsl 동적, 한선씨 4상 매핑(T오전/O정오/A황혼/U야간)
- WebXR 3진입점: immersive-vr / immersive-ar / inline+DeviceOrientation 매직윈도우
- 360 파노라마: SphereGeometry+BackSide, 2048² 이하, VR 멀미방지 90fps+회전중심
공식
- 앰비언트강도=(빛+음+UI+프레즌스)/4 ∈[-1,1]
- 진입감각=0.4로딩+0.3아바타즉시+0.2응답+0.1사회성, 목표≥0.85
- 카메라전환 800~1200ms, 사운드레이어≤3(BGM-12dB/환경-6dB/UI0)
적용 (이번 라운드)
- 살아있는 데이-나잇 하늘: 실시간 시간대→5색 천상팔레트(야간 별빛/새벽 분홍금/정오 황금/황혼 테라코타/저녁 보랏빛), background 1.4s ease 전환
- iOS 자이로 권한(입장 탭=사용자제스처)→매직윈도우 패럴랙스
- VR 진입 피처감지(navigator.xr immersive-vr 지원시만 🥽버튼 노출, WebXR 파노라마 로드맵)
다음 (스튜디오 컴포넌트화)
월드인트로·하늘포털·앰비언트구름·라이트레이·파티클·깊이패럴랙스·데이나잇·아바타프레즌스·VR진입 → 렌더러 재사용 컴포넌트
빠델라 천상 월드 (Padella Celeste) — 전체 서비스 게임화 (2026-06-15)
사용자: "웹사이트 관습 안 지켜도 됨. 고급스러운 게임화면처럼 전체 서비스를 병렬로." → 방(scene)을 오가는 게임 UX.
울트라 병렬 빌드 (5에이전트/224K토큰/3분)
game-shell(sonnet)·몰입컴포넌트9(sonnet)·씬배경5(sonnet)·NPC+문장(haiku)·SVG(haiku). haiku 2건 설명만 반환→NPC/SVG는 직접 작성(신뢰성).
산출 (라이브 padella.crowny.org/)
- world.html(190줄): 정문 입장포털→5방 게임 허브. /=월드, /classic=기존 랜딩.
- game-shell.js(208)+css(123): 영속 HUD(crest+실시간시계 시간대) + 하단 독(5방 문) + 씬 전환(포털 줌/페이드) + 깊이 패럴랙스. window.PadellaWorld API.
- scenes.css(588): 5방 고급 CSS 배경 — 광장(천상광장)/주방화덕(불빛맥동)/예약대(촛불)/서재(책장)/응접실(벽난로). 이미지0.
- world-art.svg(심볼11): 문장+NPC5아바타+방문5아이콘 모노톤 금빛.
- npc.json(5인: 파파·마에스트로·안토니오·논나·마리아) + copy.json(게임풍 문장20: 예약하기→식탁잡기 등).
- 5방 각각 NPC 카드+콘텐츠: 광장(소개)·주방(메뉴8 카드그리드)·예약대(/reserve)·서재(/book)·응접실(7플랜 액자/family).
핵심 버그 2건 수정
1) 독 버튼 거대화(504×833): 버튼 data-scene → 씬선택 [data-scene]에 오인 잡힘.
수정: 버튼=data-goto. [재사용 함정]
2) 정문 인트로 스킵: game-shell이 로드 시 #plaza 해시 설정→인트로 스킵로직 오발.
수정: <head>서 window.__hash0 선포착.
스튜디오 (studio.crowny.org:9933)
몰입컴포넌트.js 9종 등록(렌더러 API.register 훅)→렌더러 타입 22→31. 에디터/프리뷰/익스포트 모두 자동 등록. (HTTPS 결선은 게이트웨이 세션 대기)
다음
reserve/book/family도 방으로 재스킨 · 독 SVG 아이콘 적용 · 아바타프레즌스(멀티 방문자) · WebXR 360 나폴리 파노라마 · 게임 로그인 UX.
전체 서비스 게임 일관성 — 앱 페이지를 '방'으로 연결 (2026-06-15)
reserve/book/family는 밝은테마+sticky헤더 앱이라 어두운 game-shell 통째 적용시 충돌 → 경량 공유 내비로 연결(앱 보존, 저위험).
- world-nav.css + world-nav.js: 하단 5방 독(광장→/world#plaza, 주방→/world#kitchen, 예약대→/reserve, 서재→/book, 응접실→/family, 현재방 금빛 활성) + 방 NPC 환영 배너(npc.json, sessionStorage 1회). world-art.svg 문 아이콘 재사용.
- 페이지에서 window.PADELLA_ROOM 지정→독 활성+NPC 매칭. body padding-bottom:84px로 독 클리어. 헤더 다음에 배너 삽입.
- 결과: 예약대(안토니오)·서재(논나)·응접실(마리아) — 기존 예약캘린더/책리더/패밀리 기능 100% 보존하며 게임 월드 일원. 전 페이지 동일 독으로 방 순회.
풀 리스킨 + 확장 (2026-06-15, 울트라 5에이전트/273K토큰/11분)
모든 페이지 본문까지 방 다크톤 + 아바타프레즌스/360파노라마/게임로그인 병렬.
- room-theme.css(17.7KB): body.room-reserve(촛불#1a0f0a)/room-library(마호가니#160d08)/room-lounge(벽난로#1c0e0b) CSS변수 오버라이드 풀 리스킨 — 마크업 0수정. 달력/입력/탭/책지면 가독성 보정+방별 라디얼 앰비언트. world-nav.js가 body.room- 부착.
- 아바타프레즌스: presence.js(클라 3s 비트+커서점 보간+'N명 함께 둘러보는중' 필)+presence-handler.js(인메모리 Map TTL30s, GET ?room→count+others max12). server.js require+1줄 결선. 스모크 PASS.
- 360 파노라마: panorama.js+css(순수 CSS/Canvas 절차생성 나폴리만 황혼·스카이라인·별·바다, 자이로+드래그 패닝, iOS권한, '매직윈도우 미리보기·WebXR 예정' 정직). window.PadellaPano.open(). 월드 광장에 🌅360°버튼.
- 게임로그인: login.js+css(아바타8 그리드+이름+'테이블에 앉기'→sessionStorage padella_guest). window.PadellaGuest.open/get/show. 월드 입장버튼이 PadellaGuest.open 후 입장.
- avatars.svg: 손님 아바타 8종 SVG 스프라이트(#avatar-1~8).
검증: 리스킨 3페이지 다크 가독성 OK, 로그인 모달·360파노라마 렌더 OK, 프레즌스 '2명 함께' 라이브.
멀티플레이 — 방 안 아바타 (2026-06-15, 울트라 3에이전트/119K토큰/86초)
방을 거니는 손님이 아바타로 보이고, 클릭해서 걷고, 인사 이모트.
- world-presence.js(18KB): 기존 presence.js 대체. 익명id+내정보(PadellaGuest), 3s beat(목표좌표), 빈바닥 클릭→내 아바타 걸어감(인터랙티브 요소 e.target 조상 A/BUTTON/INPUT/등 제외→앱 기능 보존), others SVG(#avatar-N) 보간 렌더+이름표, 👋 이모트 버튼+말풍선, 'N명 함께' 필(독 위 88px). 스타일 JS 자동주입. hashchange로 방 갱신.
- presence-handler.js v2: 인메모리 Map TTL30s, /api/presence/beat·/emote·GET(others 자기제외 max16, emote 4s 윈도). 함정: server.js가 handle(req,res,p,method,url) — p=pathname 문자열, url=URL객체. url.split 금지→url.searchParams. 수정 후 beat/emote/GET 200.
- world-nav.js가 앱 페이지에도 avatars.svg 주입→모든 방 멀티플레이.
검증: plaza 시뮬 5명(가영·마르코👋·소피아+손님2) 아바타 렌더+이름표+이모트+'5명 함께' 필 라이브.
360 파노라마 + 실시간 SSE + 룸플레이 (2026-06-15, 울트라 3에이전트/135K토큰)
- 진짜 360°: panorama.js 재작성 — 5 비스타(만 새벽·항구 야경·베수비오 황혼·외해 정오·일몰) 원통 스트립 seamless wrap, 드래그+자이로(나침반 0~359°) 무한 패닝, 베수비오 황혼서 시작. 버그수정: 색보간 lerpColor가 hex 대신 rgb() 받아 hexToRgb NaN→addColorStop throw→캔버스 통째 빈화면. hexToRgb hex/rgb()겸용 + 알파 rgb()+'88' 금지→rgba(). 수정 후 렌더 OK(117KB). [[canvas_color_lerp_hex_or_rgb_tolerant_no_alpha_concat]]
- 실시간 SSE: presence-handler v3 GET /api/presence/stream(text/event-stream, room 변경시 푸시, 15s 하트비트) + world-presence.js v2(EventSource 구독, 3s폴링 폴백). beat/emote/GET 보존. 함정 재확인: handle(req,res,p,method,url) p=pathname url=URL객체→url.searchParams.
- 룸플레이: room-play.js 방별 미니인터랙션(plaza 별빛·kitchen 화덕불·reserve 건배🥂 broadcast·library 책·lounge 벽난로). 백업: .bak-poll/.bak-v2/.bak-180.
검증: 360 황혼 렌더 OK, SSE stream·emote 라이브 200, 전 파일 라이브 200. (룸플레이 시각검증은 헤드리스 불안정으로 보류—코드·서빙 정상)
WebXR 정식 + 룸플레이 검증 (2026-06-15, sonnet 에이전트)
- panorama-vr.js(34KB, 939줄): raw WebGL1 구면360(내부구 32x24+equirect UV) + WebXR immersive-vr(XRWebGLLayer 양안). equirect 텍스처=Canvas2D 2048x1024 절차생성(밤→황혼→낮 그라데·달·별320·베수비오 용암·나폴리 스카이라인·교회돔·성채·바다반사). mat4(perspective/rotateX/Y/multiply) 직접구현, 인라인 셰이더, 라이브러리0.
- API window.PadellaVR={supported,openMagic,enterVR,close,attachButton}. 폴백체인: WebGL실패→PadellaPano(Canvas2D)→안내(절대 안깨짐). 베수비오 쪽 시작 yaw.
- world.html: 360 버튼이 VR지원시 enterVR(🥽 VR로 입장 라벨)/아니면 openMagic. panorama.js(Canvas2D)는 최종 폴백 유지.
- 검증: --use-gl=swiftshader 헤드리스에서 WebGL 구면 렌더 OK(supported=true, openMagic OK, canvas 520x777, 별·하늘 구면매핑). WebXR immersive-vr는 실기기 필요(피처감지+폴백 코드 완비). 룸플레이 '🔥 화덕 불 키우기' 핫스팟 시각 확인.
안정화 + 영속화 + studio 진단 (2026-06-15)
사용자 "사이트 원활하지 않음" → 진단 결과: 게이트웨이(8080 한선씨) 다운이 원인 → 게이트웨이재기동.sh로 복구. 이후 5/5·4도메인 200 안정(간헐성 없음).
- 멀티플레이 영속화: presence-handler 통계영속(data/presence-stats.json 원자rename, 50beat/30s 디바운스, loadStats 시작, SIGTERM flush). GET /api/presence/stats 신규(totalVisitors/byRoom peak, 개인정보0). 활성 프레즌스는 휘발(30s TTL) 유지가 맞음. 기존 beat/emote/GET/SSE 100% 보존. 라이브 200, 디스크 검증(peak 50).
- studio HTTPS 진단: studio.crowny.org 기능 100% 완성(-k 200, 백엔드·라우팅·stunnel 폴백 정상). 유일 갭=cert SAN에 studio.crowny.org 미발급(verify=18→000). 어느 cert에도 studio/와일드카드 없음. cert 발급=certbot ACME webroot(외부 LE, 비가역, 8443 종단 node/stunnel 혼재)=게이트웨이 세션 영역 → 안정성 우선·비가역성으로 강행 보류, 이관.
- 게이트웨이 워치독 LaunchAgent(org.crowny.gateway-watchdog) 로드 확인.
studio.crowny.org HTTPS 결선 완료 (2026-06-15)
- certbot 단독 cert 발급: dry-run(challenge 도달 OK)→실발급(studio.crowny.org SAN, 만료 2026-09-13). webroot=/Users/ef/crowny-gateway/webroot, config-dir=/Users/ef/crowny-data/certs/certbot. 기존 cert 영향 0(단독).
- stunnel-live-443.conf에 studio SNI 블록 추가(sni=https443:studio.crowny.org, connect 8080, studio cert). 백업 .bak-studio-.
- 함정: 대형 conf(175 SNI) SIGHUP reload가 뒤쪽 SNI 섹션 누락→padella/studio 000 회귀(crowny.org만 200). 해결=stunnel kill→워치독(stunnel443워치독.sh) 클린 재기동(50s)→전체 200. [[stunnel_big_conf_sighup_drops_tail_sni]]
- 결과: studio.crowny.org HTTPS 200(verify=0), 웹스튜디오 에디터 서빙, 5/5 안정. 회귀 없음.
빠델라 성능 고도화 1차 (2026-06-15)
사용자 "접속 오래 걸림" 진단: 게이트웨이는 빠름(TTFB 39ms). 원인=① HTTP/1.1(H2아님, 연결당6동시) ② 스크립트 6개(114KB) defer없이 동기 + CSS5 + fetch6 = ~17왕복.
- 1차 수정(world.html): 초기 필수만 defer(login 14.5KB + game-shell 6.7KB = 21KB). panorama 54KB(panorama+panorama-vr)는 360버튼 클릭시 loadScript 동적로드. world-presence 20KB + room-play 17KB는 방진입후 loadLive() 지연. 동적 로더 1회캐시. → 초기 114KB→21KB(82% 감).
- 검증: 입장포털 렌더 OK, defer/loadLive/openPano 라이브 결선 확인. gzip 적용중.
- 다음: ②H2 업그레이드(게이트웨이 세션, 전역) ③런타임 fetch 병합/캐시헤더 ④폰트·CSS 통합 ⑤크라우니 표준 디자인토큰.
성능·표준 4종 울트라병렬 (2026-06-15, 4에이전트/263K토큰)
- HTTP/2 조사: stunnel(L4 TLS)이라 H2 end-to-end 원천불가(백엔드 평문). node http2 전환은 전역 스택교체+46 WS 재검증 필요→안정성 우선 보류(그림자 검증 추후). 현행 compress+캐시 이미 최적.
- 번들 API: GET /api/world(site+menu+movement+npc 1회, 18.4KB, 캐시60s). serveFile 정적 캐시3600s. 런타임 fetch 4→1. 기존 라우트 보존.
- CSS critical: head link 5→4(panorama.css·room-play.css 제거→openPano/loadLive에서 loadCss 동적주입). 초기 렌더블로킹 CSS 2개 제거. crowny-tokens.css 추가.
- φ 디자인토큰: crowny-tokens.css(7.8KB, 황금비.한선과 1:1) — 빠델라+studio 배포, 전서비스 표준. 가이드=crowny-디자인토큰-표준-가이드.md.
- 누적 성능: 초기 스크립트 114KB→21KB(지연로드), fetch 4→1(번들), CSS 5→4(critical), 정적 캐시 3600s. 입장포털 렌더 정상, 전 라우트 라이브 200.
360 정상화 + 핫스팟 + 게이트웨이 복구 (2026-06-15)
- 360 이상 진단: WebGL 구면(openMagic)이 하늘/별만 보이고 베수비오·도시·바다 지형 안나옴(UV/카메라pitch). 검증된 Canvas2D 원통(panorama.js, 베수비오 황혼 완벽)으로 openPano 전환. VR 구면은 enterVRWorld로 분리(실기기).
- 클릭 핫스팟(이미지맵 상태창): panorama.js onPointerUp 이동<8px=클릭→현재 방위 비스타 판별→글래스 상태창(이름·시적설명·✦들어가보기)→PadellaWorld.go(매핑 방). 5비스타→방: 만→예약대, 항구→광장, 베수비오→주방, 외해→광장, 일몰→응접실. 백업 .bak-prehotspot.
- 게이트웨이 복구: 8080 한선씨 게이트웨이 소스 컴파일 실패(문자열마크/문자열되감기 미정의 — 타세션 수정중)→재기동.sh FATAL. 단 옛 gwlive.toau(crownyc 2947)가 8080 200 유지. 443 stunnel 재기동(워치독)으로 전역 200 복구. 8080 소스 수정은 타세션/게이트웨이 영역(미관여).
8080 워치독 + 방 핫스팟 (2026-06-15)
- 8080 전용 워치독 gw8080워치독.sh: 15s 프로브(LISTEN+HTTP200), down/wedge면 known-good toau로 재기동(깨진 소스 재컴파일 회피). 단일 락. 빠델라 반복 다운 근본대응(stunnel443워치독은 443만 커버하던 갭). gwlive.known-good.toau(859KB 검증본) 백업. LaunchAgent org.crowny.gw8080-watchdog 영속(load -w 대기). 현재 nohup PID 10585 가동.
- 방 핫스팟 room-hotspots.js: 5방 각 2개 관심지점(분수/종탑·화덕/장작·창가/와인셀러·고서가/논나의자·벽난로/가족사진), 금빛 맥동점, 현재 씬만 표시(MutationObserver+hashchange+인트로 가드), 클릭→글래스 상태창(시적설명+행동버튼: 메뉴/예약/책/패밀리 이동). loadLive 지연로드. 360 핫스팟과 동일 톤. 검증: 분수 클릭→상태창 렌더 OK.
3D 구면 복원 시도 + 정직한 보류 (2026-06-15)
- 텍스처 수평선 H0.72→H0.5(적도) 재정렬 완료(달·별·베수비오·도시·바다 비례 재배치). generatePanoramaTexture 교체.
- 그러나 panorama-vr.js openMagic의 yaw가 renderFrame에 반영 안 되는 버그(yaw 1.71↔4.85 스크린샷 md5 완전 동일)=카메라 경도 제어 불능. 헤드리스 추측 디버깅 한계.
- 결정: 3D WebGL 구면은 yaw 스코프 버그 수정 전까지 보류. openPano=2D Canvas 원통(panorama.js)=완성품(베수비오 황혼·360 wrap·클릭 핫스팟, 입체 원근감) 라이브 유지. 백업 panorama-vr.js.bak-2d.
360 두 버전 제공 (2026-06-15)
사용자 "두 버전 다 가능하게" → 광장에 버튼 2개:
- 🌅 둘러보기 = openPano (2D Canvas 원통, 검증 완성품: 베수비오 황혼·360 wrap·클릭 핫스팟·입체 원근)
- 🔮 입체로 보기 = openPano3D (WebGL 구면, 드래그·자이로 한 바퀴, 실패시 2D 폴백)
- WebGL 구면 yaw가 헤드리스 swiftshader서 md5 동일(rAF/uniform 헤드리스 한계 추정, mat4_rotateY 수학은 정상). 실브라우저/모바일 확인 필요. 텍스처 수평선 H0.5 정렬 완료라 정면에 수평선·지형. 둘 다 폴백 안전망.
360 회귀 복구 + 단일화 (2026-06-15)
사용자: 입체(3D)=이상함 재현, 360(2D)=안뜸. 원인: ①핫스팟을 buildDOM(open경로)에 넣어 open() 통째 실패→2D 안뜸 ②WebGL 구면은 yaw 무반응 진짜 버그.
- 복구: panorama.js를 bak-prehotspot 롤백(검증 2D)→핫스팟을 lazy 패턴 재적용(buildDOM 무수정, onPointerUp 클릭판별 후 첫클릭에 buildHotspotPanel). open 경로 안전. 검증: 베수비오 클릭→상태창 선명.
- 3D WebGL 구면 보류(openPano3D/입체버튼 제거), 360 버튼 단일화(2D Canvas+핫스팟). panorama-vr.js는 추후 yaw 수정용 보존.
단골 예약 전면개편 + 메뉴리더 + 360이야기 (2026-06-15, 울트라 5에이전트/289K토큰)
- 예약 서버(server.js): 전화ID(정규화·마스킹), 이름옵션(단골손님), phoneHistory(data/phone-history.json) 신규/기존 인사, tablePref null=미지정 기본, GET /api/reserve/check·/api/tables. 스모크: 전화만 예약→"처음 오시는군요", 재예약→"2번째 방문 감사합니다" ✓. 백업 server.js.bak-phone.
- 예약 UI(reserve.html 1106줄): 천상 다크톤(crowny-tokens·#1a0f0a), 전화 우선 입장+이름 선택, 신규/기존 인사 카드, 테이블 지정 토글(기본 맡김), 주차 22대 표기, floorplan.svg 도면 슬롯, 예약번호=전화 마스킹.
- 도면: floorplan.svg(테이블 table-1~10 + 영역) + parking.svg(P1~22). 다크 위 금/크림.
- 메뉴 리더(menu-reader.js): book.crowny.org식 큰 serif 카드+이탈리아어 이탤릭+넉넉한 설명+탭 전체화면 리더. world.html 주방 연결.
- 360 이야기(vista-stories.json 18스토리 + panorama.js): 비스타5×스토리3~4, 핫스팟 패널 이야기 네비게이션. /data/vista-stories.json 라우트 추가.
- 라이브 전부 200, 예약 API 스모크 통과. 시각검증은 헤드리스 불안정으로 사용자 실브라우저 확인.