디자인 아틀라스픽셀 퍼펙트는 아이콘의 각 선이 실제 화면의 물리적 픽셀 경계에 정확히 맞아떨어지게 그리는 것을 말한다. 벡터 좌표가 정수가 아니라 12.5px처럼 픽셀 사이에 걸치면, 브라우저는 그 경계를 매끄럽게 보이려고 주변 픽셀에 회색을 섞는 안티앨리어싱을 적용한다 — 그 결과 선이 살짝 번져 보인다.
1x(표준 해상도) 화면에서는 이 흐림이 꽤 눈에 띈다. 그래서 아이콘을 그릴 때 스트로크의 중심선이 .5px 단위(1px 굵기 기준)나 정수(2px 굵기 기준)에 오도록 좌표를 맞춘다. 디자인 툴에서 흔히 겹치는 도형 두 개를 정렬할 때 반 픽셀씩 어긋나는 경우가 많아서, 다 그린 뒤 확대해서 흐린 선이 없는지 확인하는 과정이 필요하다.
2x, 3x 같은 고해상도(레티나) 화면에서는 픽셀 하나가 더 잘게 나뉘기 때문에 이 문제가 훨씬 덜 두드러진다. 하지만 파비콘처럼 여전히 1x로 그려야 하는 작은 자산이나, 저해상도 디스플레이를 지원해야 하는 프로젝트에서는 지금도 유효한 규칙이다.
언제 쓰나
파비콘처럼 작은 크기로 고정 렌더되는 자산, 저해상도 디스플레이를 지원해야 하는 프로젝트에서 그린 뒤 반드시 확대해 확인하세요. 2x 이상 레티나 전용이라면 우선순위는 낮습니다.