XD와 제플린, 안드로이드 사이 최적의 행간 찾기
Photo by Ben Kolde on Unsplash타이포그래피는 어떤 폰트를 선택하고, 사이즈의 크기와 굵기를 어떻게 수정하느냐에 따라 다양한 디자인을 만들어낼 수 있는 중요한 디자인 요소입니다. 그만큼 많은 디자이너분들께서 탄탄히 쌓아 올린 텍스트 가이드를 웹이나 앱에 온전히 표현하는 것을 주의 깊게 보고 있으실 것이라 생각합니다.
저는 오늘 앱 개발 초기에 디자인 QA를 진행하면서 안드로이드 앱에서의 폰트 행간이 제플린에서의 값과 일치하지 않아 개발자 분과 나름의 규칙을 만들어 해결했던 경험을 적어볼까 합니다.
참고로 안드로이드 네이티브 앱 개발 과정에서 문제를 발견하였고, 프로토타입 디자인은 Window기반 Adobe XD와 Zeplin을 사용하였습니다. 제가 사용한 폰트는 시스템 폰트인 본고딕 Noto Sans입니다.
저는 디자인 파일에서 기본 텍스트 행간을 폰트 사이즈의 1.5배로 정해놓고, 예외 케이스에서만 별도의 값을 적용해 둔 상태였습니다. Adobe XD에서 자동으로 지정해주는 행간 값을 사용하지 않은 이유는(폰트 사이즈에 따라 행간 값이 변경됩니다) 본문으로 사용하는 17~15 사이즈의 폰트에서는 간격이 1.3배 정도로 조밀하다고 느껴졌기 때문입니다.
디자인 전달 후 테스트 앱을 처음 열어보았을 때, 디자인 시안과 앱에서의 행간이 매우 다르고, 조밀하여 가독성이 떨어지는 문제를 발견하였습니다. 제플린 XML 내 Textview에 행간 스타일이 들어가지 않아 default 행간 사이즈가 적용되어 생긴 현상이었습니다.
콘텐츠를 보는 데에 큰 지장이 있는 것은 아니지만, 디자인 완성도와 가독성이 매우 떨어지는 상황이었기 때문에 개발자님과 행간을 적용하기 위한 논의를 우선 진행하였습니다.
텍스트에 이름 붙여주기
저희는 앱 초기 모델 개발 과정에 있었기 때문에 화면이 빈번하고 급격히 변경될 수 있다는 점을 감안하고, 유지보수를 쉽게 할 수 있고, 리스크를 최소화할 수 있는 방향이 필요했습니다.
웹의 CSS class와 같은 개념으로 안드로이드에서는 stylename을 지정할 수 있어 각 텍스트에 클래스를 부여하여 한번에 스타일을 모두 바꿀 수 있도록 하였습니다. 개발자님과 협의하여 XD 파일과 제플린, xml에서 모두 Character Style 이름을 일치시켜 서로 소통이 용이하도록 하였습니다.
Adobe XD와 제플린에서의 텍스트 가이드 이름 맞추기XML의 Style name, 제플린의 텍스트 카탈로그, Adobe XD의 Character Style 명칭이 모두 같은 것을 볼 수 있습니다.
네이밍 관련 덧붙이자면 저는 텍스트 가이드에서 regular와 bold를 별도로 나누어주었습니다.
디자인 파일에서는 나눌 필요가 없었으나, 제플린에서 같은 폰트의 크기와 행간 같은 속성을 가지더라도 regular / bold처럼 font-weight가 다를 경우 각각 다른 가이드로 인식하기 때문이었습니다.
개발자님께서 일일이 텍스트뷰에 bold 속성을 추가해야 하는 번거로움이 있다 하셔서 추가된 부분입니다.
이 과정에서 제플린의 xml 속성도 일부 수정해주었습니다.
제플린에서의 XML 속성 중 Line Spacing 값을 선택해 줄 수 있는데요, 안드로이드 텍스트 줄 간격을 조정하는 데에는 lineSpacingExtra(고정값)와 lineSpacingMultiplier(상대값)을 사용할 수 있습니다.
저희는 개발자님께서 고정값을 사용하는 것이 더 좋을 것 같다는 의견을 주셔서 lineSpacingExtra를 사용하는 것으로 결정, 다음과 같이 값을 맞춰주었습니다.
실제 안드로이드 화면에서 최적의 행간 적용하기
이렇게 하여 각 텍스트 클래스마다 lineSpacingExtra값을 줄 수 있었는데요, 또 다른 문제가 있었습니다.
제플린 상의 XML 행간 값을 적용했을 때 실제 앱에서 매우 다르게 나온다는 점이었습니다.
가상 픽셀을 사용하는 XD 프로그램 특징이나, 윈도우 기반 제플린 프로그램의 아쉬운 기능들(섹션이나 스타일 수정이 맥OS처럼 매끄럽지 못합니다), 안드로이드에서의 폰트 렌더링 등 여러 이유를 추측해보았지만
우선 디자인과 개발 화면을 가능한 일치시킬 수 있도록 시뮬레이션을 통해 행간 값을 정해서 전달해드리는 방향으로 논의하였습니다.
같은 문제를 겪으신 것은 아니지만 내부적으로 안드로이드 폰트 시뮬레이터를 만들어 테스트하셨다는 케이스를 참고하여 안드로이드 디자인 폰트 시뮬레이터 앱을 설치, 각 속성 값에 따른 변화를 확인할 수 있었습니다.
안드로이드 폰트 시뮬레이터그리고 시뮬레이션 화면과 비교할 대상이 되는 화면이 필요했는데요, 저는 Adobe XD 안드로이드 프리뷰 앱 화면을 기준으로 하였습니다.
XD 프리뷰 앱에서는 디자인에 사용된 폰트가 이미지화되는 것이 아니라 폰트로 렌더링 되기 때문에, 실제 앱과 유사하게 화면을 확인할 수 있어 위의 시뮬레이터 앱을 함께 비교하며 수치를 잡아보았습니다.
Adobe XD의 모바일 앱은 프로토타입의 폰트를 렌더링 하여 보여주지만, Share - Create link 기능을 통해 게시된 링크로 접근 시에는 이미지화된 화면으로 확인할 수 있습니다.
이렇게 화면을 비교하며 적당하다 생각되는 값을 개발자님께 각 텍스트 클래스별로 전달드려 적용하였습니다.
예시) 폰트 사이즈가 24dp인 Heading의 제플린 xml android:lineSpacingExtra값은 10dp이지만,
시뮬레이션하여 가장 적절하게 보이는 값인 6dp를 적용하도록 전달
XD화면과 실제 개발된 앱 화면 비교이러한 과정을 통해 실제 앱과 프로토타입 앱 화면에서의 텍스트 스타일이 일치하는 것을 확인할 수 있었습니다.
맺음말
저희는 위와 같은 과정을 거쳐 해당 문제를 해결했지만, 모든 텍스트 행간을 상대 값으로 지정하여 자동적으로 조정되게 하거나, 기본적으로 행간이 여유 있는 폰트를 사용하는 방법 등 다른 방향으로 해결할 수 있는 방법도 있을 것으로 생각합니다.
디자인을 다양한 플랫폼에 구현하는 과정에서 여러 부서와의 원활한 소통이 가장 중요하다고 생각하기 때문에, 하나의 사례로 읽어주셨으면 좋겠습니다.
또한 위 내용은 올해 1~2월 사이 적용했던 것으로 기술한 내용이 현재 프로그램별 업데이트 상황에 따라 다를 수도 있습니다. 다른 좋은 사례나 궁금한 점이 있으시다면 댓글로 의견 나누어주시면 많은 도움이 될 것 같습니다.
읽어주셔서 감사합니다.
