[UI/UX] px에서 rem으로

최근에 "Why designers should move from px to rem — and how to do that in Figma" 라는 제목의 글을 읽었다. 평소에 관심 있었지만 항상 헷갈렸던 주제였는데 개념에 대한 설명과 실제 업무에서 쓰는 예시와 활용 방법 까지 알려주어서 너무 큰 도움이 되었다. 다음에 회사 디자이너 분들과 꼭 같이 읽고 싶다. 간단하게 정리를 해봤다.

px 값의 문제점

절대값, 고정된 물리 값. 브라우저에는 기본값인 루트 폰트 사이즈가 있는데 보통 16px이다. 유저는 설정에서 이를 직접 변경할 수 있고, 시력 장애가 있는 유저의 경우 이 기능이 웹을 이용하는 데 중요할 수 있다. 그런데 px 값을 쓸 경우, 유저가 직접 자신에게 적절한 폰트 사이즈를 선택해도 이를 무시해버린다.

단순히 확대를 하는 경우에는 px에 문제가 없다. 개발자도 html tag에서 css로 루트 폰트를 바꿀 수 있다.

rem을 쓸 때의 변화

루트 폰트 사이즈에 대한 상대 값. 비율 %로 생각해도 무방하다. 만일 유저가 직접 루트 폰트 사이즈를 조절한다면 rem 으로 적용된 값도 같은 비율로 변경된다.

"The beauty of it is that by using rem units for defining font-size, you keep the harmony and hierarchy of your type scale as a designer yet still granting flexibility for users’ needs to adapt font sizes."

em은?

em 역시 rem과 마찬가지로 상대값인데, 해당 폰트가 적용된 텍스트를 감싸고 있는 컨테이너가 기준이 된다. padding과 margin과 같은 spacing에 유용한 단위.

이건 정말 최소한으로 요약한 글이고 본문의 내용이 정말 얻을 게 많았다. 특히 피그마를 쓰면서 실제로 rem을 개발에 적용하는 트릭, 쓸만한 툴, 스타일시트 작성하는 방법 등 저번에 디자이너 분과 협업하면서 나누었던 이야기와도 관련된 내용들이었다. 다음에 개인 프로젝트를 하거나 새로운 프로젝트를 시작하게 될 때 꼭 적용해야겠다.