brunch

매거진 UXUI 디자이너 성장 일기

라이킷 99 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 보통의 디자이너 Mar 27. 2016

안드로이드 앱 디자인할 때
텍스트 고려하기

안드로이드 앱 디자인을 하면서 신경써야할 부분 중 하나는 텍스트가 아닐까 싶다.

PSD로 작업할때는 깔끔하고 괜찮게 보이던 텍스트가 안드로이드 앱에서 보면 촌스러운 것 같기도 하면서 뭔가 지저분하고 내가 작업한게 맞나 싶은 경우가 많다. 그래도 요즘에는 안드로이드에 noto sans가 적용되어 예전보다는 안드로이드폰에서 보여지는 변태스러운 텍스트들이 많이 사라지긴 했다.

이번 글은 안드로이드 앱 UI에 텍스트를 적용하는 것과 관련하여 알아두면 유용한 팁들을 작성해보려고 한다. 안드로이드 스튜디오로 여러 화면들을 목업 작업해보면서 느낀 점들을 바탕으로 서술할 것이며, 텍스트와 관련하여 더 많은 것들을 알게 되면 위의 제목에 1, 2 등을 붙여서 추가로 작성할 예정이다.

안드로이드 스튜디오 화면상에서 보여지는 텍스트는 나눔고딕이다. (안드로이드 스튜디오의 뉴버전에는 다른 텍스트가 적용되었을 수도 있다....내가 쓰는 건 옛날 버전이라서; 내가 경험한 것들을 바탕으로 서술하겠다) 텍스트 자간은 0으로 설정되어 있으며, android:letterSpacing라는 안드로이드 코딩을 통해 수정할 수 있긴 하다. (하지만 검색해본 결과, 자간 컨트롤도 현재는 적용이 안되고 있는 것 같다. 아무래도 영어를 바탕으로 설정되다보니, 한글표현에 있어서는 한계가 좀 있는 것 같다. ←요건 정말 내 생각임)

여튼, 검정색의 프로그래밍 글자와 노란색의 포토샵 글자를 겹쳐보겠다.

포토샵에서 텍스트 자간을 0으로 설정하였더니, 정말 신기하게도 둘의 텍스트가 일치하는 것을 볼 수 있었다.

그럼 행간은 어떻게 설정되어 있을까?

앞서 설명한 것처럼, 프로그래밍에 나타난 텍스트와 PSD의 텍스트를 겹쳤을때의 상황이다. 이때 포토샵에 적용된 행간은 106이다. 행간 또한 android:lineSpacingExtra라는 코딩을 통해 수정이 가능하긴 한다. (난 왜 적용할 때마다 아무런 변화가 없는지는 모르겠지만, 여튼 수정이 가능하니 필요하면 개발자에게 요청하면 될 것 같다.)

그럼 이제부터 안드로이드 스튜디오에서 텍스트가 가지고 있는 패딩에 대해서 설명해보려고 한다. 안드로이드는 PSD의 텍스트와는 다르게 약간의 패딩이 존재하고 있다. 때문에, 가운데 정렬을 할 때에도 정말 가운데로 보여지는 것 같은 느낌이 들지 않을 때가 많다.

자. 이렇게 겹쳐서 보면 안드로이드 스튜디오에 적용된 텍스트가 패딩이 있다는 것을 확실히 알 수 있다.

약 4px 정도 아래로 가있는 것을 볼 수 있는데, 정확한 센터로 보이기를 원한다면 하단의 패딩을 2dp정도 설정하면 해결할 수 있다. (안드로이드 코딩: android:paddingBottom="2dp")

짜잔~ 하단의 패딩을 주면 위의 이미지와 같이 센터 정렬을 할 수가 있다. 혹시라도 개발자가 이런 디테일을 놓치면 디자이너가 텍스트 하단에 패딩 2dp 넣어달라고 요청하면 된다.

앱에서 흔히 사용하는 UI 중 하나인 더보기 버튼을 통해 중앙정렬로 설정했을 때, 상/하단 여백을 픽셀로 비교해보았다.

위에 안드로이드 스튜디오는 글자 기준으로 위는 80px, 아래는 77px이 떨어져있으며,

아래 PSD는 글자 기준으로 위는 78px, 아래는 79px가 떨어져있다.

이 수치를 보면 프로그래밍에서 추출된 텍스트는 센터가 정확히 들어맞지 않는 것을 볼 수 있다.

이 두개를 겹쳐보면, 역시나 안드로이드 텍스트가 살짝 아래로 치우쳐 있는 것을 볼 수 있다.

여기에도 역시 텍스트 하단에 2dp 패딩을 넣어서 다시 적용을 해보니, PSD와 일치하게 보인다.

대부분의 모바일 UI 디자이너는 버튼에 텍스트를 넣거나, 중앙에 텍스트를 넣을 때 본인들이 만든 PSD에 적용된 텍스트와 다르게 적용된 것을 느낀 경험이 있을 것이다. 이러한 경우에는 단순 센터 정렬만 해달라고 하면 해결되기 어렵다. 왜냐하면 개발자는 gravity="center" 혹은 centerInParent="true" 등의 코딩으로 중앙 정렬을 이미 했기 때문이다. (아, 센터 정렬을 해도 하단에 치우쳐 보인다!!!!)

따라서 좀 더 디테일한 부분도 신경쓰길 원한다면 중앙정렬, 그리고 추가로 하단에 2dp 패딩을 달라고 요청하면 된다.

FIN.

keyword