Ch04_4_2_해상도와 밀도

학습목표
해상도와 밀도의 개념을 이해하고, UI 디자인 시 고려해야 할 사항을 알아본다.

---

해상도란? [resolution]- DPI(dot per inch)

해상도는 화면이 얼마나 많은 픽셀로 이루어져 있는지를 나타내는 지표이다. DPI(Dots Per Inch) 또는 PPI(Pixels Per Inch)로 표기되며, 인치당 몇 개의 도트(픽셀)가 포함되어 있는지로 표현한다.

• DPI (Dots Per Inch): 인쇄물의 해상도를 측정할 때 사용되는 단위로, 인치당 도트의 개수를 뜻한다. DPI가 높을수록 더 정밀한 인쇄가 가능하다.
• PPI (Pixels Per Inch): 화면 해상도를 측정할 때 사용하는 단위로, 모니터나 스마트폰 화면의 인치당 픽셀 수를 의미한다. 높은 PPI는 더 선명하고 고해상도의 이미지를 보여준다.

예시:

• 해상도가 1920×1080인 화면은 가로 1920픽셀, 세로 1080픽셀로 구성되어 있으며, 전체적으로 약 2백만 개의 픽셀(2메가픽셀)이 있다.
• 레티나 디스플레이: 애플의 제품에 적용된 고해상도 화면 기술로, 인치당 픽셀 수가 매우 높아 일반적인 시청 거리에서 사람의 눈으로 픽셀을 구분할 수 없는 정도의 해상도를 제공한다.

• 웹디자인에서의 72dpi: 과거의 일반적인 모니터 해상도는 72dpi (Dots Per Inch)였다. 이는 화면에서 보이는 이미지가 1인치당 72개의 점으로 구성된다는 의미이다. 웹디자인에서는 모니터의 표준 해상도가 낮았기 때문에 72dpi로도 충분히 선명한 이미지를 표현할 수 있었다.
• 인쇄용 해상도 300dpi: 인쇄물에서는 300dpi 해상도가 일반적으로 사용된다. 이는 인쇄 결과물이 보다 고품질의 세밀한 이미지를 표현할 수 있도록 하기 위함이다. 300dpi는 1인치당 300개의 점으로 구성되어, 같은 크기의 이미지라 하더라도 훨씬 더 높은 해상도와 선명도를 제공한다. 이처럼 인쇄 매체에서는 높은 해상도가 요구된다.

이 두 해상도 차이는 디지털과 인쇄 매체의 특성 차이에 따른 요구 사항의 차이로, 웹에서는 낮은 해상도(72dpi)가 허용되지만, 인쇄에서는 더 높은 해상도(300dpi)가 필요하다.

---

모바일 해상도와 뷰포트(Viewport)

 

• 모바일 해상도는 모바일 기기의 화면에 표시되는 픽셀 밀도를 의미하는 것으로, 뷰포트(viewport)는 사용자가 실제로 보는 화면의 영역을 말한다. 뷰포트는 웹사이트나 애플리케이션을 화면에 최적화하여 표시하는 데 중요한 역할을 하며, 다양한 기기에서 일관된 사용자 경험을 제공하기 위해 고려해야 할 요소이다.

iOS와 Android의 해상도 차이

• iOS와 Android는 운영 체제의 특성상 해상도 설정 방식에 차이가 있다. iOS는 주로 아이폰과 아이패드만을 고려하여 고정된 해상도를 사용하고, 다양한 기기 모델 간 일관된 경험을 유지하기 위해 1x, 2x, 3x 같은 배율을 사용한다.
• 반면, Android는 기기 종류가 매우 다양하기 때문에 해상도가 기기마다 다를 수 있다. 예를 들어, 안드로이드 기기에서는 저해상도에서부터 고해상도까지 다양한 뷰포트와 픽셀 밀도가 존재하며, 이를 위해 dp(density-independent pixels) 단위를 사용하여 다양한 해상도에서도 동일한 UI가 유지되도록 설계한다.

다양한 해상도와 비율

• 다음 다이어그램은 여러 해상도와 화면 비율을 보여주는 예시이다. VGA, SVGA, HD 720, HD 1080 등 다양한 해상도가 있으며, 각 해상도는 특정 기기에서 지원하는 픽셀 크기와 비율을 나타낸다.
• 해상도의 가로세로 비율도 다양하게 존재하며, 예를 들어 16:9, 4:3, 5:3 등 다양한 비율이 있다. 이는 각 기기의 화면 크기와 비율에 맞춰 최적화된 화면을 제공하는 데 필요하다.

 

---

픽셀(Pixel, px)

• 픽셀은 화면을 구성하는 최소 단위로, ‘Picture element’의 줄임.
  약자인 px를 단위로 사용한다.
• 화면의 전체 크기와 상관없이 지정한 수치만큼 표시되는 절대 단위로, 실제 디자인할 크기를 지정할 때 사용한다.
• 가로세로 픽셀을 곱하면 화면의 총 픽셀 수가 되는데, 이 수가 높을수록 선명도가 높음을 뜻한다.
• 예를 들어 해상도 1920×1080을 계산하면 총 2,073,600이 된다. 화면이 약 200만 개 픽셀로 이루어졌다는 것을 의미한다. 이를 ‘200만 화소’라고 표현한다(이는 누구나 해상도라는 개념에 쉽게 접근할 수 있도록 고안된 마케팅적 접근이기도 하다).

레티나 디스플레이 (Retina Display) : 애플(Apple)이 개발한 고해상도 디스플레이 기술

• 애플(Apple)에서 제작한 제품에 사용되는 화면 기술을 가리키는 용어입니다. "레티나"는 인간의 망막을 의미하는 "Retina"에서 유래
• 망막으로 픽셀을 구분할 수 없다는 의미로 애플에서 만든 용어
• 화면의 픽셀 밀도가 매우 높아 사용자가 일반적인 시청 거리에서 픽셀을 구분할 수 없도록 설계된 화면

1. 레티나 디스플레이의 특징

• 픽셀 밀도가 높음: 레티나 디스플레이는 일반 디스플레이에 비해 같은 화면 크기에서 훨씬 더 많은 픽셀을 포함하고 있다. 예를 들어, 일반 디스플레이에서 72~100PPI(Pixels Per Inch)의 픽셀 밀도가 사용되는 반면, 레티나 디스플레이는 300PPI 이상을 목표로 한다.
• 일반 시청 거리에서 픽셀 구분이 어려움: 애플은 인간의 눈이 일정 거리에서 한 인치당 약 300픽셀 이상을 구분하기 어렵다는 점을 기반으로, 레티나 디스플레이의 픽셀 밀도를 300PPI 이상으로 설계했다. 이로 인해 사용자는 화면을 가까이에서 보더라도 픽셀 경계가 보이지 않아, 더욱 매끄럽고 선명한 이미지를 경험할 수 있다.

2. 레티나 디스플레이가 적용된 제품의 예시

• 아이폰 4 (iPhone 4): 레티나 디스플레이가 처음 적용된 제품으로, 기존 아이폰보다 두 배의 해상도인 960×640 해상도를 제공하여 약 326PPI를 구현했다. 일반적인 시청 거리에서 개별 픽셀을 구분할 수 없어, 텍스트와 이미지가 훨씬 선명하고 부드럽게 보인다.
• 아이패드와 맥북 (iPad, MacBook): 이후 아이패드와 맥북 라인업에도 레티나 디스플레이가 도입되었으며, 화면 크기에 따라 최적의 픽셀 밀도가 적용되었다. 아이패드 레티나 디스플레이는 2048×1536 해상도를 제공하여 고해상도로 텍스트와 그래픽이 더욱 명확하게 표현된다.
• 아이맥과 맥북 프로 5K 디스플레이: 대화면 디바이스에서도 레티나 디스플레이가 적용되었으며, 아이맥의 경우 5120×2880 해상도를 갖춘 5K 레티나 디스플레이가 적용되어 그래픽 디자이너와 사진작가 등에게 매우 선명한 화면을 제공한다.

3. 레티나 디스플레이가 필요한 이유와 장점

• 선명도와 가독성 향상: 높은 픽셀 밀도를 통해 텍스트와 이미지의 선명도가 극대화되어 가독성이 크게 향상된다. 특히 글자의 가장자리나 작은 아이콘 등이 더 부드럽고 정확하게 표시된다.
• 실물과 유사한 시각적 경험: 레티나 디스플레이는 색상 표현이 더 정확하며, 고해상도의 이미지를 통해 실물과 가까운 시각적 경험을 제공한다. 이를 통해 사진과 동영상이 더욱 자연스럽고 생동감 있게 보인다.
• 눈의 피로 감소: 픽셀 경계가 눈에 잘 보이지 않기 때문에, 장시간 사용 시 눈의 피로를 줄여주는 효과도 있다. 특히 글을 읽거나 작은 텍스트를 볼 때 편안함을 제공한다.

4. 레티나 디스플레이의 단점

• 더 많은 자원 소모: 높은 픽셀 밀도는 그래픽 처리 장치(GPU)에 더 많은 작업을 요구하므로, 전력 소모가 증가할 수 있다.
• 파일 크기 증가: 고해상도 디스플레이에 맞춰 이미지를 제공하려면 고해상도 버전의 이미지 파일이 필요하며, 이는 앱의 파일 크기 증가로 이어질 수 있다.

---

포인트(Points, pt) ; UI 디자인에서 해상도와 관계없이 일관된 크기를 유지하기 위해 사용하는 단위

• 레티나 디스플레이에서 UI가 이전의 디스플레이와 동일한 크기를 유지하게 하려면 픽셀 크기를 두 배로 늘려야 하므로 @1x 그래픽과 함께 @2x, @3x 그래픽을 제공한다.
• 이를 위해 사용하는 개념이 포인트로, 1pt는 레티나 디스플레이 이전 기기에서의 1px을, @2x인 레티나 디스플레이에서는 2px을 뜻한다.
• 화면상의 물리적 크기를 기준으로 하는 단위로, 1pt는 레티나 디스플레이 이전 기기에서 1px에 해당한다.

1. @1x, @2x, @3x 그래픽의 필요성

• @1x는 레티나 디스플레이가 도입되기 이전의 해상도(예: iPhone 3GS 이전)에서 사용되던 그래픽 크기이다.
• @2x는 레티나 디스플레이가 처음 도입된 기기들(iPhone 4부터)에서 사용되는 해상도이다. 기존 @1x 해상도의 픽셀 밀도를 두 배로 높여 픽셀 경계가 보이지 않고 선명한 이미지를 제공한다.
• @3x는 그보다 더 높은 해상도를 가진 최신 기기들(iPhone Plus 시리즈 등)에서 사용되는 해상도로, 픽셀 밀도를 세 배로 증가시켜 고해상도 그래픽을 구현한다

2. 포인트의 적용 예시

레티나 디스플레이에서는 포인트 단위를 사용함으로써 UI 요소가 기기 해상도와 관계없이 동일한 크기로 보이도록 한다. 포인트를 기준으로 삼으면, 애플의 다양한 디바이스에서 일관된 사용자 경험을 제공할 수 있다.

• 예시: 버튼의 크기를 50pt로 지정한 경우
  • @1x 디스플레이에서는 1pt가 1px에 해당하므로, 버튼은 50px로 표시된다.
  • @2x 디스플레이에서는 1pt가 2px에 해당하므로, 버튼은 100px로 표시된다.
  • @3x 디스플레이에서는 1pt가 3px에 해당하므로, 버튼은 150px로 표시된다.

이처럼 픽셀 수가 증가하더라도 버튼의 물리적 크기는 동일하게 유지된다.

https://developer.apple.com/design/human-interface-guidelines/layout#Specifications

Layout | Apple Developer Documentation

iOS 해상도

1. iOS의 해상도 체계

• **iOS 기기(아이폰, 아이패드)**는 해상도 설정에서 비교적 일관된 체계를 유지한다. 애플은 소수의 기기 라인업을 운영하기 때문에 **세 가지 주요 해상도(@1x, @2x, @3x)**로 구분하여 관리한다. 이는 디자이너와 개발자가 다양한 해상도를 신경 쓸 필요 없이 일관된 방식으로 작업할 수 있도록 돕는다.

2. 해상도의 배율 (@1x, @2x, @3x)

• 애플은 초기 스마트폰의 해상도인 165ppi를 기준으로 하여 이를 1x 해상도로 정의하였다. 이후 해상도가 높은 디스플레이가 등장하면서, 화면의 선명도를 높이기 위해 2배 해상도(@2x)와 3배 해상도(@3x)라는 배율을 추가하였다.
• @1x는 초기 해상도 기준으로, @2x는 픽셀 밀도가 두 배로 늘어난 경우, @3x는 세 배로 늘어난 경우를 의미한다. 예를 들어, 같은 크기의 아이콘이라도 @1x에서는 1픽셀로 구성되지만, @2x에서는 2픽셀, @3x에서는 3픽셀로 구성되어 더 선명하게 표현된다.

3. 다운샘플링 (Downsampling)

• 보급형 디바이스에는 고해상도를 적용할 때 화면의 성능이나 밝기, 전력 소모를 고려하여 다운샘플링이 이루어진다. 다운샘플링은 고해상도 이미지를 낮은 해상도로 변환하여 기기 성능을 최적화하는 과정이다.
• 이는 고해상도가 모든 기기에서 최적의 결과를 보장하지 않기 때문으로, 디자이너는 이를 염두에 두고 세 가지 해상도(@1x, @2x, @3x)를 준비하면 된다.

---

dpi와 ppi

화면 해상도와 이미지 품질을 나타내는 중요한 단위로, 각각 인쇄와 디지털 디스플레이에서 다르게 사용

dpi(dots per inch):

• DPI는 인치당 점의 수를 뜻하며, 주로 인쇄물의 해상도를 측정할 때 사용된다.
• 잉크 방울의 수를 기준으로 인쇄 매체의 선명도를 결정하는 단위이다. 높은 DPI는 더 많은 잉크 점을 포함하므로 인쇄물이 더 선명하고 디테일하게 표현된다.
• 예시: 일반적인 인쇄물은 보통 300dpi로 출력된다. 이 경우, 1인치에 300개의 잉크 점이 포함되어 매우 높은 해상도의 인쇄 결과물을 얻을 수 있다. 반면, 72dpi 정도의 낮은 해상도로 인쇄하면 품질이 떨어져 흐릿하게 보일 수 있다.

ppi(pixel per inch): 모니터 화면의 인치당 표시되는 픽셀 수.

• PPI는 인치당 픽셀 수를 의미하며, 주로 디지털 디스플레이의 해상도를 나타내는 단위이다.
• 모니터 화면이나 스마트폰 화면의 경우, 1인치에 얼마나 많은 픽셀이 포함되는지가 화면의 선명도에 큰 영향을 미친다. 더 많은 픽셀이 포함될수록 화면은 더 선명하게 보인다.
• 예시: 1920×1080 해상도를 가진 24인치 모니터가 91PPI를 제공한다고 하면, 1인치당 91개의 픽셀이 포함되어 있다는 뜻이다. 고해상도 기기에서는 PPI가 300 이상으로 올라가면서 매우 선명한 화면을 제공하며, 애플의 레티나 디스플레이는 300PPI 이상을 제공해 일반적인 시청 거리에서 픽셀을 구분하기 어려울 정도의 선명도를 자랑한다.

---

안드로이드 기기의 해상도와 밀도(dpi, ppi) 체계

1. 안드로이드 해상도 밀도(DPI) 체계

• 안드로이드는 초기 스마트폰의 해상도 160dpi를 **기준(MDPI)**으로 설정하고, 이를 1x로 삼는다.
• 이후 다양한 기기의 해상도와 화면 크기에 맞춰 DPI 단위로 밀도 구분을 추가하여, 각 기기에서 일관된 UI 크기를 유지할 수 있도록 배율을 설정했다.

2. 안드로이드 밀도 분류와 배율

• LDPI (Low Density per Inch): 120dpi, 기준의 0.75배 비율로, 해상도는 240×320이다.
• MDPI (Medium Density per Inch): 160dpi로, 안드로이드 기기의 **기준 밀도(1x)**이며 해상도는 320×480이다.
• HDPI (High Density per Inch): 240dpi로, 1.5배 비율에 해당하며 해상도는 480×800이다.
• XHDPI (Extra High Density per Inch): 320dpi로, 2배 비율이며 해상도는 720×1280이다.
• XXHDPI (Extra Extra High Density per Inch): 480dpi로, 3배 비율이며 해상도는 1080×1920이다.
• XXXHDPI (Extra Extra Extra High Density per Inch): 640dpi로, 4배 비율에 해당하며 해상도는 1440×2560이다.

3. 안드로이드의 해상도 배율 체계

안드로이드는 다양한 해상도에 대응하기 위해 각각의 해상도에 맞는 배율(@1x, @1.5x, @2x, @3x, @4x)을 제공한다. 이를 통해 앱 개발자는 각 해상도에 맞는 그래픽 자원을 준비하여 기기별로 일관된 사용자 경험을 제공할 수 있다.

4. 8px 그리드 시스템의 사용

• 8px 그리드 시스템은 UI 디자인에서 흔히 사용되는 레이아웃 시스템으로, UI 요소 간의 간격과 크기를 8px 단위로 설정하여 정렬한다.
• 8px 그리드를 사용하면 화면이 깔끔하게 정렬되며, 반응형 레이아웃을 구현할 때도 효율적이다. 각 UI 요소가 8의 배수로 맞춰져 있기 때문에 다양한 해상도와 배율에서 깔끔하게 배치된다.
• 예시: 버튼의 간격이나 패딩을 8px 단위로 설정하면, 안드로이드와 iOS의 모든 밀도에서 일관된 시각적 균형을 유지할 수 있다. 8px 단위로 설계된 UI는 가독성과 조화가 높아지고, 디자인과 개발 단계에서 일관성을 유지하기가 수월해진다.
• 안드로이드에서는 다양한 DPI(dots per inch)와 해상도에 맞추기 위해 LDPI, MDPI, HDPI, XHDPI, XXHDPI와 같은 밀도 카테고리를 사용하며, 이 중 HDPI(1.5x 배율)가 포함되어 있다. 1.5배율에서는 4px 그리드를 사용할 경우, 배율에 의해 정수 값으로 나누어 떨어지지 않는 경우가 발생할 수 있다. 예를 들어, 4px의 간격이 1.5배율로 확대되면 6px가 되지만, 이보다 작은 2px나 3px 단위로는 균형이 맞지 않을 수 있다. 이는 디스플레이에서 픽셀의 불균형한 배치로 이어져 요소가 흐릿하거나 왜곡되어 보일 수 있는 문제를 초래한다.안드로이드의 1.5배율과 픽셀 정렬 문제
• 8px 그리드는 1.5배율, 2배율, 3배율, 4배율 등 모든 주요 배율에서 정수 값으로 쉽게 변환된다. 예를 들어:
  • 1x에서는 8px
  • 1.5x에서는 12px
  • 2x에서는 16px
  • 3x에서는 24px
  • 4x에서는 32px로 변환된다.

이러한 정수 배율은 디자인의 일관성을 보장하며, 디스플레이에서 요소들이 명확하고 선명하게 표현되도록 돕는다.

 

dp(dpi) (density-independent pixels)

안드로이드 UI 디자인에서 해상도와 밀도에 독립적인 단위로, 다양한 밀도(dpi)를 가진 화면에서도 일관된 크기로 UI 요소를 표시할 수 있도록 설계된 단위이다.

• 고밀도 화면은 저밀도 화면보다 1인치에 들어가는 픽셀 수가 많으므로 픽셀 크기가 동일한 UI 요소는 저밀도 화면에서는 크게, 고밀도 화면에서는 작게 보인다.
• 이를 해결하기 위해 픽셀의 개수를 다르게 해 밀도에 차이를 두는 방식을 사용하는데, 이를 밀도의 독립성이라 하며, 밀도의 단위는 dp이다.
• 이 원리를 이용해 해상도가 다른 화면에서도 UI 요소의 크기를 균일하게 표시할 수 있다.

1. 밀도의 차이와 문제점

• 고밀도 화면은 저밀도 화면보다 1인치당 픽셀 수(dpi)가 많다. 이로 인해, 동일한 UI 요소가 고밀도 화면에서는 작게, 저밀도 화면에서는 크게 보이는 문제가 발생할 수 있다.
• 예를 들어, **160dpi 화면(MDPI)**에서는 1인치에 160개의 픽셀이 포함되어 있지만, **320dpi 화면(XHDPI)**에서는 1인치에 320개의 픽셀이 들어간다. 이로 인해 픽셀 수가 동일한 UI 요소가 저밀도 화면에서는 크게, 고밀도 화면에서는 작게 표시된다.

2. 밀도의 독립성과 dp의 역할

• 밀도의 독립성을 유지하기 위해, 안드로이드는 화면의 밀도에 따라 픽셀 수를 다르게 설정하여, 모든 해상도에서 동일한 물리적 크기의 UI 요소가 표시되도록 한다.
• dp(density-independent pixels)는 이런 밀도 독립성을 위한 단위로, 기본 밀도인 160dpi(MDPI)에서 1dp는 1px에 해당한다. 그 외의 해상도에서는 밀도에 맞춰 픽셀 수가 자동으로 조정된다.
  • 예를 들어, XHDPI(320dpi)에서는 1dp가 2px에 해당하므로, 동일한 크기의 UI 요소가 2배로 표시되어 고밀도 화면에서도 크기가 일관되게 보인다.

dp 단위의 예시 :  버튼의 크기를 50dp로 지정할 경우

• MDPI (160dpi)에서는 50dp = 50px
• HDPI (240dpi)에서는 50dp = 75px
• XHDPI (320dpi)에서는 50dp = 100px
• XXHDPI (480dpi)에서는 50dp = 150px

안드로이드 개발자 리소스

https://developer.android.com/training/multiscreen/screendensities?hl=ko#dips-pels

다양한 픽셀 밀도 지원  |  Android Developers

---

Sp (scale-independent pixels)

안드로이드 UI 디자인에서 텍스트 크기를 지정하기 위해 사용하는 단위이다. sp는 특히 사용자가 설정한 글꼴 크기 조정을 반영하여, 텍스트의 크기를 동적으로 변경할 수 있도록 한다.

1. dp와 sp의 차이점

• dp (density-independent pixels)는 화면 밀도에 독립적인 픽셀 단위로, 다양한 해상도에서도 일정한 비율로 UI 요소의 크기를 유지하기 위해 사용된다. 그러나 dp는 사용자 설정에 따른 글꼴 크기 조정을 반영하지 않는다.
• sp는 텍스트 크기를 위한 단위로, 사용자의 설정에 따라 크기를 조정할 수 있는 유연성을 제공한다. 사용자가 글꼴 크기를 크게 설정한 경우 sp 단위를 사용하면 해당 설정에 맞춰 텍스트가 커지거나 작아진다.
• 일반적으로 sp의 기본값은 dp의 기본값과 동일하다.

2. sp의 사용 사례

• 일반적으로 텍스트 크기를 설정할 때 sp를 사용하여, 접근성 설정에 따라 크기가 변경될 수 있도록 한다. 이는 가독성을 높이고 사용자 경험을 개선하는 데 도움이 된다.
• 예를 들어, 작은 텍스트를 보는 데 어려움이 있는 사용자가 기기의 접근성 설정에서 글꼴 크기를 확대할 수 있도록 지원하며, 앱이 이에 맞춰 텍스트 크기를 자동으로 조정하게 된다.

3. dp와 sp 사용 가이드라인

• 텍스트 요소에는 sp를 사용하여, 사용자 설정에 따라 동적으로 크기를 조절할 수 있도록 한다.
• UI의 다른 요소(버튼, 아이콘, 레이아웃 등)에는 dp를 사용하여, 해상도와 관계없이 일정한 비율로 크기를 유지하도록 한다.

4. 예시

• 만약 텍스트의 크기를 16sp로 설정하면, 사용자가 글꼴 크기를 크게 설정했을 때 해당 텍스트도 커지며 접근성을 높일 수 있다.
• 반면, 동일한 크기의 버튼이나 아이콘은 16dp로 설정하여 화면 밀도에 관계없이 일정한 크기를 유지할 수 있다.

정리하면, sp는 텍스트 크기를 조절할 때 사용하며, 사용자의 글꼴 설정을 반영하여 크기를 자동으로 조정할 수 있다. 이는 접근성 및 사용자 맞춤 설정을 고려한 텍스트 크기 조절을 가능하게 한다.

---

비트맵(Bitmap) 이미지와 벡터(Vector)

구분	비트맵(Bitmap)	벡터(Vector)
구성 방식	픽셀(Pixel)로 구성	점, 선, 면 등의 기하학적 수학 계산으로 구성
특징	픽셀 단위로 이미지를 표현하므로, 각 픽셀의 색상 값이 이미지 전체를 구성	기하학적 수식으로 이미지를 표현하므로 확대/축소 시에도 품질 손실이 없음
포맷 예시	웹용 이미지 형식: GIF, JPG, PNG	벡터 이미지 형식: AI, EPS, SVG
확대 시 품질	확대 시 이미지가 깨짐 (계단현상 발생: Aliasing)	확대해도 이미지가 깨지지 않음
사용 예시	사진이나 복잡한 이미지 표현에 적합	로고, 아이콘, 일러스트레이션 등 확대/축소가 필요한 그래픽에 적합
소프트웨어	어도비 포토샵(Photoshop)	어도비 일러스트레이터(Illustrator), 어도비 XD
장점	복잡한 색상과 디테일한 이미지 표현에 유리 (예: 사진)	해상도에 독립적이며, 파일 크기가 상대적으로 작음
단점	확대 시 해상도가 낮아지며, 이미지가 깨질 수 있음	사진과 같은 복잡한 이미지 표현에 부적합하며, 벡터로 변환하기 어려운 이미지도 존재함
활용 예시	웹 이미지, 사진	로고, 아이콘, UI 요소 등 다양한 해상도의 디바이스에서 동일한 품질로 표현해야 하는 경우

요약: 비트맵은 사진과 같이 복잡한 이미지에 적합하며, 픽셀 단위로 구성되어 있어 확대 시 품질이 저하된다. 반면 벡터는 수학적 계산에 기반하여 확대해도 품질이 유지되므로, 로고와 아이콘처럼 다양한 해상도에서 사용되는 그래픽에 유리하다.

---

https://gs.statcounter.com/screen-resolution-stats

Screen Resolution Stats Worldwide | Statcounter Global Stats

---