아이콘 구현·가독성·접근성
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
접근 가능한 이름 Accessible Name
보조기술이 컨트롤이나 요소를 식별하는 데 사용하는 이름.
아이콘 버튼의 기능 전달.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
SVG 아이콘 SVG Icon
벡터 경로 기반 SVG로 표현한 아이콘.
크기 조절·테마 대응 웹 아이콘.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
래스터 아이콘 Raster Icon
픽셀 이미지로 저장한 아이콘.
세밀한 질감·픽셀아트·앱 아이콘.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
아이콘 폰트 Icon Font
기호를 글꼴의 글리프에 배치해 사용하는 방식.
글꼴 기반 아이콘 출력.
로딩 실패·접근성·불필요한 글리프 용량을 고려한다.
SVG 스프라이트 SVG Sprite
여러 심볼을 묶고 필요한 도형을 참조해서 재사용하는 방식.
일관된 아이콘 자산 관리.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
아이콘 아틀라스 Icon Atlas
여러 아이콘을 하나의 이미지·텍스처에 모아 둔 자산.
게임 UI·렌더링 자산 관리.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
합자 아이콘 Ligature Icon
특정 문자열을 하나의 기호 글리프로 대체하는 아이콘 방식.
이름 기반 아이콘 폰트 사용.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
현재 글자색 연동 아이콘 CurrentColor Icon
CSS currentColor 등을 통해 주변 글자색을 따르는 아이콘.
테마·호버·비활성 상태 동기화.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
장식 요소 접근성 숨김 Decorative Hiding
중복 의미의 장식을 접근성 트리에서 제외하는 처리.
텍스트 옆 장식 SVG.
의미 있는 상태나 유일한 기능 설명은 숨기지 않는다.
비텍스트 대비 Non-text Contrast
필수 UI 도형·상태 표시를 주변과 구별할 수 있는 명도 차.
컨트롤 경계·상태 아이콘 검수.
정확한 준수 기준과 예외는 적용 WCAG 문서를 별도로 확인한다.
중복 부호화 Redundant Coding
색 외에 모양·아이콘·텍스트를 함께 사용해 같은 의미를 전달하는 방식.
오류·경고·팀 구분.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
아이콘 상태 변형 Icon State Variant
기본·선택·비활성 등 상태에 맞춘 아이콘 표현 변화.
탭·좋아요·토글 기능.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
우에서 좌로 읽기 반전 RTL Mirroring
읽기 방향과 관련된 아이콘을 RTL 언어에 맞게 조정하는 처리.
뒤로 가기·단계 흐름.
시계·상표·일부 미디어 기호까지 무조건 반전하지 않는다.
입력 판정 영역 Hit Area
클릭·터치 입력을 받아들이는 실제 영역.
작은 아이콘 버튼의 조작 범위.
보이는 아이콘보다 넓게 잡을 수 있다.
의미 기반 아이콘 명명 Semantic Icon Naming
도형 이름과 사용 의미를 구분해 토큰·컴포넌트를 명명하는 방식.
같은 체크 기호의 선택·성공 사용 구분.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
아이콘 부분 추출 Icon Subsetting
사용하는 아이콘만 포함해 자산 크기를 줄이는 처리.
아이콘 폰트·대규모 세트 최적화.
의미·접근 가능한 이름·조작 역할은 파일 형식만으로 해결되지 않는다. 실제 테마·크기·입력 방식에서 검증한다.
Icon Implementation, Legibility & Accessibility
Open an entry for its visual reference, comparisons and source-language text.
Accessible Name 접근 가능한 이름
The name assistive technology uses to identify a control or element.
Communicating an icon button's function.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
SVG Icon SVG 아이콘
An icon represented as vector paths in SVG.
Scalable web icons that adapt to themes.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
Raster Icon 래스터 아이콘
An icon stored as a pixel image.
Detailed textures, pixel art, and app icons.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
Icon Font 아이콘 폰트
An approach representing icons as glyphs within a font.
Rendering font-based icons.
Consider loading failures, accessibility, and unused glyph size.
SVG Sprite SVG 스프라이트
A collection of SVG symbols reused by referencing the required shapes.
Consistent icon asset management.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
Icon Atlas 아이콘 아틀라스
An asset packing multiple icons into a single image or texture.
Managing game UI and rendering assets.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
Ligature Icon 합자 아이콘
An icon approach replacing a particular text sequence with one symbol glyph.
Using icon fonts through named ligatures.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
CurrentColor Icon 현재 글자색 연동 아이콘
An icon inheriting the surrounding text color through currentColor or a similar mechanism.
Synchronizing theme, hover, and disabled states.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
Decorative Hiding 장식 요소 접근성 숨김
Excluding redundant decorative content from the accessibility tree.
Decorative SVGs beside text.
Do not hide meaningful state information or the sole explanation of a function.
Non-text Contrast 비텍스트 대비
Luminance contrast that makes essential interface shapes and state indicators distinguishable from their surroundings.
Checking control boundaries and status icons.
Check the applicable WCAG documentation for exact requirements and exceptions.
Redundant Coding 중복 부호화
Communicating the same meaning through multiple cues, such as color, shape, icons, and text.
Distinguishing errors, warnings, and teams.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
Icon State Variant 아이콘 상태 변형
An icon variation corresponding to a state such as default, selected, or disabled.
Tabs, likes, and toggle functions.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
RTL Mirroring 우에서 좌로 읽기 반전
Adapting direction-dependent icons for right-to-left languages.
Back navigation and step sequences.
Do not automatically mirror clocks, trademarks, or all media symbols.
Hit Area 입력 판정 영역
The actual region that accepts click or touch input.
Interaction areas for small icon buttons.
The interactive area can be larger than the visible icon.
Semantic Icon Naming 의미 기반 아이콘 명명
Naming icon tokens or components while distinguishing geometric form from semantic purpose.
Distinguishing a checkmark's selection and success meanings.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.
Icon Subsetting 아이콘 부분 추출
Reducing asset size by including only the icons actually used.
Optimizing icon fonts and large icon sets.
A file format does not provide semantics, an accessible name, or an interaction role by itself. Test actual themes, sizes, and input methods.