HMDesign/docs/sw/sw-header-firefox-range-close-verification-2026-10-19.md

SW 속성창 게이지 Firefox 지원 · 닫기 SVG · Storybook Build 검증 (2026-10-19)

기준: feature/sw-package @ fc26afd4401d5b3bb74c8818cacb76f669fcd24b. 직전 후속 4건(검증 기록)의 미커밋 변경 위에서 진행했다.

A. Firefox 게이지

• 원인: 게이지 디자인이 ::-webkit-slider-runnable-track / ::-webkit-slider-thumb에만 정의돼 있었다. Gecko는 이 의사 요소를 쓰지 않아 기본 range 외형이 남았다.
• 방식: Track 그림(채움 왼쪽 검정 선 + Figma 6926 채움 + 베이지 Track), Thumb 그림(property-range-thumb.svg), Thumb 그림자를 input의 custom property(--hm-sw-range-track-paint, --hm-sw-range-thumb-paint, --hm-sw-range-thumb-shadow)로 한 번만 정의했다. 엔진별 규칙이 이 값을 공유한다.
  • WebKit/Blink: 기존 track + thumb(margin-top: -4px).
  • Gecko: ::-moz-range-track(6px, radius 3) + ::-moz-range-thumb(14px, 자동 수직 중앙). ::-moz-range-progress는 높이 0·투명으로 둬서 채움이 두 번 그려지지 않는다.
  • 색·자산은 Chrome PASS 값 그대로이고, 새 색은 없다. 각 엔진은 자기 의사 요소만 인식하므로 다른 엔진에 영향이 없다.
• 검증: node packages/sw/tests/range-cross-browser.browser.mjs docs/sw/firefox-range-qa → 29/29 PASS (result.json, 비교 이미지).
  • 브라우저: Chrome 155.0.8059.80(Playwright), 설치된 Firefox 158.0 실브라우저(WebDriver BiDi로 직접 제어, Playwright Firefox 빌드 미사용).
  • 조건: 같은 Story(SW/Header/Property Panel → 원 1개 → 속성창), 1400×1000, DPR 1, 같은 순서의 실제 키 입력.
  • 두 브라우저 공통 확인: 빨강 채움, 베이지 Track, 위·아래 검정 1px의 6px 높이, Thumb 12px 검출 폭(14px 그림), Thumb 세로 중심이 Track 중심(8.0).
  • 값 0 / 0.25 / 0.65(→ 40회) / 1(End) / 0(Home) / 외부 Props 0.8에서 Thumb 중심이 기대값 ±1px.
  • Enter 확정 시 숫자 입력 0.65와 Callback property(opacity, 0.65) 확인.
  • Disabled·ReadOnly: range가 비활성화되어 키 입력으로 값이 바뀌지 않고, 해제하면 복원된다.
  • Chrome 대비 차이: 1,800픽셀 중 48 초과 차이는 최대 1px, 평균 채널 차이 1.2–2.1. 채움·Track 열 색은 ±1 이내.
  • 남은 차이는 Track 아래 1px 하이라이트 행 하나다. Chrome #EADEC8, Firefox #EDE5D4로 Gecko의 box-shadow 안티앨리어싱 차이다.
  • 최종 실행의 Thumb 중심(px)은 9개 상태 모두 두 엔진이 같다: 0 → 7, 0.25 → 25, 0.65 → 53, 0.8 → 64, 1 → 79. 이전 실행에서는 Chrome Focus 테두리가 포함돼 극값이 7.5 / 78.5로 측정됐다.
• Focus-visible: 기존 .hm-sw-property input:focus-visible(2px #A67D03) 규칙은 엔진 공통이다.
  • headless Firefox는 BiDi 합성 키 입력에서 버튼·텍스트 입력까지 포함해 :focus-visible을 켜지 않는다(별도 대조 페이지에서 확인).
  • 그래서 비교 스크린샷은 두 브라우저 모두 테스트 전용으로 outline만 숨기고 찍었다. Firefox Focus 링의 시각 확인은 NOT VERIFIED다.
• 콘솔: 두 브라우저 모두 컴포넌트 오류 0. Firefox에는 Storybook manager 글꼴(/sb-common-assets/nunito-sans-regular.woff2) 다운로드 실패 1건이 있으며, Storybook 인프라 항목이라 제외했다.
• Story: PropertyPanelDemo에 투명도 외부 값 변경 / 투명도 Disabled / 투명도 ReadOnly 버튼 3개만 추가했다(공개 API 변경 없음).
• Chrome 회귀: 기존 followup-four.browser.mjs 39/39 PASS 재실행.

B. 닫기 버튼 SVG (Figma 26:12366)

• property-close.svg / property-close-hover.svg 모두 도구 아이콘과 같은 Figma 캔버스 4요소를 포함하고 있었다: #F5F5F5 44×30 배경, 흰 페이지 path, 10% 검정 페이지 테두리, #9747FF 점선 프레임.
• 실제 노출: 버튼 몸체가 44×30을 덮고 패널의 둥근 모서리·overflow가 대부분을 가린다. 그래서 흰 테두리처럼 보이지는 않았다(가장자리 밝은 픽셀 0). 다만 오른쪽 위 radius 3 곡선의 안티앨리어싱 픽셀(4배율 기준 19 / 15개, 최대 채널 차이 67 / 35)에 밝은 캔버스가 섞여 있었다.
• 수정: 두 파일에서 위 4요소만 제거했다. viewBox 44×30(버튼과 동일), 버튼 path·Gradient·Hover 빨강 #E40000·X 아이콘·Default/Hover 분리는 그대로다.
• 검증: node packages/sw/tests/property-close.browser.mjs docs/sw/property-close-qa after → 6/6 PASS (before / after).
  • 크기 44×30, 패널 오른쪽·위 1px.
  • Default/Hover 가장자리 밝은 픽셀 0, Hover 자산 표시 확인.
  • 클릭 닫힘 + 속성창 버튼으로 Focus 복귀, Escape 닫힘 + Focus 복귀, 오류 0.
  • 전후 차이는 위 모서리 곡선 픽셀뿐이다.
• .hm-sw-property__tool 관련 SVG는 이번에 수정하지 않았다.

C. Storybook Build

• npm run build-storybook(prebuild: theme-defaults 검사 + 패키지 build 포함) → exit 0, "Storybook build completed successfully".
• 경고 4종은 모두 기존 경고로 SW 변경과 무관하다: Tailwind bg-[var(...)] CSS 최적화, lightningcss host-context, 500kB 초과 chunk, PLUGIN_TIMINGS. 앞의 3종은 docs/org-chart/consistency-review-p11-6.md 등에 이미 기록돼 있다.
• 결과물 storybook-static/assets/sw-header-*.css에 ::-moz-range-track/progress/thumb 각 1회, Thumb SVG data URI가 포함됐다. Story bundle의 SVG에는 #F5F5F5 / #9747FF가 0건이다.

재사용한 기존 PASS (재실행 안 함)

Storybook 32개 렌더, 구성 77/77, 브라우저 271건, 기본 Header 10폭 차이 0. 공통 Header CSS·팝업 구조는 바꾸지 않았다(range 의사 요소와 닫기 SVG만 변경).

NOT VERIFIED

• Firefox에서 키보드 Focus 링(:focus-visible)의 시각 표시. 자동화 입력 한계로 확인하지 못했고, 규칙은 엔진 공통 CSS다.
• 실제 Windows Firefox 창(비 headless)과 고배율(DPR 2) 렌더링.
• Safari(WebKit) 실브라우저.