HMDesign/docs/sw/sw-header-speed-composed-hover-verification-2026-10-16.md

SW Header — 1400ms 및 Composed Controls Hover 통합 검증

1. 최종 판정: PARTIAL

요청 범위의 Chrome 브라우저 통합 검사 170개와 이웃 필드 영향 검사 5개, 픽셀 비교, Root Typecheck / SW Build / Root Build / Storybook Build는 PASS입니다. 실제 네이티브 호스트 창 제어·다른 브라우저·보조기술·독립 SW Guard coverage는 NOT VERIFIED이므로 전체 PASS로 확대하지 않습니다.

2. 작업 시작 시 Git 상태

• 경로 D:\디자인시스템\HMDesign-SW, branch feature/sw-package.
• HEAD 9407c8567f57301659e591c03451cca1b828733c.
• 기존 변경 M package-lock.json, M package.json, ?? docs/sw/, ?? packages/sw/, ?? src/sw/.
• 기존 파일 SHA-256과 수정 전 CSS·필드 TSX·Story 사본을 _local/sw-speed-hover-qa/에 보존했습니다. 미추적 파일을 삭제·초기화하지 않았습니다.

3. 창 이동 Motion 변경 전후

전체 1640 → 1400ms, Tooltip 520 → 약 443.90ms, 이동 완료 1040 → 약 887.80ms, 완료 후 유지 600 → 약 512.20ms입니다. 모든 구간은 1400/1640(35/41)로 동일하게 단축했습니다. 주기는 약 14.63% 짧아지고 재생 속도는 약 17.14% 빨라집니다. 원본 GIF와 다른 사용자 요청 사항입니다.

세 CSS animation duration만 변경했습니다. 실제 Hover에서 1.4초와 2.8초 iteration을 확인했고, 이탈 시 원래 SVG로 복귀합니다. Drag 중 paused/Tooltip 숨김, 호스트 Pointer Capture 이벤트 전달, Reduced Motion의 원래 아이콘·정적 Tooltip도 통과했습니다.

4. 이동 경로 보존

세 @keyframes의 좌표·백분율·보간 선언은 수정 전과 바이트 단위로 동일합니다. 이전 41개 브라우저 프레임을 시간 × 35/41에 맞춰 다시 측정했으며 창·커서·Tooltip의 상대 위치 차이는 최대 0px였습니다. 따라서 오른쪽 28px / 위쪽 4.5px, 커서 상승·등장 순서·가속/감속 비율은 보존합니다. GIF와의 공간 오차 기록을 현재 시간까지 같다는 뜻으로 해석하지 않습니다.

5. Composed Controls Hover 대상

공용 레이어·색상·선스타일·문자스타일·치수스타일 필드의 버튼 전체 Hover에 적용했습니다. 동일 컴포넌트를 사용하는 Full Header에도 같은 규칙을 적용합니다. Composed Controls의 기존 레이어·색상·상세보기 예제는 보존하고 기존 공개 선/문자/치수 컴포넌트와 5개 필드의 고정 Hover 비교를 추가했습니다. 새 Story나 새 공개 API는 없습니다.

상세보기는 이번 필드 강조에서 제외합니다. 속성Bar/속성창의 텍스트 전용 Hover, caption·검정 divider·기존 선택 토글·배경을 유지하고 Hover Border를 추가하지 않았습니다.

6. 텍스트 · 선 · 아이콘 색상

• PASS: 각 필드 버튼의 빈 모서리 부분에 Hover해도 모든 라벨·값이 rgb(255,198,0)입니다. 선스타일의 가중치·스케일, 폰트 이름 텍스트도 포함합니다.
• PASS: 선 미리보기 5개 조각의 채움만 노란색, 1px 검정 border와 형태·위치 유지.
• PASS: 문자 미리보기는 기존 텍스트이며 색만 변경. 원래 별도 검정 Stroke/그림자가 없으므로 새로운 외곽선을 추가하지 않았습니다.
• PASS: 치수 Hover SVG는 foreground path의 흰 채움 1곳만 #FFC600으로 변경. mask용 흰 rect와 검정 외곽선 path·참조·좌표는 원본과 동일합니다. 60 × 15px wrapper에서 원본/Variant visibility만 교대하며 CSS filter는 없습니다.
• PASS: 색상 견본의 실제 값 #ffe500, chip border, 레이어 상태 SVG·막대 색 유지. 표시 문자열·실제 값은 변경되지 않습니다.
• PASS: Default / Selected / Disabled / Disabled+Selected × 5개 필드에서 Hover·이탈·콜백을 확인. Disabled는 새 Hover 효과가 없고 Selected의 기존 색은 유지됩니다. 선택 단독 상태의 미리보기 색을 확장하지 않았습니다.

7. 검정 외곽선 · 기존 Hover Border

기존 노란 Gradient ::after의 선언은 그대로이며 enabled Hover에서는 opacity 1, Disabled에서는 0입니다. 검정 선 border·치수 mask는 유지합니다. 4배 브라우저 캡처에서 5개 필드 모두 Default와 Hover의 순수 검정 픽셀 위치 집합이 동일했습니다. 선 미리보기 필드는 1920개, 치수 필드는 2903개의 검정 픽셀이 유지됐습니다. 문자 필드는 원래 별도 검정 픽셀이 0개였습니다.

5개 Default 화면은 수정 전과 후의 PNG 픽셀이 모두 동일했습니다. Hover 전후 버튼·텍스트·미리보기의 크기/위치·배경·그림자가 같았고, 5개 이웃 영향 검사에서도 Hover한 필드 외 텍스트 색은 변하지 않았습니다.

8. Storybook 시각 검증

실제 빌드된 SW / Header / Window Move Motion과 Composed Controls를 Chrome 155.0.8059.79에서 열었습니다. 속도 보정된 9개 고정 프레임이 실제 1400ms CSS animation을 pause하고, 반복 경계에서 문구가 숨겨지는 것을 확인했습니다. Composed의 실제 세 스타일 필드와 5개 고정 Hover, 기존 속성창 클릭·선택 상태를 확인했습니다. 비교 PNG와 Story 전체 캡처도 시각 검토했습니다.

이는 실제 공용 React 컴포넌트 결과이며 별도 HTML/CSS 모방 화면이 아닙니다. 개발 서버 프로세스나 포트를 변경하지 않고 임시 localhost 서버에서 검사 후 종료했습니다.

9. 반응형 · Callback 회귀

요청 폭 1920 / 1800 / 1440 / 1180 / 1080 / 900 / 768 / 640 / 390px와 경계 1079 / 639px를 추가 확인했습니다. 모두 Header 높이 49px, Header/문서 가로 overflow 0px이며 기존 auxiliary 필드·속성·색상·인쇄/가이드의 More 이동 정책이 유지됐습니다. 이동 영역도 88 / 24 / 숨김 그대로입니다.

일반/선택 필드 클릭과 Enter 콜백, Disabled 클릭 차단, Full Header 5개 필드 콜백, More로 이동한 선스타일 콜백·메뉴 닫힘, 상세보기 선택 토글, 최소화·종료 콜백을 확인했습니다. Drag의 원래 div 이벤트와 호스트 모의 Pointer Capture·move/up도 통과했습니다. 실제 OS 창 제어는 NOT VERIFIED입니다.

10. Typecheck · Build · Storybook · Guard

• PASS: npm.cmd run typecheck. 기존 pretypecheck의 theme 확인·workspace package build와 SW Build도 포함합니다.
• PASS: SW package build(build:sw, 위 prerequisite 포함), npm.cmd --ignore-scripts run build, npm.cmd --ignore-scripts run build-storybook. 이미 통과한 prerequisite은 반복하지 않았습니다.
• PASS: 브라우저 통합 조건 170개, 이웃 영향 5개, 5개 Default 픽셀 보존과 검정 픽셀 비교. pageerror 0건.
• 기존 빌드 경고: 문서 예시 bg-[var(...)], Storybook :host-context minifier, 500kB 초과 bundle와 plugin timing 안내. exit 0이며 범위 밖 코드를 수정하지 않았습니다.
• Guard 1회: node scripts/ai-generation-guard.mjs --target . --profile STORYBOOK --scope PARTIAL --files src/sw/sw-header.stories.tsx,packages/sw/src/theme/sw.css,packages/sw/src/components/sw-header/components/SWHeaderFields.tsx --json. 원본 status/staticStatus는 NOT VERIFIED, FAIL 없음. SW styles 연결 ENTRY-002, 패키지 구현 graph 밖 SCOPE-001, 연결에 의존한 Token/동적 값 미검증이 남았습니다. Guard를 수정하거나 결과를 PASS로 덮어쓰지 않았습니다.
• Guard styleEvidence: STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED, checks=[]. 독립 SW 실검사 완료라는 의미가 아닙니다. 별도 Runtime/사용자 디자인 의도는 위 검사 범위 PASS, 전체 검증은 PARTIAL입니다.

11. 변경 파일 목록

1. packages/sw/src/theme/sw.css — 1400ms 및 필드 Hover.
2. packages/sw/src/components/sw-header/components/SWHeaderFields.tsx — 치수 원본/Variant의 동일 크기 wrapper.
3. packages/sw/src/assets/menu-dimension-ico-hover.svg — 신규 foreground 색 Variant.
4. src/sw/sw-header.stories.tsx — 기존 모션·Composed Story 보완.
5. docs/sw/sw-header-design-spec.md — 현재 §11.5 및 기존 정책 정합.
6. docs/sw/sw-header-usage.md — 현재 시간·필드 Hover·Story 사용법.
7. docs/sw/sw-header-window-motion-gif-verification-2026-10-16.md — 과거 내용 뒤 후속 기록만 추가.
8. packages/sw/README.md — 현재 동작과 링크.
9. 이 검증 기록 — 신규 문서.

Git 무시 경로 _local/sw-speed-hover-qa/에 시작 해시·사본, 전/후 Default/Hover PNG, pixel-comparison.json, composed-hover-comparison.png, Story·폭별 PNG, verification.json, neighbors.json, 원본 guard.json, 빌드 로그와 final-summary.json을 보존합니다.

12. 기존 디자인 보존 근거

수정한 필드 블록·duration·주석을 원래 값으로 복원한 임시 문자열이 시작 CSS 전체와 동일합니다. 따라서 상세보기·홈·문서·인쇄/가이드·최소화/종료·반응형 CSS는 바이트 단위로 보존됐습니다. 필드 TSX도 치수 wrapper/import 외 문자열이 동일하며 기존 Callback·Props를 변경하지 않았습니다. 다른 Story, 기존 SVG, SWHeaderWindowControls.tsx, root package.json/Lockfile은 시작 상태를 유지합니다.

과거 GIF 검증 문서는 시작 사본이 현재 문서의 정확한 prefix임을 확인했습니다(append-only). 다른 패키지 소스·Worktree·DWG/DXF Viewer는 수정하지 않았습니다. Root의 기존 package build에 따른 Git 무시 dist 재생성만 있습니다. 의존성 설치·공개 API 변경은 없습니다.

13. 남은 차이 · NOT VERIFIED

원본 GIF와 시간만 다릅니다(사용자 요청). 기존 Tooltip의 최소화/종료 일부 시각적 겹침은 유지하며 포인터를 차단하지 않습니다. 실제 네이티브 창 제어, 다른 브라우저·터치/펜·보조기술, 외부 CSS 커스터마이징, 독립 SW Guard coverage는 미검증입니다. 현재 Chrome 기본 테마 범위의 PASS를 전체 플랫폼 승인으로 확대하지 않습니다.

14. 작업 종료 시 Git 상태

feature/sw-package, HEAD 9407c8567f57301659e591c03451cca1b828733c 유지. status 그룹도 M package-lock.json, M package.json, ?? docs/sw/, ?? packages/sw/, ?? src/sw/를 유지하며 실제 이번 변경은 해당 미추적 그룹 내부에 있습니다. Index 변경·Commit·Push·PR·Merge·Publish·배포는 수행하지 않았습니다.

작업 시간(KST): Started At 2026-10-16 13:54:54 / Completed At 2026-10-16 14:08:24 / Actual Duration 13분 30초 / Estimated Duration 15~25분 / Variance 15분 대비 −1분 30초, 25분 대비 −11분 30초.