스케치에서의 행간 실제 개발과 비슷하게 적용하는 방법
안드로이드 디자인을 위한 Sketch LineSpacing 활용 팁
디자인 QA를 하면 항상 개발 버전과 제플린에 올라가 있는 텍스트 행간이 의도한 대로 제대로 적용이 안될 때가 있습니다. 그러다 보니 QA를 하면서 행간 조절을 계속하게 되는데 너무 귀찮기도 합니다.
불필요한 Communication Cost를 줄이기 위해 1차적으로 스케치만 활용하여 행간 문제를 해결할 수 있는 방법을 찾아보려고 하였습니다.
스케치와 안드로이드 XML에서의 행간은 다르다
아이콘과 이미지와는 달리 행간은 정확한 수치로 전달할 수 있는 개념이 아니기 때문에 스케치로 디자인하면서 정확한 행간을 파악하는 건 불가능합니다. 또한 제일 큰 문제점은 안드로이드에서는 폰트, 폰트 크기마다 가지고 있는 높이가 다르기 때문에 정확한 수치를 파악하기가 더 힘든 것 같습니다. 그리고 디자이너들이 사용하는 스케치와 안드로이드 XML은 서로 사용하는 수치 자체가 다르기도 합니다.
안드로이드에서 행간을 조절하기 위해 2가지의 속성 값이 존재합니다.
android:lineSpacingExtra 그리고 android:lineSpacingMultiplier 가 있는데요.
lineSpacingExtra는 줄 간격에 바로 적용이 가능하고 ‘+’ 연산으로 계산하여 적용을 합니다.
참고로 현재 다니고 있는 회사에서는 lineSpacingExtra를 사용하고 있고 이를 토대로 테스트를 진행하였습니다.
폰트 시뮬레이터와 스케치를 활용한 행간 찾기
(테스트 과정)
스케치 내 텍스트 레이어를 만들었을 경우 자동으로 제안해주는 행간 값이 있습니다.
이렇게 회색 placeholder로 노출이 됩니다.
스케치 Line Spacing근데 여기서 문제는, 스케치에서 추천해주는 행간 값과 개발된 값이 맞지 않다는 것입니다.
스케치에서 제안하는 값은 무엇을 기준으로 노출되는지 궁금하기도 하였고 실제 개발된 행간처럼 스케치 내 디자인도 동일하게 나오게 하기 위해 스케치에서 사용해야 할 행간 값을 직접 찾아보기로 하였습니다.
lineSpacingExtra가 적용된 사내 폰트 시뮬레이터 앱으로 저희 서비스 내 사용되고 있는 대표 폰트 사이즈들을 몇 개 테스트로 입력하여 캡처를 뜬 후 스케치로 들고 와 원본 디자인 레이어 위에 얹혀 비교하였습니다.
다니는 회사마다 항상 안드로이드 개발자분들께 폰트 시뮬레이터를 간단한 버전으로 만들어 달라고 부탁을 하는 편입니다. 폰트 시뮬레이터 안에는 font size, line spacing, letter spacing을 조절할 수 있도록 되어있습니다. 실제 개발됐을 때의 수치 값을 확인할 수 있어 유용하게 쓰고 있는 편입니다.
진짜 간단한 폰트 시뮬레이터 앱텍스트가 한 줄 일 때 스샷을 실제 디자인 위에 얹혀 보았습니다. 검정색 블럭은 시뮬레이터 앱으로 캡쳐 뜬 부분이고, 빨간색 가이드가 그려진 부분은 스케치에서 제안하는 행간 높이값입니다. 개발 버전과 어긋나는 것을 확인할 수 있었습니다.
텍스트가 한줄일 경우이에 이어, 텍스트가 한 줄 이상일 때도 실제 디자인 위에 얹혀 보았습니다. 스케치에서 제안하는 행간 값과 실제 개발됐을 때 행간 값이 일치하는 것을 확인하였습니다.
텍스트가 한 줄 이상일 경우[테스트 결과] 스케치에서 제안하는 행간 값은 어떤 기준으로 노출이 되고 있는가?
스케치에서 제안하는 행간 값은 한 줄 이상일 경우에 맞는 Spacing값입니다. 따로 LineSpacingExtra를 추가로 주지 않는 한 스케치에서 제안하는 행간 값 그대로 사용하면 될 것 같다고 판단하였습니다.
한 줄 이상일 때는 해결이 되었지만 한 줄 일 때가 아직 문제였습니다.
안드로이드에서는 폰트 크기에 따라서 행간이 계속 바뀌지만 그래도 나름 패턴이 있지 않을까 하여, 실제 개발됐을 때 각 폰트 크기에 따른 행간 높이와 스케치 파일 내 사용되는 각 폰트 크기에 따른 행간 높이를 비교하였습니다.
폰트 크기를 3종류로 그룹핑하여 분석을 하였고 다행히도 패턴을 발견하였습니다. (오차 값 고려)
Small Sized Fonts: 11dp~ 14dp
Medium Sized Fonts: 15dp~17dp
Large Sized Fonts (17dp~20dp)[테스트 결과] 텍스트가 한 줄일 경우 스케치 내 행간 값은?
1. Small Sized Fonts: 22~28 (=11~14dp on Android)
스케치에서 제안하는 행간 값에서 5를 빼면 실제 개발 값과 거의 흡사
2. Medium Sized Fonts: 30~34 (=15~17dp on Android)
스케치에서 제안하는 행간 값에서 6을 빼면 실제 개발 값과 거의 흡사
3. Large Sized Fonts: 36~40 (=17~20dp on Android)
스케치에서 제안하는 행간 값에서 7을 빼면 실제 개발 값과 거의 흡사
이렇게 하여 개발된 버전과 흡사한 스케치 전용 행간 값을 찾게 되어 따로 표를 만들어 다른 디자이너들에게 수치 참고용으로 공유를 하였고 이를 바탕으로 디자인을 하여 제플린으로 넘기고 있습니다. 개발 단계가 끝난 후 디자인 QA를 할 때 이전보다 실제 디자인과 거의 흡사할 정도로 정확한 수치로 개발되었다는 것 또한 확인할 수 있었습니다.
마치며…
위에서 잠깐 언급했듯이, 안드로이드는 폰트마다 그리고 폰트 크기마다 문장 당 높이가 각기 다릅니다.
그리고 스케치에서도 설정하는 폰트마다 추천해주는 행간 값이 바뀌는 것 또한 확인하실 수 있습니다.
저희 서비스는 Noto Sans를 현재 앱 내 사용하고 있고, 이 폰트 기준으로 테스트를 하였고 속성 값을 lineSpacingMultiplier 대신 lineSpacingExtra를 사용하고 있기 때문에 제가 한 테스트가 다른 서비스에 그대로 적용될 수 있을 거라고 말씀드릴 순 없을 것 같습니다.
행간이 구현되는 방식은 각 회사 개발자분들과 계속 소통하면서 맞춰 가시는 게 중요한 것 같고, 제가 쓴 글은 스케치 내에서 효율적으로 행간 값을 입력할 수 있는 방법을 저희 서비스에 맞춰 연구한 포스팅 정도라고 생각해주시면 좋을 것 같습니다 :)
궁금한 점이나 보다 더 효율적인 방법을 알고 계신다면 자유롭게 코멘트로 남겨주세요!
