반응형 웹 기술 이해 v.2
TRANSCRIPT
반응형 웹 기술 이해 v.2레티나 디스플레이를 위한
클라이언트 측 이미지 처리 기법
SK planetSyrup Store개발그룹
정찬명 매니저
반응형 웹 기술 이해
반응형 웹 기술 이해 v.1http://readme.skplanet.com/
고밀도 해상도를 위한 이미지 처리 기법
주제 선정 이유
모바일 영역 뿐만 아니라 테블릿/데스크톱 영역에서도 고밀도 디스플레이가 증가함에 따라 이에 대응할 수 있는 고해상도 이미지 처리 기법 또한 관심을 가질 필요가 생겼음.
레티나 디스플레이
애플이 iPhone 4에 고해상도 LCD를 적용하면서 활용했던 마케팅 용어.
망막이 구분할 수 없을 정도로 작은 크기의 화소와 밀도(over 300 pixel per inch)를 가진 표시 장치.
현재에 이르러 상당수 경쟁사 제품군이 레티나 수준의 디스플레이를 제공하면서 더 이상 스마트폰 단말의 마케팅 용어로써의 가치는 떨어지는 추세.
레티나 디스플레이
하지만 여전히 고해상도 디스플레이를 언급할 때 대명사 처럼 쓰인다.
그리고 '1픽셀 = 사각형 점 하나' 라는 기존의 전통적인 픽셀 개념을 파괴했다.
덕분에 픽셀의 정의는 더 혼란스러워 졌다.
픽셀, 무엇이 문제인가?픽셀은 더 이상 "디지털 화면을 구성하는 가장 작은 점"이라고 말할 수 없게 되었다.
좌: 전통적인 픽셀의 개념 v.s. 우: 레티나 디스플레이의 픽셀 개념.
이미지 출처 - http://goo.gl/JvqKBv
물리 픽셀
논리 픽셀
픽셀의 정의
디바이스 픽셀(=물리 픽셀)단말이 실제로 표현할 수 있는 물리적인 화소 기본 단위.
CSS 픽셀(=논리 픽셀)디바이스 픽셀과 무관하게 HTML/CSS 에서 논리적으로 표현할 수 있는 화소 기본 단위.
아이폰 4는 몇 픽셀인가?
640 * 960디바이스 픽셀(=물리 픽셀)
320 * 480CSS 픽셀(=논리 픽셀)
레티나 디스플레이, 무엇이 문제인가?
디더링(dithering = anti-aliasing) 효과 때문에 일반 해상도인 96dpi(CSS dots per inch)에 최적화 된 이미지가 고해상도 192dpi 이상 단말(iPhone 4+)에서 뭉개지는 현상 발생.
대안1: 다운 샘플링실제 표현하고자 하는 이미지 크기의 2배수 큰 이미지를 준비한 다음, 다시 1/2 크기로 강제 축소(HTML resize)하여 제공하는 것.
<img src="a.png" width="200" height="200"> // 원본 이미지<img src="a.png" width="100" height="100"> // 다운 샘플링
레티나 디스플레이의 이미지 품질 문제를 해결하지만 과도하게 사용하면 페이지 로드 성능을 떨어뜨리는 문제 발생.
장점: 하나의 소스로 개발하여 구현 및 유지보수 편의.
대안2: image-rendering [draft]CSS WD(Working Draft) 속성 중 하나로써 이미지 디더링(안티알리어싱)을 강제로 금지시키는 속성을 적용하여 이미지 품질을 다소 개선할 수 있음.
.x { image-rendering : crisp-edges; }
그러나 2015-02 현재 모바일 단말 중 iPhone 5+ 사파리 브라우저만 지원 됨.
표준 정보 1 - http://dev.w3.org/csswg/css-images-3/#valdef-image-rendering-crisp-edges 표준 정보 2 - https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering 호환성 정보 - http://caniuse.com/#search=image-rendering
대안3: retina.js이미지 원본과 함께 두 배 큰 이미지를 서버에 미리 업로드해 놓고 JS를 통해 사용자 단말의 dpr(devicePixelRatio, device pixel/css pixel) 값을 구한다. 사용자 단말 dpr이 1을 초과하는 경우 HTML/CSS 코드를 변경하여 고해상도 이미지를 표시한다.
abc.png // default [email protected] // if ( devicePixelRatio > 1 )
이 방식의 단점은 레티나 단말에서 두 개의 이미지를 모두 요청한다는 점이다. 페이지 로딩 성능 저하 문제 발생.
retina.js - https://github.com/imulus/retinajs
대안4: @media.x { background:url(x1.png); }
@media (min-resolution:192dpi){ .x { background:url(x2.png); }}
인치당 CSS 픽셀 수가 192개를 넘어가면 x2.png 이미지를 배경으로 표시. 이미지를 중복 요청하지 않음.
표준 정보 - http://www.w3.org/TR/css3-mediaqueries/#resolution호환성 정보 - http://caniuse.com/#feat=css-media-resolution respond.js - https://github.com/scottjehl/Respond
대안5: <picture> [draft]<picture> <source media="(min-resolution:192dpi)" srcset="2x.png"> <img src="x1.png"></picture>
인치당 CSS 픽셀 수가 192개를 넘어가면 x2.png 이미지를 표시. 이미지를 중복 요청하지 않음. 2015-02 현재 크롬과 오페라 브라우저만 지원.
표준 정보 - http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-element
호환성 정보 - http://caniuse.com/#search=picture picturefill - https://github.com/scottjehl/picturefill
레티나 이미지 대안 비교
레티나 대응 브라우저호환성
성능개발편의유지보수
다운 샘플링 O O X O
image-rendering △ X O O
retina.js O O X X
@media O O O X
<picture> O X O X
현존하는 대안에 대한 고찰
현존하는 모바일 단말의 평균 dpr은 1.9 수준으로 iPhone 4 이후 상향 평준화 되었음.
dpr 참고 1 - http://mydevice.io/devices/ dpr 참고 2 - http://screensiz.es/phone
웹 사이트가 RWD를 지원하거나 모바일 우선 전략을 취하는 경우 성능에 부담을 주지 않는 수준에서 이미지 다운 샘플링 기법과 @media 기법을 교차 적용하는 것을 고려할 수 있다.
이미지 다운 샘플링 기법은 <img> 요소에 적용하기 적합하고, @media 기법은 CSS background 속성에 적용하기 적합하다.
결 론
'브라우저 호환성, 성능, 개발 편의 및 유지보수 관점'에서 모든 상황을 만족할만한 하나의 대안은 존재하지 않는다.
전략 1)<picture> 요소 또는 CSS image-rendering 속성이 표준으로 확정되고 브라우저 호환성 문제가 해결되기 전까지는 높은 이미지 품질을 요구하는 경우에만 제한적으로 고해상도 이미지를 적용하는 것이 좋다.
전략 2)현재로써는 다운 샘플링 기법과 @media 기법 위주로 적용하는 것을 권장할 수 있다.