[안드로이드 디자인]텍스트 줄 간격 설정에 대한 가이드는?(lineSpacing)

문자를 이용하여 디자인하는 것이란 문자 자체가 주는 아름다움만을 말하는 것이 아니라 전달의 한 수단으로써 활자의 기능을 보다 효율적으로 활용하기 위한 구도나 배치 등을 함께 고려하여 사용하는 것을 말한다.

그런 측면에서 보면, 안드로이드 app UI를 디자인할 때 문자에 대한 애로사항이 많다. iOS처럼 디지털 활자를 표방하며 대대적으로 업데이트한 이후 커닝(kerning)까지 설정할 수 있는 섬세한 감성(?)이 있는 것이 아니기 때문. 하다못해 문자의 자간조차 편하게 조절할 수 없다.
(개발자들이 많이 헷갈리는 것이 자간을 textScaleX 라고 생각하는데 이것은 문자 가로 비율을 말한다. 흔히 장평이라고 말하는 것. 이것을 늘리면 문자가 볼을 집어 쭉 늘리듯이 늘어난다. stackoverflow를 찾아보면 방법이 아예 없는 것은 아닌 것 같다. http://stackoverflow.com/questions/5133548/how-to-change-letter-spacing-in-a-textview)
그나마 쉽게 설정할 수 있고 효과가 큰 것이 줄 간격(lineSpacing)이다.

줄 간격을 꼭 조정해야 하는 것은 이 이유만으로 충분하다. 안드로이드 textView 기본 줄 간격이 아름답지 못하니까.
난 디자이너잖아!

이렇게 보고싶다고? ~no no

line-height, lineSpacing, 줄 간격, 행간 어떤 용어도 좋다. 어차피 디자이너는 실제 코드를 타이핑 하는 사람이 아니니까...GUI개발 규칙 가이드나 실무 개발자와 용어를 약속하고 그렇게 전달해주면 임무는 완료다. 안드로이드 내에서 줄 간격을 조정할 수 있는 방식은 두 가지이다.

• lineSpacingExtra
• lineSpacingMultiplier

굳이 외울 필요는 없다. 나도 모르기 때문이다. (;;) 중요한 것은 저 텍스트가 아니고 둘의 차이점이다.

1. lineSpacingExtra

고정 간격 값이라고 생각하면 된다. CSS로 비교를 해보자면, line-height : 10px; 값을 준 것과 같다. 기본 단위는 dip이며 텍스트가 기본적으로 가지고 있는 높이 값에 입력받은 값을 더하면 그것이 한 줄의 높이 값이 된다.

[텍스트의 높이 값] + [입력받은 간격 값] = [한 줄의 높이 값]

이 설정으로 조정하게 되면 텍스트 사이즈가 커지더라도 간격 값은 고정이기 때문에 텍스트 크기에 따라 값도 변동되어야 한다.

2. lineSpacingMultiplier

가변 값이라고 생각하면 된다. 마찬가지로 CSS로 비교를 해보자면, line-height : 135%; 값을 준 것과 같다. 1이 텍스트의 높이 값 100%를 말한다. 1.3을 입력하면 현재 텍스트 높이의 130% 값을 가지게 된다. 

[텍스트의 높이 값] x [입력받은 값] = [한 줄의 높이 값]

이 설정으로 조정하게 되면 텍스트 사이즈가 커짐에 따라 간격 값도 늘어나고 작아질 수록 간격 값도 상대적으로 줄어든다.

다시 한번 말하지만 lineSpacingExtra, lineSpacingMultiplier 이런 것을 기억할 필요가 전혀 없다. 프로그램별로 같은 속성이라도 명령어가 다르므로 다 기억할 수가 없을 뿐 아니라 디자이너가 굳이 알 필요는 없다고 생각한다. 다만 고정 값으로, 비율 값으로 줄 간격을 조정할 수 있다는 것은 기억하자.

휴~ 이제 좀 읽을만 하네.

나의 경우는 app 전체 줄 간격을 하나의 비율로 통일하고 가이드 문서에 한 번만 기재한다. 사이즈야 쓰임새에 따라 다르겠지만 어차피 비율로 조절되니까 말이다. 그리고 특별하게 줄 간격을 늘리거나 줄여야 하는 요소에만 고정 값으로 따로 기재한다. 그러면 textView가 쓰이는 곳마다 줄 간격 값을 기재하는 불필요한 작업을 줄일 수 있다.