px과 rem - 접근성을 위한 글꼴 크기

About this offer

웹사이트의 폰트 사이즈는 사용자 경험과 접근성에 중요한 영향을 미치는 요소이다. 사용자마다 콘텐츠를 인지하기에 편안하다고 느끼는 폰트 크기가 다르고 시각적 지원이 필요한 사용자는 브라우저나 운영체제의 기본 글꼴 크기를 확대하여 사용하기도 한다. 웹 페이지는 브라우저 설정에 따라 유연하게 조정되는 폰트 설정을 제공할 수 있어야 한다. 이를 지원하기 위해 사용되는 값 단위가 바로 rem 이다. 잘못된 이해 접근성과 관련하여 내가 가지고 있었던 한 가지 오해는 rem 단위를 사용하는 것만으로 화면 크기에 대응하는 반응형 요소를 만들고 따라서 접근성까지 높일 수 있다는 것이었다. 하지만 rem 은 루트 요소의 글꼴 크기에 비례하여 요소의 크기를 조절할 뿐 화면 크기까지 자동으로 따라가지는 않는다. rem 사이즈를 가진 요소의 크기를 화면 크기에 따라 조절하려면 미디어 쿼리를 이용해 별도로 설정을 해주어야 한다. 반응성 ≠ 접근성 스크린 리딩부터 화면 확대, 키보드 탐색, 헤드 포인터, 시선 추적까지 웹사이트의 접근성을 높이기 위해서는 다양한 기술이 요구된다. 기기 크기에 맞추어 레이아웃을 조정하는 웹사이트가 접근성을 개선하는 데 도움이 될 수는 있지만, 반응형(Responsive)이라는 특성 하나만으로 접근성(Accessibility)을 달성했다고 보기는 어렵다. 반응형 웹사이트는 화면 크기에 반응하고 접근성이 높은 웹사이트는 사용자의 다양한 요구사항에 반응한다. 이러한 관점에서 볼 때 rem 단위를 사용하는 것은 사용자가 선호하는 기본 글꼴 크기에 따라 텍스트 크기를 조정하는 것이기에 접근성과 관련된 문제라고 할 수 있다. (참고: What is responsive website design and how does it relate to accessibility by Jim Byrne ) 브라우저의 기본 글꼴 크기는 고정된 값이 아니다 웹사이트를 개발할 때에는 사용자가 언제든 브라우저의 기본 글꼴 크기를 늘릴 수 있다는 사실을 염두에 두고 작업하는 것이 좋다. 접근성이 높은 디자인은 글꼴 크기가 크게 확대되더라도 레이아웃이 무너지지 않고 제대로 작동한다. 접근성을 위해 px 대신 rem 을 사용하는 이유 rem 단위는 루트 요소의 글꼴 크기를 기준으로 한다. 루트 글꼴 크기가 브라우저의 기본 설정을 따르도록 구성되어 있다면 사용자가 브라우저에서 기본 글꼴 크기를 늘릴 때 rem 값을 가진 요소의 크기도 그에 따라 조정된다. 반면 px 은 페이지 확대/축소만 가능할 뿐 브라우저의 기본 글꼴 크기에 따라 자동으로 조정되지 않는다. 일반적으로 사용자 설정에 맞춰 크기를 유연하게 조정해야 하는 요소에는 rem 이 더 적합하다. rem 이 만능은 아니다 여전히 px 을 사용하는 것이 적절한 상황도 있다. 테두리나 패딩처럼 글꼴 크기에 따라 크기를 조정할 필요가 없고 크기를 확대하는 것이 사용자에게 특별한 이점을 제공하지 않는 경우에는 px 값을 적용한다. 모든 값의 단위로 rem 을 적용하기보다는 해당 값이 사용자의 요구사항에 따라 확장되어야 할 필요가 실제로 있는지를 고려하는 것이 좋다. (참고: The Surprising Truth About Pixels and Accessibility by Josh Comeau ) 브라우저의 기본 글꼴 크기가 커질 경우, 공간이 제한되기 때문에 패딩까지 같이 커질 여유는 없다. 글꼴 크기만큼 커진 패딩이 특별한 의미나 가치를 더한다고 보기 어렵기에 패딩은 px 값으로 유지한다. px 과 rem 을 적용할 영역 구분하기 브라우저의 글꼴 크기를 따라서 굳이 함께 커질 필요가 없는 값은 px 로 유지한다. 글꼴 크기와 무관하게 일정하게 유지해야 하는 패딩, 갭, 테두리 두께, 모서리 곡률, 로고 크기 등 다음 요소에는 rem 값을 적용하는 것이 좋다. 텍스트 사이의 간격처럼 가독성과 관련된 값 <textarea> , <input> , <select> 의 박스 높이 미디어 쿼리의 기준값. 화면 크기가 데스크톱일지라도 글꼴 크기가 많이 커졌다면 공간이 부족하기 때문에 모바일 레이아웃을 적용할 필요가 있다. 체크박스, 라디오 버튼, 드롭다운 메뉴의 화살표 등 사용자의 조작을 돕는 시각적 요소도 글꼴 크기에 비례하여 확대되도록 설계하는 것이 좋다. 단위 적용 및 브라우저 테스트 웹페이지에 사용된 모든 요소에 px 과 rem 을 적절히 사용하는 것은 시간이 많이 소요되는 번거로운 작업이 될 수 있다. 이때 AI에게 관련 지침을 전달하고 기본적인 요소별 단위 구분을 요청하면 초기 단계에서 드는 리소스를 상당량 절약할 수 있다. 적용 이후에는 브라우저에서 직접 글꼴 크기를 조정하여 테스트를 해보며 세부 조정을 거치는 것이 좋다. WCAG의 가이드라인에 따르면 텍스트를 200%까지 확대하더라도 콘텐츠나 기능이 손실되지 않아야 한다. (참고: Resize Text (Level AA), W3C )

Offer details

Provider

velog

Source

velog-rss

Score

54.4

Confidence