이것은 UI 오류인가요? 아닙니다!(Feat. 서브픽셀 렌더링)
들어가기
회사에서 사용하는 업무툴중에 네이버 웍스 가 있다.
문득 웍스의 UI 를 바라보았는데
1:1 에서 왼쪽의 1과 오른쪽의 1이 다르다는 느낌을 받았다.(지금 보니 티스토리 에디터도 동일하게 미세하게 다르다)
그래서 캡쳐를 해서 확대를 해보았다
픽셀 단위로 바라보았을때 미묘하게 다르다는 느낌을 받았다.
나는 당연히 이건 UI 적으로 오류가 발생했다고 생각했다.
그래서 웍스 팀에 문의 메일을 보냈다.
문의한 답변에 대한 내용이다. 픽셀 차이 없이 동일한 상태라고 한다.
그러면 이런 현상은 왜 발생하는걸까? 라는 의문이 들었다.
서브픽셀 렌더링
LCD 화면에서 하나의 픽셀이 실제로는 세개의 서브픽셀(빨강, 초록, 파랑)로 구성되어 있다. 서브픽셀 렌더링은 이러한 구조를 활용하여 실질적으로 해상도를 높이는 기술이다.
- 일반적으로 LCD 화면의 각 픽셀은 RGB(빨강, 초록, 파랑) 세 개의 서브 픽셀로 이루어진다.
- 서브픽셀들은 서로 나란히 배치되어 있으며 대부분의 RGB 순서로 정렬되어 있다(일부는 BGR 도 있다고 한다)
- 인간의 눈은 이 세가지 색상이 섞여 하나의 색으로 보이도록 통합한다.
서브픽셀 렌더링은 이 개별 서브픽셀을 활용하여 더 정밀한 텍스트 렌더링 기능을 하게 한다. 일반적인 픽셀 단위 렌더링 보다 최대 3배 더 정밀하게 수평해상도를 제공할 수 있다고 하낟.
그래서 왜 생겨?
텍스트의 분수 픽셀 처리
이미지 에서 보이듯 차이는 분수 픽셀(fractional pixel)의 처리 방식 때문일 수도 있다고 한다
이것은 브라우저 마다 분수 픽셀을 다르게 처리 하기 때문에 발생한다고 하는데
1. 어떤 브라우저는 33.5px을 33px로 내림을 하는 경우도 있고
2. 어떤 브라우저는 서브픽셀 스케일로 렌더링 하는 경우도 있고
3. 일부 브라우저는 올바르게 반올림 하여 34px로 처리하는 경우도 있다.
이러한 차이는 특히 텍스트 렌더링에서 두드러지게 일어난다고 한다.
분스 픽셀을 사용할 때 Edge와 Firefox는 너비를 가장 가까운 전체 픽셀로 반올림 하는 반면, 다른 브라우저들은 정수 값만 사용하는 경향이 있다.
안티앨리어싱과 텍스트 렌더링
또 다른 가설은 안티앨리어싱 적용 여부와 방식의 차이 일 수 도 있다.
안티앨리어싱 기법
안티앨리어싱은 텍스트나 그래픽의 가장자리에 나타난 계단 현상을 감소시키는 기술이다.
서브픽셀 안티엘리어싱 - 서브픽셀 단위로 정밀하게 처리하여 텍스트를 더 선명하게 표현
기본 안티앨리어싱 - 픽셀 단위로 가장자리를 부드럽게 처리
CSS에서는 -webkit-font-smoothing: antialiaseed 와 같은 속성을 사용해서 폰트 렌더링 방식을 제어할 수 있다.
그 이유 (가설) - 사실 나는 다 틀림
1. 다른 렌더링 엔진의 사용 : 각 텍스트가 다른 렌더링 엔진을 사용하거나 스프트웨어에서 생성 되었을 수 있다.
2. 서브픽셀 렌더링 차이 : 하나는 서브픽셀 렌더링을 활용하고, 하나는 픽셀 렌더링을 사용했을 수 있다.
3. 안티앨리어싱 설정 차이 : 서로 다른 안티앨리어싱 방식이 적용되었을 가능성이 있다.
4. 폰트 힌팅차이 : 폰트 힌팅은 낮은 해상도에서 텍스트가 선명하게 보이도록 조정하는 기술인데 이 설정이 다를 수 있다.
결론
디지털 디스플레이에서 텍스트 렌더링은 서브픽셀 렌더링, 안티앨리어싱, 폰트 힝팅, 분수 픽셀 처리 등 다양한 방법론이 있고 어떻게 적용하는지에 따라서 유저에게 보여지는 부분이 미세하게 변동되는 경우도 있는 상황을 알게되었다.
결과론적으로 이런 방법도 알고있으면 추후에 도움이 되겠지만, 사실 결론은 모니터가 알아서 안티앨리어싱 을 해서 생기는 문제였다. 맥북화면으로 가져가게 되면 정상적인 픽셀료 표시되고 있었다.
결국 나는 무지에 의해서 와 신난다 네이버 오류 찾았다 라고 제보한 무지한 개발자가 되었다.
여러분은 이런 실수를 하지 않기를 바랍니다!