brunch

라이킷 37 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 맥가 Nov 24. 2020

이미지 깨짐을 최소화하기

픽셀과 해상도 기초 개념 쉽게 알아보기

"이미지 깨지는데요? 포토샵에선 안 그랬는데... 뭔가 문제일까요?"

거짓말 조금 보태서 한 천 번 가까이 들었던 질문 같습니다. 그간 실무를 지내며 말이죠. 이해는 됩니다. 그도 그럴 것이 학교나 학원 등의 전문 교육 기관에서 픽셀이나 해상도의 개념을 확실하게 잡아주지 못하거든요. 워낙 복잡하고 어려운 부분인지라, 교육받는 전원을 이해시키고 진도를 나가는데 많은 무리가 따릅니다. 보통의 경우, "웹용 이미지는 72 ppi, 인쇄용은 300 ppi 이상에서 작업한다"까지만 알려주고 넘어갑니다. 저 또한 사무실내 후배들에게 개념을 설명하는데 애를 먹습니다. 제게도 너무 어렵고 복잡하거든요. 때문에 언젠가부터 후배들에게 이미지를 덜 깨지게 가공하는 버릇을 초반부터 주입시킵니다. 습관이 되면 이론으로부터 조금은 자유로워집니다.

이딴 계산식을 떠드는 게 아니니 쫄지맙시다.

늘 그러했듯 저희 어머니께 설명드린다는 생각으로 픽셀과 해상도에 대한 개념을 최대한 쉽게 풀어서 설명합니다. 이해를 돕기 위해 각종 '과장'과 팩트가 아닌 '픽션' 또한 첨가되었으니 양해를 부탁드립니다. 대략적인 개념만 잡고 가면 됩니다.

디스플레이의 픽셀 레이아웃

먼저 우리의 산출물이 출력되는 디스플레이를 바라봅니다. 아주 가까이에서 말이죠. 요즘은 대부분 고해상도의 모니터를 가진지라 위와 같은걸 직접 눈으로 보려면 돋보기를 준비해야 합니다. 위 이미지를 보면 각각의 구성이 좀 다르긴 하나 공통점을 찾아볼 수 있습니다. 바로 R, G, B입니다. 이 정도는 기억나시죠? 빛의 삼원색 말이에요. 우리가 보고 있는 디스플레이는 이 삼원색의 조합으로 여러 가지의 색을 만들어냅니다. 3가지 색상을 가진 아주 미세한 전구가 엄청 많이 박혀있다 상상하시면 됩니다. 예를 들어 빨간색 이미지를 만들어 전체 화면으로 띄울 경우, 모니터에 박힌 수많은 LED 중 R에 해당하는 LED만 발광하여 모니터 빨간색 화면이 출력됩니다. 파란색일 때는 B만, 그리고 다른 색일 경우. 위 RBG들의 조합과 밝기 조절로 해당 색을 만들어내죠.

흰색 바탕화면에 빨간색 화살표가 출력될 경우의 LED 상태

모니터 안에 얼마나 많은 LED가 박혀있는가?, 이것을 표현하는 단위가 우리가 알고 있는 PPI(Pixels Per Inch)입니다. 같은 인치수를 가진 모니터라면 PPI가 높을수록 고해상도 모니터로 분류됩니다. 과거 반도체 기술이 부족했던 시절. 무식하게 스크린 사이즈만 키워낸 저가형 모니터를 생산하던 때가 있었습니다. 이러한 제품들은 각 LED 간의 간격(도트 피치)이 넓어 정상적인 이미지도 깨져 보이던 문제를 갖고 있었으나, 요즘은 대부분의 모니터가 좋은 품질을 지녔기에 모니터에 따라 이미지가 깨져 보이는 확률은 제로에 가까워졌습니다. 곧. 이미지가 깨져 보인다면 모니터의 문제가 아닌 작업자의 '작업방식 문제'일 수 있습니다.

그럼 핵심적인 문제인 '깨짐 현상'에 대해 알아봅니다. 흔히 디자이너들이 말하는 깨짐(열화현상)은 '선명도'를 말합니다. 이미지가 jpeg로 압축되면서 선명도와 함께 색수가 저하되는 현상도 물론 포함하지만, 보통의 경우 이미지를 확대/축소하면서 이미지가 뭉개지는 상황을 이슈로 삼죠. 색수가 떨어지거나 압축하면서 발생되는 문제는 옵션 값을 바꾸거나 파일 포맷을 바꾸는 비교적 분명한 대안이 있지만, 확대/축소하면서 발생하는 깨짐 현상에는 잘 대응하지 못합니다. 답을 이미 알고 있음에도 말이죠.

비트맵 이미지가 레티나 디스플레이에 출력되는 원리

위의 이미지는 일반적인 모니터와 레티나 디스플레이에 같은 이미지를 출력할 때를 나타낸 예시입니다. 픽셀당 하나의 LED세트(RGB뭉치, 서브픽셀이란 용어가 어려울 수 있어 LED세트라 표현합니다.)를 작동시키는 반면. 레티나 디스플레이는 4배의 LED세트를 작동시킵니다. 원리를 이해했다면 이걸 반대로 응용해봅니다. 포토샵에서 이미지를 축소할 때를 가정합니다.

이미지 확대/축소 시 2 배수를 적용했을 때와 그렇지 않은 경우

원본 이미지를 2 배수 적용하여 축소했을 때와 배수 개념 없이 축소했을 때의 비교 이미지입니다. 정확하게 2배 축소를 하면 4칸을 차지하던 픽셀이 1칸에 적용되며 깨짐 현상이 일어나지 않습니다. 축소하면서 픽셀 매칭이 이뤄지죠. 맨 오른쪽 이미지 배수를 생각 않고 마구잡이로 축소해버리면 기존 픽셀의 좌표들이 흐트러집니다. 각 픽셀의 좌표들이 소수점으로 바뀔 테고, 포토샵에서 안티앨리어싱이 적용됩니다. 요소의 경계가 뭉개집니다. 우리가 시안 작업을 할 때 홀수와 소수점을 피하는 이유와 같습니다. 8 배수(짝수) 작업을 하는 이유와도 같습니다.

물론 홀수와 짝수 픽셀이 복잡하게 섞여있는 비트맵 사진에서 위와 같은 배수 확대/축소가 완벽한 해답이 되지는 못합니다. 하지만 어느 정도 '깨짐'을 줄일 수 있습니다. 최선책이죠. 작업 시 가능하다면 위와 같은 룰을 적용하시고, 만약 본인의 시력이 좋은 편이 아니라면 최대한 아트보드를 확대해서 픽셀의 경계를 살펴보세요. 최고의 이미지 품질 향상을 위해 실무에선 픽셀의 가장자리를 다듬는 작업이 실제로 이뤄지기도 합니다.

작업 중 이미지 깨짐을 확인하기 위해 'Alt+마우스 스크롤'의 단축키 사용도 자제하는 게 좋습니다. 차라리 Ctrl + Space(확대)와 Ctrl + Alt + Space(축소)가 낫습니다. 배수로 확대/축소해줍니다. 계단현상 방지를 위해 샤픈 필터도 적당히 사용하고 말이죠. 사소하지만 위에 언급한 몇 가지만 알아도 이미지 깨짐을 막는데 많은 도움이 됩니다. 그럼 다음번에 이와 관련한 이야기 또 들고 찾아뵙겠습니다. 오늘도 읽어줘서 고마워요.