분류 design

디자이너의 DPI 및 PPI 해결 가이드

컨텐츠 정보

  • 조회 513 (작성일 )

본문

실제 장치를 예로 들어 설명하는 DPI 및 PPI에 대한 모든 의심을 명확하게 설명하는 놀라운 안내서는 설계에 미치는 영향, 4K, Retina 디스플레이 등을 설명합니다.


https://www.sebastien-gabriel.com/designers-guide-to-dpi 


이 안내서는 처음부터 크로스 DPI 및 크로스 플랫폼 설계에 대해 배우거나 더 많은 지식을 원하는 초급 디자이너부터 초급까지를 위한 "시작하기"또는 입문용으로 설계되었습니다.


가능한 한 적은 수의 수학과 해석 할 수 없는 그래프가 없으므로 간단한 설명으로 간단한 설명을 통해 설계 프로세스를 직접 이해하고 적용 할 수 있습니다.


DPI 및 PPI 란 무엇입니까 


DPI 또는 인치당 도트 수는 인쇄시 처음에 사용 된 공간 도트 밀도를 측정 한 것입니다. 프린터가 1 인치에 넣을 수 있는 잉크 방울의 수입니다. 인치당 도트 수가 많을수록 이미지가 더 선명해집니다.


이 개념은 인치당 픽셀 당 PPI라는 이름으로 컴퓨터 화면에 적용됩니다. 동일한 원리 : 인치당 화면에 표시되는 픽셀 수를 계산합니다. DPI라는 이름도 화면에 사용됩니다.


구체적이고 관련성 있는 예를 들어, Windows 컴퓨터의 초기 PPI는 96입니다. Mac은 72를 사용했습니다.이 값은 당시에 구축 한 화면이 생성 한 구성에서 72 "도트"또는 인치당 픽셀 수를 나타 내기 때문에 결정되었습니다. . 이 값은 80 년대, Windows, Mac 또는 모든 장치 제조업체에서 시작되어 다양한 PPI를 자랑하는 다양한 화면을 만듭니다.


해상도, 픽셀 및 물리적 크기 


누군가에게 픽셀의 크기를 묻는 것은 까다로운 질문이므로 혼동하는 좋은 방법입니다. 픽셀은 수학적 표현 이외의 크기, 물리적 가치 또는 의미가 없습니다. 이는 인치 단위로 표시되는 실제 화면 크기, 인치당 픽셀 단위로 표시되는 화면 해상도 및 픽셀 단위로 표시되는 픽셀 화면 크기 사이의 관계의 일부입니다. 그것을 모두 배치하면 다음과 같습니다.


density-relationship.jpg 


적용 예는 다음과 같습니다. Mac Cinema Display 27”의 PPI는 109입니다. 즉, 인치당 109 픽셀을 표시합니다. 베벨이 있는 너비는 25.7 인치입니다. 실제 화면의 너비는 약 23.5 인치이므로 위의 수식에 이 값을 적용하면 서로 어떻게 작동하는지 이해할 수 있습니다.


density-cinema-display.jpg 


dpi-01.png 

내 설명에서 알 수 있듯이“해상도”는 PPI를 나타내며,이 경우“109”이지만 “2560x1440”은 아닙니다. 일반적으로 웹의 모든 곳에서 볼 수 있습니다.


"2560x1440"은 첫 번째 단락에서 "픽셀 화면 크기"라고 하는 픽셀 수입니다. 픽셀 화면 자체는 화면의 선명도에 대한 정보를 제공하지 않습니다. 1920 * 1080px 또는 5 인치 전화를 사용하여 40 인치 TV를 사용할 수 있습니다. 해상도를 인식하는 유일한 방법은 픽셀을 장치의 물리적 크기와 짝을 이루어 측정하는 것이며 PPI입니다.


디자인에 미치는 영향 


위에서 언급 한 화면에서 109 * 109px의 파란색 사각형을 디자인한다고 가정 해 봅시다. 해상도는 109PPI, 화면 픽셀 크기는 2560x1440, 물리적 너비는 23.5”입니다. 크기는 모니터에 표시되는 인치당 픽셀 수와 정확히 일치하므로 사각형의 너비는 1”, 높이 또는 1”입니다.


이제 동일한 23.5 인치 화면에서 33PPI보다 작은 72PPI의 해상도로 화면을 촬영하십시오. 이 경우 동일한 물리적 크기로 표시되므로 동일한 파란색 사각형이 33 % 더 커집니다.


blue-square-01.png 


화면 픽셀 크기 (및 "최상의" 해상도) 


화면 해상도는 사용자가 디자인을 인식하는 방식에 큰 영향을 줄 수 있습니다.


일반적으로 "해상도"라고도 하는 "화면 픽셀 크기"(PPI는 픽셀 밀도라고 함)는 화면에 가로 및 세로로 표시되는 픽셀 수입니다. 예를 들어, 시네마 디스플레이 (27in)의 경우 2560 * 1440px는 "스크린 픽셀 크기"를 구성한다. 너비는 2560, 높이는 1440입니다. 이전에 보았 듯이 이것은 화면 크기의 측정 단위가 아닙니다. 실제 디스플레이가 이 숫자를 어떻게 사용하는지 봅시다.


오늘날의 LCD 모니터에는 사전 정의 된 기본 또는 "최상의"해상도가 있습니다. "최고의"해상도는 물리적으로 표시되는 픽셀 수가 소프트웨어에 의해 일대일로 그려지는 픽셀 수와 일치하는 상태입니다. 오래된 CRT 모니터와는 약간 달랐지만, 죽은 것으로 간주 될 수 있으므로 세부 정보를 입력하지 마십시오 (그리고 오래된 TV에 대한 부분적인 이해 만 밝히지 마십시오).


2560 * 1440px의 최고의 픽셀 화면에서 109 PPI를 표시 할 수 있는 27 인치 Cinema Display를 살펴 보겠습니다. 줄이면 요소가 더 크게 나타납니다. 결국 거의 2 픽셀의 가로 인치를 사용하여 거의 적은 픽셀로 채울 수 있습니다.


resolution-01.png 




나는 이 경우가 될 것이기 때문에 사실상 말했다. 화면의 최적 픽셀 화면 크기는 2560 * 1440px입니다. 다운되면 픽셀이 여전히 여기에 있으며 109PPI로 표시됩니다. "갭"을 채우기 위해 OS가하는 일은 모든 것을 늘려주는 것입니다. GPU / CPU는 모든 픽셀을 가져 와서 새로운 비율로 계산합니다.


27 "에서 픽셀 수가 1280 * 720 (너비의 절반, 높이의 절반)이 되도록 하려면 GPU가 화면을 채우기 위해 두 배 큰 픽셀을 시뮬레이션해야합니다. 간단한 디바이더로 인해 비율의 절반이 상당히 좋아 보이지만 비율의 1/3 또는 3/4를 요구하면 10 진수로 끝나고 픽셀을 나눌 수 없습니다. 아래 예를 참조하십시오.


resolution-02.png 


아래의 다른 예를 고려하십시오. 최상의 해상도 화면에서 1px 라인을 찍습니다. 이제 픽셀 수를 150 % 작게 적용하십시오. 화면을 채우려면 CPU가 비주얼을 150 %로 생성하고 모든 것에 1.5를 곱해야 합니다. 1 * 1.5 = 1.5이지만 절반 픽셀은 가질 수 없습니다. 일어날 일은 주변 픽셀을 색상의 일부로 채우고 흐림을 만듭니다.


resolution-03.png 


그렇기 때문에 Retina Macbook Pro를 사용 중이고 해상도를 변경하려는 경우 아래 화면이 표시되어 아래 스크린 샷에서 이 해상도가 1280 * 800px 인 것처럼 보입니다. 사용자의 해상도 경험을 사용하여 크기 비율을 표현합니다.


resolution-04.png 


이것은 픽셀 수를 물리적 크기의 단위로 사용하기 때문에 매우 주관적인 표현이지만 적어도 그들의 견해로는 거짓말이 아닙니다.


알다시피, "해상도"라는 단어는 종종 여기서 "픽셀 화면 크기"라고 하는 것을 설명하기 위해 사용되며, PPI는 때때로 "픽셀 밀도"라고도 합니다. 이것이 잘못된 것은 아니지만 정확하지 않습니다. "해결"의 실제 의미를 보거나 들을 때 반드시 이해하십시오. 예를 들어, Apple은 문구 (Prasing) : 화면 해상도를 설명하기 위해 "인치당 264 픽셀 (ppi)로 2048 x 1536 해상도"를 사용합니다. 이 경우 PPI와 함께 컨텍스트에서 올바르게 사용합니다.


4k 란 


최근에 4K라는 용어를 많이 들었을 것입니다. (최소한 2014 년 초에 이것을 썼을 때) 4k는 꽤 유행적인 주제입니다. 그것이 무엇인지 이해하려면 먼저 "HD"의 의미를 이해합시다.


조심하십시오. 이것은 매우 단순화 된 것입니다. 가장 일반적인 해결책에 대해서만 이야기하겠습니다. HD에는 여러 범주가 있습니다. HD라는 용어는 720 수평선에서 1280x720px 또는 720p로 시작하는 모든 픽셀 화면 크기에 적용됩니다. 표준 해상도를 위해 이 해상도를 SD라고도 합니다.


full HD라는 용어는 1920x1080px 화면에 적용됩니다. 대부분의 TV는이 해상도와 점점 더 많은 고급 전화기 (Galaxy SIV, HTC one, Sony Xperia Z, Nexus5)를 사용합니다.


4K는 3840x2160 픽셀에서 시작합니다. 또한 Quad HD라고도 하며 UHD의 UHD라고도 합니다. 간단히 말해 픽셀 수로 4K 화면에 4 1080p를 넣을 수 있습니다.


4K의 또 다른 픽셀 수는 4096x2160입니다. 약간 더 크며 프로젝터 및 전문 카메라에 사용됩니다.


4k-01.png 

4K 디스플레이를 컴퓨터에 연결하면 어떻게 됩니까?


현재 OS는 4K로 확장되지 않습니다. 즉, 4K 디스플레이를 크롬 북 또는 맥북에 연결하면 가장 높은 DPI 자산 (이 경우 200 % 또는 @ 2x 자산)을 사용하고 정상 비율로 표시합니다. 모든 것이 좋아 보이지만 작습니다. 가상의 예 : 12 "4K 화면을 12"고해상도 화면 (2x)이 있는 컴퓨터에 연결하면 모든 것이 두 배 작게 나타납니다.


헤르츠 모니터 


PPI와 픽셀에서 약간의 휴식 시간이 있습니다. 화면의 해상도 설정에 가까워 모니터 Hz 값이 있는 것을 볼 수 있습니다. PPI와는 아무런 관련이 없지만 모니터 Hertz 또는 재생률은 모니터가 초당 고정 이미지 또는 프레임을 표시하는 속도의 단위입니다. 60Hz의 모니터는 초당 60 프레임을 표시 할 수 있습니다. 120Hz, 120fps 등의 모니터


UI와 관련하여 모니터 Hertz (Hz)는 애니메이션이 얼마나 매끄럽고 상세하게 보일지를 정의합니다. 대부분의 화면은 60Hz입니다. 초당 표시되는 프레임 수는 장치의 처리 및 그래픽 성능에 따라 달라집니다. Atari 2600에서 120Hz 화면을 조정하는 것은 쓸모가 없습니다.


더 잘 이해하려면 아래 예를 보십시오. T-rex는 60Hz와 120Hz 화면에서 빠르고 정확하게 같은 속도로 A에서 B로 이동합니다. 60fps 화면은 애니메이션 중에 9 개의 프레임을 표시 할 수 있는 반면 120fps는 동일한 시간에 2 배 더 많은 프레임을 논리적으로 표시합니다. 120Hz 화면에서 애니메이션이 훨씬 부드럽게 나타납니다.


hertz-01.png 


망막 디스플레이란? 


“Retina display”라는 이름은 Apple에서 iPhone 4 릴리스 용으로 도입했습니다. 기기의 PPI가 너무 높아서 사람의 망막이 화면의 픽셀을 구별 할 수 없었기 때문에 Retina라고 불립니다.


이 문장은 사용되는 장치의 화면 크기 범위에 해당하지만 화면이 나아질수록 눈이 픽셀, 특히 둥근 UI 요소를 인식 할 수 있도록 훈련됩니다.


기술적으로, 그들이 한 것은 정확히 같은 물리적 크기로 높이와 너비가 두 배나 많은 픽셀을 표시하는 것입니다.


iPhone 3G / S는 3.5 인치 대각선으로 480 * 320px의 픽셀 수로 163PPI입니다. iPhone 4 / S는 3.5 인치 대각선으로 960 * 640px의 픽셀로 326PPI를 만듭니다.


retina-01.png 


팔! 정확히 두 번. 쉬운 승수. 따라서 화면의 요소는 크기가 작을뿐 아니라 두 배나 많은 픽셀을 가지며 실제 크기가 동일하기 때문에 시각적으로 두 배나 선명합니다. 단일 1 개의 일반 픽셀 = 4 개의 망막 픽셀, 4 배 많은 픽셀.


복잡한 설계에 직접 적용하려면 아래 예를 고려하십시오.


retina-02.png 

"Retina"디스플레이 이름 지정은 Apple에서 소유하므로 다른 회사는 "HI-DPI"또는 "Super power pixel maximum sp33d display"(후자 상표를 사용합니다)를 사용하거나 전혀 사용하지 않습니다. 기기 사양을 읽는 동안 DPI와 화면 크기 (얼마나 재미 있는지)를 파악하는 것은 사용자의 몫입니다.