일관성, 협업, 퍼포먼스, 유지보수… 관점에서 장점이 많기 때문이다.
4px 단위는 웹디자인계의 황금 비율 같은 존재.
✅ 1. 디자인 일관성을 유지하기 위해 (Design Consistency)
- 4의 배수 단위로 레이아웃과 컴포넌트를 정리하면, 간격이 들쑥날쑥하지 않고 시각적으로 안정적이야.
- 이는 디자인 시스템에서 흔히 말하는 Spacing Scale 개념이야.
📏 Tailwind의 기본 spacing scale: 0.5rem (2px) 간격
p-1 → 0.25rem (4px), p-2 → 0.5rem (8px), p-4 → 1rem (16px), ...
✅ 2. 디자인 시스템 & 개발 협업이 쉬워짐
- 디자이너와 개발자가 공통된 단위로 소통할 수 있음.
- 디자이너가 "여기 padding 16px 줄게요" 하면 개발자는 그냥 p-4 하면 됨.
→ 빠르고 정확하게 구현 가능. - 디자이너 툴(Figma 등)도 보통 4의 배수로 디자인함
✅ 3. 화면 해상도/디바이스 대응이 쉬움
- 대부분의 디스플레이 픽셀 배율(Retina 등)이 4의 배수에 맞추기 쉬움.
- 마진/패딩이 1px 단위면 디바이스 렌더링에서 **blurring(뭉개짐)**이 생길 수 있음.
- 4의 배수는 정렬도 잘 되고, 퍼포먼스도 안정적이야.
✅ 4. 가독성 & 유지보수에 유리함
- p-17, gap-13처럼 애매한 숫자들보다 p-4, gap-6처럼 규칙적으로 쓰면
→ 나중에 봐도 의미 파악이 쉬움
→ 팀 단위 개발에서도 코드 스타일이 통일됨
댓글