이미지 역할 정의
이미지는 단순한 시각 요소가 아니라,
명확한 역할을 가진 UI 구성 요소로 정의합니다.
이미지의 역할이 불분명할수록
접근성과 성능, 유지보수성은 함께 저하됩니다.
이미지를 바라보는 관점
Section titled “이미지를 바라보는 관점”이미지는 다음 기준으로 판단합니다.
- 이 이미지가 정보를 전달하는가
- 이 이미지가 기능을 수행하는가
- 이 이미지가 순수 장식인가
이미지는 반드시
하나의 역할만 가져야 합니다.
정보 전달 이미지
Section titled “정보 전달 이미지”정보 전달 이미지는
사용자에게 의미 있는 정보를 제공하는 이미지입니다.
- 콘텐츠 이해에 필수적인 이미지
- 설명, 안내, 시각적 정보가 포함된 이미지
- 텍스트를 대체하거나 보완하는 이미지
이 경우 이미지는
접근성과 의미 전달을 고려해 사용해야 합니다.
기능 이미지
Section titled “기능 이미지”기능 이미지는
사용자의 동작을 유발하는 역할을 합니다.
- 버튼 역할의 이미지
- 링크 역할의 이미지
- 조작 대상이 되는 아이콘
기능 이미지는
반드시 명확한 동작 의미를 가져야 하며,
시각적 표현보다 기능 설명이 우선됩니다.
장식 이미지
Section titled “장식 이미지”장식 이미지는
UI의 시각적 완성도를 높이기 위한 요소입니다.
- 배경 이미지
- 구분선, 패턴
- 의미 없는 아이콘
장식 이미지는
UI 이해에 필수적인 정보를 포함해서는 안 됩니다.
이미지 역할 구분의 기준
Section titled “이미지 역할 구분의 기준”이미지 역할을 구분할 때는 다음을 기준으로 합니다.
- 이 이미지가 없으면 정보가 손실되는가
- 이 이미지가 동작의 시작점인가
- 텍스트나 구조로 대체 가능한가
역할이 모호한 이미지는
설계 단계에서 다시 검토해야 합니다.
이미지 역할 정의의 목적
Section titled “이미지 역할 정의의 목적”이미지 역할 정의는
접근성과 성능 최적화의 출발점입니다.
이미지의 역할이 명확할수록
- 대체 텍스트 작성이 쉬워지고
- 포맷 선택이 명확해지며
- 불필요한 리소스 사용을 줄일 수 있습니다.
이미지를 구조의 일부로 명확히 정의함으로써
UI 전체 품질을 안정적으로 유지하는 것을 목표로 합니다.