tiomta.com GUI 통일 + 서비스 허브 안착

개요

tiomta.com(crowny-tiomta, :9878)을 crowny.org(crowny-ai, :9852)와 GUI 통일하고, 홈을 서비스 허브로 재구성. 티옴타테스트 / 튜브 / 쇼츠 / 게시글을 각각 1급 서비스 카드로 안착. 크라우니 사용자계정(CrownyAuth)을 전 서비스에 연결.

울트라 병행 조사(디자인 매핑 + 아키텍처 매핑 + 딥리서치) 3에이전트 종합 후 구현.

조사 종합 (3축)

디자인: crowny.org = Claude.ai 라이트(bg #FAF9F7, 골드 액센트 #C9A961, Pretendard), 공유파일 6종

(crowny-tokens.css·ecosystem-switcher.css/js·crowny-icons.js·service-map.json·crowny-session-sdk.js). tiomta는 토큰/스위처 CSS 이미 동기화, 인라인 :root는 코랄(#D97757)로 분기 → 통일 대상.

아키텍처: server.js(:9878) — CONTENT_SERVERS(tube9890·tok9891·song9892…), /api/media/* 한선씨 우선 브릿지(9888),

API404 게이트(/api/media/ 통과예외), SPA fallback(404→index.html ⇒ 클라 라우팅 가능), CrownyAuth(:9401) verifyToken. /media/{feed,play,studio,profile} + world/ 존재. 쇼츠/게시글 페이지 없음(신설).

딥리서치: 벤토 카드 허브(앵커 3~5 + 발견형), 행동기반 정렬(개인화 상단),

tube/게시글=Load More·쇼츠만 무한스크롤+정지신호, 자동재생 OFF·재생전 길이노출, 게스트 우선→가입 시 익명UID 링크(이력 마이그레이션), 토큰 verify() 필수.

구현

GUI 통일: index.html :root를 crowny.org 팔레트(골드 액센트·중립 정렬)로, TOAU 4상 시그니처 보존. 공유 SDK 로컬 로드.
홈=서비스 허브: #serviceHub 벤토 카드 그리드(티옴타테스트·튜브·쇼츠·게시글·송·월드), 최근사용 상단 고정.

티옴타테스트는 카드 진입(기존 테스트 UI 보존, 추가식).

튜브→/media/feed, 쇼츠→/media/shorts(신설), 게시글→/service/posts(신설, 한선씨 백엔드 + 파일저장).
계정: crowny-session-sdk.js 로컬 + CrownyAuth 로그인(게스트 우선).

잔여 이슈

tube/tok/song 노드(9890~9892) 미실행 → 미디어는 브릿지/시드 폴백. 노드 기동은 별도.
SSO 정석(OIDC redirect+PKCE)은 후속. 현재는 CrownyAuth 토큰 검증 + 게스트 링크.

결과 (검증 완료 2026-06-21)

✅ GUI 통일: index.html :root 골드 액센트(#C9A961)·중립 정렬, TOAU 4상 보존, 다크 동기화. 공유 SDK 로컬 로드.
✅ 서비스 허브: #serviceHub 벤토 카드 8종(테스트·AI대화·튜브·쇼츠·게시글·송·월드·벨), 최근이용 상단 고정, body.in-service 뷰 전환. 첫방문 자동모달 제거→허브 랜딩.
✅ 티옴타테스트 서비스화: 카드 진입(enterService('test')→startTest), 기존 테스트 로직 100% 보존.
✅ 튜브→/media/feed, 쇼츠→/media/shorts.html(신설: scroll-snap 세로피드+정지신호+IntersectionObserver 자동재생 인지), 게시글→/service-posts.html(신설: Load More·글쓰기·좋아요).
✅ 게시글 백엔드: server.js /api/posts/{feed,POST,:id/like} 파일저장(data/posts.json, 원자 rename, 5000 상한). 한선씨 동반 게시글.한선 컴파일+실행 검증.
✅ 크라우니 계정 연결: server.js /api/crowny/{login,signup,migrate} → crowny.org(:9852) 인증 프록시. 게스트 우선(anonOwner)+가입 시 이관. 로그인 모달 통합계정 교체. E2E 검증(crowny.org 인증에러 반환).
스모크: 정적/허브/API/계정프록시 전부 200/정상. tiomta 재기동(PID 갱신) health 200.
백업: index.html.bak_huburefit_, server.js.bak_huburefit_

잔여

tube/tok/song 노드(9890~9892) 미실행 → 튜브/쇼츠는 브릿지+시드 폴백. 노드 기동은 별도 작업.
tiomta 서버측 verifyToken은 여전히 9401 지향(별개 갭). 현재 계정연결은 crowny.org ownerToken 기반 클라 식별+프록시로 충분.
/media/{feed,play,studio,profile} 기존 페이지는 tiomta-media.css 자체 크롬 — 후속 통일 대상.

후속 디버그 — "UI 안 바뀜 + 느림" (2026-06-21)

체크포인트 진단: 1)게이트웨이 도착본=신버전 정상 2)게이트웨이 캐시 아님 3)❌블로킹 믹스드콘텐츠 4)❌HTML 캐시헤더無 5)TTFB 게이트웨이 0.8s 6)서비스워커 없음.

개선①(체크4): server.js 정적서빙 HTML에 Cache-Control: no-cache, must-revalidate(+SPA fallback도). 비-HTML 1일캐시 유지.
개선②(체크3): index.html http://localhost:9766/crowny-session-sdk.js(블로킹)+통합지갑위젯.js(파서블로킹) 원격의존 제거 → 인라인 폴백 + 지갑위젯은 localhost에서만 async. 메신저(9752)는 about:blank 지연로드라 무영향.
결과: TTFB 0.8s→0.20s, 블로킹 localhost script 0, no-cache 적용. 단, 사용자 브라우저의 기존 캐시본은 1회 하드리프레시(Cmd+Shift+R) 필요 — 이후 no-cache로 항상 최신.

패밀리 룩 이식 (2026-06-21, 사용자 "허브 유지+패밀리 룩")

crowny.org/ABTI/AMTI 패밀리와 tiomta 발산 원인 = 골드 그라데이션 헤더+흰글씨(패밀리는 투명/블러+0.5px 보더, 액센트는 brand-mark에만).

헤더: 골드바 → color-mix(bg 92%)+backdrop-blur(12px)+0.5px border, .header-left(✳ brand-mark + logo 티옴타 letter-spacing 1.5px + sub) / .header-right(중립 라운드 버튼 hover 액센트).
허브 헤드 → 패밀리 중앙 이탤릭 슬로건. 카드 보더 1px→0.5px.
하단 .eval-family 교차 내비 추가(티옴타테스트·MPTI·AMTI·ABTI) — abti/amti와 동일 패턴.
허브 개념(서비스 카드 그리드)은 유지. 검증: 공개 반영 OK, 200.

← 이전SSO 브릿지 CRITICAL 보안 수정 (2026-06-21 v2)2026-06-21-sso-bridge-critical-fix 다음 →티옴타 개인 채널 허브 (tiomta.com /나)2026-06-21-tiomta-개인채널허브