데스크탑 스크린 같은 건 없습니다. - 접근성

웹 페이지를 만들다보면 디자이너와 함께 아래와 같이 페이지를 쪼개곤 합니다.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

(출처: Typical Device Breakpoints)

이 방법은 정말 편하고 유용합니다. 페이지의 요소들을 특정 스크린에 맞춰 몇 가지만 고려하면 되기 때문입니다. 이번에 소개하는 글은 이런 브레이크 포인트, 즉 중단점은 존재하지 않는다는 걸 말합니다. 왜냐하면 같은 스크린 사이즈더라도 폰트사이즈를 키우거나 모바일에서 줌인 또는 줌아웃을 하기 때문입니다. (실제로 제가 만난 몇몇 기획자는 큰 폰트로 보기위해 항상 200%정도 폰트를 키워서 보곤 했습니다.)

이 글에선 사용자의 접근성을 개선하기 위해선 어떻게 하면 좋을지 소개하고 있습니다.

1. 고정된 px을 사용하는 것보다 em, rem 등을 사용하기

2. flexbox를 마스터하기

3. 스크린 사이즈보다 컨텐츠의 크기를 기반으로 media query 작성하기

등 입니다.

그리고 왜 이런 '좋은 방법'을 지키기 어려운지도 소개하고 있습니다. (원글 살펴보기!)

사실 접근성을 개선하는 이러한 방법은 자주는 아니더라도 종종 듣곤 합니다. 하지만 이 글에서 말하는 것처럼 지키기 정말 어렵습니다. 그럼에도 지킬 수 있도록 노력해야 하고 방법은 찾아봐야 한다고 생각합니다. 이 글에서 인상 깊었던 문장이 있어서 소개합니다.

The point is this, though: people do things you wouldn’t expect for all kinds of reasons. It’s not just about “accessibility” and “people with disabilities”. It’s high quality craftsmanship if your stuff just works™️.
(사람들은 온갖 이유로 기대하지 않는 일을 합니다. 이건 단지 '접근성'과 '장애인'에 관한 것이 아닙니다. 당신의 물건이 제대로 작동한다면 그것은 고품질의 장인정신입니다™️.)

그리고 접근성과 관련해 한 권의 책을 소개해드리려고 합니다. '인클루시브 디자인 패턴 접근성 있는 웹디자인하기 - 헤이던 피커링'은 접근성에 대해 소개하면서 굳이 '불편한 사람'을 강조하지 않습니다. 오히려 너무나도 현실적으로 '고객을 놓친다'는 관점을 강조합니다. 그리고 접근성을 고려하고 개선하는 좋은 방법들을 소개합니다. 또한 여전히 유효합니다 !

사용자가 커스텀하여 사용하는 스타일을 크롬에서 테스트해볼 수 있도록 하는 확장 프로그램도 소개하고 있습니다.

그리고 px을 rem으로 변환해주는 패키지도 소개합니다.