[CSS] px 대신 rem을 사용해야 하는 이유 (feat. sass function)

YEONSUI 버전 2에서 새로 세운 목표 중 하나가 웹 접근성을 준수하는 것이다. 다양한 환경의 사용자를 배려한 UI 라이브러리를 만들고 싶었다.

웹 접근성을 높일 수 있는 여러 방법 중 하나는 텍스트 크기가 브라우저 설정에 맞게 바뀌는 것이다.

YEONSUI에서 Typography를 정의할 때는 rem 단위를 적용했지만, 그 외의 모든 스타일에는 px을 사용했다.

이렇게 단위를 섞어서 사용하면 어떤 일이 벌어질까?

브라우저 기본 글꼴 크기를 16px에서 48px로 키우면 다음과 같이 Typography가 적용된 폰트 크기만 올바르게 커지고 나머지 크기는 바뀌지 않아 레이아웃이 깨진다.

이러한 문제 때문에 모든 스타일 단위를 통일하는 것이 좋다.

그런데 왜 px 대신 rem을 사용하는 것이 좋을까?

사용자가 브라우저 기본 글꼴 크기를 16px보다 줄이거나 키우는 데에는 모든 화면을 작거나 크게 보고 싶기 때문인데, px을 사용하면 브라우저 기본 글꼴 크기를 모두 무시하기 때문이다.

그럼 px을 사용한 스타일을 모두 rem으로 바꾸는 작업을 할 것이다. 그런데 px을 rem으로 바꾸기 위해 한땀한땀 16으로 나누는 작업을 하면 계산이 틀릴 수 있고 너무 귀찮은 일이 될 것 같다.

Sass Function으로 간단히 rem으로 바꾸기

@function toRem($px) {
  @return calc($px / 16) + rem;
}

Sass는 @function 기능을 제공한다. $px이라는 px 단위 숫자를 매개변수로 받아 16을 나누고 뒤에 rem 단위를 붙여 간단히 rem으로 바꿀 수 있다.

.ui-textarea {
  gap: toRem(4); // 4px
 }

이렇게 4px인 값을 toRem(4)로 바꿔서 브라우저에서는 0.25rem으로 적용되는 것을 확인할 수 있다.