rem을 커스텀해서 사용하는 것에 대해서

루트 16px과 루트 10px

px / rem / em

현재 제가 진행 중인 프로젝트에서는 화면 구성단위를 rem을 사용하고 있습니다. 하지만 통상적으로 알려진 1 rem = 16px이 아닌, 1 rem= 10px로 적용해서 사용하고 있습니다. 담당하시던 이전 프론트 개발자 분께서 그렇게 적용하여 화면을 구성하였다는 것을 최근에 알게 되었는데, 문득 궁금해졌습니다.

일반적으로 브라우저의 루트 글꼴 사이즈가 16px이기 때문에 그에 맞춰 rem을 변환하여 사용하는데, 그 디폴트 값을 바꾸는 게 문제가 될 것인가?

부끄럽지만 저는 디자인 핸드오프 때 rem을 따로 기재하지 않았습니다. 서둘러 현재의 프로덕트를 만들어가고 있기 때문에 프로젝트 초기에 이런 파운데이션을 개발팀과 서로 논의하며 정해진 사항이 없었기 때문입니다. 저에게는 디자인 규칙이 잡혀있고, 그에 대해선 공유하고 있는 사항이었지만, 상호 간에 어떻게 더 효율적으로 디자인 시스템을 전개해 나갈 수 있는지에 대해선 토론이 불충분 했습니다. 디자이너는 화면을 구성하여 전달하고, 개발팀에서는 전달받은 화면을 구현하기에 급급했기 때문입니다.

그러한 이유로, 개발팀에서 px을 rem으로 전환하여 반영하고 있다는 것을 몰랐습니다. 추후 1차적으로 프로덕트가 완료되었을 때, 디자인 QA를 통해서 알 수 있었습니다.

퍼블리싱된 엘리먼트들을 확인하면서 rem을 사용함은 알게 되었지만, 제가 알고 있는 연산이 맞지 않아 당황했었지만 곧 16px 기반이 아닌 10px 기반으로 전환하여 사용했다는 것을 알게 되었습니다. 현재 이 프로젝트를 담당하는 프론트 개발자 분께서 부재하여 그 의도는 알 수 없었습니다. 하지만 유추해 보기로는, 디자인 쪽에서 픽셀을 rem으로 전환하여 전달해주지 않았을뿐더러 디자인 측이던 개발 측이던 '전환하는 과정' 자체의 리소스를 제거하기 위해 10px로 지정하지 않았을까 싶습니다.

가령 디폴트값에 따라 24px의 패딩을 나타내려면 24px / 16 = 1.5 rem으로 나오지만, 루트가 10px인 경우는 24px / 10 = 2.4 rem으로 전환했을 때의 값을 알기 쉽습니다. 픽셀로 확인한 숫자에 소수점 한자리만 내리면 되기 때문이죠.

현재 담당하고 계신 프론트 개발자분도 루트를 변경하여 rem을 이용해 본 적 없어 이 방식의 효용성을 아직 알지는 못하시지만, 저희가 유추한 그러한 이유가 납득이 되어 우선 그대로 사용해 볼 예정입니다. 추후 이 방식에 대해서 예상 못한 애로 사항이 발생한다면 더 효율적인 방식에 대해 또 한 번 모색해 볼 수 있는 기회를 얻을 수 있을 것 같습니다.