Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

반응형 웹 기술 이해 V.2

레티나 디스플레이를 위한 클라이언트 측 이미지 처리 기법_SK planet_README

  • Inicia sesión para ver los comentarios

반응형 웹 기술 이해 V.2

  1. 1. 반응형 웹 기술 이해 v.2 레티나 디스플레이를 위한 클라이언트 측 이미지 처리 기법 SK planet Syrup Store개발그룹 정찬명 매니저
  2. 2. 반응형 웹 기술 이해 반응형 웹 기술 이해 v.1 http://readme.skplanet.com/
  3. 3. 고밀도 해상도를 위한 이미지 처리 기법 주제 선정 이유 모바일 영역 뿐만 아니라 테블릿/데스크톱 영역에 서도 고밀도 디스플레이가 증가함에 따라 이에 대 응할 수 있는 고해상도 이미지 처리 기법 또한 관 심을 가질 필요가 생겼음.
  4. 4. 레티나 디스플레이 애플이 iPhone 4에 고해상도 LCD를 적용하면 서 활용했던 마케팅 용어. 망막이 구분할 수 없을 정도로 작은 크기의 화 소와 밀도(over 300 pixel per inch)를 가진 표시 장치. 현재에 이르러 상당수 경쟁사 제품군이 레티나 수준의 디 스플레이를 제공하면서 더 이상 스마트폰 단말의 마케팅 용어로써의 가치는 떨어지는 추세.
  5. 5. 레티나 디스플레이 하지만 여전히 고해상도 디스플레이를 언급 할 때 대명사 처럼 쓰인다. 그리고 '1픽셀 = 사각형 점 하나' 라는 기존의 전통적인 픽셀 개념을 파괴했다. 덕분에 픽셀의 정의는 더 혼란스러워 졌다.
  6. 6. 픽셀, 무엇이 문제인가? 픽셀은 더 이상 "디지털 화면을 구성하는 가장 작은 점"이라고 말할 수 없게 되었다. 좌: 전통적인 픽셀의 개념 v.s. 우: 레티나 디스플레이의 픽셀 개념. 이미지 출처 - http://goo.gl/JvqKBv 물리 픽셀 논리 픽셀
  7. 7. 픽셀의 정의 디바이스 픽셀(=물리 픽셀) 단말이 실제로 표현할 수 있는 물리적인 화소 기본 단위. CSS 픽셀(=논리 픽셀) 디바이스 픽셀과 무관하게 HTML/CSS 에서 논리적으로 표현할 수 있는 화소 기본 단위.
  8. 8. 아이폰 4는 몇 픽셀인가? 640 * 960 디바이스 픽셀(=물리 픽셀) 320 * 480 CSS 픽셀(=논리 픽셀)
  9. 9. 레티나 디스플레이, 무엇이 문제인가? 디더링(dithering = anti-aliasing) 효과 때문에 일반 해상도인 96dpi (CSS dots per inch)에 최적화 된 이미지가 고해상도 192dpi 이상 단말 (iPhone 4+)에서 뭉개지는 현상 발생.
  10. 10. 대안1: 다운 샘플링 실제 표현하고자 하는 이미지 크기의 2배수 큰 이미지를 준비 한 다음, 다시 1/2 크기로 강제 축소(HTML resize)하여 제공하는 것. <img src="a.png" width="200" height="200"> // 원본 이미지 <img src="a.png" width="100" height="100"> // 다운 샘플링 레티나 디스플레이의 이미지 품질 문제를 해결하지만 과도하 게 사용하면 페이지 로드 성능을 떨어뜨리는 문제 발생. 장점: 하나의 소스로 개발하여 구현 및 유지보수 편의.
  11. 11. http://cdpn.io/ravWqR
  12. 12. 대안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
  13. 13. http://cdpn.io/YPLVKo
  14. 14. 대안3: retina.js 이미지 원본과 함께 두 배 큰 이미지를 서버에 미리 업로드해 놓고 JS를 통해 사용자 단말의 dpr(devicePixelRatio, device pixel/css pixel) 값을 구한다. 사용자 단말 dpr이 1을 초과하는 경 우 HTML/CSS 코드를 변경하여 고해상도 이미지를 표시한다. abc.png // default image abc@2x.png // if ( devicePixelRatio > 1 ) 이 방식의 단점은 레티나 단말에서 두 개의 이미지를 모두 요 청한다는 점이다. 페이지 로딩 성능 저하 문제 발생. retina.js - https://github.com/imulus/retinajs
  15. 15. 대안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
  16. 16. 대안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
  17. 17. 레티나 이미지 대안 비교 레티나 대응 브라우저 호환성 성능 개발편의 유지보수 다운 샘플링 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
  18. 18. 현존하는 대안에 대한 고찰 현존하는 모바일 단말의 평균 dpr은 1.9 수준으로 iPhone 4 이 후 상향 평준화 되었음. dpr 참고 1 - http://mydevice.io/devices/ dpr 참고 2 - http://screensiz.es/phone 웹 사이트가 RWD를 지원하거나 모바일 우선 전략을 취하는 경우 성능에 부담을 주지 않는 수준에서 이미지 다운 샘플링 기법과 @media 기법을 교차 적용하는 것을 고려할 수 있다. 이미지 다운 샘플링 기법은 <img> 요소에 적용하기 적합하고, @media 기법은 CSS background 속성에 적용하기 적합하다.
  19. 19. 결 론 '브라우저 호환성, 성능, 개발 편의 및 유지보수 관점'에서 모든 상황을 만족할만한 하나의 대안은 존재하지 않는다. 전략 1) <picture> 요소 또는 CSS image-rendering 속성이 표준으로 확 정되고 브라우저 호환성 문제가 해결되기 전까지는 높은 이미 지 품질을 요구하는 경우에만 제한적으로 고해상도 이미지를 적용하는 것이 좋다. 전략 2) 현재로써는 다운 샘플링 기법과 @media 기법 위주로 적용하는 것을 권장할 수 있다.

×