fix(site,skill): 모바일 상단 바 수리 — 탭 전환 스크롤 리셋과 단일 sticky 헤더

사용자 보고 '상단 바가 페이지마다 왔다갔다하며 패딩이 없고 포지션도 이상하다'를 계측으로 원인 규명:
- 탭 전환 시 이전 뷰의 window.scrollY 잔류 — 짧은 뷰에선 클램프(600→49)되어 헤더가 반쯤 잘림. setCurrentView 에 scrollTo(0,0) 리셋(양앱)
- ≤900 헤더 이중 스택(브랜드 줄 43px+크럼 52px)·비sticky·safe-top 무 — .side 숨기고 .topbar 를 sticky+safe-top 단일 헤더로(두레 앱바 문법). 데스크톱 무변경
- 재발 방지: e2e M5 헤더·스크롤 스위트 10단언(스크롤 300px+에서 탭 전환 → scrollY=0·헤더 top=0), 시각 기준 갱신(390px 9화면 의도 변경), verify L0~L6 재통과
- 스킬 mobile-app-ux.md 에 '뷰 전환은 스크롤을 리셋·헤더는 하나' 규칙 반영. 가온 CSS v23
This commit is contained in:
Yun Chan 2026-08-23 14:50:06 +09:00
parent 1b636b7b83
commit d4cd9ca49d
40 changed files with 76 additions and 27 deletions

View file

@ -827,3 +827,10 @@ max-age=0 지정(존 설정이 우선하면 효과는 제한적). **운칙: /wor
- **실기기 검증(안드로이드 에뮬레이터·실제 Chrome)**: adb reverse + uiautomator dump 텍스트 근거로 — 가온 렌더·수강생 탭·**백 키→대시보드 복귀**·더보기 시트·공지 선택·백 복귀, 두레 렌더·관심 탭·백 복귀. iOS 는 WebKit 엔진(L4)으로 대체(Windows 제약 문서화). 비전은 전환 중 프레임 오탐이 있어 '여부' 판정은 계측에만.
- **도그푸드가 잡은 사고**: ①스킬 게이트 새 tapTargets 검사 개발 중 thresholds 얕은 병합 버그(구형 설정이 신규 기본값 지움, "≥undefinedpx") → 깊은 병합. ②죽은 선택자 검사가 이번 라운드 내가 만든 `.btn-seal/.btn-star`(가온에 없는 버튼)과 두레 포크 잔재 6종을 적발 → 삼위일체 제거, 세그먼트 `seg-${n}` JS 조립은 무시 목록(seg-)으로 오탐 차단. ③두레 `.btn-seal`은 생존(신청 버튼) — coarse 사이징 실수로 뺐다가 게이트 재실행으로 복원. CSS v22(양앱).
- **스킬 내재화(v0.7 예정)**: references/mobile-app-ux.md 신규(5축 표·뒤로가기 전체 패턴·실기기 검증법·출처), audit-gate 7계층(L6 시나리오)·하니스 12~14(NaN 방어·fixed 판정·실기기 텍스트 근거), design-gate tapTargets 내장, SKILL.md 규칙 7 "OS 관습은 조사 없이 바꾸지 않는다".
## 2026-08-23 — 국소: 모바일 상단 바 수리(v23) — 스크롤 잔류·이중 헤더
사용자 보고 "상단 바가 페이지마다 왔다갔다하며 패딩이 없고 포지션도 이상하다". 계측으로 원인 둘로 확정:
- **탭 전환 스크롤 잔류** — setCurrentView 는 focus({preventScroll:true}) 였지만 이전 뷰의 window.scrollY 가 그대로 남아, 새 뷰가 짧으면 브라우저가 클램프(600→49)해 헤더가 반쯤 잘리고 길면 화면 중간에 떨어졌다. 뷰마다 크롬 위치가 제각각 = "왔다갔다". 수리: setCurrentView 마지막에 window.scrollTo(0,0) (양앱).
- **모바일 헤더 이중 스택** — ≤900에서 브랜드 줄(.side 43px)+크럼 탑바(52px)=95px 크롬이 쌓이고 둘 다 static 이라 스크롤하면 떠내려가며, safe-top 도 없었다. 수리: ≤900에서 .side 숨김(크럼이 브랜드명을 이미 담음 — 중복), .topbar 를 sticky top:0 + safe-top 패딩의 단일 헤더로(두레 앱바와 같은 문법). 데스크톱(>900) 무변경.
- 재발 방지: e2e.mjs M5 헤더·스크롤 스위트 10단언(헤더 sticky·상단 박착, 300px+ 스크롤에서 탭 전환 → scrollY=0·헤더 top=0). 시각 기준 갱신(390px 9화면 의도 변경), verify L0~L6 재통과. 스킬 mobile-app-ux.md 에 "뷰 전환은 스크롤을 리셋·헤더는 하나" 규칙 반영.