brunch

라이킷 604 댓글 22

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 송민승 Mar 29. 2016

iOS UI를 Android UI로 바꿔 보자

아이폰만 써본 디자이너를 위한 안드로이드 UI 가이드

1. 무작정 바꾸지 말자.

어떤 경우에도 절대 iOS의 UI를 그대로 Android에 쓰지 말아야 한다.

iPhone은 "홈" 버튼만 존재하지만 Android은 화면 하단에 "홈" 이외에도 "뒤로 가기/멀티태스킹" 버튼이 항상 존재한다. 단순해 보이지만, 이 부분은 UI를 매우 다르게 만드는 요인이 된다. 예를 들어, Android 앱에서 A앱을 실행하고 있다가, 링크를 타고 B앱으로 넘어갔을 경우, "뒤로 가기" 버튼을 누르게 되면, 바로 A앱으로 돌아갈 수 있다. 이전 앱으로 돌아가려면 "홈"으로 가서 다시 탭 하던가 "멀티태스킹"을 이용해야 하는 iOS와는 다른 사용성이다.

News Digest App 에서 Wikipedia 링크를 누르면, Wikipedia 앱으로 바로 가게되고, "뒤로가기" 버튼을 누르면 이전 앱으로 바로 이동하게 된다.

이런 구조적인 차이점 때문에 iOS는 일반적으로 상하/좌우를 오가는 UI 구조를 가지고 있는대 비해, Android는 주로 상하 이동의 UI 구조를 가지게 된다.

또한 Android의 "홈/뒤로 가기/멀티태스킹" 버튼들은 (삼성 Touchwiz를 제외하고) 화면 하단에 위치하고 있는데, 오작동을 방지하기 위해 주로 하단보다 상단에 탭을 위치시킨다.

2. 새로운 용어에 익숙해 지자.

"DP" "SP" "9-patch"와 같이 매우 전문적인듯한 용어들을 자주 듣게 될 것이다.

"DP" "SP"는 Pixel과 같은 사이즈 유닛을 의미하는 것이고 "9-patch"는 PNG/JPG처럼 파일 포맷을 이야기 하는 것이다.

먼저 "DP"는, "Density Independent Pixels"의 준말이다. 이것은 절대적인 수치로, 해상도가 변해도 절대 변하지 않는 숫자다.

"SP"는 기본적으로 DP와는 같지만 상황에 따라 변경 가능한 유닛이다. 만약 사용자가 시스템 세팅에서 폰트를 "가장 크게"라고 설정한 경우, "DP"로 설정한 폰트는 변하지 않는 반면, "SP"로 설정한 폰트는 시스템 세팅에 맞게 사이즈가 변한다.

DP 로 설정된 "US News" 카테고리는 폰트 사이즈가 변하지 않지만, SP 로 정의된 본문 텍스트는 사용자의 시스템 세팅 상황에 따라 폰트 사이즈가 바뀌게 된다.

"9 Patch"는 흡사 SVG 파일과 같은 효과를 내는 PNG 파일이다. 이미지 위아래 작은 점을 찍게 되면, 미리 설정된 값에 맞게 이미지가 늘어나게 되는데 주로 버튼류 같이 위아래로 늘어나도 내부 형태가 변하지 않는 그래픽을 만들 때 사용된다. 이미지 용량을 획기적으로 줄이는데 반드시 필요한 파일 포맷이라고 보면 된다.

만드는 과정을 이해하는데 약간의 시간이 필요하기는 하지만, 이미지 사이즈를 획기적으로 줄일 수 있는 파일 포멧이다.

3. 다양한 스크린 사이즈에 대해 이해해 보자.

모델이 몇 개 없는 iPhone과는 다르게 Android는 매년 수백 개의 제조사들이 수천 개의 모델을 내놓는다.

Opensignal.com에서는 아름답지만 ~~무섭기까지 한,~~ Android 파편화에 대한 보고서를 내 놀 정도이다.

다시 한번, 이는 실제 데이터를 토대로 만든 자료이다.

하지만 이 모든 케이스를 최적화할 생각에 먼저 좌절할 필요는 없다.

Android는 이미 이런 상황을 고려해서 5개의 케이스에 대한 (태블릿을 감안한다면 7개) 정의를 내려놓았다.

MDPI/HDPI/XHDPI/XXHDPI/XXXHDPI가 그 미리 정의하여 놓은 해상도를 의미하는데, 만약 1080x1920으로 디자인을 시작한다면, 이건 Nexus 5 혹은 Galaxy와 같이 특정 모델을 위한 작업이 아닌 전체 XXHDPI 사이즈를 위한 작업이 되게 된다.

Pixel과 DP관계를 정확히 알고 있어야 작업 가능한데, 여기서 이전에 언급한 "DP"를 다시 떠올려 보자.

"DP"는 어느 스크린에 가도 변하지 않는 절대 수치이다. 예를 들어 1080x1920 pixel로 작업을 시작했다면 모든 수치를 3으로 나누면 그것이 DP가 된다. 그렇다. 골치 아프지만 약간의 산수가 필요하다.

하지만 MDPI (360x640 pixels)은 그 숫자 자체가 DP가 된다. 그래서 나를 포함한 많은 디자이너들이 요즘은 360x640 의 스크린으로 디자인을 시작한다.

하지만 360x640 pixels 사이즈를 Photoshop 같이 비트맵 기반의 그래픽 툴로 작업한다면, 해상도가 1440x2560인 최신 Galaxy 폰에서 테스트할 때 모두 블러리하게 보이게 될 것이다. 이래저래 Sketch 같이 백터 기반의 툴로 작업하는 것을 권장한다.

해상도가 작아질 수록 당연히 가독성이 떨어지게 된다. 따라서 DP/SP로 폰트를 구성했다고 하더라도, 상황에 따라 최적화를 시켜줄 필요가 있다.

그렇다고 골치 아픈 다양한 해상도에 대한 최적화를 너무 손쉽게 해결했다고 생각해선 안된다.

DP와 SP를 사용해 폰트를 잘 정의했더라도 작은 해상도를 가진 저가형 모델에서는 폰트가 지나치게 작거나 / 흐리게 보일 수 있기 때문이다. 출시 전 반드시 여러 디바이스에서 모든 내용이 잘 보이는지 확인할것을 권장한다.

4. 아이콘도 다르다.

요즘은 서로의 디자인을 참고하기에 정의가 애매해지고는 있지만, Android 특유의 아이콘 스타일이 있다. iOS의 것보다, 약간 더 둥글고, 채워져 있는 형태라고 볼 수 있다. 특히나 "공유" 아이콘처럼 iOS에서는 안 쓰는 스타일의 아이콘도 있기 때문에, 반드시 다르게 구성해야 하는 요소중 하나이다.

아이콘들도 해상도에 따라 자동으로 사이즈가 조절되기는 하지만, 모든 아이콘이 깔끔하게 조절되지는 않는다. (다시한번) 출시 전 반드시 다양한 사이즈의 모델들에서 테스트해볼 것을 추천한다.

원형/컬러가 많이 들어간 아이콘은 깔끔하게 리사이징이 안될때가 많다. News Digest를 진행할 때는 모든 아이콘을 각 사이즈에 맞게 하나하나 최적화 시켰었다.

5. Material Design

2년 전 구글은 새로운 디자인 방향성인 Material Design을 발표했다.

이미 업계에 많은 인사이트를 준, 정말 잘 만든 디자인 랭귀지임이 틀림없다. 그들의 웹사이트에 들어가 한동안 시간을 보낼 것을 추천한다. 하지만, 너무 그것만 따라 하려 하지는 말자. Material Design은 구글의 디자인 랭귀지이지, 우리 모두의 디자인 방향성이 될 필요는 없기 때문이다. Android의 사용성은 따르되, 각자의 개성을 살려보자.

https://www.google.com/design/spec/material-design/introduction.html

6. 몇 가지 추가 내용

하단 메뉴바 (Soft Key)

삼성의 고유 UI인 터치 위즈의 경우 "멀티태스킹/홈/뒤로 가기" 버튼이 화면 밖에 위치해있지만 대부분 다른 제조사들은 "뒤로 가기/홈/멀티태스킹" 버튼이 화면 안에 위치하고 있다. 당연히 이에 따라 약간의 레이아웃이 다르게 된다. 디자인할 때 고려해야 할 사항이다.

위젯

많은 Android 사용자들이 사랑하는 기능 중 하나이다. 홈스크린 상에서 앱의 일부를 미리 볼 수 있고, 바로 실행하게 해주는 기능인데, 당연히 따로 디자인되어야 한다. 다만, 엔지니어링 상으로 할 수 있는 내용이 제한되어 있는 편이니, 디자인하기 전에 엔지니어와 충분히 상의한 후, 어떤 기능을 넣을지 결정하는 것이 좋다.