반응형 이미지
SLUR UI System에서는
하나의 이미지를 모든 환경에 그대로 제공하지 않습니다.
반응형 이미지는 화면 크기, 해상도, 성능을 고려해
필요한 이미지를 필요한 상황에만 제공하기 위한 기준입니다.
반응형 이미지의 목적
Section titled “반응형 이미지의 목적”반응형 이미지는 다음 목적을 가집니다.
- 불필요한 이미지 용량 전송을 줄입니다.
- 다양한 디바이스 환경에서 품질을 유지합니다.
- 초기 로딩 성능을 개선합니다.
- LCP와 같은 핵심 성능 지표를 안정화합니다.
이미지는 항상
최적화된 상태로 전달되어야 합니다.
반응형 이미지 설계 기준
Section titled “반응형 이미지 설계 기준”반응형 이미지는 다음 기준에 따라 설계합니다.
- 이미지의 실제 표시 크기를 기준으로 제공합니다.
- 디바이스 해상도에 맞는 리소스를 제공합니다.
- 레이아웃 변경에 따라 이미지 크기가 달라지는 경우를 고려합니다.
반응형 이미지는
디자인이 아닌 구조 기준으로 설계해야 합니다.
해상도 대응 기준
Section titled “해상도 대응 기준”고해상도 디바이스 대응은 다음 기준을 따릅니다.
- 기본 해상도 이미지를 우선 제공합니다.
- 고해상도 이미지는 선택적으로 제공합니다.
- 과도한 고해상도 이미지는 지양합니다.
해상도 대응은
품질과 성능의 균형이 중요합니다.
반응형 이미지 사용 시 주의 사항
Section titled “반응형 이미지 사용 시 주의 사항”반응형 이미지를 사용할 때는 다음을 주의합니다.
- 필요 이상의 이미지 크기를 제공하지 않습니다.
- 모든 이미지를 반응형으로 처리하지 않습니다.
- 장식 이미지는 단순한 처리 방식을 우선합니다.
모든 이미지가
동일한 전략을 가질 필요는 없습니다.
반응형 이미지의 목적
Section titled “반응형 이미지의 목적”반응형 이미지는
디바이스 대응을 위한 기술이 아니라,
UI 성능과 사용자 경험을 위한 설계 기준입니다.
이미지를 상황에 맞게 제공할수록
UI는 더 빠르고 안정적으로 동작합니다.