fix(site): 모바일 헤더 재설계 — 크럼이 아니라 브랜드+액션 한 줄(v24)
v23 은 구조(단일 sticky 바)만 맞고 시각적 무게가 틀렸다 — 작은 회색 크럼 텍스트가 52px 바에 혼자 떠 있는 빈약한 헤더였다. 계측이 전부 통과해도 보기에 빈약하면 실패다. - 탑바에 브랜드(가 모노그램 타일+이름)를 이어받게 하고 크럼은 모바일에서 숨김 — 두레 앱바와 같은 문법(브랜드+액션). 화면 이름은 각 뷰 헤드와 활성 탭이 말한다 - 검증: 360/390/412px 오버플로 0·브랜드 노출, 스크롤 800에서 top=0, 탭 전환 scrollY=0, 비전 검수 통과, 시각 기준 갱신 후 verify L0~L6 전 통과 - 스킬 mobile-app-ux.md 규칙 갱신: 크럼 내보내기 금지 + 계측 통과에도 눈으로 봐야 한다
This commit is contained in:
parent
d637dd5e24
commit
8547bb11a6
30 changed files with 34 additions and 22 deletions
|
|
@ -1,5 +1,7 @@
|
|||
# @designpaca/core
|
||||
|
||||
## 0.7.2
|
||||
|
||||
## 0.7.1
|
||||
|
||||
## 0.7.0
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@designpaca/core",
|
||||
"version": "0.7.1",
|
||||
"version": "0.7.2",
|
||||
"private": true,
|
||||
"description": "designpaca 설치 엔진 — 타깃 어댑터, 매니페스트, 드리프트 감지",
|
||||
"type": "module",
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
**탭을 바꾸면 새 화면은 맨 위에서 시작한다.** 뷰 전환 함수 마지막에 `window.scrollTo(0, 0)` 을 넣어라 — `focus({ preventScroll: true })` 만으로는 부족하다. 실측 사고: 이전 뷰의 스크롤이 남은 채 탭을 바꾸면, 새 뷰가 짧을 때 브라우저가 스크롤을 클램프해 헤더가 **반쯤 잘린 채** 뜨고, 길면 화면 중간에 떨어진다. 뷰마다 크롬 위치가 달라져 "상단 바가 왔다갔다한다"는 보고로 나타났다.
|
||||
|
||||
**모바일 헤더는 한 줄이다.** 데스크톱의 브랜드 바(사이드바 상단)와 화면 크럼 바를 좁은 화면에 그대로 쌓으면 90px+ 크롬이 콘텐츠를 옥에 끼운다. 하나를 고른다(크럼이 브랜드명을 이미 담고 있다면 브랜드 줄을 숨긴다) — 고른 헤더는 `position: sticky; top: 0` + safe-top 패딩으로 스크롤 내내 상단에 남는다. 검증은 E2E 로: 300px+ 스크롤 상태에서 탭 전환 → `scrollY === 0`·헤더 `top === 0`.
|
||||
**모바일 헤더는 브랜드+액션 한 줄이다.** 데스크톱의 브랜드 바(사이드바 상단)와 화면 크럼 바를 좁은 화면에 그대로 쌓으면 90px+ 크롬이 콘텐츠를 옥에 끼운다. 하나를 고른다 — **브랜드(마크+이름)와 액션을 헤더에 남기고, 크럼(화면 이름)은 숨긴다.** 화면 이름은 각 뷰의 헤드와 활성 탭이 이미 말한다. 실측 사고: 크럼을 헤더로 내보냈더니 "작은 회색 텍스트가 52px 바에 떠 있는" 빈약한 헤더가 돼 **사용자에게 '깨져 보인다'는 보고**를 받았다 — 구조는 맞아도 시각적 무게가 없으면 깨진 것으로 읽힌다. 고른 헤더는 `position: sticky; top: 0` + safe-top 패딩으로 스크롤 내내 상단에 남는다. 검증은 E2E 로: 300px+ 스크롤 상태에서 탭 전환 → `scrollY === 0`·헤더 `top === 0`, 그리고 **눈으로** — 계측이 전부 통과해도 보기에 빈약하면 실패다.
|
||||
|
||||
### 하드웨어 뒤로가기 = 앱 내 히스토리 (핵심 패턴)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue