UI 디자인 기본상식 - 안드로이드 OS
UI 디자이너가 알아야할 모바일 기본상식, 안드로이드 OS
이 글은 UI 디자이너들을 위한 모바일 OS별 기본상식을 정리한 글입니다. 만약 글을 읽는 분이 초심자분이라면, 다음과 같은 맥락의 글을 먼저 읽으시는 것을 추천드립니다.
모바일 UI 디자인을 공부하는 3가지 단계
https://brunch.co.kr/@clay1987/94
1. UI / UX ?
UI, UX라는 말, 요즘 들어 굉장히 많이 쓰이고 있죠? 말은 어려워보이는데, 알것 같기도 하고... 내용은 모르겠고. 실제로 그렇습니다. 어려워 보일 뿐, 내용은 그렇게 대단한 것이 아닙니다. UI란, 유저를 위한 인터페이스. UI (User Interface) 기능을 인지시키고 사용하기 편하게 만들어둔 것이 UI입니다. 그리고 그런 UI를 통해 사용자가 기능을 추구하고. 느낌을 받고. 편안한 점과 불편점을 느끼면서 경험하는 것이 바로 UX (User Experience)입니다. (사실상 UI나 UX나 거기서 거기라고 보시면 됩니다. 경험이냐, 그 경험을 위한 기반이냐의 차이죠.)
UI는 굉장히 넓은 영역에서 쓰일 수 있는 용어지만, 한국에서 UI 디자이너라 하면, 대부분이 IT 업계를 지칭합니니다. IT (Information Technology) 정보기술 분야죠. 좀더 세부적인 주제로 들어가보면, 대부분이 PC와 모바일 기기에 들어가는 인터페이스나, 자동차 및 특수 기계에 들어가는 인터페이스를 만드는 일입니다.
2. 모바일 UI 디자인?
모바일 UI는 말 그대로 모바일 환경에 맞는 인터페이스를 뜻합니다. 고로, 모바일 UI 디자인은 앱 디자인, 모바일 웹 디자인, 모바일 OS 같은 것들을 뜻하겠죠?
3. 모바일 OS ?
모바일 OS (Operation System)란, 컴퓨터 OS와 마찬가지로 - 모바일 기기를 작동시키는 기본 프로그램을 말합니다. 우리가 쓰는 윈도우즈 시리즈를 생각하면 편합니다. 이런 OS는 기본적으로 다른 프로그램을 실행시키기 위한 기본 프로그램이며, 자체적인 인터페이스와, 디자인 요소를 포함하고있습니다. 너무 어렵게 생각하실 건 없어요 ㅎ
모바일용 OS의 종류로는 안드로이드, iOS, 윈도우 모바일, 우분투 등등 여러가지가 있습니다. 하지만 전세계적으로 가장 많이 쓰이는 것은 iOS와 안드로이드이며, 2018년 기준으로 안드로이드가 약 70%, iOS가 약 30% 정도 됩니다. 사실상 다른 OS들은 거의다 없어졌거나, 사라진 상태이기 때문에 이 글에서는 안드로이드와, iOS 만을 중점적으로 다룰 겁니다.
2018년 12월 기준, 전 세계 OS 사용현황모바일 OS는 각각의 모바일 기기마다, 시스템의 지향점이 다릅니다. 그래서 OS의 기본 문법도 다르고, 동작 방식도 다르죠. 그렇다보니 다양한 디자이너들이 해당 기기에 들어갈 디자인을 만들 때 어려움을 겪을 수 밖에 없습니다. 그런 문제를 해결하기 위해, 기기에 들어갈 디자인을 '어떻게 만들면 되는지'를 설명하는 공식적인 OS별 디자인 가이드가 존재합니다. 여기에서, OS별 디자인 가이드란 - 'OS에 들어갈 디자인은, 이렇게 디자인을 하세요' 라는 권장 사항이라고 할 수 있습니다. 꼭 지켜야 할 필요는 없지만, 더 낫게 만들 수 없는 상황이라면 지키는게 낫고. 디자이너라면 기본적으로 꼭 알아둬야하는 부분 입니다.
안드로이드의 디자인 가이드라인
https://developer.android.com/design/?hl=ko
애플의 iOS, 휴먼인터페이스 가이드라인
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
4. 디자이너가 알아야하는 OS별 특징
OS는 말 그대로 기본 프로그램이지만. 회사마다 각자 성향이 다르고, 지향점이 다릅니다. 그렇기 때문에 모바일 OS와 기기 사이에서 발생하는 문제점들이나. OS의 버전 문제로 인해 원하는 디자인을 구현할 수 없는 경우도 종종 생깁니다. 본인이 디자이너라면 이런 문제들은 실전에서 부딛히며 배워도 되는 부분이긴 합니다. 하지만 머리로 먼저 이해를 하고 실무를 한다면, 별 무리없이 문제를 해결하실 수 있을 겁니다.
5. 안드로이드 OS
안드로이드 OS는 구글에서 만든 모바일 전용 OS입니다. 컴퓨터로 치면 조립식 컴퓨터처럼, 여러가지 회사에서 만든 여러 모바일 기기에서 비슷비슷하게 동작할 수 있게 만들어졌죠. 그렇다보니 해상도가 매우 다양합니다. 해상도가 다양하다니 뭔가 좋은 의미 같죠? 사실, 디자이너 입장에서는 굉장히 복잡한 문제입니다. 여러가지 해상도에 모두 대응하도록 디자인을 해야 하는 거니까요.
우리가 위의 스마트폰 화면에그림을 그린다고 생각해보죠. 그림은 아무거나 상관 없어요. 꽉 차게 그려진 그림을 상상해보죠. 여기서 만약 기계가 바뀐다면, 우리가 그린 그림은 대체 어떻게 되는 걸까요? 우린 분명 '꽉 차게' 그림을 그렸잖아요? 그런데 캔버스가 변하면, 그 비례와 배치는 어떻게 되는 걸까요? 바로 이 부분이 안드로이드 디자인에 있어서 가장 힘든. 해상도의 차이에 따라 달라지는 디자인의 크기 문제입니다. 모바일 기기가 워낙 다양하고, 생태계도 복잡하다보니 안드로이드에서 지원해야하는 기기 해상도에 따라 스무가지가 넘습니다. (물론 그중에서 자주 쓰이는 건 제한되어있죠)
게다가 이 안드로이드 OS는 핸드폰 기기 뿐만 아니라 '타블렛' 기기에도 적용이 되어야하는 녀석입니다. 즉, 핸드폰에서 보여지는 비례가 그대로 타블렛에서 보여진다는 이야기죠. 커다랗게 확대된 핸드폰 화면을 타블렛에서 보고있다고 생각해보세요. 그게 과연 보기 좋고 사용하기가 편할까요? 결코 아니겠죠! 지금부터는 이런 특이한 사항들에 대해 하나하나 짚어나가며 이야기해보려 합니다.
안드로이드 OS의 특징
DPI 란?
안드로이드에서는 다양한 해상도의 기기에서, 동일한 앱이 '원활하게' 실행되어야합니다. 그림은 하난데, 상황에 따라 다르게 변해야한다니, 듣기만 해도 어려울 것 같죠? 이런 문제점을 해결하기위해, 안드로이드의 개발사인 구글에서는 일단, 각각의 다른 모바일 기기 해상도를 나름대로 통일하려고 했습니다. 일단 기기마다 해상도가 너무 다르고, 종류도 많으니까. 단순한 카테고리를 만들려고 한거죠. 그래서 만들어진게 DPI 개념입니다. dpi = dot per inch 라는 뜻인데요. 1인치 (cm가 아닙니다) 사이즈 안에 들어가있는 (디스플레이) 도트가 몇개냐에 따라서 일정한 이름을 붙인 겁니다. 그리고 그 타입을 다음처럼 나누었죠.
Mdpi / Hdpi / Xhdpi / XXhdpi / XXXhdpi / XXXXhdpi
차례대로, 미디엄, 하이, 엑스트라 하이, 엑스트라 엑스트라 하이, 엑스트라를 반복해서 추가하는 형태로 명칭이 만들어집니다. 마치 옷 사이즈에서 미디엄, 라지 사이즈를 생각하시면 편합니다.
각각의 DPI는 모바일 기기의 디스플레이 스펙에 따라 달라집니다. 그리고 DPI와 실제 픽셀 (디스플레이) 해상도는 별로 관계가 없습니다. 720 X 1280 사이즈은데 Xhdpi일 수도 있고, 1920 X 1080 사이즈인데 XXhdpi 일 수도 있는 거죠. 그래서 디자이너는 항상 새로운 기기가 나오면 각 기기들의 픽셀 (디스플레이) 해상도와, DPI를 확인해야 할 필요가 있습니다.
또한, DPI와 픽셀 (디스플레이) 해상도에 따라, 해당 디스플레이에서 해당 픽셀이 몇 DP로 계산되는지를 변환하는 변환식을 알아야합니다. (물론 계산기가 항상 필요하겠죠. DPI의 변환식은 안드로이드 디자인 가이드를 참조하세요. 이런 계산식을 통해, 디자이너는 설계도 (이미지가이드) 를 만들고, 개발자는 이 설계도를 보고 실제 앱을 만들게 됩니다. 사실, 내용이 그다지 쉽지 않으니 해당 내용은 다음 링크를 참고해주세요.
안드로이드 DPI 개념에 대해 정리된 외부링크입니다.
https://blog.cracker9.io/2018/03/13/Android_DPI/
안드로이드 OS의 특징
나인패치 (9patch) 란?
반복되는 부분은 프로그래밍적으로 반복 + 늘려주는 개념의 나인패치나인패치는, 안드로이드의 다양한 디스플레이를 지원하기 위해 개발된 기능입니다. '디자인을 하나만 갖고도 모바일 기기의 DPI 크기나 비례에 맞게' 변환하기위한 기술이죠. 신기하게도 이 규격을 쓴 파일로 디자인을 하면, 기기가 다르더라도, 해당 기기에 맞는 해상도에 적합하게 크기가 좌우상하로 늘려져서 배치됩니다. 물론 우리가 디자인을 제대로 했다면요 말이죠.
title.png / title.9.png
png 파일 규격은 자주 보셨죠? jpeg처럼 흔한 녀석 말이에요. 그런데 저기 오른쪽에 '.9.png' 라는 녀석은 보이시나요? 네. 이게 바로 나인패치입니다. 실제로 저 '.9.' 이라는 규격은 다른 프로그램이나 컴퓨터가 이해할수있는 공통적인 녀석이 아닙니다. 나인패치는 SDK 안드로이드 개발툴에서만 인식이 가능한 고유 규격이죠. 그림파일 안에 '어디를 얼마나 늘릴건지. 안에 여백은 얼마나 줄건지' 등을 디자이너가 직접 설정할 수있게 되어있습니다. 사실 좀 복잡하고, 애매한 개념이긴 합니다.
이 확장자를 사용하기 위해서는 일반 포토샵으로는 만드는게 사실상 불가능합니다. 그래서 안드로이드 개발툴을 설치하고 나오는 9patch 응용 프로그램을 통해서 사용해야합니다. 개발툴은 안드로이드 공식 개발자 사이트에서 받을 수 있고, 해당 툴을 깔기 위해서는 또다시 자바 프로그램을 설치해야합니다.
안드로이드 스튜디오 다운로드 링크
https://developer.android.com/studio/?hl=ko
이 나인패치라는 녀석은 해상도에 무관하게 자기보다 더 큰 화면이라면 얼마든지 커져서 해당 영역을 채워주는 방식입니다. 그렇다보니 채워넣을 영역보다 자신이 크거나, 서로 크기가 똑같으면 제대로 작동하지 않아요. 이른바 '압축된 상태'라고 생각하시면 이해하시기가 편합니다. 더 넓은 영역을 채우기위해서, 늘어나도 문제가 없게 디자이너가 압축된 그림을 넣어주는 거죠.
굉장히 편안하다고 생각할 수 있는 기능이지만, 나인패치에도 문제가 있습니다. 타이틀 배경, 포스팅 배경 같은 곳에서는 쉽게 사용이 가능하지만. 아이콘, 그림, 사진, 그리고 텍스쳐 효과가 사용된 이미지에 대해서는 나인패치규격을 사용할 수 없습니다. 이미지가 말 그대로 엉망이 되서 나오거든요.
나인패치툴에 대한 구글의 공식 소개글 (잘 풀어서 설명해둔 내용은 아닙니다.)
https://developer.android.com/studio/write/draw9patch?hl=ko
안드로이드 OS의 특징
안드로이드 OS의 버전별 차이
최초의 안드로이드부터, 현재 8.0 버전 이상의 안드로이드들 까지. 각자 '먹는것'의 이름이 붙은 안드로이드 OS들은 생각보다 종류가 많은 편입니다. 게다가 OS의 특성상, 펌웨어 업그레이드가 불가능한 지점이 존재합니다. 구글 측의 운영 방침이기 때문에 어쩔 수 없긴 하지만, OS가 구버전이지만, 추가로 나온 OS로 업그레이드가 되지 않다보니. 최신 OS가 지원하는 기능을 사용할 수 없는 경우가 생기고. 때로는 그런 부분을 고려하지 않고 만든 디자인 때문에 큰 낭패를 볼 수도 있습니다. 물론, 이 부분은 디자이너보다 개발자분들이 더 민감한 사항이긴 합니다. 사실상 '최신 OS만 지원하는 기능'으로 이뤄진 앱은 그리 많지 않거든요.
구글이나 애플이나, 오래된 기기와 과거버전 OS는 지원을 중지하는게 대부분입니다. 과거 버전의 OS에서는 지원되지않는 기능이 있어서기도하지만. 여러 버전을 동시에 유지보수하는데에 많은 금액이 들기 때문입니다. 그렇기에 앱 개발을 할 때에는 항상 최소 버전을 어디에 둘 것인지를 생각하며 개발을 진행해야합니다.
안드로이드 OS의 특징
4.3 버전 젤리빈의 시대는 갔다
2018년 11월 기준, 안드로이드 버전별 통계위의 통계를 보아도 안드로이드는 4.4버전 kitkat이 널리 보급되어있는 상태입니다. 4.3버전은 모두 합치더라도 5%가 채 되지 않은 수준이죠. 그러므로 4.3버전 이하의 내용은 지원하지 않는 것으로보고 기획 / 개발을 진행해도 무방해보입니다. 항상 모든 서비스는 최소한도의 지원범위를지켜야하기 때문에. 해당 버전에대한 사용자수가 충분히 있는지를 눈여겨보아야합니다. 현재는 4.3버전의 차례이지만. OS에 대한 업데이트가 잦고, 빠른 안드로이드 특성상. OS 업데이트에 대한 소식은 항상 눈여겨보아야합니다.
안드로이드 OS의 특징
기기별 물리 / 가상 버튼의 차이
엄연히 따지자면 안드로이드는 그냥 구동 프로그램입니다. OS이고, 물리적인 장치가 없는 상태죠. 안드로이드 OS가 얹혀 만들어진 기기들은 각각이 다른 제조업체가 만듭니다. 바로 여기서 굉장히 특이한 점이 생깁니다. OS와 기기를 함께 만드는 애플과는 달리, 안드로이드는 그 제조사가 각각 다르고. 그렇다보니 기계의 버튼 위치나, 물리적인 버튼의 유무마저 달라집니다.
그리고 여기서 바로 디자이너들의 고뇌가 시작됩니다. 물리적인 버튼을 사용하는 기종과, 가상버튼을 사용하는 기종. 이 두 가지의 화면에 큰 차이가 생깁니다. 화면 하단에 항상 존재하는 가상 버튼이 그 영역만큼 화면을 가리고있기 때문이죠. 그 영역은 어떻게해도 변할 수가 없는 부분입니다. 심지어 스크린샷을 찍어도 하단에 가상 버튼 영역이 나타죠. 이렇다보니 물리적인 버튼을 사용하는 기종에 맞춰 디자인한 앱을. 넥서스 5같은, 가상 버튼을 사용한 기종에서 열면 - 하단 버튼 영역 만큼 이미지가 잘리거나, 전체 이미지가 비율이 맞지 않아 위쪽으로 찌그러지거나 하는 괴현상이 나타납니다.
안드로이드 화면 하단에 나타나는 가상버튼 현재는 디자인적으로 개선이 많이 이뤄진 상태긴하지만. 안드로이드에서 UI를 디자인하는 사람이라면. 항상 이런 - 하단버튼의 영역과 크기. 제조사별의 차이점이 있는지를 확인해야합니다.
마무리
디자이너가 안드로이드 OS에 대해 알아야 할 부분은, 일반적으로 이정도 내용입니다. 이외에는 개발자와의 커뮤니케이션과, 깔끔한 '이미지가이드' 제작, 그래픽 소스 정리 등을 통한 밑작업 준비가 있겠죠. 다만 최근에는 제플린 플러그인 등의 등장으로 인해. 이런 이미지가이드에 대한 작업도 매우 단순화되어, 더이상 신경쓰지 않아도 되는 상황이 되었습니다. 일하기는 더 쉬워졌지만, 그만큼 더 많은 내용을 공부해야하는 상황이 되기도 했네요.
iOS에 대한 내용은 다음 글을 참조하세요!
https://brunch.co.kr/@clay1987/155
만약 추후의 진로에 대해 고민중인 분이 계시다면 다음 글을 읽어보세요!
https://brunch.co.kr/@clay1987/108
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
