웹 접근성 향상을 위해 em, rem단위를 사용하자!

왜 em, rem으로 사용해야 하는가?

최근 티스토리 스킨 파일을 만들기 위해 필요한 것들을 미리 만들어두는 베이스 폴더(기초 스킨)를 리뉴얼하면서, 최신 트렌드, 새롭게 나온 CSS 기능, 바닐라 자바스크립트에 대해 공부하던 중 아래 영상을 접하게 되었다.

프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요

rem과 em 단위에 대해서는 알고 있었는데, 지금 생각해 보니 정확한 사용법을 몰랐고 em과 rem을 사용해야 하는 이유가 바로 웹 접근성 향상이었다.

em과 rem이 뭔지 모르겠다면 위 영상이 정말 친절하고 알기 쉽게 알려준다!!!!!

 

웹 접근성 향상?

em과 rem에 관련된 웹 접근성에 관련한 내용은 사용자가 브라우저에서 폰트 사이즈(글꼴 크기)를 변경 시 브라우저 자체에 설정되어 있는 기본 폰트 사이즈 = 16px(브라우저마다 다를 수 있음)을 조절하게 된다.

웹페이지를 만들 때 CSS에서 html이나 body에 px같이 유연성이 없는 절대적인 단위로+ 고정된 값을 사용하게 되면 예를 들어 사용자가 시력이 좋지 않아 브라우저의 폰트 사이즈를 크게 키워서 사용한다고 해도 html이나 body에 적용한 고정된 px 사이즈로 웹 페이지 전체를 보게 되는 것이니 접근성이 떨어진다고 할 수 있다.

따라서 보다 다양한 사람의 불편함을 줄일 수 있도록 웹사이트를 만들어야 하는 것이며 웹 접근성 향상에는 다양한 것들이 있지만 지금 내가 말하는 주제에 근접한 em과 rem에 대해서만 언급하겠다.

앞에서 말했듯, 그리고 위 영상을 참고하면 em과, rem은 단순히 폰트 사이즈에만 적용할 수 있는 게 아닌 대부분의 요소에 적용이 된다.  폰트를 em 또는 rem을 써서 접근성을 올렸는데 여백, 컨테이너, 반응형을 위한 media query가 고정된 px 값이라면 내가 적용한 이 고정된 px값 안에서 폰트 사이즈만 크고 작아질 것이다. 뭐.. 불편할 수도 있고, 보기에 나쁠 수도 있고, 깨져 보이기도 할 수 있겠다.

그래서 가급적 폰트 사이즈와 관련한 부분은 마찬가지로 em이나 rem 단위로 사용하면 훨씬 보기 좋아질 수 있겠다.
물론 이는 절대적으로 지켜야 할 사항인 것은 아니다.

또한 mdn의 @media 내용을 살펴보면 접근성을 위해 em단위를 고려하라고 기재되어 있다.

@media - CSS: Cascading Style Sheets | MDN

 

CSS에서 media query를 사용 시 @media (min-width: 30em) 또는 @media (min-width: 30rem) 이라고 치면 여기서 사용하는 30em과 30rem의 기준이 되는 폰트 사이즈는 브라우저 자체의 기본 폰트 사이즈인 16px이다.(브라우저마다 다를 수 있다)
내가 아무리 body나 html에 폰트사이즈를 변경했다고 해도 무조건 브라우저의 폰트 사이즈가 기준이 된다.

 

px에서 em, rem 구하는 공식

(내가 원하는 사이즈px) ÷ (브라우저 기본 폰트 사이즈 = 16px) = ??em 또는 rem

16px이 브라우저의 기본 폰트 사이즈이고 나는 13px정도의 em값을 원한다면 13/16 = 0.8125em이 된다.

 

em, rem 단위 계산이 너무 어렵다면?

아래 사이트를 이용하자.

PXtoEM.com: PX to EM conversion made simple.

(여기까지는 위 영상에 있는 내용이고, 보다 상세한 설명은 영상을 참고하자.)

 

사이트 이용이 번거롭다면?

html이나 body에 아래 코드를 입력하면 원하는 사이즈를 적용하기 쉽다.

html {
	font-size: 6.25%;
}

적용한 요소의 자식 요소에 적용하고 싶은 font-size 수치가 13px이라면 13em을 입력하면 된다.

html{
	font-size: 6.25%;
}
body {
	font-size: 13em;
}

이 방식에는 한 가지 단점이 존재한다.
html에 font-size: 6.25%를 적용하면 자식 요소에서 1rem을 사용 시 내가 원하는 13em값이 적용되지 않으며 폰트는 가장 작은 사이즈로, 이외도 정말 작은 사이즈로 적용 된다.
body에 font-size: 6.25%를 적용하고 그보다 하위 요소에 내가 원하는 폰트 사이즈 13em을 적용했다면 1rem 사용 시 마찬가지로 13em이 적용되지 않고 브라우저의 기본 폰트 사이즈인 16px로 적용된다.

부모 자식 계산하기가 어려워질 수 있으니 유의하자.

 

그럼 자바스크립트에서 반응형을 만들려면 어떻게 해?

그런데 css만 em단위로 만들면 뭐 하나.. 자바스크립트로 넓이를 측정하거나 반응형을 만들 때 대충 사용해 왔던 if (window.innerWidth > 768) 또는 if($(window).width() > 768) 같은 건 그냥 봐도 px단위이기 때문에 접근성에 이롭지 않다. 

그러면 창 넓이 대신 브라우저의 폰트 사이즈를 기준으로 하면 되겠네 라는 생각이 들을 수 있다.
자바스크립트로는 브라우저 자체의 기본 폰트 사이즈를 읽어올 방법이 없어서 아래 코드와 같이 최상위로 인식하는 html(root)의 폰트사이즈만 가져올 수 있다.

const fontSize = window.getComputedStyle(document.documentElement).getPropertyValue('font-size');

만약 html(root)에 폰트 사이즈를 내가 원하는 사이즈를 지정할 경우 CSS는 브라우저 기본 폰트 사이즈(16px)에 비례해서 적용되는데 자바스크립트는 내가 html에 지정한 폰트 사이즈가 기준이 되어버리는 문제가 생긴다.

 

이렇게 되면 CSS는 적절한 사이즈에서 반응을 하는데 자바스크립트는 반응을 하지 않는다던지, CSS를 작성할 때 웹페이지 전체에 기준으로 잡고 싶은 폰트 사이즈가 16px이 아니라면 rem단위를 사용할 수 없게 되는 문제가 있다.
따라서 위와 같은 방법은 사용할 수 없는 것이다.

이럴 때 사용할 수 있는 게 바로 window.matchMedia()이다.

Window.matchMedia() - Web API | MDN

mdn 사이트에 예제가 있듯이 아래 코드를 인용해 사용하면 자바스크립트에서도 CSS와 같이 브라우저의 폰트 사이즈를 기준으로 em과 rem 단위의 미디어 쿼리를 사용할 수 있게 된다.

if (window.matchMedia("(min-width: 30em)").matches) {
  /* 뷰포트 너비가 30em(480px) 이상 */
} else {
  /* 뷰포트 너비가 30em(480px) 미만 */
}

 

여기까지 접근성 향상을 위해 em과 rem을 CSS와 자바스크립트에서 기본적인 사용 방법은 끝났다.

---

그런데 내가 스킨을 만들면서 빠지면 섭섭한 슬라이드 플러그인이 문제였는데...
글이 너무 길어져서 다음 글로 이어진다.

Slick 슬라이드 플러그인도 breakpoint를 media query로 수정하자

slick 슬라이드 플러그인의 responsive breakpoint를 px이 아닌 media query로 사용하는 방법