픽셀과 접근성에 대한 놀라운 진실

https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/

The Surprising Truth About Pixels and Accessibility

넘 길어서 한번에 못 읽겠음.. 나중에 번역해 볼까 

 

pixel을 써야 하나요, ems/rems를 써야 하나요?

이 질문을 정말 많이 들어왔습니다. 좌절과 혼란이 깔려 있는 말이죠. 

이건 감정적인 질문입니다. 왜냐하면 이 주제에 대해 충돌하는 수많은 의견들이 있고, 그게 너무 버겁게 느껴질 수 있기 때문입니다. 

아마 당신은 rems가 접근성에 더 낫다는 말을 들어본 적이 있을 겁니다. 아니면 문제는 fixed이고 pixel은 괜찮다는 이야기를요.

진실은, 당신이 가장 접근성이 뛰어난 제품을 만들고 싶다면 당신은 pixels과 ems/rems를 모두 사용해야 합니다. 이것은 선택하는 것이 아닙니다. rems가 더 접근성이 뛰어난 상황이 있고, pixels가 더 뛰어난 상황이 있어요.

그래서 이 튜토리얼에서 다룰 내용은 아래와 같습니다.

1. 같은 수준의 기초지식을 쌓기 위해, 각 유닛이 어떻게 작동하는지 간단히 살펴봅니다.
2. 접근성 고려가 무엇인지 살펴보고, 각 유닛이 어떻게 이런 포인트에 작용할 수 있는지 생각해봅니다.
3. 그 어떤 시나리오에서도 우리가 선택하는데 도움을 줄 수 있는 멘탈 모델을 만듭니다.
4. 제가 가장 좋아하는 유닛 간 컨버팅 꿀팁과 트릭을 공유합니다.

끝으로 당신은 직관적으로 어떤 시나리오에서 어떤 유닛을 사용할 것인지 결정할 수 있게 될 것입니다.

---

Unit Summaries

Pixels

가장 대중적인 유닛입니다. 무엇이든 사이즈와 관계된 것이면 px 유닛을 사용하죠. pixel의 줄임말입니다. 

.box {
  width: 1000px;
  margin-top: 32px;
  padding: 8px;
}

이론적으로 1px은 컴퓨터 모니터나 휴대폰 스크린에서 한개의 점과 같습니다. 우리가 CSS에서 사용하는 가장 작은 단위고, 'to the metal'에 가장 근접합니다. 결과적으로 그들은 참 직관적인 것처럼 느껴지죠. 

Hardware vs. software pixels
그래서 px 단위에는 거짓이 섞여 있습니다. 이건 정말로 하드웨어 픽셀에 매핑되지 않아요.
최신 디스플레이를 현미경으로 본다면 당신은 그들이 더 이상 작은 R/G/B 사각형으로 이루어져있지 않다는 걸 알게 될 겁니다. 여기 애플 와치와 아이폰의 화면을 클로즈업한 화면이 있어요:
<그림>
심지어 생산자들이 픽셀 그리드로 창의성을 발휘하기 시작하기 전에도 이미 물리적인 픽셀과 우리가 스크린에서, 소프트웨어에서 CSS로 쓰는 픽셀을 구분했습니다.
여기서 사실 아무것도 우리가 px에 대해 어떻게 느끼는지 영향을 미치지는 못하죠. 여전히 우리에겐 가장 단단한 단위입니다!

---

Ems

Em은 흥미로운 친구입니다. 이건 '관계적인' 단위인데, 엘리먼트의 계산된 폰트 사이즈를 기반으로 합니다. 

아래 슬라이더를 움직여 보세요. 제가 말한게 무슨 뜻인지 알게 될 겁니다. 

<슬라이더,,>

본질적으로 em은 비율입니다. 만약 우리의 패러그래프가 margin-bottom을 1.5em 갖고 있다면, 우리는 그 폰트 사이즈의 1.5배가 되어야 한다고 말할 겁니다. 이건 우리가 하나의 값을 다른 것에 걸어두도록 하는데요. 그래서 그것들은 서로 비례하여 사이즈가 달라지게 됩니다. 

여기 재밌는 예시가 있습니다. 아래 문장의 각 단어들은 더 작은 em값을 사용합니다. 그러면 문장이 멀리 갈수록 점점 더 작아지게 됩니다. 패러그래프의 폰트 사이즈를 바꿔보고 어떻게 모든 것들이 '줌 인'되는지 살펴보세요.

<code playground>

Rems

지금은 오래된 뉴스지만, rem이라는 단위가 수줍게 새로 CSS language에 더해진 단위였던 적이 있었습니다. 

rem은 em의 common frustrating issue 때문에 소개되었습니다. em은 합성됩니다.

예를 들어, 다음 snippet을 보시죠.

<style>
  main {
    font-size: 1.125em;
  }
  article {
    font-size: 0.9em;
  }
  p.intro {
    font-size: 1.25em;
  }
</style>
<main>
  <article>
    <p class="intro">
      What size is this text?
    </p>
  </article>
</main>

픽셀로 따지면 .intro 패러그래프 폰트 사이즈가 몇일까요? 

계산해보려면 우리는 각 비율을 곱해야 합니다. 루트 폰트 사이즈가 기본적으로 16px이니까, 16*1.125*0.9*1.25. 정답은 20.25px입니다. 

뭐라고요? 왜죠? 이것은 폰트 사이즈가 상속되기 때문에 나타나는 현상입니다. 패러그래프가 1.25em이라는 폰트사이즈를 가지고 있는데, 이것은 '현재 폰트 사이즈의 1.25배'라는 뜻입니다. 그러나 '무엇이' 현재 폰트 사이즈일까요? 이건 부모로부터 상속되는데요. 0.9em입니다. 그래서 부모의 1.25배인데, 그 부모는 부모의 부모의 0.9배죠. 그러니까 1.125의 0.9배요. 

본질적으로 우리는 모든 em값을 곱해야 합니다. 고정값을 찾아낼 때까지요. 아니면 우리는 we make it all the way to top of the tree. 정말 너무한 소리죠. 

 

... to be continue...