pxd story :: 분명히 똑같이 만들었는데...

들어가며UI 개발을 하다 보면 누구나 한번은 겪는 문제가 있습니다.분명히 똑같은 수치와 CSS를 이용해서 구현했는데 왜 구현된 결과물이 피그마와 달라 보이는 걸까? 어렴풋이 어떤 이유일 거라고 짐작만 하던 이 차이점을 이번에 맘먹고 한번 찾아보았습니다. 원인을 알아보자1. 픽셀 렌더링의 차이피그마는 본래의 목적이 디자인 툴이기 때문에 canvas 환경에서 ‘논리적 픽셀’(벡터 기반 렌더링 방식)을 기준으로 표시합니다.반면에 웹브라우저는 디스플레이 DPI / PPI / Device Pixel Ratio(DPR) 등을 고려한 ‘물리적 픽셀’로 렌더링 됩니다. 이 과정에서 보정이 일어나 미세한 오차가 발생할 수 있습니다. 일부 상황에 대해서 표로 요약하면 다음과 같습니다.상황피그마 표현 방식웹브라우저 표현..

story.pxd.co.kr · pxd story