모바일 디자인 가이드 요소 1

모바일 디자인 가이드 요소 

Z축과 그림자

모바일 기기의 화면은 평면으로 보이지만, 디자인적으로는 가상의 Z라는 깊이감을 가지고 있다. iOS는 iOS 7을 기점으로 플랫 디자인을 사용했지만, 최근에는 머티리얼 디자인을 도입해 적용하고 있다. 
Z축의 깊이감은 그림자를 통해 표현된다. 알림창이 열렸을 때를 예로 들어보자. 이때 기존의 콘텐츠는 뒤로 물러나면서 흐릿해지고 알림창이 앞으로 돌출된 것처럼 보인다. 그렇게 보이는 이유는 알림창이 앞으로 돌출된 것처럼 보인다. 그렇게 보이는 이유는 알림창에 그림자가 생겼기 때문이다. 그리고 그림자가 어디에 있느냐에 따라 알림창의 높이가 결정된다. 이처럼 그림자를 통해 깊이감이 표현되고 높낮이가 좌우되므로 효과적으로 시각적 요소를 구성하려면 Z축과 그림자에 대해 이해하고 있어야 한다.
그림자 값을 통해 Z의 높낮이가 생기는 것을 엘리베이션 Elevation이라고 한다. 
어도비 포토샵의 레이어를 연상하면 엘리베이션을 좀 더 쉽게 이해할 수 있다. 포토샵에서는 배경 위로 레이어가 겹겹이 쌓이면서 위 레이어의 이미지가 아래 레이어의 이미지 위에 배치된다. 이때 위 레이어에 불투명한 이미지가 있으면 아래 레이어는 가려서 보이지 않는다. 엘리베이션의 원리는 이런 레이어의 개념과 유사하다.
엘리베이션을 구현하는 방법에 그림자만 있는 것은 아니다. 컨테이너를 색상으로 채우거나 불투명도와 같은 시각적 기호를 사용해도 된다. 하지만 머티리얼의 기본 원칙은 종이에 조명을 비추면 생기는 그림자의 원리에 따라 Z의 높이를 구현하는 것이다. 
모바일에서 상호작용이 이루어지면 컨테이너의 크기가 변화하기도 하지만, 컨테이너의 위치가 변하기도 한다. 이때 컨테이너끼리 접촉이 발생할 수 있는데, 동적 높이 변화로 인해 이동하면서 다른 컴포넌트와 충돌하면 안 된다. 카드가 올라가면서 플로팅 버튼 Floating Button을 통과하도록 플로팅 버튼보다 높이 배치되어있다. 이때 플로팅 버튼은 충돌이 발생하기 전에 일시적으로 사라지거나 화면 밖으로 벗어난다. 즉, 전환하는 구성 요소와 충돌 가능성이 있는 경우에는 컴포넌트를 일시적으로 제거하거나 위치를 변경하는 방식으로 충돌을 피한다.

해상도와 밀도

1. 해상도 Resolution
해상도란 화면 또는 인쇄물 등에서 이미지가 몇 개의 픽셀 Pixel 또는 도트 Dot으로 표현되는지를 나타내는 정밀도의 지표이다. 예를 들어 `스마트폰의 해상도가 480x800이다`라고 하면 스마트폰 화면에 가로 480개, 세로 800개, 즉 384,000개의 픽셀(점)이 서로 다른 색을 내며 빛나고 있다는 뜻이다.
이미지는 해상도가 높을수록 선명하다. 주로 사용하는 해상도 단위는 1인치에 픽셀 몇 개가 있는지를 나타내는 ppi Pixels per inch와 1인치에 점이 몇 개 있는지를 나타내는 dpi dot per inch이다. 픽셀 또는 도트의 수가 많을수록 고해상도의 정밀한 이미지를 표현할 수 있다.

2. 픽셀 Pixel, px
픽셀은 화면을 구성하는 최소 단위로, pixel의 약자인 px를 단위로 사용한다. 픽셀은 mm 나 cm 와 같이 화면의 전체 크기와 상관없이 지정한 수치만큼 표시되는 절대 단위로, 실제 디자인할 크기를 지정할 때 사용한다.

3. 포인트 Points, pt
아이폰은 레티나 디스플레이를 장착하면서부터 픽셀을 두 배로 늘려 매우 선명한 화면으로 출력하는 그래픽을 구현했다. 레티나 디스플레이에서 UI가 레티나 디스플레이 이전의 디스플레이와 같은 물리적 크기를 유지하게 하려면 픽셀 크기를 두 배로 늘려서 디자인해야 한다. 예를 들어, 터치 대상 영역의 기본 크기인 44x44px은 레티나 디스플레이에서는 88x88px로 키워서 디자인해야 한다. 따라서 디자이너는 원래 버전인 @1x 그래픽과 새로운 크기인 @2x, @3x 그래픽을 함께 제공하게 되었다. 이는 UI 안에서 보이는 버튼의 크기가 더 이상 44X44px이라고 단정을 지을 수 없는 상대적 개념이 되었다는 뜻이다. 이를 위해 사용하는 개념이 포인트이다. 1pt는 레티나 디스플레이 이전의 기기에서의 1px을, @2x인 레티나 디스플레이에서는 2px을 뜻한다. 즉 44pt의 버튼은 @2x에서는 88px이며 @3x에서는 132px이 된다.

4. dpi와 ppi
dpi (dots per inch)는 인쇄할 때 사용되는 공간 밀도의 측정값을 나타내는 단위이다. 프린터에 넣을 수 있는 잉크 방울의 수를 말한다. 당연히 인치당 도트 수가 많을수록 이미지가 선명하게 출력된다. 어떤 이미지가 72dpi라면 가로 1인치에 72개의 점과 세로 1인치에 72개의 점, 즉 총 5,184개의 점(도트 또는 픽셀)으로 채워진다는 뜻이다.
이 개념을 컴퓨터 화면에 적용한 것이 ppi pixel per inch이다. ppi는 모니터 화면의 인치당 표시되는 픽셀 수를 말한다. 모니터의 해상도는 한 화면에 픽셀이 몇 개나 포함되어 있는지를 말하는데, 대개 가로 픽셀 수와 세로 픽셀 수를 곱한 형태로 나타낸다. 예를 들어 1024x768은 가로 1,024개, 세로 768개의 픽셀로 이루어져 있다. 따라서 같은 해상도라도 17인치 모니터에서 보이는 이미지와 27인치 모니터에서 보이는 이미지는 선명도가 다르다. 모니터가 클수록 면적이 넓어지므로 선명도는 떨어진다. 

px = dp x dpi /160 = dp x density
dp = dp x 160 / dpi = px / density
density = dpi / 160

디자이너는 주로 px 단위로 작업을 하는데 개발자는 dp단위를 요구하기 때문에 디자이너가 개발자에게 파일을 넘길 때 어려움을 겪기도 한다. angry Tools 웹사이트 http://angrytools.com/android/pixelcalc 에서 제공하는 자동 계산 기능을 사용하면 dp, sp, px, mm, pt, in 단위를 해상도별로 변환할 수 있으므로 이런 문제를 해결할 수 있다.

5. dp(dip)
iOS를 운영체제로 사용하는 아이폰과는 달리 안드로이드를 운영체제로 사용하는 스마트폰은 종류, 크기, 비율이 매우 다양하다. 초창기 스마트폰을 제외하면 물리적인 하드웨어 크기는 큰 차이가 없지만, 화면 해상도를 살펴보면 고해상도와 저해상도의 차이가 크다. 스마트폰 크기가 같더라도 화면 해상도에 따라 실제 디자인해야 하는 크기가 다르기 때문이다.
스마트폰의 해상도가 달라도 같은 크기로 볼 수 있게 하는 방식이 밀도 Density이다. 화면의 픽셀밀도와 해상도는 플랫폼에 따라 다르므로 1인치에 들어가는 픽셀의 수를 픽셀밀도로 계산해 화면의 크기를 조절하게 된다. 고밀도 화면은 저밀도 화면보다 1인치에 들어가는 픽셀 수가 많다. 결과적으로 같은 픽셀 크기의 UI 요소는 저밀도 화면에서는 크게 보이고, 고밀도 화면에서는 작게 보인다. 
화면 해상도로 인해 크기가 달라지지 않게 하려고 그 안에 담긴 픽셀의 개수를 다르게 해 밀도에 차이를 두는 방식으로, 이를 밀도의 독립성이라 한다. 이 원리를 이용해 해상도가 다른 화면에서도 UI 요소의 크기를 균일하게 표시할 수 있다. 밀도의 단위는 dp (density independent pixel)이다.

6. 아트보드의 크기
시안 작업을 하려면 디자이너는 아트보드의 크기를 어떻게 설정할지 고민하게 된다. 이때 가장 유용한 웹사이트는 머티리얼 디자인 디바이스 매트릭스다. 이 웹사이트에서 dp를 기준으로 살펴보면 안드로이드에서 가장 보편적으로 사용하는 크기가 360x640dx인 것을 알 수 있다. 스케치나 어도비 XD 또는 일러스트레이터와 같은 벡터 프로그램에서는 안드로이드의 기준 크기인 mdpi의 비율을 그대로 사용해도 된다. 

머티리얼 디자인 디바이스 메트릭스 : https://material.io/tools/devices/

7. sp (scalable pixels)
머티리얼 디자인 가이드에서 종종 볼 수 있는 또 하나의 단위는 sp이다. sp는 UI 레이아웃에서 텍스트의 크기를 지정하기 위해 사용하는 단위다. 안드로이드 설정 화면에서 사용자는 안드로이드 시스템 전체에서 보이는 텍스트의 크기를 선택할 수 있는데, sp는 이 설정의 영향을 받는다. 즉 문자의 크기를 일정한 비율로 유지하고 싶다면 dp를 사용하고, 사용자의 설정에 따라 조절하고 싶다면 sp를 사용하면 된다. 일반적으로 sp의 기본값은 dp의 기본값과 같다.

 

2023.04.10 - [UXUI 디자인] - 모바일 디자인 가이드 요소 2

모바일 디자인 가이드 요소 2

 

2023.04.09 - [UXUI 디자인] - 모바일 UI/UX 디자인의 종류

모바일 UI/UX 디자인의 종류