반응형 웹 디자인의 현황 (2013)
Source
Evernote/Technote scraps/The State Of Responsive Web Design Smashing Mobile.md
Summary
본문은 2013 년 시점의 반응형 웹 디자인, 특히 ‘반응형 이미지’ 처리의 현황과 과제를 다룬다. 고해상도 (Retina/XHDPI) 디스플레이의 등장으로 이미지 품질과 성능 (대역폭) 간의 트레이드오프가 주요 이슈로 부상했다. 이를 해결하기 위해 두 가지 마크업 제안이 논의 중이었으나, 당시에는 표준화되지 않아 브라우저 지원이 없거나 폴리필 (Picturefill) 이 필요했다. 1) <picture> 요소: 미디어 쿼리를 통해 기기별로 다른 이미지 소스나 크롭 (Art Direction) 을 제공한다. 2) srcset 속성 (Apple 제안): <img> 태그 내에 다양한 해상도 및 뷰포트 크기에 맞는 이미지 소스를 나열하여 브라우저가 선택하도록 한다. 문서는 이러한 기술들이 아직 표준화 과정에 있으며, CSS Level 4 및 HTML5 API 등 미래 표준을 통한 개선이 필요함을 강조한다.
Key Points
- 반응형 웹 디자인의 핵심 과제는 고해상도 디스플레이에서의 이미지 품질 유지와 모바일 기기의 대역폭 최적화이다.
- 이미지 최적화를 위한 두 가지 주요 마크업 제안:
<picture>요소와srcset속성. <picture>요소는 미디어 쿼리를 기반으로 기기별 이미지 소스 및 아트워크 방향 (Art Direction) 을 제어할 수 있다.srcset속성은<img>태그 내에 픽셀 밀도 (2x 등) 와 뷰포트 너비 (100w 등) 에 따른 이미지 소스를 정의한다.- 2013 년 당시 해당 기술들은 표준화되지 않아 브라우저 네이티브 지원이 없었으며, Picturefill 같은 폴리필이 필요했다.
- CSS Level 4 (
image-set()) 및 HTML5 API 등 미표준화 속성을 활용한 미래 개선 방향이 제시된다.