물리적 vs 논리적 해상도, 그리고 렌더링과 샘플링
기획자의 디자이너 이해하기(2)
디자이너를 이해하기 위한 첫번째 개념으로, 픽셀과 벡터의 차이, PPI, PT, DPI, DT에 대해 알아보았다. 이번에는 물리적 해상도와 논리적 해상도의 차이를 이해함으로서, 디자이너가 일하는 방식에 대해 좀 더 자세하게 알아보자.
지난 글 : 픽셀 vs 벡터, PPI, DPI, PT, DT의 개념
물리적 해상도 vs 논리적 해상도
디지털 화면에서 논리적 해상도와 물리적 해상도는 디스플레이 기술에서 중요한 개념이다. 특히 레티나 디스플레이나 고해상도 디바이스가 등장하면서 이 두 가지 개념을 이해하는 것이 더욱 중요해졌다.
물리적 해상도 (Physical Resolution)
물리적 해상도는 디스플레이의 실제 픽셀 수를 의미한다. 예를 들어, 1920x1080 해상도의 화면이라면, 가로에 1920개의 픽셀, 세로에 1080개의 픽셀이 존재한다는 뜻이다. 이는 디스플레이에서 실제 존재하는 픽셀의 개수이므로, 물리적 해상도는 픽셀의 개수에 따라 화면이 얼마나 선명하게 보일지를 결정하는 주요 요인이다.
물리적 해상도는 PPI(Pixels Per Inch)와 관련이 깊다. 즉, PPI가 높을수록 물리적 해상도가 더 높아지고, 같은 크기의 화면에서 더 많은 픽셀을 배치할 수 있어 이미지나 텍스트가 더 선명하게 보인다.
논리적 해상도 (Logical Resolution)
논리적 해상도는 소프트웨어가 디스플레이에서 인식하는 가상의 해상도다. 물리적 해상도와 다르게, 논리적 해상도는 디바이스의 화면 크기나 PPI와는 무관하게 시스템이나 애플리케이션이 화면을 다루는 방식을 정의한다. 이는 특히 고해상도 디스플레이에서 중요한 역할을 한다.
예를 들어, 애플의 레티나 디스플레이는 물리적 해상도는 매우 높지만, 논리적 해상도는 그 절반으로 설정된다. 만약 iPhone 화면의 물리적 해상도가 2560x1440이라면, 논리적 해상도는 1280x720으로 처리될 수 있다. 이렇게 하면 애플리케이션이 고해상도 디스플레이에서도 동일한 UI 크기와 인터페이스 배율로 보일 수 있다.
논리적 해상도는 UI 요소나 텍스트 크기를 유지하면서 고해상도 디스플레이에서도 일관된 사용자 경험을 제공하기 위해 사용된다. 논리적 해상도가 설정된 덕분에, 같은 UI가 물리적 해상도가 다른 디바이스에서도 비슷한 크기로 표시될 수 있다.
디자이너는 논리적 해상도를 기준으로 디자인한다.(지난 글에서 언급했던 PT를 기준으로 작업) 이를 통해 사용자는 화면 크기에 상관없이 선명하고 세밀한 그래픽을 경험할 수 있으며, 픽셀 밀도에 관계없이 일관된 디자인을 제공받는다. 논리적 해상도는 일종의 “가상 픽셀” 단위로 작동하여, 다양한 해상도의 디바이스에서도 일관된 사용자 경험을 유지하도록 돕는다.
렌더링, 그리고 업샘플링과 다운샘플링
그렇다면, 논리적 해상도 기준으로 작업한 산출물은 어떤 과정을 통해 실제 디바이스에서 어떻게 디스플레이될까?
렌더링 (Redering)
렌더링은 논리적 해상도로 작업한 이미지를 디바이스의 물리적 해상도에 맞게 변환하여 화면에 출력하는 과정이다. 예를 들어, 물리적 해상도가 높은 디바이스에서는 논리적 해상도로 디자인된 이미지가 부드럽고 선명하게 보이도록 각 논리적 픽셀이 여러 물리적 픽셀에 매핑된다.
일반적으로 고해상도 디바이스에서는 논리적 해상도가 2배, 3배로 확대되어 물리적 해상도에 맞춰 출력되는데, 그래픽 카드와 소프트웨어는 이 차이를 조정해 최적의 품질로 이미지를 표현한다.
최근 디바이스들은 다양한 화면 크기를 가지며, 아이폰의 경우 비교적 종류가 적은 편이지만, 안드로이드 휴대폰은 제조사마다 화면 크기가 제각각이다. 이 때문에 논리적 해상도로 디자인된 결과물이 렌더링을 통해 물리적 해상도로 조정되더라도, 모든 디바이스에 동일한 비율로 이미지를 표현하기 어렵다. 이를 해결하기 위해 샘플링 과정을 거쳐 화면 크기에 맞춰 이미지를 최적화한다.
업샘플링 (Upsampling)과 다운샘플링 (Downsampling)
업샘플링은 낮은 해상도의 이미지를 더 높은 해상도로 변환하는 과정이고, 다운샘플링은 높은 해상도의 이미지를 더 낮은 해상도로 축소하는 과정이다. 렌더링된 해상도와 실제 디바이스에 표시되는 해상도를 비교할 때, 두 해상도 사이에 픽셀 수 차이가 발생하면 샘플링 과정이 필요하다.
렌더링된 픽셀 수가 실제 디바이스에 표현되는 픽셀 수보다 적으면 업샘플링이 진행되고, 반대로 디바이스에 비해 렌더링된 픽셀 수가 많으면 다운샘플링이 이루어진다. 업샘플링은 이미지를 확대하면서 추가된 픽셀들을 주변 색상이나 밝기에 맞게 계산해 채우거나 필터링을 통해 자연스럽게 보정한다. 다운샘플링은 고해상도의 이미지를 축소하면서 불필요한 픽셀을 제거하고, 필터링 기법을 통해 품질을 유지한다.
이 과정은 이미지 크기를 조정하여 더 많거나 적은 픽셀로 표현하는 작업이며, 해상도에 맞는 보간 작업이 중심이 되어, 최종적으로 화면에 적합한 크기와 품질로 이미지를 표시하는 기술이라는 점에서 렌더링과 차이가 있다.
PT 기준으로 작업한 결과물이 렌더링과 샘플링을 통해 디바이스에 최적화되어 표현된다(출처 : paintcodeapp.com)디자이너는 PT 단위를 사용하여 논리적 해상도를 기준으로 디자인 작업을 진행하고, 이미지 에셋을 개발자에게 전달할 때 기준 디바이스에 맞춰 2배, 3배 크기로 확대하여 제공한다. (이 과정은 피그마와 같은 디자인 툴의도움을 받는다.) 이후, 개발자는 이 디자인을 바탕으로 HTML과 CSS를 활용해 코드를 작성한다. 디바이스는 코드를 참조하여 화면을 구성하고(물리적 해상도), 그래픽 카드와 소프트웨어가 협력하여 렌더링과 샘플링 과정을 거쳐 최종적으로 화면에 결과물이 출력된다.
* 참조 : 디바이스 해상도를 알려주는 사이트
https://www.ios-resolution.com/
https://viewportsizer.com/devices/
세 줄 정리
디자이너는 논리적 해상도를 기준으로 작업한다
논리적 해상도는 렌더링을 통해 물리적 해상도로 변환된다
사이즈가 각기 다른 디바이스에 맞춰 픽셀이 조정되는 과정을 샘플링이라 한다
