Easy on the Eyes (눈에 편한 디자인)
화면을 볼 때 발생하는 눈의 피로는 대부분 웹사이트가 통제할 수 없는 요소(눈 깜빡임, 초점 거리, 교정되지 않은 시력, 주변 환경)에서 비롯됩니다. 웹사이트가 통제할 수 있는 것은 사용자에게 요구하는 추가적인 시각적 작업의 양입니다. 이 스킬은 이러한 추가 작업을 제거하고 각 규칙에 대한 증거가 얼마나 강력한지 알려줍니다.
또한 편안한 페이지가 템플릿처럼 보이지 않도록 합니다. 디자인하기 전에 실제 출시된 사이트를 분석하고, 작업이 생성된 것처럼 보이게 만드는 선택에 대한 일련의 장인 정신(크래프트) 규칙을 제공합니다.
허용되는 주장
디자인이 "피할 수 있는 시각적 부담을 추가하지 않는다"고 말할 수 있습니다. 디자인이 눈의 피로를 예방, 감소 또는 치료하거나, 눈을 보호하거나, "블루라이트 차단" 기능이 있다고 절대 작성하지 마십시오. 다크 모드, 따뜻한 색조 또는 특수 폰트를 건강 기능으로 설명하지 마십시오. 사용자가 그러한 종류의 복사를 요청하면 이유를 설명하고 정직한 표현을 제안하십시오.
모드
스킬이 호출될 때 전달된 인수를 읽습니다.
- 인수 없음 또는 빌드 작업. 새 페이지나 섹션의 경우 먼저 참조 사이트를 분석합니다(아래 "디자인 전에 참조 사이트 분석" 참조). 그런 다음 UI를 작성하거나 편집하는 동안 규칙을 적용합니다. 프로젝트에 아직 색상 또는 타입 토큰이 없으면
assets/tokens.css부터 시작합니다. UI가 작성되면 소스에 대해audit.mjs를 실행하고 렌더링된 페이지에 대해inspect.mjs를 실행한 다음, "스크립트가 볼 수 없는 것"을 검토한 후 완료했다고 말합니다. audit(선택적으로 경로를 뒤에 붙임). 스크립트를 실행한 다음 스크립트가 볼 수 없는 것을 검토합니다. 아래 템플릿을 사용하여 보고합니다. 아무것도 변경하지 마십시오.study뒤에 하나 이상의 URL. 각 페이지를 검사하고 디자인 브리프(무엇을 하는지, 무엇을 빌릴 가치가 있는지, 어떤 편안함 규칙을 위반하는지)를 보고합니다. 아무것도 변경하지 마십시오.fix(선택적으로 경로를 뒤에 붙임). 감사를 실행합니다. 오류를 수정한 다음 경고를 수정합니다. 오류나 경고를 수정하는 데 의존하거나, 사용자 검토 결과 실제 문제로 판명되지 않는 한 노트는 그대로 둡니다. 스크립트를 다시 실행하고 보고합니다.
스크립트 실행
프로젝트 루트에서 실행하고 확인할 경로를 제공합니다. 스크립트는 이 스킬의 scripts/ 폴더에 있으므로 이 스킬이 로드된 경로를 사용하십시오:
node <skill-dir>/scripts/audit.mjs src # 텍스트 보고서, 오류 시 exit 1
node <skill-dir>/scripts/audit.mjs src --json # 기계 판독 가능
node <skill-dir>/scripts/audit.mjs src --strict # 경고에도 exit 1
node <skill-dir>/scripts/audit.mjs contrast "#1f2328" "#ffffff" # 단일 쌍
node <skill-dir>/scripts/audit.mjs contrast "#8a8f98" "#ffffff" --min 3 # 테두리 또는 아이콘
node <skill-dir>/scripts/inspect.mjs https://example.com # 디자인 브리프 및 렌더링된 편안함 검사
node <skill-dir>/scripts/inspect.mjs http://localhost:3000 --out shots # 라이트/다크 스크린샷도 저장
node <skill-dir>/scripts/inspect.mjs dist/index.html --json
audit.mjs는 소스 파일을 읽습니다.inspect.mjs는 실제 브라우저에서 페이지를 열어 사용자가 실제로 보는 것을 측정합니다: 실제 텍스트와 실제 배경의 대비, 줄당 실제 문자 수, 다크 테마 존재 여부, 축소 모션 요청 시 모션이 중단되는지 여부.inspect.mjs는 모든 URL 또는 로컬 HTML 파일에서 작동합니다. 프로젝트에 Playwright가 필요합니다 (npm i -D playwright && npx playwright install chromium). Playwright가 없고 설치할 수 없는 경우 렌더링된 검사가 실행되지 않았다고 말합니다.- 경로는 필수입니다. 사용자가 제공하지 않으면 UI 소스가 있는 폴더를 사용하십시오.
- 색상은 16진수,
rgb(),hsl(),oklch(),white또는black일 수 있습니다. - 의도적인 결과를 무시하려면 해당 줄에
easy-on-the-eyes-ignore주석을, 이전 줄에easy-on-the-eyes-ignore-next-line주석을 넣으십시오. - 스크립트는 Node 18 이상이 필요하며 종속성이 없습니다. Node가 없으면 수동으로 규칙을 적용하고 스크립트가 실행되지 않았다고 말합니다.
두 스크립트 모두 아래 표의 규칙 ID로 보고합니다. 보고서에서도 동일한 ID를 사용하십시오.
디자인 전에 참조 사이트 분석
모델은 자신이 본 것의 평균을 생성하며, 평균은 사람들이 생성된 것으로 인식하는 것입니다. 먼저 특정 출시된 작업을 살펴보면 반응할 실제 결정을 얻을 수 있습니다.
- 구축 중인 것과 동일한 카테고리의 라이브 사이트 3~5개를 선택합니다. 사용자가 지정한 사이트를 사용합니다. 그렇지 않으면 웹 검색이나 세션에 연결된 디자인 참조 또는 스크린샷 도구를 사용하여 찾습니다.
- 각 사이트에 대해
inspect.mjs를 실행하고--out을 사용하여 스크린샷을 열고 볼 수 있도록 합니다. - 각 사이트에 대해 폰트와 타입 스케일, 사용된 색상 수와 강조 색상 위치, 줄 길이, 섹션 구조, 그리고 그것을 알아볼 수 있게 만드는 한 가지 요소를 기록합니다.
- 각 참조 사이트에 대한 편안함 결과를 읽습니다. 훌륭한 사이트도 종종 작은 텍스트, 약한 대비, 과도한 모션을 제공합니다. 구성을 빌리고 그런 요소는 남겨 둡니다.
references/craft.md에 표가 있습니다. - 사용자에게 어떤 사이트를 분석했고 각각에서 무엇을 가져왔는지 알려줍니다. 구조와 결정을 빌리십시오. 브랜드 이름, 로고, 문구, 이미지 또는 정확한 레이아웃을 절대 복사하지 마십시오.
참조 사이트를 열 수 없는 경우 그렇게 말하고 규칙과 references/craft.md에서 디자인하십시오.
증거 등급
모든 규칙에는 하나의 등급이 있습니다. 결과를 설명할 때 등급을 반복하여 습관을 사실로 오인하지 않도록 하십시오.
| 등급 | 의미 |
|---|---|
research (연구) | 통제된 연구 또는 체계적 문헌고찰에 의해 뒷받침됨 |
standard (표준) | WCAG 2.2 성공 기준에 의해 설정됨. 참조 파일은 기준과 그 수준을 제공함 |
convention (관습) | 합리적이고 널리 사용되지만, 이에 대한 시험은 없음 |
inference (추론) | 관련 자극에 대한 연구에서 파생되었으며, 웹 페이지에서 테스트되지 않음 |
규칙
심각도가 순서를 결정합니다: 오류 먼저, 그 다음 경고, 그 다음 노트. 동일한 심각도 내에서는 표의 아래쪽으로 작업합니다. 표시된 심각도는 일반적인 심각도입니다. 스크립트는 해당 줄이 문제인지(레이블일 수 있는 작은 크기) 확실하지 않으면 심각도를 낮추며, 사용자 검토 결과 실제 피해가 있는 경우 심각도를 높일 수 있습니다.
| ID | 규칙 | 심각도 | 등급 | 참조 |
|---|---|---|---|---|
type-rem-zoom | 텍스트는 확대/축소를 견뎌야 함. 크기는 rem 단위, 뷰포트 전용 글꼴 크기 없음, 확대/축소 비활성화 금지. | 오류 | 표준 | 타이포그래피 |
contrast-floor | 모든 텍스트 쌍은 최소 4.5:1. 큰 텍스트 및 UI 부품은 최소 3:1. | 오류 | 표준 | 대비-및-색상 |
contrast-color-alone | 색상만으로 상태를 전달하지 마십시오. | 오류 | 표준 | 대비-및-색상 |
motion-flash | 초당 3회 이상 깜빡이지 마십시오. | 오류 | 표준 | 모션 |
motion-autoplay | 컨트롤 없는 자동 재생 비디오 금지. 텍스트 외에 5초 이상 움직이는 모든 것은 일시 정지 필요. 텍스트 옆에 무한 루프 금지. | 오류 | 표준 | 모션 |
motion-reduced | 움직임은 prefers-reduced-motion: no-preference 내에서만 존재해야 함. | 오류 | 표준 | 모션 |
theme-focus | 최소 3:1의 보이는 대체 요소 없이 포커스 아웃라인을 제거하지 마십시오. | 오류 | 표준 | 테마 |
type-body-size | 본문 텍스트 1rem 최소, 긴 읽기의 경우 1.125rem ~ 1.25rem. 0.875rem 미만의 읽을 수 있는 텍스트 금지. | 경고 | 연구 | 타이포그래피 |
motion-triggers | 패럴랙스, 스크롤 하이재킹 또는 넓은 영역 확대/축소 금지. 페이드 및 색상 변경은 괜찮음. | 경고 | 연구 | 모션 |
contrast-dark-secondary | 어두운 표면의 보조 텍스트는 8.5:1 이상. AA만으로는 거기서 약하게 읽힘. | 경고 | 추론 | 대비-및-색상 |
contrast-saturated-on-dark | 어두운 배경의 작은 텍스트에 채도가 높은 빨간색 또는 파란색 사용 금지. 다크 테마에서는 더 밝고 차분한 강조색 사용. | 경고 | 연구 | 대비-및-색상 |
lum-section-steps | 번갈아 나타나는 전체 너비의 어두운 섹션과 흰색 섹션 금지. 다크 테마에서 흰색 임베드 또는 모달 금지. | 경고 | 추론 | 레이아웃-및-패턴 |
lum-white-flash | 테마 적용된 html 배경과 color-scheme 선언 및 메타 태그. | 경고 | 관습 | 테마 |
layout-shift | 미디어 크기 예약, 폴백 폰트 메트릭스 일치, CLS 0.1 이하 유지. | 경고 | 연구 | 레이아웃-및-패턴 |
contrast-pure-extremes | 흰색에 가까운 검정색, 어두운 회색에 가까운 흰색 사용. 페이지 텍스트와 배경으로 순수 검정색과 순수 흰색 사용 금지. | 경고 | 관습 | 대비-및-색상 |
type-leading | 본문 line-height 1.5 (1.4 ~ 1.6). 제목 1.1 ~ 1.3. | 경고 | 관습 | 타이포그래피 |
type-weight | 본문 두께 400 이상. 본문 크기에서 100~300 사용 금지. | 경고 | 관습 | 타이포그래피 |
type-align | text-align: start. 양쪽 정렬 본문 금지. 대문자는 짧은 레이블에만 사용. | 경고 | 표준 | 타이포그래피 |
layout-targets | 포인터 대상 최소 24x24 CSS px, 기본 작업은 44x44. 문장 내 링크는 제외. | 경고 | 표준 | 레이아웃-및-패턴 |
theme-both-schemes | 라이트/다크 모두 제공하고 prefers-color-scheme을 따름. 수동 전환은 선택 사항이며 기본값은 시스템 설정. | 노트 | 연구 | 테마 |
pattern-stripes | 넓은 영역에 7~27px 주기의 고대비 줄무늬 또는 격자 금지. | 노트 | 추론 | 레이아웃-및-패턴 |
type-measure | 읽기 텍스트는 50ch ~ 60ch(약 65~78자)로 제한. | 노트 | 관습 | 타이포그래피 |
motion-duration | 100~300ms, 최대 500ms, 진입 시 ease-out. | 노트 | 관습 | 모션 |
theme-preferences | prefers-contrast, forced-colors, prefers-reduced-transparency 준수. | 노트 | 관습 | 테마 |
pattern-clutter | 뷰당 하나의 주요 강조. 적은 수의 강조 색상, 크기 및 테두리 스타일. | 노트 | 연구 | 레이아웃-및-패턴 |
craft-copy | 구체적인 카피. 통계, 사용 후기, 평가 또는 고객 로고를 절대 지어내지 마십시오. | 경고 | 관습 | 크래프트 |
craft-reference | 디자인하기 전에 동일한 카테고리의 실제 사이트 3~5개를 분석하십시오. 결정은 빌리고, 절대 복사하지 마십시오. | 노트 | 관습 | 크래프트 |
craft-one-idea | 뷰당 하나의 독특한 아이디어. 다른 모든 것은 조용히 유지. | 노트 | 관습 | 크래프트 |
craft-palette | 색조가 가미된 중성색과 하나의 강조색. 인디고 또는 보라색 그라데이션, 그라데이션 텍스트 금지. | 노트 | 관습 | 크래프트 |
craft-show-product | 실제 인터페이스, 데이터 또는 코드를 보여줍니다. 세 개의 동일한 아이콘 카드 행, 이모지 아이콘 금지. | 노트 | 관습 | 크래프트 |
craft-layout | 모든 것을 가운데 정렬하지 마십시오. 고르지 않은 그리드 분할과 다양한 섹션 구조. | 노트 | 관습 | 크래프트 |
craft-restraint | 평평한 표면과 가는 선. 적은 수의 그림자, 하나의 반경 스케일, 쌓인 블러 및 글로우 금지. | 노트 | 관습 | 크래프트 |
참조 파일에는 추론, 출처 및 전후 코드가 있습니다. 적용하거나 보고하는 규칙을 다루는 각 파일을 읽으십시오. 전체 페이지 수정에는 일반적으로 3~4개의 파일이 필요합니다.
references/contrast-and-color.md: 색상 선택, 팔레트 또는 다크 테마 구축, 대비 결과 설명.references/typography.md: 글꼴 크기, 줄 길이, 간격, 글꼴, 유동적인 글꼴 크기.references/motion.md: 애니메이션, 전환, 비디오, 스크롤 효과, 로더.references/layout-and-patterns.md: 테이블, 그리드, 줄무늬, 밀도, 섹션 배경, 이미지, 레이아웃 이동.references/theming.md: 라이트/다크 테마, 테마 전환, 포커스 스타일, 사용자 기본 설정 미디어 쿼리, Tailwind 및 shadcn/ui.references/craft.md: 새 페이지 또는 섹션 디자인, 템플릿화되거나 생성된 것처럼 보이는 결과, 참조 사이트에서 빌릴 것과 남겨둘 것.references/evidence.md: 사용자가 이유를 묻거나, 규칙에 의문을 제기하거나, 블루라이트, 다크 모드, 난독증 폰트 또는 APCA에 대해 물을 때.
묻지 않고 작성할 기본값
:root {
color-scheme: light dark;
--bg: light-dark(oklch(0.985 0.002 90), oklch(0.18 0.01 255));
--text: light-dark(oklch(0.24 0.01 255), oklch(0.93 0.005 255));
--muted: light-dark(oklch(0.48 0.01 255), oklch(0.78 0.01 255));
--accent: light-dark(oklch(0.5 0.19 255), oklch(0.74 0.13 255));
}
html { background-color: var(--bg); color: var(--text); }
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; }
p, li { max-inline-size: 55ch; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.card { transition: transform 200ms ease-out; }
}
페이지 헤드에 <meta name="color-scheme" content="light dark">를 추가합니다.
본문 텍스트는 라이트에서 15.75:1, 다크에서 15.30:1의 대비를 제공합니다. 흐리게 표시된 텍스트는 6.25:1과 9.39:1입니다. 강조색은 5.78:1과 8.14:1이므로 포커스 링에 사용됩니다. 시스템 Highlight 색상은 어두운 표면에서 3:1 미만으로 떨어질 수 있기 때문입니다. assets/tokens.css에는 표면, 컨트롤 테두리, 긴 읽기용 크기 및 옵트인 흐리게 테마를 포함한 전체 세트가 있습니다.
페이지에 두 테마 모두에 대한 색상이 실제로 있는 경우에만 color-scheme: light dark를 추가하십시오. 하드코딩된 라이트 색상이 있는 페이지에서는 흰 페이지에 다크 스크롤바와 양식 컨트롤을 제공합니다. 동일한 변경에서 theme-both-schemes를 수정하십시오.
Tailwind 및 shadcn/ui는 순수 흰색과 거의 검정색(약 19.8:1) 및 bg-white/text-black을 순수 값으로 제공합니다. --background 및 --foreground를 재정의하고 bg-background 및 text-foreground와 같은 의미론적 유틸리티를 사용하십시오.
스크립트가 볼 수 없는 것
inspect.mjs는 렌더링된 페이지에서 실행할 수 있을 때 아래 첫 번째, 세 번째 및 다섯 번째 항목을 다룹니다. 나머지와 실행할 수 없을 때 모든 항목을 코드나 페이지를 읽어 확인하십시오. 하나를 확인할 수 없으면 "확인되지 않음" 아래에 나열하고 이유를 설명하십시오.
- 이미지 및 그라데이션 위의 텍스트를 포함한 각 실제 텍스트 및 배경 쌍의 대비.
contrast명령으로 쌍 측정 - 작은 텍스트가 본문 복사본인지 짧은 레이블인지 여부
- 렌더링된 레이아웃의 줄 길이. 몇 개의 전체 줄에서 문자 수 계산
- 애니메이션 및 비디오의 깜빡임 속도
- 섹션 간 밝기 점프 및 다크 테마 내 흰색 임베드
- 로드 중 레이아웃 이동,
width및height가 없는 이미지 및 비디오 포함 - 색상만으로 상태가 전달되는지 여부
- 축소 모션을 무시하는 JavaScript 기반 애니메이션
em, 백분율 또는font약어로 설정된 크기 및background-size로 구축된 줄무늬
보고서 템플릿
Easy on the Eyes – 감사 보고서
페이지/경로: [경로 또는 URL]
스크립트: audit.mjs / inspect.mjs (둘 다 실행된 경우)
## 오류
- [error] type-rem-zoom: ...
- [규칙 설명] ...
- [위치] ...
## 경고
- [warning] type-body-size: ...
- ...
## 노트
- [note] theme-both-schemes: ...
- ...
## 확인되지 않음
- [항목] ... 이유: ...
## 요약
- 오류 X개, 경고 Y개, 노트 Z개
- 확인되지 않은 항목 W개