72337b7ee0
Some checks failed
ci / build (push) Failing after 5s
- 핵심 규칙 6: 완료의 정의는 게이트 통과. 사용자를 QA로 쓰지 않는다 - 5단계 기계 검사 4번째: design-gate 실행 의무화 - references/audit-gate.md: 사고-검사 매핑, SEO/meta 체크리스트, OS/브라우저 특성, 하니스 규칙 - tools/design-gate.mjs: 범용 게이트(메타/SEO·대비·수축·리듬·트랙·스케일×폭 + 옵션 L0/L3/L4, checks 깊은 병합) - 리듬·트랙 불변식: 숫자 라벨 등폭·빈 셀 트랙 균일·등간격 — 시간표 자동배치 결함 재현 픽스처 검출, 앱 15뷰 통과(오탐 0) feat(site): 관리 앱 2종 프로덕션 콘솔(v6→v18) - 가온 학적부 9뷰·두레 수강신청 6뷰: shadcn 문법, Pretendard/Noto Serif/IBM Plex 폰트 전략, 볼드 금지(400/500/600), WCAG AA 대비 전면 교정, 한글 keep-all 조판 - LMS 필수 요소(알림 센터·공지·진도·평가 유형·출결 사유·학점 경고), 12명 기준 데이터 정합, SEO 구조(h1 유일·OG/twitter·og.png) - 시간표 자동배치 결함 수리(명시적 격자 좌표) - QA 게이트: L0 stylelint/html-validate · L1 단위 30 · L2 감사 61+불변식 · L3 시각회귀 30화면 · L4 WebKit · L5 키보드 탐색 — npm run verify 실패 시 배포 금지 체인
139 lines
12 KiB
Markdown
139 lines
12 KiB
Markdown
# 디자인 원론·타이포그래피·UX 방법론 조사서 — v11 적용 편
|
||
|
||
조사일 2026-08-22. 14개 웹검색 + 원전 문서, 고유 출처 110여 개.
|
||
가온 학적부·두레 수강신청 두 데모의 전 페이지·전 요소 개정 근거로 쓴다.
|
||
항목 앞 [G]=가온 적용 [D]=두레 적용 [both]=양쪽 적용.
|
||
|
||
## A. 타이포그래피 원론 (24)
|
||
|
||
1. [both] 본문 행길이 45–75자(공백 포함), 이상값 66자 — UXPin, Baymard, The Crit.
|
||
2. [both] 데스크톱 본문 행간 1.5–1.6(라틴 기준) — Pimp My Type.
|
||
3. [both] 한글은 수평 흐름이 없어 행간을 라틴보다 넓게 — 1.6–1.7 권장 — 박스블로그(한글 웹 타이포그래피).
|
||
4. [both] 한글 자간 기본 0이 원칙(글자사이 0 배열) — W3C 한국어 조판 요구사항.
|
||
5. [both] 큰 제목에만 자간 축소(tracking-tight) 허용, 본문 금지 — The Crit/Smashing.
|
||
6. [both] 웹 본문 최소 16px는 '문서 사이트' 기준이며, 밀도 높은 관리 콘솔은 14px가 업계 표준(shadcn·Ant) — Ant Design font spec.
|
||
7. [both] 타입 스케일은 비율로: Major Third(1.25)가 UI에서 절제된 위계 — Typescale.com, Typographymaster.
|
||
8. [both] 16px 기준 1.25 스케일: 16→20→25→31→39 — Typescale.com.
|
||
9. [both] 위계는 크기·웨이트·색 3축으로 만든다(한 축에만 의존 금지) — Design Systems Collective.
|
||
10. [both] 볼드(700) 금지 — 웨이트는 수치로: 본문 400, 강조 500, 제목·버튼 600. 2–3 웨이트 상한 — Ant Design, DesignerUp.
|
||
11. [both] 가변 폰트로 중간 웨이트(550·650)를 쓰면 합성 볼드가 없다 — MDN Variable Fonts, web.dev.
|
||
12. [both] 없는 웨이트는 브라우저가 합성한다(faux bold) — font-synthesis-weight: none 으로 차단 — A List Apart 'Say No to Faux Bold'.
|
||
13. [both] strong/b 기본 700을 재정의(600)해 UA 볼드가 새지 않게 한다 — MDN font-weight.
|
||
14. [both] 수치 데이터에는 tabular-nums — 자리 흔들림 방지 — typography 지침(스킬 typography.md §5와 일치).
|
||
15. [both] 표 숫자열은 우측 정렬(자릿수 정렬), 텍스트 좌측 — Science Editor, UX Planet.
|
||
16. [both] 표 헤더 정렬은 해당 열 데이터와 일치 — Pencil & Paper, Mission Log.
|
||
17. [G] 세리프(Noto Serif KR)는 제목·표지에만 — 고딕 본문과 대비 — Noto Serif KR 특성.
|
||
18. [D] 기술·행정 문서 톤에는 네오그로테스크(IBM Plex Sans KR) — IBM Plex 소개.
|
||
19. [both] 한글 웨이트는 라틴보다 1단계 낮게 보정(한글 700이 라틴 700보다 무겁게 보임) — W3C/한글 조판.
|
||
20. [both] 줄바꿈이 표를 깨지 않게 긴 식별자는 word-break: keep-all + overflow-wrap — 한글 조판.
|
||
21. [both] 축 소형 라벨(≤11px)은 500 이상 웨이트로 — 작은 크기에서 가늘면 소실 — UXPin.
|
||
22. [both] 문단(공지 본문 등)은 max-width 65–70ch 제한 — Baymard.
|
||
23. [both] 행간·자간은 폰트마다 다르게 재준다(폰트 바꾸면 타이프 재조정) — Figma 타이포그래피 가이드.
|
||
24. [both] 디스플레이 서체는 본문 금지, 위계는 웨이트+여백으로 — 표준 원론.
|
||
|
||
## B. 색·대비 (12)
|
||
|
||
25. [both] 본문 텍스트 대비 4.5:1 이상(WCAG 1.4.3 AA) — W3C WCAG 2.2.
|
||
26. [both] 큰 텍스트(≥24px 또는 ≥18.66px 굵음)는 3:1 — W3C.
|
||
27. [both] UI 구성요소·포커스 표시 3:1(1.4.11 비텍스트 대비) — W3C.
|
||
28. [both] AAA는 7:1 — 준거하는 편이 좋으나 AA가 의무선 — WebAIM.
|
||
29. [both] 회색 보조 텍스트(#a1a1aa급, 약 2.6:1)는 실망률 상위 원인 — 본문용 보조색도 4.5:1 필요 — WCAG.
|
||
30. [both] 60-30-10: 지배 60 배경, 부차 30 카드·내비, 강조 10 CTA — NN/g Using Color.
|
||
31. [both] 강조색은 희소해야 시그널이 된다(남발 금지) — LogRocket 60-30-10.
|
||
32. [G] 상태색은 소프트 배경+짙은 잉크 조합이 배지 표준 — shadcn 문법.
|
||
33. [both] 색만으로 상태를 구분하지 않는다(형태·라벨 병용) — WCAG 색 사용.
|
||
34. [both] 차트 색은 데이터-잉크 비율을 해치지 않게 — Tufte/Few.
|
||
35. [D] 벽돌(주황) 강조는 10% 이내 면적에서 — 60-30-10.
|
||
36. [both] 그림자는 계층 신호(스택 깊이)로만 — 실제 광원 흉내 금지 — shadcn/Material elevation.
|
||
|
||
## C. UX 법칙·휴리스틱 (28)
|
||
|
||
37. [both] 닐슨 1 시스템 상태 가시성 — 저장·전환·계산 즉시 피드백(aria-live) — NN/g.
|
||
38. [both] 닐슨 2 실제 세계 일치 — '장부''도장' 등 도메인 언어 — NN/g.
|
||
39. [both] 닐슨 3 사용자 통제와 자유 — 모달 닫기·신청 취소·되돌리기 — NN/g.
|
||
40. [both] 닐슨 4 일관성 — 같은 동작은 같은 컨트롤(칩·배지·버튼 문법 통일) — NN/g.
|
||
41. [both] 닐슨 5 오류 예방 — 겹침 수강 즉시 차단, 채점 실수 방지 — NN/g.
|
||
42. [both] 닐슨 6 재인优于회상 — 아이콘+라벨 병기, 현재 위치 표시(크럼브) — NN/g.
|
||
43. [both] 닐슨 7 유연성·효율 — 필터·검색·키보드(Esc) — NN/g.
|
||
44. [both] 닐슨 8 미니멀·미학 — 장식 아이콘 금지, 정보 밀도 우선 — NN/g.
|
||
45. [both] 닐슨 9 오류 인지·회복 — 오류는 눈에 띄고 해결책 제시 — NN/g Error-Message Guidelines.
|
||
46. [both] 닐슨 10 도움말 — 데모는 요소 옆 한 줄 안내로 대체 — NN/g.
|
||
47. [both] 피츠 법칙: 목표는 크고 가깝게 — 주 액션 버튼 높이 36px+, 모바일 포인터 40px+ — NN/g Fitts.
|
||
48. [both] 힉 법칙: 선택지를 묶어(chips 그룹) 결정 비용 절감 — Laws of UX.
|
||
49. [both] 제이콥 법칙: 익숙한 패턴(사이드바+탭+모달) 유지 — Laws of UX.
|
||
50. [both] 밀러 법칙: 작업 기억 7±2 — 내비를 3그룹으로 청킹 — Laws of UX.
|
||
51. [both] 근접성: 관련 항목은 간격으로 묶고 무관은 여백으로 분리 — NN/g Gestalt Proximity.
|
||
52. [both] 유사성: 같은 기능은 같은 모양(모든 row-open은 같은 스타일) — IxDF.
|
||
53. [both] 공통 영역: 테두리/배경이 하나의 그룹으로 만든다(패널) — UX Tigers.
|
||
54. [both] 폰 레스토르프: 격차 강조는 하나만(오늘 칸) — Laws of UX.
|
||
55. [both] 도허티 임계 400ms — 상태 전환은 100–200ms 내 — Laws of UX.
|
||
56. [both] 인지 부하 감소: 점진적 공개(공지 아코디언) — IxDF.
|
||
57. [both] 미적-사용성 효과: 심미성은 사용성 인식을 높인다(단 장식은 8번과 충돌 금지) — Laws of UX.
|
||
58. [both] 시리얼 포지션: 중요 항목은 목록 처음/끝에 — Laws of UX.
|
||
59. [both] 피크-엔드: 마지막 화면(리포트)의 완결감 — Laws of UX.
|
||
60. [both] 터치 대상 최소 24px(WCAG 2.5.8 AA), 권장 44px(HIG)/48px(Material) — WCAG 2.2·Apple HIG.
|
||
61. [both] 포커스 표시 필수(2.4.7) — outline 2px + offset, 색 대비 3:1 — WCAG.
|
||
62. [both] 모바일에서도 포커스가 가려지지 않게(2.4.11) — WCAG 2.2 신설.
|
||
63. [both] 애니메이션은 200ms 이내·레이아웃 속성 아님(합성만) — 표준 퍼포먼스 원칙.
|
||
64. [both] 호버 상태는 포인터 장치에서만(@media hover) — 표준.
|
||
|
||
## D. 대시보드·데이터 (12)
|
||
|
||
65. [G] 대시보드는 한 화면에서 '한눈에' — 스크롤 없이 핵심 지표 — Stephen Few.
|
||
66. [G] 13가지 흔한 실수: 지나친 장식, 부정확한 차트, 무의미한 게이지 금지 — Few.
|
||
67. [both] 데이터-잉크 비율 최대화: 불필요한 눈금·테두리·3D 금지 — Tufte/Few.
|
||
68. [both] 막대 시작은 0부터 — 왜곡 금지 — Few.
|
||
69. [G] 요약 수치는 크게(24px+)·라벨은 작게 — Few/Plausible 실측.
|
||
70. [both] 표의 4가지 과제 지원: 찾기·비교·행 보기·편집 — NN/g Data Tables.
|
||
71. [both] 긴 표는 고정 헤더(sticky) 또는 페이지 단위 — NN/g.
|
||
72. [both] 빈 상태는 안내다: 무엇이 여기에 올지 + 다음 행동 — NN/g Empty States.
|
||
73. [both] 빈 상태·오류에 유머 남발 금지(건설적으로) — NN/g.
|
||
74. [D] 정원·여석 등 비교 데이터는 게이지가 아니라 숫자+막대 — Few.
|
||
75. [both] 시계열은 라인/막대, 구성비는 스택바 — Few/Tableau.
|
||
76. [both] 차트에 값 라벨을 직접(범례 왕복 금지) — Few.
|
||
|
||
## E. 레이아웃·폼·내비 (16)
|
||
|
||
77. [both] 8pt 그리드: 여백·크기는 8의 배수(4 서브그리드 허용) — Medium 8-Point Grid.
|
||
78. [both] 수직 리듬: 요소 높이도 그리드에 맞춘다 — VMware Tanzu.
|
||
79. [both] 관리 콘솔 사이드바 200–260px 폭이 표준 — UX Planet Sidebar.
|
||
80. [both] 링크 7개 이상이면 사이드 내비가 상단 내비보다 낫다 — UX Design Institute.
|
||
81. [both] 모달은 화면의 ~25%, 모바일은 전면 — Appcues, A11Y Collective.
|
||
82. [both] 모달 열리면 포커스 진입·닫히면 반환(native dialog) — Userpilot/LogRocket.
|
||
83. [both] 모달은 짧은 집중 작업만, 긴 작업은 페이지 — NN/g Modal vs Non-modal.
|
||
84. [both] 폼 라벨은 상단(가로 공간 절약·스캔 빠름) — NN/g Forms.
|
||
85. [both] 입력 오류는 해당 필드 옆 + 상단 요약 — NN/g.
|
||
86. [both] 취소는 두 번째 버튼, 파괴적 액션은 색으로 구분 — 표준.
|
||
87. [both] 스티키 요소는 배경·테두리로 콘텐츠와 분리 — 표준.
|
||
88. [both] 뷰포트 320px에서도 수평 스크롤 0(최소 방어선) — 표준 반응형.
|
||
89. [both] 그리드 축소 트랙은 minmax(0,1fr) — 이 프로젝트 재발 결함.
|
||
90. [both] overflow-x:auto 에는 overflow-y:hidden 명시(반대축 auto 함정) — 이 프로젝트 규칙.
|
||
91. [both] 콘텐츠 폭 상한(본문 1132px 등) 유지 — 독서 최적화.
|
||
92. [both] 요소 사이 8/12/16/24/32 간격 스케일만 사용 — 8pt.
|
||
|
||
## F. 폰트 선택 (13)
|
||
|
||
93. [G] 본문 Pretendard Variable(SIL OFL, 동적 서브셋) 유지 — 한국 UI 표준.
|
||
94. [G] 제목·표지 Noto Serif KR(SIL OFL, 가변) 600 — 학적부 서류 결.
|
||
95. [D] 본문·제목 IBM Plex Sans KR(OFL, 400/500/600) — 대학·기술 문서 톤.
|
||
96. [D] 마스트헤드·과목군 라벨 Noto Serif KR 600 — 공문·신문 결.
|
||
97. [both] JetBrains Mono(OFL) 숫자·코드 — 유지.
|
||
98. [both] SUIT(SIL OFL)는 대안 후보 — UI 전용 고딕 — sun.fo.
|
||
99. [both] 웨이트 3개 상한: 400/500(또는 550)/600 — Ant Design.
|
||
100. [both] Google Fonts CDN 사용 시 preconnect 필수(도메인 3개 상한) — 표준.
|
||
101. [both] 한글 웹폰트는 동적 서브셋 빌드로 전송량 최소 — Pretendard 문서.
|
||
102. [both] font-display: swap 기본 — 스킬 typography.md §3.
|
||
103. [both] 세리프+고딕 조합에서 크기감 차이는 size-adjust/@font-face 보정 — typography.md §6-3.
|
||
104. [both] 라틴 우선 스택으로 숫자·영문 조악함 방지 — typography.md §6-3.
|
||
105. [both] '왜 이 폰트인가' 한 문장 답이 없으면 바꾸지 않는다 — typography.md §1-4.
|
||
|
||
## 주요 출처 (110여 개 중 핵심)
|
||
|
||
- 타이포그래피: UXPin, Baymard Institute, Smashing Magazine, USWDS, Pimp My Type, The Crit, Medium(Design Bootcamp), Typescale.com, Typographymaster, Imperavi, Blake Crosley, Kalamuna, Figma Resource Library, 박스블로그(parksb), KRDS, W3C 한국어 조판 요구사번역, 요즘IT, 디자인베이스, 브런치
|
||
- 웨이트/가변: MDN(font-weight·Variable Fonts), web.dev, WebKit Blog, A List Apart, bnijenhuis.nl, Jono Alderson, Glyphs Forum, Marmelab, Ant Design, Design Systems Collective, DesignerUp, Udacity
|
||
- UX: NN/g(10 휴리스틱·Fitts·표·빈 상태·오류 메시지·색·모달·근접성), Laws of UX, IxDF, UX Planet, Toptal, Justinmind, Pencil & Paper, Reddit r/UXDesign, Code Theorem, Medium, Cap3, uxtoast, Muzli, Bejamas, UX Tigers
|
||
- 대시보드: Stephen Few(Information Dashboard Design), Perceptual Edge, Tableau, MS Fabric, MSU, ExcelCharts, The Data School
|
||
- 표·레이아웃: Science Editor, Mission Log, UX StackExchange, Navbar Gallery, ALF Design, HashBuilds, Eleken, Userpilot, A11Y Collective, LogRocket, Appcues, UXPatterns.dev, Glow, VMware Tanzu, Prototypr, Spec.fm, UX Design CC
|
||
- 접근성: W3C WCAG 2.2(1.4.3·1.4.11·2.4.7·2.4.11·2.5.8), WebAIM
|
||
- 색: NN/g Using Color, LogRocket, UX Planet, UX Design CC, Webflow, WPMayor
|
||
- 폰트: Google Fonts(IBM Plex Sans KR·Noto Serif KR), sun.fo(SUIT), 산돌구름, Fontsource, GitHub SUIT, Monoplex KR
|