HMDesign/docs/sw/sw-dotum-font-2026-10-20.md

SW 기본 글꼴 Dotum · Footer 디자인 확인 · 실제 Viewer 소비 프로젝트 검증 (2026-10-20)

과거 기록(현재 정책 아님): 같은 날 사용자 결정으로 SW 기본 글꼴 Dotum은 철회되고 Noto Sans KR로 확정되었습니다(sw-noto-bold-2026-10-20.md). 아래 내용과 증거는 Dotum 시점 이력으로 보존합니다.

범위: feature/sw-package, 기준 HEAD 454472d(원격 동일). SW 패키지(packages/sw), SW Story(src/sw/sw-theme.stories.tsx), AI 문서, README만 변경했습니다. Web UI·OrgChart 코드·토큰은 변경하지 않았습니다(공통 AI_GUIDE.md 사본 동기화만 각 패키지 ai/에 반영). Commit·Push 전(승인 대기). 증거: sw-dotum-font-qa/.

1. 변경 내용

파일	변경	이유
packages/sw/src/theme/sw.css	--hm-sw-header-font-family: Dotum, "돋움", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif (이전 "Noto Sans KR", …)	SW 기본 글꼴 = 돋움. 토큰 1곳(가장 바깥 SW 범위)에서만 선언, 컴포넌트별 font-family 없음
〃	.hm-sw-header__mode padding 0 8px → 0 4px (칸 90px 유지)	돋움에는 Bold 글꼴이 없어 700이 합성 Bold(글자당 약 +1px). 그리기모드 77.8px > 내용 폭 74px로 말줄임 → 칸 폭·가운데 정렬은 그대로 두고 여백만 줄여 해결
packages/sw/src/theme/sw-footer.css	주석만(Noto → Dotum)	사실 정정
packages/sw/tests/theme-inheritance.browser.mjs, src/sw/sw-theme.stories.tsx	기본값 = Dotum, 상속 확인용 검증 값 = Noto Sans KR로 교체	기본값과 검증 값이 같으면 상속 검사가 무의미해짐. 검사 항목·조건 수는 동일(23)
packages/sw/tests/ai-template-consumer.browser.mjs	토큰 글꼴 기대값 Noto → Dotum	기본값 변경 반영
packages/sw/tests/footer-design-review.browser.mjs (신규)	Footer 확인 4건 + 텍스트 규칙 계산값·상태별 캡처	§4 판정 근거
docs/ai/AI_GUIDE.md (+ sync:ai-docs로 ui·sw·org-chart·org-chart-react 사본)	혼합 규칙 1에 "SW = 돋움, Web = Noto Sans KR, OrgChart = 자기 설정, 서로 복사 금지"	공통 규칙
packages/sw/ai/AI_USAGE.md, DESIGN_RULES.md, VIEWER.md, COMPOSITION_PATTERNS.md, examples/ExampleJ-Theme.tsx, README.md	"Noto 기본 / Dotum 승인 대기" 문구 → "돋움 기본, SWTheme·SW 토큰 우선, Web 글꼴 복사 금지, 합성 Bold 폭 주의". 예시 글꼴 값은 프로그램 결정 예시(Malgun Gothic)로 교체	문서 일관성

글꼴 파일·CDN 의존성은 추가하지 않았습니다. 돋움은 Windows 기본 gulim.ttc에 포함된 시스템 글꼴이며, 실제 렌더링 글꼴을 CDP getPlatformFontsForNode로 확인했습니다(Header·Footer·Popup·Viewer 모두 Dotum, 대체 글꼴 0).

2. Dotum 전후 레이아웃 차이 (SW Story 40개 × 1920/1280/900/640)

증거: font-diff/layout-diff-noto-to-dotum.json, font-diff/clipped-text-dotum-vs-noto.json, before/after 캡처.

• 페이지·Header 가로 넘침: 0건(전후 동일). Header 필드는 Figma 고정 폭이라 Breakpoint(1800/1180/1080/900/640) 계산은 변하지 않음(1920→520 전 구간 fields clientWidth = scrollWidth).
• 높이: line-height: normal 텍스트 상자가 20 → 16px(돋움 metric). 정렬은 flex 가운데라 화면상 위치 차이 없음.
• 글자 폭: 한글은 비슷하거나 좁고, 라틴·숫자·700(합성 Bold)은 넓어짐(예: 255,229,0 72 → 87px, 파일 열기 59 → 70px). 내용 폭 필드는 그만큼 넓어지고 파일명이 나머지를 가져감(설계된 동작).
• 새로 잘리는 텍스트(고정 폭 칸):

항목	돋움 / 칸	처리
Header 그리기모드 (90px 칸)	77.8 > 74	FIXED (padding 4px)
Header 값 Standard(문자/치수스타일), 0_Layer_Cludmark(레이어 142), 스케일 1.00(38px)	0.3~1.5px 초과	REVIEW REQUIRED — 원인은 700 합성 Bold. Figma 고정 폭을 바꾸거나 굵기 정책(700 vs Figma Dotum Regular+Stroke)을 바꾸는 디자인 결정이라 임의 수정하지 않음
Footer 명령 라벨 POLYGON, WIPEOUT (64px)	76.9 / 69.9 (Noto에서도 66.9 / 66.3으로 이미 잘림)	REVIEW REQUIRED — 기존 문제가 커짐. 글자 크기·자간은 Figma 값
Story fixture 문자열(Display..., 뷰어 상태 확인용.dwg 100px, 패널 제목 250 × auto (최소 폭))	1~6px 초과	말줄임 설계 동작(데이터 길이 문제), 변경 없음

• Popup·Viewer Panel·SWSelect·SWSlider·Footer 탭: 새 잘림 0, 가로 넘침 0. Popup 값(500)은 합성 Bold 대상이 아니어서 Regular로 보임(Figma와 같은 인상).

3. Header 히스테리시스 재검증 (돋움)

footer-popup-viewer-refinement 47/47, integrated-improvement(options·popup) 89/89 PASS. 테스트 조건은 그대로입니다. Trace([폭, Open 표시, hold]): 넓어질 때 520 0 → 560 0 → 600 1 → 640 1(actions) → 680 1(actions) → 720 1 → 760 1 → 820 1 → 900 1(color) → 1080 1(color), 1920 모두 복귀, 줄일 때 1800에서 Open이 먼저 More로 이동, 다시 넓히면 600에서 1회 복귀 — 수정안 A(Noto) 기록과 동일. 콘솔 오류·React #185(무한 업데이트)·ResizeObserver 오류 0.

4. Footer 디자인 확인 4건 (Storybook SW/Footer › 전체 Footer · 실제 조합, 돋움)

증거: footer-design/(21/21 PASS, 상태별 캡처).

항목	판정	실제 확인
3-1 전체보기 Hover(보조기능·명령어)	PASS	Hover 시 ::after 링 opacity 0 → 1이 버튼 74 × 71 전체를 덮음(gra-border-orange 1px), 두 줄 글자 모두 #FF5C00. 크기·글자 위치 변화 0. 일부만 남는 테두리 없음. Selected(aria-pressed/expanded)는 같은 규칙, Disabled는 Hover 제외
3-2 하단 분류 + / Layout + Hover	PASS	분류 +(28 × 12): 아이콘만 주황 +로 교체, 면 없음, 크기 동일. Layout +(24 × 22): 버튼 모양 마스크 안에 gra-border-orange 면 + 흰 + 외곽선. 클릭 동작은 Story Callback으로 유지(기존 47/47 검사)
3-3 비선택 Model 탭	PASS	토큰 --hm-sw-footer-gra-border-orange = 지정 그라데이션과 정확히 같음(#DA6813 8.52% / #FFBB89 37.93% / #E5690D 71.85% / #AE3607 92.77%). 선택 = 주황 면, 비선택 = tab-model.svg 베이지 면. 비선택 베이지는 Figma 26:9914 model Default(베이지)와 일치. 참고: Figma Hover(베이지 + 주황 글자)·On(갈색)은 2026-10-20 사용자 요청으로 주황 면 + 검정 글자로 바뀐 상태 그대로
3-4 명령이 적은 분류 선택 배경	PASS	도형·수정·편집·문자 포함 12개 분류 모두: vacant 면 하단(1074) < 선택 탭 상단(1078), Pocket 뒤(좌·중·우) 면이 하나(menu__viewport). 갈라짐 재발 없음. 2차에 보고한 변화(명령이 적은 분류의 Pocket 면이 어두운 vacant → 그룹 면)는 그대로이며 디자인 확인 권장 사항으로 유지
3-5 Model·Layout 텍스트	PASS	돋움 12px 400 #161410, 외곽선 없음. Model 선택·비선택·Hover, Layout Default·Hover의 글자 상자·색 동일

5. 실제 소비 프로젝트 독립 검증 (HMDesignSwTest-viewer)

• 원본: D:\디자인시스템\HMDesignSwTest-viewer — HEAD 15ef6ef(detached), Submodule 68fbcf6(+ 미커밋 sw.css popup scrollbar 6줄), 작업 트리 변경 20개. 읽기만 했고 변경 없음(검증 후 HEAD·Submodule·변경 20개·package-lock.json 시각 2026-10-19 그대로).
• 독립 환경: 세션 scratchpad viewer-verify/. 원본 작업 트리(미커밋 변경 포함, node_modules·dist·.git·HMDesign 제외)를 복사하고, HMDesign/packages/{ui,sw} 자리에 이 저장소 스냅샷을 배치(구조 = Git Submodule 경로 + npm Workspace 그대로, publish 전제 없음). 민감 설정 파일 없음.
• 시험한 소스: 454472d + 작업 트리 변경(consumer-viewer/hmdesign-snapshot.patch, sha256 앞 16자 7982bda27eb02f45), packages/sw/dist/styles.css 09e9f80d…. 원본 Submodule이 갖고 있던 scrollbar 미커밋 수정은 454472d에 이미 포함됨(3a5e29f 조상).
• npm install(workspace 링크 @hm-design/sw|ui → 스냅샷) → tsc -b --noEmit + vite build PASS → vite preview(5391).
• Chrome 34/34 PASS(consumer-viewer/chromium-result.json): 돋움 렌더링(Header 102 glyph 전부 Dotum), Web 토큰 --hm-font-family-base Noto 유지, DXF·DWG 3종 로드(simple.dxf 1.3s, BasicSample.dwg 1.4s, civil.dwg 1.9s, 도면 픽셀 확인), 휠 확대·드래그 팬·F(전체 보기), 모델/배치 탭 전환, 샘플 Dropdown 열기·Escape·샘플 로드, 2.5D 전환, 옵션 패널(SWViewerPanel) 열기·SWViewerSlider 값 변경과 숫자 입력 동기화·SWViewerSwitch·제목 드래그 이동·크기 조절·본문 세로 스크롤·잘린 글자 0·Escape 닫기, 레이어 패널, 정보(modal) Escape, 1920/1180/900/560/375 가로 넘침 0과 More 메뉴. 콘솔 오류 0(프로그램에 favicon 없음 — 기존).
• Firefox 158(설치본, WebDriver BiDi) 15/15 PASS: 돋움 해석, civil.dwg 로드, Header 글꼴, 메뉴 열기·Escape, 옵션 패널, 1400/500 가로 넘침 0.
• 이 프로그램은 SW 뷰어 모드만 사용합니다(SWViewer* 14종). SWHeader·Home Menu·Footer·SWPopup·SWSelect·SWSlider(일반)는 프로그램에 없어 Storybook 검증으로 대신했습니다.
• 사용 규칙 점검(수정하지 않음, 보고만):
  1. src/App.tsx:74 화면 루트에 className="hm-sw-theme"를 직접 붙임 → 규칙상 <SWTheme> 사용(소비 코드가 hm-sw-* class를 붙이지 않음).
  2. LoadProgress가 Web Progress를 SW 화면 최상단에 사용 — 뷰어 모드에서 Web 컨트롤 허용 지점(SWViewerPanel children) 밖. 대응 SW 컴포넌트 없음 → 문서상 "없는 컴포넌트" 절차 대상.
  3. index.css가 Web 시맨틱 토큰(--background 등)을 SW 팔레트로 재정의하고 --hm-font-family-base·body 글꼴을 Noto로 지정 — Web+SW 한 문서 혼합(AI_GUIDE §5 혼합 규칙 4, NOT VERIFIED 조합). SW 영역은 hm-sw-theme 덕분에 돋움으로 표시됨을 확인.
  4. 패널 목록·좌표 표시(viewer-panels.css)는 프로그램 레이아웃이며 --hm-sw-viewer-* 토큰만 사용(규칙 범위 안).
• CAD 엔진·도면 처리 코드는 변경하지 않았습니다.

6. 테스트 결과와 실패 분류

테스트	결과	분류
footer-popup-viewer-refinement	47/47	—
integrated-improvement options·popup	89/89	—
theme-inheritance	23/23	—
viewer.browser	70/70	—
storybook-simplification	9/9	—
footer-design-review(신규)	21/21	—
overview	51 PASS / 3 FAIL	FAIL 3 = 과거 Commit(50bf5bd) 대비 Story 수(24, 현재 40)·소스 동일성 스냅샷 → 기존(오래된 스냅샷 테스트). 행동 검사는 모두 PASS
overview-firefox	9/9	—
dropdown-consolidation	223 PASS / 5 FAIL	FAIL 5 = c165753 대비 Story 수·소스·git diff 스냅샷 → 기존
home-menu-integration	22/23	FAIL 1 without homeMenu: logo click… → 기존(이전 보고에서 47972c5로 재현, 이번 실행도 같은 항목·같은 메시지)
storybook-unused-removal	93 중 FAIL 5	기존(10-19 inventory·source 스냅샷, 이전 보고와 같은 5건)
range-cross-browser, property-fields, property-close	미실행	기존 — 삭제된 Story(sw-header--property-panel, --property-fields)를 엶. 속성창 동작은 footer-popup-viewer-refinement·integrated-improvement popup·overview가 대신 검사
typecheck(workspace), build:sw, build-storybook, check:ai-docs, ai-docs.check 37/37	PASS	—

글꼴 변경으로 새로 생긴 실패: 0건(그리기모드 잘림은 테스트 실패가 아니라 측정으로 발견해 수정). 스냅샷 테스트는 삭제·완화하지 않았습니다 — 최신 Story 구조로 기준을 다시 잡으려면 별도 승인이 필요합니다(기준 스냅샷 교체 = QA 기준 변경).

7. 미검증 · 남은 항목

• REVIEW REQUIRED: Header 고정 폭 값 칸의 0.3~1.5px 합성 Bold 초과(Standard, 0_Layer_Cludmark, 1.00), Footer POLYGON/WIPEOUT 잘림 — 굵기 정책(700) 또는 Figma 칸 폭 결정 필요.
• 미검증: 돋움이 없는 macOS·Linux는 Malgun Gothic → Apple SD Gothic Neo → sans-serif로 대체(실기기 미검증).
• 미실행: viewer-regression.browser.mjs(기준선 픽셀 비교). 이 테스트는 변경 전(base)과 변경 후 Storybook 두 개를 받아 .hm-sw-header·.hm-sw-property 요소를 픽셀 단위로 비교합니다. 이번 변경은 글꼴 자체를 바꾸므로 base(Noto) 대비 모든 텍스트 픽셀이 달라지는 것이 의도된 결과이고, 실행하려면 454472d 기준 Storybook을 별도로 빌드해 띄워야 합니다(같은 dist를 쓰는 build 동시 실행 금지). 픽셀 동일성 대신 같은 페이지 Noto 주입 비교(§2)·계산값·화면 캡처로 레이아웃 차이를 확인했습니다.
• 별도 개선 대상(이번 범위 밖, 원본 수정 금지): 소비 프로젝트의 ① 화면 루트 className="hm-sw-theme" 직접 사용(→ <SWTheme>) ② Web Progress를 허용 지점 밖에서 사용 ③ Web 시맨틱 토큰·--hm-font-family-base·body 글꼴 재정의.
• 원본 HMDesignSwTest-viewer는 무변경 상태를 유지합니다.
• Commit 분리 계획(승인 후): ① feat(sw): default font Dotum — sw.css·sw-footer.css ② test(sw): theme / consumer tests for the Dotum default — 테스트 2개·sw-theme.stories.tsx·footer-design-review ③ docs: SW Dotum / Web Noto font rule — AI 문서·README·사본 ④ docs(sw): Dotum QA evidence — 이 보고서·sw-dotum-font-qa/.