brunch

You can make anything
by writing

C.S.Lewis

by maus x maus May 03. 2022

픽셀 X Pixel

디자이너 기획자 개발자 등 많은 사람들과 이야기 하면서 픽셀, 벡터 그리고 배수에 대해 이야기할때 정확하게 이해하는 사람이 그리 많지 않다는걸 알았습니다.그러면서 저 역시 작업자와 협업할 때 픽셀과 벡터를 나름 논리적으로 설명하려해도 본인 스스로 개운치 않다는걸 매번 느꼈습니다.그래서 나름 글로서 이해하기 쉽게 정리해 보았습니다.

픽셀은 모든 디지털 디스플레이가 표현하는 최소 단위입니다.

픽셀은 센티미터, 인치와 달리 절대 규격이 아닌 디스플레이 제조사 마다 각 크기가 다 다릅니다.
가끔 길을 걷다보면 길거리나 버스정류장에 있는 디지털 보드를 보면 픽셀이 크게 보이는 경우가 있을겁니다. 혹은 옛날 피쳐폰를 보면 알 수 있을겁니다.

화면에 보이는 조그만 사각형 하나가 1픽셀.

그럼 픽셀이 절대 크기(사이즈)가 아니라고 하는데 그럼 어떻게 그 크기를 책정하나요? 라고
생각할 겁니다.

픽셀은 PPI라는 규격을 사용합니다.
PPI는 Pixel Per Inch 라고 하며 1인치(2.54 cm) 공간에 들어가는 픽셀 개수를 말합니다.
그뜻은 PPI 수치가 높을수록 픽셀개수가 많아서 표현할 수 있는 디테일이 높다는 뜻이기도 합니다.

참고 https://en.wikipedia.org/wiki/Retina_display

지금은 디스플레이 기술이 좋아져 PPI가 지속적으로 높아지고 있습니다만, 표준 웹 해상도를 이야기할 때는 아직도 72 PPI 기준으로 합니다.

모바일은 조금 상황이 달랐는데 2010년 6월에 스티브잡스가 아이폰 4를 발표하면서 레티나 디스플레이를 소개합니다. 그러면서 엄청 선명한 그래픽 경험이 등장합니다.

*레티나 디스플레이는 기존 모바일 디스플레이에서 픽셀개수가 무려 2배나 많은 픽셀을 탑제한 고밀도 디스플레이로서 애플이 만든 하나의 마케팅 전략이라고 보시면 됩니다.

물리적 크기는 같으나 더 많은 픽셀이 들어감으로 더욱 정교하고 선명하게 표현가능해짐.

예시와 같이 서로 크기는 같지만 픽셀 개수가 많아지니 더욱 선명하고 정교한 그래픽 작업이 가능해 졌습니다.

예를 들어 아이폰4와 3GS의 같이 경우 픽셀 밀도가 2배수로 늘어나니 그냥 2배수로 작업하면 되겠지라고 하지만

가로 세로 계산을 해보면 기존 1픽셀이 4픽셀로 표현됩니다.

그리고 앞으로 PPI 가 높은 디바이스가 계속 나올거고 그래픽은 더욱 정교해 지는 반면 픽셀 기반의 비트맵 그래픽 용량은 더욱 커질겁니다. 그렇다고 하면 예전 스큐모피즘의 문제 중 하나였던 파일사이즈 문제가 생길것이고 앱이 전체적으로 무거워 지게됩니다.

특히 사진 이미지는 최소 1000px 이상의 것들만 사용될수도 있고 아이콘도 어느 시점이(4~5배수) 오면 실제 픽셀 크기는 120px 이상으로 커져야 합니다.

현제 아이폰의 경우 3배수까지 나왔지만 갤럭시 기종의 이미 경우 4배수이고 앞으로는 5배수 6배수가 될 것입니다. 그래서 혹 아이콘이나 비주얼 에셋 등을 비트맵으로 작업한다 가정하면 엄청난 크기와 용량이 될거고 과거 스큐모피즘의 문제중 하나인 파일 용량이 이슈가 다시 올수 있다고 봅니다.

SVG같은 벡터포멧은 비트맵 그래픽 보다 자유롭지 않나요? SVG는 코드 기반의 그래픽이며 그 뜻은 사용자가 화면 줌인을 하거나 그래픽 자체를 스케일업을 할 때 코드 값을 계산해서 실시간으로 새로 드로잉(렌더링)해주게 됩니다.

그리고 작업하다 보면 소숫점(sub-pixel)이 나오는 경우가 종종있는데 그런 경우엔 어떻게 해야하나요?

첨에 얘기한데로 디스플레이가 표현하는 최소한의 단위는 1픽셀이고 벡터 그래픽 또한 결국 픽셀로 렌더링되기 때문에 만약 소숫점의 크기나 위치로 작업이 되는 경우 강제로 엔티얼라이징을 만들게 됩니다.
쉽게 말해 엔티얼라이징은 계단현상을 자연스럽게 보여주는 기법입니다.

모니터는 소숫점을 표현하지 못하기 때문에 소숫점이 발생하면 이렇게 앤티얼라이징을 자동으로 만들어 준다.

요즘은 PPI 수치가 높은 디지털 단말기가 많아서 소숫점을 크게 신경쓰지 않아도 되지만 웹 기반의 아이콘 같은 경우 최대한 소숫점을 피하는게 좋습니다. 자세히 보면 선명함의 차이가 보이지만 사실 크게 신경쓰지 않아도 됩니다만 픽셀에 맞춰 작업하는 습관을 들이는것이 좋습니다. (뭐 어쩌라는거지?)

곡선이나 대각선 같은 경우엔 앤티얼라이징이 발생하기 때문에 어쩔수 없지만 최대한 픽셀 그리드에 맞게 그리는것을 추천합니다.

그런데 1px 크기의 라인이나 도형을 회전시키면 실제 픽셀 그리드에 맞춰진 라인보다 엷게 보이게 됩니다. 그래서 회전값이 적용된 라인을 그리는 경우에 따라 x 1.5 정도로 스트로크 두께를 조정해 주는것을 추천합니다.