웹디자인에 px 단위를 쓰면 안되는 이유 (번역본)
PX단위의 문제점과 EM과 REM 단위를 사용해야하는 이유
이 게시물은 Engage라는 해외 브랜드디자인 업체의 'EM vs REM vs PX – Why you shouldn't “just use pixels”'라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있으며, 피드백을 주시면 최대한 반영하도록 하겠습니다.
원본글 링크
https://engageinteractive.co.uk/blog/em-vs-rem-vs-px
EM vs REM vs PX – 픽셀 단위를 쓰면 안되는 이유
CSS에서 어떤 숫자단위를 써야하는지는 항상 논쟁거리였습니다. 다른이들과 마찬가지로, 우린 REM 단위를 사용하게됐지만 정작 왜 REM 단위를 사용해야하는지도 잘 알지 못했습니다. 우리는 처음에 픽셀단위를 통해 명확한 크기단위를 명시하기 어렵기 때문에 REM을 써야하는것인줄만 알았죠. 그러나 사실은 픽셀 단위가 웹 접근성을 매우 저하시킨다는 점도 있다는걸 알게됐습니다.
글이 너무 길어서 읽기 싫은 사람들을 위한 세줄요약. (원문에는 too long, don't read - 라고 써있군요)
1. 픽셀은 문제가 많으니 사용하지 마세요.
2. 크기와 간격에는 REM 단위를 사용하세요.
3. 미디어 쿼리에는 EM 단위를 사용합시다.
픽셀 (Pixels)
픽셀(px)은 웹 디자인을 하는 왠만한 사람들이라면 다 사용하는 단위죠. 이해하기 쉽고, 픽셀단위는 다른 단위로도 쉽게 계산될수 있고, 널리 알려져있으니 대부분의 사람들이 사용하고있습니다. 디자이너들은 일반적으로 픽셀 단위로 작업하므로 Photoshop에서 직접 크기를 가져와 제작하기도 쉽죠. 그렇다면 대체 픽셀이 왜 문제일까요?
접근성 (Accessibility)
저는 웹에서의 접근성이 기본중 기본이라고 생각합니다. 그래서 어떤 경우에라도 웹 접근성을 저해시키는 행위는 옳지 않다고 봅니다. 실제로 글꼴 크기나 요소 크기 단위로 픽셀을 사용하게되는 경우, 웹 접근성을 크게 손상시키게됩니다.
대부분의 브라우저에서 사용자는 기본 브라우저 글꼴 크기를 기본값으로 설정할 수 있습니다(일반적으로 16px). 따라서 사용자가 기본값을 20px로 설정하면 모든 글꼴 크기가 그에 따라 확장되어야 합니다. 그러나 웹 사이트에서 글꼴 크기를 픽셀 단위로 설정한 경우, 브라우저를 통한 사용자 설정값이 적용되지 않습니다. (예: 30px로 설정된 머리글은 무슨짓을 해도 항상 30px이 됩니다.) 사용자별로 기본 글꼴 크기를 조절하는 것은 모든 브라우저가 지원하는 기본기능입니다. 픽셀을 사용할 경우 이러한 사용자의 사용성을 매우 떨어뜨리게 되므로 웹에서 픽셀단위는 절대 써서는 안됩니다.
물론 글꼴 크기를 픽셀 단위로 설정한다하더라도. 사용자는 브라우저창의 크기조절 (ctrl + 휠, 혹은 +,- 키)를 사용하여 화면 전체 요소들을 확대 / 축소할 수 있긴 합니다. 하지만 브라우저의 기본기능인 기본글꼴크기조절 기능은 사용할 수가 없죠.
REM 단위 (Rems)
웹 디자인을 하고계신 분이라면, REM에 대해 들어보신 적이 있을 겁니다. REM 단위는는 HTML 요소의 글꼴 크기에 따라 글꼴 크기를 설정하는 방법입니다. 또한 메인 글꼴 크기를 변경하여 전체 프로젝트에 빠르게 적용할 수 있습니다 (예: 특정 미디어 쿼리에서 기본 기본단위를 설정 / 화면 크기에 따른 자동변환)
REM을 픽셀 단위로 계산하는 법 (How to Caclculate PX form REM)
일반적인 웹디자인에서 기본 글씨 크기는 10px로 설정되고 단락은 1.6rem이라 했을 때. 이를 계산하려면 두개를 서로 곱해주기만 하면 됩니다. (1.6rem * 10px = 16px )
기본 폰트 크기를 10px로 잡는건 REM을 사용하는 사람들에게 가장 일반적인 세팅입니다. 단순히 숫자를 10으로 나누기만 하면 픽셀 값을 REM 값으로 빠르게 변환할 수 있으니까요. 그러나 기본 폰트 크기를 픽셀단위로 사용한 경우, em 기본단위를 적용한다해도 여전히 사용자별 폰트크기 변경이 지원되지않는건 마찬가지입니다.
일반적으로 기본 폰트 크기는 변하는 경우가 별로 없습니다. 타이포그래피와 글자 크기가 정말 세세하게 적용되어야하는 경우를 제외하고는 화면 크기에 따라 기본단위의 폰트 사이즈를 바꾸는 일은 거의 없다시피하죠. REM단위는 기본 단위를 정해두면, 전체 페이지들에 자동으로 글꼴 크기를 계산합니다. 그래서 더 효율적이고 간편하게 사용이 가능하죠. 이런 편리함을 알게된다면, REM 단위 사이즈는 더 많은 사람들에게 쓰일거라고 생각합니다.
그럼 어떻게 접근성 문제를 해결할 수 있을까? (So how can we un-break our accessibility faux pas?)
방법은 간단합니다. 기본 HTML 글꼴 크기를 백분율로 설정하면 됩니다. 여기서 백분율이란, 기본 브라우저 글꼴 크기를 나눈 결과입니다. 가장 일반적인 방법은 글꼴 크기를 62.5%로 설정하는 것입니다. 그 이유는 16px(일반적인 기본 브라우저 글꼴 크기) 중 62.5%가 10px이기 때문입니다. 이렇게 해도 여전히 1.6rem = 16px로 계산됩니다.이런 경우, 사용자가 기본 글씨크기를 변경할 수 있고, 픽셀단위처럼 문제가 생기지 않습니다.
사실 가장 이상적인 상황은 HTML 글꼴 크기가 100%로 표기되는 것이지만, 실제로는 조금 계산하기 애매한게 사실입니다. 16px는 1rem, 20px는 1.25rem, 24px는 1.5rem 등입니다.
Sass / SCSS를 통해 손쉬운 해결이 가능합니다 (Sass/SCSS to the rescue)
이 숫자들을 모두 머릿속으로 계산하기는 쉽지 않을겁니다. 그래서 그 해결책으로 Sass와 SCSS, LESS 또는 기타 CSS 사전 프로세서(Pre processor)를 사용하는 경우 자동으로 이 부분을 해결해주니. 너무 걱정하지 않아도 됩니다. 해당 기능을 사용하면 손쉽게 원하는 내용을 계산할 수 있으니까요.
그럼 EM이랑 비교해보면 어때요? (What about EMs?)
EM 단위는 REM과 비슷한 방식으로 동작하는 글꼴 단위입니다. 그러나 훨씬 쓰기가 복잡하죠. 예를 들어 글꼴 크기가 2em인 div를 선택하고, 글꼴 크기가 2em인 문단을 추가합니다. 그러면 단락의 글꼴 크기는 현재 div에 비해 상대적인 2em 이 되죠. EM 표기방식은 절대 표기값이 아니기 때문에 계산하기도 어렵고, 사용자에게 직관적인 결과를 예상하기가 어렵게 만듭니다. 이런 EM과 다르게, REM은 절대크기값인 기본단위를 설정하는 방식으로 문제를 해결했습니다.
[기본 단위를 설정 -> 원하는 글씨크기를 위해 '곱할 값'만 정해주면 되는 구조]
그럼 미디어 쿼리에서는 어떻게 어떻게 사용하나요?
우리는 이제 픽셀 단위가 브라우저 기본 설정을 무시한다는 것을 알게됐습니다. 그럼 모든 픽셀 크기를 REM으로 변환하면 되는걸까요? 사실 그건 정답이 아닙니다. 이 내용에 대해서는 다음 링크의 문서를 확인하시면 좀 더 이해가 쉬울겁니다.
PX, EM or REM Media Queries? (추후 번역 예정)
https://zellwk.com/blog/media-query-units/
정리하자면. 여러 브라우저에서 브라우저 줌을 사용할 경우, REM 단위나 픽셀 개념이나. 두가지 모두 미디어 쿼리에 문제가 생깁니다. 정해진 해상도는 같은데 배율이 엉망이 되기 때문이죠. 그렇기 때문에 EM 단위가 현재로서는 우리에게 가장 좋은 대안입니다. REM 단위는 웹 브라우저의 확대기능 사용시 픽셀보다 더 많은 문제가 생기기 때문에, EM보다 더 좋다고 말하기는 어려운거죠.
PIXEL, REM , EM 단위 비교
1) PIXEL 단위는 브라우저의 기본폰트크기 설정이 적용되지 않는다. 그러나 브라우저 확대시 별 문제가 없다.
2) REM 단위는 브라우저의 기본 폰트크기 설정은 적용된다. 그러나 브라우저 확대시에는 픽셀보다 문제가 많이 생긴다.
3) EM 단위는 상대크기 개념을 사용해서 사용하기가 어렵다. 그러나 PIXEL이나 REM 단위에 비해 브라우저 확대시에도 문제가 적다.
하지만 미디어쿼리를 사용하게되면 이 문제는 좀 더 까다로워집니다. EM과 픽셀의 경우 미디어쿼리 상에서 개별 단위가 가진 소수점 표기단위의 차이로 인해 문제가 생기죠. 예를 들어 동일한 CSS 코드 줄에서 최소, 최대 (min, max) 단위의 미디어쿼리를 사용하고, 사용자가 화면 확대, 혹은 기본 폰트크기를 수정하는 경우. 문제가 발생하게됩니다. (0.000 단위의 크기변환중 미세단위를 브라우저가 인식하지 못해서 결과값이 이상하게 나올 가능성이 있다는 얘기)
몇가지 예시를 들어봅시다 (Here are some examples: )
대부분의 브라우저에서는 긴 소수점을 인식하지 못합니다. 그러니 6자리 소수점을 사용해서 뭐가 문제가 되는지를 한번 확인해보죠. (정확한 계산을 위해 10px을 기본 글씨 크기로 설정해서 예제를 만들어보았습니다.)
예 1: 브라우저 확대/축소 값이 100%로 설정되고 브라우저 폭이 640px로 설정됨
EM과 픽셀 단위는 미세한 소수점 자리의 차이로 인해 정확한 결과를 내지 못합니다.
예 1- B : 브라우저 확대/축소 값이 100%로 설정되고 브라우저 폭이 639px로 설정됨
예 2: 브라우저 확대/축소 값이 110%로 설정되고 브라우저 폭이 704px로 설정됩니다(640px * 110% = 704px).
예 2b: 브라우저 확대/축소 값이 110%로 설정됨 브라우저 너비는 705px로 설정됨
2dp를 EM에 사용할 수 없습니다. 이제 6dp 픽셀만 남았네요.
예 3: 브라우저 확대/축소 값이 100%로 설정되고, 브라우저 글꼴 크기가 20px, 브라우저 폭이 800으로 설정됩니다(640 * 125% = 800).
그래서 다시, 소숫점 6자리를 사용한 EM은 여전히 희망이 없네요. 게다가 미디어 쿼리에 픽셀을 사용해도여전히 640px/639px에서 문제가 생깁니다. 픽셀 단위가 EM과 REM 단위를 무시하기 때문입니다. 미세한 차이지만 매우 거슬리는 문제가 생기는거죠.
그렇다면 해결책은 무엇일까요? (So what's the solution?)
안타깝게도, 이 문제에 대한 정확한 해답은 없습니다. 웹 브라우저 엔진 자체가 이 문제를 해결할 수 없는 한, 여전히 미세한 차이에 의한 문제를 해결하지 못한 채 사용해야한다는 거죠. 그나마 가장 간단하게 허용할 수 있는 옵션은 css 코딩시 동일한 블록에 최소 폭과 최대 폭을 중첩되게 사용하지 않는 방법뿐입니다.
위의 문제는 두개의 미디어 쿼리가 모두 적용되거나, 역으로 둘 다 무시되는 경우가 있다는 점입니다. 따라서 가장 안전한 방법은 다음과 같은 내용을 작성하는 것입니다.
왜 이런 문제에 대해 완벽한 해결책이 없을까요? 사실 많은 사람들이 이런 사소한 내용에 대해 잘 모르기 때문일겁니다. 왠만한 통계를 봐도 웹사용자들이 그들의 기본 폰트 사이즈를 바꾼다는 내용은 별로 없습니다. 그러나 이런 통계는 숫자 너머에 그 전제 자체가 잘못되었습니다. 크롬같은 최신 브라우저에조차 기본 폰트 사이즈를 변경하는 옵션들은 고급 옵션 속에 꽁꽁 숨겨져있죠.
함정 (Pitfalls)
이러한 접근에는 몇 가지 위험이 있습니다.
- 동일한 코드 블록에 최소 너비와 최대 너비의 미디어 쿼리를 모두 쓰는 데 사용되는 경우 시간이 더 오래 걸립니다.
- 브라우저에 여러 옵션을 사용하기보다, CSS를 한 방향으로 재정의해야 합니다. 그래서 더 코드가 복잡해지죠.
- 이런 식으로 재정의를 하기위해서는 코드 파일 크기가 늘어날 수 밖에 없습니다. 작지만, 생각해볼만한 부분입니다.
프로젝트 규모나, 누가 개발하는지, 예산이 얼만지 등등 - 여러 현실적요인에 따라서는 픽셀 단위가 더 쉽고 빠를 수 있습니다. 심지어는 접근성을 무시하는게 더 나을수도 있죠. 그러나웹사이트가 누구를 위해 만들어지는지를 생각해보세요.
-
이 글은 브라우저 작동 방식에 대한 지속적인 업데이트로 인해 - 문제 자체가 사라져버릴수도 있습니다. 이 글에 관련되서 참조한 링크를 둘테니 한번 읽어보라는듯 하네요.
Just use pixels
https://benfrain.com/just-use-pixels/
R.I.P. REM, Viva CSS Reference Pixel!
https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/
Length - Mozilla Developer Network
https://developer.mozilla.org/en-US/docs/Web/CSS/length
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
