픽셀 vs 벡터, PPI, DPI, PT, DT의 개념
기획자의 디자이너 이해하기(1)
기획자는 프로덕트나 프로젝트를 이끌어가는 중요한 역할을 맡고 있다. 그래서 비즈니스, UX, 기술 등 다양한 분야에 대한 지식이 필요하다. 그중에서도 디자인에 대한 이해는 특히 중요하다. 디자인은 단순한 시각적 요소를 넘어서, 사용자 경험(UX)과 의도, 메시지를 전달하는 핵심 수단이기 때문이다. 기획자는 디자이너와 협업할 때 프로젝트의 방향을 명확히 제시하고, 프로젝트 진행 중에 지속적으로 커뮤니케이션 하여야 하며, 디자이너가 창의력을 발휘할 수 있는 환경을 만들어야 한다. 이를 위해서는 디자인 용어와 프로세스, 그리고 디자이너의 작업 방식을 이해하는 것이 필수적이다.
디자인에 대한 이해가 부족하면 디자이너와의 소통에서 오해가 생기기 쉽고, 그 결과 프로젝트가 원하는 방향에서 벗어날 수 있다. 반면, 디자인의 기본 원리와 용어에 익숙하다면 디자이너와의 대화가 더 원활해지고, 더 나은 결과물을 만들어낼 수 있다. 결국, 기획자가 디자인을 이해하는 것은 단순한 지식 이상의 의미가 있으며, 프로젝트의 성공에 결정적인 역할을 한다.
픽셀(Pixel) vs 벡터(Vector)
픽셀과 벡터는 이미지를 표현하는 두 가지 대표적인 그래픽 형식이다.
Vector vs Raster픽셀(Pixel)
픽셀은 디지털 이미지나 화면에서 가장 작은 단위의 점을 의미한다. 각 픽셀은 특정한 색상을 가지며, 이 작은 점들이 모여 하나의 이미지를 형성한다.(픽셀로 이루어진 이미지를 Raster Image 라고 한다) 화면 해상도와 디바이스에 따라 픽셀의 크기가 달라지기 때문에, 동일한 픽셀 수라도 화면 크기에 따라 이미지가 다르게 보일 수 있다. 픽셀 기반 이미지는 섬세한 음영, 그라데이션, 질감 등을 표현하는 데 탁월해 사진이나 복잡한 그래픽 작업에 적합하다. 그러나 파일 크기가 크며, 이미지를 확대하면 픽셀화(눈에 띄는 점들이 보이는 현상)로 인해 왜곡이 발생할 수 있다. 그래픽 디자인에서 주로 사용하는 파일 형식은 .psd, .jpg, .png 등이 있으며, 포토샵이 대표적인 픽셀 이미지 작업 도구다.
벡터(Vector)
반면, 벡터는 수학적 계산을 통해 점과 선으로 이루어진 경로를 기반으로 이미지를 표현한다. 벡터 이미지는 해상도에 상관없이 선명하게 유지되기 때문에, 아무리 확대해도 왜곡되지 않는다. 이 덕분에 로고, 아이콘, 인쇄물과 같이 다양한 곳에 사용되고, 유연한 크기로 출력되는 작업에 적합하다. 주료 .ai, .svg, .pdf와 같은 형식으로 저장된다. 일러스트레이터와 피그마가 벡터 이미지를 다루는 대표적인 도구다.
PPI 와 PT
PPI (Pixels Per Inch)
ppi는 1인치당 들어간 가로, 세로당 픽셀 수를 의미한다(출처 : https://www.giffgaff.com/blog/pixel-density-how-to-calculatppi는 영문 약자대로, 물리적으로 1인치당 몇 개의 픽셀(가로, 세로당)이 들어가는지를 나타내는 단위이다. 쉽게 말해, ppi는 해상도의 밀도를 측정하는 기준이다. ppi가 높을수록 화면에 표현되는 이미지가 더 선명하고, 디테일이 풍부해진다. 낮은 ppi에서는 개별 픽셀이 눈에 띄는 반면, 높은 ppi에서는 픽셀을 거의 구분할 수 없다.
TV와 스마트폰을 예로 들어보자면, 스마트폰은 사용자와의 거리가 매우 가까운 반면, TV는 상대적으로 먼 거리에서 시청된다. 가까이에서 화면을 볼 때는 픽셀이 더 쉽게 눈에 띌 수 있기 때문에, 스마트폰은 더 높은 PPI를 필요로 하지만, TV는 멀리서 보기 때문에 ppi가 낮아도 개별 픽셀이 잘 구분되지 않고, 충분히 선명하게 보일 수 있다. 또한, 스마트폰은 작은 화면에서 많은 정보를 표현해야 하므로, 높은 ppi가 필요하다. 반면, TV는 화면이 크기 때문에 동일한 해상도의 이미지를 표시할 때 ppi가 낮아도 시청 품질에 큰 영향을 미치지 않는다. 예를 들어, 4K 해상도의 TV는 매우 큰 화면에서도 상대적으로 낮은 ppi로도 충분한 시청 경험을 제공할 수 있다.
레티나 디스플레이(Retina Display)의 등장
레티나 디스플레이는 2010년 애플이 아이폰4에 도입하면서 등장한 개념으로, 기존의 디지털 기기의 디스플레이보다 높은 픽셀 밀도를 적용해 개별 픽셀이 눈에 보이지 않을 정도로 선명한 화면을 제공하였다. 전작 아이폰3GS에 비해, 인치당 픽셀 수를 4배(가로*세로 해상도 2배)로 높였고, 일반적인 사용자의 스마트폰 사용 거리상 픽셀 단위가 육안으로 쉽게 구분되지 않도록 ppi를 높인 것이 특징이다. (당시 아이폰4의 해상도는 326ppi)
이는 스마트폰 디스플레이의 해상도를 혁신적으로 높였고, 디지털 디자인 작업에 새로운 기준을 제시했다. 화면에 표현하는 픽셀의 수가 증가함에 따라, 새로운 스마트폰에서 같은 크기의 화면에서 표현할 수 있는 픽셀수가 가로, 세로로 2배씩 증가했으니, 작업하는 픽셀수의 기준도 가로, 세로로 2배로 높여서 작업을 해야하는 상황이 생긴 것이다. 여기서 PT 라는 개념이 적용되는데, 미리 설명하자면 PT는 ppi가 2배, 3배로 커져도 PT의 단위는 변하지 않는다.
레티나 디스플레이 이전과 이후(출처 : https://medium.com/@peternowell/pixel-density-demystified-a4db63ba2922)*참고로, 레티나 디스플레이는 인간의 망막이라는 'Retina'를 용어로 사용하면서, 스마트폰의 디스플레이를 고해상도로 전환한 시기에 애플이 사용한 대표적인 마케팅 용어이며, 고해상도의 스마트폰이 일반화된 현재는 큰 의미가 없는 개념이다. 참고로, 최근에는 애플보다 안드로이드 기기에서 오히려 더 높은 ppi에 도전하고 있다.
PT (Point)
포인트(PT)는 주로 글꼴 크기를 정의하는 데 사용되는 단위로, 인쇄물에서부터 사용되었다. 디지털 환경에서는 폰트의 크기뿐만 아니라 요소의 크기 단위를 정의하는 데에도 쓰인다. 인쇄물에서 1pt는 1/72인치로 정의되는데, 디지털 환경에서는 1px/72ppi = 1pt 로 정의가 된다. 따라서 144ppi에서는 2px이 1pt, 288ppi에서는 4px이 1pt 가 되는 것이다. 이를 조금 더 쉽게 설명해보자면, 1pt 기준으로 작업을 한 뒤, 픽셀수를 2배, 4배로 높여서 추출을 하면(이는 소프트웨어가 대신 해준다), 여러 해상도에 대응을 할 수 있게 되는 것이다.
따라서 이후 출시된 디자인 툴은 화면 해상도가 높아져도 동일한 크기의 텍스트나 UI 요소가 동일하게 보이도록 pt 단위를 사용하게 되었다. pt는 디바이스의 해상도에 상관없이 일관된 크기를 유지할 수 있는 단위로, 다양한 디스플레이에서 디자인을 일관되게 보여주기 위해 널리 활용된다.
DPI (Dots Per Inch), DP (Density-Independent Pixels)
애플이 출시한 기기에서 ppi와 PT의 개념을 사용한다면, 안드로이드 기기에서는 dpi와 dp를 사용한다.(사실상 같은 개념이다) dpi는 주로 인쇄물의 해상도를 측정하는 단위로, 인치당 몇 개의 점을 찍을 수 있는지를 나타내는데, 인쇄된 이미지나 텍스트의 품질을 결정하는 주요 요소다. 안드로이드 기기의 경우, 제조사가 여러 곳이기 때문에 해상도가 굉장히 다양한데, 서로 다른 체계가 있음을 ppi가 아닌 dpi를 사용하고, pt와 유사한 의미로 dp로 정의하고 있다.
디자이너들은 각기 다른 해상도와 디바이스 환경에서 일관된 사용자 경험을 제공하기 위해 PT와 DP 같은 단위를 활용해 작업을 진행한다. 이 단위들은 다양한 해상도에서도 텍스트와 UI 요소의 크기가 균일하게 유지되도록 도와주며, 이를 통해 다양한 디바이스에서 일관된 디자인을 구현할 수 있게 해준다.
디자인에 대한 이해는 단순히 디자이너와의 원활한 소통을 돕는 것을 넘어, 프로젝트의 전반적인 품질과 방향성을 결정하는 중요한 요소다. 기획자는 디자인의 기본 개념과 원리를 이해하고, 이를 바탕으로 디자이너와 협력할 수 있어야만 성공적인 결과물을 만들어낼 수 있다. 디자인에 대한 깊이 있는 이해는 기획자가 프로젝트를 더 효과적으로 이끌고, 최종 목표를 달성하는 데 필수적인 도구가 된다.
세 줄 정리
픽셀은 섬세하고, 벡터는 확장성이 높다.
PPI가 해상도에 있어서 결정적인 역할을 한다.
해상도가 다양해져도, PT 단위를 통해 디자이너는 한 번만 작업을 해도 된다.
