블루멘토의 사용자는 평균적으로 연령층이 높은 편이다. 실제로 웹과 앱 사용법에 대한 문의가 종종 있었다. 이에 따라 서비스 사용성에 대한 다양한 방면으로 고려하고 일반적으로 보편적인 서비스 흐름을 따르려고 노력했으나, 브라우저 자체의 글꼴 크기를 “크게” 또는 “아주 크게”로 변경하는 기능을 사용하는 사용자를 고려하지 못했던 점이 문제였다.
위에 사진처럼 크롬, 웨일 등의 브라우저에서 글꼴 크기를 변경할 수 있다. 사용자들의 사용 환경을 파악할 수 있는 기회가 있었는데 ‘아주 크게’로 설정하여 서비스를 사용하는 경우를 발견할 수 있었다.
사용자가 브라우저의 글꼴 크기를 “아주 크게”로 변경했을 때, 본문 내용의 글씨는 변하지 않고, 헤더의 글씨만 커지는 현상을 볼 수 있다.
또한, 대시보드 페이지에서도 글꼴 크기를 “크게” 또는 “아주 크게”로 설정했을 때 일부 요소만 크기가 변경되고, 일부 요소들은 원래 크기를 유지한 채로 남아있어 레이아웃이 깨지는 문제가 발생했다. 이로 인해 글씨끼리 겹치거나 레이아웃이 왜곡되는 등의 심각한 사용성 문제가 발생했다.
위에 사진처럼 화면이 의도한대로 그려지지 않고 레이아웃과 겹치거나 글씨끼지 겹치는 상황이 발생했다.
문제의 원인을 분석해보니, 기본 글꼴 크기인 16px로 그리게 될 글자는 CSS에서 따로 16px로 설정해주지 않아 글꼴 크기 변경에 따라 크기가 조정되었지만, 고정된 px 단위로 설정된 요소들은 크기 변화에 영향을 받지 않는다는 점을 확인했다. 이로 인해 브라우저의 글꼴 크기 변경 시 일부 요소는 크기가 변경되었지만, 다른 요소들은 고정된 크기를 유지해 레이아웃이 깨지는 현상이 발생한 것이다.
고려했던 해결 방법
문제를 해결하기 위해 rem 단위를 도입하는 방법 외에도 몇 가지 대안을 고려했다.
각 요소별로 미디어 쿼리를 사용하여 다양한 글꼴 크기에 맞게 레이아웃을 조정하는 방법
이 접근법은 사용자에게 더 세밀한 조정을 제공할 수 있지만, 다양한 기기와 브라우저 환경에 맞춰 일일이 코드를 수정해야 하는 번거로움이 있었다. 또한, 유지보수의 복잡성이 증가할 수 있어 장기적으로는 효율적이지 않다고 판단했다.
JavaScript를 사용해 브라우저의 글꼴 크기 변경을 감지하고, 그에 맞춰 동적으로 레이아웃을 조정하는 방법
이 방법은 브라우저 호환성 문제와 성능 저하를 초래할 수 있어 실용적이지 않다고 판단했다.