피그마와 웹 브라우저, UI가 다른 이유? 렌더링 차이의 비밀!
by DD
5개월 전
조회수 72
UI 개발 시 디자인 툴(피그마)과 웹 브라우저 간 렌더링 차이로 인해 시각적 불일치(Visual Discrepancy) 발생
픽셀 렌더링, 소수점 처리, 폰트 렌더링, 색상 표현 방식 등 4가지 주요 원인 분석
피그마는 벡터 기반, 웹 브라우저는 물리적 픽셀 기반으로 렌더링하여 미세한 오차(Minor Error) 발생
디자인과 개발 간의 이해를 통해 협업(Collaboration)을 강화하고 오차 범위를 좁히는 방향 제시
픽셀 렌더링 방식의 차이
본문에서는 피그마와 웹 브라우저의 픽셀 렌더링 방식 차이로 인해 UI가 다르게 보일 수 있다고 설명한다.
피그마: 논리적 픽셀(Logical Pixel) 기반 렌더링, 벡터 기반으로 정확한 표현 가능
웹 브라우저: 물리적 픽셀(Physical Pixel) 기반 렌더링, 디스플레이 DPI/PPI/DPR 고려
결과: 얇은 선, 확대/축소, 경계선 위치 등에서 미세한 오차(Minor Error) 발생
웹 개발 시, 픽셀 단위의 정확한 디자인 구현보다는 유연한 레이아웃(Flexible Layout)과 반응형 디자인(Responsive Design)을 고려하는 것이 중요하다.
