1. Transform 렌더링 방식

css의 transform을 렌더링할 때 브라우저는 해당 요소를 GPU를 사용하여 하드웨어 가속을 적용합니다. 이 과정에서 요소가 합성 레이어(Compositing Layer)로 분리되어 다른 요소와 독립적으로 렌더링됩니다. transform을 사용할 때 요소의 위치가 픽셀 단위로 정확히 맞지 않을 경우 브라우저는 픽셀 보간(Pixel Interpolation)을 수행합니다.

2. 픽셀 보간, 서브픽셀 렌더링

픽셀 보간(Pixel Interpolation)은 요소의 위치가 픽셀 경계에 정확히 맞지 않을 때 주변 픽셀의 색상을 혼합하여 부드럽게 채우는 기술로 하드웨어 가속을 사용합니다. 픽셀 보간이 발생하는 과정은 다음과 같습니다.

<aside>

1. 픽셀 정렬 실패

   • 요소의 위치가 픽셀 경계에 정확히 맞지 않을 경우 서브픽셀 단위로 위치를 계산
   • ex) (100.5px, 200.75px)

2. 주변 픽셀 참조

   • 주변 픽셀의 색상을 참조하여 보간
   • ex) (100.5px, 200.75px)-> (100px, 200px), (101px, 200px), (100px, 201px), (101px, 201px)

3. 색상 혼합

   • 보간 알고리즘을 사용하여 주변 픽셀의 색상을 혼합
   • 이 과정에서 픽셀의 경계가 흐리게 보일 수 있음 </aside>

서브픽셀 렌더링(Subpixel Rendering)은 텍스트가 픽셀 경계에 정확히 맞지 않을 때 더 선명하게 표시하기 위해 픽셀을 R, G, B 서브픽셀로 나누어 색상을 계산하는 기술입니다. 만약 transform으로 인해 픽셀 정렬이 어긋날 경우 비활성화됩니다.

3. UI가 흐려지는 문제 해결

화면을 가득 채우는 모달 오버레이를 fixed transform을 사용해 화면 중앙에 고정시키고, 요소 가운데에 모달 컴포넌트를 렌더링했습니다. 이 때 모달의 일부 요소가 때때로 흐리게 보이는 문제가 발생했습니다. 이 문제의 원인이 위에서 설명한 픽셀 보간에 있다고 판단해 transform을 제거하고 top-0 left-0 size-full 등으로 화면 전체에 위치시킨 뒤, 모달을 m-auto flex flex-col items-center 등의 속성을 사용해 중앙 정렬했습니다. 이를 통해 모달 UI 렌더링에 픽셀 보간이 아닌 서브픽셀 렌더링이 적용되어 UI가 정상적으로 선명하게 그려지게 되었습니다.