디자인 해상도

요즘은 웹이나 앱에서 보이는 아이콘과 같은 그래픽적 요소들을 벡터로 작업하여 이미지가 깨지는 현상에 대한 걱정을 잘 하지 않습니다만 벡터 작업 후 추출(export)할 때 2배수 혹은 3배수, 4배수로 추출하는 것이 필요하다는 점만 유의하시면 됩니다. 그 이유는 아래 그림을 보면 알 수 있듯 점점 고밀도화되어 가고 있는 디스플레이에 일관된 품질로 유지하기 위함입니다.

좀 더 이해를 돕기 위해 해상도 관련 용어 4가지에 대해 알아보아요.

Pixel(픽셀)

이미지 해상도를 의미하며 1px로 표현됩니다. 디지털 이미지를 구성하는 기본단위로 아래 그림과 같이 작은 사각형(화소)가 많을수록 선명하게 화면이 노출됩니다. 포토샵으로 작업을 하는 분(jpg, png, gif와 같은 비트맵 데이터)들은 해상도가 큰 디바이스를 기준으로(3 혹은 4배수) 디자인 작업을 진행해야 고밀도 디스플레이에서 이미지가 깨지는 현상을 방지할 수 있습니다. SVG나 CSS와 같은 벡터 그래픽은 디자인 작업은 1배수로 작업을 해도 픽셀 밀도에 영향을 받지 않으나 추출 시 배수에 맞춰서 추출하는 것이 필요 합니다.

DPI (Dots Per Inch)

인치당 점의 수를 나타내는 인쇄 및 화면 해상도 단위로 숫자가 높을수록 선명하게 노출됩니다.

300pdi는 1인치당 300개의 점으로 구성되어 있다는 의미로 특히 인쇄 품질을 결정하는데 중요한데요, 포스터, 패키지, 리플렛 등과 같은 인쇄물 작업 시 150~300pdi가 주로 적용됩니다.

<안드로이드 DPI>

초기에는 160dpi가 보편적이였으나 이제는 초고밀도(xhdpi) 320dpi가 보편적으로 적용됩니다.

- mdpi 기준으로 1dp = 1px

- xxhdpi 기준으로 1dp=4px

관련 콘텐츠