오래 전에 나는 LCD 모니터와 텔레비전 생산에서 일했습니다. 그리고 한 번은 디스플레이 제어 회로를 개발하는 주요 회사의 엔지니어들과 대화에 참여했습니다. 그들은 "nose on glass engineering"(N.O.G.E.)의 스크린을 설계하고 제작한 우리 모두를 비난했습니다.
그들에 따르면 우리는 화면에 코를 파묻어야만 알 수 있는 개선에 집중했습니다. 우리는 지표를 늘렸습니다. 일상적인 사용역할을 하지 않습니다. 그리고 그들은 절대적으로 옳았습니다.
오늘날 모바일 업계도 마찬가지입니다. 태블릿과 스마트 폰에서 화면의 주요 특성이라고 불리는 것에주의하십시오. 대체로 이것은 픽셀 수와 특정 디스플레이 기술(IPS, OLED 또는 기타)일 수 있습니다. 그러나 이것이 정말로 주의를 기울여야 하는 유일한 세부 사항입니까? 그리고 일반적으로 그것들이 가장 중요합니까?
-디스플레이가 탑재된 iPhone 4가 출시된 7년 전으로 돌아가 보겠습니다. Apple은 이 화면의 밀도가 인간의 눈(망막 - 망막)의 해상도에 해당하는 326픽셀/인치이기 때문에 이 이름을 선택했습니다.
차이를 구별할 수 없기 때문에 더 높은 밀도가 필요하지 않을 가능성이 있습니다.
DisplayMate Technologies의 Ray Soneira 박사를 비롯한 일부 전문가들은 이 주장에 이의를 제기했습니다. 그러나 비평가들조차 그러한 지표가 한계에 매우 근접했으며, 이는 실제 적용에 의미가 있다는 데 동의했습니다. 300dpi는 광택 잡지의 사진 농도입니다. 그리고 아무도 그들의 품질에 대해 아직 불평하지 않았습니다.
그리고 지금 현재에 대해. 최대 밀도시중에서 판매되는 스마트폰의 화면은 인치당 806픽셀입니다. 이것은 약 소니 엑스 페리아 5.5인치 디스플레이가 전체 4K 이미지(2160 x 3840 픽셀)를 수용할 수 있는 Z5 프리미엄. 해상도가 약 1440 x 2960픽셀이고 화면 크기가 5.5~6인치이며 밀도가 550dpi를 초과하는 여러 전화기가 있습니다.
처음에 인치당 326픽셀이면 충분하다고 보증한 Apple도 iPhone X의 Super Retina 디스플레이에서 이를 최대 458픽셀까지 끌어올렸습니다.
이에 대한 기술 용어는 광기입니다.
의심할 여지 없이 인치당 500픽셀의 밀도 수준까지 미세한 차이를 볼 수 있습니다. 시력이 완벽하고 휴대전화를 눈에서 30cm 이내로 떼면 됩니다. 그러나 어쨌든 오늘날 그러한 제품을 만들 수 있는 기회가 있다고 해서 이러한 제품을 만들어야 한다는 의미는 아닙니다. 또한 이러한 디스플레이가 일반적으로 나머지 디스플레이보다 더 나은 성능을 발휘한다는 의미는 아닙니다.
모든 픽셀이 작동하도록 하려면 더 많은 컴퓨팅 성능과 에너지가 필요합니다. 화면에 점이 많을수록 각 점에서 빛을 발산하는 부분인 "열린 영역"에 대한 공간이 줄어듭니다. 따라서 백라이트의 밝기와 에너지 효율성이 저하되거나 둘 다 저하됩니다.
어떤 매개 변수에주의를 기울여야합니까?
오늘날 디스플레이는 더 이상 이미지 선형성의 왜곡 및 왜곡과 같은 문제를 겪지 않습니다. 제조업체가 10년 전에 CRT 스크린 사용을 중단한 이후로 우리는 그들을 보지 못했습니다. 그렇다면 우리의 현대 디스플레이는 완벽하지 않습니까? 대답은 물론 아니오입니다. 픽셀 수보다 훨씬 더 개선이 필요한 디스플레이 속성을 세 개 이상 나열할 수 있습니다.
밝은 조명에서의 화질
첫 번째는 태양광에서의 화질입니다. 밝기와 사용자 정의 대비를 높여 개선할 수 있습니다. 발광(발광) 디스플레이를 편안하게 보기 위해서는 주변과 같이 밝은 흰색을 표시해야 합니다.
밝기(에너지 소비) 외에도 화면은 좋은 조명 조건에서 작동하기에 충분한 대비를 제공해야 합니다. OLED 디스플레이는 일반적으로 사양에 100,000:1 또는 1,000,000:1의 명암비를 표시하지만 그것도 말도 안되는 소리입니다. 흑백 디스플레이 색상 사이의 완전히 어두운 방에서만 이러한 숫자를 얻습니다.
실제 작동 조건에서 대비는 주변광에 의해 감소됩니다. 그리고 이것은 현대 디스플레이의 문제입니다. 희귀 스크린은 일반적인 방에서 50:1 이상을 제공할 수 있으며 더 밝은 조명 조건에서는 더 낮습니다. 우리는 풀 컬러 반사 디스플레이 기술을 보고 싶지만 시장에는 아직 아무것도 없습니다.
색상 정확도
우리가 관심을 가져야 할 다음 속성은 색상 정확도입니다. 그러나 색상 팔레트의 표시기와 혼동하지 마십시오. 후자의 값은 디스플레이가 표시할 수 있는 색상 범위를 결정합니다. OLED 디스플레이 및 현재 QLED 디스플레이는 광범위한 색상을 제공하지만 높은 색상 충실도를 제공하지 않습니다.
소스 자료가 있고 잠재력이 드러날 수 있는 경우 넓은 색상 팔레트가 이상적입니다. 그러나 넓은 색 영역을 가진 일반적인 디스플레이는 이미지를 너무 밝고 만화처럼 만듭니다.
대신 콘텐츠 작성자의 팔레트(sRGB 또는 Rec. 709)에서 색상을 정확하게 렌더링하는 화면이 필요합니다. 전송 정확도는 두 색상 간의 차이를 나타내는 ΔE* 메트릭으로 표현됩니다. 값이 1에 도달하면 오류가 눈에 띄게 됩니다. 여러 테스트에서 ΔE* 계산의 낮은 차이를 보장하는 디스플레이 설정을 보여주세요. 그러면 뭔가를 얻을 수 있습니다.
톤 재생
색상 정확도와 전체 이미지 품질은 일반적으로 트루 감마로 알려진 속성인 톤 재현에 크게 의존합니다. LCD 및 OLED 디스플레이에서 색상을 표시할 때 발생하는 대부분의 오류는 삼원색 내에서 잘못된 톤 재현과 관련이 있습니다.
결론
픽셀 계산을 중지합니다. 대신 화질을 정말 향상시킬 수 있는 특성의 개선을 요구합시다. 좋은 화면을 만드는 방법은 단순히 점의 수를 측정하는 것 외에도 많습니다.
10.09.2012
Apple은 유행을 시도한 적이 없습니다. 그녀는 항상 이러한 트렌드를 만들었고 구매자와 경쟁자 모두 그녀를 따랐습니다. 내 관점에서 볼 때 흥미로운 것 중 하나는 지난 몇 년 동안 디스플레이의 인치당 도트 수인 ppi(인치당 픽셀 수) 값이었습니다. 이미지의 선명도를 알려주는 지표가 마니아로 변했습니다.
인치당 픽셀 수는 실제로 디스플레이의 이미지가 얼마나 선명한지를 나타내는 매우 중요한 지표입니다. 이 값이 클수록 육안으로 픽셀을 구별하기 어려워지며, 따라서 이미지의 경사진 선에 있는 계단이 덜 눈에 띄게 됩니다. 절대적으로 인치당 도트 수가 많을수록 좋습니다. 픽셀의 크기를 줄여서 픽셀의 밀도를 무한히 높이는 것은 불가능하지만 기술적 한계가 있지만 여전히 매우 멀다. 완전히 다른 질문입니다. 그렇게 높은 ppi를 가진 디스플레이가 필요합니까?
결론을 내리고 전망을 평가하기 전에 시간을 거슬러 올라가 과거 디스플레이의 픽셀 밀도를 살펴보겠습니다. 그런 다음 아무도이 매개 변수에주의를 기울이지 않았으므로 두 배로 흥미 롭습니다.
CRT 디스플레이를 버리고 첫 번째 LCD부터 시작하겠습니다. 첫 번째 모델의 일반적인 크기는 15인치이고 해상도는 1024 x 768이었습니다. 이 경우 밀도는 약 85dpi가 됩니다. 그런 다음 1280 x 1024 해상도의 17 및 19 인치 모델이 있었고 ppi는 96 및 86 포인트로 나타났습니다. 그 당시 희귀한 22인치 패널은 1600 x 1200의 해상도와 인치당 91픽셀의 밀도에 만족했습니다.
보시다시피 모든 대각선은 밀도가 비슷하여 충분하다고 간주되었습니다. 동시에, 아무도 그러한 디스플레이의 픽셀이 가시적이고 글꼴의 "사다리"가 매우 구별 가능하다고 주장하지 않을 것이라고 생각합니다. 그러나 이것은 악명 높은 사다리와의 싸움에서 수년 동안이 효과를 가릴 수있게 해주는 앤티 앨리어싱 기술을 개발하고 개선 한 비디오 카드 개발자를 제외하고는 아무도 괴롭히지 않았습니다.
최신 가정용 모니터는 Full HD 추세 덕분에 픽셀 밀도가 약간 더 높습니다. 예를 들어, 1920 x 1080 해상도의 21.5인치 모니터는 102ppi를 만족합니다. 디스플레이 아수스 노트북대각선이 11.1인치이고 해상도가 1366 x 768인 이 제품은 인치당 141픽셀의 밀도를 특징으로 합니다. 픽셀 밀도가 더 높은 컴퓨터 또는 랩톱용 여러 모니터에서 다소 저렴한 솔루션을 찾지 못할 가능성이 큽니다.
모든 가정용 솔루션의 범위는 100~140ppi입니다. TV에서는 상황이 더 심각합니다. 예를 들어 Full HD 해상도의 32인치 TV는 픽셀 밀도가 69dpi인 반면 동일한 해상도의 40인치 TV는 55dpi에 불과합니다. 그리고 약 큰 대각선그리고 말하기가 무섭습니다. 예를 들어, 55인치 패널은 40ppi의 밀도로 만족합니다.
그러나 Apple 덕분에 휴대폰과 태블릿은 픽셀 밀도의 리더가 되었습니다. 경쟁사와 마찬가지로 첫 번째 iPhone은 3.5인치 대각선에서 320 x 480 픽셀의 해상도를 갖고 결과적으로 165dpi의 밀도를 가진 오늘날의 표준으로는 가장 선명하지 않았습니다. 조금 있다가 큰 소리 없이 먼저 소니 스마트폰 에릭슨 엑스페리아 X1은 480 x 800 픽셀의 해상도와 311ppi의 밀도를 가진 3인치 디스플레이를 사용했습니다. 그러나 Sony는 그러한 고화질을 구매자에게 올바르게 "제출"할 수 없었지만 Apple은 아이디어를 알아 차리고 소란을 피우고 640 x 960의 해상도가 대각선으로 특징 인 고화질 디스플레이로 iPhone 4를 출시했습니다. 3.5인치. 밝은 마케팅 이름인 Retina Display로 이 전화 모델의 330dpi는 즉시 구매자의 사랑을 받았습니다. 그 순간부터 모두가 ppi의 가치에 관심을 갖게 되었습니다. Apple 자체는 성공의 물결에 따라 Retina 및 새로운 아이패드 세대, 디스플레이 해상도는 2048 x 1536이고 대각선은 9.7인치입니다. ppi 값은 264dpi로, 현재 세대 iPhone보다는 낮지만 iPad 2의 두 배이며 비슷한 대각선 크기의 디스플레이가 1280 x 800 이하의 해상도를 가진 대부분의 경쟁사보다 눈에 띄게 높습니다. .
그러나 경쟁 업체의 신용으로 인해 격차를 빠르게 따라 잡고 장치 디스플레이의 해상도를 크게 높였습니다. 특히 삼성 갤럭시 Nexus는 316ppi의 픽셀 밀도를 가진 4.65인치 디스플레이에서 1280 x 720 해상도를 자랑합니다. 그리고 태블릿 ASUS Transformer Pad Infinity의 디스플레이는 1920 x 1200의 해상도와 10.1인치의 대각선으로 224ppi를 제공합니다. 그러나 가장 흥미로운 것은 거기서 멈추지 않았습니다 ...
픽셀 밀도화에 대한 열풍과 훨씬 더 높은 PPI 값을 가진 디스플레이 생성은 거의 모든 제조업체를 휩쓸었습니다. 이것은 성능 향상을 위한 작업이 아니라 경쟁입니다. LG는 Full HD 해상도와 440ppi의 5인치 디스플레이를 발표했습니다. Toshiba는 495dpi의 밀도에 해당하는 2560 x 1600픽셀 해상도의 6.1인치 디스플레이로 응답합니다. 글쎄요, 지금까지의 선두주자는 최근 1280 x 800 픽셀의 2.3인치 디스플레이를 발표한 Japan Display 컨소시엄입니다. 밀도는 651ppi입니다. 대박! 그러나 그렇게 높은 픽셀 밀도를 가진 디스플레이가 필요합니까?
한편으로 디스플레이는 확실히 이것으로 인해 악화되지 않습니다. 버터로 죽을 망칠 수는 없습니다. 반면에 작은 대각선의 큰 해상도는 단점이 있습니다. 모두의 주요 단점은 그래픽 카드의 부하가 크게 증가하는 것으로 간주 될 수 있습니다. 데스크탑 컴퓨터의 경우 이것은 그다지 중요하지 않습니다. 이 시장에서는 전력 소비량이 많은 비디오 카드가 표준입니다. 예, 해상도를 높이면 앤티 앨리어싱으로 무거운 모드를 포기할 수 있습니다. 싸우도록 설계된 "사다리"가 거의 보이지 않기 때문입니다. 이 아니라면 모바일 기기픽셀 수가 크게 증가하면 배터리 수명에 가장 큰 타격을 줍니다. 비디오 카드는 상당한 에너지를 필요로 하는 그러한 이미지를 렌더링하기 위해 열심히 일할 뿐만 아니라, 픽셀 수가 증가함에 따라 디스플레이 자체가 더 먹음직스러워집니다. 따라서 여기서 개발자의 욕구와 가능성 사이의 동등성을 유지해야 합니다.
그러나 이것이 유일한 것은 아닙니다. 일부 장치에서 가장 높은 픽셀 밀도가 단순히 필요하지 않은 경우 생산을 복잡하게 만들고 더 비싼 제품을 만드는 이유는 무엇입니까? 예를 들어, 3미터 이상의 거리에 설치된 32인치 TV는 HD 및 FullHD 해상도에서 이미지 선명도의 차이를 볼 수 없지만 픽셀 밀도는 각각 49ppi 및 69ppi로 크게 다릅니다. . 그 이유는 그러한 거리에서 우리는 개별 점을 볼 수 없기 때문입니다. 우리의 눈은 단순히 그것들을 물리적으로 구별할 수 없습니다. 그리고 다가오는 4Kx2K 해상도로 같은 대각선의 TV를 만든다면? 3840 x 2160의 해상도에서 138ppi의 밀도를 얻습니다. 이는 랩톱 및 데스크톱 컴퓨터의 최신 디스플레이 수준입니다. 70-100 센티미터의 거리에서 그러한 모니터로 작업하는 것은 매우 편리하지만 아무도 그런 거리에서 TV를 보지 않습니다! 그리고 장치에서 3미터 떨어진 곳에 앉아 있는 사람은 다시 4Kx2K TV와 FullHD의 차이를 느끼지 못할 것입니다.
이것의 결론은 매우 간단합니다. 인치당 픽셀 수의 무의미한 증가는 디스플레이의 객관적인 경험을 전혀 향상시키지 못할 것입니다. 여기서 균형은 시청 거리/픽셀 밀도입니다. 출발점으로 인쇄상의 비즈니스에서 허용되는 비율 인 300dpi를 조건부로 취할 수 있습니다. 이 밀도를 사용하면 잡지 사진의 픽셀화를 무시할 수 있습니다. 그러나 종이에 바르면 잉크가 약간 번져 인식이 향상됩니다. 따라서 디스플레이의 최적 픽셀 밀도는 330dpi여야 합니다. 그리고 이것은 신문이나 잡지와 같은 거리에 장치가 있는 경우입니다. 여기서 우리는 필요한 최소 해상도와 밀도에 대해 더 이상 설명하지 않을 것이지만 반대로 광택 잡지에 인쇄된 동일한 사진과 선명도가 유사한 이상적인 이미지를 얻는 데 필요한 것에 대해서는 잘 언급할 필요가 있습니다. , 또는 최신 iPhone 화면의 이미지.
즉, 330dpi는 스마트폰, 태블릿, 전자책에 최적입니다. 이것을 시작점으로 삼겠습니다. 보기 거리는 50센티미터이고 밀도는 인치당 330픽셀입니다. 이 접근 방식을 사용하면 10.1인치 태블릿의 최적 해상도는 2800 x 1800픽셀이 됩니다. 보시다시피, iPad는 아직 수준이 높지 않습니다. 그러나 스마트 폰 중에는 이러한 솔루션이 이미 존재합니다. iPhone 4 및 4S의 밀도는 330dpi에 불과합니다.
모니터와 TV는 더 먼 거리에서 볼 수 있기 때문에 이러한 밀도가 더 이상 필요하지 않습니다. 간단한 계산을 통해 평균 1미터 떨어져 있는 가정용 모니터에 대한 최적의 결과를 얻습니다. 시청 거리를 두 배로 늘리려면 밀도의 절반이 필요하다는 점을 고려하면 최적의 ppi는 165dpi가 됩니다. 즉, 4Kx2K(3840 x 2160 픽셀)의 해상도는 27인치 모니터에 가장 적합합니다. 그리고 우리 시대의 일반적인 FullHD는 13.3인치 디스플레이에서만 최적으로 보입니다. 음, 2800 x 1800 픽셀의 해상도는 20인치 모니터에 적합합니다.
TV의 경우 2.5미터의 거리에서 볼 수 있다는 점을 염두에 두어야 합니다. 이는 스마트폰과 태블릿을 사용할 때보다 5배 더 많으므로 결과적으로 픽셀 밀도는 5배 낮을 수 있습니다. 동일한 이미지 선명도 . 즉, 이러한 장치는 66dpi의 밀도로 충분합니다. 이제 해상도와 대각선의 이상적인 비율을 계산합니다. 둔한 1366 x 768 픽셀은 23인치 디스플레이에서만 꽤 괜찮아 보입니다. 현대식 FullHD는 대각선이 32인치인 TV에서 선명한 화질로 당신을 기쁘게 할 것입니다. 동일한 선명도를 4Kx2K의 해상도에서 최대 65인치의 대각선 디스플레이에서 이미 달성할 수 있습니다!
PPI 또는 픽셀 밀도(인치당 영어 픽셀 수 - 인치당 픽셀 수)는 스마트폰, 태블릿, 랩톱과 같은 장치 화면의 1인치에 맞는 픽셀 수입니다. 1인치에 들어갈 수 있는 픽셀이 많을수록 1픽셀은 작아지고 육안으로는 덜 보입니다. 화면의 1인치에 더 많은 픽셀이 들어갈수록(ppi 숫자가 클수록) 이미지의 선명도와 현실감이 각각 높아집니다.
픽셀 자체는 이미지의 높이와 너비를 측정하는 단위입니다. 하나의 픽셀은 하나의 색상으로 칠해진 작은 정사각형으로 나타낼 수 있습니다.
첫 화면 맥 컴퓨터픽셀 밀도는 72ppi였습니다. 숫자는 커 보이지만 실제로는 픽셀이 커서 화질이 좋지 않았습니다. 모두 화면 자체가 컸기 때문입니다.
최신 스마트폰은 훨씬 더 발전했으며 훨씬 더 높은 픽셀 밀도의 디스플레이를 갖추고 있습니다. 간단한 예산 장치에도 화면이 있고 그 이상의 화면이 있으며 플래그십 모델의 경우 이 수치는 458ppi(), 522ppi) 및 642dpi()에 이릅니다. 스마트 폰은 3840 × 2160 픽셀의 화면 해상도로 기록적인 높은 픽셀 밀도를 가지고 있습니다.
픽셀 밀도가 중요한 이유는 무엇입니까?
PPI는 화면 품질의 가장 중요한 지표 중 하나입니다! 예를 들어 화면 크기가 6인치인 스마트폰을 구입하는 경우. 해상도는 720 × 1280에 불과합니다 ... 그런 다음 1 인치 (2.54cm)에 점이 적고 더 커질 것이라는 사실 때문에 그러한 전화의 화면은 거칠 것입니다. 이로 인해 사진의 품질이 더 나빠질 것입니다. 제조사는 화면 크기 경쟁에서 고품질 제작에 신경을 쓰지 않았다.
따라서 스마트폰을 고를 때 외모만 보지 말고 PPI도 꼭 확인해야 한다.
좋은 스마트폰 화면의 픽셀 밀도가 300dpi 이상이어야 하는 이유
인간의 눈은 300-350ppi 값에서 개별 픽셀을 구별할 수 있습니다. 픽셀 밀도가 높으면 일반 사람이 더 이상 육안으로 볼 수 없다고 믿어집니다. 완벽한 시력을 가진 일부 사람들은 픽셀을 600ppi까지 볼 수 있습니다. 그러나 이것은 드뭅니다.
너무 많은 픽셀이 항상 플러스가 되는 것은 아닌 것 같습니다. 첫째, 에너지 소비가 증가하고 있기 때문입니다. 스마트폰의 프로세서는 더 많은 정보를 처리해야 하기 때문입니다. 둘째, 어쨌든 500dpi 화면에서 350dpi 화면을 구분할 수 없다면 왜 많은 픽셀이 필요합니까? 이것은 순전히 당신이 과도하게 지불하는 마케팅 책략입니다.
고품질 화면과 가능한 가장 선명한 사진을 가진 스마트폰을 원한다면 픽셀 밀도가 약 300-350ppi보다 약간 높은 모델을 선택하십시오.
pp보다 나는 dpi와 다르며 왜 혼동하지 않아야합니까?
D 파이(인치당 도트 수 - 인치당 도트 수)는 프린터의 해상도입니다. Dpi - 간단히 말해서 인쇄 장치가 그릴 수 있는 작은 점을 나타내는 값입니다. d pi라는 용어는 인쇄에 사용됩니다.
Ppi는 인치당 픽셀로 표시되는 이미지 파일의 해상도입니다. 화면의 그림을 확대하면 구성되는 바로 그 픽셀인 정사각형을 볼 수 있습니다.
일반 사용자의 경우 dpi와 ppi 사이에 차이가 없습니다. 둘 다 화면에 표시되거나 종이에 인쇄된 이미지(dpi)의 해상도를 결정하는 데 사용되는 측정 단위입니다.
화면 픽셀 밀도를 직접 계산하는 방법
이렇게 하려면 화면 대각선의 크기(인치)와 해상도(픽셀)를 너비와 높이로 알아야 합니다. 다음으로 너비와 높이의 픽셀 수 제곱의 합에 제곱근을 구한 다음 결과를 화면 대각선(인치)으로 나누어야 합니다. 공식은 다음과 같습니다.
콘텐츠:
이론적 페이지 및 계산
고려 중인 개념은 인치당 픽셀 수, 즉 인치당 픽셀 수를 나타냅니다. 삐삐아이로 발음하기도 합니다.
말 그대로 태블릿이나 다른 기술에서 볼 수 있는 이미지의 1인치에 몇 개의 픽셀이 들어가는지를 의미합니다.
또한 이 개념을 분해능 측정 단위라고 합니다. 이 값은 두 가지 간단한 공식을 사용하여 계산됩니다.
어디:
- DP- 대각선 해상도;
- 디– 대각선 크기, 인치
- wp- 너비;
- HP- 키.
두 번째 공식은 대각선 해상도를 계산하도록 설계되었으며 유명한 피타고라스 정리를 기반으로 합니다.
쌀. 1. 모니터 상의 가로, 세로, 대각선 크기
이 모든 공식이 어떻게 사용되는지 보여주기 위해 1280x720(HD) 해상도의 20인치 모니터를 예로 들어 보겠습니다.
따라서 Wp는 1280, Hp는 720, Di는 20입니다. 이 데이터로 오줌을 계산할 수 있습니다. 먼저 식 (2)를 사용합니다.
이제 이 데이터를 공식 (2)에 적용합니다.
참고: 실제로 73.4픽셀이 있지만 정수가 아닌 픽셀 수는 있을 수 없으며 값의 정수 값만 사용됩니다.
우리 지역에 더 친숙한 값인 센티미터 단위가 얼마인지 이해하려면 결과 숫자를 2.54로 나누어야 합니다(1인치에 정확히 많은 센티미터가 있음).
따라서 이 예에서는 73/2.54=28픽셀입니다. 센티미터에서.
이 예에서는 73이고 25.4/73=0.3입니다. 즉, 각 픽셀의 크기는 0.3x0.3mm입니다.
이것은 좋은 것인가 나쁜 것인가?
함께 알아봅시다.
이 값이 중요합니까?
위의 내용을 기반으로 하는 Pee-pee-ay는 사용자가 화면에서 받는 이미지의 선명도에 영향을 줍니다.
표시기의 값이 높을수록 사용자는 더 선명한 이미지를 받게 됩니다.
실제로 이 값이 클수록 사람이 볼 수 있는 "정사각형"이 줄어듭니다.
즉, 각 픽셀은 크지 않고 작기 때문에 전혀주의를 기울이지 않을 수 있습니다. 특성 값은 그림 2에서 명확하게 볼 수 있습니다.
쌀. 2. 지표와의 차이가 점점 줄어들고 있다
물론, 아무도 왼쪽과 같이 그러한 사진을 스스로 갖고 싶어하지 않습니다.
따라서 이러한 기술을 선택할 때 이러한 특성에 주의하는 것이 매우 중요합니다.
이것은 인터넷에서 구매하고 자신의 눈으로 그림을 평가하고 그것이 얼마나 명확한지 이해할 기회가 없을 때 특히 그렇습니다.
동일한 스마트폰의 특성에서 지표를 찾는 것은 일반적으로 쉽습니다. 일반적으로 "디스플레이" 섹션에 포함되어 있습니다. 예는 그림 3에서 볼 수 있습니다.
쌀. 3. 스마트폰의 특성에 따른 지표
중요한! 인터넷에서 예를 들어 해상도나 대각선보다 ppi가 더 중요하다는 정보를 종종 찾을 수 있으며 이러한 특성 중 하나가 선택 시 더 중요한 역할을 해야 합니다. 이것은 전혀 사실이 아닙니다. 위에서 볼 수 있듯이 이 세 가지 개념은 모두 떼려야 뗄 수 없는 관계입니다.
장점과 단점
픽셀 수입니다. 인치당 값은 그림의 선명도에 긍정적인 영향을 미치므로 품질에도 영향을 미칩니다.
사용자가 큰 표시기로 이미지를 보는 것이 훨씬 더 즐겁습니다.
그림 #2에서 왼쪽 사진은 30ppi이고 오른쪽 사진은 300ppi입니다. 아래는 또 다른 유사한 예입니다.
그러나 이 개념에는 단점도 있습니다. 특히, 우리는 장치의 자율성에 대해 이야기하고 있습니다.
모든 것이 매우 간단합니다. 그림이 선명하면 화면이 있는 스마트폰, 태블릿 또는 기타 장치를 충전하지 않고는 오랫동안 작동할 수 없습니다.
간단한 규칙을 만들 수도 있습니다. 핍이 많을수록 배터리 수명이 줄어듭니다.
물론 모니터가 항상 콘센트에 연결되어 있기 때문에 PC에서는 문제가 되지 않지만 일부 전화기의 경우 큰 문제가 될 수 있습니다.
따라서 장치를 선택할 때 픽셀 수뿐만 아니라주의를 기울여야합니다. 인치 당, 그리고 또한!
따라서 우리는 순조롭게 선택 주제로 넘어갔습니다.
디스플레이 선택 정보
픽셀을 기반으로 올바른 디스플레이를 선택하는 데 도움이 되는 몇 가지 규칙이 있습니다.
1 디스플레이 종류에 주의하세요. 우선 순위는 AMOLED, 더 나은 SuperAMOLED 또는 OLED여야 합니다. 그러한 장치는 항상 그 이상일 것입니다.
예를 들어 우리가 매장에 와서 두 개의 우수한 장치를 보았다고 가정해 보겠습니다. 가격은 거의 동일하지만 두 번째 장치는 더 강력합니다.
사양은 Xiaomi에 400ppi가 있음을 나타냅니다(어떤 이유로 일부는 400.53을 쓰지만 위에서 말했듯이 정수가 아닌 픽셀 수는 있을 수 없음).
삼성은 267 PPI를 가지고 있으며 해상도는 그에 따라 더 낮습니다(1280x720 대 1920x1080). 대각선은 동일합니다(5.5인치).
그러나 어떤 이유에서인지 에서 그림이 더 선명합니다. 독점적인 SuperAMOLED + 기술을 사용하기 때문입니다. 그림 5에 주의를 기울이면 스스로 알 수 있습니다.
2 선택한 모든 샘플을 개인적으로 볼 수 있는 기회를 찾으십시오. 먼저 인터넷에서 옵션을 본 다음 전자 제품 매장에 가서 실제로 사진을 표시하는 방법을 볼 수 있습니다. 이 경우 개인적인 의견은 단순히 대체 할 수 없습니다.
3 배터리에 주의하십시오. 우리가 스마트 폰에 대해 이야기한다면, 다음을 제공하기 위해 장편깨끗한 이미지(높은 ppi 및/또는 우수한 기술)가 있는 장치의 경우 배터리 용량은 약 3000mAh여야 합니다.
태블릿의 경우 대각선이 더 크므로 더 높아야 합니다.
4 기억하십시오: 대각선이 작을수록 픽셀 밀도(인치당 픽셀 수)가 높을수록 이미지가 더 선명해집니다. 자신을 속이지 마십시오. 큰 디스플레이와 작은 pip 값으로 매우 선명한 그림을 얻을 수 없습니다. 여기서 황금률을 관찰하는 것이 중요합니다.
5 적용 범위도 고려해야 합니다. 따라서 무광택 화면은 덜 선명하고 채도가 높은 이미지를 생성하지만 눈에는 더 부드럽습니다.
그러나 광택 디스플레이는 시력에 부정적인 영향을 미치지만 디스플레이의 이미지는 훨씬 더 아름답습니다. 동시에 ppi 값은 동일할 수 있습니다.
이것은 대부분 관련이 있습니다. 컴퓨터에서 풀 타임 이상으로 작업하는 경우 매트 옵션을 유지하는 것이 좋습니다.
이 모든 것을 통해 자신에게 가장 적합한 디스플레이를 선택할 수 있습니다.
결과
ppi 또는 pee는 픽셀 밀도 또는 이미지의 인치당 픽셀 수입니다. 표시기를 센티미터로 변환하려면 2.54로 나누어야 합니다.
정수가 아닌 수량은 있을 수 없으며 정수만 있습니다.
이것이 높을수록 이미지를 더 선명하고 즐겁게 볼 수 있습니다.
다른 기술을 선택할 때이 지표에주의를 기울이는 것이 매우 중요합니다.
그러나 그것은 기본이 아닙니다. 기술과 화면 범위를 보는 것도 중요합니다.
또한 배터리 용량을 확인하고 픽셀 수의 중간을 유지하십시오. 그리고 화면 크기.
이 긴 글은 처음부터 크로스 DPI 및 크로스 플랫폼 디자인에 대해 자세히 알아보려는 고급 디자이너를 위한 것입니다.
복잡한 수학이나 읽을 수 없는 그래프가 없으며 더 나은 이해와 설계 프로세스에 대한 빠른 적용을 위해 간단한 설명을 짧은 섹션으로 나눕니다.
DPI 및 PPI 란 무엇입니까?
DPI 또는 Dots Per Inch(인치당 도트 수)는 원래 인쇄에 사용된 도트 밀도의 척도입니다. 이것은 프린터가 1인치에 들어갈 수 있는 잉크 도트의 수입니다. DPI가 낮을수록 인쇄의 디테일이 떨어집니다.
이 개념은 PPI 또는 인치당 픽셀(인치당 픽셀)이라는 컴퓨터 화면에도 사용됩니다. 여기에서도 동일한 원리입니다. 값은 화면이 1인치에 표시할 수 있는 픽셀 수를 계산합니다. DPI라는 용어는 화면 성능을 설명하는 데도 사용됩니다.
Windows 컴퓨터는 기본적으로 PPI=96입니다. Mac은 PPI=72를 사용합니다. 이 값은 당시 제작된 화면이 72개의 "도트" 또는 인치당 픽셀을 표시했기 때문입니다. 이것은 80년대의 경우였으며 이제 Windows, Mac 및 기타 플랫폼의 장치에는 다양한 PPI 화면 해상도가 있습니다.
해상도, 픽셀 및 물리적 크기
누군가에게 픽셀 크기가 얼마인지 묻는 것은 질문의 복잡성으로 사람을 혼동시키는 좋은 방법입니다. 픽셀은 크기, 물리적 의미 또는 수학적 표현 이외의 의미가 없습니다. 이것은 사이의 연결의 일부입니다. 실제 화면 크기인치로 표시하고, 화면 해상도인치당 픽셀로 표현되며, 화면 픽셀 크기픽셀로 표현됩니다. 일반적으로 다음과 같습니다.
일반 비-레티나 데스크탑 화면(Mac 포함)의 PPI는 72에서 120 사이입니다. PPI가 72에서 120 사이인 디자인은 작업의 크기가 모든 곳에서 거의 동일한 비율을 보장합니다.
다음은 귀하를 위한 예입니다.
Mac Cinema Display 27의 PPI는 109로 화면 공간의 인치당 109픽셀을 표시합니다. 모따기 너비는 25.7인치(65cm)입니다. 화면 자체의 너비는 약 23.5인치이므로 23.5*109~2560이므로 화면의 기본 해상도는 2560x1440px입니다.
*23.5*109는 실제로 2560이 아니라는 것을 알고 있습니다. 실제로는 23.486238532인치입니다. 센티미터당 픽셀 수를 계산하면 더 정확한 결과를 얻을 수 있지만 요점은 파악하시기 바랍니다.
디자인에 미치는 영향
방금 이야기한 화면에 109*109픽셀의 파란색 사각형을 그린다고 가정해 보겠습니다.
이 정사각형의 물리적 크기는 1*1인치입니다. 그러나 사용자 화면의 PPI가 72이면 파란색 사각형이 실제 크기가 더 커집니다. PPI가 72이므로 109픽셀 정사각형을 표시하려면 화면 공간의 약 1인치 반이 필요합니다. 아래에서 이 효과의 시뮬레이션을 참조하십시오.
색상과 해상도의 차이에 관계없이 모든 사람이 디자인을 다르게 볼 수 있음을 기억하십시오. 당신의 목표는 가장 많은 사용자를 포함하는 최상의 타협점을 찾는 것이어야 합니다. 모든 사용자가 귀하와 동일한 화면을 가질 것으로 기대하지 마십시오.
화면 해상도(및 기본 해상도)
화면 해상도는 사용자가 디자인을 인식하는 방식에 상당한 영향을 미칠 수 있습니다. LCD가 CRT 모니터를 대체했기 때문에 사용자는 이제 좋은 크기 대 PPI 비율을 보장하는 기본 해상도를 갖게 되었습니다.
해상도는 화면에 표시되는 픽셀 수를 결정합니다(예: 27인치 시네마 디스플레이의 경우 2560*1440픽셀)(너비 2560, 높이 1440). 물론 이제 PPI가 무엇을 의미하는지 알았으므로 물리적 크기의 측정 단위가 될 수 없다는 것을 이해합니다. 이 해상도의 이미지는 전체 벽과 매우 작은 화면 모두에서 확장될 수 있습니다.
오늘날 LCD 모니터는 화면이 표시할 수 있는 픽셀 수를 반영하는 사전 설정 또는 기본 해상도와 함께 제공됩니다. 구형 CRT 모니터와 조금 다르지만 과거의 것이므로 자세한 내용은 다루지 않겠습니다.
190 PPI를 표시할 수 있는 27인치 Cinema Display를 사용하십시오. 기본 해상도 2560*1440픽셀에서. 해상도를 낮추면 요소가 더 커집니다. 그러나 실제로 픽셀로 채우려면 가로로 23.5인치가 필요합니다.
나는 "실제로"라고 말했다. 왜냐하면 이 경우에는 그럴 것이기 때문이다. 화면의 기본 해상도는 2560*1440px입니다. 해상도가 떨어지면 픽셀이 그대로 유지되어 109PPI를 표시합니다. 이러한 옵션 사이의 간격을 채우기 위해 OS는 모든 것을 확장하기 시작합니다. GPU는 각 픽셀을 가져와 새로운 종횡비를 계산하여 표시합니다.
해상도를 1280*720(이전 너비의 절반, 높이의 절반)으로 설정하면 GPU가 이전보다 두 배 큰 픽셀을 시뮬레이션하여 화면을 채웁니다. 결과는 어떻게 될까요? 글쎄, 그래픽이 흐릿해질 수 있습니다. 단순 제수이기 때문에 절반 비율이 다소 좋아 보이면 비율을 ⅓ 또는 3/4로 설정하면 분수 값이 되고 픽셀을 나눌 수 없습니다. 다음은 예입니다.
아래의 예를 보십시오. 기본 해상도에서 화면에 1픽셀 두께의 선을 가져옵니다. 이제 150% 더 적은 해상도를 적용합니다. 화면을 그래픽으로 채우려면 프로세서는 모든 것에 1.5를 곱하여 150% 그래픽을 생성해야 합니다. 1*1.5=1.5이지만 절반 픽셀이 없습니다. 결과적으로 극단적인 픽셀은 부분적인 색상 음영으로 채워져 흐림 효과를 만듭니다.
따라서 Retina Macbook Pro가 있고 해상도를 측정해야 하는 경우 선택한 해상도가 1280*800px "처럼 보일 것"임을 알려주는 아래와 같은 창이 표시됩니다. 시스템이 사용자의 해상도를 통해 크기 비율을 표현하는 방식입니다.
이것은 픽셀 해상도를 물리적 크기의 척도로 사용하기 때문에 매우 주관적인 견해이지만 적어도 그들의 관점에서는 거짓말이 아닙니다.
결론:디자인을 항상 픽셀 단위로 보고 싶다면 기본 해상도 이외의 해상도를 사용하지 마십시오. 예, 더 작은 종횡비가 더 편안할 수 있지만 픽셀의 경우 가능한 한 정확한 것이 바람직합니다. 불행히도 어떤 사람들은 화면(특히 컴퓨터 화면)에 무엇이 있는지 더 잘 보기 위해 해상도를 사용합니다. 이것은 디자인이 나빠 보일 수도 있지만 여기서 사용자에게는 디자인의 진정성보다 가독성이 더 중요합니다.
4K 해상도란?
최근 4K라는 용어를 많이 들어보셨을 것입니다. 이 주제는 현재 유행하고 있습니다. 그것이 무엇인지 이해하기 위해 먼저 "HD"가 무엇을 의미하는지 이해합시다. 이것은 설명의 매우 단순화된 버전이라는 것을 기억하십시오. 가장 일반적인 권한의 예를 들어 설명하겠습니다. HD에는 다양한 범주가 있습니다.
HD라는 용어는 1280x720px 또는 720p x 720 수평선에서 시작하는 모든 해상도에 적용됩니다. 어떤 사람들은 이 해상도를 표준 정의에 따라 SD라고 부를 수 있습니다.
풀 HD라는 용어는 1920x1080px 화면에 적용됩니다. 대부분의 텔레비전이 이 해상도를 사용하며 점점 더 많은 고급 고급 전화기(Galaxy SIV, HTC 하나, 소니 엑스페리아 Z, 넥서스5).
4K 해상도는 3840x2160 픽셀에서 시작합니다. Ultra HD에서 Quad HD, UHD라고도 합니다. 대략적으로 말하면 1080p에서 4개를 픽셀 수로 4K 디스플레이에 맞출 수 있습니다.
두 번째 4K 해상도는 4096x2160입니다. 약간 더 크며 프로젝터 및 전문 카메라에 사용됩니다.
4K 디스플레이를 컴퓨터에 연결하면 어떻게 되나요?
현대의 운영체제 4K를 확장하지 마십시오. 즉, 4K 디스플레이를 Chromebook 또는 Macbook에 연결하는 경우 가장 높은 DPI 소스(이 경우 200% 또는 @2x)가 사용되며 일반 종횡비로 표시됩니다. 모든 것이 좋아 보이지만 오히려 작습니다.
가상의 예: 12인치 4K 디스플레이를 고해상도(2x)의 12인치 컴퓨터에 연결하면 모든 것이 절반 크기로 표시됩니다.
결론:
- 4K는 Full HD의 4배입니다.
- OS가 4K를 지원하지만 업스케일링하지 않는 경우 전용 4K 소스가 없는 것입니다.
- 에 이 순간 4k 해상도의 휴대폰이나 태블릿이 없습니다.
깜박임 속도 모니터링
잠시 동안 PPI와 화면 해상도에서 벗어나자. 헤르츠(Hz) 값도 화면 설정에 나열되는 것을 본 적이 있을 것입니다. PPI와는 관련이 없지만 모니터의 깜박임 속도 또는 재생 빈도는 모니터가 초당 고정 이미지 또는 프레임을 표시하는 속도의 단위입니다. 60Hz 모니터는 초당 60프레임(60fps)을 표시할 수 있습니다. 120Hz - 120fps 등의 주파수로 모니터하십시오.
맥락에서 사용자 인터페이스, 모니터 깜박임 속도에 따라 애니메이션이 얼마나 부드럽고 자세하게 보일지 결정됩니다. 대부분의 화면은 60Hz입니다. 초당 표시되는 프레임 수는 장치의 프로세서 및 그래픽 성능에 따라 달라집니다. 120Hz 화면을 아타리 2600에 맞추는 것은 말이 안 된다.
더 나은 이해를 위해 아래의 예를 보십시오. T-Rex는 60Hz와 120Hz의 두 화면에서 빠르고 정확하게 일정한 리듬으로 A 지점에서 B 지점으로 이동합니다. 60fps 화면은 애니메이션 중에 9개의 프레임을 표시할 수 있고 120Hz 화면은 논리적으로 동일한 시간 단위에서 두 배 많은 프레임을 표시할 수 있습니다. 애니메이션은 120Hz 화면에서 훨씬 더 부드럽습니다.
결론:어떤 사람들은 인간의 눈이 60fps 이상의 주파수를 포착할 수 없다고 주장합니다. 이것은 사실이 아닙니다. 이 똑똑한 사람들의 말을 듣지 말고 가능한 한 분명히 그들의 얼굴을 비웃습니다.
레티나 스크린이란
"Retina 디스플레이"라는 이름 자체는 Apple이 iPhone 4를 출시할 때 도입한 것입니다. 화면은 장치의 PPI가 너무 높아서 사람의 눈의 망막(영어로 레티나)이 픽셀을 구별할 수 없어야 하기 때문에 레티나라고 합니다. 화면에.
이 말은 일부 화면 크기에 해당되지만 화면이 계속 좋아지면서 이제 우리의 눈은 특히 둥근 UI 요소에서 픽셀을 볼 수 있을 만큼 충분히 훈련되었습니다.
기술적으로 이러한 화면은 동일한 물리적 크기에서 높이와 너비가 두 배 더 많은 픽셀을 표시합니다.
iPhone 3G/S의 대각선은 3.5인치, 해상도는 480*320px로 163PPI에 해당합니다.
Phone 4/S는 대각선이 3.5인치이고 해상도가 960*640픽셀로 326PPI에 해당합니다.
와! 정확히 두 번. 단순 승수. 따라서 화면의 요소는 더 작은 대신 두 배 더 많은 픽셀과 동일한 물리적 크기를 가질 때보다 두 배 더 선명합니다. 일반 픽셀 1개 = 망막 픽셀 4개, 픽셀 수의 4배입니다.
복잡한 디자인을 개발할 때 의도된 목적으로 아래 예를 사용하십시오.
참고: 세 번째 장치에서 두 장치의 다른 이미지 품질을 시뮬레이션하는 것은 매우 어렵습니다. 현재 보고 있는 것. 뮤직 플레이어동일한 물리적 공간을 차지하는 레티나에서도 iPhone 4에서 두 배나 선명하고 고화질로 보입니다. 확인하고 싶다면 제 무료 예제데모용.
"Retina"라는 이름은 Apple에 속하므로 다른 회사에서는 "HI-DPI"를 대신 사용하거나 이름을 전혀 사용하지 않습니다.
결론: Apple 제품은 1승수만 사용하면 되기 때문에 해상도, PPI 및 물리적 크기 비율 간의 차이점을 이해하기 위해 DPI 변환에 익숙해지는 좋은 방법입니다.
승수 란 무엇입니까?
승수는 다양한 PPI 해상도로 디자인을 변환할 때 수학적인 구세주입니다. 승수를 알면 자세한 장치 사양에 대해 걱정할 필요가 없습니다.
를 취하자 아이폰 예 3G 및 4. 동일한 물리적 크기에 대해 4배 많은 픽셀(2x 너비 및 2x 높이)이 있습니다. 따라서 승수는 2입니다. 즉, 소스가 4G 해상도와 호환되려면 소스 크기에 2를 곱하면 됩니다.
iOS 터치 버튼에 권장되는 크기인 44*44픽셀의 버튼을 생성한다고 가정해 보겠습니다(이 게시물의 뒷부분에서 이에 대해 설명하겠습니다). 이름이 "Jim"인 일반적인 버튼이라고 합시다.
iPhone 4에서 Jim을 아름답게 보이게 하려면 두 배 크기 버전을 만들어야 합니다. 이것이 우리가 여기서 하는 일입니다:
모든 것이 매우 간단합니다. 이제 일반 PPI(iPhone 3)용 Jim.png 버전과 [이메일 보호됨] 200% PPI용(iPhone 4.)
이제 당신은 "2 외에 다른 요소가 있다고 확신합니다."라고 말할 것입니다. 그렇습니다. 여기서 악몽이 시작됩니다. 악몽은 아닐지 모르지만 이 무수히 많은 승수를 사용하는 것보다 하루 종일 양말을 다림질하는 데 시간을 할애할 것입니다. 신에게 감사합니다. 언뜻보기에 그렇게 무섭지 않습니다. 우리는 이것으로 돌아갈 것입니다.
다중 DPI 설계 사양을 위해서는 픽셀이 아닌 단위가 필요하기 때문에 먼저 단위에 대해 이야기해 보겠습니다. 여기서 DP와 PT가 작용합니다.
결론:작업 중인 모든 디자인에 대해 승수를 알아야 합니다. 이 혼돈의 세계는 승수에 의존하여 이러한 모든 화면 크기, PPI 및 기타 치수를 인간이 이해할 수 있도록 합니다.
DP, PT, SP가 무엇인가요?
DP 또는 PT여러 DPI에서 여러 장치의 디자인 레이아웃을 설명하는 데 사용할 수 있는 측정 단위입니다.
DP 또는 DiP는 Device Independent Pixel의 약자로, PT는 Point를 의미합니다. PT는 Apple, DP는 Android를 의미하지만 거의 같은 의미입니다.
요컨대, 이러한 단위는 장치 승수에 관계없이 크기를 결정합니다. 이는 디자이너 및 엔지니어와 같은 워크플로의 다른 참가자와 사양에 대해 논의해야 할 때 매우 유용합니다. Jim 버튼의 예로 돌아가 보겠습니다.
Jim의 너비는 일반 비 망막 화면에서 44px이고 망막 화면에서 88px입니다. Jim이 좋아하기 때문에 버튼 주위에 20px 패딩을 추가해 보겠습니다. 자유 공간. 그런 다음 망막의 경우 패딩은 40px입니다. 그러나 망막 픽셀을 계산하는 것은 비-레티나 화면용으로 디자인할 때 전혀 의미가 없습니다.
따라서 일반적인 100% 비-레티나 종횡비를 모든 것의 기초로 삼겠습니다.
이 경우 Jim의 크기는 44*44DP 또는 PT가 되고 오프셋은 20DP 또는 PT가 됩니다. 모든 PPI로 사양을 지정할 수 있습니다. Jim은 항상 44*44dp 또는 pt입니다.
Android 및 iOS는 이 크기를 화면에 맞게 조정하고 올바른 승수로 변환합니다. 그렇기 때문에 항상 화면에 기본 PPI로 디자인하는 것이 더 쉽다고 생각합니다.
SP는 DP 및 PT와 별도의 용어이지만 동일한 방식으로 작동합니다. SP는 Scale-independent pixel의 약자입니다. SP는 Android 장치에서 사용자의 글꼴 설정에 영향을 받습니다. 디자이너로서 SP 직업은 다른 의미로 DP 직업처럼 보입니다. 1x에서 읽을 수 있는 것을 기반으로 합니다(예: 16sp는 훌륭한 글꼴 크기임).
결론:패딩의 경우 항상 해상도 및 스케일과 무관한 값을 사용하십시오. 항상. 화면 크기와 해상도가 다양할수록 이는 더욱 중요해집니다.
PPI 구성
이제 PPI, 망막 및 승수가 무엇인지 알았으므로 다음 사항에 대해 이야기하는 것이 중요합니다. "디자인 편집기에서 PPI 설정을 변경하면 어떻게 됩니까?"
당신이 스스로에게 이 질문을 했다면, 그것은 당신이 그것에 대해 조금 알고 있다는 것을 의미합니다. 소프트웨어디자이너를 위해. 다음은 이해하는 데 약간의 시간이 걸렸으며 이것이 중요한 점입니다.
인쇄되지 않은 모든 콘텐츠는 초기에 설정된 PPI 구성에 관계없이 픽셀 치수를 사용합니다.
소프트웨어의 PPI 구성은 인쇄의 특권입니다. 웹용으로 디자인하는 경우 PPI는 비트맵 크기에 어떤 영향도 미치지 않습니다.
이것이 바로 PPI 값을 직접 사용하지 않고 승수를 사용하는 이유입니다. 캔버스와 그래픽은 적절한 승수를 사용하여 소프트웨어에서 항상 픽셀로 변환됩니다.
다음은 예입니다. Photoshop과 같은 PPI 설정을 지원하는 프로그램에서 동일한 작업을 직접 시도할 수 있습니다. Photoshop에서 72ppi 설정으로 80*80px 직사각형과 16pt 텍스트를 그렸습니다. 두 번째 것은 동일하지만 144PPI에 대한 설정이 있습니다.
보시다시피, 텍스트는 조금 더 커졌고 정확히 두 배는 커졌지만 정사각형은 바뀌지 않았습니다. 그 이유는 프로그램(이 경우 Photoshop)이 PPI 값을 기반으로 pt 값의 크기를 조정하기 때문입니다. 결과적으로 PPI 구성의 두 배에서 텍스트를 렌더링할 때 크기가 두 배가 됩니다. 반면에 픽셀로 정의된 것, 즉 파란색 사각형은 동일한 크기를 유지합니다. 픽셀은 픽셀이며 설정한 PPI에 관계없이 픽셀로 유지됩니다. 그것을 표시하는 화면의 PPI만 변경합니다.
를 위해 디자인할 때 기억하는 것이 중요합니다. 디지털 기기 PPI는 디자인을 인식하는 방법과 글꼴과 같은 pt 차원의 그래픽 및 디자인을 만드는 프로세스에만 영향을 줍니다. 디자인 프로세스에 PPI 값이 다른 소스를 포함하면 프로그램은 결과 파일의 PPI 비율에 따라 모든 파일의 크기를 조정합니다. 이것은 당신에게 문제가 될 수 있습니다.
해결책? PPI를 사용하십시오(1x 디자인의 경우 72-120 범위가 바람직함). 개인적으로 저는 72PPI를 사용합니다. 왜냐하면 이것이 Photoshop의 기본 설정이고 대부분의 동료들이 동일하게 사용하기 때문입니다.
결론:
- PPI 설정은 웹 내보내기에 영향을 미치지 않습니다.
- PPI 설정은 PT와 같은 PPI 독립적 측정에서 생성된 그래픽에만 영향을 미칩니다.
- 픽셀은 모든 디지털 그래픽의 측정 단위입니다.
- 승수와 PPI에 초점을 맞추는 대신 설계 대상에 유의하십시오.
- 디지털 디자인 시 사실적인 PPI 설정을 사용합니다. 장치의 최종 디스플레이에 대한 명확한 아이디어를 제공하는 것을 사용하십시오(예: 1x 웹/데스크톱의 경우 72-120ppi).
- 모든 파일에 동일한 PPI 값을 사용합니다.
이 문제는 StackExchange의 게시물에서 자세히 다룹니다.
iOS에서 PPI를 처리하는 방법
이제 플랫폼별 설계에 뛰어들 시간입니다.
2014년 초 이후 출시된 iOS 기기를 살펴보겠습니다.
화면 크기 및 DPI와 관련하여 iOS에는 2가지 유형의 모바일 장치와 2가지 유형의 태블릿 및 데스크톱용 화면이 있습니다.
모바일 지점에는 iPhone과 물론 iPad가 있습니다.
전화 카테고리에는 이전 3GS(iOS6은 계속 지원됨) 이상이 있습니다. iPhone 3GS만 망막이 아닙니다. iPhone 5 이상은 iPhone 4 및 4s와 동일한 DPI로 더 긴 화면을 사용합니다. 다음은 당신을 위한 치트 시트입니다:
2014년 9월, 2014년 Apple Keynote가 발표되었으며 이제 iPhone 6 및 iPhone 6 Plus의 2가지 새로운 iPhone 카테고리가 있습니다.
iPhone 6은 5보다 약간 크지만(0.7인치) PPI는 동일합니다. 반면에 iPhone 6 Plus는 5.5인치 크기로 인해 iOS용으로 완전히 새로운 배율 @3x를 도입했습니다.
iPhone 6 Plus가 다른 제품과 비교하여 화면을 처리하는 방식에는 특별한 것이 있습니다. 아이폰 모델: 그래픽을 줄입니다.
예를 들어 iPhone 6용으로 디자인할 때 1334*750px 캔버스에 그림을 그리면 전화기는 1334*750 물리적 픽셀을 렌더링합니다. Iphone 6 Plus의 경우 폰이 이미지보다 해상도가 낮아서 2208*1242px로 디자인해야 하고 폰은 이미 이상적인 사이즈로 축소됩니다. 아래 그림을 참조하십시오.
물리적 해상도는 렌더링 해상도보다 15% 낮고 절반 픽셀과 같은 결함이 있어 가장 작은 세부 사항이 약간 흐려질 수 있습니다. 해상도가 너무 높아서 자세히 들여다보지 않는 한 이러한 결함은 거의 보이지 않습니다. 따라서 2208*1242px 캔버스에 그림을 그리고 디바이더와 같은 아주 작은 세부 사항에 대한 가능한 결함을 인식하십시오. 시뮬레이션을보십시오.
결론, 안드로이드 규칙:
- Android에는 7개의 다른 DPI가 있습니다. 그 중 4개에 대해 걱정해야 합니다: mdpi,hdpi,xhdpi,xxhdpi 및 XXXHDPI에서 향후 버전을 생성하려는 경우 1개
- MDPI는 기본 DPI에 1x를 곱한 값입니다.
- Android는 사양에 pt 대신 dp를 사용하지만 기본적으로는 동일합니다.
- 소수 승수에서 얻은 픽셀을 반올림합니다.
- .png 형식의 소스를 제공합니다.
- 운동하다 단일 시스템소스 파일의 이름과 이를 구현하는 책임자.
Mac 및 Chrome OS의 PPI
Mac(OSX)과 Chrome OS는 PPI 측면에서 거의 동일하게 작동합니다. 두 운영 체제 모두 표준 PPI(100%) 및 망막(200%)을 포함한 더 높은 해상도를 지원합니다. iPhone 및 iPad 모델과 마찬가지로 여기에서는 2배 승수만 사용됩니다.
Mac과 Chrome OS를 포함한 대부분의 사용자가 저해상도 기기를 사용하더라도 화면의 고해상도 버전도 준비하는 것이 좋습니다. 미래를 위한 소스 크롬 버전 OS는 고해상도 파일을 포함합니다. 저를 믿으세요. 시간 낭비가 아닙니다.
현재 이 PPI를 사용하는 노트북은 3대뿐입니다. 맥북 프로 13인치, 15인치 및 크롬북 픽셀. 또한 Chromebook Pix는 터치에 민감합니다.
필수 소스, Chrome 예시
이러한 유사성의 완벽한 예는 Chrome 툴바 버튼 소스입니다. 두 플랫폼에서 동일한 버튼을 사용합니다. 코드가 다르면 그래픽이 동일합니다. Chrome 메뉴와 북마크 버튼을 확인하세요.
결론:
- Chrome OS와 OSX는 동일한 승수 2를 사용합니다.
- 고해상도 크롬 OS 화면만 터치도 지원합니다.
신축성 있는 소스
데스크톱 또는 모바일 앱을 개발 중인지 여부는 중요하지 않으며 거의 항상 확장 가능한 자산이 필요합니다. 이 소스를 사용하면 렌더링 시 품질 손실 없이 코드 크기를 원하는 크기로 조정할 수 있습니다.
이는 때때로 동일한 결과를 나타내지만 다르게 작동하는 반복 가능한 자산과 동일하지 않습니다.
아래의 예를 보십시오. iOS의 도구 모음은 전체 화면에서 x축을 따라 반복되는 단일 초박형 소스에서 생성됩니다.
이제 다양한 플랫폼에서 신축성 소스를 사용하는 방법을 살펴보겠습니다.
iOS의 스트레처블 소스
iOS에서는 코드에 스트레치가 지정되어 있으므로 디자이너의 작업이 간소화됩니다. 제공하기만 하면 됩니다. 기본 이미지디자인을 직접 코딩하지 않는 경우 가로, 세로 또는 둘 다 늘어나도록 사양을 지정하십시오. 다음은 iOS의 표준 Chrome 버튼의 예입니다.
Android의 확장 가능한 소스
Android는 이러한 소스를 iOS와 다르게 사용합니다. 소스 자체는 4줄로 둘러싸여 있습니다. 그래픽의 일부로 슬라이스/이미지에 설정해야 하며, 문자 그대로 소스 코드 자체의 소스 코드 사양을 시각적으로 표시해야 합니다.
이 4개의 선은 확대/축소 영역과 채우기 영역의 두 가지를 정의합니다. 이 두 매개변수가 설정되면 코드는 단순히 소스를 확장하고 콘텐츠를 지정된 위치에 배치할 수 있습니다. 아래 예를 보십시오. 이전에 본 표준 Chrome 버튼의 Android 버전입니다.
보시다시피 나인패치 이미지는 #000000 4개의 깨끗한 줄무늬가 한 세트입니다. 모든 DPI에 대해 너비가 1픽셀이어야 합니다. 이것은 코드 디스플레이입니다. 스트레치 영역은 포함하지 않습니다 둥근 모서리, 반복할 수 있는 것이 아니기 때문입니다(그렇지 않으면 끔찍하게 보일 것입니다). 이 경우 버튼 주위에 10dp 패딩을 추가했습니다. 사양에 명시하지 않아도 되는 사항입니다.
9-패치를 사용하려면 @2x를 추가하는 것처럼 파일 이름에 .9를 추가해야 합니다. iOS 소스. 버튼이 있는 또 다른 예:
소스 크기에 주의해야 합니다. 시연을 위해 상당히 크게 만들었다면 아래와 같이 소스의 크기를 최소화하여 소스의 무게를 최적화하는 것이 중요합니다. 모서리는 그대로 두었지만 스트레치 및 콘텐츠 영역을 최소한으로 줄였습니다.
원래 클리핑이 정확하도록 9-패치 마크가 디자인과 겹치지 않는지 확인하십시오. .9는 겹치지 않고 가능한 한 소스에 가까워야 합니다. 인라인하지 마십시오. 이전 예제에는 그림자로 인해 인라인 여백이 있었습니다.
9-패치는 DPI당 소스 내보내기를 대체하지 않습니다. 이것은 소스의 각 버전에 대해 수행되어야 합니다.
마지막으로 .9는 여러 개의 확장 가능한 영역(위쪽 및 왼쪽)을 포함할 수 있습니다. 나 자신은 내 작업에서 거의 사용하지 않았지만 언급할 가치가 있습니다.
결론:디자인을 구현할 사람에게 특히 데스크탑에 사용하기에 가장 좋은 솔루션이 무엇인지 항상 물어보십시오. 이미지가 많을수록 애플리케이션이 더 무거워지고 변경이 필요한 경우 소스를 업데이트하기가 더 어려워집니다. 9-패치는 올바른 이름과 적절한 소스 조직에서만 사용해야 합니다.
벡터 소스
더 큰 DPI 범위를 사용하는 화면의 다양성이 지속적으로 증가하고 있기 때문에 래스터 대신 벡터 소스로 전환하는 것은 주의할 가치가 있습니다.
벡터 소스의 가장 일반적으로 사용되는 일반적인 형식은 .svg 형식입니다. 이것은 .xml 기반 파일로, 원래 웹용으로 생성되었으므로 웹 브라우저를 포함한 대부분의 프로그램에서 읽고 편집할 수 있습니다. 다른 형식은 .ai(Adobe illustrator), .eps 또는 .pdf와 같은 벡터를 지원합니다.
벡터 이미지의 주요 장점은 확장성입니다. 모든 PPI 변형에 대해 비트맵을 만들 필요가 없으며 벡터는 화면 승수에 따라 자동으로 크기가 조정됩니다.
Svg에는 그래픽을 그리는 방법에 대한 XML 정보가 포함되어 있습니다. 그런 다음 소프트웨어/OS/브라우저는 이러한 명령을 해석하여 소스를 선택한 크기로 렌더링합니다.
이 형식을 사용하면 다음과 같은 놀라운 이점이 있습니다.
- 앱 크기 축소
- 래스터 사용량의 총 감소
- 프로그래밍 방식으로 더 쉽게 색상 변경
- 자동 및 비파괴적 확장
단점이 있지만:
- 시각적 자유도가 낮고 복잡한 그래픽, 특히 복잡한 그림자, 그라디언트 및 기타 효과에는 그다지 유용하지 않습니다.
- 필요한 처리 리소스로 인해 애플리케이션 또는 사이트의 운영에 부정적인 영향을 미칠 수 있습니다.
- 자동 크기 조정으로 인해 픽셀을 제어할 수 없습니다.
더 평평한 스타일을 향한 인터페이스 디자인의 진화로 인해 그림자, 그라디언트, .vector 사용이 점점 더 유용해지고 사용됩니다. 그럼에도 불구하고 벡터 소스를 사용할 때는 주의가 필요합니다.
단점에서 이미 언급했듯이 .svg는 제품 작동에 큰 영향을 줄 수 있습니다. 형식은 웹에서 잘 작동하며 iOS 및 Android에는 별도의 벡터 솔루션이 선호됩니다. iOS는 .pdf, Android를 사용합니다. 벡터 드로어블.
이 문제에 대한 Chrome OS 사양은 아직 나오지 않았습니다. 모든 것을 감안할 때 크롬 앱 OS는 웹 앱이니 어쨌든 터치 디자인을 하는 것이 좋습니다. 내 충고: Android 터치 표준을 따르십시오.
웹, 하이브리드 장치 및 미래
모바일 장치용 디자인을 만들면 어떤 방향으로 가야할지 명확해질 것입니다. 확실히, 터치 컨트롤입니다. 데스크탑용으로 디자인하는 경우 터치를 사용하지 않도록 합니다. 간단해 보이지만 인기가 높아지면서 최신 트렌드인 하이브리드 장치를 무시합니다.
하이브리드 장치는 터치 및 비터치로 제어할 수 있습니다. 크롬북 픽셀, 서피스 프로 및 레노버 요가이것의 좋은 예입니다.
이 경우 어떻게 진행합니까? 이 질문에 대한 간단한 답은 없지만 터치 컨트롤을 선택하는 것이 좋습니다. 기술이 발전하는 방향입니다.
웹용으로 디자인하는 경우 다음을 고려하십시오. 터치 컨트롤미리.
결론:
- 미래를 위해 무엇을 하든 모바일 장치와 터치 컨트롤 측면에서 프로젝트를 생각하십시오.
- OS별 터치 영역 규격을 사용합니다. 이렇게 하면 디자인을 개선하고 일관성을 유지하는 데 도움이 됩니다. 터치 영역의 표준 크기는 참조용으로만 제공되며 엄격하게 따를 필요는 없습니다. 프로세스를 제어하고 결정을 내립니다.
인터페이스 디자인 프로그램
소프트웨어는 디자이너의 기술을 결정하지 않지만 주어진 작업에 적합한 도구를 선택하면 생산성을 크게 향상하고 개발 프로세스 자체를 단순화할 수 있습니다. 프로그램 노하우가 유일한 기술이 되어서는 안 되지만 올바른 도구를 배우고 마스터하면 아이디어를 현실로 만들 수 있는 훌륭한 토대가 될 것입니다.
인터페이스 디자인에서 DPI 변형으로 작업하기 위해 다른 소프트웨어는 다른 방식으로 접근합니다. 일부 프로그램은 특정 목적에 특히 좋습니다. 가장 인기 있는 솔루션은 다음과 같습니다.
포토샵
모든 디자인 도구의 어머니. 오늘날 인터페이스 디자인을 위한 가장 인기 있는 선택일 것입니다. 끝없는 Photoshop 리소스, 자습서 및 기사가 있습니다. 이 "노인"은 인터페이스 디자인 산업 발전의 기원에 서있었습니다.
처음에 프로그램은 이름에서도 알 수 있듯이 래스터 그래픽과 사진을 처리하기 위해 만들어졌습니다. 수년에 걸쳐 진화했으며 디자이너는 인터페이스 디자인에도 사용하기 시작했습니다. 이것은 부분적으로 습관에 의해 결정되었고 또한 원하는 품질을 제공할 수 있는 거의 유일한 도구라는 사실에 의해 결정되었습니다.
Photoshop은 단연 비트맵 편집 분야의 선두 주자이며 인터페이스 디자인 분야에서도 최고의 인기를 누리고 있습니다. 수십 년의 존재로 인해 프로그램은 기능이 너무 많아 마스터하기가 쉽지 않습니다. 이것은 거의 모든 작업을 수행할 수 있는 경우이지만 항상 최적의 방법은 아닙니다.
원래 래스터 그래픽용으로 제작되었기 때문에 Photoshop은 아래에 설명된 Illustrator 및 Sketch와 달리 DPI에 독립적입니다.
일러스트레이터
이것은 Photoshop의 벡터 형제입니다. 이름 자체에서 알 수 있듯 일러스트레이터를 위해 제작되었지만, 인터페이스 디자인에서도 활발히 사용되고 있습니다.
Illustrator는 인터페이스, 색상 조작, 크기, 눈금자 및 측정 단위와 마찬가지로 인쇄 디자인에 잘 적응되어 있습니다. 처음에는 혼란스러울 수 있습니다. 인터페이스 디자인에 적응하는 데 약간의 시간과 약간의 재작업이 필요합니다. 포토샵처럼, 그것은 놀라운 강력한 도구매우 가파른 학습 곡선으로.
Photoshop과 달리 Illustrator는 벡터 특성으로 인해 DPI에 독립적입니다. 비트맵과 달리 벡터 그래픽수학 공식을 기반으로 하며 품질 손실 없이 프로그래밍 방식으로 확장할 수 있습니다.
비트맵과 벡터 이미지의 차이점을 이해하는 것은 확장 가능한 디자인과 소스를 구축하는 열쇠입니다.
스케치 3.0
Sketch는 Photoshop 및 Illustrator에 비해 비교적 새로운 도구입니다. 불과 4년 전에 도입된 이 프로그램은 인터페이스 디자인 업계에서 (좋은 의미로) 많은 소음을 일으켰습니다. 그 이유는 Sketch가 원래 인터페이스 디자인이라는 하나의 목표를 염두에 두고 만들어졌기 때문입니다. Sketch는 틈새 청중인 인터페이스 디자이너에게 완벽하게 적응된 도구로 자리 잡았습니다.
스케치는 더 복잡한 시각적 디자인뿐만 아니라 대략적인 프로토타이핑에 적합합니다. Illustrator와 마찬가지로 완전히 벡터 기반이며 미니멀하고 매우 사려 깊은 인터페이스를 제공합니다. 소스 생성 시스템의 사용 용이성 및 유연성과 아트보드의 조합은 Sketch를 다중 DPI 및 다중 플랫폼 디자인을 위한 가장 빠른 솔루션으로 만듭니다. 최신 릴리스는 Photoshop에 대한 매우 가치 있는 대안이 됩니다.
단점으로 Sketch는 소규모 팀에서 개발했으며 여전히 Photoshop만큼 인기가 없습니다. 또한 래스터 처리를 위한 다소 빈약한 옵션 세트가 있습니다. 이와 관련하여 Photoshop이 훨씬 더 잘 할 것입니다. 그리고 마지막으로 아직 어리기 때문에 그런 능력이 없다. 엄청난 양리소스, 자습서 및 Photoshop과 같은 대규모 커뮤니티가 있습니다. 그러나 커뮤니티가 매우 활발하고 개발에 대한 동기가 있다는 점에 유의해야 합니다.
개인적인 경험에 따르면 저는 8살 때부터 Photoshop을 사용해 왔지만 최근에는 대부분의 디자인 작업을 Sketch 3.0으로 전환했습니다. 이것은 품질에 대한 증거가 아니지만 여전히 Photoshop이 훌륭한 도구라고 생각합니다. Sketch가 내 요구 사항에 더 잘 맞습니다.
피그마
2015년 후반에 새로 추가된 Figma는 브라우저 기반 벡터 디자인 도구입니다(주로 Chrome을 통해 작동). 팀워크 기능 및 Slack 통합이 포함된 Sketch의 클라우드 버전과 유사합니다. 미래의 설계 도구를 실현하려는 시도에서 엔지니어링의 인상적인 위업.
Figma의 가장 큰 장점은 크로스 플랫폼(Chrome이 실행되는 모든 곳에서 작동)과 팀워크 및 다중 사용자 편집 기능입니다. 그러나 귀하 또는 귀하의 회사가 웹 서비스 작업에 특별히 익숙하지 않은 경우 프로그램의 로컬 버전이 없기 때문에 선택이 좋지 않을 수 있습니다.
결론:완벽한 도구는 없지만 편안하게 작업할 수 있는 도구는 있습니다. 시간과 돈이 충분하다면 나열된 모든 프로그램을 테스트하여 자신의 의견을 형성하십시오.
