2015년, 정부 관련 프로젝트를 진행할 때였습니다. 검수 마지막 날, “할머니가 보시기엔 글씨가 너무 작아서 안 보이신다는데, 브라우저 설정을 바꿔도 그대로네요?”라는 피드백을 받았습니다. 등줄기에 땀이 흘렀습니다. 저는 모든 단위를 px로 고정해 놨었거든요.
결국 3천 줄이 넘는 CSS 코드를 전부 뒤엎어야 했습니다. 픽셀은 개발자에겐 편하지만, 사용자(특히 노안이나 저시력자)에겐 불친절한 단위입니다. 이 글을 읽는 여러분은 저와 같은 삽질을 하지 않도록, ‘상황별 단위 선택의 기준’을 명확히 심어드리겠습니다.
1. px (Pixel): 변하지 않는 절대 권력
가장 직관적입니다. 16px은 어느 모니터에서나(해상도 차이는 논외로 하고) 16픽셀만큼의 공간을 차지합니다. 하지만 이게 문제입니다. 사용자가 브라우저 글꼴 설정을 ‘아주 크게’로 바꿔도 px로 지정된 텍스트는 커지지 않습니다. 이를 ‘접근성을 해친다’고 표현합니다.
- ✅ 언제 써야 할까? 글자 크기나 레이아웃 너비에는 쓰지 마세요. 대신 1px 테두리(Border)나 그림자(Shadow)처럼 화면 크기와 상관없이 얇고 선명하게 유지되어야 하는 곳에만 씁니다.
2. em (Equal to M): 부모를 닮는 ‘상속’의 늪
em은 ‘현재 요소의 폰트 크기’를 기준으로 합니다. 만약 부모 태그가 16px이라면, 자식의 1em은 16px이 됩니다. 그런데 이게 재앙이 될 때가 있습니다.
“솔직히 고백하자면, 저도 초보 시절 em을 남발하다가 멘붕에 빠진 적이 있습니다. 리스트(ul) 안에 리스트(ul)가 중첩된 구조였는데, 폰트 사이즈를 1.2em으로 줬더니 안쪽 리스트 글자가 점점 커져서 나중엔 제목보다 커지더군요. 마치 ‘복리 이자’처럼 사이즈가 증폭되는 현상, 이게 em의 함정입니다.”
3. rem (Root EM): 반응형 웹의 구세주
rem의 ‘r’은 **Root(뿌리)**를 뜻합니다. 즉, 부모가 누구든 상관없이 오직 최상위 태그인 <html>의 사이즈만을 바라봅니다.
브라우저의 기본 폰트 사이즈는 보통 16px입니다. 따라서 1rem = 16px이 됩니다. 사용자가 브라우저 설정에서 기본 폰트를 키우면? rem으로 설정된 모든 요소가 비율에 맞춰 ‘동시에’ 커집니다. 예측 가능하고, 관리가 쉽습니다.
💡 코드캠의 실전 TIP: 62.5%의 마법
“1rem이 16px이면… 14px을 만들려면 0.875rem? 아, 계산하기 머리 아파!”
이런 분들을 위한 국룰 세팅이 있습니다. CSS 파일 맨 위에 딱 한 줄만 추가하세요.html { font-size: 62.5%; }
이렇게 하면 기본 16px의 62.5%인 10px이 1rem이 됩니다.
이제 계산할 필요가 없습니다. 1.6rem = 16px, 2.4rem = 24px. 십진법처럼 직관적으로 쓸 수 있습니다.
4. 결론: 무엇을 써야 할까?
복잡하게 고민하지 마세요. 15년 차 개발자가 정해드리는 ‘안전한 가이드라인’은 다음과 같습니다.
- 👉 폰트 크기(Font-size): 무조건
rem을 쓰세요. - 👉 여백(Padding, Margin): 기본적으로
rem을 쓰되, 폰트 크기에 비례해서 여백이 바뀌어야 하는 버튼 같은 컴포넌트에는 가끔em을 씁니다. - 👉 테두리(Border): 1px 같은 미세한 선은
px을 씁니다.
혹시 이미 px로 작업된 프로젝트를 rem으로 바꿔야 해서 막막하신가요? 댓글로 상황을 알려주시면 ‘VS Code’에서 한 방에 변환하는 팁을 알려드리겠습니다!
