웹 디자인 스타일가이드 - 해상도

http://styleguide.co.kr/index.php

리메인에서 제공하는 웹 디자이너를 위한 스타일 가이드
웹/앱 디자인을 할 때 기본적으로 알아야 할 것들이 카테고리 별로 잘 정리되어 있다.
나처럼 비전공자이거나 웹디자인 기본 지식이 부족한 사람에게 아주 유용한 사이트다.
이렇게 좋은 정보를 무료로 공유해 주셔서 정말 감사하다.
공부할 겸 내용을 정리했는데, 읽으면서 잘 이해되지 않는 부분은 더 찾아보면서 내용을 추가했다.
(* 가 표시된 부분은 따로 찾아본 내용, 내 생각, 궁금한 점을 적어둔 것이다.)

​
​

해상도(Resolution)와 PPI(Pixels Per Inch)

TV, 모니터, 스마트폰 등 디스플레이 장치에서 화면을 이루는 각각의 면이 몇 개의 픽셀로 이루어져 있는지를 나타내는 것이다. 다시 말해 이미지의 가로와 세로에 몇 개의 화소(픽셀)가 있는지를 뜻한다. 픽셀이 많을수록 더 세밀하게 이미지를 표현할 수 있다.

그런데 똑같은 픽셀의 양이라도 '픽셀의 크기'가 다르다면? 세밀함의 정도가 달라보이는 문제가 생길 수 있다. 그래서 PPI라는 단위가 생겼다. PPI는 'Pixels per Inch'의 약자로 1인치 당 픽셀이 몇 개인지를 나타내는 것이다. 디스플레이의 픽셀 밀도를 뜻한다.

해상도와 PPI가 높다고 무조건 좋은 것은 아니다. 세밀한 표현이 가능하지만 그만큼 메모리를 많이 소모하게 된고, 메모리 용량은 한정적이기 때문에 인터넷 환경이 느려지게 된다.

스마트폰의 경우 20-30cm를 기준으로 437ppi까지 구분이 가능하다. 모니터의 경우(업체들마다 다르긴 하지만) 50-60cm를 기준으로 인접 픽셀이 구분되지 않을 정도로 선명하다고 느끼는 ppi는 185ppi 정도라고 한다. 그러므로 디스플레이는 크기와 용도에 따라 요구되는 해상도가 다르게 제작된다. 웹을 디자인하고 개발하기 위해서도 각 디스플레이의 해상도를 정확히 이해하고, 올바르게 보여지도록 작업해야 한다.

5K라는 용어는 해상도의 표현 방법의 하나로 1,000(kilo)의 5배라서 5K라고 부른다. 정확히 5000을 의미하는 것은 아니고 약 5000픽셀 정도의 가로 해상도를 뜻한다.

​
​

래스터화(Rasterization)

그래픽을 렌더링하는 방식 중 하나로, 화면의 오브젝트를 픽셀로 매핑하는 것이다. 디스플레이 시스템이 전자 데이터 또는 신호를 비디오나 이미지로 바꾸는 프로세스이다. 특정 미디어 구성의 요구를 파악한 후 다음 이미지를 최적으로 디스플레이 장치에 투영할 수 있도록 리소스를 할당한다.
​

래스터화 단계

• 논리적 표현: DP(Density-independent pixel)

처음에는 모든 도면의 좌표가 dp단위로 지정된다. dp는 추상 단위이며, 수학 좌표 공간에서만 의미가 있다. 화면의 크기가 달라도 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위이다.

• 물리적 표현: Rendered Pixels(px)

dp는 픽셀로 렌더링된다. 이 과정을 래스터화라고 한다. dp에 배율을 곱하여 픽셀을 얻는다. 배율이 높을수록 선명도가 높아진다.

• 다운샘플링: Physical Pixels(downsampling, px)

장치 화면의 해상도가 이전 단계에서 렌더링 된 이미지보다 낮을 수 있다. 이럴 경우 이미지를 표시하려면 해상도를 낮추기 위해 이미지를 다운샘플링(크기 조정)해야 한다.

• 인지: Physical Device(ppi)

마지막으로, 계산된 픽셀이 물리적 화면에 표시된다. ppi는 픽셀이 실물로 얼마나 큰지를 알려준다.

​
​

dp의 개념

디스플레이 기술이 발전하고 고밀도 디스플레이가 등장하면서, 디바이스 해상도도 발전했다. 같은 크기의 물리적 공간 안에 더 많은 픽셀을 넣어서 화면을 더 선명하게 표현할 수 있게 되었다.

픽셀의 크기는 정해져있지 않다. 픽셀 밀도가 높을수록 픽셀 크기는 작아진다. 그래서 같은 1픽셀인데, 이미지의 크기가 차이나는 현상이 발생한다. 이런 현상으로 인해 'dp(또는 dip, density-independace pixel, 밀도 독립적 픽셀)'개념이 등장한다. dp는 다양한 화면 크기에서 동일한 비율로 출력되도록 하는 픽셀 단위이다.

스크린은 픽셀로 구성된다. 만약 픽셀을 기준으로 디자인하면 디바이스의 픽셀 밀도로 인해 의도한 것과 다르게 작거나 크게 표시될 수 있다. 따라서 모바일 어떤 화면에서도 같은 크기로 보이도록 Android는 dp라는 단위를, ios에서는 pt라는 단위를 사용한다. 그래픽 디자인 툴은 보통 1px=1dp로 설정되어 따로 설정을 변경할 필요는 없다.

고밀도 디스플레이에서 줄어든 이미지를 dp 개념에 맞춰 강제로 크기를 늘리면 이미지가 깨지는 현상이 발생한다. 그러므로 각기 다른 디바이스에 디자인을 적용하기 위해 원래 크기의 2배, 3배, 4배 등 다양한 크기로 작업해두어야 한다. 효율적으로 작업하기 위해서는, 고밀도 디스플레이를 고려하여 픽셀 사이즈를 결정하고, 애초에 가장 큰 이미지로 제작하여 각 디바이스에 대응하는 것이 좋다.

• 개발자와 디자이너는 안드로이드 어플리케이션 개발 시 사용자의 기기 크기를 알 수 없기 때문에 해상도 별로 이미지를 분류하여 넣어주기 위한 분류도구로 ~ dpi를 사용한다.

• ldpi (low), mdpi(medium), hdpi(high), xhdpi(x-high), xxhdpi, xxxhdpi

• dpi는 dot per inch의 약자로, 1인치의 정사각형에 들어가는 점의 개수이다.

• dot란 인쇄에 사용하는 잉크 또는 그에 상응하는 점을 말한다. 따라서 dpi는 보통 출력물을 제작할 때 사용한다.

• 그런데 왜 웹/앱 제작할 때 dpi 단위를 사용할까..?

​
​

8배수 디자인

배율디자인에서 아이콘, 이미지 등 작업을 할 때 8배수의 픽셀크기로 하는 것이 좋다고 한다. 왜 8의 배수 픽셀일까? 그 이유는 디바이스가 그래픽을 렌더링 할 때 홀수의 경우 픽셀이 깨지는 경우가 있기 때문이다. 8배수인 이유는 해상도를 1.5배 등과 같이 0.5배를 할 때에도 소수가 아닌 정수의 값이 유지되기 때문이다.
​

각 해상도 밀도들은 0.5 : 1 : 1.5 : 2 : 3 : 4의 비율을 가지고 있다.

• ldpi, mdpi, hdpi, xdpi, xxdpi, xxxdpi 순서대로 말하고 있는 것 같다.

• 소수점의 비율이 있기 때문에 4배수가 아닌 8배수로 작업을 해야 소수가 아닌 정수 값이 유지된다.
  ​

4.0 xxxhdpi 기반에서 8배수에 맞춰 32x32px의 아이콘을 만들어 각각의 밀도로 다운사이징 한다면 다음과 같다.

1.0 mdpi는 1/4 비율이므로 8px

1.5 hdpi는 1.5/4 비율이므로 12px

2.0 xhdp는 2/4 비율이므로 16px

3.0 xxhdpi는 3/4 비율이므로 24px 가 된다.
​

만약 4.0 xxxhdpi 기반에서 8배수에 맞추지 않고 36x36px의 아이콘을 만들어 각각의 밀도로 다운사이징 한다면 다음과 같다.

1.0 mdpi = 9px

1.5 hdpi = 13.5px (!)

2.0 xhdpi = 18px

3.0 xxhdpi = 27px
​

8배수에 맞추지 않으면 13.5px 처럼 소수점 값이 나올 수 있는데, 소수점이 나올 경우 반올림되어 표현된다. 아직 1.5x 디스플레이가 존재하고 있으므로, 모든 디바이스에 대응하기 위해서는 반드시 크기와 간격은 8의 배수인 것이 좋다. 웹디자인은 가장 큰 사이즈만 제공한 후 디바이스에서 그래픽을 랜더링한다.

​
​

효율성을 위한 다운사이징

이론적으로는 4.0xxxhdpi 기반에서 디자인 하는 것이 맞지만, 2.0 xhdpi기반에서도 구분 가능한 픽셀밀도인 약 430ppi를 충족하고 있으므로, 효율성을 위해 2.0 xhdpi 기반에서 디자인하여 사용한다. 다만 확대 시에는 차이가 있다.

​