작성자:
이 글은 CSS Length Explained에 대한 번역 및 편집본입니다.
여러분은 CSS를 사용하여 웹 사이트에 스타일을 지정할 때, 화면상의 인치(inch)가 실제 인치가 아니라는 것과, 픽셀(pixel)이 항상 실제 픽셀과 같지는 않다는 점을 알게 되셨을 겁니다. CSS 픽셀에서 빛의 속도가 어떻게 표현되는지 알고 계십니까? 이번 글에서는 C.G.P. Grey[1]에 있는 스타일의 단위 이름과 같은 이름인 몇몇 물리적 단위에 대한 이해를 시작으로, CSS 길이(length) 단위들의 의미를 살펴볼 것입니다.
산업에서의 인치(in)
인치를 일반적인 단위로 사용하는 곳에서 살고 있는 사람들은 이미 물리적인 인치에 익숙합니다. 미터법(metric system)을 사용하고 있는 사람들을 위해, 1933년부터 “산업적인 인치”는 수학적으로 2.54Cm 또는 0.0254m와 같은 것으로 정의됐습니다.
디바이스 픽셀
컴퓨터 화면은 사물을 픽셀로 표시합니다. 화면상에서 옆의 점과 독립적으로 총 천연색을 표시할 수 있는 하나의 물리적인 “빛점”을 a 픽셀(pixel) (그림 요소)이라고 부릅니다. 이 글에서는 화면상의 물리적 픽셀을 디바이스 픽셀이라고 할 것입니다(이후에 설명할 CSS 픽셀과 혼동하지 않기 위해서입니다).
디스플레이 픽셀 밀도, DPI(dots per inch), PPI(pixels per inch)
특정 기기에서 디바이스 픽셀의 물리적 치수는 보통 DPI(dots per inch)나 PPI(pixels per inch)로 생산자가 제공하는 디스플레이의 픽셀 밀도(pixel density)를 통해 알 수 있습니다. 디스플레이에 두 단위가 쓰일 때는 근본적으로 같은 것을 말하고 있는데, DPI는 일반적으로 많이 사용되지만 정확성이 좀 떨어지고, PPI는 보다 정확하지만 사람들이 보통 신경쓰지 않는 단위입니다. 디바이스 픽셀의 물리적인 치수는 DPI 값의 역수입니다.
제가 현재 사용하고 있는 2011년산 맥북 에어는 125 DPI의 화면을 가지고 있습니다. 그러므로,
(하나의 디바이스 픽셀의 가로나 세로의 크기) = 1/125 인치 = 0.008 인치 = 0.02032 cm 입니다.
확실히, 명세대로 종이에 출력하기에는 이 값은 너무 작습니다. 그러므로, DPI는 좀 애매합니다.
CSS 픽셀 (px)
CSS 픽셀 치수는 대략적으로, 가늘게 찡그리고 봐야할 정도로 너무 작거나, 너무 크지 않고, 사람의 눈으로 편히 볼 수 있는 크기로 생각할 수 있습니다. “보기에 편한”이라는 의미에 대해 알기 위해 안과 의사에서 문의하는 대신에, 다음과 같은 W3C CSS 명세서의 권고를 볼 수 있습니다.
참조 픽셀은 96 DPI의 픽셀 밀도를 가진 기기에 팔길이 정도 떨어져서 봤을 때의 하나의 픽셀에 대한 시각적 각도이다.
CSS 픽셀의 적정한 치수는 실제로 보는 이와 화면 사이의 거리에 의존합니다. (머리에 쓰는) 구글 글래스 같은 예외를 제외하고, 사람들은 보통 특정 디바이스에 대해 자신의 시야에 맞춰 자신만의 편안한 거리를 찾습니다. 실질적으로 사용자가 시각에 문제가 있는지 알수는 없습니다. 우리가 초점을 맞출 수 있는 것은 단지 주어진 디바이스의 규격에 맞는 전형적인 시(視)거리입니다. 예를 들어 보면, 휴대전화는 보통 가깝게 들고 있고, 노트북 컴퓨터는 보통 무릎이나 책상위에 놓고 사용합니다. 그러므로, 휴대전화의 “시거리(viewing distance)”는 노트북이나 데스크톱 컴퓨터보다 짧습니다.
시거리(The viewing distance)
앞서 언급한 것처럼, 시거리는 사람마다 그리고 기기마다 다릅니다. 이 것이 디바이스를 폼 팩터로 분류해야하는 이유입니다. 권고되는 레퍼런스 시거리(“팔길이”)와 레퍼런스 픽셀 밀도(“96 DPI”)는 실제로 역사를 가지고 있습니다. 이는 20세기 후반부에 사람들이 일반적으로 웹을 접근하는 방식에 근거한 것입니다.
21세기의 일상적인 디바이스들에 대해서, 다음과 같은 다른 레퍼런스 권고가 있습니다.
| 기본 픽셀 밀도 | CSS 픽셀 하나의 가로/세로 | 시거리 | |
|---|---|---|---|
| CRT 모니터를 가진 20세기 PC |
96 DPI |
~0.2646 mm (1/96in) |
28 in (71.12cm) |
| LCD화면의 최신 노트북[2] |
125 DPI |
0.2032 mm (1/125in) |
21.5 in (54.61cm) |
| 스마트폰/태블릿[3] |
160 DPI |
~0.159mm (1/160 in) |
16.8in (42.672cm) |
표에서 볼 수 있는 것처럼, 픽셀 밀도는 더 높아졌고, CSS 픽셀 크기는 점점 작아졌습니다. 여러분이나 저 같은 머글들(역자주:해리포터에서 마법사들이 보통 인간을 지칭하는 단어)은 디바이스 화면의 내용을 편안하게 보기 위해서는 기기를 좀 더 가까이 할 필요가 있게 됐습니다.
위와 같은 내용으로, CSS의 세상에 다음과 같은 기본적인 사실을 정립했습니다. CSS 픽셀은 값이 다른 물리적 치수로 보이게 표시될 것입니다. 하지만, 적정한 거리에서 보면 항상 바른 크기로 보일 것입니다. 이와 같은 원리를 활용하여, 기기의 폼 팩터와 독립적으로, 안전하게 기본적인 치수(예: 기본 폰트 크기)를 고정된 픽셀 크기로 지정할 수 있습니다.
CSS 인치 (in)
컴퓨터 화면에서 CSS 인치는 물리적인 인치와 전혀 상관이 없습니다. 대신에, CSS 인치는 96 CSS 픽셀과 정확히 같은 값으로 재정의 됐습니다. 이런 정의는 화면상에서 기본 CSS 단위들로는 신뢰할 수 있는 정확한 자를 절대로 그릴 수 없게 합니다. 하지만, CSS 단위의 이러한 정의는 모든 디바이스들에서 항상 CSS 단위로 지정된 요소들을 (사용자가) 보기 편하게 해 줍니다.
사용자가 웹 페이지를 종이에 출력하면, 브라우저는 CSS 인치를 물리적 인치로 변환할 것입니다. 이렇게 하면 CSS로 정확한 자를 그려서 종이에 출력할 수 있습니다(프린터 설정에서 용지에 맞춤 옵셥을 반드시 해제해야 합니다).
DPPX (Device pixel ratio)
미래로 접어들면서(제 날으는 자동차는 어디에 있을까요?), 오늘날의 많은 스마트폰들은 고밀도 화면을 가지고 있습니다. CSS 픽셀이 웹에 접속하는 모든 디바이스(예를 들어 네트워크 연결과 화면을 가진 모든 것)에서 일관되게 적절한 크기로 보여지기 위해서, 디바이스 생산업체는 다중의 디바이스 픽셀들을 하나의 CSS 픽셀에 매핑시켜 상대적으로 더 큰 물리적 크기로 보여줍니다. 디바이스 픽셀에 대해서 상대적인 CSS 픽셀 치수의 비율을 DPPS(device pixel ratio)라고 합니다.
널리 사용되고 있는 아이폰4를 예를 들어 살펴 보겠습니다. 아이폰4는 326 DPI의 화면을 가지고 있습니다. 위에 있는 표에 의하면 스마트폰의 전형적인 시거리는 16.8인치이고 기본 픽셀 밀도는 160 DPI 입니다. 하나의 CSS 픽셀을 만들기 위해서, 애플은 DPPS를 2로 설정했습니다. 그래서, iOS 사파리는 웹 페이지를 163 DPI의 전화기들과 같은 방식으로 표시합니다.
다음 내용으로 넘어가지 전에, 위에 있는 수치들을 다시 살펴보겠습니다. 실제로, DPPI를 2가 아닌 326/160=2.0375로 설정하여 CSS 픽셀이 정확하게 레퍼런스 치수에 맞게 할 수 있습니다. 하지만, 이러한 비율은 의도하지 않은 결과를 나을 수 있습니다. 각각의 CSS 픽셀이 온전한 하나의 디바이스 픽셀에 매핑되지 않기 때문에 브라우저는 모든 비트맵 이미지나, 선 등에 대해서 안티에일리어싱 하기 위한 노력을 해야만 합니다. 브라우저가 1 CSS 픽셀 굵기의 선을 2.0375 디바이스 픽셀로 그리는 것은 어려운 일입니다. 비율이 단순히 2이라면 선을 그리는 것이 보다 쉬울 것입니다.
그런데, 163 DPI는 이전 세대 아이폰의 픽셀 밀도입니다. 그래서, 웹 사이트 개발자들이 특별히 수정 작업을 안 해도 웹 사이트는 같은 방식으로 보일 것입니다.
디바이스 생산업체는 보통 DPPX 값으로 1.5나 2 또는 다른 정수를 선택합니다. 가끔 일부 디바이스들은 잘 운용되는 것을 포기하고, 1.325 DPPX 같은 비율을 선택하기도 합니다. 웹 개발자 입장에서는 아마 이런 기기들은 포기해야할 것입니다.
(첫 휴대 전화 운영 체제인) 파이어폭스 OS는 다음과 같은 방법으로 DPPX 계산을 구현했습니다. 실제 DPPX는 디바이스 생산업체에 의해 결정됩니다.
CSS 포인트 (pt)
포인트는 활판 인쇄 산업에서 비롯된 것으로 금속 활자 인쇄에서 흔히 사용하는 단위입니다. 세상이 점진적으로 활판 인쇄에서 DTP(desktop publishing)로 이동해 가면서, PostScript의 포인트는 1/72인치로 재정의됐습니다. CSS도 같은 규칙을 따르고 있습니다. 그래서, 1 CSS 포인트는 1/72 CSS 인치, 96/72 CSS 픽셀입니다.
디바이스의 화면에서 CSS 인치처럼, CSS 포인트는 전통적인 단위와 거의 관련이 없습니다. 이 크기는 단지 웹 페이지를 실제로 출력할 때에만 일치합니다.
CSS 파이카 (pc), CSS 센티미터 (cm), CSS 밀리미터 (mm)
CSS 인치처럼 화면상의 기본적인 길이 단위는 범용 상수인 빛의 속도로 정의된 표준 미터법대신에, CSS 픽셀에 의해 재정의 됐습니다.
문자 그대로 CSS에서는 빛의 속도를 재정의 할 수 있는데, 이는 초당 1,133,073,857,007.87 CSS 픽셀 [5] 입니다. CSS 상에서 상대성이론은 실세계에서 화면을 들여다 볼 때 전통적인 PC보다 더 작은 폼 팩터를 가진 디바이스에서 약간 더 느린 빛의 여행이 가능하게 합니다.
뷰포트 메타 태그
스마트폰이 손바닥 안에서 사용할 수 있을 정도로 간편하고, CSS 픽셀이 사용자에게 편안한 크기로 보여진다는 보장이 있다 하더라도, 단지 고정된 가로 크기의 데스크톱 웹사이트의 일부만을 보여줄 수 있는 디바이스는 유용하지 않을 것입니다. 같은 맥락에서, 스마트폰이 CSS의 단위를 무시하고 자기만의 방식으로 보이는 것 역시 유용하지 않습니다.
뷰포트 메타 태그의 도입은 휴대 기기에 페이지의 크기를 조절할 수 있는 능력을 사용자와 웹 개발자에게 줌으로써, 두 세상에 최상의 결과를 가져 왔습니다. 여러분은 모바일에 맞는 레이아웃을 디자인하고 뷰포트 크기 조절을 뺄 수도 있고, 데스크톱 브라우저를 위한 웹 사이트를 그대로 놔둔채 모바일 브라우저가 여러분과 사용자를 위해 크기를 줄이게 할 수도 있습니다. 늘 그렇듯이 자세한 설명과 사용법은 모질라 개발자 네트워크에서 찾을 수 있습니다.
결론
경쟁상황에 있긴 하지만, 브라우저 업체들은 웹 플랫폼의 안정성을 유지하려는 노력을 인식하고 있고 기능들을 표준 단체에 맞추려고 하고 있습니다. 공개된 기능이나 API는 표준으로 채택되게 선언하기 전에, 모든 경우에 대해서 유용성을 충분히 테스트할 것입니다. CSS 픽셀에 대한 정의는 처음부터 있어 온 것중에 하나입니다. 새롭게 소개되는 기능들은 이전의 동작을 바꾸기 보다는 하위 호환성을 유지해야 합니다[6]. 그래서, (디바이스 픽셀이나 뷰포트 메타 태그 같은) 그 것들의 다수는 부가 기능이 되야 할 것입니다. 다시 말하면, 표준 기능등을 사용한 오래된 웹 페이지들은 순방향 호환성이 유지돼야 합니다.
이와 같은 생각으로, 모질라는 파트너들과 함께 오픈웹 – 우리가 소중히 하는 유일한 플랫폼을 육성하고 정립하고 있습니다.
댓글이 없습니다.