이 글은 이 글을 보고 작성했습니다.
우선 위에서 소개한 글을 한번 읽어보시는 것을 추천드립니다. 저는 완전 초보의 관점에서 재해석한 의견을 늘어놓을 예정이라, 이 글에 쉽게 휩쓸리지 않도록 전문가의 관점을 먼저 알아두세요.
개념
px
1px은 하나의 픽셀 길이를 의미합니다. 즉, px에서 소수점 자리는 실질적으로 의미가 없습니다. 픽셀을 반으로 쪼갤 수는 없으니까요.
이 단위로 지정된 크기는 픽셀에 고정됩니다. 여기 같은 크기, 다른 해상도를 가진 두 모니터가 있습니다. 하나는 HD11280 × 720고, 다른 하나는 FHD21920 × 1080입니다. 여기에 똑같은 px 길이를 가진 선을 띄우면 FHD로 보는 것이 HD로 보는 것보다 짧아 보입니다. 픽셀의 밀도가 다르기 때문입니다.
em
1em은 현재 요소의 폰트 크기만큼의 길이를 의미합니다. 그렇기 때문에 현재 요소 혹은 상위 요소에 한 번은 폰트 크기가 지정이 되어야 합니다. 하지만 보통의 경우 브라우저에서 최상위 폰트 크기를 지정하기 때문에 CSS에서 지정이 되지 않아도 사용이 가능합니다.
폰트 크기가 달라지면 1em이 달라집니다. 제 블로그로 예를 들자면, 본문에서 쓰는 1em의 길이와 소제목에서 쓰는 1em의 길이가 다릅니다.
rem
rem은 root em, 최상위 요소(HTML 태그)의 1em을 의미합니다. em 부분에서 언급했던 '브라우저가 지정하는 폰트'가 이 부분입니다.
em과 다른 점은, 동일한 조건이라면 하나의 HTML 안에서는 같은 길이를 나타낸다는 부분입니다. 아까 em의 경우 본문과 소제목에서의 길이가 다르다고 했지만, rem은 본문에서도 소제목에서도 길이가 같습니다.
이 값이 달라지는 경우는 두 가지입니다. HTML에 폰트 크기를 지정할 때, 브라우저의 폰트 크기 설정을 바꿀 때. 앞서 소개한 글과 이 글에서 중요하게 생각하는 부분이 이 부분입니다. 브라우저의 폰트 크기 설정이요.
%
%는 상대적 크기를 나타냅니다. 보통 부모 요소의 그것이 기준입니다.
폰트의 경우 부모 요소의 폰트를 기준으로 합니다. 이 본문 내에서 폰트 크기를 120%로 지정한다면 본문의 폰트 크기의 120%, 이 정도 크기가 됩니다.
그래서 뭐?
결론은 이겁니다. 길이와 폰트 크기를 지정할 때 rem을 쓰자.
위에서 소개한 바, 이 rem이란 단위는 브라우저 설정에 따라 바뀝니다. 사용자가 보길 원하는 글씨 크기라고도 볼 수 있습니다. 이는 결국 제각각의 화면 크기와 해상도를 모두 포용하는 유저 친화적 기준이 되는 겁니다! 상대적이고 변칙적인 단위지만 사용자가 지정하는 값이기 때문에 오히려 절대적인 기준이 됩니다. 결국 읽을 수 있는 정도의 폰트 크기를 설정해놓을 테니까요.
이 유저친화적인 면은 현재로써는 어느 단위도 따라가지 못합니다. 화면의 크기, 창의 크기도 기준으로 사용할 수 있지만 이것들이 사용 환경과 절대적으로 대응되는 것은 아니니까요.
위에서 소개한 글과의 관점 차이는 있습니다. 그 글에서는 이렇게 말합니다. 폰트 크기는 rem으로 지정하고, 길이는 em으로 지정해서 각 폰트에 대응하는 유연한 디자인을 하자. 옳은 말씀입니다. 특히 블로그의 경우 글자가 가장 중심이 되기 때문에 각 내용의 글자 크기를 중심으로 디자인이 이뤄진다는 것은 원리적으로는 맞습니다.
그러나 저는 글자가 포함이 되지 않은, 혹은 폰트 지정이 하위 요소에서 되어서 그 크기가 잘 파악이 되지 않는 것들의 길이들이 문제가 된다고 생각합니다. 또한 폰트의 크기 역시 rem에 따라 변하기 때문에, 굳이 해당 폰트 크기를 기준으로 하지 않고 rem을 단위로 사용해도 브라우저 설정 폰트 크기에 대응하는 디자인이 가능하다는 생각입니다.
그럼 나머지는 어따 쓰나요
폰트와 주요 디자인은 rem으로 하자고 주장했습니다. 그럼 나머지 단위들은 어디다가 쓸까요? 제 생각을 한번 정리해봤습니다.
px
이건 1px같은 실선이나 HTML 태그에서의 크기 지정... 에 쓰면 좋을 것 같습니다. 솔직히 대체가 안되는 경우 아니면 쓰지 않는 것을 추천드립니다.
em
글자와 연결되어 같이 움직이는 것들에 사용하면 좋습니다.
이 각주 숫자3예시용 각주입니다.의 경우 글자 크기와 같이 움직여야 합니다. 큰 글씨와 함께 써도 그 크기가 같으면 시인성이 떨어지니까요. 그 외에도 
이런 아이콘의 형태 같이 글자처럼 쓰이지만 글자가 아닌 경우에도 쓰면 좋습니다.
%
길이에서 %는 정말 유용하게 쓰입니다. 이건 적응형 디자인의 필수 단위입니다.
다만 폰트의 경우 사용하기 애매합니다. 이런 포스트를 작성할 때 좀 더 직관적인 단위로 사용할 수 있겠고, 좀 더 세밀한 크기 조절이 필요한 경우에 사용하시면 될 거 같습니다. 여기서 일의 자리가 em에서 소수점 둘째 자리거든요.
마치며
사실 이런 글을 보고 내 CSS를 뜯어고치는 사람은 정말 드물 겁니다. 특히 취미 블로거인 경우에는 정말 엄두가 안 나는 행위입니다.
그러나! 블로그를 싹 갈아엎고 브라우저 설정에서 폰트 크기를 변경해볼 때 그 만족감은 정말 대단합니다. 여러분도 한번 갈아엎어 보세요!