HMDesign/docs/sw/sw-footer-figma-mapping-2026-10-20.md

SW Footer — Figma 35개 노드 매핑·구현 기록 (2026-10-20)

• Figma: 이지빔-SW rj6wpsfk24lOWvWiVRAANP. 35개 노드 모두 Figma MCP(get_metadata, get_design_context, get_screenshot)로 읽었고, 글자 stroke·변형 레이어·opacity는 Plugin API(use_figma 읽기 전용)로 확인했습니다. Figma 파일은 수정하지 않았습니다.
• 추가 기준(사용자 제공, 2026-10-20): 실제 SW 화면 src/sw/assets/footer-reference/composition-2026-10-20.png(1915 × 1030), 좁은 화면 narrow-2026-10-20.png(952 × 183). 바 안 명령창·좌표·보조기능 켜짐·좁은 폭 동작은 이 화면을 따르고, Figma와 다르면 Figma가 우선입니다.
• 구현: packages/sw/src/components/sw-footer/, packages/sw/src/theme/sw-footer.css, 자산 packages/sw/src/components/sw-footer/assets/(Figma SVG 48개).
• Storybook: SW/Footer — Figma 렌더 비교 이미지는 src/sw/assets/figma-reference/footer/<node>.png(35개).

1. 노드 → 구현 → Story

35개 노드는 34개 Component Set/부품과 1개 전체 화면입니다. 같은 UI의 상태 변화는 별도 컴포넌트가 아니라 Props·CSS 상태로 구현했습니다.

#	Node	이름	분류	구현 (컴포넌트 · Props)	Figma 상태 → 구현	Story
1	26:9776	btn_add_layout	Layout 탭	SWFooterLayoutTabs onAdd	Default / Variant2(Hover) → CSS hover	Figma Variant · Layout 탭
2	26:9785	btn_delete	Layout 탭	둥근 탭 ×(onRemove)	Default / Variant2(Hover, 노랑 ×)	〃
3	26:9931	btn_close2	Layout 탭	사선 탭 ×(onRemove)	Default / Variant2(Hover)	〃
4	26:9794	layout01	Layout 탭	마지막 탭 shape="slant"	default · hover · on · on hover · Variant5(이름 편집) · Variant6(편집 + hover) → value, editingId, hover	〃
5	26:9837	layout02	Layout 탭	shape="rounded"	같은 6상태	〃
6	26:9885	layout03	Layout 탭	shape="rounded"	default · hover · on · on hover	〃
7	26:9914	model	Layout 탭	modelLabel, value === SW_FOOTER_MODEL	Default · hover · on	〃
8	26:9942	예시) 탭 상태변화	Layout 탭	SWFooterLayoutTabs layouts value onAdd	Model / Layout 01 / 02 / 03 선택	〃, 전체 Footer
9–18	26:9459, 26:9466, 26:9473, 26:9480, 26:9487, 26:9494, 26:9501, 26:9508, 26:9515, 26:9522	text_도형 … text_구조배근	분류 탭	SWFooterMenu 항목(SWFooter categories)	Default(#D4CBBD) · Variant2(Hover) · Variant3(현재, Pocket)	Figma Variant · 분류 탭
19–27	26:9529, 26:9551, 26:9576, 26:9601, 26:9629, 26:9651, 26:9673, 26:9689, 26:9702	line · Pline · Arc · circle · ellipse · rect · poly · point · hatch	명령	SWFooterToolButton(SWFooterTool + swFooterToolIcons.*)	Default · Variant2(Hover) · Variant3(선택) → hover, activeToolId/pressed	Figma Variant · 명령
28	26:9739	Ncopy	명령	〃 (swFooterToolIcons.ncopy, Story 수정 분류)	같은 3상태	〃
29	26:9971	btn_add_menu	빈 칸	SWFooterAddSlot / SWFooter onSlotAdd	Default · hover(주황 점선 링)	Figma Variant · 빈 칸
30	26:9242	가이드 영상 보기	빈 칸 가이드	SWFooterAddSlot guide / SWFooter slotGuide	Default · Variant2(가이드 표시) → hover·focus·guideOpen	〃, 전체 Footer
31	26:9096	guide_바로가기 등록	빈 칸 가이드	SWFooterGuide media	Variant5·6·4·9·8·9 = 가이드 영상 프레임 → media(프로그램 제공), Story는 6프레임 순환	〃
32	26:10023	ico_arrow	명령창·▲	SWFooterCommandLine 펼치기, SWFooter ▲ 칸	Default ↑ · hover · on ↓ · Variant4(on hover) → expanded / ▲ 패널 열림	Figma Variant · 명령창, 화면 폭
33	26:10048	command (접힘)	명령창	SWFooterCommandLine	71px, 마지막 3줄	Figma Variant · 명령창
34	26:10056	command (펼침)	명령창	SWFooterCommandLine expanded	270px	〃
35	26:10097	레이아웃 분리	전체	SWFooter(+ SWFooterLayoutTabs)	하단 72px 전체	전체 Footer · 실제 조합(Figma 기본 구성 섹션), Figma Variant · Footer 전체

보조 참고(35개 목록 밖, 2026-10-20 상태 수정 때 확인): 26:10104의 보조기능 버튼은 Component Set btn_객체스냅 26:9248 · btn_선택효과 26:9267 · btn_직각교차 26:9298 · btn_격자스냅 26:9320 · btn_격자배경 26:9381 · btn_선가중치 26:9412(Default / Variant2 / Variant3)의 인스턴스입니다. 기준 이미지 src/sw/assets/figma-reference/footer/aux-buttons/, Story = Figma 디자인별 Variant · 보조기능 버튼 섹션(2026-10-20까지는 Hover / Active / Selected / Disabled Story).

26:10097 안의 보조기능 버튼(btn_객체스냅 …, 26:10104)·측면 버튼(26:10189 / 26:10192)·구분선·bg_vacant·menu_bg도 같은 노드에서 읽어 SWFooterAuxGroup·SWFooterSideButton·SWFooterMenu 면으로 구현했습니다.

2. Storybook SW/Footer

2026-10-20 정리: 기본 Footer(sw-footer--default)와 Hover / Active / Selected / Disabled(sw-footer--states) Story를 삭제했습니다. 두 Story의 화면은 전체 Footer · 실제 조합의 섹션(Figma 기본 구성 · 상태)과 숨김 Figma 디자인별 Variant의 보조기능 버튼 섹션으로 옮겼습니다. 같은 날 2차 정리(사용자 요청)로 전체 Footer · 실제 조합의 전체 Footer — Figma 기본 구성·상태·참고: 실제 화면 섹션과 화면 폭 변화의 참고: 실제 좁은 화면·Figma 기본 구성 (명령창 없음) 섹션을 삭제했습니다(Story ID 유지, 기준 이미지 파일은 보존). Figma 기본 구성 비교는 숨김 Figma 디자인별 Variant의 Footer 전체 노드(26:10097)에 남아 있습니다.

Story	내용
전체 Footer · 실제 조합	실제 Footer 조합(SWHeader + 도면 + 좌표 + 바 안 명령창 + 명령 10개 + 분류 12개 + Layout 탭, 모든 Callback 동작, 각 부품의 Hover · Active · Selected · Disabled)
도구 그룹별 표시	도형(9) · 수정(NCopy) · 빈 분류, 보조기능·측면 버튼 없는 구성
Figma 디자인별 Variant (35 노드, verification)	노드마다 Figma 렌더 ↔ 구현 상태, 보조기능 버튼 6종 Figma ↔ 구현 4상태
도구 및 메뉴 변경 예제	사용자 분류·lucide 아이콘·slotCount 10·빈 칸으로 명령 추가·분류 추가·문구 변경·trailing·잠긴 Layout
화면 폭 변화	실제 조합 1920 / 1440 / 1280 / 950 / 860 / 760(▲ 확장 목록 포함)
개별 부품 (조합용)	SWFooterAuxGroup(3·2열), SWFooterMenu + SWFooterToolButton, SWFooterCommandLine

3. Figma·실제 화면과 구현의 차이

항목	Figma / 실제 화면	구현	이유
글꼴	Dotum	Noto Sans KR(SW 공통)	SW Header와 같은 확정 대체. 글자 폭·굵기 차이로 분류 탭 위치가 끝에서 최대 12px 차이
글자 stroke	검정 1.3 / 1px + 자기 색 0.3 / 0.4px	검정 외곽선만(Header 토큰)	Header 2026-10-16 수정과 동일
분류 탭 자간	앞 4개 4%, 나머지 10%	모두 10%	데이터 기반 탭 하나의 규칙. 10%일 때 Figma 상자 폭(45/61/43/84)에 가장 가까움
Layout 01 vs 02 Hover	layout01 Hover = 주황 면 + 검정 글자, layout02 Hover = 어두운 베이지 + 주황 글자	모양별로 Figma 그대로	Figma 두 컴포넌트가 다르게 그려짐 → 검토 필요
Model 선택	Figma On = 갈색 / 실제 화면 = 주황	Figma(갈색)	Figma 우선
Layout 01 단독	26:10097에는 Model 없이 Layout 01만	modelLabel={false} 지원, 마지막 탭은 항상 사선	두 구성 모두 표현
Variant5 / 6 의미	이름 없음(검정 면 + 빨강 글자)	이름 편집 상태로 해석(Header 입력 편집 #0F0D0A·#E60403과 같은 값)	해석 — 검토 필요
보조기능 Selected	Figma Variant2 = Variant3: 주황 그라데이션 테두리 + 아이콘·글자 #FF5C00	Figma 그대로(2026-10-20 수정: 아이콘을 currentColor 인라인 SVG로 바꿔 아이콘까지 주황)	—
보조기능 Hover	버튼 세트에 Hover 없음	노랑 테두리만(SW Header Figma Hover 토큰), 아이콘·글자 기본색	사용자 확정 2026-10-20
보조기능 Default 테두리	Figma 갈색 그라데이션	그라데이션(2026-10-20 수정 전에는 단색 #886D35)	Figma 일치
명령 그룹·▲ 패널 테두리	단색 #886D35	버튼 테두리 그라데이션(--hm-sw-footer-group-border = --hm-sw-footer-aux-border, 명령어 전체보기·보조기능과 같은 값). 위→아래 방향이라 왼쪽 세로선·모서리에 보이고 윗선은 #886D35 그대로. 기존 --hm-sw-footer-group-border-color 토큰은 대체	사용자 확정 2026-10-27
Hover(측면 버튼), Disabled	Figma 없음	글자 #FF5C00, 40%	AI 구성 값 — 디자인 확인 필요
좁은 폭	Figma 없음 / 실제 화면	빈 칸 축소 → ▲ 패널, 분류 ◀ ▶, 보조기능 아이콘만(1279px 이하), 명령창 최소 280, 바 안 명령창 구성의 칸 영역 = 남는 폭 × 0.57	전환 폭·최소 폭·비율은 AI 구성 값(비율은 두 실제 화면 재현)
명령창 줄 수	Figma 3줄(줄 14px) / 실제 화면 접힘 5줄	Figma 3줄	Figma 우선
가이드 영상	Figma는 6프레임 스토리보드(래스터)	media로 프로그램이 제공, Story만 프레임 순환	영상 자산은 프로그램 소유
WIPEOUT · 객체스냅추적 아이콘	실제 화면에만 있음	Story에서 lucide 아이콘(프로그램 제공 방식)	Figma 자산 없음

4. 검증 (2026-10-20, 이 작업에서 실행한 것만)

항목	결과
35개 노드 읽기·매핑	PASS (§1)
npx tsc -p packages/sw/tsconfig.json --noEmit	PASS
npm run build:sw (dist·d.ts, CSS 자산 data URI 인라인)	PASS
루트 npx tsc -b (Storybook·Story 코드, @hm-design/sw 패키지 Import)	PASS
npm run check:ai-docs	PASS
Storybook 렌더링(8개 Story, 실행 중인 6024)	PASS — Story별 Footer 수·콘솔 오류 확인
Figma ↔ 구현 1:1 비교(기본 Footer, 35 노드 Story)	PASS — 위치 측정: 보조기능 (76, 2), 명령 칸 396·y 1, 명령어 전체보기 1552, 분류 탭 Figma 대비 ≤ 12px
동작(실제 조합 Story)	PASS — 명령 선택, 분류 ←/→, 빈 칸 가이드 위치(가운데·4px 위)·클릭, 보조기능 토글, Layout 선택·F2 이름 변경·Delete·추가, 명령창 Enter·펼치기, ▲ 패널 열기·선택 후 닫힘·Escape 복귀
화면 폭	PASS — 실제 조합 1920 → 12칸(명령창 629), 1440 → 명령 7 + ▲, 1280 → 5 + ▲, 950 → 4 + ▲·보조기능 아이콘만·분류 ◀ ▶. Figma 구성 1920 → 17칸, 1280 → 11, 1024 → 10, 820 → 6 + ▲
▲ 패널 줄바꿈(2026-10-20 수정)	PASS — 패널 justify-content: flex-end → flex-start. 데이터 순서대로 각 줄 왼쪽 첫 칸부터 채움: 1440(3개 1줄), 1280(5개 1줄 가득), 950(5 + WIPEOUT 1), 860(4 + 3), 760(2 × 4 + 1, 5줄), Figma 820(3개). 칸 68 × 47, 패널은 명령 칸 오른쪽 끝 정렬 유지
분류 전환 시 영역 유지(2026-10-20 수정)	PASS — 같은 폭에서 명령 10 / 1 / 0개 분류를 전환해도 칸 영역·명령창·명령어 전체보기·Layout 탭·보조기능 좌표와 폭 동일(8개 폭 모두). 수정 전에는 바 안 명령창 구성의 칸 수가 "명령 수 + 2"라 817 → 205 → 137px로 변함
Header·Popup 영향	수정 없음(기존 파일 변경 없음, Footer CSS는 hm-sw-footer*와 새 토큰만)
독립 소비 프로젝트(Tarball) 설치·빌드	미검증
npm run build-storybook (정적 빌드)	미검증
Firefox·Safari	미검증 (Chromium Storybook만)