iOS에서 폰트가 Figma보다 작게 보이는 이유?

QA를 진행하던 중 Figma의 디자인이 Android에서는 같은데, iOS에서 전반적으로 작게 렌더링 되는 이슈가 있었다. 개발자도 몰랐던 원인을 파악하고, 어떻게 대응했는지를 정리해 보았다.

iOS에서만 작게 보이는 폰트

처음에는 접근성 설정이나 시스템 폰트 크기 때문일 거라고 생각했다.

하지만 기기를 바꿔가며 테스트해도 결과는 같았고, Figma 폰트와 비교해 보면 iOS에서만 유독 1~1.5px 정도 작게 보이는 패턴이 반복되었다. 개발자에게 문의했을 때 코드상 문제가 없다고 했고, QA에서도 기능적 이슈는 아니라는 판단이 내려졌다.

동일한 간격임에도 폰트 때문에 다르게 보이는 UI

그대로 넘어가는 분위기였지만, 위 UI처럼 텍스트가 많아질 경우 피로감이 상당하고 공간 낭비가 발생하기 때문에 나는 그냥 넘어갈 수가 없었다.

그래서 직접 원인을 찾아보기로 했다.

정확히 뭐가 문제인지는 몰랐지만, 코드상으로 문제가 없는데 화면에 보이는 결과가 다르다는 건 우리가 확인할 수 없는 시스템 내부의 차이일 수도 있겠다는 생각이 들었다. 그래서 앱을 만들 때 사용되는 기술과 관련된 문제일 거라는 가정 하에 Flutter 관련 커뮤니티와 GitHub 이슈 트래커를 검색해 보기 시작했다.

그런데 생각보다 같은 문제를 겪은 사람들이 꽤 많았다.

특히 iOS에서만 텍스트 크기가 다르게 보인다는 이야기가 주기적으로 올라오고 있었다.

Daniel Marcos Perujo의 github, Alex Askerov의 slack-chats 질문

Flutter는 iOS에서 텍스트를 보여줄 때 iOS 고유의 방식이 아닌 Skia라는 자체적인 방법으로 모든 플랫폼에서 UI가 비슷하게 보이도록 글자를 그리는 구조를 사용하고 있었고, 이 과정에서 글자의 크기나 간격 등을 계산하는 기준이 달랐기 때문에 더 작게 구현되었던 것이다. Flutter에서도 이 문제를 인지하고 있었지만, 구조적인 이슈라 아직까지 완전히 해결되지는 않은 상태인 것 같았다.

이 문제를 해결하기 위해 개발자와 상의 후, iOS에서만 폰트 크기에 보정값을 곱해서 적용하는 방식으로 대응하기로 했다. 예를 들어 figma 기준으로 폰트가 16px이면, iOS에서는 1.06을 곱해서 16.96px정도로 설정하는 방식이다.

figma, Android, iOS 모두 동일하게 보이는 UI

디바이스에서 확인한 결과, Android와 iOS가 거의 동일하게 맞춰졌고 작아진 폰트 때문에 틀어졌던 배열들도 모두 제자리를 찾았다.

이 문제를 겪으면서, 비슷한 상황이 발생했을 때 빠르게 대응하기 위해 디자이너로서 관련 지식을 쌓아둘 필요가 있다고 느꼈다.