HMDesign/docs/sw/sw-header-design-spec.md

SW Header 디자인 명세

현재 기준 색인(2026-10-19 1차 정리): 아래 날짜별 안내 중 최신 항목이 같은 주제의 이전 본문보다 우선합니다. 주제별 최신 근거는 속성 필드 13개 §18, 게이지·속성Bar·도구 아이콘 후속 4건 기록, Firefox 게이지·닫기 버튼 기록, 상세 버튼 공통화 기록, 구성·메뉴 순서·형상 Slot 3차 기준입니다. Text Stroke는 검정 외곽선만 적용하며 자기 색 Stroke는 없습니다(§6.1). 문서·Storybook 전체 현황과 2차 검토 목록은 1차 정리 보고를 봅니다.

후속 디자인 수정 4건(2026-10-19): 속성Bar는 Figma 1222px 고정 폭 대신 마지막 필드에서 끝나는 콘텐츠 폭(공간 부족 시 내부 스크롤)을 사용합니다. 속성창 도구 아이콘 SVG의 Figma 캔버스 배경을 제거했고, 레이어·색상·문자·치수스타일 필드는 자기 Dropdown이 열린 동안 Hover를 적용하지 않으며, 게이지는 빨강 채움 + 베이지 Track입니다. 아래 26:10492의 "최대 1222" 설명보다 우선합니다. 검증 기록.

상세 버튼 공통화 기준(2026-10-16, 이번 요청): 상세 5개는 기존 SWHeaderMenuDetail을 공유하며 현재 문자스타일 상세를 우선합니다. Default는 배경 rgba(197,177,158,.15)·radius 24·글자 35%·아이콘 SVG 20%, Hover는 배경 .25·radius 25·글자 35%·아이콘 SVG 35%입니다. Disabled는 Default 외형과 클릭 차단을 사용합니다. Callback이 없어도 Hover되며 클릭은 무동작입니다. 치수 상세의 글자 100% Hover와 Callback 부재에 따른 비활성 설명은 이 기준으로 대체합니다. 기존 폭 113/99/128/142/142px·높이 24px, 제거된 Text Stroke 선언을 유지합니다. 과거 검증 문서는 당시 기록으로 보존합니다. 이번 검증 기록.

3차 기준(2026-10-16): 문서 끝 3차 기준이 구성요소 표시·메뉴 순서·속성창 상태·형상 Slot에 우선합니다. 3차 검증 기록.

후속 5개 요구사항(2026-10-16): 이 문서 끝의 후속 기준이 속성Bar·메뉴 구성·Colorize·Text Stroke 비교 정리에 우선합니다. 이전 solid-stroke-width 보존 설명은 역사적 기록이며 최신 구현에는 적용하지 않습니다. 새 검증 기록.

현재 추가 기준: 이 문서의 과거 Hover 없음·선택 글자만 노랑·일반 자기 색 Stroke 내용보다 아래 추가 수정 기준이 우선합니다. 과거 검증 기록은 당시 결과로 보존합니다.

상태: @hm-design/sw 0.1.0 구현 기준(2026-10-16). 코드: packages/sw/src/components/sw-header/, CSS: packages/sw/src/theme/sw.css, Story: SW / Header. 값 표기: 확인 = Figma MCP(get_metadata·get_design_context) 또는 사용자 확정 CSS에서 직접 확인, 구현값 = Figma에 없어 구현에서 정한 값, 추정 = 확인 근거 없음.

1. 개요

SW Header는 여러 설치형 SW에서 공통으로 쓰는 49px 헤더입니다(Figma 기준 화면은 이지빔 SW). 로고 / 파일명 / 객체 수정 영역 / 창 영역의 4개 면으로 구성됩니다. @hm-design/ui와 독립된 @hm-design/sw 패키지에서 관리하며, SW 전용 토큰(--hm-sw-header-*)만 사용합니다.

우선순위: ① 사용자 확정 CSS·선택·반응형 정책 → ② Figma 원본 → ③ 기존 DWG/DXF 뷰어 구현(D:\디자인시스템\테스트\dwg-dxf-viewer-hm) → ④ HMDesign 공통 규칙(패키지·타입·Storybook·접근성).

2. Figma 원본

항목	값
File	rj6wpsfk24lOWvWiVRAANP (이지빔 SW)
Node	26:8944 header_green (instance)
크기	1920 × 49 (내부 면 높이 48) — 확인
접근	Figma MCP로 metadata·design context·screenshot 확인(2026-10-16)

3. 레이어 구성

표시 레이어(확인). 같은 내용의 header frame이 두 번 겹쳐 있으며(26:10337, 26:10372), 두 번째 frame에만 Rectangle 6671(x0, 310 × 48, 파일명 면과 같은 gradient)이 홈 뒤에 깔립니다. 구현은 한 번만 렌더링하고 Rectangle 6671은 홈 영역 0–65px의 배경으로 재현합니다.

Figma 레이어	x / y	W × H	구현 컴포넌트
header/btn_home	0 / 0	80 × 48	SWHeaderHome
header/document_tit	65 / 0	310 × 48	SWHeaderDocumentTitle (문서 Dropdown 포함, §5.1)
Rectangle 7428 (객체 수정 면)	377 / 0	1301 × 48	.hm-sw-header__object-area
Frame 427319899 그리기모드	377 / 5	90 × 38	.hm-sw-header__mode
header/menu/레이어	467 / 5	234 × 38	SWHeaderLayerControl (layers 전달 시 SWHeaderLayerMenu, 레이어 Dropdown §5.2)
header/menu/색상	705 / 5	192 × 38	SWHeaderColorControl
header/menu/선스타일	901 / 5	284 × 38	SWHeaderLineStyle
header/menu/문자스타일	1189 / 5	164 × 38	SWHeaderTextStyle
header/menu/치수스타일	1357 / 5	164 × 38	SWHeaderDimensionStyle
Frame 427319953 상세보기	1521 / 6	157 × 38	SWHeaderProperties
Rectangle 6669 창 영역	1680 / 0	240 × 48	.hm-sw-header__window
Group 2913 인쇄·가이드 pill	1683 / 3	85 × 42	SWHeaderActions
창이동 motion	1768 / 0	88 × 48	SWHeaderWindowControls
header/btn_최소최대화, btn_종료	1856 / 0	32 × 48 각	SWHeaderWindowControls

숨김 레이어(확인, 구현 제외): Ellipse, Component 761, Component 762, 창이동(65 × 48), Component 724/mouse.

Figma get_design_context에는 드롭다운 행(HeaderDropdownBrownRow), ByLayer/ByBlock, Colorize, 상세 pill(레이어 상세 등), GIF 가이드 카드도 포함되어 있으나 헤더에 표시되지 않는 하위 메뉴·팝업 구성요소입니다. 최초 범위(헤더 1개)에서는 구현하지 않았습니다. 이 중 레이어 Dropdown(HeaderDropdownBrownRow, 레이어 상세 pill)은 2026-10-16 추가 요청으로 구현했습니다(§5.2). 색상·선스타일·문자스타일·치수스타일 Dropdown과 ByLayer/ByBlock·Colorize·상세 pill·Input은 같은 날 후속 요청으로 구현했습니다(§5.3–§5.5). 각 … 상세 팝업의 내부 화면은 Figma 전달 전이라 범위 밖입니다.

4. 전체 레이아웃

flex 한 줄, 면 사이 2px. 1920px에서 Figma 좌표와 동일합니다(브라우저 측정, §15).

[홈 80(-17 겹침)] [파일명 310] 2 [객체 수정 1301: 그리기모드 90 | 레이어 234 · 색상 192 · 선 284 · 문자 164 · 치수 164 (gap 4) | 상세보기 157] 2 [창 240: pill 85 · 창 이동 88 · 최소화 32 · 종료 32]

• 홈은 80px 박스(overflow clip)이고 오른쪽 15px이 파일명 면 위에 겹칩니다. 파일명 글자는 x=70에서 시작하며 홈 박스의 투명 부분으로 보입니다.
• 객체 수정 면 안의 그리기모드 셀과 상세보기 블록은 Figma처럼 면의 바깥 테두리 위치(377 / 1678)에 맞춥니다(1px 음수 margin).
• 내부 필드 높이 38, 위 5px(테두리 1 + padding 4).

5. 컴포넌트별 내부

영역	구성(확인)
홈	배경 SVG 92 × 72(위치 −8, −12, 그림자 포함 영역) + 로고 영역 32 × 17(위치 12, 16, Figma bi_egbim frame). 로고 이미지는 §9.1
파일명	글자 왼쪽 5px, 화살표 7 × 4(#47AF91, 오른쪽 12px), 글자–화살표 15px. 클릭 시 문서 Dropdown(§5.1)
레이어	아이콘 3개(20 × 20, gap 0) · gap 8 · 라벨/값
색상	칩 60 × 20(검정 바탕, 안쪽 58 × 18 흰 1px 테두리, 기본 #FFE500) · gap 12 · 라벨/값
선스타일	선 미리보기 10 × 4 × 5(gap 2, 흰 바탕·검정 1px) · gap 12 · 선스타일 / 가중치(38) / 스케일(38), gap 12, 가운데 정렬
문자스타일	글꼴명 16px 700 · gap 12 · 라벨/값
치수스타일	치수 아이콘 60 × 15 · gap 12 · 라벨/값
상세보기	위 19px: 상세보기 12px / 아래 19px: 속성Bar · 구분선 1 × 12(검정, 1px 0 2px rgba(255,255,255,.25)) · 속성창
인쇄·가이드	pill 85 × 42(rgba(0,0,0,.8), 1px #092920, radius 4, inset 0 2px 2px rgba(0,0,0,.25)), 버튼 40 × 38 두 개 gap 1. 인쇄 버튼은 파일명 gradient·1px #08251C·radius 2
창 이동	2px 줄무늬 4px 간격(#1C6A51 32%, x3–85, y6, 높이 37) + 아이콘 32 × 30(위 13)
최소화	10 × 2 막대 #ADB0AF 가운데
종료	SVG 32 × 48

5.1 문서 Dropdown (Figma header/document_tit 26:10662)

Figma의 hover Variant는 목록이 펼쳐진 모습을 정의합니다. 구현은 클릭으로 열고 닫으며 마우스 Hover만으로는 열지 않습니다. 파일명 Hover는 글자만 #FFC600으로 바꾸며 노란 테두리는 표시하지 않습니다(§11.1).

항목	Figma(확인)	구현
열린 파일명	글자 #FFC600, 화살표 노란색 위쪽(Polygon 353)	같음. 화살표는 CSS 삼각형을 180° 회전
위치	파일명(310 × 48) 바로 아래, right: 0	헤더 아래로 겹치는 Overlay(헤더 49px 유지). 1920에서 바깥 박스 x 63–375(Figma와 같음). 좁은 폭에서도 화면 안에 있도록 왼쪽 기준 정렬 + max-width: 100cqw − 71px
크기	항목 310 + 테두리 1px × 2, 예시 4개 = 목록 128 + 하단 40	바깥 312 × 170(4개). 목록 최대 320px 후 내부 세로 스크롤
배경 · 테두리	#103127, 1px #041611, 하단 radius 4, 0 2px 4px rgba(0,0,0,.25)	같음
안쪽 그림자	목록·하단 영역 각각 inset 0 4px 8px rgba(0,0,0,.4)	같음
문서 항목	310 × 32, padding 8, gap 8, 아이콘 29 × 12(icon_dualmonitor), 14px #F0F7F5	같음(글자 700, 말줄임). Hover: Figma header/document_tit/list(26:10680) 그대로 검정 40% 배경 오버레이(#103127 위 합성), 글자·아이콘 변화 없음
하단	높이 40, padding 8, 위 구분선 rgba(194,217,210,.2)	같음
New / Open	+ New 54 × 24, Open 47 × 24, 배경 rgba(182,208,201,.2), radius 2, padding 5 / 6, 14px 검정 70%, 양 끝 정렬	같은 값. Noto Sans KR로 55.4 / 50px(글자를 자르지 않음). Hover: Figma 26:10762 / 26:10805 그대로 배경 rgba(182,208,201,.3), 글자 검정 100%. 크기·padding·radius 변화 없음

• 데이터 없음: documents=[]이면 목록 없이 하단만 표시합니다. documents를 전달하지 않으면 Dropdown 없이 기존 파일명 버튼입니다(하위 호환).
• 패키지에는 문서명·파일 형식을 넣지 않습니다(Figma 예시 Drawing1.grm은 Storybook 테스트 데이터로도 쓰지 않음). 아이콘은 기본값으로 Figma icon_dualmonitor를 쓰고 항목별(icon)·전체(documentIcon)로 바꿀 수 있습니다.
• 동작: 클릭/Enter/Space로 열고 닫기, ↓로 열면서 첫 항목 Focus, ↓↑ 이동, Escape·바깥 클릭으로 닫기(Focus는 파일명으로 복귀), Tab으로 목록 밖으로 나가면 닫기(Focus 갇힘 없음). 파일명 버튼은 aria-expanded / aria-controls로 목록(role="group", aria-label="문서 목록")과 연결됩니다.

5.1.1 현재 문서 · 문서 닫기 (사용자 추가 요구, Figma에 없음)

2026-10-16 사용자 최종 지시. 위 Figma 확인 항목과 구분해 기록합니다.

항목	정책
목록 순서	documents 배열 순서를 그대로 표시합니다. 현재 문서를 앞으로 옮기지 않으며, 다른 문서를 선택해도 순서·위치가 바뀌지 않습니다.
현재 문서(activeDocumentId)	문서명 글자만 #FFC600. 나머지 문서는 #F0F7F5. 테두리·배경·아이콘 변화 없음(다색 아이콘은 레이어 상태 아이콘과 같은 이유로 유지). 버튼에 aria-current="true"
Hover와 선택	Hover는 배경(검정 40%, Figma 26:10680), 선택은 글자색이라 동시에 적용돼도 구분됩니다.
X(문서 닫기)	onDocumentClose를 주면 모든 행 오른쪽 끝(24 × 24, 오른쪽 4px)에 X가 있습니다. 평상시 숨김(opacity 0, 자리는 항상 확보)이며, 마우스를 올린 행 또는 키보드 Focus가 있는 행에만 표시됩니다(선택 여부와 무관). Dropdown이 아니라 그 문서를 닫는 버튼이며 이름은 문서 닫기, 툴팁은 <문서명> 닫기
X 모양	8 × 8 선 아이콘, rgba(240,247,245,.7). X 자체 Hover: 배경 rgba(182,208,201,.2), 아이콘 #F0F7F5(구현값). 노란 테두리 없음
배치	행 높이 32px 유지. 문서명은 X 자리 앞에서 말줄임(1920에서 문서명 오른쪽 끝 338 < X 시작 346). X 표시·숨김으로 아이콘·문서명이 움직이지 않음
동작	X는 선택 버튼과 형제 버튼이라 onDocumentSelect가 함께 호출되지 않습니다. X 후 Dropdown은 열린 채로 두고 Focus는 목록 첫 항목으로 옮깁니다(행이 사라져도 Focus 유실 없음). 실제 문서 닫기·목록 갱신·다음 선택 문서 결정은 호스트가 합니다.

• 접근성 확인 필요: Figma New / Open 글자색(검정 70%)은 어두운 배경에서 대비가 낮습니다. Figma대로 구현했으며 변경 여부는 디자인 결정 사항입니다.

5.2 레이어 Dropdown (Figma header/menu/레이어 26:10940, 2026-10-16)

Figma 기준 5개 Node: ① header/menu/레이어 26:10940(default 26:10941 / hover 26:10952 / Variant3 = 펼침 26:10963) ② icon_전구 26:10810 ③ icon_눈꽃 26:10855 ④ icon_자물쇠 26:10912(각 20 × 20, Variant 4개) ⑤ header/dropdown/brown/row 26:10687(Default 26:10688 / Hover 26:10695). 모두 Figma MCP get_design_context·screenshot으로 확인했습니다.

layers를 전달하면 레이어 필드가 Dropdown 버튼이 됩니다(SWHeaderLayerMenu). 전달하지 않으면 기존 필드 버튼(onLayerOpen)과 DOM·외형이 같습니다(하위 호환). 필드 Hover는 기존 노란 Gradient Border + 글자 #FFC600이며 클릭으로만 열립니다.

항목	Figma(확인)	구현
필드	234 × 38, radius 3, 기존 gradient·그림자, 아이콘 3개 + 레이어 라벨/값	기존 필드 그대로. 1920에서 x 467(브라우저 466.7)
펼친 필드(Variant3)	테두리 #081813, 위쪽만 radius 3, 라벨·값 #FFC600	같음(data-expanded, aria-expanded)
펼침 외곽선	#A67D03(=노란 테두리 토큰) 1px, 236 × 320, 위치 −1 / −1, radius 4	기존 --hm-sw-header-hover-border-gradient로 필드+목록 바깥 1px 링. 크기 변화 없음
목록 위치	필드 바로 아래, 같은 왼쪽	필드 아래 Overlay(top: 100%), 헤더 49px·다른 필드 위치 불변
목록	234 × 280(행 30 × 8 + 하단 40), #27241D, 검정 1px(inside), 하단 radius 3, 0 4px 8px rgba(16,48,38,.25)	같음. 테두리는 overlay라 행이 234 × 30 그대로
행	234 × 30, padding 12, 아이콘 20 × 3(gap 0) · 8 · 견본 16 · 8 · 이름(14, #F6F4F2)	같음(이름 Noto Sans KR 14 / 700 / 0.04em, 말줄임). 1920 측정: 아이콘 x+12, 견본 x+80, 이름 x+104(+1 padding)
색상 견본	16 × 16 검정 radius 2, 안쪽 1px 위치 흰색 + 1px #C9C9C9 radius 1	같음. 안쪽 색은 layer.color(기본 #FFFFFF)
행 Hover	배경 #62533D, 글자 #FF5C00	같음. 이 목록 전용(다른 컨트롤의 노란 Hover와 별개)
아이콘 Hover	전구: 검정 25% 배경 radius 2 / 눈꽃·자물쇠: Hover SVG(같은 아이콘 + 검정 25% 타일)	같음. 눈꽃·자물쇠는 Figma Hover SVG를 그대로 겹쳐 표시
Off → Off Hover	Smart Animate, ease-out 300ms	transition: 300ms ease-out(Off만). On Hover는 즉시. Reduced Motion 시 전환 없음
하단	높이 40, padding 8 / 12, 1px rgba(197,177,158,.15)(inside), 오른쪽 정렬	같음
레이어 상세	pill radius 24, padding 5 / 10, gap 4, 배경 rgba(197,177,158,.15), 아이콘 14(ico_layer), 글자 14 흰색 opacity .35	같음. 글자 폭 Noto 69.3px(Figma Dotum 75px), 버튼 107.3 × 24
목록 높이 상한	예시 8행	구현값 240px(8행). 넘치면 목록만 세로 스크롤, 하단 고정

5.2.1 아이콘 On/Off와 데이터 의미

아이콘	컬러(Default/Variant2)	회색(Variant3/Variant4)	데이터
전구	visible !== false	visible === false	onLayerVisibilityChange(layer, nextVisible)
눈꽃	frozen !== true	frozen === true	onLayerFreezeChange(layer, nextFrozen)
자물쇠	locked !== true	locked === true	onLayerLockChange(layer, nextLocked)

• 확정 매핑(2026-10-16 사용자 확정): 전구 컬러 visible=true / 회색 visible=false, 눈꽃 컬러 frozen=false(동결 해제) / 회색 frozen=true(동결), 자물쇠 컬러 locked=false(잠금 해제) / 회색 locked=true(잠금). 클릭하면 해당 boolean의 반전값을 Callback으로 전달합니다(전구 !visible, 눈꽃 !frozen, 자물쇠 !locked). Figma 원본 SVG와 Default/Hover 디자인은 그대로입니다. 구현 위치는 layerIconOn()(SWHeaderLayerIcons.tsx) 한 곳입니다.
• aria-pressed는 아이콘 색이 아닌 데이터 의미(표시됨 / 동결됨 / 잠김)를 따릅니다. 이름은 <레이어명> 표시|동결|잠금.
• 아이콘은 데이터만 반영합니다. 클릭 시 Callback으로 다음 값을 알리고, 실제 변경·도면 반영은 호스트가 layers를 갱신해 수행합니다. Hover는 CSS이며 데이터를 바꾸지 않습니다.
• Callback이 없는 아이콘은 버튼이 아닌 상태 표시(role="img", <이름> 표시 켜짐/꺼짐)이며 Hover·클릭 반응이 없습니다.
• 필드의 아이콘 3개는 현재 레이어(activeLayerId) 상태를 표시합니다(필드 안 아이콘은 장식, 버튼 아님). 현재 레이어가 없으면 모두 컬러(기존과 같음).

5.2.2 선택 · 이벤트 · 키보드

동작	결과
필드 클릭 / Enter / Space	열기·닫기(onLayerOpen도 매 클릭 호출, onLayerMenuOpenChange)
행 선택(견본·이름 버튼)	onLayerSelect 1회 → 목록 닫힘, Focus는 필드로 복귀(문서 Dropdown과 같음)
전구 / 눈꽃 / 자물쇠	해당 Callback 1회, onLayerSelect 호출 없음, 목록 유지, Focus는 아이콘에 유지
레이어 상세	onLayerDetail 1회 후 목록 닫힘. Callback이 없으면 Figma 외형 그대로 disabled(추가 흐림 없음), 임의 팝업 없음
바깥 pointerdown · Escape · Tab으로 벗어남	닫힘(Escape는 필드로 Focus 복귀). 다른 메뉴(문서·더보기)를 누르면 바깥 클릭으로 닫혀 Overlay가 겹치지 않음
↓ (닫힘)	열고 현재 레이어(없으면 첫 행) 이름 버튼에 Focus
↓ ↑ (열림)	행 이동, 같은 열(전구·눈꽃·자물쇠·이름) 유지, 하단 버튼 포함 순환
← →	행 안에서 아이콘·이름 사이 이동

• 행은 <li> 안에 아이콘 버튼 3개와 선택 버튼 1개를 형제로 둡니다(중첩 버튼 없음). 따라서 아이콘 클릭이 행 선택으로 전파되지 않습니다.
• 현재 레이어(사용자 규칙 확장, Figma 없음): 문서 Dropdown과 같이 목록 순서를 유지하고 이름만 #FFC600(Hover 중에도 유지, 배경만 갈색). 버튼에 aria-current="true".
• disabled 레이어는 선택·아이콘 버튼 모두 비활성(기존 opacity .4), 행 Hover 없음.
• 데이터 없음: layers=[]이면 목록 없이 하단(레이어 상세)만 표시하고 필드는 layer.name을 표시합니다.

5.2.3 반응형

목록은 234px를 유지하고 필드 왼쪽에 맞춰 엽니다. 헤더(또는 화면) 오른쪽을 넘으면 넘는 만큼 왼쪽으로 이동하고(1px 여백), 이때 노란 외곽선은 목록만 감쌉니다(data-shifted). 520 미만의 필드 아이콘 숨김·레이어명 말줄임 등 기존 단계는 그대로입니다. 측정 결과는 레이어 Dropdown 검증 기록에 있습니다.

5.3 색상 · 선스타일 · 문자스타일 · 치수스타일 Dropdown (2026-10-16)

Figma 8개 노드(모두 MCP get_design_context + Plugin API로 확인): ① header/menu/색상 26:10986(Default 26:10987 / hover 26:10996 / 펼침 26:11005) ② header/menu/색상_addUserColor 26:11036(26:11037 / 26:11046 / 26:11055) ③ ByLayer 26:12666(Default 26:12667 / hover 26:12669 / on 26:12671) ④ ByBlock 26:12659(26:12660 / 26:12662 / 26:12664) ⑤ header/menu/선스타일 26:11104(26:11105 / 26:11124 / 26:11143) ⑥ header/menu/문자스타일 26:11181(26:11182 / 26:11191 / 26:11200) ⑦ header/menu/치수스타일 26:11215(26:11216 / 26:11229 / 26:11242) ⑧ header/dropdown/brown/row 26:10702(Default 26:10703 / Hover 26:10706). 보조: 행 Variant(26:10713 / 26:10748 / 26:10755 / 26:10718 / 26:10729), input 26:11656, header/menu/색상/input 26:11308, btn_상세/* 26:10774 / 26:10781 / 26:10788 / 26:10795, btn_colorize 26:11302.

데이터 Props(colors, lineTypes/lineWeights, textStyles, dimensionStyles)를 주면 각 필드가 Dropdown 버튼이 됩니다(SWHeaderColorMenu, SWHeaderLineStyleMenu, SWHeaderTextStyleMenu, SWHeaderDimensionStyleMenu). 주지 않으면 기존 필드 버튼과 외형·동작이 같습니다(하위 호환). 동작 계약은 레이어 Dropdown(§5.2.2)과 같습니다: 클릭/Enter/Space로 열고 닫기(Hover로 열지 않음), ↓로 열며 현재 항목(없으면 첫 항목) Focus, ↓↑ 이동, Escape·바깥 pointerdown·Tab 이탈로 닫기, 한 번에 하나만 열림, 헤더 49px·다른 필드 위치 불변, 목록은 헤더 밖으로 넘치면 안쪽으로 이동.

항목	Figma(확인)	구현
펼친 필드(Variant3)	테두리 #081813, 위쪽만 radius 3, 라벨·값 #FFC600, 선/글꼴/치수 미리보기 #FFC600	같음(data-expanded). 노란 링: 색상·문자·치수는 필드+목록 1px(194 × 198 / 166 × 140), 선스타일은 필드 링 286 × 39 + drop_wrap 링
공통 면	#27241D, 검정 1px(inside), 하단 radius 3	같음(레이어 Dropdown 토큰 재사용, 테두리는 overlay)
색상 목록	192 × 158(사용자 색상 2개 192 × 182), top 38, padding-top 10, gap 10, 가운데 정렬	같음. 브라우저 측정 ByLayer 그룹 (12.5, 10) 167 × 30, 팔레트 (12, 50) 168 × 22, 도구 (15, 82) 162 × 26, 하단 y 118 × 40
ByLayer / ByBlock	각 82.5 × 28, 검정 167 × 30 타일(p 1, radius 4). Default rgba(98,83,61,.3) + inner shadow(ByLayer 2px -2px 4px · -5px 2px 4px, ByBlock -2px -2px 4px · 6px 2px 4px, rgba(0,0,0,.6)), on #62533D + 1px 2px 2px rgba(217,207,187,.25) · -1px -2px 2px rgba(0,0,0,.4), 글자 #D4CBBD	같음. inner shadow는 Figma처럼 글자 위 overlay. aria-pressed, 상호 배타 표시는 colorMode
색상 칩	22 × 22: 검정 20 radius 2 + 18 견본, 1px #C9C9C9, radius 1. 기본 7색 space-between, 사용자 색상 gap 2	같음. 사용자 색상은 줄바꿈, 팔레트+4행(118px) 초과 시 팔레트만 세로 스크롤(구현값). 현재 색과 같은 칩 aria-pressed(시각 표시 없음, Figma 없음)
색상 추출	24 × 24, #C5B19E → #5F554C, 1px 검정 40%, radius 3, drop-shadow 0 2px 2px rgba(0,0,0,.4), 아이콘 18(colorize)	같음(color-pick.svg = Figma 원본). onColorPick 후 닫힘. 실제 추출은 호스트
색상 입력	130 × 26, 칩(p 2) + 값(px 8, 빨강 #E60403). hover 1px rgba(197,177,158,.2), 편집 시 값 영역 검정 + 왼쪽 구분선	같음(SWHeaderInput 사용). r,g,b(0–255) 또는 #rrggbb 검증, 잘못된 값 복원. "컬러칩 클릭"(색 선택 팝업)은 Figma에 "추후 디자인 진행예정" → 미구현
선스타일 목록	drop_wrap 468 × 192(x −92, y 37, 1px #A67D03 inside), drop 466 × 190, 열 182 / 142 / 142(구분선 rgba(197,177,158,.15))	같은 구조. 차이: 선 종류 열은 Noto Sans KR에서 "Continuous"(약 88px)가 잘리지 않도록 최소 182 · 최대 240px로 늘어나 1920에서 473.2 × 192(x −94)
선 종류 행(26:10702)	182 × 30, padding 12, gap 8, 미리보기 70 × 2(#F6F4F2 + 검정 1px outside), Hover #62533D · 선·글자 #FF5C00	같음(1920 측정 미리보기 x+12, y 14). CENTER 22·7·22·7, HIDDEN 33·33(swHeaderLinePatterns), 패턴은 데이터 pattern
가중치 · 스케일	142 × 30 행, ByDefault 값 오른쪽, User·스케일은 빨간 수정 가능 글자(input)	같음. User(editable)와 스케일은 SWHeaderInput(가중치 0 이상, 스케일 0 초과)
문자스타일 목록	164, 행 30(글꼴 16 + 이름 14, gap 12), 하단 40(px 10, 테두리 .25, 왼쪽 정렬)	같음. 차이: 글꼴 칸 38px(Dotum) → Noto "Arial" 42px라 최대 56px까지 내용 폭. Figma Variant3의 상세 버튼은 hover Variant(.25)로 배치되어 있으나 Hover 정책상 Default(.15)로 표시
치수스타일 목록	164, 행 30(미리보기 60 × 15 + 이름, gap 12), 하단 40(px 10, 테두리 .25, 오른쪽 정렬)	같음. 행 미리보기는 Figma 행 자산 menu-dimension-row.svg(#F6F4F2)와 Hover menu-dimension-row-hover.svg(#FF5C00, foreground fill 1곳만 다름)
하단 상세 버튼	btn_상세/색상·선스타일·문자스타일·치수스타일: 아이콘 14, gap 4, padding 5 / 10, rgba(197,177,158,.15), radius 24, 글자 35%	레이어 상세와 같은 스타일. Callback 없으면 Figma 외형 그대로 비활성. 상세 팝업은 미구현

• 선택: 색상·선스타일은 여러 속성을 연속 변경하도록 선택 후에도 열린 상태를 유지하고(구현 결정), 문자·치수스타일은 행 선택 후 닫힙니다. 각 열은 자기 속성의 Callback만 호출합니다(선 종류 → onLineTypeSelect만, 가중치·스케일 유지).
• 현재 항목(active*Id, 미지정 시 이름 일치)은 레이어 목록과 같이 이름만 #FFC600이며 aria-current="true". Hover(배경)와 구분됩니다.
• Hover 정책(2026-10-16 사용자 확정): Dropdown 안 독립 버튼(ByLayer·ByBlock·색상 칩·사용자 색상·색상 추출·… 상세)은 배경·글자·아이콘·테두리·그림자·밝기·크기·위치 변화가 없습니다. Figma Hover Variant(ByLayer 주황 글자, 상세 .25 등)는 비교 자료입니다. 클릭·On·:focus-visible은 유지합니다. 예외: 목록 행(레이어·선 종류·가중치·스케일·문자·치수)의 Figma 행 Hover와 Input의 Figma Hover(수정 가능 표시)는 유지합니다. 문서 Dropdown Hover는 변경하지 않았습니다.
• 동적 데이터: 모든 목록은 id 기반 배열 Props이며 추가·삭제·이름/값 변경·재정렬에 소스 수정이 필요 없습니다. 현재 항목이 삭제되면 선택 표시가 없어지고 필드는 값 Props를 표시합니다. 긴 목록은 Dropdown 안에서만 스크롤합니다(행 240px).
• 좁은 헤더: 목록은 헤더 안쪽으로 이동하고, 헤더 폭 480 미만에서는 선스타일 3열을 세로로 쌓습니다(가로 스크롤·화면 밖 이탈 없음, 필요 시 세로 스크롤).

5.4 반응형 More — 대표 필드 전환 (2026-10-16)

대표 슬롯 = 객체 수정 영역의 첫 필드 칸(레이어 필드 자리). 선택 근거: 1920 배열의 첫 칸이자 모든 Breakpoint에서 끝까지 남는 칸이며, 로고·파일명·창 제어 영역과 분리되어 있습니다.

• 더보기에서 필드 항목(색상·선/문자/치수스타일)을 고르면 그 필드가 대표 칸(order: -1)에 표시되고 Dropdown이 열리며 Focus가 필드로 이동합니다. 레이어는 그동안 더보기(tier slot)로 옮겨지고, 더보기 → 레이어로 복귀합니다. 화면에 보이는 필드는 더보기에서 빠집니다.
• 전환 상태는 SWHeader 내부 UI 상태(data-promoted)이며 데이터와 분리됩니다. 필드 클릭과 같은 on*Open 1회 + on*MenuOpenChange(true)만 호출하고 데이터 Callback은 호출하지 않습니다. 값·다른 필드 상태는 그대로입니다.
• CSS는 해당 필드가 더보기에 있는 폭(선/문자/치수 < 1800, 색상 < 900)에서만 전환을 적용하므로 1920 배열과 기존 Breakpoint는 바뀌지 않습니다. 대표 필드는 남는 폭에 맞춰 줄어들 수 있고(값 말줄임), 객체 수정 영역 밖으로 넘치지 않습니다.
• 검증(16개 폭 1920–390): 검증 기록.

5.5 레이어 상세 버튼 · 수정 가능한 Input (2026-10-16)

• btn_상세/레이어 26:10767(Default 26:10768 / Hover 26:10771): 기존 구현(§5.2)이 Default와 같습니다 — 아이콘 14(layer-detail.svg = Figma ico_layer Default, Hover 아이콘은 opacity .35로 다름), gap 4, padding 5 / 10, rgba(197,177,158,.15), radius 24, 글자 35% + 흰색 0.4px Stroke. Figma 113 × 24는 Dotum 기준이고 Noto Sans KR에서 107.3 × 24(기존 APPROVED DIFFERENCE). Hover(.25 · radius 25)는 사용자 정책상 적용하지 않으며 Storybook에 Figma 참조 이미지로만 둡니다. Callback은 기존 onLayerDetail을 재사용하고 상세 팝업은 만들지 않습니다.
• input 26:11656(Default 26:11657 58 × 20 / hover 26:11659 58 × 24 / on 26:11661 58 × 24) → 공개 SWHeaderInput: padding 2 / 4 / 2 / 6, radius 2, 14px #E60403 + 검정 1.3px Text Stroke. Hover 1px rgba(212,203,189,.25), 편집(Focus) #0F0D0A + 1px .3; 테두리가 padding 1px을 대신해 글자 위치는 그대로입니다. 폭은 값 길이(4.0526 = 58px, 브라우저 측정 일치).
• cursor 26:11664(1 × 14 #E60403, Variant2 투명): 네이티브 caret을 caret-color: #E60403으로 표시하고 깜박임은 브라우저 기본입니다. 가짜 커서를 만들지 않아 커서 위치·선택·IME가 기본 동작합니다. caret 높이는 글꼴 metrics를 따르므로 14px과 정확히 같다고 보증하지 않습니다(NOT VERIFIED).
• 동작: 편집 중 임시값(onValueChange)과 확정값(value)을 분리합니다. Enter·Focus 이동·감싼 Dropdown 닫힘에서 parse(기본: valueType text = 비어 있지 않은 텍스트, number = 소수) 통과 + 변경 시에만 onCommit, 잘못된 값은 확정값으로 복원, Escape는 편집 취소(onCancel, 첫 Escape는 Dropdown을 닫지 않음), IME 조합 중 Enter는 확정하지 않음. readOnly(또는 onCommit 없음)·disabled 지원.

6. Typography

용도	Figma	구현
파일명	Dotum 14, tracking 0.84px	Noto Sans KR 14 / 700 / 0.06em, #F0F7F5
그리기모드·필드 값·토글	Dotum 14(bold 스타일명), tracking 0.56px	Noto Sans KR 14 / 700 / 0.04em, #F6F4F2
필드 라벨·상세보기	Dotum 12, tracking 0.24px	Noto Sans KR 12 / 400 / 0.02em
문자스타일 글꼴명	Dotum 16	Noto Sans KR 16 / 700

• Font Weight는 400 / 700만 사용합니다(브라우저 측정 확인). 600·750·800 없음.
• Figma 글자는 검정·밝은색 두 레이어를 겹친 구조입니다. 사용자 요청에 따라 글자 외곽선·겹침 효과를 넣지 않고 밝은색 한 겹만 사용합니다. (과거 기준 보존. 2026-10-16 후속 요청으로 §6.1 Text Stroke를 복원했습니다.)
• 폰트 파일은 패키지에 포함하지 않습니다. 소비 프로젝트가 Noto Sans KR을 로드하며, 없으면 Malgun Gothic → Apple SD Gothic Neo → sans-serif로 대체됩니다.

6.1 Text Stroke (2026-10-16)

Figma Plugin API로 26:8944와 메뉴 8개·문서·레이어 Component Set의 모든 TEXT 노드(Variant 포함, 숨김 제외)를 조사했습니다. 모든 Stroke는 OUTSIDE입니다.

영역	Figma 구조	구현
14px 값(파일명, 그리기모드, 레이어·색상·선/문자/치수 값, 가중치·스케일 값, 속성Bar·속성창, 문서·레이어 목록 이름, 새 Dropdown 행·ByLayer/ByBlock)	같은 글자 2층: 아래층 검정 Stroke 1.3px, 위층 채움 + 같은 색 Stroke 0.3px	text-shadow 16방향 1.3px 검정 원(--hm-sw-header-text-outline). 자기 색 0.3px Stroke는 2026-10-16 추가 수정으로 제거
16px 글꼴 미리보기(필드·문자스타일 행)	14px과 같음(1.3 + 0.3)	14px과 같음(검정 1.3px만)
12px 라벨(레이어·색상·선스타일·가중치·스케일·문자스타일·치수스타일·상세보기)	채움 + 검정 Stroke 1px	--hm-sw-header-label-outline(1px 검정 16방향), 자기 색 Stroke 없음
수정 가능 글자(색상·가중치·스케일·상세 Input)	아래층 검정 1.3px + 위층 #E60403 0.3px	14px과 같음(SWHeaderInput). 속성창 행 입력은 Default·Hover 외곽선 없음, On(편집·Dropdown)에서만 외곽선(§18)
… 상세 pill(레이어·색상·선/문자/치수)	흰색 + 흰색 Stroke 0.4px, 검정 없음, 35%	미적용: 자기 색 0.4px Stroke 선언과 --hm-sw-header-solid-stroke-width는 2026-10-16 후속 수정으로 제거
+ New / Open	검정 70% + 검정 0.4px	미적용(2026-10-16 추가 요청: 두 버튼은 기존 상태 유지)
더보기 메뉴, 창 이동 Tooltip	Figma에 없음 / Stroke 없음	미적용

• -webkit-text-stroke 단독은 획 중심 기준이라 글자 안쪽을 깎으므로 검정 외곽선은 text-shadow로 그립니다(글자 뒤, 글자 모양을 덮지 않음). Hover·Selected·행 Hover는 채움색만 바뀌고 외곽선은 검정 그대로입니다. Input의 caret·선택 영역은 shadow 위에 그려져 가려지지 않습니다.
• 말줄임 텍스트(overflow)는 overflow: clip + overflow-clip-margin: 2px로 외곽선이 상자 경계에서 잘리지 않게 했습니다(overflow-clip-margin 미지원 Safari 등에서는 가장자리 1px 내외가 잘릴 수 있음 — NOT VERIFIED).
• 글꼴·크기·자간·기준선·Font Weight(400/700)는 바꾸지 않았습니다. Figma는 Dotum Regular + Stroke로 굵기를 표현하고 구현은 Noto Sans KR 700 + 같은 Stroke이므로, 구현 글자가 Figma보다 약간 굵게 보입니다(남은 차이. 조정 변수였던 --hm-sw-header-text-stroke-width는 2026-10-16 추가 수정으로 제거).
• 레이어 Dropdown 이름·레이어 상세에도 같은 기준이 적용됩니다(CSS만, 레이어 컴포넌트·매핑 코드는 변경 없음).

7. Color · Gradient

토큰	값	근거
--hm-sw-header-background	#060606	Figma header frame
--hm-sw-header-text-color	#F6F4F2	Figma --text-brown100
--hm-sw-header-title-color	#F0F7F5	Figma --text-green100
--hm-sw-header-arrow-color	#47AF91	Figma --solid-arrow
--hm-sw-header-selected-color	#FFC600	사용자 확정 선택 상태
--hm-sw-header-focus-color	#F0F7F5	구현값(Figma 없음)
--hm-sw-header-hover	rgba(255,255,255,0.08)	구현값. 현재 최소화·종료 버튼과 더보기 메뉴 항목에만 사용
--hm-sw-header-hover-border-gradient	180deg #A67D03 0% → #F2CC0F 16.41% → #FADD4F 37.19% → #F2CC0F 62.03% → #926E03 87.88%	Figma header/btn_home hover 테두리(26:10655)
--hm-sw-header-document-background	사용자 확정 180deg gradient(§10 B)	사용자 확정 = Figma 동일
--hm-sw-header-object-background	사용자 확정 0deg gradient(§10 A)	사용자 확정 = Figma 동일
--hm-sw-header-property-background	사용자 확정 반투명 검정 gradient(§10 C)	사용자 확정 = Figma 동일
--hm-sw-header-pill-background	rgba(0,0,0,0.8)	Figma Rectangle 6959
--hm-sw-header-stripe-color	rgba(28,106,81,0.32)	Figma 창 이동 줄무늬
--hm-sw-header-window-icon-color	#ADB0AF	Figma 최소화 막대

창 영역(Rectangle 6669)과 인쇄 버튼은 파일명 gradient·테두리를 Figma 그대로 재사용합니다.

8. Border · Radius · Shadow

면	Border	Radius	Shadow
파일명	위·오른쪽·아래 1px #0E4C3A, 왼쪽 0	0	none
객체 수정	1px #135643	6px	none
속성 필드(5개 메뉴, 더보기 버튼)	1px #08251C	3px	0 1px 4px 0 rgba(9,39,30,.7)
창 영역	1px #0E4C3A(4면, pseudo)	0	none
인쇄·가이드 pill	1px #092920	4px	inset 0 2px 2px rgba(0,0,0,.25)

9. 아이콘 · Assets

Figma MCP에서 내려받은 원본 SVG 13개(종료 hover 포함)와 Hover 색 Variant 2개, 총 15개를 packages/sw/src/assets/에 두고 build 시 data URI로 dist/index.js에 포함합니다. 임시 Figma URL 참조는 없습니다(dist 검색 0건). 다색 SVG 원본을 수정·재작성하지 않았습니다. Hover 색 Variant(print-hover.svg, popup-guide-hover.svg)는 원본을 복사해 fill="#B6D0C9" 1곳만 #FFC600으로 바꾼 파일이며 path·mask·filter·gradient는 원본과 같습니다(§11.2).

파일	Figma 요소	렌더링 크기
home-bg.svg	Rectangle 7508 홈 배경(Default)	92 × 72
home-bg-hover.svg	Rectangle 7509 홈 배경(hover, 노란 gradient 테두리)	92 × 72
document-icon.svg	icon_dualmonitor 문서 Dropdown 기본 아이콘(29 × 12 영역, 그림자 포함)	37 × 19(위치 −4, −3)
layer-union.svg, layer-ellipse.svg	레이어 아이콘 1(합성)	14 × 18, 14 × 14
layer-state-b.svg, layer-state-a.svg	레이어 아이콘 2, 3 = icon_눈꽃 / icon_자물쇠 Default(컬러)	20 × 20
layer-ellipse-off.svg	icon_전구 Variant3/4 회색 전구알(26:10833, union·막대는 Default와 같음)	14 × 14
layer-freeze-hover.svg, layer-freeze-off.svg, layer-freeze-off-hover.svg	icon_눈꽃 Variant2 / 3 / 4(26:10870 / 26:10884 / 26:10898)	20 × 20
layer-lock-hover.svg, layer-lock-off.svg, layer-lock-off-hover.svg	icon_자물쇠 Variant2 / 3 / 4(26:10919 / 26:10925 / 26:10931)	20 × 20
layer-detail.svg	ico_layer 레이어 상세 아이콘(26:1474)	14 × 14

레이어 Dropdown(§5.2) 자산 8개는 2026-10-16 Figma MCP에서 내려받은 원본입니다. 기존 layer-union/ellipse/state-a/state-b는 Figma 원본과 mask id 외 동일함을 비교해 그대로 재사용했습니다. Hover SVG는 Default 아이콘 + 검정 25% 20 × 20 타일(radius 2)이며 그 외 차이가 없음을 확인했습니다. | menu-dimension-ico.svg | 치수 아이콘 | 60 × 15 | | menu-dimension-row.svg, menu-dimension-row-hover.svg | 치수스타일 Dropdown 행 미리보기 Default(#F6F4F2) / Hover(#FF5C00)(26:10729, 2026-10-16 Figma 원본, foreground fill 1곳만 다름) | 60 × 15 | | color-pick.svg | btn_colorize 아이콘 colorize(26:11303, 2026-10-16 Figma 원본) | 18 × 18 | | print.svg | 인쇄 | 24 × 22.9(버튼 inset 20.1/20/19.62%) | | print-hover.svg | 인쇄 Hover(원본의 #B6D0C9 → #FFC600만 변경, Figma Variant 없음) | 24 × 22.9(같은 위치) | | popup-guide.svg | 꾸러미ver2/팝업가이드 | 40 × 38 | | popup-guide-hover.svg | 팝업 가이드 Hover(원본의 #B6D0C9 → #FFC600만 변경, Figma Variant 없음) | 40 × 38(같은 위치) | | window-motion.svg | 창 이동 아이콘 | 32 × 30 | | close.svg | header/btn_종료 Default(26:12162) | 32 × 48 | | close-hover.svg | header/btn_종료 Variant2 = hover(26:12166): #E40000 32 × 48 + 흰 X, X path는 Default와 같음 | 32 × 48 |

파일명 화살표(Figma Polygon 352, 단색)는 선택 시 색을 바꾸기 위해 SVG 대신 CSS 삼각형(7 × 4)으로 그립니다. 기존 뷰어의 임시 HM 텍스트 로고는 사용하지 않았습니다.

9.1 로고 (확정 디자인 아님)

SW Header는 여러 SW 프로그램이 공통으로 사용합니다. 따라서 로고 영역의 배치는 공통 디자인이고, 로고 이미지 자체는 사용하는 SW 프로그램이 결정하는 항목입니다. 패키지는 특정 제품 로고·브랜드명·파일 경로를 포함하지 않습니다.

항목	기준	구분
로고 영역	홈 버튼(80 × 48) 안 x 12 / y 16, 32 × 17 (Figma bi_egbim frame). 토큰 --hm-sw-header-logo-width / -logo-height	공통 디자인(확정)
홈 배경	home-bg.svg 사선 녹색 면 + 0–65px 파일명 gradient 바탕	공통 디자인(확정)
로고 이미지	logoSrc(이미지 URL) 또는 logo(React 요소)로 각 프로그램이 전달. 비율이 달라도 영역 안에 contain으로 맞추고 넘치지 않음	프로그램별 결정
로고 미전달	로고를 그리지 않음. 홈 배경·파일명·객체 수정 영역 위치는 그대로	공통 동작
접근성	logoAlt 전달 시 홈 버튼 이름 " 홈", 없으면 "홈"	공통 동작

• Figma 26:8944의 이지빔 로고(bi_egbim)는 기준 화면의 예시이며 공통 컴포넌트에 넣지 않습니다(2026-10-16 사용자 지시로 패키지에서 제거).
• Storybook 기본 화면의 로고는 임시 자산 src/sw/assets/sw-header-logo-placeholder.svg(브랜드명 없는 점선 사각형 도형)입니다. Storybook 전용 파일이며 패키지에 포함되지 않고, 어떤 제품의 공식 로고도 아닙니다.

10. 사용자 확정 CSS

신규 패키지에서는 기존 뷰어 class 대신 SW 전용 class와 토큰을 씁니다. 값은 그대로입니다.

기존 뷰어 class	신규 class	토큰
A .cad-toolbar-object-area	.hm-sw-header__object-area	--hm-sw-header-object-background, -object-border-color, -object-radius
B .cad-toolbar-document	.hm-sw-header__document	--hm-sw-header-document-background, -document-border-color
C .cad-toolbar-property-field	.hm-sw-header__field	--hm-sw-header-property-background, -property-border-color, -property-radius, -property-shadow

/* A. 객체 수정 */
border-radius: 6px; border: 1px solid #135643; box-shadow: none;
background: linear-gradient(0deg, #144838 0%, #1A4536 6%, #1F4134 10%, #10392D 18%, #296B55 72%, #1F5A47 83%, #144838 92%, #124133 100%);
/* B. 파일명 */
border-radius: 0; border-top/right/bottom: 1px solid #0E4C3A; border-left: 0; box-shadow: none;
background: linear-gradient(180deg, #081813 0%, #09271E 8.69%, #0B3227 25.43%, #0E3D2F 51.25%, #0B3227 80.03%, #0A2B21 89.76%, #081813 100%);
/* C. 속성 입력 */
border-radius: 3px; border: 1px solid #08251C; box-shadow: 0 1px 4px 0 rgba(9, 39, 30, 0.70);
background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 26.41%, rgba(0,0,0,.40) 70%, rgba(0,0,0,.45) 100%);

세 값은 Figma get_design_context의 해당 레이어 값과도 일치합니다(Figma 26.407% → 확정 26.41%). C의 반투명 검정은 A 위에서 합성되는 것이 의도입니다.

11. 선택 · Focus · Hover · Disabled

상태	표현	근거
선택(activeMenu, propertyBarOpen, propertyPanelOpen, 더보기 열림)	텍스트·단색 아이콘(파일명 화살표, 더보기 점)만 #FFC600. 배경·테두리·그림자 변화 없음	사용자 확정
Focus(키보드)	2px #F0F7F5 outline, offset −2px. 선택과 별도	정책(선택과 구분) + 구현값
Hover	노란 gradient 테두리(§11.1) 유지. 5개 필드는 텍스트·지정 스타일 미리보기도 #FFC600(§11.5). 배경·크기·padding·radius·그림자 변화 없음. 인쇄·팝업 가이드와 최소화·종료는 기존 §11.2 유지	Figma 홈 버튼 hover(26:10655) + 사용자 추가 §11.5, Figma 26:12156 / 26:12161
Selected + Hover	선택 글자색 #FFC600 유지 + Hover 테두리. 두 표현이 다른 속성이라 함께 보임	정의
Focus + Hover	Focus 윤곽선(2px #F0F7F5)이 Hover 테두리 위에 그려짐	정의
Disabled(disabled)	메뉴·속성·인쇄/가이드 opacity .4, 커서 기본, Hover 테두리·아이콘 색 변화 없음. 창 제어는 유지	구현값

레이어 상태 아이콘 3개는 원본 다색 SVG(노랑 전구·하늘색·자물쇠)로, 선택 시 #FFC600으로 바꾸지 않습니다. 레이어 상태 의미를 보존하기 위한 의도적 차이입니다(§15).

11.1 Hover 테두리 (공통 상호작용 규칙)

Figma에서 확인한 것(header/btn_home, node 26:10655, Variant Default / hover, 80 × 48): Hover는 배경 SVG의 1px 테두리만 녹색 gradient에서 노란 gradient로 바꿉니다. 채움·그림자·크기·로고 위치는 Default와 같습니다(두 SVG를 비교해 확인). 방향은 위 → 아래(y1 12 → y2 60)이며 stop은 0% #A67D03, 16.41% #F2CC0F, 37.19% #FADD4F, 62.03% #F2CC0F, 87.88% #926E03(이후 100%까지 같은 색)입니다.

구현 적용 범위(Figma 홈 버튼 규칙을 다른 버튼에 확장한 구현 결정):

대상	방식
홈	Figma hover SVG(home-bg-hover.svg)를 Default 위에 겹쳐 사선 외곽선에 정확히 표시
레이어·색상·선스타일·문자스타일·치수스타일, 더보기 버튼	1px 테두리 위치, radius 3px
인쇄	1px 테두리 위치, radius 2px. 아이콘 색 변화는 §11.2
팝업 가이드	SVG 안의 1px 외곽선 위치, radius 2px. 아이콘 색 변화는 §11.2

파일명(문서 Dropdown 버튼)은 예외입니다(2026-10-16 사용자 지시): Hover 시 노란 테두리 없이 **파일명 글자만 #FFC600**으로 바꾸고, 녹색 테두리·배경 gradient·초록 화살표는 그대로 둡니다. Dropdown이 열린 동안에는 글자 #FFC600과 노란 위쪽 화살표를 유지하고, 닫힌 뒤 Hover가 풀리면 Default로 돌아갑니다. 키보드 Focus 윤곽선은 별도로 유지합니다.

문서 Dropdown 안의 목록 항목과 + New / Open도 노란 테두리를 쓰지 않고 각자의 Figma hover를 따릅니다(§5.1): 목록 항목은 검정 40% 배경, + New / Open은 배경 20% → 30%·글자 70% → 100%. 속성Bar · 속성창도 예외입니다(2026-10-16 사용자 지시): Hover 시 **글자만 #FFC600**이고 노란 테두리·배경·그림자가 없습니다. 선택(propertyBarOpen / propertyPanelOpen)도 글자 #FFC600이며 선택된 토글에 Hover해도 테두리가 생기지 않습니다. 위의 '상세보기' 안내 글자는 바뀌지 않고, 키보드 Focus 윤곽선은 그대로입니다.

즉 파일명·속성Bar·속성창 Hover(글자 노랑) · 목록 항목 Hover(검정 40% 배경) · 하단 버튼 Hover(배경·글자 진하게)는 서로 다른 정책이며, 노란 gradient 테두리는 위 표의 버튼(홈, 5개 속성 필드, 더보기, 인쇄, 팝업 가이드)에만 적용합니다.

제외: 그리기모드(클릭 대상이 아닌 텍스트), 창 이동(드래그 영역), 최소화·종료(외곽선이 없는 창 제어 버튼, Figma 전용 hover를 따름 — §11.2), 더보기 메뉴 안 항목(팝업 목록, 기존 배경 Hover 유지), 비활성 버튼.

구현: 토큰 --hm-sw-header-hover-border-gradient, --hm-sw-header-hover-border-width(1px). 대상 버튼의 ::after가 기존 테두리 위치에 gradient 링(mask)을 그리며, 레이아웃·클릭 영역은 바뀌지 않습니다. gradient는 각 버튼 높이 기준 위 → 아래로 적용됩니다. 이전 구현값(필드·토글 배경 겹침, 인쇄·가이드 brightness)은 Figma 기준에 맞춰 제거했습니다.

11.2 창 제어 · 바로가기 아이콘 Hover (2026-10-16)

Figma에서 확인한 것(get_design_context / get_metadata):

버튼	Figma	Default	Hover(Variant2)
최소화	header/btn_최소최대화 26:12156(Default 26:12157, Variant2 26:12159)	32 × 48, 배경 없음, 막대 10 × 2 #ADB0AF	배경 rgba(0,0,0,.2), 막대 #FFFFFF(크기·위치 같음)
종료	header/btn_종료 26:12161(Default 26:12162, Variant2 26:12166)	32 × 48 SVG, X #ADB0AF	같은 SVG 구조에 #E40000 32 × 48 사각형 + X white(X path 동일)

Figma 헤더(26:8944)에서 최소화·종료 frame(Frame 427319960)은 창 영역 배경 Rectangle 6669(1px 테두리)보다 위에 있습니다. 그래서 Hover 배경은 창 영역 테두리 위까지 32 × 48 전체를 덮습니다. 구현은 .hm-sw-header__window-buttons를 position: relative로 두어 창 영역 ::before 테두리 위에 그립니다. Default는 버튼이 투명하므로 이전과 같습니다.

구현:

버튼	방식
최소화	:hover 배경 --hm-sw-header-window-button-hover-background(rgba(0,0,0,.2)), 막대 --hm-sw-header-window-icon-hover-color(#FFF)
종료	Figma hover SVG(close-hover.svg)를 Default SVG와 같은 칸(grid-area: 1 / 1)에 두고 Hover 때만 보이게 전환. Figma X 형태 그대로
인쇄 · 팝업 가이드	기존 노란 gradient 테두리(§11.1) 유지 + Hover 때 *-hover.svg로 전환. 아이콘의 #B6D0C9 채움만 #FFC600이고 검정 외곽선(mask)·그림자(filter)·팝업 가이드 녹색 gradient 타일·테두리는 그대로

• 전환은 .hm-sw-header__icon / .hm-sw-header__icon-hover 두 <img>의 visibility로 합니다. 같은 위치·크기라 레이아웃·클릭 영역이 바뀌지 않고, 두 이미지가 겹쳐 그려지지 않아 그림자가 두 번 칠해지지 않습니다.
• 외부 <img> SVG는 CSS로 특정 fill만 바꿀 수 없어 로컬 SVG Variant를 둡니다. 전체 SVG에 CSS filter를 쓰지 않습니다.
• 최소화·종료에는 노란 테두리·그림자·크기 변화가 없습니다. 비활성(disabled) 인쇄·팝업 가이드는 아이콘 색이 바뀌지 않습니다. 키보드 Focus 윤곽선은 그대로이며 Focus만으로는 Hover 표현을 하지 않습니다(§11.1과 같음).
• 종료는 onClose만 호출합니다. 실제 창 닫기는 호스트가 구현하며 Storybook은 창을 닫지 않습니다.
• 인쇄 · 팝업 가이드 Hover 아이콘 색은 Figma Variant가 없는 사용자 지시(2026-10-16) 값입니다.

11.3 창 이동 Hover Motion — Figma 26:10220 (2026-10-16)

GIF 전달 전 구현의 보존 기록입니다. 현재 움직임·반복·좌표는 아래 §11.4를 우선합니다. Figma 원본의 자산·Tooltip 크기와 색상 근거는 계속 유효합니다.

기준: 창이동 motion. 기존 Default SVG와 div / onPointerDown 드래그 계약은 유지합니다. 아래 좌표는 88 × 48px 창 이동 영역의 왼쪽 위 기준이며 SVG stroke의 바깥 여백과 구분합니다.

• Default 26:10221: 아이콘 32 × 30px, (28, 13).
• Hover 26:10258: 창 24 × 18.857px, (32, 15); 커서의 회전 외곽 박스 15.106 × 15.568px, (52, 13); Tooltip (68, 13).
• Hover2 26:10295: 창 (59, 12); 커서 (72, 10); Tooltip (89, 11). 창·커서 크기는 Hover와 같습니다.
• Tooltip 26:215: 창 이동, 45 × 17px, 검정 80% 배경, 흰색 12px/400 글자, radius 2px, padding 2px 6px. 색상은 --hm-sw-header-tooltip-background / --hm-sw-header-tooltip-color입니다. 글꼴은 기존 SW의 Noto Sans KR 정책을 따릅니다(Figma는 Inter).
• 기존 window-motion.svg는 유지하고, Hover용 window-motion-window.svg(28 × 22.8574), window-motion-cursor.svg(13.0291 × 16.7588)를 사용합니다. 2026-10-16 원본 비교에서 Hover 자산 두 개는 일치했고 Default는 SVG 마스크 식별자만 달랐습니다.

Figma Prototype reactions를 직접 확인한 전환:

1. Default → Hover: ON_HOVER, SMART_ANIMATE, GENTLE, 1.0220937728881836초.
2. Hover → Hover2: AFTER_TIMEOUT 0.001초, SMART_ANIMATE, QUICK, 0.744255542755127초.
3. Hover2 → Default: AFTER_TIMEOUT 0.001초, DISSOLVE, BOUNCY, 0.9582165479660034초.

구현은 약 2.7265658초의 CSS Keyframes 4개를 사용합니다. 포인터 진입당 1회 재생하고, Hover를 유지하면 Default에서 멈춥니다. 포인터가 나가면 즉시 Default로 복귀하며 재진입 시 처음부터 시작합니다. Figma에 전환 고리는 있으나 Default로 돌아온 뒤 포인터 유지 중 자동 재시작하는지는 Prototype player에서 실재생하지 않았으므로 NOT VERIFIED입니다. 현재 1회 정책은 변경하지 않았습니다.

GENTLE / QUICK / BOUNCY는 기존 코드의 spring 표본을 CSS linear()로 근사한 값입니다. 키프레임에 timing function을 직접 선언하며 QUICK의 overshoot와 DISSOLVE의 opacity 혼합을 유지합니다. BOUNCY는 opacity 범위에 맞춘 단조 곡선입니다. Figma API는 preset 이름과 시간을 반환했지만 수치 곡선은 반환하지 않았으므로 Figma player와 중간 프레임이 완전히 같다고 보증하지 않습니다. linear() 미지원 브라우저의 선형 fallback은 실기기 NOT VERIFIED입니다.

드래그 영역은 기존 role="presentation" div와 onWindowMoveStart(event)를 유지합니다. 모든 장식 자식과 Tooltip은 pointer-events: none으로 포인터를 가로채지 않습니다. Tooltip은 Figma 좌표대로 영역 밖으로 나와 최소화와 종료 왼쪽 일부에 시각적으로 겹칩니다. 이를 겹침 없음으로 판정하지 않습니다. 브라우저 hit test와 버튼 Callback은 통과했으며 실제 네이티브 창 이동·최소화·종료는 호스트 검증이 필요합니다.

반응형은 기존 container query를 유지합니다. 헤더 폭 1080px 이상은 88px 영역과 전체 모션, 640–1079px는 24px 영역에서 그림을 숨기고 정적 Tooltip만 (영역 폭 + 1px, 11px)에 표시, 640px 미만은 영역 전체를 숨깁니다. 헤더 높이는 49px입니다.

prefers-reduced-motion: reduce에서는 4개 애니메이션을 끄고 기본 아이콘을 유지하며 Hover 동안 정적 Tooltip을 표시합니다. 24px 단계의 아이콘 숨김 규칙은 그대로입니다. 2026-10-16 검증에서 기존 > * 해제 규칙의 낮은 specificity 때문에 애니메이션이 유지되는 오류를 발견해, 레이어별 Hover 선택자와 동일 specificity인 :is(...) 선택자로 수정했습니다. 재생 도중 reduce 전환도 즉시 정지합니다.

창 이동 div 자체는 기존대로 Tab 대상이 아니며 Focus Tooltip이나 키보드 창 이동을 제공하지 않습니다. 최소화·종료의 접근성 이름, Tab 이동과 Focus 윤곽선은 유지합니다. 키보드 창 이동 대안과 실제 보조기술 검증은 호스트 과제이며 접근성 전체 PASS를 뜻하지 않습니다.

브라우저 검증·빌드·Guard 한계·기존 작업 보존 근거는 최종 검증 기록에 별도로 남겼습니다. 아래 기존 반응형 검증 기록은 당시 결과로 보존합니다.

11.4 현재 창 이동 Motion — ani_hover_move.gif 우선 (2026-10-16)

아래는 원본 GIF의 경로·1640ms 분석 기록입니다. 후속 사용자 요청으로 현재 시간만 1400ms로 단축했으며 현재 시간과 필드 Hover 정책은 §11.5를 우선합니다. 경로·자산 근거는 계속 유효합니다.

사용자 제공 D:\디자인시스템\ani_hover_move.gif를 실제 움직임의 최우선 기준으로 적용했습니다. 원본은 640 × 192px, 41프레임 × 40ms = 1640ms, loop=0(무한 반복)입니다. SHA-256: c7d22819cfb8f8cd8593684ce1e5c676a545fa09fa9fc7573d59f0f237d28026. GIF의 높이 192 / Header bar 높이 48 = 4배이며, 창의 녹색 부분 폭 96 / 4 = 기존 SVG의 녹색 폭 24px도 일치합니다. 이 비율로 상대 이동량을 환산하고 GIF 자체는 제품 자산으로 넣지 않았습니다.

현재 우선순위는 움직임·등장 순서·시간·유지·반복 = GIF, 88 × 48 영역·녹색 줄무늬·SVG·Tooltip 규격 = SW/Figma입니다. 과거 §11.3의 2.727초/1회/Smart Animate spring은 현재 동작이 아닙니다.

1. Hover 전: 기존 window-motion.svg 32 × 30px, (28, 13). 변경하지 않았습니다.
2. 0–520ms: 같은 창·커서를 분리 SVG로 표시합니다. 창은 제자리, 커서는 오른쪽 아래에서 위로 12.5px 상승하며 왼쪽 0.75px의 작은 이동이 있습니다. 창 크기를 줄이거나 커서를 위에서 fade-in하지 않습니다.
3. 520ms: 창 이동 글자가 등장합니다. GIF 13번 프레임과 같은 시점이며 이전에는 숨깁니다.
4. 약 600–1040ms: 창·커서·문구가 오른쪽 위로 함께 이동합니다. 창은 시작점 대비 +28 / −4.5px, 커서는 최초 위치 대비 +27.25 / −17px입니다. 40ms별 표본 사이를 CSS로 보간해 GIF의 가속·감속을 유지하고 추가 spring overshoot는 넣지 않습니다.
5. 1040–1640ms: 끝 자세를 600ms 유지합니다. 1640ms에서 즉시 첫 프레임으로 돌아가 Hover 동안 반복합니다. GIF에 없는 복귀 dissolve는 추가하지 않았습니다.
6. Hover 해제: 애니메이션 제거, 기존 Default SVG로 즉시 복귀. 재진입 시 새 사이클을 시작합니다.

분리된 창은 원본 window-motion-window.svg의 28 × 22.8574px 크기로 (28, 13)에 표시합니다. 커서의 회전 wrapper는 15.106 × 15.568px, 시작 (44.25, 26.25)이며 SVG 원본 13.0291 × 16.7588px와 −40° 회전은 유지합니다. Tooltip 시작 box는 (60.75, 14.5), 끝 box는 (88.75, 10)입니다. wrapper/box 좌표와 색이 있는 실제 glyph 좌표는 구분합니다.

Tooltip의 45 × 17px, 검정 80% 배경, 흰색 12px/400 글자, radius 2px, padding 2px 6px는 유지합니다. Figma 선언에 맞춰 Tooltip만 Inter를 우선하고 기존 SW 글꼴을 fallback으로 사용합니다. 새 폰트 파일이나 의존성은 추가하지 않았으며, 한글 또는 Inter 미설치 환경에서는 기존 Noto Sans KR 등이 표시됩니다. 문구와 커서 사이의 보이는 간격은 GIF의 약 9px를 기준으로 맞췄습니다.

기존 div / role="presentation" / onPointerDown={onWindowMoveStart}와 공개 Props는 변경하지 않았습니다. 장식의 pointer-events: none도 유지합니다. 포인터를 누르는 :active 동안 3개 CSS 애니메이션을 일시정지하고 Tooltip을 숨기며, 새로운 포인터 캡처·전역 이벤트·preventDefault는 추가하지 않습니다. 포인터 캡처 및 실제 창 이동은 기존대로 호스트 책임입니다.

1080px 미만 24px 단계는 그림을 숨기고 정적 Tooltip만, 640px 미만은 영역 전체를 숨기는 기존 정책을 유지합니다. Reduced Motion에서는 3개 애니메이션을 끄고 기존 Default SVG와 정적 Tooltip을 표시합니다. 재생 중 reduce 전환도 적용됩니다. 창 이동의 기존 키보드 미지원과 실제 호스트 통합 검증 한계는 §11.3과 같습니다.

프레임별 비교·최종 빌드·반응형·Drag·보존 근거는 GIF 기준 검증 기록에 기록합니다. 이전 검증 기록은 당시 상태로 보존합니다.

11.5 현재 추가 기준 — 1400ms 및 그룹 필드 Hover (2026-10-16)

후속 사용자 요청으로 창 이동의 전체 주기를 1640 → 1400ms로 단축했습니다. 세 애니메이션의 duration만 1.4초로 바꿨고 Keyframes의 모든 좌표·백분율·보간은 동일합니다. 시간 비율은 1400/1640(35/41), 주기 단축은 약 14.63%이며 재생 속도 기준으로는 약 17.14% 빠릅니다. 원본 GIF와 다른 사용자 승인 시간 변경입니다.

• 문구 등장: 520 → 약 443.90ms.
• 이동 완료: 1040 → 약 887.80ms.
• 끝 자세 유지: 600 → 약 512.20ms.
• 반복: 1640 → 1400ms. 오른쪽 28px / 위쪽 4.5px, 커서 상승과 상대 경로는 그대로입니다.
• 기존 SVG·줄무늬·Tooltip 디자인·Hover 해제·Drag 중 일시정지·Reduced Motion·88px/24px/숨김·49px 높이를 유지합니다. 패키지는 호스트의 Pointer Capture를 방해하거나 별도 캡처를 추가하지 않습니다.

그룹 필드(SWHeaderLayerControl, SWHeaderColorControl, SWHeaderLineStyle, SWHeaderTextStyle, SWHeaderDimensionStyle)는 각 버튼 전체를 Hover하면 내부 라벨·값을 --hm-sw-header-selected-color(기본 #FFC600)로 표시합니다. 선스타일의 가중치·스케일과 문자스타일의 폰트 이름 미리보기도 포함합니다. 공용 컴포넌트의 실제 동작이므로 Full Header와 Composed Controls에 같은 규칙을 적용하며 Story 전용 색 흉내는 사용하지 않습니다.

기존 노란 Gradient Hover Border는 유지합니다. 선스타일의 5개 미리보기 조각은 흰색 채움만 노란색으로 바꾸며 검정 1px border·형태·간격은 그대로입니다. 문자 미리보기는 SVG가 아닌 기존 폰트 이름 텍스트이며 색만 바꿉니다. 원래 별도 검정 Stroke/그림자가 없으므로 새 외곽선을 추가하지 않습니다.

치수 미리보기는 기존 menu-dimension-ico.svg를 보존하고 menu-dimension-ico-hover.svg를 추가합니다. 실제 foreground path의 fill="white" 1곳만 #FFC600으로 바꿉니다. mask용 흰색 rect, 검정 외곽선 path, mask 참조·좌표·60 × 15px 크기는 유지합니다. 두 이미지는 같은 60 × 15px wrapper 안에서 visibility만 전환하며 CSS filter는 사용하지 않습니다.

색상 견본의 실제 swatch, 흰색/검정 chip border, 레이어 상태 SVG·막대 색은 바꾸지 않습니다. Hover 이탈 시 원래 색으로 돌아가고 Selected의 기존 텍스트 색은 유지합니다. Disabled는 새 Hover 텍스트·미리보기·Border 효과를 적용하지 않으며 Disabled+Selected도 기존 색을 유지합니다. 미리보기의 선택 단독 상태를 새로 확장하지 않습니다.

상세보기는 제외합니다. 속성Bar / 속성창은 기존처럼 해당 버튼의 텍스트만 노란색이고, 상세보기 caption·검정 divider·배경·그림자는 유지하며 노란 Hover Border를 추가하지 않습니다. 홈·문서 Dropdown·인쇄/가이드·최소화/종료는 이번 추가 기준으로 변경하지 않습니다.

Composed Controls의 기존 레이어·색상·상세보기 예제는 보존하고, 기존 공개 선/문자/치수 컴포넌트 예제와 5개 필드의 고정 Hover 비교를 추가했습니다. 검증과 파일별 근거는 속도·Composed Hover 검증 기록에 남깁니다.

12. 반응형

2026-10-16 사용자 지시로 기존 1180 / 900 / 560 기준 대신 측정값으로 단계를 다시 정했습니다. 모든 단계를 헤더 폭 기준 container query(container: hm-sw-header / inline-size)로 처리하며 헤더 가로 스크롤은 만들지 않습니다.

원칙: 5개 필드는 어느 폭에서도 Figma 폭(234 / 192 / 284 / 164 / 164)을 유지합니다. Noto Sans KR로 측정한 필드 내용 폭이 231 / 168 / 278 / 142 / 163px로 Figma 폭과 거의 같아, 필드를 줄이면 값만 잘리기 때문입니다. 공간이 부족하면 기능을 더보기로 옮기고, 문서명만 말줄임합니다.

필요 폭 = 고정부(홈 63 + 간격 6 + 창 영역) + 객체 수정 면 + 문서명.

헤더 폭	동작	객체 수정 면 / 창 영역	문서명 폭
≥ 1800	Figma 기본 레이아웃(1920과 동일 구성)	1301 / 240	1920: 310 → 1800: 190
< 1800	선·문자·치수 스타일 → 더보기	719 / 240	120–310
< 1180	그리기모드 라벨 숨김	633 / 240	120–310
< 1080	속성Bar·속성창 → 더보기, 창 이동 88 → 24px	480 / 176	120–310
< 900	색상 → 더보기	284 / 176	96–310
< 640	인쇄·팝업 가이드 → 더보기, 창 이동 숨김	284 / 64	96–310
< 520	레이어 상태 아이콘 숨김, 레이어 필드만 줄어들며 레이어명 말줄임	—	96

• 1800 기준: 5개 필드를 모두 표시할 때 문서명이 190px 이상 남는 최소 폭입니다(1610 + 190). 1770은 문서명 160px로 표시는 가능하지만 사용자 제안(약 1800)과 문서명 가독성을 고려해 1800을 채택했습니다.
• 1180 / 1080 / 900 / 640은 각 단계에서 문서명이 최소 폭(120 또는 96px)에 닿기 직전의 폭입니다. 기존 1180 기준은 "그리기모드 라벨 숨김"으로, 900 기준은 "색상 이동"으로 역할을 바꿨습니다. 기존 560 화면 폭 규칙은 헤더 폭 640 규칙으로 대체했습니다(헤더 폭 ≤ 화면 폭이므로 화면 560 미만에서도 항상 적용됨). 원 규칙의 "파일 열기·전체 보기 글자 숨김"은 Figma 헤더에 해당 도구가 없어 적용 대상이 없습니다.
• 문서명 폭은 clamp(최소, 100cqw − 나머지 고정폭, 310px)입니다. 문서명은 말줄임, 글자 크기는 줄이지 않습니다.
• 더보기 메뉴는 옮겨진 기능만 표시하며, 선택(#FFC600)·체크 상태와 Props·Callback 동작은 헤더에 있을 때와 같습니다.

검증(2026-10-16, Storybook SW / Header / Responsive, 18개 폭): 1920 / 1800 / 1799 / 1770 / 1600 / 1440 / 1280 / 1180 / 1179 / 1080 / 1079 / 900 / 899 / 768 / 640 / 639 / 560 / 390에서 헤더 가로 스크롤 0, 요소 겹침 0, 객체 수정 면 밖으로 넘침 0. 필드 값·라벨 잘림은 390px의 레이어명 1건뿐입니다. 각 폭에서 더보기 항목 선택 시 Callback이 호출되고, 선택 상태가 반영되며, 메뉴가 닫히는 것을 확인했습니다(속성Bar·속성창 체크 전환, 인쇄·팝업 가이드 Callback 포함). 실제 Viewport 1799 / 1079 / 390에서도 같은 결과입니다.

12.1 실측 More — 실제 사용 가능한 공간 기준 (2026-10-19)

2026-10-19 사용자 요청("고정된 화면 너비만 기준으로 처리하지 말고 실제 사용 가능한 공간을 기준으로")에 따라 위 Breakpoint 위에 실측 단계를 더했습니다. Breakpoint 표는 그대로이며, 기본 구성(추가 요소 없음)의 배치는 바뀌지 않습니다.

• 측정 대상: 객체 수정 영역의 in-flow 내용. 측정하는 동안(data-measuring, 같은 Layout Effect 안에서 설정·해제, 그려지지 않음) 영역 안 요소는 줄거나 늘지 않고 auto margin도 0이므로 실제로 필요한 폭이 드러납니다. 구성형(controls) 파일명은 기본 디자인의 최소 파일명 폭(96px)으로 계산합니다.
• 이동 순서: Breakpoint 단계 순서 그대로 선·문자·치수스타일 → 그리기모드(라벨만 숨김) → 속성 블록(상세보기·속성Bar·속성창, 기본 구성에서는 한 덩어리) → 색상 → 인쇄·K(구성형만, 기본 구성에서는 창 영역이라 Breakpoint 유지). 같은 단계는 오른쪽부터. 대표 칸(레이어 또는 More에서 고른 필드)은 이동하지 않습니다. 로고 오른쪽 Open(documentOpenPlacement="header")은 가장 먼저 옮겨지고 가장 늦게 돌아옵니다.
• 복귀: 옮긴 직후 그 이동으로 생긴 공간(More 버튼 등장·여백 변화 포함)을 한 번 측정해 두고, 남은 공간이 그만큼 생기면 역순으로 원래 자리에 돌아옵니다(경계에서 깜박임 없음).
• 메뉴를 열고 닫아도 위치·폭은 바뀌지 않습니다. Dropdown·로고 메뉴·More 목록·Tooltip은 positioned 층이라 측정에서 제외됩니다.
• 한계: leading·tools처럼 호스트가 넣은 요소는 More로 옮기지 않습니다(More 항목이 없음). 그 요소만으로도 공간이 부족하면 기존처럼 대표 필드가 줄어듭니다.

상세 검증: 홈 메뉴 통합·실측 More 보고.

13. 컴포넌트 분리 기준

• 공개: SWHeader(전체), SWHeaderHome, SWHeaderDocumentTitle, SWHeaderLayerControl, SWHeaderLayerMenu(레이어 필드 + Dropdown, §5.2), SWHeaderColorMenu · SWHeaderLineStyleMenu · SWHeaderTextStyleMenu · SWHeaderDimensionStyleMenu(§5.3), SWHeaderLinePreview · swHeaderLinePatterns, SWHeaderInput · parseSWHeaderColor · parseSWHeaderNumber(§5.5), SWHeaderColorControl, SWHeaderLineStyle, SWHeaderTextStyle, SWHeaderDimensionStyle, SWHeaderProperties, SWHeaderActions, SWHeaderWindowControls, SWTheme(단독 사용 시 토큰 범위).
• 내부: SWHeaderField/SWHeaderFieldText(5개 메뉴 공통 면·라벨/값), SWHeaderMore(더보기), SWHeaderDocumentItem(문서 Dropdown 행: 선택 버튼 + 문서 닫기 버튼). 문서 Dropdown은 SWHeaderDocumentTitle이 소유하며 documents·Callback으로 다른 SW에서도 그대로 재사용합니다. 같은 필드 스타일을 메뉴별로 중복 구현하지 않습니다.
• 데이터는 Props, 사용자 동작은 Callback입니다. 파일 열기·창 이동·최소화·종료·도면 처리는 패키지 밖(호스트)에서 구현합니다.

14. SW 전용 토큰 목록

.hm-sw-header와 .hm-sw-theme(= <SWTheme>)에 정의합니다. @hm-design/ui 토큰을 참조·변경하지 않습니다.

토큰	기본값	사용처
--hm-sw-header-height / -bar-height / -field-height	49px / 48px / 38px	헤더 / 면 / 필드
--hm-sw-header-logo-width / -logo-height	32px / 17px	로고 영역(공통 배치, 로고 이미지는 프로그램별)
--hm-sw-header-gap	4px	필드 간격
--hm-sw-header-font-family / -font-size / -label-size	Noto Sans KR… / 14px / 12px	전체 / 값 / 라벨
--hm-sw-header-background	#060606	헤더 바탕
--hm-sw-header-text-color / -title-color	#F6F4F2 / #F0F7F5	일반 / 파일명
--hm-sw-header-selected-color	#FFC600	선택
--hm-sw-header-focus-color	#F0F7F5	Focus
--hm-sw-header-arrow-color	#47AF91	파일명 화살표
--hm-sw-header-hover	rgba(255,255,255,.08)	더보기 메뉴 항목 Hover 배경
--hm-sw-header-hover-border-gradient / -hover-border-width	Figma 홈 hover gradient / 1px	Hover 테두리(§11.1)
--hm-sw-header-home-on-line-color / -home-on-line-width	#5F4B0F / 2px	Home On(로고 메뉴 열림, Figma 662:67267): Header 전폭 상·하단 선. 로고는 Hover 테두리 유지
--hm-sw-header-document-menu-width / -document-menu-background / -document-menu-border-color / -document-menu-border-width	310px / #103127 / #041611 / 1px	문서 Dropdown(§5.1)
--hm-sw-header-document-menu-shadow / -document-menu-inset-shadow / -document-menu-divider-color	0 2px 4px rgba(0,0,0,.25) / inset 0 4px 8px rgba(0,0,0,.4) / rgba(194,217,210,.2)	문서 Dropdown(§5.1)
--hm-sw-header-document-list-max-height	320px	목록 내부 스크롤 시작 높이(구현값)
--hm-sw-header-document-action-background / -document-action-color	rgba(182,208,201,.2) / rgba(0,0,0,.7)	New / Open Default(§5.1)
--hm-sw-header-document-action-hover-background / -document-action-hover-color	rgba(182,208,201,.3) / #000	New / Open Hover(Figma 26:10762 / 26:10805)
--hm-sw-header-document-item-hover-background	rgba(0,0,0,.4)	문서 목록 항목 Hover(Figma 26:10680)
--hm-sw-header-document-close-color / -document-close-hover-background / -document-close-hover-color	rgba(240,247,245,.7) / rgba(182,208,201,.2) / #F0F7F5	문서 닫기 X(사용자 추가, 구현값, §5.1.1)
--hm-sw-header-layer-menu-width / -layer-menu-background / -layer-menu-border-color / -layer-menu-radius / -layer-menu-shadow	234px / #27241D / #000 / 3px / 0 4px 8px rgba(16,48,38,.25)	레이어 Dropdown(§5.2)
--hm-sw-header-layer-expanded-border-color	#081813	펼친 레이어 필드 테두리(Variant3)
--hm-sw-header-layer-list-max-height	240px	레이어 목록 내부 스크롤 시작 높이(구현값, 8행)
--hm-sw-header-layer-row-hover-background / -layer-row-hover-color	#62533D / #FF5C00	레이어 행 Hover(26:10695)
--hm-sw-header-layer-icon-hover-background	rgba(0,0,0,.25)	전구 Hover(눈꽃·자물쇠는 Hover SVG)
--hm-sw-header-layer-chip-border-color	#C9C9C9	레이어 색상 견본 테두리
--hm-sw-header-layer-footer-border-color / -layer-detail-background / -layer-detail-color / -layer-detail-text-opacity	rgba(197,177,158,.15) / rgba(197,177,158,.15) / #FFF / .35	레이어 상세 영역·버튼
--hm-sw-header-document-background / -document-border-color	§10 B / #0E4C3A	파일명, 홈 뒤, 창 영역, 인쇄 버튼
--hm-sw-header-object-background / -object-border-color / -object-radius	§10 A / #135643 / 6px	객체 수정 면, 더보기 메뉴 테두리
--hm-sw-header-property-background / -property-border-color / -property-radius / -property-shadow	§10 C / #08251C / 3px / §10 C	5개 필드, 더보기 버튼
--hm-sw-header-pill-background / -pill-border-color	rgba(0,0,0,.8) / #092920	인쇄·가이드 pill
--hm-sw-header-stripe-color	rgba(28,106,81,.32)	창 이동 줄무늬
--hm-sw-header-window-icon-color	#ADB0AF	최소화 막대
--hm-sw-header-window-button-hover-background / -window-icon-hover-color	rgba(0,0,0,.2) / #FFF	최소화 Hover(Figma 26:12159). 종료 Hover는 Figma SVG(close-hover.svg)
--hm-sw-header-text-outline-color / -text-outline / -label-outline	#000 / 1.3px 16방향 / 1px 16방향	Text Stroke 검정 외곽선(§6.1)
--hm-sw-header-text-outline-room	2px	말줄임 상자 외곽선 여유. 이전 --hm-sw-header-text-stroke-width(0.6px) / -solid-stroke-width(0.8px)는 2026-10-16 제거
--hm-sw-header-menu-divider-color / -menu-divider-strong-color	rgba(197,177,158,.15) / .25	새 Dropdown 열 구분선·하단 테두리(§5.3)
--hm-sw-header-menu-list-max-height / -color-palette-max-height	240px / 118px	긴 목록·사용자 색상 내부 스크롤 시작(구현값)
--hm-sw-header-color-mode-color / -color-mode-background / -color-mode-on-background	#D4CBBD / rgba(98,83,61,.3) / #62533D	ByLayer / ByBlock
--hm-sw-header-color-pick-background / -color-chip-border-color / -color-input-border-color	#C5B19E → #5F554C / #C9C9C9 / rgba(197,177,158,.2)	색상 추출, 22px 칩, 색상 입력 Hover·구분선
--hm-sw-header-input-color / -input-hover-border-color / -input-editing-background / -input-editing-border-color	#E60403 / rgba(212,203,189,.25) / #0F0D0A / rgba(212,203,189,.3)	SWHeaderInput(§5.5), caret 색 포함

15. Figma 비교 결과와 의도적 차이

1920 × 49, Storybook SW / Header / Default에서 getBoundingClientRect로 측정했습니다.

항목	판정	내용
전체 크기 49 / 면 48	MATCH
면 좌표·폭(홈 0/80, 파일명 65/310, 객체 377/1301, 창 1680/240)	MATCH
필드 좌표·폭(467/234, 705/192, 901/284, 1189/164, 1357/164, 상세보기 1521/157 y6)	MATCH
인쇄·가이드 pill(1683/85, y3), 창 이동(1768/88), 최소화·종료(1856, 1888 / 32)	MATCH
사용자 확정 3개 면(gradient·border·radius·shadow)	MATCH	computed style 확인
Assets 12개 위치·크기, 임시 URL 없음	MATCH
문서 Dropdown(위치 x 63–375 / y 48, 312 × 170, 항목 32, 하단 40, 색·테두리·radius·그림자, 열린 상태 노란 글자·위 화살표)	MATCH	2026-10-16 Storybook Document Dropdown에서 측정. §5.1
문서 Dropdown 열기 방식(Figma hover Variant → 클릭)	APPROVED DIFFERENCE	사용자 지시
레이어 Dropdown(필드 234 × 38, 목록 234 × 280, 행 30, 아이콘 20, 견본 16, #27241D·#62533D·#FF5C00, 아이콘 Hover, 레이어 상세, 펼침 외곽선)	MATCH	2026-10-16 Storybook Layer Dropdown에서 측정. §5.2
레이어 Dropdown 열기 방식(Figma hover → Variant3 → 클릭)	MATCH	사용자 지시와 Figma 흐름 동일: Hover는 테두리만, 클릭 시 펼침
레이어 상세 버튼 폭(Figma 글자 75 → 69.3, 버튼 107.3)	APPROVED DIFFERENCE	글꼴 차이(Dotum → Noto Sans KR)
눈꽃·자물쇠 컬러 = 동결 해제·잠금 해제	APPROVED(사용자 확정 2026-10-16)	Figma에는 의미 정의 없음, 사용자 지시로 확정(§5.2.1). 실제 호스트 반영은 NOT VERIFIED
현재 레이어 이름 #FFC600, 목록 높이 상한 240px, 좁은 폭 왼쪽 이동	구현값(Figma 없음)	문서 Dropdown 규칙 확장 / 8행 기준 / 화면 밖 넘침 방지
New / Open 버튼 폭 54 / 47 → 55.4 / 50	APPROVED DIFFERENCE	글꼴 차이(Dotum → Noto Sans KR)
로고 이미지	APPROVED DIFFERENCE	Figma 이지빔 로고 대신 프로그램별 로고(logoSrc/logo). 로고 영역 위치·크기는 MATCH. §9.1
글꼴 Dotum → Noto Sans KR, Bold 표기 → 700	APPROVED DIFFERENCE	글자 폭이 넓어 값 텍스트 위치가 수 px 다름
글자 겹침 레이어(검정+밝은색) → 단일 밝은색	APPROVED DIFFERENCE → 2026-10-16 복원	§6.1 Text Stroke. 남은 차이: Noto 700 + Stroke가 Dotum + Stroke보다 약간 굵음
색상·선스타일·문자·치수 Dropdown 구조·크기·색	MATCH (2026-10-16 측정)	§5.3. 차이: 선 종류 열 182 → 187.2(Noto 글자 폭), 문자스타일 글꼴 칸 38 → 내용 폭, 상세 pill 글자 폭
Dropdown 독립 버튼 Hover	APPROVED DIFFERENCE	Figma Hover Variant 있음, 사용자 정책으로 Hover 효과 없음(§5.3)
레이어 상세 버튼 Hover(.25 / radius 25)	APPROVED DIFFERENCE	같은 정책(§5.5)
Input Default / Hover / 편집 / 커서	MATCH (58 × 20 / 58 × 24 / 58 × 24, caret #E60403)	caret 높이 14px은 NOT VERIFIED(네이티브)
선택 시 레이어 상태 아이콘 색 유지	APPROVED DIFFERENCE 후보	다색 상태 아이콘 의미 보존. 확정 필요
파일명 화살표 SVG → CSS 삼각형	APPROVED DIFFERENCE 후보	선택 색 전환용, 크기·색 동일
홈 버튼 Hover	MATCH	Figma hover SVG 그대로 사용(26:10655)
최소화 Hover(배경 검정 20%, 막대 흰색, 32 × 48)	MATCH	Figma 26:12159 값과 computed style 비교(§11.2)
종료 Hover(#E40000 32 × 48, 흰 X)	MATCH	Figma 26:12166 SVG 그대로 사용(§11.2)
인쇄·팝업 가이드 Hover 아이콘 #B6D0C9 → #FFC600	APPROVED DIFFERENCE(확장)	Figma Variant 없음. 2026-10-16 사용자 지시, 해당 fill만 바꾼 로컬 SVG(§11.2)
다른 버튼 Hover 테두리	APPROVED DIFFERENCE(확장)	Figma에는 홈 버튼 hover만 있음. 같은 gradient를 각 버튼 형태·radius에 맞춰 적용(2026-10-16 사용자 지시). §11.1
Focus·Disabled 표현	NOT VERIFIED	Figma에 Variant 없음, 구현값
반응형 단계(1800 / 1180 / 1080 / 900 / 640 / 520)	MATCH(정책)	2026-10-16 사용자 지시에 따라 측정값으로 재설정, 필드 값 잘림 없음(390 레이어명 제외). §12
픽셀 단위 이미지 diff	NOT VERIFIED	Figma 스크린샷은 1024px 축소본만 확보, 육안·좌표 비교만 수행

16. AI 재현 규칙

SW Header는 Figma Node 26:8944를 기준으로 구현한다. 사용자가 확정한 CSS와 반응형 정책을 우선하며, SW 전용 디자인 토큰을 사용한다. HMDesign 공통 UI의 전역 스타일을 변경하지 않는다. 동일한 디자인을 재현할 때 전체 헤더를 이미지로 대체하지 않고 재사용 가능한 컴포넌트로 구성한다.

추가 규칙:

1. 새 화면에서는 @hm-design/sw의 SWHeader를 그대로 쓰고 값·Callback만 연결한다. 헤더 DOM이나 class를 복사하지 않는다.
2. 하위 컨트롤만 쓸 때는 <SWTheme> 안에 공개 하위 컴포넌트를 둔다. 소비 코드에서 hm-sw-* class를 직접 붙이지 않는다.
3. 색·gradient는 --hm-sw-header-* 토큰으로만 바꾼다. @hm-design/ui 토큰과 섞거나 같은 HEX라는 이유로 합치지 않는다.
4. Font Weight는 400 / 700만 쓴다(500은 허용되나 현재 미사용). 글자 외곽선은 Figma에 Stroke가 있는 텍스트에만 §6.1 토큰으로 적용한다(2026-10-16, 이전 "외곽선 없음" 규칙 대체). font-weight로 외곽선을 흉내 내지 않는다.
5. Dropdown 안 독립 버튼은 Hover 효과를 넣지 않는다. 목록 행은 Figma 행 Hover, Input은 Figma Hover를 따른다(§5.3, §5.5). Dropdown 항목은 패키지에 고정하지 않고 id 기반 배열 Props로 받는다.
6. 선택은 글자·단색 아이콘 #FFC600만 바꾸고 배경·테두리·그림자를 추가하지 않는다. Focus 표시를 지우지 않는다.
7. 기능이 화면에서 빠질 때는 반드시 더보기로 옮긴다. 필드를 줄여 값을 자르지 말고 기능을 옮긴다. 헤더 가로 스크롤을 만들지 않는다.
8. Figma Assets는 packages/sw/src/assets/의 원본 SVG를 쓴다. 임시 Figma URL·스크린샷 이미지를 쓰지 않는다.
9. 로고는 확정 디자인이 아니다. 공통 컴포넌트에 특정 SW 로고·브랜드명·파일 경로를 넣지 않고, 각 프로그램이 logoSrc 또는 logo와 logoAlt로 전달한다. 로고 영역의 위치·크기는 바꾸지 않는다.
10. Hover 테두리는 §11.1의 노란 gradient 1px을 사용한다. 배경·크기·그림자를 바꾸지 않고, 새 버튼도 같은 토큰과 대상 목록 규칙을 따른다. 텍스트·아이콘 예외는 §11.1·§11.2·§11.5를 따른다(5개 필드의 텍스트와 지정 미리보기는 §11.5, 최소화·종료는 Figma 전용 hover, 인쇄·팝업 가이드는 기존 테두리 + 지정 fill 변경). SVG는 원본의 해당 foreground fill만 바꾼 로컬 Variant를 사용하며 CSS filter를 쓰지 않는다.

17. 향후 공통화 검토 참고

이번 단계에서는 통합하지 않습니다. 비교 시 참고합니다.

구분	항목
SW 고유(분리 유지)	3개 확정 gradient 면, 홈·창 이동·pill 구성, 선택 #FFC600(배경 없음), 49px 헤더 구조
유사하지만 의미 다름	선택 노랑 #FFC600(HM 팝업 제목 노랑과 같은 값이나 역할 다름), 녹색 계열(HM green-* palette와 값 비교 필요)
공통화 후보	Noto Sans KR·400/500/700 정책, 더보기 메뉴(HM DropdownMenu와 기능 동일 — 스타일은 SW 전용), Focus 정책, 말줄임·no-scroll 반응형 원칙
비교 필요	필드 38px vs HM control height, radius 3/6 vs HM radius scale, Hover 색

추가 수정 기준 — 속성창·K 가이드 (2026-10-16)

사용자의 SW Header 추가 요청 A–H가 같은 날짜의 이전 규칙보다 우선합니다. 이 절은 과거 PASS 기록을 재판정하거나 덮어쓰지 않습니다.

• 상세 5개는 높이 24px, 고정 폭 레이어 113 / 색상 99 / 선 128 / 문자·치수 142px입니다. Default 배경 rgba(197,177,158,.15)·radius 24 → Hover .25·radius 25, 아이콘 14·gap 4·가로 padding 10을 유지합니다. 레이어·색상·선·문자는 원본 Hover 아이콘으로 바뀌고 글자는 35%입니다.
• 치수 상세의 실제 Hover 26:10799는 기본 아이콘·글자 100%입니다. 26:10802 Variant3(Hover 아이콘·글자 35%)와 혼합하지 않습니다. Hover는 Callback을 호출하지 않고 기존 클릭·disabled·focus-visible을 유지합니다.
• ByLayer/ByBlock은 Hover 글자 #FF5C00, 선택 배경 #62533D·기존 Inset Shadow를 유지합니다. 항상 하나만 표시되고 같은 모드 재클릭은 Callback을 호출하지 않습니다. 처음 모드를 지정하지 않으면 ByLayer입니다.
• colorMode=null의 기존 직접 색상 API 의미는 유지합니다. 필수 모드 표시는 마지막 유효한 모드를 기억하며 팔레트 선택·직접 입력으로 지워지지 않습니다. 모드 표시를 색상 데이터 변경으로 해석하지 않습니다.
• 레이어·선·문자·치수 목록의 Hover/Selected는 배경 #62533D·글자/선 #FF5C00로 동일합니다. 치수는 기존 Hover SVG를 씁니다. 마우스가 다른 행으로 이동해도 선택 행 강조는 남고 Props의 id 변경으로 이동합니다. 문서 목록과 상단 필드의 기존 노랑 정책은 유지합니다.
• 지정된 일반 -webkit-text-stroke-width: var(--hm-sw-header-text-stroke-width) 선언과 미사용 변수는 제거했습니다. 검정 text-shadow, 상세 pill의 별도 --hm-sw-header-solid-stroke-width, SVG/Border/선 Stroke는 보존했습니다.
• 속성창 26:11822는 SWHeaderPropertyPanel 하나가 외부 선택·항목·그룹·펼침 데이터로 렌더링합니다. 선택 없음/전체/단일 원/공통 항목 확장의 Story fixture는 314×256 / 314×361 / 314×658 / 314×754px입니다. CAD 값 계산과 객체 변경은 하지 않습니다.
• 너비 314px, 내용에 따른 높이, viewport 경계 보정, 내부 세로 스크롤, non-modal dialog(aria-modal=false)입니다. Dim은 없습니다. 기존 속성창 버튼 또는 More → 속성창으로 열고 재클릭·X·Escape로 닫습니다. 닫으면 보이는 원래 버튼/More로 Focus를 돌립니다.
• 항목은 id·이름·값·type·groupId·order·readOnly·disabled·validate·unit·Callback을 갖습니다. Text/Number/Select/Color/Slider/Computed를 지원합니다. SWHeaderInput을 재사용하고 Enter/Blur 확정·변경 없는 중복 보고 방지·Escape 취소·외부 값 반영을 적용합니다. 선택 id 교체/항목 삭제는 편집 임시값을 폐기합니다. 그룹 펼침은 값 변경과 분리됩니다.
• 공통 입력 외 Circle 레이아웃은 원본 208px SVG와 호스트 수치/graphicSlot을 결합하고, Position 레이아웃은 동적 열을 사용합니다. 원형 항목의 추가 일반 속성도 도형 아래에 배치됩니다. 모든 fixture 숫자·객체 종류/개수는 Storybook 데이터입니다.
• 내부 아이콘 29×27.13px은 원본 Default/Hover/Active SVG를 사용합니다(원본 SVG export root는 29×28로 반올림되며 root를 재조정하지 않습니다). 금색 Active 테두리와 다시 클릭하면 Default로 돌아가는 상태를 보존합니다. 현재 저장소에 CAD 액션 계약이 없어 toolActive/onToolActiveChange/toolLabel을 통해 호스트에만 알립니다.
• 닫기 버튼 44×30px은 속성창 전용 원본 SVG입니다. Hover는 빨강/흰 X이며 Header 창 종료와 별개입니다.
• K 버튼은 기존 40×38px 버튼 하나를 유지합니다. 하단 가이드는 원본 이미지/마스크·208×149px·금색 경계·짙은 녹색·문구를 유지합니다. 표시 Fade는 511ms입니다.
• K 원본 이미지 Pan/Zoom은 400ms 지연 → 1022ms 전환 → 100ms 지연 → 1022ms 전환 → 150ms 지연 → 511ms 전환입니다. 마지막 화면은 400ms 유지 후 511ms로 처음에 복귀합니다(반복을 위한 구현값). 재진입은 처음부터 재생하고 영역을 떠나면 타이머를 정리합니다. Reduced Motion은 첫 프레임 정지 이미지입니다.
• 버튼과 가이드는 한 Hover/Focus 영역입니다. 기존 640px Breakpoint 아래에서는 K 버튼을 추가 생성하지 않고 기존 More의 팝업 가이드 항목 Hover/Focus에 같은 가이드를 연결합니다. 기존 창 이동 1400ms CSS와 자산은 변경하지 않습니다.
• 이 패키지는 HM UI와 독립된 SW control library이므로 panel의 native label/select/range는 SW 전용 스타일·실제 control id로 연결합니다. HM UI의 Label이나 Select를 새 의존성으로 추가하지 않습니다. Story의 외부 데이터 조작 버튼은 테스트 호스트입니다.

검증·차이·NOT VERIFIED는 추가 검증 기록을 확인합니다.

후속 5개 요구사항 기준 (2026-10-16)

• 속성Bar 26:10492: 최대 1222×28px, #271F13, 좌우·하단 1px #08251C, 하단 radius 6px, inset 0 4px 4px black 60%. 객체명 90px·#FFC600, 필드간 16px·라벨/값 간 6px, 라벨 #F6F4F2·입력 #E60403. 기존 Noto Sans KR 400/700 정책과 SWHeaderInput을 재사용하므로 Dotum 원본과 획·폭은 다릅니다. 기존 Header 49px 아래의 별도 strip이며 객체 수정 영역에 정렬하고 좁으면 내부 가로 스크롤합니다. 실제 CAD 계산은 없습니다.
• 동적 데이터: 속성창과 동일 SWHeaderProperty/Selection 레코드, onPropertyChange를 공유할 수 있습니다. id/order/name/value/validation/readOnly/disabled는 외부 데이터이며 Enter/Blur·Escape·외부 변경·삭제 draft 폐기를 적용합니다. Bar와 Panel 열림은 독립적입니다.
• 컨트롤 구성: 선택적 controls allowlist로 파일·레이어·색상·선/문자/치수스타일·속성Bar·속성창·상세보기 caption·그리기모드·인쇄·K를 개별 제거/숨김/재추가/재정렬/허용 라벨 변경합니다. 미전달 시 기존 기본 디자인을 유지하며, 구성 모드에서만 개별 순서대로 한 영역에 배치합니다. 홈·창 제어는 공통 프레임으로 유지합니다. 기존 Breakpoint와 More 대표 정책은 남은 항목에 적용합니다.
• Text Stroke: Text Stroke Story의 지정 header 원본 스크린샷 블록과 전용 import만 제거했습니다. 원본 PNG·다른 비교 Story·타이포그래피·색상·검정 text-shadow는 보존합니다.
• 반복 선언 원인: src/theme/sw.css 원본 1394행(작업 전)에 별도 solid-stroke-width 참조가 실제 존재했습니다. build.mjs는 src 진입점의 CSS를 dist/styles.css로 재빌드하고 Storybook은 공개 dist CSS를 불러옵니다. 별도 생성기가 해당 선언을 추가하는 증거는 없으며 build가 src를 역생성하지도 않습니다. 원본 선언과 유일한 변수 정의를 제거했습니다. 과거 text-stroke-width 제거와 다른 수정입니다. 과거 사용자가 편집한 파일 위치·캐시는 직접 재현할 수 없으므로 특정 사용자 행위를 원인으로 단정하지 않습니다.
• btn_colorize 26:11301: 색상 메뉴의 기존 색상 추출 버튼에 Default 26:11302 / Hover 26:11305 SVG를 로컬 자산으로 저장해 연결했습니다. 24×24 버튼, 18×18 아이콘, radius 3, gradient #C5B19E→#5F554C, 기본 border black40%, drop shadow 0 2px 2px black40%. Hover border #DA6813·black25% overlay·Hover 전용 SVG, Mouse Leave 복원. 키보드 focus-visible와 접근성 이름을 제공합니다. 클릭은 기존 onColorPick이며 색상 값/모드를 바꾸지 않습니다.
• Overlay: 26:11338은 현재 구현에 없고 호스트 API 연동 대상입니다. 임의 색상창을 생성하지 않았습니다.
• 재사용 근거: 신규 업무 페이지가 아닌 독립 SW component package 수정입니다. SWHeaderInput/Property 타입/기존 메뉴·More를 재사용했습니다. HM UI 의존성·FilterBar·일반 Navigation은 이 구성요소의 역할에 맞지 않아 추가하지 않았습니다. native label은 실제 input id를 연결하며 기존 패키지 독립성을 유지합니다.

새 검증과 과거 기록은 후속 검증 기록에서 구분합니다.

3차 기준 — 구성요소 표시·메뉴 순서·속성창 상태·형상 Slot (2026-10-16)

• 로고 필수: 로고 슬롯(32×17, 홈 배경 위 12,16)은 모든 구성에서 표시합니다. home 제거 시 같은 배경·위치의 정적 로고(Hover 없음)입니다.
• 개별 제거: hiddenControls로 홈·파일·그리기모드·5개 메뉴·상세보기 caption·속성Bar·속성창·인쇄·K·창 이동·최소화·종료를 각각 제거합니다. 남은 요소는 기본 크기를 유지하고 제거한 공간은 남기지 않습니다(구현값: 상세보기 블록 일부 제거 시 폭 auto·최소 64px, 인쇄/K pill과 창 버튼은 남은 버튼 폭, 창 영역 폭 auto). 아무것도 제거하지 않으면 기존 1920px 디자인과 동일합니다.
• 창 이동 Tooltip(구현값): 최소화·종료 중 하나 이상을 제거하면 창 영역 오른쪽 밖은 잘리고(Header 밖 노출 방지), 1080px 미만 24px 이동 영역의 Tooltip은 이동 영역 왼쪽에 표시합니다. 기본 구성의 1400ms Motion·위치는 변경하지 않았습니다.
• 메뉴 순서: menuOrder는 5개 유사 메뉴끼리만 자리를 바꿉니다. 기본은 레이어 → 색상 → 선스타일 → 문자스타일 → 치수스타일(Figma 26:8944)입니다.
• More: Breakpoint는 그대로입니다. 제거된 메뉴는 More에도 없고, More 목록은 현재 순서를 따릅니다. 대표 슬롯은 레이어(없으면 순서상 첫 메뉴)이며 More 선택 메뉴가 대신합니다.
• 속성창 4상태: 26:11886 314×256, 26:11823 314×361, 26:11932 314×658, 26:12035 314×754 — 같은 SWHeaderPropertyPanel과 데이터로 구성하며 Storybook 실측이 일치합니다.
• 형상 Slot: Figma 26:11932 Group 2937(219×260) 안 Group 2920 208×208 그림 영역을 .hm-sw-property__shape(그룹 콘텐츠 기준 39, 26)로 분리했습니다. 기본 내용은 기존 Figma 원형 SVG(property-circle.svg)입니다. 비움·외부 컴포넌트에도 라벨 위치와 패널 높이는 같습니다.
• Figma와 남은 차이(기존 구현 유지): Figma 라벨 x 위치는 원주 111.5/지름 102/반지름 152.5/면적 98.5이고 구현은 113/100/154/100(1~2px, 기존 값), 지름 y는 Figma 108·구현 110입니다. 이번 범위에서 값 변경은 하지 않았습니다.

18. 속성창 입력·선택 필드 (2026-10-19)

Figma 26:12388 ~ 26:12649의 필드 13개 상태입니다. 상세 수치·검증은 속성 필드 검증 기록을 따릅니다.

• 공통 행 필드: 200 × 28, radius 2. Default는 값만, Hover는 1px rgba(33,29,19,.4). 테두리는 Default에도 투명 1px로 있어 상태가 바뀌어도 값이 움직이지 않습니다.
• 숫자 편집 On(선축적 26:12314, 두께 26:12590, 선가중치·투명도 26:12649): #0F0D0A, 단위 흰색, 값 검정 외곽선, 빨간 caret. 선가중치·투명도 값은 41px 내외 Hug(pl 6 / pr 4).
• Dropdown On(레이어 26:12265 / 26:12291, 선스타일 26:12404, 색상 26:12184): #211D13. 레이어·선스타일 목록은 필드 오른쪽 끝, 색상 목록은 왼쪽 끝에 맞춰 필드 바로 아래에 열립니다. 목록 내용은 Header Dropdown과 같은 공유 컴포넌트입니다.
• 하이퍼링크(26:12583)·재료(26:12574)는 Figma에 On이 없어 Default·Hover만 적용합니다.
• 색상 26:12170의 255,259,0은 Figma 표기 예시이며 입력 검증은 0~255를 유지합니다.