반응형 웹을 위한 Tailwind CSS와 rem 단위 활용하기

왜 px 대신 rem을 사용해야 할까요?

프론트엔드 개발을 하다 보면 디자이너가 작업한 피그마 디자인을 그대로 구현하기 위해 픽셀(px) 단위를 사용하는 것이 직관적으로 느껴질 때가 많습니다. 하지만 반응형 웹 디자인을 효과적으로 구현하기 위해서는 px이 아닌 rem과 같은 상대 단위를 사용하는 것이 중요합니다.

픽셀의 한계

픽셀은 상대 단위가 아닌 절대 단위로, 다양한 화면 크기에 자동으로 조정되지 않고, 사용자가 브라우저 기본 폰트 크기를 변경해도 픽셀 단위로 지정된 요소는 크기가 변하지 않습니다. 따라서 반응형 디자인 구현을 고려한다면 사용을 지양해야 합니다.

rem의 장점

rem은 루트 (html) 요소의 폰트 크기를 기준으로 하는 상대적 단위 입니다. 모든 요소가 루트(root)의 폰트 크기에 비례하여 조정되고, 사용자가 브라우저 설정에서 폰트 크기를 변경하면 rem으로 설정된 모든 요소가 비례적으로 조정됩니다.

상황

디자이너가 피그마에서 모바일 디자인의 기준 너비를 360px로 설정했다고 가정해 보겠습니다. 실제 사용자의 디바이스는 다양한 화면 너비를 가질 것이므로, 모든 디바이스에서 일관된 비율을 유지하기 위해 다음과 같은 방법을 사용합니다:

1. 브라우저의 기본 폰트 크기(16px)를 기준으로 하는 간단한 비례식을 풀어야합니다 (만약 내부적으로 기본 폰트 크기를 16px이 아닌 다른 값을 사용하기로 결정했다면 이를 고려한 비례식을 풀어야합니다.)

360px : 16px = 100vw : x

2. 이 비례식을 풀면 x는 40 / 9 vw가 됩니다.
3. 이 값calc(( 40/9 ) * 1vw)을 globals.css의 font size에 적용하면 됩니다.

1/* globals.css */
2html {
3    font-size : calc((40/9) * 1vw)
4}

이렇게 설정하면 디바이스 너비가 360px일 때 1rem이 정확히 16px이 되고, 화면 크기가 변경되면 폰트 크기도 그에 비례하여 자동으로 조정됩니다. 이는 디자인 시안의 비율을 모든 화면 크기에서 일관되게 유지할 수 있게 해줍니다.

Tailwind CSS 기본 클래스 활용하기

Tailwind CSS는 이미 rem 단위를 기반으로 설계되어있으므로, 디자인 시안이 Tailwind CSS의 rem단위에 맞계 설계된다면 반응형 디자인 작업을 하기에 더 편리할 것입니다. 만약 불가피하게 Tailwind CSS의 기본 유틸리티 단위가 아닌 px을 사용해야한다면, 개발자가 px단위를 rem으로 변경하여 직접 커스텀 텍스트 크기를 적용하면 됩니다.

1// 19px ÷ 16px = 1.188rem
2<p className="text-[1.188rem]">커스텀 크기 텍스트</p>