안드로이드 Android 디자인 : dpi / mdpi / dp / sp

Android란?

: 구글에서 만든 소프트웨어

Ex. 삼성 갤럭시, A시리즈 노트 시리즈, 폴더 등 구글 Pixel 시리즈

: 오픈 소스 운영체제로 구글이 개발한 모바일 운영체제다.

: 안드로이드 운영체제는 스마트폰, 태블릿 등의 다양한 디바이스에서 실행될 수가 있고- 많은 애플리케이션을 포함하여 풍부한 기능을 제공함.

 

Android 특징

서체 : Roboto

단위 : dp, sp

최소 탭 크기 : 48 x 48 dp

>> 필수는 아니지만 안 지킬 경우에 손이 두꺼운 사람에게는 제대로 터치가 되지 않아서 불편을 줄 수 가 있다.

내장 네비게이션 : O

> 예전의 아이폰과 다르게 뒤로 가기나 홈 이러한 물리적 버튼이 디바이스에 있었는데- 최근들어 스크린이 커지고 스크린 내부에 OS 자체 뒤로가기 라든지 UI 네비게이션을 제공하기 시작함.

메인 앱 네비게이션 : 상단 탭

> 안드로이드에서 제공하는 메인 네비게이션은 상단으로 두는 편. 크로스 플랫폼으로 제작된 앱이 많아지면서 iOS와 안드로이드 형태가 비교적 비슷해져가는 추세인 것 같다.

보조 앱 네비게이션 : 드로월 메뉴(햄버거 메뉴)

벡터 에셋 : SVG

<버전 & 가이드라인>

우선 버전 같은 경우는 iOS 8,9,10 이런 식으로 자체 OS가 업데이트 되는 것처럼 안드로이드도 버전이 있다.

그런데 안드로이드의 재미있는 부분은 과거의 디저트음식으로 버전을 관리를 했었다. 14~15년도 롤리팝, 마시멜로로 넘어가던 시절인데 19년도부터 안드로이드 10 이 시점부터는 버전 이름에 알파벳과 디저트 조합을 그만두고 숫자로만 표기하기로 시작함. 각 버전마다  UX UI 개선이나 성능 향상, 그리고 새로운 기능들을 추가해서 업데이트하기 때문에 디자이너나 개발자들도 이러한 변화에 주시해서 사용자에게 최적화된 경험을 제공하도록 집중하는 것도 좋을 것(:

Material Design

: 사용자 인터페이스를 설계할 때, 시각적 효과와 상호 작용을 고려한 사용자 중심적인 디자인을 제공함.

: 디자이너라면 꼭 알아야 할 디자인 가이드. 구글에서 개발한 사용자 인터페이스 가이드🖤

: 안드로이드 운영체제에서 사용되는 애플리케이션에 기반하지만, 웹 애플리케이션이나 다른 플랫폼에서도 사용가능(:

: 다르게 이야기해서 단순히 디자이너에게만 제공하는 것이 아니라 실제 개발까지 반영된 컴포넌트와 스타일을 사용할 수가 있다. 그래서 조금 더 빠르고 효율적으로 디자인과 개발 가능한 것!

 

*But, 주의할 점은 너무 OS 가이드라인에 딱 맞추면, Android와 iOS에 출시한 같은 서비스라도 브랜드 아이덴티티나 사용성의 차이가 날 수 있다.

 

****OS 가이드라인을 벗어나지 않는 선에서 Android와 iOS에 출시할 디자인을 비슷하게 맞추는 것도 중요함(:

 

 

해상도

: 해상도, 선명도, 화질 : 종이나 스크린 등에 표현된 그림이나 글씨 따위가 표현된 섬세함의 정도

: 주로 스마트폰, 모니터, TV와 같은 디지털 기기의 스크린이나 프린터, 스캐너 등의 각종 이미지 입출력기기에 관해 말할 때 사용됨.

 

Pixel

: 화면의 이미지를 표현하는 기본 단위

Picture + Element 합성으로 각 픽셀은 개별적 색상을 가지고 있다. 이 픽셀의 개수에 따라서 해상도가 결정됨. 많으면 고해상도 적으면 저해상도라고 불림. 

 

dpi

: 1inch(2.54cm)안에 몇 개의 픽셀로 이미지를 표현하는가

ex. 10dpi는 1인치 안에 100개의 점으로 그래픽을 표현하는 것,  20dpi는 400개의 점으로 표현하는 것. 이 수치가 높을수록 더 선명하다는 것(:

ldpi	mdpi	hdpi	xhdpi	xxhdpi	xxxhdpi
Low-density	Medium-density	Hight-density	Extra high-density	Extra extra high-density	Extra extra extra high-density
120 dpi	~160 dpi	~240 dpi	~320 dpi	~480 dpi	~640 dpi
x0.75	x1	x1.5	x2	x3	x4

DPI의 기준 : mdpi

: 안드로이드에서 dpi라는 개념이 나오는데- 이걸 이해하는게 중요하다. 

: 디벨로퍼 사이트의 설명을 참고하자면,1dp는 중밀도화면(160dpi, ‘기준’밀도)의 1픽셀과 거의 동일한 가상 픽셀 단위다. 

 

160dpi가 기준이다 라고 이해하면 좋을 것(:

(안드로이드에서 지정한 것.)

 

mdpi : Medium-density

160 dpi
1px = 1dp

 

이게 기준이 된다. 이걸 기준으로 점점 기술이 발전하면서- 스마트폰 해상도가 좋아지게 된 것. 그러면서 hdpi, xhdpi, xxhdpi, 최근에는  xxxhdpi 까지 나왔다. Dpi 수치가 무려 640. 다르게 이야기하면- mdpi기준이 일대일 비율이면, 수치만으로 봐도 4배가 커지는 걸 볼 수가 있다. 즉, xxxhdpi에서는 1dp가 4px과 같다. 라고 이해할것✨.

 

과거에는 용량이나 최적화 등의 이슈로 Idpi (low density) : 120 dpi 정도로 굉장히 해상도가 떨어지는 스마트폰이 있었다. 지금 이렇게 좋아진 시점에 사는 입장에서는 ldpi는 신경 쓰지 않아도 됨. mdpi가 기준이지만 1.5배, 2배, 3배, 4배 이렇게 커진다. 이것만 이해하면 첫번째는 이해를 한 것! 하지만 물리적인 크기와는 전혀 다르다ㅎㅎ.

 

저렇게 해상도가 높아졌다고 해서 스마트폰 크기가 커지냐? > X 

화면의 크기는 사실 그대로인데 이 1인치 안의 점의 수가 많아졌기 때문에- 더 해상도가 고해상도로 보이는 것 뿐이지 실제 물리적인 크기는 다르지 않다. 

 

dp

dp = Density-independent Pixel

: 직역하면 ‘밀도에 독립적인 픽셀’이라는 의미로, 어떠한 디스플레이 해상도와도 관계없이 다룰 수 있는 단위.

: 다양한 픽셀의 밀도에 지원하기 위한 안드로이드만의 단위다.  이러한 상댓값이 왜 필요한 걸까?

> 여러 해상도의 디바이스에 디자인, 개발을 효율적으로 대응하기 위해서다.

 

UI 툴에서 1배율로 작업

: 피그마, 스케치, xd 등 벡터 기반의 UI 전용 툴에서 mdpi 기준으로 작업해야 된다.

> px과 dp가 1:1인 환경이라서 디자이너가 os 가이드라인을 지키기도 편함

>개발자도 dp단위로 역계산할 필요가 없음

 

과거에는 이런 벡터 기반의 툴을 제공하지 않았기 때문에 포토샵으로 UI디자인을 할 때는 2배 혹은 3배 이렇게 키워서 작업하는 회사들도 있었다. 지금 시점에서 그렇게 작업하면 절대 안 된다. UI 툴을 사용해서 UI 작업을 할 때는 mdpi 기준 1픽셀이 1dp인 환경에서 작업을 할 것!(:

이것만 이해하면 좋을 것.

<dp와 px의 단위 변환>

px = dp * (dpi/160)

 

Dpi : 단말 dpi

160 : android 기준

 

: 픽셀은 dp 곱하기 dpi 나누기 160이라고 되어 있는데 이 수치만 보면 좀 어려울 수 있다. 쉽게 말해서 그냥 mdpi가 160dpi. 그래서 앞에 dpi값이 달라지면 그에 따라서 몇배를 하냐라고만 이해하면 된다.

 

px = dp * (640/160)

px = dp *4

1dp = 4px

<상황에 따른 단위 사용>

 

코드로 구현 가능한 UI

: Button, Input, Text, Background, Line

단위 : dp

(mdpi 기준으로 제작)

 

벡터 기반의 그래픽

: Icon, Animation(Lottie), illustration

단위 : dp

(mdpi 기준으로 제작)

 

비트맵 기반의 이미지

: Banner, Background, Content Thumnail

단위 : px

(디바이스에 맞춰 최상위 해상도로 제작)

 

Ex.

mdpi 기준의 UI작업을 했지만, 실제 그 ui내의 배너 영역 사이즈가 360 x 80이라면-그래픽에 들어갈 이미지는 곱하기 4배를 해서 작업해야 제대로 해상도가 깨지지 않고 보이게 될 것(:

>>>> 이게 정석이지만 이미지의 크기가 앱 성능에 영향을 줄 수가 있기 때문에 압축을 통해서 파일 크기를 최소화해야함.

 

sp

sp(Scaled pixel)는 텍스트 크기를 상대적인 값으로 지정할 때 사용한다.

*dp와 동일한 개념이지만, 텍스트에만 적용되는 단위. 레이아웃 잡을 때는 sp 사용하면 안 됨.

 

sp가 필요한 이유

: 시스템 설정에 따른 가독성 때문

: 사용자의 의도에 따라 설정에서 글꼴 크기 조절 시 그에 따른 앱 내 사이즈도 바뀌어야 함

 

그렇다고 무조건 sp 단위를 꼭 써야 하는 것은 아님*

 

반대로 모바일의 특성상 좁은 화면 안에서 레이아웃을 짜기 때문에 텍스트 때문에 많이 틀어지지 않게 하기 위해서는 sp를 적용해야 할 범위를 정해 놓고 적용하는 것도 방법이다. 

 

sp 사용시 주의할 점

***확대시 레이아웃 확인 필요.

레이아웃이 틀어지는 것을 막기 위해 dp를 사용하기도 한다.