알아두면 쓸모 있는 px, em, rem
절대평가와 상대평가의 차이
안녕하세요. 티그리스 디자인팀입니다.
오늘은 웹을 만들 때 아주 가깝게 계속 마주쳐야 할 ‘단위’에 대해 준비했습니다.
px, em, rem을 들어본 적이 있거나 개념을 아는데도 프로젝트나 실무에 적용이 어렵다면 도움이 될 수 있을 것 같습니다.
맥주 한 잔20cm와 한 뼘의 차이를 아시나요? 300ml의 물과 한 잔의 물은 어떤가요?
20cm는 어디에서 누가 재든 20cm이지만 한 뼘은 측정자의 손가락 길이에 따라 달라질 수 있습니다.
300ml의 물은 어디서든 300ml이지만 한 잔의 물은 컵의 용량과 물이 얼마나 차있는지에 따라 달라지겠죠.
이처럼 20cm나 300ml처럼 변하지 않는 값을 ‘절대값’이라고 부르고,
‘한 뼘’, ‘한 잔’처럼 변할 수 있는 값을 ‘상대값’이라고 부릅니다.
px와 em, rem도 같습니다. px는 해상도나 부모 요소에 크기를 받지 않는 ‘절대값’이고,
em과 rem은 부모 요소의 크기나 루트(root)값 등에 영향을 받는 ‘상대값’입니다.
px만 사용해서 웹을 만든다면, 다양한 해상도에서 볼 때 너무 작아보이거나 너무 커 보일 수 있습니다.
그러나 상대적인 단위(em, rem)를 적절히 사용한다면 여러 해상도에서 일관된 화면을 보여줄 수 있습니다.
그럼, px와 em, rem은 각각 어떤 상황에서 어떻게 사용하면 좋을까요?
px
px(픽셀)은 화면의 물리적 단위로서, 디스플레이에서 한 ‘점’의 색 정보를 표현하는 최소 단위입니다.
고정된 단위이기 때문에 모니터의 해상도가 달라지더라도 변하지 않습니다.
가로 세로가 10px씩인 요소는 어느 해상도에서나 10px의 값을 가집니다.
그렇기 때문에 저시력 사용자가 브라우저의 기본 글꼴 크기를 변경하더라도 px만 사용한 웹은 항상 같은 크기로 출력하기 때문에 웹 접근성 측면에서 좋지 않습니다.
px 단위는 테두리(border)의 두께나 미디어쿼리에서 브레이크 포인트를 정할 때 사용하면 좋습니다.
em
em은 부모 요소(Element)의 글꼴 크기를 기준으로 하는 상대적 단위입니다.
위 그림과 같이 부모 요소가 60px일 때, 자식 요소를 0.8em으로 하면 자식요소의 실제 크기는 48px이 되고 부모 요소가 40px일 때, 자식 요소를 0.8em으로 하면 실제 크기는 32px이 됩니다.
한 페이지 내에서 같은 0.8em을 사용하더라도 부모 요소의 글꼴 크기가 얼마인지에 따라 크기가 달라집니다.
일반적으로 em 단위는 글꼴 크기, 여백(padding, margin) 등을 정의할 때 사용합니다.
rem
12px을 16으로 나누면 0.75rem, 24px을 16으로 나누면 1.5rem이 된다rem은 루트 요소(Root Element: <html>)의 글꼴 크기를 기준으로 하는 상대적 단위입니다.
페이지 전체에서 동일한 기준을 가지므로 디자인의 일관성을 유지하기도 쉽습니다.
전체 레이아웃의 일관성을 유지하면서 상대적인 크기를 정의할 때 주로 사용합니다.
rem의 단위는 보통 브라우저의 기본 글꼴 크기인 16px을 기준으로 합니다.
1rem은 16px, 2rem은 16의 2배인 32px, 3rem은 16의 3배인 48px… 과 같은 식입니다.
px을 rem으로 변환할 때는 [(사용할 값)÷16] 으로 계산하면 됩니다.
12px을 10으로 나누면 1.2rem, 24px을 10으로 나누면 2.4rem이 된다그러나 px로 그려진 디자인을 rem으로 일일히 계산해가며 만들기는 쉽지 않습니다.
그럴 때 <html>의 font-size를 62.5%로 적용해주면 루트의 글꼴 크기를 10px로 만든 것과 같은 효과를 주어 변환이 쉽습니다.
[기본 글꼴 크기는 왜 10px로 만들어야 하나요?]
기본 글꼴 크기가 16px이라면 [(사용할 값)÷16]와 같이 계산해서 써야 하지만, 이를 암산하거나 계산기를 꺼내 쓰는 것보다 나누는 값을 10으로 만들면 훨씬 계산이 쉬워지기 때문에 바꿔서 사용합니다.
피그마에서는 px를 rem으로 변환해주는 플러그인도 있다고 하니, 플러그인을 사용해도 좋을 것입니다.
마치며
웹에는 px, em, rem뿐만 아니라 %, vw, vh 등의 단위도 있습니다. px를 제외하고 모두 상대적 단위입니다.
디바이스가 다양화될수록 px보다 상대적 단위를 사용하는 것이 좋습니다.
em은 폰트 크기에 따라 유동적으로 변경되는 특징이 있지만, 이러한 특징 때문에 오히려 유지보수가 어려울 수 있기 때문에 변환과 유지보수가 쉬운 rem의 사용을 권장합니다.
참고
https://yozm.wishket.com/magazine/detail/1410/
제작. 티그리스 디자인팀
궁금한 점이나 다양한 의견은 아래 메일로 연락 주세요.
design@tigrison.com
