티옴타 UX 기본원칙 v1.0 — 클로드 모바일앱식 직관성 (전 페이지 적용)
개요
"클로드 모바일앱과 비교해 폰트·프레임 등 UX를 개선하고, 기본 원칙으로 정한다"는 지시(울트라씽킹). 진단→원칙 코드화→전 15페이지 적용→실측 검증까지 완료.
정직한 진단 (실측 보정 포함)
- 진짜 모바일 뷰포트(CDP
Emulation.setDeviceMetricsOverride, 390/320px)로 측정: index·나·planner 가로 오버플로 0, 단일 컬럼, 터치 양호 → 이미 모바일 기본은 잘 지켜짐(응급 버그 없음).
- ⚠️ 초기에
chrome --headless --window-size로 본 "잘림"은 레이아웃 뷰포트 미생성 아티팩트였음 → 오판 정정. 검증은 반드시 디바이스 에뮬로.
- 진짜 결핍 = 표준 부재: 색/간격/모서리 토큰은 있으나 타이포 스케일·터치·프레임 토큰 없음 → 페이지마다 폰트 11~22px 9단계 제각각.
7대 기본원칙 (클로드 앱 구조 차용)
① 시원한 가독(본문 16px, 13.5px 미만 금지) ② 모바일 우선 단일컬럼(가로0·640px캡) ③ 넉넉한 터치(≥44px/입력48px) ④ 8pt 리듬 ⑤ 조용한 위계(테두리·색 절제) ⑥ 부드러운 모서리 ⑦ 한 화면 한 주행동.
산출물
- 원칙 문서:
UX-기본원칙.md (7대 원칙·토큰·적용법·검증규약)
- 표준 CSS:
public/css/티옴타UX표준.css — 타이포/터치/프레임 토큰 + 안전 베이스(box-sizing·overflow-x·제목 줄바꿈) + .tux/.tux-wrap/.tux-actions. 핵심: 내부 요소 규칙은 :where() 0-특이도 기본값 → 페이지 고유 스타일(.hub-title 등)이 항상 이김 = 성격 보존.
- 검증 도구:
tools/모바일실측.js (순수 CDP 디바이스 에뮬, overflow 실측). --window-size 신뢰 금지.
- 한선씨 동반:
UX검증.한선 (합격선 판정: 오버플로/폰트135/탭44 → 티·타), 컴파일·실행 검증 + 학습.
전 페이지 적용 (15/15)
- admin·app·bell·canvas·flow·index·ot·planner·service-posts·share·status·test·tests·worldview·나 모두 표준 링크 +
<body class="tux">.
- 실측 검증: 15/15 가로 오버플로 0(sw=cw=390), 회귀 0. index 히어로 72px 유지, 나.html 마스코트·콘페티·배지 그대로(놀이성 보존), service-posts/worldview 등 클린.
- index 추가 손질: 히어로 타이틀 clamp 92→72px(데스크톱 과대값 절제).
사용자 결정 반영
- 적용 범위 = 전 페이지 일관 적용(디자인/성격 유지, 폰트·터치·간격만 표준 수렴).
- 나.html 놀이성 = 유지(구조만 표준화 / 토토·콘페티·배지 보존).
관련 파일
public/css/티옴타UX표준.css,
UX-기본원칙.md,
UX검증.한선,
tools/모바일실측.js, 전 15
public/*.html. 스크린샷 before/after=
/tmp/tiomta_ux/.
잔여 이슈
- worldview 내부 콘텐츠 398px(8px) — 표준이 클립하나 근본 원인(full-bleed 요소)은 추후 정리 가능.
.tux 활성으로 헤딩 스케일은 페이지 클래스가 이기므로 변화 미미 — 더 강한 통일 원하면 페이지별 하드코딩 폰트를 토큰으로 마이그레이션(2차).tools/모바일실측.js 포트 19233 고정 → 병렬 실행은 포트 충돌(순차 권장).