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