fix(site,skill): 두레 왼쪽 인셋 리듬 수리 — 제목이 가장자리에 붙어 보이던 사고(v23)

사용자 스크린샷을 픽셀 판정으로 해부: 앱바·검색·칩·카드는 24px에서 시작하는데 h2만 16px — 8px 어긋난 큰 명조 제목이 '가장자리에 붙었다'로 읽혔다. .layout 모바일 인셋을 24px로 통일.
- 게이트 공백: 기존 매트릭스는 오른쪽 오버플로만 검사 — e2e 에 M6 왼쪽 인셋 스위트 신설(60단언, 텍스트 시작점 ≥12px + 헤더-제목 같은 축 ±10px), RED 38 실패로 결함 재현 후 GREEN
- 측정 하자 2건 교정: display:none rect=0 필터, 전폭 컨테이너 보더박스가 아닌 텍스트 시작점 기준
- 스킬 mobile-app-ux.md: '왼쪽 인셋은 하나의 축' 규칙 추가. 시각 기준 갱신, verify L0~L6 전 통과(E2E 1,805단언)
This commit is contained in:
Yun Chan 2026-08-23 15:31:32 +09:00
parent 587bb48b07
commit 2678fd2c9c
26 changed files with 99 additions and 14 deletions

View file

@ -1,5 +1,7 @@
# @designpaca/core
## 0.7.3
## 0.7.2
## 0.7.1

View file

@ -1,6 +1,6 @@
{
"name": "@designpaca/core",
"version": "0.7.2",
"version": "0.7.3",
"private": true,
"description": "designpaca 설치 엔진 — 타깃 어댑터, 매니페스트, 드리프트 감지",
"type": "module",

View file

@ -67,6 +67,8 @@
**모바일 헤더는 브랜드+액션 한 줄이다.** 데스크톱의 브랜드 바(사이드바 상단)와 화면 크럼 바를 좁은 화면에 그대로 쌓으면 90px+ 크롬이 콘텐츠를 옥에 끼운다. 하나를 고른다 — **브랜드(마크+이름)와 액션을 헤더에 남기고, 크럼(화면 이름)은 숨긴다.** 화면 이름은 각 뷰의 헤드와 활성 탭이 이미 말한다. 실측 사고: 크럼을 헤더로 내보냈더니 "작은 회색 텍스트가 52px 바에 떠 있는" 빈약한 헤더가 돼 **사용자에게 '깨져 보인다'는 보고**를 받았다 — 구조는 맞아도 시각적 무게가 없으면 깨진 것으로 읽힌다. 고른 헤더는 `position: sticky; top: 0` + safe-top 패딩으로 스크롤 내내 상단에 남는다. 검증은 E2E 로: 300px+ 스크롤 상태에서 탭 전환 → `scrollY === 0`·헤더 `top === 0`, 그리고 **눈으로** — 계측이 전부 통과해도 보기에 빈약하면 실패다.
**왼쪽 인셋은 하나의 축이어야 한다.** 헤더 텍스트·화면 제목·카드가 각기 다른 x에서 시작하면 리듬이 무너지고, 큰 제목이 8px만 왼쪽에 나가도 사용자는 "가장자리에 붙어서 깨졌다"고 읽는다(실측 사고: 제목 16px vs 앱바·카드 24px 혼재). 컨테이너 인셋을 토큰 하나로 통일하라. **오버플로 검사는 오른쪽만 본다** — 왼쪽 인셋의 최소값(≥12px)과 정렬 정합(헤더-제목-카드 ±10px)은 별도 검사로: 텍스트 시작점 기준으로 잰다(전폭 컨테이너의 보더박스가 아니라). `display:none` 요소의 rect 는 0이므로 보임 필터를 먼저 통과시킨다.
### 하드웨어 뒤로가기 = 앱 내 히스토리 (핵심 패턴)
안드로이드 백 키와 iOS 스와이프 백이 **앱을 종료하지 않고 앱 내 뒤로** 작동해야 한다. SPA 뷰 전환마다 `history.pushState` 로 스택을 쌓고 `popstate` 로 소비한다. 다이얼로그도 같은 스택에 태운다: