개발자는 필수상식, 디자이너도 알면 좋은 PX과 REM
그래서 REM을 쓰면 뭐가 어떻게 달라 보일까? 직접탐구
It’s time we say goodbye to pixel units
어제 미디엄에서 저렇게 자극적인 제목의 글(https://uxdesign.cc/say-goodbye-to-pixels-cb720fbaf250)을 발견했다.
제플린에서 디바이스마다 px, pt, %, dp, sp 등등 뭘 쓸 건지 아무리 물어봐도 픽셀밖엔 난 몰라를 외치며 iOS도, 안드로이드도 항상 px로 넘겼더랬다. 어차피 Sketch, Zeplin에서 iOS, Adroid만 선택하면 알아서 export 해줄 텐데.
저 글의 캐치프레이즈는 Absolutely no absolute unit!이다.
왜 Absolute unit을 쓰지 말라는 걸까? 이유는 접근성이다. 여기서 접근성이란 수 없이 다양한 디바이스에서 수 없이 다양한 세팅으로 접근하는 요즘 상황을 고려한 접근성이다. 다양한 상황에 따라 다르게 반응하는 넓은 의미의 반응형이라고 할 수 있다. 웹, 태블릿, 모바일 같은 서너 개의 브레이크 포인트만 가진 반응형은 명함도 못 내미는 시대가 되었다. 핸드폰만 해도 기종마다 모두 다른 해상도를 가지고 있는데 그것들을 모두 최적화하지는 못하더라도 봐줄 만한 수준까지는 맞춰야 한다.
PX, EM, REM에 대한 이해가 명확하지 않다면, 이 글은 잠시 멈추고 미디엄의 왓챠 채널에 올라온 https://medium.com/watcha/watcha-%EA%B0%9C%EB%B0%9C-%EC%A7%80%EC%8B%9D-px-em-rem-f569c6e76e66 이 아티클을 읽어보길 추천한다(미디엄이지만 한글!).
대략적인 이해를 갖추었다면 실전으로 돌아와서 그러면 대체 뭐가 어떻게 다르게 보이는데? 에 대한 답을 찾아보자.
테스트를 위해 간단한 페이지를 만들어보았다. https://aaahyun.github.io/PX_EM_REM/ (EM은 무시하자)
같은 모바일인데도 저 정도로 차이가 심하게 난다. 그럼 미디어쿼리로 픽셀 값을 일일이 다 잡아주어야 할까? 350px 이하는 Padding을 첫 번째 박스는 50, 두 번째 박스는 20, 세 번째 박스는 10, 마지막 박스는 6으로 잡아주시고 350~500 사이는 ~, 500~760 사이는~ 760~960 사이는~ 이렇게 요청하면 개발자가 화가 안 날 수 있을까?
두 번째 사진을 보자.
갤럭시 노트8에서 픽셀로 개발한 버전, REM으로 개발한 버전이다. 이때 REM의 CSS에는 딱 두 가지가 추가되었는데
html {
font-size: 62.5%;
}
@media screen and (max-width: 370px) {
html {
font-size: 58%;
}
}
이다. 디폴트 html 폰트 사이즈는 10px을 기준으로 rem값을 계산하고, 스크린 사이즈가 370px 이하이면 html의 지정 폰트 사이즈를 9.28px(html 기본 폰트 사이즈 16px * 0.58)로 줄여라! 는 뜻이다. 그렇게 하면 rem으로 지정해두었던 모든 사이즈가 대략 7% 정도 줄어들어 오른쪽 같은 결과물을 아주 적은 노력으로 얻을 수 있다.
물론 픽셀로도 같은 결과물을 얻을 수는 있다. 그러기 위해서는 사이즈를 지정하는 모든 요소를 새로 지정해주어야 하기 때문에 rem베이스보다 최소 10배 이상 번거로운 작업이 된다.
개발자라면 모르면 당연히*100 손해다.
그렇다면 디자이너는?
그래도 디자인은 픽셀로 하는 거 아니야?
맞다. 그래도 디자인은 픽셀로 한다.
스케치던 피그마던 설사 포토샵이라 할지라도 디자이너가 rem으로 넘기는 일은 별 의미가 없다. 그럼 이걸 내가 굳이 알아야 하나? 할 수 있지만 개발자의 개발과정을 알면 개발자와의 불필요한 논쟁이 적어지고 프로덕트 완수라는 공동의 목표를 더 쉽게 이룰 수 있다.
무엇보다도 디자이너로써 일의 능률이 상승한다. 개발자가 px, vh, vw, em, rem이라는 도구를 가지고 있다는 것을 알고 있으면 margin과 padding값 들이 전체적으로 20% 축소하는 와중에 히어로 이미지는 어느 스크린에서건 화면의 80%를 유지하게 할 수 있고, 그런 것들을 개발자에게 간단하게 요청할 수 있다.
html css를 조금만 할 줄 안다면 메인 해상도 기준 스태틱 프론트엔드 개발이 끝나면 본인이 미디어쿼리를 더해보고 어디를 어떻게 추가로 수정할지만 정해도 된다. 모든 스크린 사이즈마다 pixel perfect 하게 페이지를 만지지 않아도 된다는 뜻이다.
