UI·UX 디자이너를 위한 가이드 - 디바이스와 밀도 (깨지는 이미지)

 

 

 

 

'이 게시글은 공부하면서 정리한 내용입니다.

잘못된 정보는 제보해주시면 매우 감사드리겠습니다.

 

***

 

 

다양한 밀도에서 깨지는 픽셀

논리적 픽셀 도입 후 여러 디바이스에서 같은 이미지를 같은 크기와 위치로 보여주게 되었지만 다른 문제가 발생한다.

고밀도 디스플레이에 저해상도 이미지를 나타내면 열화되는 것이다.

 

1dp에 4px을 요구하는 디스플레이에 2px의 이미지를 제공하면 2px을 4px 영역에 채우기 위해 시스템이 늘리기 때문이다.

그리고 고해상도 이미지여도 px이 홀수면 줄여지면서 소수점이 되어 이미지가 열화된다.

소수점의 픽셀은 온전한 1px의 집합이 아니라 선명할 수 없다.

 

 

특히 복잡한 이미지(풍경, 인물 사진..)보다 단순한 이미지(아이콘, 버튼..)가 심히 열화되어 보인다.

그래서 보통 각 밀도 버전별 이미지를 만들어 미디어쿼리로 각 밀도에 맞는 이미지 파일을 불러온다.

경우에 따라 비트맵 이미지 대신에 벡터인 SVG를 제공하는 등 다양한 방법으로 이 문제를 해결할 수 있다.

비트맵이 아닌 요소(예를 들면 폰트)는 열화되지 않기 때문에 비교적 밀도 변화에서 자유롭다.

 

그래서 고밀도 디스플레이를 만족시키려면 디자이너는 어떻게 해야 할까? 

다양한 디바이스 밀도를 고려한 디자인 방법

논리적 픽셀이 1px인 벡터 기반 프로그램(피그마, XD, 스케치...)으로 디자인할 때의 방법이다.

안드로이드 OS는 360*640dp, IOS는 375*667pt, 414*736pt로 기준 해상도를 정한다. (케이스에 따라 달라질 수 있음)

눌러야 하는 버튼이나 탭은 44 ~ 48, 앱 바는 52 ~ 56, 컨텐츠 간 영역은 8 정도의 픽셀 크기를 유지해야 한다. (이 또한 케이스마다 다름)

디자인이 끝나면 어떤 밀도에서든 선명할 수 있도록 파일을 내보내야 한다.
이 과정에서 열화를 방지하는 방법은 다음과 같다.

 

 

1. 8 배수 단위로 디자인 후 각 밀도 버전으로 내보내기

 

미디어쿼리로 각 밀도에 맞는 이미지 파일을 불러오기 위해 각 밀도 버전별 이미지를 만드는 경우이다.

디자인 후 각 디바이스 밀도에 맞게 1배, 2배, 3배...하여  비트맵 이미지(png, jpg...)로 변환한다.

그런데 변환한 픽셀 값에서 소수점이 발생해선 안 되기 때문에 요소의 수치를 8의 배수로 하는 것이 좋다.

8의 배수인 이미지는 디바이스 밀도에 맞추느라 숫자를 곱하거나 나눌 때 소수점이 발생되지 않는다.

 

예를 들어 1px=1dp 환경에서 8px로 요소를 디자인했을 때, 다음의 렌더링된 수치를 보면 한결같이 정수임을 알 수 있다.

 

짝수 배수의 밀도별 수치 예시

 

위의 예시처럼 4의 배수 또한 정수로 유지되는데,

역으로 최대 밀도(4x) 사이즈부터 먼저 제작하여 낮은 밀도로 다운사이징하면 소수점이 발생할 수 있다.

(8의 배수는 다운사이징해도 정수로 유지된다.)

 

아래의 다운사이징 되는 수치를 보면 특정 밀도로 렌더링 했을 때 소수점이 발생함을 알 수 있다.

주로 포토샵 같은 비트맵 프로그램을 사용하느라 큰 사이즈부터 만든다면, 이 점을 조심해야 할 것이다. 

 

xxxhdpi(4x) = 36px (기준 수치)

xxhdpi(3x) = 27px

xhdpi(2x) = 18px

hdpi(1.5x) = 13.5px

mdpi(1x) = 9px

 

마찬가지로 그리드, 마진, 패딩 값도 8배수, 적어도 4배수로 디자인하는 이유는 위와 같다.

2의 배수로 디자인 해도 되나 모든 디바이스에 최적화되지 않으며, 사이즈 조절 시 충분히 소수점이 발생할 수 있다.

 

 

2. SVG 하나로 모든 밀도에 적용하기

 

1의 방법과 달리 벡터 그래픽은 하나의 파일만으로 모든 밀도에 적용할 수 있다.

비트맵 이미지는 사이즈 조절 시 저장된 픽셀 값에 변화가 생기지만, 벡터 그래픽은 값을 연산하므로 변화가 없다.

게다가 단순한 그래픽 표현에 적합하여 아이콘이나 일러스트레이션 등을 벡터 그래픽인 SVG*로 제작한다.

 

*SVG:  XML 기반의 표준 벡터 그래픽 파일 형식이다.

W3C에 의해 개발되었으며, 대부분의 웹 브라우저에서 SVG를 지원한다. (익스플로러 8 이전 버전 제외)

 

디자인한 요소를 SVG로 추출하는 것은 어렵지 않다.

일러스트레이터, 스케치, 피그마 등의 벡터 기반 프로그램의 내보내기(export) 기능 안에 SVG 항목이 있다. 

 

그러나 안드로이드에서는 SVG 형식을 지원하지 않아 안드로이드 벡터 드로어블 형식으로 변환해야 한다.

보통 안드로이드 스튜디오 안의 벡터 에셋 스튜디오(Vector Asset Studio)를 통해 변환한다.

또한 간편하게 변환할 수 있는 웹사이트를 이용해도 된다. 

 

*벡터 드로어블 변환 웹사이트: inloop.github.io/svg2android/

*벡터 드로어블에 대한 설명: developer.android.com/guide/topics/graphics/vector-drawable-resources?hl=ko

*벡터 에셋 스튜디오 사용법: developer.android.com/studio/write/vector-asset-studio?hl=ko

*안드로이드 스튜디오 설치:  developer.android.com/studio?hl=ko

 

 

3. 나인패치로 모든 밀도에 적용하기

 

1의 방법은 이미지 리소스가 크기 때문에 시스템 용량이 올라가는 단점이 있다.

그러나 나인패치* 를 이용하면 하나의 비트맵 이미지로 다양한 밀도에 대응할 수 있다.

 

*나인패치(Nine Patch): 9개의 패치란 뜻으로, 한 이미지를 9등분하여 9개의 패치로 만든 비트맵 형식이다.

9등분된 이미지는 늘어나는 영역과 고정되는 영역으로 나뉘어 밀도에 따라 늘리거나 줄일 수 있다.

보통 반복되는 컴포넌트에 사용하며, 라운드 버튼이나 박스에 적용한다. 

 

적용할 이미지 파일을 안드로이드 에셋 스튜디오(Android Asset Studio)나 안드로이드 스튜디오에 불러와 만들 수 있다.

나인패치가 적용된 파일명의 끝엔".9"가 붙는다.

보안 때문에 에셋 스튜디오를 못 쓸 경우 디자인 프로그램에서 수동으로 패치 영역을 그린 후 안드로이드 스튜디오에서 제작한다.

 

*안드로이드 에셋 스튜디오: http://romannurik.github.io/AndroidAssetStudio/nine-patches.html