[4주차-4] 해상도와 밀도

1. 해상도

스마트폰의 등장 이전에는 웹 디자인에 있어서 사용자의 표준 모니터 크기만 고려하면 됐기 때문에

픽셀 단위의 해상도만 고려했었다.

그러나 다양한 모바일 디바이스와 함께 새로운 개념의 단위가 생겨나게 되었다.

안드로이드의 디바이스 크기와 비율이 너무 다양했기 때문이다.

 

실제로 스마트폰을 보면  하드웨어의 크기는 그렇게 차이가 나지 않지만 기기들마다 해상도에는 차이가 있다.

해상도는 이미지의 가로&세로에 몇 개의 화소, 몇 개의 픽셀이 있는지를 뜻한다.

위의 이미지를 보면 같은 크기의 이미지라도 해상도에 따라서 다르게 보이는 것을 알 수 있다.

화소가 적은 30x30보다 100x100 해상도에서 더욱 뚜렷하게 보인다.

화소가 많으면 많을수록 더 세밀하게 이미지를 표현할 수 있는 것이다.

이러한 해상도를 표현하는 단위에는 몇 가지가 있다.

 

2. Pixel = px

Pixel의 약자 px는 화면을 구성하는 최소의 단위를 말한다.

픽셀은 화면 전체 크기와 상관없이 지정한 수치만큼 표현되는 mm나 cm처럼 절대 단위이기 때문에

실제 디자인을 하는 크기를 지정할 때 사용한다.

 

3. Point = pt

iOS에서 화면에 콘텐츠를 배치하는 데 사용하는 좌표계는

point 단위의 측정을 기반으로 하고 이를 디스플레이 픽셀에 매핑하게 된다.

표준 해상도는 디스플레이 1:1 픽셀 밀도 또는 1배수라고 한다. (1포인트(1pt)는 1px을 의미한다.)

아이폰은 레티나 디스플레이를 장착하면서부터 픽셀을 2배로 늘려서 매우 선명한 화면으로 출력하는 그래픽을 구현했다.

레티나 디스플레이에서 UI가 이전의 디스플레이와 동일한 물리적 크기를 유지하려면

디자이너는 픽셀의 크기를 2배로 늘려서 디자인해야 한다.

 

 

예를 들어 터치 타깃의 영역 기본 크기인 가로 세로 44px의 크기는 레티나 디스플레이에서는 두 배 수인 88px로 늘려서 디자인해야 한다.

디자이너는 이를 위해서 원래 버전인 1배수 크기와 새로운 크기인 2배수와 3배수의 그래픽도 제공하게 되었는데

이제 더 이상 UI 안에서 보여지는 이 버튼의 크기가 가로 세로 44px이라고 말할 수 없는, 상대적인 개념이 되어버렸다.

이것을 위해서 사용하는 것이 포인트라고 부르는 pt의 개념이다.

1pt는 레티나 디스플레이 이전의 디바이스에서 1픽셀을 말하고

2배수인 레티나 디스플레이에서는 2픽셀을 말한다.

그래서 44pt의 버튼은 2배수에서는 88px이 되는 것이고, 3배수에서는 132px이 되는 것이다.

그러나 지금은 iOS는 1배수를 지원하지 않고 2배수도 잘 지원하지 않기 때문에 3배수 개념만 생각하면 된다.

 

4. Density-independent pixel = dp

그런데 이 상대적인 개념이 안드로이드에서는 조금 더 복잡해졌다.

Density-independent pixel (밀도 독립적 픽셀) 줄여서 dp라고 부르는데

화면의 크기가 달라도 동일한 비율로 보여주기 위해서 안드로이드에서 정의한 좌표 단위다.

 

[Rasterization]

dp는 추상 단위이고 수학 좌표 공간에서만 의미가 있다.

dp는 픽셀로 랜더링 되는데, 이 과정을 레스터라이제이션이라고 한다.

dp에 배율을 곱해서 픽셀을 얻게 되고, 배율이 높을수록 선명도가 높아진다.

dp는 꼭 픽셀로 레스터화해야 한다. dp는 추상 단위이고 수학 좌표 공간에서만 의미가 있다고 했는데

dp를 기준으로 넓이와 높이를 픽셀로 계산해야 시각적으로 작업할 수 있는 아트보드의 크기를 정하고 디자인을 시작할 수 있다.

 

[Physical Pixel (downsampling, px)]

장치 화면에서 해상도가 이전 단계에서 랜더링된 이미지보다 낮을 수 있다.

이미지를 표시하려면 해상도를 낮추기 위해서 이미지를 downsampling, 즉 크기를 조정해야 된다.

그러나 모든 이미지가 downsampling 과정을 거치지는 않는다.

아이폰 6 플러스가 나오면서 지금까지와는 비율이 조금 달라져서 downsampling이라는 과정을 거치게 되었다.

 

 

dp를 픽셀로 계산할 필요가 있기 때문에 여러 공식이 존재한다.

디자이너는 주로 픽셀의 개념에서 디자인을 하는데 파일을 개발자에게 넘길 때는 개발자는 dp 단위를 요구하는 경우가 많다.

이를 해결하기 위해 앵그리툴스라는 웹사이트에서 dp, px, mm PT 같은 단위를 해상도별로 자동으로 계산할 수 있게 해준다.

 

4-1. Density = 밀도

스크린은 픽셀로 구성되는데, 픽셀을 기준으로 디자인하면

디바이스의 픽셀 밀도 1인치 공간 안에 표시되는 픽셀 수, ppi로 인해서 의도한 것과 다르거나 작거나 크게 표시될 수 있다.

어떤 화면에서도 같은 크기로 보이도록 안드로이드에서는 dp, iOS에서는 pt 단위를 사용한다.

위의 사각형은 시각적으로는 균일한 크기를 가지고 있지만

사각형 안에 들어 있는 픽셀의 개수를 보았을 때, 각각의 해상도에 따라서 포함하고 있는 사각형의 개수가 다르다는 것을 알 수 있다.

즉 해상도에 따라서 보이는 크기를 같게 하기 위해서는 해상도마다 다른 크기의 디자인이 필요하다.

 

만약 해상도와 상관없이 동일한 이미지 크기를 적용하게 되면 위와 같은 문제가 발생한다.

해상도에 따른 밀도를 무시하고 픽셀 개념으로 디자인하면 발생하는 문제다.

 

밀도와 상관없이 픽셀 개념으로 디자인을 하면 위와 같은 결과가 발생한다.

즉 밀도 값인 수학적 좌표 값도 달라지고 이미지의 크기도 당연히 해상도에 따라서 달라져 보이게 되는 것이다.

 

그래서 해상도에 맞게 모든 화면에서 동일한 위치에 동일한 크기로 보이도록 디자인하기 위해서는

밀도라는 개념을 알아야 하고 dp를 픽셀로 전환할 줄도 알아야 한다.

 

5. dots per inch = dpi

여기서 dpi라는 개념도 알아야 한다.

dpi란 인쇄 시에 사용되는 공간 밀도를 측정한 값을 말한다.

프린터가 넣을 수 있는 1인치당 가로세로 잉크 방울의 수다.

당연히 인치당 도트 수가 많을수록 이미지는 선명하게 출력된다.

어떤 이미지가 72dpi라면 가로 세로 1인치 안에 72개 점 즉 가로에도 72개, 세로에도 72개의 점이 있기 때문에

가로 세로의 점의 개수를 곱하면 5,184개의 점 도트 또는 픽셀로 이루어졌다고 할 수 있는 것이다.

 

7. pixel per inch = ppi

이 개념이 컴퓨터 화면에 적용이 된 것이 바로 ppi, pixel per inch 개념이다.

ppi는 모니터 화면에 인치당 표시되는 픽셀의 수를 나타낸다.

디바이스 해상도는 한 화면에 픽셀이 몇 개나 포함되어 있는지를 말하는 것으로

대개 가로 픽셀 수와 세로 픽셀 수의 곱하기 형태로 나타난다.

그래서 모니터의 크기가 1,024x768라면 가로 1024개 세로 768개의 픽셀로 모니터에 나타낸다는 표시다.

같은 해상도라도 17인치 모니터와 27인치 모니터에서 이미지는 그 선명도가 다르다.

크기가 큰 모니터로 갈수록 면적이 넓어지니까 선명도가 떨어진다.

 

8. Density per inch = dpi

안드로이드에서 밀도 독립적 픽셀, dp(Density-independent pixel)이라는 단위를 새로 만들었다고 했는데

새로운 dpi는 dote per inch가 아닌 Density per inch의 약자인 dpi를 사용하게 된다.

앞전의 dpi와는 다른 개념으로 오해하고 헷갈리면 안 된다.

 

안드로이드의 dpi를 살펴보자면, 이 중에서도 기준 dpi는 mdpi인 160dpi다.

즉 160dpi인 mdpi의 경우에는 독립 단위인 dp와 픽셀이 같은 크기가 된다.

mdpi = 160dpi = idp = 1px 이라는 뜻이다.

---

이 위의 내용이 강의 내용이고, 밑으로는 내가 추가적으로 알아본 정보들이다.

dp, pt, ppi, dpi의 차이점도 모르겠고.. 안드로이드가 dpi를 만들었다고 했는데 그럼 iOS는 이런 개념을 안 만든 건가 궁금해지기도 했다.

1. ppi와 dpi의 차이점

구분	Pixel per inch(ppi)	Density per inch(dpi)
정의	디스플레이의 물리적 해상도를 나타내는 단위	안드로이드에서 논리적 화면 밀도를 구분하는 단위
사용 목적	화면의 실제 픽셀 밀도 측정 선명도 평가	다양한 화면에서 UI 요소를 일관되어 보이도록 돕는 밀도 그룹 구분
적용	모든 디스플레이 장치(스마트폰, 모니터, TV 등)	주로 안드로이드 개발 환경에서 사용
관련 개념	해상도(ex. 1080pm 4K)와 직접 관련	화면 리소스 스케일링 및 UI 배치
예시	441 ppi(5인치 1080p 화면)	160 dpi (mdpi), 320 dpi (xhdpi)

 

예시: 1080p 해상도(1920x1080)를 가진 두 기기가 있다고 가정. 하나는 5인치, 다른 하나는 10인치

• ppi: 5인치 기기의 경우, ppi가 높아서 화면이 더 선명하게 보인다.
  10인치 기기는 같은 해상도를 가졌지만, ppi가 낮기 때문에 상대적으로 덜 선명하게 보입니다.
• dpi: 안드로이드에서는 이 두 기기를 다른 dpi 그룹으로 구분할 수 있다.
  예를 들어, 5인치 기기는 xhdpi(320 dpi), 10인치 기기는 mdpi(160 dpi)로 구분될 수 있다.
  이 때, 안드로이드 시스템은 각각의 dpi 그룹에 맞춰 UI 요소의 크기를 조정한다.
  결과적으로 두 기기에서 동일한 dp 단위로 설정된 UI 요소는 비슷한 크기로 보인다.

 

2. 안드로이드는 dpi, iOS는?

 

• 안드로이드의 dpi: 기기의 화면 밀도에 따라 UI 리소스를 다른 크기로 제공하는 방식
  각 dpi 그룹에 맞춰 별도의 이미지 리소스와 UI 요소 크기를 정의하고 적용
• iOS의 Point: 배율 시스템을 통해 고해상도 디스플레이에서 자동으로 UI 요소의 크기와 해상도를 조정
  iOS 개발자는 여러 해상도의 기기를 고려하지 않고 Point 단위로 디자인하며
  iOS가 자동으로 배율에 맞게 렌더링을 처리

1) 실제 적용 예시

• 안드로이드에서 개발자는 ldpi, mdpi, hdpi, xhdpi, xxhdpi에 맞춰
  각각의 해상도별로 UI 요소나 이미지를 다르게 제공해야 한다.
• iOS 개발자는 1x, 2x, 3x 크기의 이미지만 준비하면
  iOS 시스템이 자동으로 각 기기 배율에 맞게 적절한 리소스를 선택해 사용한다.

2) 왜?

iOS가 1배수, 2배수, 3배수만 고려하면 되는 이유는 안드로이드에 비해 기기 종류와 해상도 변형이 훨씬 적기 때문이다.

안드로이드와 iOS는 각각 디바이스의 다양성과 운영체제의 구조에서 차이가 있기 때문에,

화면 밀도와 해상도 관리 방식에도 차이가 생긴다.

 

1. iOS의 제한된 기기 종류

• iOS는 애플에서 개발한 고유한 기기들(아이폰, 아이패드 등)에만 운영된다.
  이러한 애플 기기는 제한된 수의 해상도와 화면 크기만 사용합니다.
• iOS 개발자는 애플이 제공하는 배율 시스템(1x, 2x, 3x)만 고려하면 되므로
  디자인과 개발이 상대적으로 단순하다.
• 애플의 통제된 생태계 덕분에 애플 기기는 소수의 해상도와 배율에 맞춰 최적화할 수 있다.

2. 안드로이드의 다양한 기기 생태계

• 안드로이드는 수많은 제조사에서 다양한 기기(삼성, LG, 샤오미 등)를 출시하기 때문에
  기기 종류, 해상도, 화면 크기가 매우 다양합니다.
• 안드로이드 기기마다 해상도와 화면 밀도가 다르기 때문에
  개발자는 dpi 그룹(ldpi, mdpi, hdpi 등)을 기준으로 각기 다른 해상도에 맞춰 리소스를 제공해야 한다.
• 안드로이드 기기는 다양한 화면 비율과 크기, 해상도를 가지고 있어 더 세분화된 dpi 그룹을 사용하여
  다양한 기기에서 UI가 일관되게 보이도록 처리해야 한다.

3. iOS의 배율 시스템과 안드로이드의 dpi 시스템 비교

특징	iOS	안드로이드
기기 다양성	소수의 기기(아이폰, 아이패드)	수많은 제조사의 다양한 기기
해상도 및 화면 밀도	소수의 해상도와 화면 크기	다양한 해상도와 화면 밀도
리소스 배율	1x, 2x, 3x로 단순한 배율 시스템 적용	dpi 그룹(ldpi, mdpi, hdpi, xhdpi, xxhdpi 등)
리소스 준비 방식	1x, 2x, 3x 리소스만 준비하면 됨	각 dpi 그룹에 맞춰 다수의 리소스를 준비해야 함

 

 

3. 결론

iOS에서는 Point 단위와 배율 시스템을 통해 처리한다 (≒ 안드로이드의 dpi)

iOS는 애플이 제작하는 기기 종류가 제한적이고, 통제된 환경 덕분에 1배수, 2배수, 3배수로만 리소스를 관리할 수 있다.

반면, 안드로이드는 수많은 제조사의 다양한 기기에서 작동해야 하기 때문에 더 세분화된 dpi 그룹을 적용해야 한다.

이로 인해 안드로이드에서는 다양한 기기 해상도에 맞춘 리소스 준비가 더 복잡하다.

두 플랫폼 모두 다양한 해상도와 화면 밀도를 가진 기기들에서 일관된 사용자 경험을 제공하는 방식이 다를 뿐

근본적인 목표는 동일하다.

 

 

 

 

따봉 GPT야 고마워