designpaca/packages/skill/references/evidence-ledger.md
Yun Chan 6805fb2be7 feat(skill): absorb external design skills, restore interview gate, add review route
- Restore the step-0 interview as a mechanical gate the skill explicitly
  depends on; add harness.md (per-harness question tools, limits,
  fallbacks) and brief-interview.md (slots, question cards, rounds).
- Add 10 reference docs absorbed from external design skills
  (accessibility, interaction-feel, elevation, color, icons, product-copy,
  component-systems, critique, change-review, print-email) and extend
  existing references.
- Add a review-only route and two hard-gate clauses (truncated content
  reachability, three-flashes limit).
- design-gate: split tap targets into WCAG 2.5.8 and 44px contract layers,
  run axe-core when available, and fix false positives found on a real
  site (decorative alt="", stacked wordmark line count, url-only pages).
- lint-skill: fail if the interview gate section or its links disappear.
- Ship agents/openai.yaml and THIRD_PARTY_NOTICES.md.
2026-09-24 13:26:03 +09:00

45 KiB
Raw Blame History

evidence ledger — 판단의 출처와 한계

조사일: 2026-09-12. 이 목록은 읽을거리 순위가 아니라, 디자인 결정에 쓸 수 있는 근거의 범위다. normative는 적합성 조건, research는 특정 인간-컴퓨터 상호작용의 경향, practice는 설계 절차, case는 한 사례 또는 심사 체계, forecast는 전망, bibliography는 서지 확인만 뜻한다. 사례·전망·서지는 효과나 인과를 증명하지 않는다.

ID 출처·날짜 종류 실제로 지지하는 주장 적용 조건 / 잘못된 일반화 구체 검증
WCAG-22 WCAG 2.2 · 2023-10-05 normative A·AA·AAA는 서로 다른 적합성 수준이며 AAA만으로 모두에게 접근 가능해지지는 않는다 법·계약 목표는 별도로 확인한다. AA를 자동 법적 보장이라 부르지 않는다 요구 수준과 전 과정의 SC를 매핑한다
WCAG-READ contrast · resize · reflow · text spacing · 2023 normative 일반 텍스트 AA 4.5:1/큰 텍스트 AA 3:1, 200% 확대, 320 CSS px 재배치, 사용자 지정 간격에서의 내용·기능 보존을 각각 요구한다 로고·비활성·2차원 배치 같은 예외가 있으며, 이는 단일 ‘좋은 조판’ 수치를 만들지 않는다 실제 상태에서 대비, 200% 확대, 320px/400%, W3C text-spacing 주입을 함께 검사한다
WCAG-TARGET SC 2.5.8 · 2023 normative 포인터 입력 대상은 최소 24×24 CSS px(예외 포함)인 AA 기준이 있다 44px를 모든 대상의 WCAG AA 요건으로 말하지 않는다 실제 clickable box와 인접 대상 간격을 측정한다
WCAG-MOTION SC 2.2.2 · 2023 normative 자동으로 시작해 5초 넘게 병행되는 움직임은 멈춤·숨김·일시정지 제어가 필요할 수 있다 모든 모션 금지가 아니다 자동 콘텐츠마다 제어와 키보드 접근을 시험한다
W3C-REDUCED Media Queries 5 · 확인 2026-09-12 practice CSS Media Queries 명세는 prefers-reduced-motion 질의를 정의한다 WCAG 성공 기준이나 모든 모션 정책의 적합성 선언이 아니다 시스템 설정에서 핵심 상태 피드백이 남는지 확인한다
W3C-FONT CSS Fonts 4 · 확인 2026-09-12 practice CSS Fonts 명세는 font-display의 로딩 기간 표시 전략을 정의한다 WCAG 적합성 요건이 아니며, swap이 항상 최선이거나 CLS를 반드시 만든다고 단정하지 않는다 느린 네트워크에서 FOUT/FOIT·레이아웃을 캡처한다
W3C-SIZE CSS Fonts 5 · 확인 2026-09-12 practice CSS Fonts Level 5 명세는 size-adjust descriptor를 정의한다 문서 상태·브라우저 지원을 별도 확인하며, 임의 백분율을 보편 처방으로 복사하지 않는다 대상 문자열·실제 폴백으로 줄바꿈과 높이를 비교한다
NNG-HEUR 10 usability heuristics · 마지막 검토 2024-01-30 practice 최소성은 관련 없는 정보가 관련 정보의 가시성을 경쟁시킨다는 휴리스틱이다 ‘미니멀=요소 삭제’나 전환 효과의 증명이 아니다 핵심 과업별 정보·피드백·복구 가능성을 리뷰한다
NNG-VISUAL Principles of visual design · 확인 2026-09-12 practice scale, visual hierarchy, balance, contrast, Gestalt principles를 시각 디자인의 검토 차원으로 설명한다 특정 크기 비율·색 수·자동 심미성 점수를 처방하지 않는다 회색조와 실제 콘텐츠에서 우선순위·묶음·대비를 비교한다
NORMAN-SIGN Signifiers, not affordances · 2008 practice 사용자가 어디서 어떻게 행동할지 알게 하는 지각 가능한 단서는 signifier로 설명할 수 있다 시각적으로 버튼처럼 보이면 이해·접근성이 자동 보장된다는 뜻이 아니다 첫 사용자가 라벨·상태·피드백으로 행동을 예측하는지 관찰한다
KRUG Don’t Make Me Think Revisited sample · 확인 2026-09-12 bibliography 공개 샘플은 Krug의 저작과 ‘명확한 선택지’라는 교육적 관점을 확인하는 범위다 메뉴 수 고정 규칙이나 실험적 성과 증거가 아니다 애매한 라벨을 대표 사용자의 과업 탐색으로 시험한다
FITTS Fitts’s law · 1954 research 목표까지 거리와 이동축의 폭은 조준 시간에 관계한다 메뉴 개수 공식이나 모바일 타깃 크기 법규가 아니다 자주 쓰는 행동의 실제 거리·hitbox·오입력을 관찰한다
HICK Hick · 1952 research 선택 신호의 정보량과 반응 시간 관계를 실험했다 ‘7개 이상 메뉴 금지’로 변환하지 않는다 사용자 목표별 선택지의 분류·라벨·성공 시간을 테스트한다
MILLER Miller · 1956 research 단기 기억의 절대적 한계가 아니라 chunking과 과제 맥락을 논의했다 7±2를 내비게이션 항목 수 규칙으로 쓰지 않는다 회상 대신 과업 완료·오류·도움 요청을 관찰한다
GESTALT Wagemans et al. · 2012 research 근접성·유사성·공통 영역 같은 grouping 원리와 figure-ground를 현대적으로 검토한다 정렬·카드·색 하나만으로 이해·전환이 보장된다는 뜻이 아니다 관련 항목의 묶음과 분리, 선택 상태를 회색조·키보드·실제 과업에서 확인한다
COGNITIVE-LOAD Sweller · 1988 research 문제 해결에서 작업 기억과 문제 구조의 상호작용을 다룬다 정보량을 무조건 줄이거나 단일 요소 수 규칙으로 환원하지 않는다 처음 하는 과업에서 단계·용어·기억해야 할 상태를 줄이고 오류·완료 시간을 관찰한다
AWWWARDS Evaluation system · 확인 2026-09-12 case 해당 심사는 Design 40 / Usability 30 / Creativity 20 / Content 10으로 채점한다 배점 비율이 두 요소의 효과 크기나 사업 성과를 뜻하지 않는다 제출 목적일 때 네 차원을 별도 체크한다
WEBBY Judging criteria · 확인 2026-09-12 case Webby는 콘텐츠·구조/내비게이션·시각 디자인·기능성·상호작용·전반 경험을 심사한다 수상은 특정 패턴의 보편적 효율 증거가 아니다 사례를 해체하되 과업·접근성·성능을 별도 검증한다
DROPBOX Dropbox brand · 확인 2026-09-12 case 브랜드 사이트가 공개한 자산·원칙의 사례다 브랜드의 자체 설명을 사용자 효과로 해석하지 않는다 사용할 요소를 렌더·접근성·브리프 적합성으로 다시 판정한다
AREA17 AREA 17 × Pentagram · 확인 2026-09-12 case 제작사가 프로젝트 접근을 설명하는 사례다 제작사 주장은 독립 성과 검증이 아니다 구조와 시스템 선택만 참고하고 결과는 직접 비교한다
UNSEEN Unseen 2025 wrapped · 확인 2026-09-12 case 시간·문화 맥락이 강한 실험적 웹 표면의 사례다 사이트 자체만으로 사용성·전환 효과를 주장하지 않는다 모션 off·키보드·모바일에서 핵심 메시지를 검증한다
CSSDA-UNSEEN CSS Design Awards listing · 2026-03-09 case CSSDA가 해당 작품을 WOTD로 기록한 사례다 단일 수상을 스타일 효과의 일반 증거로 쓰지 않는다 작품의 제약과 대상이 현재 브리프와 맞는지 비교한다
CWV Web Vitals · 2024-10-31 practice CWV의 good 기준은 LCP ≤2.5s, INP ≤200ms, CLS ≤0.1이며 field 75th percentile로 판정한다 Lighthouse 한 번이나 개발 로컬 측정을 field 적합성이라 부르지 않는다 RUM/CrUX와 모바일·데스크톱 p75를 기록하고, 로컬은 회귀 proxy로 표기한다
CWV-METHOD Threshold methodology · 2025-05-07 practice CWV 임계값은 단일 인간 지각값이 아니라 연구·실사용 데이터·달성 가능성을 함께 고려한다 한 임계값을 모든 과업의 만족도 원인으로 단정하지 않는다 성능 수치와 과업 관찰을 분리 보고한다
IBM-GRID Carbon 2x Grid · 확인 2026-09-12 practice 제품 UI에서 그리드·gutter·breakpoint를 일관되게 적용하는 방법의 예다 모든 브랜드가 Carbon 격자를 써야 한다는 규범이 아니다 콘텐츠 폭, 정렬선, 작은 폭의 재배치를 검증한다
IBM-DATA IBM data visualization basics · 확인 2026-09-12 practice 데이터 표현은 목적·비교·맥락에 맞춰 선택해야 한다 장식적 차트나 색만으로 의미가 생긴다고 보지 않는다 질문-표현-축/라벨-대체 접근을 연결해 검토한다
IFD-TREND iF Design Trend Report 2025 · 2025 forecast 기관의 거시 디자인 전망이다 웹 UI의 검증된 성과나 필수 스타일 목록이 아니다 브리프·사용자 조사와 맞을 때만 가설로 쓴다
DC-DIAMOND Design Council Double Diamond · 확인 2026-09-12 practice 발견·정의·개발·전달을 오가며 다양한 답을 탐색하고 작은 시험으로 버리거나 개선하는 프레임을 소개한다 고정 단계 수나 모든 프로젝트의 의무 절차로 쓰지 않는다 불확실성이 큰 결정의 대안·시험·폐기 근거를 기록한다
VA-MOFFAT Curtis Moffat: working methods · 2025-09-24 case contact sheet, 크롭, 비중심 배치가 작가 작업에서 어떻게 쓰였는지 보여 주는 사례다 웹 성과나 보편 구도 규칙의 증거가 아니다 이미지 선택·크롭의 목적과 전후 렌더를 비교한다
CH-DESCRIPTION Cooper Hewitt image-description guidelines · 확인 2026-09-12 practice 중요한 내용을 먼저 두고 공간 순서와 맥락에 맞춰 이미지를 설명하는 방법을 제시한다 박물관의 단어 수를 보편 alt 길이 규칙으로 바꾸지 않는다 정보성 이미지에서 목적·핵심 내용·대체 설명을 함께 검토한다
LUPTON-POSTERS How Posters Work · 확인 2026-09-12 bibliography Lupton의 책과 포스터를 분석 대상으로 삼는 출판 맥락을 확인하는 출발점이다 이 항목은 책 본문을 정독했거나 특정 구성 규칙을 인용했다는 뜻이 아니다 판본과 페이지를 확보한 뒤 적용할 개념과 한계를 기록한다
GOV-IMAGES GOV.UK Design System: images · 확인 2026-09-12 practice 정부 서비스에서 목적에 맞는 사진·도식·대체 설명을 선택하는 지침이다 상업 브랜드에 무드 이미지를 금지하는 일반 규칙으로 확대하지 않는다 이미지가 과업 정보·맥락·접근성에 기여하는지 확인한다
GOV-TEST GOV.UK moderated usability testing · 확인 2026-09-12 practice 현실적인 중립 과업으로 실제 또는 예상 사용자의 행동과 어려움을 관찰하는 방법을 설명한다 특정 참여자 수·시간·성공률을 보편 통과선으로 만들지 않는다 과업 문구, 사용 환경, 행동·오류·중단 관찰을 분리 기록한다
NNG-AESTHETIC Aesthetic-usability effect · 2024-02-03, 검토 2026-09-01 practice 시각적 호감이 사용성에 대한 지각을 높일 수 있어 실제 과업 결과와 구분해 볼 필요를 해설한다 원 논문 전문을 읽었거나 호감이 실제 사용성을 보장한다고 주장하지 않는다 취향·첫인상과 과업 행동·오류를 별도 결과로 남긴다
W3C-USER-EVAL Involving users in evaluating web accessibility · 2024-04-30 practice 사용자 평가는 표준 기반 적합성 평가를 보완하며 둘을 함께 써야 한다고 설명한다 적은 표본이나 한 번의 평가를 모든 사용자에게 일반화하지 않는다 WCAG 평가와 사용자 관찰의 질문·결과를 분리해 기록한다
SWISS-NB The International Style 1950–1970 · 확인 2026-09-12 bibliography 스위스/국제 타이포그래피의 역사·소장 맥락을 소개한다 역사 양식을 기능·전환의 보편 처방으로 바꾸지 않는다 그리드·타입 선택의 문화적 근거만 명시한다
BRINGHURST The Elements of Typographic Style · 확인 2026-09-12 bibliography Bringhurst 4.0의 서지·출판 정보를 확인하는 출발점이다 이 ledger는 책 본문을 읽거나 특정 규칙을 인용했다는 뜻이 아니다 판본을 확보한 뒤 페이지 단위로 별도 기록한다
LUPTON Thinking with Type, 3rd ed. · 2024 bibliography Lupton 저작의 3판 출판 정보를 확인하는 출발점이다 이 ledger는 본문 요약이나 보편 수치 근거가 아니다 판본을 확보한 뒤 개념·예시 페이지를 별도 기록한다
MULLER-BROCKMANN Grid systems in graphic design · 확인 2026-09-12 bibliography Müller-Brockmann 저작의 출판사 서지 정보를 확인하는 출발점이다 그리드를 모든 과업의 정답으로 만들지 않는다 판본을 확보한 뒤 grid 선택의 목적·예외·검증을 분리 기록한다

외부 스킬 출처 (2026-09-24 흡수)

조사일: 2026-09-24. 아래는 docs/design-skills-intake-plan-20260924.md로 흡수한 외부 디자인 스킬 10종과 better-interface 자매 스킬 7종의 출처 ID다. 저장소·커밋·라이선스 전문은 THIRD_PARTY_NOTICES.md에 있다. 이 스킬들의 종류는 모두 practice(실무자가 정리한 설계 절차)이며, "실제로 지지하는 주장"은 그 스킬이 실제로 제공하는 실무 지침·수치 시작값으로 좁혀 쓴다. 공통된 잘못된 일반화는 스킬 저자 개인·소속 팀의 관찰이나 수치를 웹 디자인 전반의 보편 규범으로 확대하는 것이다.

ID 출처·날짜 종류 실제로 지지하는 주장 적용 조건 / 잘못된 일반화 구체 검증
SKILL-FRONTEND-DESIGN anthropics/skills — skills/frontend-design · 커밋 34040c9 (2026-09-10) · Apache-2.0 practice AI가 생성한 웹 디자인이 반복하는 제네릭 클러스터(색상·타이포·카드·모션 패턴)를 실무자가 정리한 점검표이며, 특정 액센트 hex가 Claude 계열 도구의 지문으로 읽힐 수 있다는 관찰을 포함한다 저자가 관찰한 클러스터 분류나 예시를 웹 디자인 전반의 보편 규범으로 확대하지 않는다. 저자 자신의 프로젝트 경험에서 추출한 관찰 후보다 지목된 hex·패턴이 실제 렌더에 나타나는지 대조하고, "다른 업종 브리프에도 같은 선택이 그대로 나왔을까"라는 반사실 질문으로 재확인한다
SKILL-APPLE-DESIGN emilkowalski/skills — skills/apple-design · 커밋 85e8e23 · MIT practice Apple 플랫폼의 인터럽트 가능한 제스처·스프링·모멘텀·러버밴드 구현을 정리한 수치 시작값과 구현 패턴이다(damping/response, 속도 인계, 모멘텀 투사 계수, 러버밴드 계수 등) 저자가 제시한 계수를 물리 법칙이나 플랫폼 표준으로 취급하지 않는다. Apple풍 미학을 모든 브리프의 기본값으로 삼지 않는다(조건부 항목). 원 스킬이 수치에 1차 출처(WWDC 영상·타임스탬프)를 달지 않았다 — 3rd-party 재해석으로 취급하고 옮길 때 그 사실을 밝힌다 실제 구현에서 계수를 실측 조정하고, Apple풍이 브리프에 맞는 조건일 때만 적용한다
SKILL-EMIL-DESIGN-ENG emilkowalski/skills — skills/emil-design-eng · 커밋 85e8e23 · MIT practice 모션 구현 실무 지침(사용 빈도별 애니메이션 여부, 트랜지션과 키프레임의 차이, clip-path·드래그·툴팁 구현 레시피, 모션 QA 절차)이다 "ease-in 절대 금지" 같은 단정을 그대로 규범화하지 않는다. velocity 0.11 같은 매직넘버는 저자의 실측값이지 보편 상수가 아니다 레시피를 실제 컴포넌트에 적용해 프레임 단위로 재생해 보고, duration·easing은 프로젝트 토큰(--dur-*, --ease-*)에 맞춰 재조정한다
SKILL-BEAUTIFUL-SHADOWS MengTo/Skills — agent-skills/web-design/beautiful-shadows · 커밋 a965851 · MIT practice 3단(sm/md/lg) 다층 box-shadow 값과 컴포넌트 밀도별 단계 매핑을 제시하는 시작값 세트다 레이어 수가 늘수록 값이 커지고 진해지는 이유를 저자도 밝히지 않으므로 그 근거를 인용하지 않는다. Tailwind 임의값 문법은 그대로 쓰지 않고 CSS로 옮겨 쓴다 실제 배경·밀도에서 렌더해 과도한 틴팅·중첩을 확인한다
SKILL-WEB-A11Y addyosmani/web-quality-skills — skills/accessibility · 커밋 afa8da9 · MIT practice Lighthouse·axe 자동 검사 → 실패 노드 국소화 → 수동 검증 → 재감사로 이어지는 증거 우선 접근성 감사 루프와 "자동 점수 100은 준수를 뜻하지 않는다"는 절차 지침이다 이 검사 순서를 WCAG 적합성 판정 자체로 착각하지 않는다. 자동화 도구가 잡아내는 범위는 WCAG 성공 기준의 일부일 뿐이다 DevTools MCP나 axe-core가 있으면 실행하고, 없으면 미검증으로 보고하며 통과로 추정하지 않는다
SKILL-DESIGN-REVIEW Superfuture/design-review — design-review/skills/design-review · 커밋 d4d2609 · MIT(plugin.json 선언, 저장소에 LICENSE 파일 없음 — THIRD_PARTY_NOTICES.md 참고) practice 디자인 리뷰 finding을 What·Why·Fix 3요소와 심각도로 구조화하고, 입력 종류별 진입·자동 적용 화이트리스트를 정리한 리뷰 절차다 서체 개수 상한·타입 스케일 단계 수 같은 저자의 규범적 수치는 취향 규칙이지 하드 게이트가 아니다. 텔레메트리·유료 게이팅 요소는 흡수하지 않는다 finding마다 What·Why·Fix가 모두 채워졌는지, 심각도가 판정 위계와 일치하는지 확인한다
SKILL-SHADCN shadcn-ui/ui — skills/shadcn · 커밋 98a1fe6 · MIT practice 기존 컴포넌트 우선·합성 규칙(Dialog Title 필수 등)과 "추측하지 말고 사용자 대신 기본값을 고르지 말라"는 안전 병합 절차다 CLI 플래그·레지스트리 스키마·Tailwind 매핑 치트시트는 designpaca가 프레임워크를 전제하지 않는다는 원칙과 충돌해 흡수하지 않는다. shadcn 같은 컴포넌트 기반은 브랜드 디자인 시스템 자체가 아니다 components.json 존재로 감지 여부를 판정하고, 감지했을 때만 component-systems.md 절을 연다
SKILL-IMPECCABLE pbakaus/impeccable — skill/reference/adapt.md, skill/reference/adapt.native.md(iOS↔Android 관용구 대응표) · 커밋 e0881d2 · Apache-2.0 practice 입력 방식을 화면 크기와 별개 축으로 다루는 pointer·hover 쿼리, 컨테이너 쿼리, 커스텀 컨트롤 제스처 검증(레이아웃 통과 ≠ 제스처 통과)에 대한 구현 코드와 절차, 그리고 iOS↔Android 플랫폼 관용구 대응표다 모바일 하단 내비 기본값 같은 저자의 결론은 기각한다(designpaca 결정표가 더 엄밀하다). 빌드 시점 하네스별 본문 컴파일 방식은 흡수하지 않는다 실제 포인터·터치 입력에서 코드를 재현하고, 제스처 검증은 레이아웃 검사와 분리해 수행한다
SKILL-BETTER-INTERFACE jakubkrehel/skills — skills/better-interface · 커밋 267330e · MIT practice 에스컬레이션 트리거(규칙 소유·심각도 분리), 저비용 수정 사다리(삭제→플랫폼→재사용→값 교정→추가), 미검증·미점검 구분, 스코프 축소 규율을 제시하는 리뷰 절차다 "근사가 아니라 정확히 이 값" 같은 규율은 기각한다. finding 상한 같은 수치는 근거가 없어 절차만 채택하고 숫자는 채택하지 않는다 리뷰 결과에서 저비용 수정 사다리 순서를 실제로 따랐는지, 미검증 항목이 finding으로 세어지지 않았는지 확인한다
SKILL-BETTER-A11Y jakubkrehel/skills — skills/better-accessibility · 커밋 267330e · MIT practice 키보드 위젯 계약(tabindex, roving tabindex, APG 패턴, inert, SPA 라우트 포커스)과 폼 접근성(autocomplete, inputmode, disabled와 aria-disabled 구분) 실무 지침이다 고정 하한값이나 "반드시 이 패턴" 같은 단정은 하드 게이트 문맥(WCAG 근거가 있는 것)에만 남기고, 나머지는 프로젝트 계약·관찰 후보로 낮춘다 실제 키보드 탐색과 스크린리더로 각 위젯의 계약을 재현한다
SKILL-BETTER-COLORS jakubkrehel/skills — skills/better-colors · 커밋 267330e · MIT practice 색 램프 생성, APCA 참고, 그라디언트 보간 공간, 다크모드 재조정에 대한 실무 절차다 APCA는 WCAG 2 대비를 대체하는 규범이 아니라 보조 진단으로만 쓴다(APCA-STATUS 참고). 색의 문화적 의미는 원문(주로 서구 관례)을 그대로 쓰지 않고 ko-KR 관례로 다시 쓴다 실제 배경·전경 조합에서 WCAG 2 대비를 1차 판정 기준으로 측정한다
SKILL-BETTER-LAYOUT jakubkrehel/skills — skills/better-layout · 커밋 267330e · MIT practice RTL·논리 속성, 그루핑 비율, 점진적 공개 레시피, 컨트롤·정적 텍스트 구별에 대한 레이아웃 실무 지침이다 그루핑 비율 같은 수치는 휴리스틱이지 하드 게이트가 아니다. RTL 절은 RTL 로케일일 때만 연다(조건부) 실제 좁은 폭·RTL 전환에서 레이아웃이 깨지지 않는지 확인한다
SKILL-BETTER-TYPE jakubkrehel/skills — skills/better-typography · 커밋 267330e · MIT practice text-wrap, 밑줄 메트릭, text-box trim, 문장부호, 잘린 텍스트 도달 수단에 대한 조판 실무 지침이다 고정 글자 크기·행간 하한 규율은 기각한다. 문장부호는 원문(영어 관례) 그대로 쓰지 않고 ko-KR 문장부호 규정(KO-PUNCT)으로 다시 쓴다 실제 다국어·긴 콘텐츠에서 줄바꿈과 밑줄 겹침을 렌더로 확인한다
SKILL-BETTER-UI jakubkrehel/skills — skills/better-ui · 커밋 267330e · MIT practice 아이콘 도메인 일관성, 동심 radius, 광학 정렬, 테두리 대신 그림자, 테마 전환 트랜지션 억제에 대한 UI 마감 실무 지침이다 특정 미학을 기본값으로 서술하지 않는다. 동심 radius 공식은 tokens.md의 기존 토큰 이름 체계를 따라 재정의 없이 참조한다 실제 컴포넌트 중첩에서 radius·그림자가 시각적으로 어긋나지 않는지 확인한다
SKILL-BETTER-WRITING jakubkrehel/skills — skills/better-writing · 커밋 267330e · MIT practice 용어 일관성, 톤과 위험의 매트릭스, 문장 조각 조립 금지, 오류·빈 상태 문구 내용에 대한 UX 카피 실무 지침이다 "카피 finding은 소스만으로 충분하다"는 예외는 잘림·줄바꿈에 영향받는 카피(버튼·제목)에는 적용하지 않고 렌더로 확인한다. 문장 조각 조립 규칙은 한국어 조사 처리를 별도로 더해야 한다(원문은 영어 전제) 실제 렌더에서 버튼·제목 카피가 잘리지 않는지 확인하고, 소스 검토는 나머지 카피에만 1차 판정으로 쓴다
SKILL-INTERFACE-REVIEW jakubkrehel/skills — skills/interface-review · 커밋 267330e · MIT practice diff 스코프 계산, 제거된 쪽 읽기, Introduced·Regression·Pre-existing 구분에 대한 변경 리뷰 절차다 파급 범위 컨슈머 5개 같은 고정 수치는 근거가 없어 절차만 채택한다 실제 diff에서 제거된 코드를 읽고 회귀 신호가 있는지 확인한다
SKILL-INTERACTION-DESIGN wshobson/agents — plugins/ui-design/skills/interaction-design · 커밋 4236bb9(출처 미기재라 가장 널리 쓰이는 저장소를 선정) · MIT practice 토스트, 스켈레톤 시머, 스와이프, 당겨서 새로고침, 낙관적 업데이트 등 인터랙션 레시피와 스프링 프리셋·cubic-bezier 근사값이다 리플 이펙트를 기본값으로 삼지 않고 조건부로만 둔다. "질문 없이 코드 기본값으로 고정"하는 태도는 기각한다. 스프링 프리셋 수치는 실측 조정 시작값이다 실제 인터랙션에서 클린업 규율(리스너 해제 등)이 지켜지는지 확인하고, 스프링 값은 프로젝트에서 재조정한다

WCAG 2.2·ARIA·플랫폼 출처 보강 (2026-09-24)

ID 출처·날짜 종류 실제로 지지하는 주장 적용 조건 / 잘못된 일반화 구체 검증
WCAG-INPUT-PURPOSE SC 1.3.5 Identify Input Purpose · WCAG 2.2, 확인 2026-09-24 normative Level AA. 사용자 정보를 수집하는 입력 필드가 Input Purposes 목록에 정의된 목적을 가지면 프로그램적으로 식별 가능해야 한다 목록에 없는 임의 입력 필드까지 autocomplete 속성을 요구하는 근거로 확대하지 않는다 실제 폼 필드의 autocomplete·name 속성이 목록의 목적과 일치하는지 대조한다
WCAG-NONTEXT SC 1.4.11 Non-text Contrast · WCAG 2.2, 확인 2026-09-24 normative Level AA. UI 컴포넌트와 그래픽 객체의 시각적 표현은 인접 색상과 3:1 이상 대비를 가져야 한다(비활성 컴포넌트·필수 로고·장식용 그래픽 등 예외 있음) 모든 장식 요소에 3:1을 강제하지 않는다. 예외 목록을 먼저 확인한다 실제 컴포넌트 테두리·아이콘·포커스 링의 대비를 측정한다
WCAG-HOVER SC 1.4.13 Content on Hover or Focus · WCAG 2.2, 확인 2026-09-24 normative Level AA. 호버·포커스로 나타나는 추가 콘텐츠는 Dismissible·Hoverable·Persistent 세 조건을 만족해야 한다 모든 툴팁·팝오버에 세 조건을 기계적으로 적용하기 전에 필수 콘텐츠인지부터 판정한다 실제 툴팁을 호버·포커스로 열고 마우스를 이동시켜 세 조건을 재현한다
WCAG-FLASH SC 2.3.1 Three Flashes or Below Threshold · WCAG 2.2, 확인 2026-09-24 normative Level A. 웹 페이지는 1초 동안 3회를 초과해 깜빡이는 콘텐츠를 포함하지 않아야 한다(일반 섬광·적색 섬광 임계값 이하는 예외) "깜빡임 초당 3회 이하"를 스타일 취향이 아니라 하드 게이트로 취급한다 자동 재생 애니메이션·로딩 인디케이터의 초당 깜빡임 횟수를 측정한다
WCAG-LINK SC 2.4.4 Link Purpose (In Context) · WCAG 2.2, 확인 2026-09-24 normative Level A. 링크의 목적은 링크 텍스트만으로, 또는 링크 텍스트와 프로그램적으로 결정 가능한 맥락을 함께 사용해 판단할 수 있어야 한다(일반 사용자에게 모호한 경우는 예외) "더보기"류 링크 텍스트를 무조건 금지하는 규범으로 확대하지 않는다. 주변 맥락으로 목적이 프로그램적으로 판단 가능하면 허용된다 스크린리더의 링크 목록 탐색에서 텍스트만으로 목적을 알 수 있는지 확인한다
WCAG-FOCUS-OBSCURED SC 2.4.11 Focus Not Obscured (Minimum) · WCAG 2.2, 확인 2026-09-24 normative Level AA. 키보드 포커스를 받은 컴포넌트는 저자가 만든 콘텐츠(스티키 헤더·모달 등)에 완전히 가려지지 않아야 한다 완전 가림만 금지한다(일부 가림까지 금지하는 것은 AAA인 2.4.12다). AA와 AAA를 혼동하지 않는다 스티키 헤더·모달이 있는 화면에서 Tab 이동 시 포커스 요소가 완전히 가려지는지 확인한다
WCAG-FOCUS-APPEAR SC 2.4.13 Focus Appearance · WCAG 2.2, 확인 2026-09-24 normative Level AAA. 보이는 포커스 표시기는 비포커스 상태 대비 2 CSS px 두께 둘레 이상의 면적과 3:1 이상 대비를 가져야 한다(사용자 에이전트 기본 표시기이거나 저자가 수정하지 않은 경우는 예외) AAA 기준이므로 하드 게이트가 아니라 프로젝트 계약(고대비·접근성 강화 프로젝트)으로 채택한다 커스텀 포커스 링의 두께·대비를 실제로 측정한다
WCAG-LABEL-NAME SC 2.5.3 Label in Name · WCAG 2.2, 확인 2026-09-24 normative Level A. 텍스트나 텍스트 이미지를 포함한 라벨을 가진 UI 컴포넌트는 접근 가능한 이름에 시각적으로 표시된 텍스트를 포함해야 한다 아이콘 전용 버튼처럼 시각 라벨이 없는 컴포넌트는 적용 대상이 다르다(별도로 aria-label 등을 판단) 시각 라벨과 스크린리더가 읽는 접근 가능한 이름을 대조한다
WCAG-DRAG SC 2.5.7 Dragging Movements · WCAG 2.2, 확인 2026-09-24 normative Level AA. 드래그 동작으로 작동하는 모든 기능은 드래그 없이 단일 포인터로도 수행할 수 있어야 한다(드래그가 필수적이거나 사용자 에이전트가 결정하고 저자가 수정하지 않은 기능은 예외) 브라우저 기본 스크롤·당겨서 새로고침처럼 사용자 에이전트가 결정하는 동작까지 대체 수단을 요구하지 않는다 슬라이더·정렬·스와이프 삭제 등 커스텀 드래그 기능에 탭·버튼 등 단일 포인터 대안이 있는지 확인한다
WCAG-HELP SC 3.2.6 Consistent Help · WCAG 2.2, 확인 2026-09-24 normative Level A. 웹 페이지 집합 안에서 반복되는 도움 메커니즘(연락처·챗봇·자가 도움 등)은 사용자가 변경을 시작하지 않는 한 다른 콘텐츠와 상대적으로 같은 순서에 나타나야 한다 도움 메커니즘이 아예 없는 사이트에 새로 만들라고 요구하는 기준이 아니다. 이미 있는 도움 메커니즘의 위치 일관성만 요구한다 여러 화면에서 고객센터·챗봇 버튼의 상대적 위치가 같은지 확인한다
WCAG-REDUNDANT SC 3.3.7 Redundant Entry · WCAG 2.2, 확인 2026-09-24 normative Level A. 같은 프로세스에서 이전에 입력했거나 제공된 정보를 다시 입력하도록 요구할 때는 자동으로 채우거나 선택할 수 있게 해야 한다(재입력이 필수적이거나 보안상 필요하거나 정보가 더 이상 유효하지 않은 경우는 예외) 결제 단계의 보안 재확인처럼 예외에 해당하는 재입력까지 위반으로 판정하지 않는다 다단계 폼에서 같은 값을 다시 입력해야 하는 필드가 있는지, 자동 채움이 되는지 확인한다
WCAG-AUTH SC 3.3.8 Accessible Authentication (Minimum) · WCAG 2.2, 확인 2026-09-24 normative Level AA. 인증 과정의 어떤 단계도 대안·보조 메커니즘·객체 인식·개인 콘텐츠 인식 중 하나를 제공하지 않는 한 인지 기능 시험(비밀번호 암기, 퍼즐 풀이 등)을 요구해서는 안 된다 모든 비밀번호 로그인을 금지하는 기준이 아니다. 브라우저 자동완성·비밀번호 관리자 지원처럼 대안이 있으면 허용된다 로그인·본인 확인 흐름에서 붙여넣기 차단이나 자동완성 차단이 있는지 확인한다
WCAG-NRV SC 4.1.2 Name, Role, Value · WCAG 2.2, 확인 2026-09-24 normative Level A. 커스텀 UI 컴포넌트의 이름과 역할은 프로그램적으로 결정 가능해야 하고, 사용자가 설정할 수 있는 상태·속성·값은 프로그램적으로 설정 가능해야 하며, 변경 알림이 보조 기술에 제공되어야 한다 네이티브 HTML 컨트롤에는 대개 자동으로 충족되며, 커스텀 컴포넌트(div로 만든 버튼 등)에 특히 적용된다. 예외·세부 문구는 Understanding 문서로 재확인 필요 스크린리더로 커스텀 컴포넌트의 이름·역할·상태 변경이 공지되는지 확인한다
WCAG-STATUS SC 4.1.3 Status Messages · WCAG 2.2, 확인 2026-09-24 normative Level AA. 마크업 언어로 구현된 콘텐츠에서 상태 메시지는 포커스를 받지 않고도 보조 기술이 사용자에게 전달할 수 있도록 role이나 속성으로 프로그램적으로 결정 가능해야 한다 포커스를 받는 오류 대화상자 등 4.1.2로 이미 다뤄지는 경우와 겹치지 않게 구분한다(정확한 예외 문구는 Understanding 문서 재확인 필요) 폼 제출 성공·실패 메시지가 라이브 리전으로 스크린리더에 전달되는지 확인한다
ARIA-APG WAI-ARIA Authoring Practices Guide — Patterns · 확인 2026-09-24 practice 탭·메뉴버튼·콤보박스·리스트박스·모달 대화상자 등 위젯별 권장 키보드 상호작용(Tab·화살표·Home/End·Escape 동작)을 정의한다 ARIA role만 붙이고 키보드 동작을 구현하지 않으면 패턴을 따랐다고 할 수 없다. 네이티브 HTML 요소로 같은 동작을 얻을 수 있으면 네이티브를 우선한다 실제 키보드만으로 각 위젯 패턴의 상호작용을 재현한다
APCA-STATUS APCA-W3 GitHub README · WCAG 3.0 Working Draft(2026-09-10) · 확인 2026-09-24 practice WCAG 3.0 초안(2026-09-10)은 대비 알고리즘을 아직 정하지 않았다고 명시하며 APCA를 이름으로 언급하지 않는다. APCA 자체는 버전 0.1.9(98G4g)의 베타 상태이며 저장소 README가 "미래 표준을 위해 평가 중"이라고 스스로 밝힌다 APCA를 이미 채택된 규범적 대비 알고리즘처럼 서술하지 않는다. WCAG 2 대비(4.5:1/3:1)가 여전히 하드 게이트이고 APCA는 보조 진단으로만 쓴다 대비 판정은 WCAG 2 공식(WCAG-READ)으로 먼저 하고, APCA 값은 참고 수치로만 병기한다
WWDC-FLUID Designing Fluid Interfaces — WWDC 2018, 세션 803 · Apple Developer, 확인 2026-09-24 practice iPhone X 세대 제스처 인터페이스에서 인터럽트 가능성(현재 렌더값에서 재시작), 속도 인계, 멀티모달 피드백을 설계한 Apple 엔지니어의 발표 내용이다 Apple의 자체 설계 사례를 모든 플랫폼·모든 브리프에 적용해야 할 표준으로 확대하지 않는다. Apple풍 미학이 브리프에 맞을 때만 조건부로 연다 발표에서 제시한 구현 아이디어를 실제 코드로 재현한 뒤 체감 반응성을 확인한다
KO-PUNCT 한글 맞춤법 문장 부호 개정안 — 국립국어원 · 고시 2014-12-05 · 시행 2015-01-01 · 확인 2026-09-24 normative 문화체육관광부가 고시한 한글 맞춤법 개정으로 마침표·물음표·느낌표·쉼표·가운뎃점·쌍점·빗금·따옴표(2종)·괄호(3종)·낫표(2종)·화살괄호(2종)·줄표·붙임표·물결표 등 문장 부호 용법을 정한다 영어 문장부호 관례(예: 세미콜론 용법)를 한국어 카피에 그대로 옮기지 않는다. 이 개정안이 다루지 않는 세부 조항(예: 줄임표 표기 형태)은 별도 확인 없이 단정하지 않는다 한국어 UI 카피의 마침표·쉼표·따옴표 사용을 이 개정안 목록과 대조한다
KO-KRDS KRDS 컴포넌트 — 버튼 · 행정안전부 · 확인 2026-09-24 practice 행정안전부 KRDS(Korea Design System) 공식 가이드는 버튼 텍스트 라벨을 원칙적으로 동사형으로 제공하도록 규정하며, "완료·닫기·취소·추가·삭제"처럼 일반적으로 통용되는 경우는 예외로 둔다 정부 서비스 가이드를 모든 상업 제품의 카피 규범으로 강제하지 않는다. 이 스킬에서는 버튼 카피의 참고 관례로만 쓴다 실제 버튼 라벨이 동사형인지, 예외에 해당하는 일반 동작인지 확인한다
KO-TOSS-WRITING 토스가 글을 쓰는 방법 — toss.tech · 확인 2026-09-24 practice 토스 기술 블로그가 공개한 글쓰기 코어밸류 5가지(Clear·Concise·Casual·Respect·Emotional)와 실행 원칙 8가지(예측 가능한 힌트, 군더더기 제거, 핵심 메시지 집중 등)다 한 기업의 브랜드 보이스를 모든 한국어 제품의 보편 톤으로 확대하지 않는다. 톤 슬롯이 다른 브리프(공공·금융 격식체 등)에는 그대로 적용하지 않는다 실제 카피가 원칙과 충돌하는지(불필요한 격식체, 숨은 감정 무시 등)를 문장 단위로 대조한다
WEB-BASELINE webstatus.dev · MDN Baseline · 확인 2026-09-24 practice 특정 CSS·JS 기능이 Limited/Newly available/Widely available 중 어느 지원 상태인지, 각 브라우저가 언제 지원을 시작했는지를 추적한다. Widely available은 Newly available(전 주요 엔진 지원 완료) 시점으로부터 약 30개월이 지나야 붙는다 한 번 확인한 지원 상태를 날짜 없이 영구 사실처럼 인용하지 않는다. webstatus.dev와 MDN이 다른 값을 보일 때(예: text-box-trim)는 더 최신 확인일 쪽에 주의 문구를 남긴다 기능을 채택하기 전 webstatus.dev나 MDN의 현재 상태와 확인일을 다시 조회한다
PLATFORM-HIG-TARGET Apple Human Interface Guidelines, Layout(터치 타깃 지침) · developer.apple.com/design/human-interface-guidelines/layout · URL 미확인 — 2026-09-24 WebFetch로 재확인을 시도했으나 페이지가 클라이언트 사이드 렌더링(SPA)이라 본문을 가져오지 못했고, 이 세션의 WebSearch 예산이 소진돼 대체 인용을 확보하지 못했다 bibliography Apple HIG가 iOS 컨트롤의 최소 히트 영역을 44×44pt로 권장한다는 것은 업계에 널리 알려진 수치이지만, 이 세션에서는 1차 문서 원문 문구를 직접 확인하지 못했다 브리프가 모바일 앱 수준을 요구할 때만 적용하는 프로젝트 계약이며, WCAG AA의 보편 요건(24×24 CSS px, [WCAG-TARGET])으로 확대하지 않는다 다음 세션에서 Apple Developer 사이트를 JS 렌더링 가능한 브라우저 도구로 재조회해 정확한 문구·URL을 확정한다
PLATFORM-M3-TARGET Material 3, Accessible design 또는 Layout 섹션 · m3.material.io · URL 미확인 — 2026-09-24 WebFetch로 재확인을 시도했으나 페이지가 클라이언트 사이드 렌더링(SPA)이라 본문을 가져오지 못했고, 이 세션의 WebSearch 예산이 소진돼 대체 인용을 확보하지 못했다 bibliography Material 3가 터치 타깃 최소 크기를 48×48dp로 권장한다는 것은 업계에 널리 알려진 수치이지만, 이 세션에서는 1차 문서 원문 문구를 직접 확인하지 못했다 브리프가 모바일 앱 수준을 요구할 때만 적용하는 프로젝트 계약이며, WCAG AA의 보편 요건(24×24 CSS px, [WCAG-TARGET])으로 확대하지 않는다 다음 세션에서 m3.material.io를 JS 렌더링 가능한 브라우저 도구로 재조회해 정확한 문구·URL을 확정한다

사용할 때

결정마다 출처 ID / 지지 주장 / 적용 조건 / 잘못된 일반화 / 구체 검증 / 예시 결정을 남긴다. 예: WCAG-TARGET / 24×24 AA 최소 / 포인터 대상 / 44px 의무라고 확대하지 않음 / 실제 버튼 box 측정 / 작은 아이콘을 24px 이상 hit area로 확장.

교과서 입문·정독 범위

바우하우스·시각디자인 원전의 관점과 확인 범위는 visual-design-lineage.md, 미학·읽기·그래픽 지각 논문의 연구 조건은 visual-perception-research.md에서 질문에 맞는 항목만 읽는다. 두 문서는 출처별 확인 범위와 적용 한계를 보존하는 이 장부의 심화 읽기 경로다. 실무 적용 제안과 원문이 보고한 결과를 구분한다.

다음은 서지 확인된 읽기 경로다. 이 목록은 본문을 읽었다거나 특정 페이지의 규칙을 채택했다는 주장이 아니다. 입문에서는 편집·그리드·글자 형태의 어휘를 얻고, 실제 프로젝트에 인용할 때는 확보한 판본과 페이지를 다시 기록한다.

  1. Bringhurst, The Elements of Typographic Style — 조판 어휘와 본문 리듬의 정독 출발점 [BRINGHURST].
  2. Lupton, Thinking with Type, 3rd ed. — 타입을 구성·위계·이미지와 연결하는 입문 [LUPTON].
  3. Müller-Brockmann, Grid Systems in Graphic Design — grid의 역사적·실무적 어휘 [MULLER-BROCKMANN].
  4. Meggs 계열의 그래픽 디자인 역사 저작은 별도 판본 서지와 페이지 근거를 확보한 뒤 역사 맥락용으로 추가한다. 이 ledger에서는 미확인 판본의 내용을 인용하지 않는다.