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](./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/](./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/`.