왜 웹 디자인에서 픽셀 사용을 정말로 멈춰야 하는가 (그리고 Rem으로 전환해야 하는 이유)
솔직히 말해봅시다. 예전의 웹 디자인은 정말 말도 안 되게 쉬웠습니다. 예전에는 모두가 똑같이 큼직한 데스크톱 모니터만 바라보고 있었죠. 본문에 16px 글꼴 크기를 적용하고, 메인 컨테이너에 고정 너비를 설정하면 그걸로 끝이었습니다.
하지만 상황이 많이 변했습니다. 이제 우리는 주머니 속의 휴대폰부터 거대한 울트라와이드 모니터, 태블릿, 심지어 스마트 냉장고에서도 사이트가 멋지게 보이도록 만들어야 합니다. 웹은 더 이상 정적인 포스터가 아니라 유동적으로 살아 움직이는 존재입니다. 그런데 아직도 오로지 픽셀(px)에만 의존해서 웹을 만들고 계신가요? 그건 마치 흐르는 물에 구속복을 입히려는 것과 같습니다.
이제 상대 단위(relative units)에 대해 이야기할 때입니다. 솔직히 말해서, px을 버리고 rem을 선택하는 것은 여러분이 들일 수 있는 가장 좋은 습관 중 하나입니다. 정신 건강을 지켜주고, 코드를 더 깔끔하게 만들어주며, 무엇보다 사용자에게 훨씬 더 좋습니다.
픽셀의 문제점 (일명: 콘크리트 방식)
왜 rem이 훌륭한지 이해하려면, 먼저 픽셀이 현대 웹 디자인에서 왜 별로인지 살펴봐야 합니다.
픽셀을 콘크리트를 붓는 것이라고 생각해보세요. 한 번 굳으면 그대로 고정됩니다. 브라우저에 제목이 24px이라고 명령하면, 상황이 어떻든 24px로 유지됩니다. 픽셀은 기본적으로 CSS 세계의 통제광입니다. 사용자가 화면을 보려고 눈을 가늘게 뜨고 있든 말든 신경 쓰지 않으며, 시력이 좋지 않아 브라우저 설정에서 기본 글꼴 크기를 키웠더라도 전혀 개의치 않습니다.
픽셀은 자기 자리를 고수합니다. “안 돼, 디자이너가 24픽셀이라고 했으니까 정확히 24픽셀만 보여줄 거야”라고 말이죠.
이러한 경직성은 웹 접근성에 있어 악몽과 같습니다. 사람들에게 절대적인 크기를 강요할 때, 우리는 사용자가 콘텐츠를 소비하는 방식을 제어할 수 있는 능력을 빼앗게 됩니다.
REM의 등장: CSS의 스마트 온도 조절기
픽셀이 부어놓은 콘크리트라면, rem은 집 전체를 관리하는 스마트 온도 조절기와 같습니다.
Rem은 “Root Em”의 약자입니다. 기술적인 역사로 지루하게 만들지는 않겠지만, rem 단위가 문서의 루트(즉, <html> 태그)를 기준으로 크기를 정한다는 것만 알면 됩니다. 기본적으로 거의 모든 웹 브라우저의 루트 글꼴 크기는 16px로 설정되어 있습니다.
따라서 본문 텍스트를 1rem로 설정하면 브라우저는 이를 16px로 변환합니다. 제목을 2rem으로 설정하면 브라우저는 간단한 계산을 합니다: 2 x 16 = 32px.
스케일링의 실전 마법
여기서 스마트 온도 조절기 비유가 빛을 발합니다.
어떤 사용자가 여러분의 사이트를 방문했는데 시력이 좋지 않다고 가정해봅시다. 그 사용자는 브라우저 설정에서 기본 글꼴 크기를 표준인 16px에서 24px처럼 더 큰 값으로 변경했습니다.
- 픽셀로 사이트를 만든 경우: 여러분의 코드는 사용자의 설정을 완전히 무시합니다. 16px 텍스트는 그대로 16px로 남습니다. 사용자는 불편하게 화면을 확대해야 하고, 이로 인해 정성껏 만든 레이아웃이 깨지며 한 문장을 읽기 위해 가로로 스크롤을 해야 하는 상황이 벌어집니다. 매우 짜증 나는 일이죠.
- Rem으로 사이트를 만든 경우: 여러분의 사이트는 사용자를 존중합니다. 텍스트가
1rem으로 설정되어 있기 때문에, 브라우저는 사용자의 새로운 기본값(24px)을 확인하고 “좋아, 이제 1rem은 24px이야”라고 판단합니다. 글꼴, 여백(padding), 마진(margin) 등 사이트의 모든 요소가 완벽하고 비례에 맞게 커집니다.
CSS 코드를 단 한 줄도 추가로 작성할 필요가 없습니다. 레이아웃이 사용자가 필요로 하는 방식에 맞춰 스스로 적응한 것입니다.
지금 바로 전환해야 하는 이유
px에서 rem으로 옮겨가는 것은 단순한 개발 트렌드가 아닙니다. 사용자 경험을 다루는 방식의 근본적인 변화입니다.
- 웹 접근성(A11y)의 큰 승리: 웹은 모든 사람을 위해 작동해야 합니다. rem을 사용하면 사용자 지정 브라우저 설정이 필요한 시각 장애인들도 여러분의 CSS와 씨름하지 않고 콘텐츠를 편하게 읽을 수 있습니다.
- 반응형 디자인이 훨씬 쉬워집니다: 모바일 환경을 위해 사이트 전체의 타이포그래피 크기를 줄이고 싶으신가요? 픽셀을 사용했다면 모든 글꼴 크기를 변경하기 위해 수십 개의 미디어 쿼리를 작성해야 했을 겁니다. 하지만 rem을 사용하면 루트 글꼴 크기 하나만 변경하면 나머지는 알아서 스케일 다운됩니다. 마치 마법처럼 느껴질 정도입니다.
- 미래 대비: 새로운 화면 크기를 가진 기기들이 계속해서 출시됩니다. 상대 단위는 여러분의 디자인이 압박을 받아 깨지는 대신, 유연하게 숨 쉬고 적응할 수 있게 해줍니다.
“언제 무엇을 쓸까” 요약표
그렇다고 픽셀을 완전히 쓰레기통에 버릴 필요는 없습니다. 현대적인 디자인에서도 여전히 아주 좁은 용도로 쓰일 곳이 있습니다. 전환을 위한 간단하고 명확한 가이드는 다음과 같습니다.
다음에 rem을 사용하세요:
- 글꼴 크기 (제목, 본문, 버튼 등)
- 간격 (마진 및 패딩)
- 주요 레이아웃 컨테이너의 너비와 높이
다음에 px을 사용하세요:
- 절대로 크기가 변해서는 안 되는 아주 미세한 디테일. 예를 들어 카드 주변의 1px 테두리나 미세한 그림자(box-shadow) 등이 해당합니다.
황금 계산법:
- 1rem = 16px (브라우저 기본값)
- 1.5rem = 24px
- 2rem = 32px
(꿀팁: 머릿속으로 계산하는 게 싫다면 픽셀-Rem 변환 도구를 즐겨찾기 해두고 활용하세요!)
rem을 받아들인다는 것은, 절대적인 통제권을 조금 내려놓는 대신 여러분의 사이트를 이용하는 사람들에게 훨씬 더 우수하고 유연하며 접근성 높은 경험을 제공한다는 것을 의미합니다. 어차피 콘크리트에는 금이 가기 마련입니다. 이제는 흐름에 몸을 맡기는 디자인을 시작할 때입니다.