들어가며
UI 개발을 하다 보면 누구나 한번은 겪는 문제가 있습니다.
분명히 똑같은 수치와 CSS를 이용해서 구현했는데 왜 구현된 결과물이 피그마와 달라 보이는 걸까? 어렴풋이 어떤 이유일 거라고 짐작만 하던 이 차이점을 이번에 맘먹고 한번 찾아보았습니다.
원인을 알아보자
1. 픽셀 렌더링의 차이
피그마는 본래의 목적이 디자인 툴이기 때문에 canvas 환경에서 ‘논리적 픽셀’(벡터 기반 렌더링 방식)을 기준으로 표시합니다.
반면에 웹브라우저는 디스플레이 DPI / PPI / Device Pixel Ratio(DPR) 등을 고려한 ‘물리적 픽셀’로 렌더링 됩니다. 이 과정에서 보정이 일어나 미세한 오차가 발생할 수 있습니다.
일부 상황에 대해서 표로 요약하면 다음과 같습니다.
| 상황 | 피그마 표현 방식 | 웹브라우저 표현 방식 |
| 얇은 선 | 고정된 수학적 픽셀 | 서브 픽셀 분배 방식 적용 |
| 확대/축소 | 가상 해상도 기반 | 실제 디스플레이 해상도 기반 |
| 경계선 위치 | 절대 정렬 | 안티 앨리어싱으로 보정 |
2. 소수점 픽셀 처리 방식의 차이
또한, 피그마와 웹브라우저의 렌더링 엔진이 소수점 이하의 픽셀을 어떻게 계산하는지, 웹브라우저마다의 레이아웃 계산이나 노드의 위치 산정에 사용하는 다른 방식으로 인한 차이점으로 인한 원인이라는 자료도 있습니다.
예를 들자면, 전체 폭의 1/3은 픽셀로 변환 시 33.3333….. px이 됩니다. 피그마는 이 소수점을 벡터 기반으로 정확하게 그려낼 수 있지만 웹브라우저의 경우 이 값을 반올림, 올림 또는 버림 하는데, 그 기준이 렌더링 엔진마다 다를 수 있습니다.
표로 요약하면 다음과 같습니다.
| 요소 | 설명 |
| 비율 및 Responsive 단위 사용 | 비율/auto 단위로 레이아웃 시 소수점 픽셀이 생길 가능성이 증가합니다. |
| 브라우저의 반올림 처리 방식 | 반올림 방식(예: floor, ceil, round)이나 렌더링 엔진 처리 시점에 따라서 결과에 차이가 발생합니다. |
| 디자인 툴과 브라우저의 픽셀 기준 차이 | 디자인 툴은 단순 픽셀 수치 기반이나 브라우저는 CSS 픽셀 -> 물리 픽셀 매핑까지 고려해야합니다. |
3. 폰트 렌더링의 차이
가장 큰 차이를 체감하게 되는 요인은 바로 폰트에 있습니다. 피그마의 경우 자체 폰트 렌더러를 사용하는 반면 웹브라우저의 경우 안티앨리어싱 방식, 서브 픽셀 처리, 운영체제 + 브라우저의 조합에서 오는 렌더링 엔진의 차이 등 다양한 요인이 개입됩니다. 이러한 내용은 Figma 커뮤니티에서도 언급되어 있죠. 그리고 같은 폰트라도 OS에 따라서 다르게 보이는 현상은 굳이 피그마와 웹브라우저만 놓고 비교하지 않아도 알 수 있는 널리 알려진 문제죠. 이러한 복합적 요인들이 크게 영향을 끼치는 것이 아닌가 싶습니다.
4. 색과 표현 방식의 차이
디자인 툴은 그래픽 레이어에 특수 효과들을 표현합니다. 웹브라우저들은 HTML, CSS, 렌더 트리 등 실제 렌더링 파이프라인을 거치면서 화면에 표현됩니다. CSS 스펙과 그 스펙을 해석하는 브라우저의 그래픽 엔진에서도 차이가 있을 수 있죠. 이로 인해서 두 매체 사이에서 그라디언트, 블러, 그림자 등 특정 효과들이 미묘하게 다르게 표현되기도 합니다.
표로 요약하면 다음과 같습니다.
| 요소 | 설명 |
| 디자인 툴의 렌더링 vs 브라우저의 렌더링 | 디자인 툴은 UI 미리 보기 목적, 브라우저는 실제 DOM/CSS/렌더링 엔진 적용 |
| CSS 해석 및 그래픽 엔진의 차이 | 브라우저마다 렌더링 엔진(WebKit, Blink, Gecko 등)과 최적화 방식이 다를 수 있습니다. |
| 효과 및 필터 처리 방식 | 블러, 그림자 등 CSS 효과가 디자인 툴과 브라우저에서 동일하게 처리되지 않을 수 있습니다. |
마치며
사실, 이 내용은 원인과 결과가 명확하게 도출되는 주제가 아니었기에 자료를 조사하면서도 반신반의한 내용이 많았습니다. 표면적으로 쉽게 이해할 수 없는 구조와 요소들이 많았기도 했고 작업자 입장에서 손쉽게 해결할 수 있는 부분이라는 느낌이 적었기 때문입니다. 그럼에도 불구하고 디자인과 개발이 충분히 협의한다면 좁힐 수 있는 간극 역시 분명히 존재한다고 느꼈습니다.
피그마와 웹브라우저 간 UI 차이는 잘못된 구현이 아니라, 각각의 환경에서 오는 어쩔 수 없는 차이이지 않을까 싶은데요, 이 배경을 서로 이해하여 디자인은 완벽한 픽셀의 일치보다는 미묘한 오차 범위라면 허용해주고 개발은 그 안에서 가능한 최선의 디자인 결과물을 구현하려고 노력하는 방향으로 협업한다면 좋지 않을까 합니다.