레티나 웹(Retina Web)에 대응하는 우리들의 자세 – “래스터 이미지 편”


레티나 웹(Retina Web)에 대응하는 우리들의 자세 – “래스터 이미지 편”

레티나 웹(Retina Web) 시대 도래! for Planner for Designer for FI Designer & Developer

2013년 새로운 한 해가 열렸습니다. 올 한 해에도 많은
IT 이슈가 쏟아져 나오겠죠? 지금까지 그랬던 것처럼. 작년 한 해에 이어 올 해에도 다뤄야 할 이슈 중 하나가 레티나 디스플레이(Retina Display)에 대응하는 방법론이겠죠? 이번 아티클을 통해 현재까지 등장한 방법론을 하나 하나 다뤄보겠습니다.


retina-00

애플(Apple) 사의 iPhone 4+, iPad 3+, Retina Macbook Pro 등 레티나 디스플레이를 탑재한 제품군들이 시장에 출시되면서 레티나 디스플레이는 표준 디스플레이(Display Standards)를 대체해 나가고 있으며, 애플 제품이 아닌 제품들 역시 고 해상도(High Density) 디스플레이를 탑재하고 있습니다. 즉, 고 해상도를 지원하는 기기(Device)의 웹 브라우저(Browser)에서 웹(Web)을 바라보고 이용하는 세상이 열렸다는 것이지요.

사용자는 보다 깨끗한 화면을 볼 권리가 있기 때문에 웹을 만들어 가는 사람들은 이를 반영하여 웹을 만들어 가야합니다.


retina

레티나 웹에서 발생할 수 있는 문제점 for Planner for Designer for FI Designer & Developer

레티나 웹 시대로 넘어오면서 픽셀(Pixel) 기반의 그래픽(Graphic) 처리에 문제가 발생되었습니다. 문제가 발생한 원인은 레티나 디스플레이의 픽셀 데이터 처리가 기존 표준 디스플레이의 픽셀 처리와 달라졌기 때문입니다. 아래 이미지를 보시면 픽셀 그래픽 포멧으로 구성된 사진, 이미지 폰트의 경우(붉은 테두리 영역) 레티나 디스플레이에서 깨져 보이는 현상을 확인할 수 있습니다.


problum

이미지를 보니 픽셀 이미지로 구성된 데이터가 깨져 보이는 것이 확연한데요. 그렇다면 레티나는 픽셀을 어떻게 처리하길래 기존 표준 디스플레이와 다르게 깨져보이는 걸까요?

픽셀(Pixel)을 다르게 처리하는 레티나 디스플레이

레티나 디스플레이가 해석하는 픽셀을 이해하려면 다음의 세가지 픽셀 개념을 알고 있어야 합니다. 이번 기회에 각 픽셀에 대한 개념을 정리해보시길 바랍니다.
:-)

  • Device Pixel
  • CSS Pixel
  • Bitmap Pixel

Device Pixel이란? for Planner for Designer for FI Designer & Developer


device-pixels

Device Pixel(제품의 물리적 픽셀)이란? 제품의 디스플레이를 구성하는 물리적인 작은 단위를 말합니다. 픽셀은 컬러(Color)와 명도(Brightness)로 구성되며, 미세하게 작은 간격을 두고 있지만 어느 정도 거리에서 바라보면 하나의 큰 그림으로 사람에게 보입니다. 일종의 착시라고 볼 수 있겠죠.

Screen Density 란? for Planner for Designer for FI Designer & Developer

제품 디스플레이의 해상도는 밀도(Density) 단위로 구분되는데, 밀도는 “물리적인 공간에 얼마만큼의 픽셀이 포함되어 있는가?”를 말합니다. 일반적으로 1인치 안에 포함된 픽셀 개수를 나타내는 PPI(Pixel per Inch)로 이야기 합니다. 예를들어 72 ppi는 1인치 안에 72개의 픽셀이 포함되어 있다는 이야기이고, 300 ppi는 300개가 포함되어 있다는 말인 거죠. 애플(Apple) 사의 故 스티브 잡스(Steve Jobs)는 고 밀도의 디스플레이 패널이 상용화 되자, 이를 iPhone 4에 탑재한 후 시장에 내놓으면서 마케팅 적으로 레티나(Retina, 망막)라는 용어를 사용했습니다. 망막(Retina)이라고 이름 붙인데는 인간이 눈(망막)으로 구분할 수 있는 인치당 픽셀의 개수를 300 ppi로 보는데, 레티나 디스플레이(326 ppi)는 이에 근접하는 고 해상도 스크린 임을 강조하는 수단으로 사용한 것이죠.


st

사실 고 해상도 디스플레이(IPS, In-Plane Swiching)는 애플이 만든 것이 아니지만, 레티나 용어를 먼저 사용하면서 마치 애플의 것인양 마케팅했던 점은 그가 가진 놀라운 점이었다고 생각됩니다.
:-)

CSS Pixel이란? for Planner for Designer for FI Designer & Developer


css-pixels

CSS 픽셀은 웹 브라우저가 웹 페이지 콘텐츠(Page Contents)를 화면에 그릴 때, 사용되는 추상적인(abstract) 단위로 장치에 독립적인 픽셀(DIPs, Device-Independent Pixels)이라고 부르며, 표준 디스플레이 기준에서는 1개의 CSS 픽셀이 1개의 Device 픽셀에 해당합니다. 예를들어 설명해보도록 하죠.

위 코드는 표준 디스플레이에서 256 x 256 Device 픽셀(px)로 화면에 렌더링(Rendering, 그린다) 합니다. 반면 레티나 디스플레이는 같은 이미지(img)를 CSS 픽셀의 크기(256 x 256)는 동일한 상태에서 내부에 구성된 픽셀의 개수가 4배 증가된 512 x 512 Device 픽셀로 렌더링합니다. 즉, 2배 커지게 됩니다. (물리적인 크기가 아니라, 내부 픽셀의 구성 수가 증가)


css-device-pixels

레티나 디스플레이에서는 같은 물리적 공간에 표준 디스플레이 대비 4배 많은 픽셀 양이 사용됩니다.

레티나 디스플레이의 픽셀 비율(Pixel Ratio)을 감지할 수 없을까? for Planner for Designer for FI Designer & Developer

레티나 디스플레이가 표준 디스플레이와 비교했을 때 어떻게 Device 픽셀을 처리하는지 알아봤습니다. 공간을 구성하는 밀도가 달라지기 때문에 픽셀 기반의 그래픽이 레티나 디스플레이에서 문제가 생기는 것이죠. 그렇다면 레티나 디스플레이를 표준 디스플레이와 구분할 수 있는 방법은 없을까요? CSS3 미디어쿼리(Media Queries)를 사용하면 감지할 수 있습니다.

위 코드는 min-device-pixel-ratio 쿼리(Query) 속성을 사용하여 제품 스크린의 Device 픽셀 값이 1.5인지 확인하여 레티나를 감지합니다. 비슷한 코드가 반복되어 보이는 이유는 웹킷(webkit), 모질라(moz), 오페라(o) 등 브라우저 제조사(vender)의 접두어(prefix)가 붙어야 작동되기 때문이죠. 아직은 실험적인 상태로 테스트할 수 있기 때문에 브라우저 접두어를 붙여줘야 합니다. 이후 실험 상태가 끝나게 되면 정식으로 지원하게 되는 것이죠. 상단의 Result(결과) 버튼을 눌러보면 레티나 디스플레이의 경우 retina display로 표시될 것이고, 그렇지 않다면 standards display로 표시됩니다. 여러분의 웹 브라우저 스크린이 레티나가 아닐 경우, 표준 디스플레이로 표시됩니다.
:-)자바스크립트(Javascript)로도 레티나 디스플레이를 감지할 수 있습니다.

window.devicePiexlRatio 의 값이 1보다 큰 수가 나오면 스크린 밀도가 표준 디스플레이보다 높은 것으로 간주하여 이를 레티나 디스플레이로 감지할 수 있는거죠. 하지만 아직까지 이를 지원하지 않는 브라우저(IE, Firefox)들도 있기 때문에 사용에 다소 제약이 따릅니다. (참고 quirksmode.org)

Bitmap Pixel이란? for Planner for Designer for FI Designer & Developer


bitmap-pixels

비트맵(Bitmap) 픽셀은 래스터(Raster, 직사각형 격자의 화소, 색상 등을 종이 또는 모니터 매체에 표시하는 그래픽 포멧) 기반의 이미지(JPG, PNG, GIF 등)에 사용되는 가장 작은 단위로 그래픽을 구성하는 각각의 픽셀은 화면에 표시하기 위한 위치(position), 색상(color) 등의 정보(data)를 포함하고 있습니다. 몇몇 이미지 포멧(GIF, PNG 등)은 불투명도(Opacity & Alpha Channel, 알파 채널)를 픽셀 정보에 포함하기도 합니다. 래스터 기반의 이미지 해상도는 웹 상의 CSS 픽셀로 정의될 수 있는데요. 웹 브라우저는 CSS의 height, width 속성에 따라 래스터 기반의 이미지를 화면에 재정의하여 그려 줍니다. 래스터 기반의 이미지가 표준 디스플레이에서 그려질 때, 1개의 Bitmap 픽셀은 결과적으로 1개의 Device 픽셀에 대응 합니다. 하지만 레티나 디스플레이에서는 CSS 픽셀의 공간(물리적으로 같은 크기)에 그림을 채워 표시하여야 하기 때문에 4배 많아진 Device 픽셀에 대응하지 못하고 쭉 늘어나서 퍼지게 됩니다. 이 때문에 깨져보이는 현상이 발생하게 됩니다.

css-device-bitmap-pixels

레티나 디스플레이는 물리적으로 동일한 표면 공간을 비트맵 이미지로 채우기 위해 강제로 늘여 이미지가 퍼져 보입니다.

레티나 웹에 대응하는 방법은 어떤 것이 있을까? for Planner for Designer for FI Designer & Developer

물론 이 글을 읽는 독자 중에는 아직 레티나 디스플레이가 보편화된 것은 아니라고 보기 때문에 차후 보편화되면 그 때 대응하자는 생각을 가질지도 모르겠네요. 하지만 이미 레티나 디스플레이에 대응하기 위한 테크닉이 다수 존재하고 있습니다. 이번 파트에서는 각각의 대응 방법에 대해 알아보고 성능 문제나 크로스 브라우징 지원 이슈 등에 대해서 이야기 하는 시간을 가져 보겠습니다.

레티나 디스플레이 대응 방법 : HTML & CSS 크기 변경 for Planner for Designer for FI Designer & Developer

레티나 디스플레이에 대응하여 웹 그래픽을 표시하는 가장 간단한 방법은 표준 디스플레이에서 보여질 이미지의 2배 큰 래스터 이미지를 만들어 서버(Server)에 올린 후 HTML, CSS, JS 등을 사용하여 이미지의 크기를 정확히 절반으로 줄이는 것입니다. 예를 들어 200 x 300 공간에(CSS 픽셀) 이미지를 표시하기 위하여 공간보다 2배 큰 400 x 600 픽셀의 래스터 이미지를 만들어 서버로 업로드 한 후, CSS를 사용하거나 HTML 속성을 사용하여 정확하게 반으로 줄여주는 거죠. 이 방법을 사용하면 레티나 디스플레이에서는 400 x 600의 고 밀도로 처리되어 200 x 300 공간에 자리잡게 되며, 표준 디스플레이에서는 4배 적은 저 밀도 픽셀로 래스터 이미지를 다운 샘플링(Down Sampling)하여 표시하게 됩니다.

downsampling
표준 디스플레이에서는 CSS로 크기(width, height) 조정을 통해 이미지 해상도를 다운 샘플링을 합니다. 이 방법을 사용하면 레티나 디스플레이와 표준 디스플레이 환경에 모두 대응할 수 있습니다. 레티나 디스플레이에서는 원본 이미지가 가지고 있는 고 밀도로 처리되기 때문에 매우 깨끗하게 화면에 표시되겠죠. 반면 표준 디스플레이에서는 다운샘플링되기 때문에 약간 흐릿할 수 있습니다.

html-sizing
레티나 디스플레이에서는 원본 래스터 이미지의 고 밀도로 처리되기 때문에 디테일이 살아나서 깨끗하게 보입니다.

동영상 강좌 : 디자이너 테크닉! Photoshop Batch 활용 방법! for Designer

포토샵 배치(Batch)는 액션(Action)을 활용하여 디자인 프로세스를 자동화(Automate)시켜 주기 때문에 아주 유용합니다. 동영상 강좌에서는 폴더 내에 존재하는 많은 이미지 파일들을 일괄적으로 변경시키는 배치 활용법을 알려줍니다. 디자이너의 업무 향상을 위한 테크닉! 디자이너라면 반드시 알아두셔야 겠죠?

HTML에서의 이미지 크기 조정 for FI Designer & Developer

CSS 픽셀 공간 조정을 위한 가장 손쉬운 방법은 HTML <img> 요소에 width, height 값을 설정하는 것입니다. 아래 코드는 이를 구현한 간단한 데모(DEMO)입니다. 먼저 결과(Result) 버튼을 눌러 확인하신 후 코드를 보면 이해하기 쉬우실 겁니다. 원리는 앞서 설명한 것처럼 2개의 이미지(레티나용, 표준 디스플레이용)를 준비한 후, 레티나용 이미지를 절반으로 줄여 화면에 표시하는 것이죠. 왼쪽에 자리 잡은 이미지가 레티나용 입니다. 오른쪽 이미지보다 깨끗하게 표시되는 것을 확인할 수 있습니다.
:-)

이미지 요소의 크기 속성을 지정하는 것은 필수는 아닙니다. 하지만 브라우저가 이미지를 다운로드 받기 전에 화면에 그릴 공간을 예약하는 것은 페이지 레이아웃이 변하는 것을 방지할 수 있기 때문에 사용하는 것이 권장됩니다.

이 테크닉은 어디에 사용하면 좋을까요? 아무래도 이미지 개수가 작은 웹 콘텐츠에 이용하면 좋을 것 같네요. 왜냐하면… 이미지 개수가 많으면 그 만큼 사이트의 로딩 속도는 느려지니까요. (표준 디스플레이에서 레티나 용 이미지를 처리하기 때문)

Javascipt를 활용한 이미지 크기 조정 for FI Designer & Developer

아래 코드는 자바스크립트를 이용하여 HTML <img>의 크기를 일괄 변경합니다. 여기서는 코드 량을 줄이기 위해 jQuery를 활용했습니다. HTML 탭 메뉴를 눌러서 코드를 확인해보면 <img> 요소의 크기 설정이 적용되어 있지 않은 것을 확인 할 수 있습니다. 결과(Result) 버튼을 눌러보면 왼쪽의 그림이 오른쪽 보다 깨끗하게 표시되는 것을 확인할 수 있겠죠?

마찬가지로 이 테크닉 역시 이미지 개수가 적은 사이트에 사용하는 것이 같은 이유로 적절합니다. 이미지 개수가 많아지면 느려질테니까요.

CSS를 활용한 이미지 크기 조정 for FI Designer & Developer

CSS 코드로만 이를 해결하려 할 때, 사용할 수 있는 가장 일반적인 테크닉으로는 HTML 요소의 배경으로 이미지를 넣고, CSS 배경 크기 조정(background-size) 속성을 사용하는 것입니다. H3 로고 이미지의 원본 크기는 408 x 418 이지만, CSS로 영역을 만들어 준 후, 배경 이미지 크기 조정 속성을 사용하여 공간에 포함(contain)시켰습니다. 물론 px 단위를 사용하여 변경할 수 있는 유연함이 있지만, contain 속성 값을 사용하면 가로/세로 비율(ratio)을 유지된 채 공간을 채우기 때문에 매우 유용합니다. 단! 이 방법의 약점은 IE 6,7,8 에서는 지원하지 않기 때문에 적용할 수 없다는 것입니다.

이 방법은 :before, :after 가상 요소(Pseudo Elements)에도 적용할 수 있습니다. 그 뿐 아니라 CSS Sprites 이미지 처리에도 활용될 수 있죠. 하지만 아쉽게도 이 테크닉은 콘텐츠 이미지(HTML에 삽입되는 이미지)에는 사용할 수 없기 때문에 다소 제한적 입니다. 지금까지 소개한 방법의 장/단점을 정리해볼까요?

장점
쉽게 적용 가능합니다. 어느 정도 크로스 브라우징 이슈를 해결할 수 있습니다.

단점
레티나 디스플레이가 아닌 표준 디스플레이 브라우저에서도 큰 이미지를 다운로드 받아야 합니다. 다운 샘플링된 이미지는 사용된 알고리즘에 따라 표준 디스플레이에서 선명함을 잃을 수 있습니다. CSS3 배경 이미지 크기 조정 속성은 IE 8 이하에서는 적용되지 않습니다.

동영상 강좌 : 디자이너 테크닉! Photoshop Droplet 활용 방법! for Designer


ps_droplet

이 쯤에서 다시 디자이너를 위한 포토샵 강의를 진행해보죠. 앞서 배치(Batch)에 대해 알아봤는데요. 포토샵은 배치 이외에도 유용한 자동화 기능을 제공합니다. 이번에는 드롭플릿(Droplet)을 만들어 활용하는 방법을 알려드리죠. 동영상 강좌에서는 폴더 내에 존재하는 많은 이미지 파일들을 일괄적으로 변경시키는데 포토샵을 구동하지 않고 드롭플릿에 드래그하는 것만으로도 변경할 수 있는 방법을 알려줍니다. 디자이너의 업무 향상을 위한 테크닉! 2번째 여기서는 파일 이름 뒤에 @2x를 붙이는 드롭플릿을 소개합니다. 디자이너라면 반드시 꼭! 꼭! 알아두셔야 겠죠?
:-)

픽셀의 밀도를 물어보는 테크닉! (Querying Pixel Density) for FI Designer & Developer


querying-pixel

아마 레티나 디스플레이에 대응하는 가장 인기 있는 방법은 제품의 브라우저에 적용 가능한 픽셀 농도(밀도)를 확인한 후, 그에 걸맞게 CSS 또는 Javascript로 처리하는 것일 겁니다. CSS3 미디어쿼리를 사용하여 레티나 디스플레이를 감지하는 방법은 앞에서도 다루었는데요. 이를 이용하여 처리하는 기법입니다.

CSS3 미디어쿼리를 활용한 이미지 크기 조정 for FI Designer & Developer

코드를 보면 레티나 디스플레이를 감지한 후, 고 해상도를 지원하는 제품 브라우저에서는 @2x/ 폴더 내의 이미지를 사용합니다. background-size: contain; 코드가 있기 때문에 이미지는 CSS 픽셀 영역(204 x 209)에 맞춰 사이즈가 조정됩니다. 이 방법은 애플 사의 제품이 아니어도 동일하게 적용됩니다.
:-)이 테크닉은 어디에 사용하면 좋을까요? 웹/앱 디자인 시, 배경 이미지 테크닉을 사용하여 그래픽을 표현할 수 있습니다. 단, 배경 이미지가 아닌 HTML에 삽입하는 콘텐츠 이미지에 적용할 수는 없다는 단점이 있습니다.

장점
레티나 지원하는 제품 브라우저에서만 큰 이미지를 다운로드 받습니다. 모바일 브라우저 호환성이 좋은 편입니다. 픽셀을 정밀하게 제어할 수 있습니다.

단점
HTML <img> 요소에는 적용할 수 없는 테크닉 입니다. 배경 이미지가 아닌, 콘텐츠 이미지를 배경 이미지로 표현하는 것은 의미 적인 마크업 관점에서 올바르지 않습니다.

CSS3 image-set()를 활용한 이미지 크기 조정 for FI Designer & Developer

iOS6, 크롬 21+ 부터는 CSS3 image-set()을 지원합니다. 이 방법을 사용하면 앞서 다룬 미디어쿼리를 사용하지 않고도 레티나 디스플레이를 감지해서 고 해상도 이미지를 처리할 수 있습니다. 원리는 간단합니다. background-image 속성 값으로 image-set()을 사용하되, 내부에 2개의 url()을 사용하여 표준 디스플레이(1x)와 레티나 디스플레이(2x)를 감지하여 각각의 환경에 맞게 이미지를 처리해주는 기법입니다.

물론 이 방법 역시 앞서 다룬 미디어쿼리와 마찬가지로 콘텐츠 이미지에는 적용할 수 없습니다. 단점으로는 아직 이를 지원하는 브라우저가 많지 않기 때문에 현 시점에서의 효용성은 떨어진다는 것입니다. 하지만 이 기술이 보편화되는 시점이 오면 충분히 유용하게 사용할 수 있을 것이라고 생각됩니다.
:-)

장점
레티나 지원하는 제품 브라우저에서만 큰 이미지를 다운로드 받습니다. 픽셀을 정밀하게 제어할 수 있습니다.

단점
HTML <img> 요소에는 적용할 수 없는 테크닉 입니다. 배경 이미지가 아닌, 콘텐츠 이미지를 배경 이미지로 표현하는 것은 의미 적인 마크업 관점에서 올바르지 않습니다. 아직은 모바일 브라우저 호환성이 좋은 편은 아닙니다.

HTML5 srcset 속성을 활용한 이미지 크기 조정 for FI Designer & Developer

레티나 웹에 대응하는 마지막으로 방법으로 HTML5의 srcset 속성에 대해 다뤄보겠습니다. 방법은 앞서 다룬 CSS3 image-set()과 유사합니다. 차이점은 HTML5 자체에서 레티나를 감지하여 적합한 이미지 처리를 한다는 것입니다. CSS와 JS의 도움을 받지 않고 말이죠. 하지만 srcset 속성을 지원하는 브라우저는 아직 존재하지 않습니다. 그렇기 때문에 현재 사용이 어려운 테크닉이라고 볼 수 있습니다. 하지만 srcset 속성을 해석하여 처리해주는 srcset polyfill의 도움을 받으면 브라우저에서 처리되는 결과를 볼 수 있습니다.

이 방법은 앞서 다뤘던 미디어쿼리 & image-set()과는 달리 콘텐츠 이미지에 적용할 수 있습니다. 아직 지원하는 브라우저가 없다는 단점이 있지만, 스크립트로 이를 극복할 수 있기 때문에 사용을 고려해봐도 좋지 않을까 생각해봅니다.

장점
HTML 콘텐츠 이미지에 적용할 수 있습니다. 픽셀을 정밀하게 제어할 수 있습니다.

단점
아직 지원하는 브라우저가 없어 JS 라이브러리의 힘을 빌려야 합니다. 레티나 디스플레이가 지원되는 제품의 브라우저에서는 저품질과 고품질 모든 이미지를 다운로드 받아야 합니다.

지금까지 레티나 웹을 준비하는 우리들의 자세 “래스터 이미지 편”이었습니다. 다음 회에서는 레티나 웹을 준비하는 우리들의 자세 “벡터 이미지 편”을 이어 진행할 계획입니다. 아직은 혼란스러운 환경임은 분명하지만, 모른 척하지 않고 꾸준히 준비하는 노력이 뒷받침 된다면 분명 더 나은 웹을 만들 수 있는 우리들이 되지 않을까 합니다. 2013년 한 해 복 많이 받으시길 바랍니다. 감사합니다. FIN.

참고 자료: Towards A Retina Web


Leave a comment