일단 뭐가 다른지

px (픽셀)

절대 단위예요. 1px은 언제나 1px이에요.

rem (root em)

상대 단위예요. html의 font-size가 기준이에요.

언제 px 쓰나

1. 테두리, 그림자

테두리가 1.5px이면 어색해요. 1px 아니면 2px이에요.

2. 아이콘 크기

아이콘은 고정 크기가 나아요. 24px 아이콘이 글자 크기 따라 늘어나면 이상해져요.

3. 미디어 쿼리

4. 최소/최대 크기

언제 rem 쓰나

1. 글자 크기

사용자가 브라우저에서 글자 크기를 키우면 rem은 같이 커져요. px은 안 커져요.

2. 여백

글자 크기를 키우면 여백도 같이 늘어나야 읽기 편해요.

3. 컴포넌트 간격

접근성이 핵심이에요

왜 rem을 써야 하냐면 이것 때문이에요.

시력이 안 좋은 사용자는 브라우저에서 기본 글자 크기를 키워요. rem을 쓰면 사이트 전체가 비례해서 커지고, px을 쓰면 안 커져요.

공공 SI에서 접근성 검수할 때 이걸 봐요.

62.5% 트릭은 권하지 않아요

계산은 쉬워지는데 문제가 있어요.

기본 글자 크기를 강제로 바꿔버려요
외부 라이브러리 스타일이 깨질 수 있어요
나중에 유지보수할 때 혼란스러워요

그냥 16px 기준으로 계산하세요. 익숙해지면 어렵지 않아요.

KRDS는 17px 기준이에요

한국 공공 디자인 시스템(KRDS)은 기본 글자 크기가 17px이에요.

이 경우 rem 계산이 좀 달라져요.

HANUI는 이 17px 기준이 세팅되어 있어서 그냥 rem 쓰면 KRDS 스펙에 맞아요.

Tailwind에서는?

Tailwind는 기본적으로 rem을 써요.

근데 일부는 px이에요.

Tailwind 설계자들이 이미 고민해서 정해놨어요.

정리

용도	단위	이유
글자 크기	rem	접근성, 사용자 설정 반영
여백/패딩	rem	글자와 비례해서 확대
테두리	px	1px이 자연스러움
그림자	px	섬세한 조절 필요
아이콘	px	고정 크기 유지
미디어쿼리	px	디바이스 기준
max-width	px	레이아웃 고정

기본 원칙은 이거예요. 글자와 여백은 rem, 나머지는 px.

복잡하게 생각하지 마세요. 이 원칙만 지키면 접근성도 챙기고, 반응형도 자연스러워요.

rem vs px, 언제 뭘 써야 할까