배경
현재 회사의 제품이 태블릿과 함께 서비스를 제공하는 제품이기에 1개의 태블릿 디바이스(안드로이드 갤럭시탭)만 지원했지만 사용자가 늘어나고 다양한 디바이스에 제공할 수 있게 요구사항이 들어오면서 다해상도를 지원해야하는 상황이 생겼다.
사실 대부분의 서비스는 미리 다해상도를 고려하고 제품을 만드는게 순서지만, 회사의 서비스같은 경우는 반대의 상황이라 미리 개발된 부분에서 최소한의 리소스를 사용할 수 있게 개발자분이 먼저 가이드를 제안하는 시간을 가졌고, 다해상도 뿐만이 아닌 그 외 줄 간격도 어떻게 가이드를 주는게 좋을지에 대해 고민했었는데 해당 내용이 유익해서 여기에 글로 공유하고자 한다.
1. 해상도 가이드
a. Pixel
b. dp
해상도를 지원하기 위해 먼저 pixel과 dp의 개념 정의가 필요하다. 가장 다른점은 픽셀은 고정값이다. dp는 아니다. 해상도가 높아지면 그 해상도에 맞게 픽셀값은 작게 보여진다. 하지만 dp는 다르다. dp는 어떤 디바이스에서든지 UI 가 물리적으로 같은 크기로 보여지도록 해주는 개념이다. 안드로이드에서는 모두 dp단위로 UI가 그려진다.
그렇다면 다해상도를 고려시 dp의 문제점은 어떤것일까?
문제점은 태블릿 기준으로 UI 를 만들었는데 폰에서도 같은 크기로 보여지게 되는 것이다. 이는 곧 사용성에도 영향을 끼친다.
그렇기에 멀티 디바이스를 고려해야할 경우 가변을 고려해 가이드를 제작해야 한다.
스크린 사이즈
xlarge(태블릿) 최소 720dp x 960dp
large(작은 태블릿, 대형 폰) 최소 480dp x 640dp
normal(폰) 최소 360dp x 470dp
small(작은 폰) 최소 320dp x 426dp
안드로이드에서 사용되는 스크린 사이즈의 종류와 크기다. 구글에서는 스크린 사이즈와 밀도인 dpi로 기준을 제시한다.
현재 회사 서비스의 해상도는 xlarge(800 x 1280)이다. 그래서 720 x 960까지는 가능하지만 다른 형태의 디바이스도 제공된다면 해당 디바이스에 대한 가이드가 필요하다.
현 서비스같은 경우는 태블릿으로만 사용가능한 교육 앱이기에, 이미 제작되어있는 x-large와 large에 대한 디바이스 대응을 해주기로 했다. 가이드는 large 디바이스에서 최소한의 해상도로 현재 디자인된 화면들을 체크하고 가변성을 고려한 가이드를 주기로 했다.
2. 줄간격(행간) 가이드
행간같은 경우 보통 폰트크기를 기준으로 1.x배로 가이드를 만드는 것이 기본적인 방식이다.
그래서 스케치에서 line값을 설정하고 제플린에 올리면 제플린에서 line값을 볼 수 있기에 그렇게 가이드를 드렸지만, 안드로이드에서 개발시 가이드와 개발했을 때와 행간이 달라보이는 문제점이 있었다.
그렇다면 디자이너가 스케치에서 만든 행간과 실제 개발에서 보여지는게 같아보이기 위해서 어떻게 가이드를 제공할 수 있을까?
우선 행간이 없을 때 각자 개발환경에서 어떻게 보여지는지 확인했다.
a. default값
따로 값을 설정하지 않고 스케치와 안드로이드에 같은 폰트 및 크기로 그려본 화면이다. 모든 폰트에는 최소한의 행간값이 적용되어있다. 그려보았을 때 비슷해보였지만 각 환경에서 얼마나 다른지 모르기에 이를 겹쳐보았다.
두개를 겹쳐보니 어느정도 일치하나 텍스트가 길어질수록 안드로이드에서 그린 텍스트의 자간이 더 큰 것을 볼 수 있었다. 또한 두 줄 이상이 될 경우 안드로이드 오른쪽에 알 수 없는 패딩이 들어가는 것도 확인할 수 있었다.
b. line & linespacing 조정
그렇다면 행간을 설정했을 땐 어떻게 보여질까? 여기서도 동일한 폰트와 폰트 크기, 그리고 같은 라인 행간값으로 설정했다. 이것도 한번 겹쳐보았다.
자간 간격은 일치하는 것 같으나 스케치에서 첫 행 위에 약간의 공백이 생기는 현상을 확인할 수 있었다.
스케치에서는 행간을 설정할 수 있는 값이 line과 paragraph 이렇게 두가지 방법이 있는데, line이 아닌 paragraph로 행간을 설정 후 이를 다시 겹쳐보기로 했다.
c. paragraph & linespacing 조정
결과
paragraph로 하니 line으로 설정한 값보다 훨씬 비슷하게 보여지는 것을 확인할 수 있었다.
이러한 이유는 스케치에서 paragraph 의 수치는 안드로이드의 lineSpacingExtra와 비슷하기에 그리는 값이 비슷하게 보여지기 때문이다.
그러므로, 2줄이상의 무언가 가이드를 제공할 때 line보다는 paragraph값으로 행간을 설정하고, 알수없는 오른쪽의 공백을 위해 일정한 여백의 넓이를 지닌 텍스트 가이드를 만들어서 제공하면 된다.
이렇게 가이드를 제공할 시 안드로이드에서는 해당 텍스트를 가이드 상단 & 왼쪽 고정 및 마진설정해서 텍스트를 그려 공백부분을 해결할 수 있다고 한다.
Tip! Border 사용 시 inside로 적용하기
border는 center나 outline이 아닌 inside로 값을 설정해서 가이드 밖으로 나가는 일이 없도록 하자.
이것 외에 계속적으로 사용되는 컬러나 폰트, 컴포넌트들은 심볼화하여 zeplin에서 스타일가이드화하면 더욱 관리하기 편하다. 이는 디자이너도 관리하기 편하고, 개발자도 재사용되는 컴포넌트들이 어떤 것인지 인지하고 개발할 수 있어 편하다. 스케치에 가이드를 위한 다양한 플러그인도 존재하니 플러그인을 잘 사용하는 것도 좋은 활용법이라고 생각한다.
