미디어 쿼리를 사용하여 반응형 사이트를 코딩하던 중 아이폰의 가로 화면을 확인했을 때, 일부 폰트 사이즈가 자동으로 확대되어 버리는 현상을 발견했습니다. 거기다 평소 이용하는 세로 화면 위치에서는 변화가 없는데, 가로 화면으로 돌렸을 때만 글자가 확 커지네요!
CSS를 이리저리 수정해봐도 소용이 없어서 여러 가지로 검색해 봤더니, 아이폰 자체의 가독성을 위한 기능이라네요; 그 기능, 웹 디자인 하는 사람에게는 에러와 다를 바 없음 ㅠ ㅠ .. 아무튼, 해결 방법을 찾아서 여기 기록해 둡니다.
CSS에 한 줄 넣는 것으로 해결!
해답을 먼저 말씀드리면, CSS에
body {-webkit-text-size-adjust: 100%;}
위의 한 줄만 넣으면 해결이 됩니다.
왜 -webkit-text-size-adjust: 100%; 인가?
-webkit-text-size-adjust는 글자 그대로, 텍스트의 사이즈를 조절하는 기능을 제어하는 속성으로, 기본 값이 auto이기 때문에, 자동으로 조절됩니다.
지정할 수 있는 값으로는 auto none <%> 가 있고, 단순히 none으로 지정해서 자동 조절을 무효로 만들고 싶은 마음이 들지만, {-webkit-text-size-adjust:none;}으로는 PC로 확인할 때 확대, 축소의 문제가 발생하는 버그가 있기 때문에, 100%로 지정해주어야 한다는 것입니다. (현재 CSS를 알려주는 여러 블로그에서 none으로 지정하는 방법을 알려주는 곳이 아주 많지만, 옳은 방법이라고 볼 수 없다는 것이 전문가들 다수의 의견입니다.)
제일 중요한 것은 실제 기기로 확인하는 것!
이번 작업에서 PC브라우저&PC내의 모바일 확인 프로그램과 제가 사용하는 안드로이드 폰으로 확인했을 때 아무런 문제가 없었기 때문에 나름 검증되었다고 생각하고 그대로 검토를 받았는데, 검토하는 분의 아이폰으로 확인하니 이런 현상이!!! 아이폰의 가로 화면을 확인했을 때는 처음 보는 현상이어서 [엥?] 하고 놀랐네요.
가독성? 디자인?
폰트가 자동으로 조절되는 것은 가독성을 높이기 위해 만들어진 시스템일텐데, 이 기능을 무시해버리는 것이 디자이너로서 어떨까…라는 생각도 들었습니다. 하지만 사이트의 전체적인 밸런스를 보면 이 부분만 갑자기 글자가 확 커져서 누가 봐도 이상해! 라는 인상을 줄 수 있으니 또 좋지 않다는 생각도 듭니다.
웹 디자이너라면 한번쯤 생각해 볼 만한 이야깃거리인 것 같습니다. 앞으로의 안건도 고민하면서 제작하게 될 것 같습니다.
+ 참고 사이트 DevAchieve, yousoro.blog, てっく煮ブログ