brunch

You can make anything
by writing

C.S.Lewis

by 플러스엑스 Jul 30. 2018

iOS와 안드로이드 모바일 구축
무엇이 다를까?

author - 1g│UX 디자이너

국내 모바일 OS 점유율은 안드로이드 74.5%, iOS 25.36%로 두가지 운영체제의 수치가 압도적으로 높다. (출처: statcounter, Jan 2017 - Mar 2018 기준) 때문에 국내 모바일 서비스를 구축할 때 플러스엑스는 이 두가지 OS에 대응하고 있다.

포털 사이트에 ‘iOS 안드로이드’를 검색하면, 사용 시 체감할 수 있는 UI와 스펙 관련 차이점에 대한 정보들을 확인할 수 있다. 모바일 서비스 구축이라는 실질적인 업무를 진행할 때는 어떨까? 사용 시 체감하는 입장과 구축하여 제공하는 입장은 다르다. 사용할 때는 주어진 UI와 기능을 자연스럽게 습득하면 되지만, 구축할 때는 서로 상이한 두 OS의 UI와 기능의 차이를 학습하여 구축되는 서비스에 녹여내야 한다.

iOS, 안드로이드 모바일 서비스를 구축할 때, 두 OS가 달라 학습이 필요했던 고려 사항에 대해 공유하고자 한다.

안드로이드 화면 하단은

복잡해지지 않도록 주의해야 한다

안드로이드의 이전, 홈, 최근 앱 컨트롤 ─── 안드로이드와 iOS의 UI 차이를 생각했을 때 가장 두드러진 것이 Navigation UI이다. 안드로이드는 이전, 홈, 최근 앱 컨트롤 버튼을 화면 하단에 OS에서 제공한다. 안드로이드 4.0 폰에 처음 소프트웨어 버튼으로 추가되었다. 이전, 홈, 최근 앱 컨트롤은 하드웨어 키가 없는 기기만 화면 내에 표시된다. 이와 달리 iOS는 이전버튼을 OS에서 제공하지 않고, 앱 내에서 제공한다.

안드로이드 하단에 UI 요소 양 조절하기 ─── iOS와는 달리 안드로이드는 하단 ‘이전, 홈, 최근 앱 컨트롤 영역’과 ‘내비게이션 바와 앱 내 UI 요소’가 위치적으로 과하게 몰려있지 않은지 고려되어야 한다. 모바일에서 너무 많은 요소가 붙어있을 경우 터치 오류가 날 가능성이 높고, 복잡도가 생겨 정보의 집중도가 떨어질 수 있기 때문이다. 아래는 플러스엑스가 진행했던 프로젝트 중, G9 앱과 신세계백화점 앱에서 이전, 홈, 최근 앱 컨트롤 영역과 내비게이션 바가 함께 노출되는 화면이다. 터치 영역과 복잡도를 고려하여 요소를 배치하였다.

iOS의 터치 인터랙션으로 뒤로가기,

챙겨야 할 두가지

iOS 화면 좌측 영역 Swipe ─── iOS는 화면 좌측 사이드 영역을 잡고 쓸면(Swipe) 이전 히스토리 페이지로 이동하는 UI를 기본 어플리케이션(사파리, 앱스토어, 설정 등)에서 일관되게 제공하고 있다.

iOS 이전 인터렉션 설계서에 정의하기 ─── 공통 적용되어 있는 UI가 구축하는 모바일 서비스에서도 일관되게 제공될 수 있도록 설계 시 별도로 정의되어야 한다. 우리는 설계서에 다음과 같이 정의한다 : 히스토리가 있는 모든 페이지에서 좌측 사이드 영역을 좌>우 스와이프 시 이전 페이지를 좌>우로 노출한다. 아래는 프로젝트 진행시 내용을 정리한 장표다. 이렇게 문서에 별도로 정의하는 이유는 실 개발 시 누락되는 것을 방지하기 위해서이다.

iOS 이전 인터랙션을 제공하지 않았던 예외 페이지 ─── 가로(좌-우) 스와이프 인터랙션 사용이 잦은 페이지인 경우, 좌측 영역 스와이프하여 뒤로가기 인터랙션이 페이지 내 중요 과업을 방해할 수 있다. 플러스엑스는 L.POINT 앱 구축 시, iOS 모든 페이지에서 좌측 영역 인터랙션을 구현했으나, 게임 메뉴의 가로(좌-우) 스와이프 인터랙션이 많은 게임 페이지에서는 좌측 영역 인터랙션이 동작하지 않도록 예외 처리하였다. (아래 2번째 화면 참고)

iOS는 3D Touch를 고려해야 한다

3D 터치 ─── iOS에서 제공하는 3D 터치는 모바일 서비스에서 추가 기능을 제공할 수 있게 한다. 아이폰 5s 이상부터 사용자가 입력하는 터치의 세기를 인식할 수 있다. 3D 터치 관련 UI인 홈 스크린 액션과 Peek&Pop에 대한 아래 설명은 iOS HIG의 내용을 부분 번역한 글이다.

참고 : https://developer.apple.com/ios/human-interface-guidelines/user-interaction/3d-touch/

참고 : https://developer.apple.com/ios/human-interface-guidelines/extensions/home-screen-actions/

홈 스크린 액션 ─── 홈 화면에서 3D 터치를 지원하는 앱 아이콘을 세게 누르면 Action View가 나타난다. 이 뷰는 앱의 명확한 작업을 빠르게 수행하고, 흥미로운 정보를 볼 수 있도록 지원한다. 예를들어, 캘린더에서는 이벤트 생성 바로가기를 지원한다. 또한 사용자의 스케줄에서 다음 이벤트도 보여준다.

Peek & Pop (살짝보기 & 휙 들어오기) ─── Peek은 3D 터치를 이용해 페이지, 링크, 또는 파일같은 아이템을 현재 콘텍스트에 일시적으로 나타나는 뷰 안에서 미리보기를 할 수 있다. 아이템을 살짝보기(Peek)하려면, 아이템을 손가락으로 약간의 압력을 가하면된다. 간단하게 손가락을 들면 Peek이 종료된다. 아이템을 열고 자세히 보려면, 아이템이 팝업(Pop)될 때까지 좀 더 세게 누르고 화면을 채우면 된다. 어떤 Peek View는 위로 쓸어올리면(Swipe Up) 관련 액션 버튼이 나타난다. 예를 들어, Safari의 링크를 살짝보기(Peek)하다가 위로 쓸어올리면(Swipe Up) 새로운 탭에서 링크열기, 읽기 목록에 추가하기, 링크 복사하기 버튼들이 노출된다.

iOS 구축시 3D 터치로 구현하면 좋을 과업 ─── 홈 스크린에서 앱 아이콘을 3D 터치로 눌러 Action View에서 제공되면 좋을 과업이 있는지 고려해야 한다. 앱 안에서는 앱 안에서 동작하는 Peek&Pop이 있다면 기존에 제공되고 있던 iOS 기본 UI와 일관성 있게 동작되도록 고려되어야한다.

플러스엑스의 경우, L.POINT 모바일 앱 구축 시 홈 스크린 액션(3D 터치)을 위젯+액션 버튼을 혼합하여 앱의 핵심 기능들을 빠르게 이용할 수 있도록 제안한 바 있다. 현재 제안한 UI는 미적용 상태이다.

사례 찾기 ─── 구축하는 서비스에 맞게 구현할 때는 OS 가이드라인을 참고하는 것도 방법이지만 비슷한 서비스의 타사 앱들이 어떤 방식으로 적용&구현되었는지 사례를 많이 보는 것이 세세하게 어느 부분까지 적용 가능한지 파악하는데에 도움이 많이 된다. 아래는 L.POINT 모바일 앱의 홈 스크린 액션 뷰를 구현할 때 참고했던 사례이다.

인증 UI는 기기에 따라 조금씩 다르다

인증 UI ─── 본인임을 빠르고 간단하고 쉽게 증명하는 UI이다. 잠금 화면을 풀거나 간편하게 로그인하거나, 콘텐츠를 구매하거나, 추가 기능에 액세스할 때 사용된다. iPhone X은 Face ID로 인증하고, 그외 iPhone은 Touch ID로 인증한다. 안드로이드 폰은 지문인증(fingerprint)으로 인증한다.

iOS 인증 UI에 대한 아래 설명은 iOS HIG의 내용을 부분 번역한 글이다.

참고 : https://developer.apple.com/ios/human-interface-guidelines/user-interaction/authentication/

안드로이드 인증 UI에 대한 아래 설명은 Android Developers의 내용을 부분 발최하여 작성한 글이다.

참고: https://developer.android.com/about/versions/marshmallow/android-6.0.html?hl=ko#fingerprint-authentication

iOS 인증 UI ─── 가능하면 생체 인증(Biometric Authentication)을 지원해야 한다. Face ID와 Touch ID는 사람들이 신뢰하는 안전하고 친숙한 인증 방법이다. 사용자가 생체 인증을 사용할 경우, 사용자는 인증이 어떻게 동작하는지 이해하고, 편리하게 인식하며, 언제든 가능하면 사용하는 것을 선호한다고 추정할 수 있다. 사람들이 디바이스에서 생체 인증을 사용하지 않을 수 있다는 것을 유념해야 한다. 따라서 앱은 이 시나리오를 처리할 준비가 되어 있어야 한다.

안드로이드 인증 UI ─── 지문 인증(Fingerprint)은 Android 6.0 Marshmallow에서 소개되었다. 지원되는 기기에서 지문 스캔을 사용하여 사용자를 인증하는 새로운 인터페이스를 제공한다. 앱이 지문 센서가 있는 호환되는 기기에서 실행되고 있어야 한다. 앱에서 지문 인증 플로우에 대한 사용자 인터페이스를 구현하고, UI에 표준 Android 지문 아이콘을 사용해야 한다. (기기에 따라 얼굴/홍채 인식을 지원하기도 한다.)

인증 UI 필요 화면 검토하기 ─── 어느 화면에서 인증 UI가 필요한지 전체적으로 검토해야한다. 플러스엑스의 경우 SSG PAY와 L.POINT 모바일 앱 구축 시 인증 UI를 구현했다. 인증 UI가 적용된 화면 예시를 소개하자면, SSG PAY는 ‘SSG MONEY, 카드, 은행 계좌’ 결제를 바로 사용할 수 있도록 바코드를 홈 화면에 제공하기 때문에 보안상 이슈로 홈 화면에서 본인 인증 절차를 거치게 했다.

L.POINT 앱 인증 UI 구축 스토리 ─── 사용자가 생체 인증 사용을 원하는지 여부, 생체 인증이 지원되는 기기인지 여부, 디바이스에 생체 정보(지문, 얼굴, 홍채 등)를 등록했는지 여부에 대비해야 한다.

우리는 L.POINT 설정 페이지에서 사용자가 기능 이용을 선택할 수 있도록 생체 인증 ON/OFF 기능을 제공했다. 이 기능이 기기에 따라, 생체 정보 등록 여부에 따라 제공되는 경우와 제공되지 않은 경우 2가지 케이스를 고려했다. 설계서에 다음과 같이 정의할 수 있다 : 생체 인증이 지원되지 않는 기기이거나 기기에 생체 정보 등록하지 않은 경우 iOS Touch ID, 안드로이드 지문인식 설정 항목 제공하지 않음

기기 별로 지칭하는 명칭(Face ID, Touch ID, 지문인증)이 매칭되어 적용될 수 있도록 해야 한다. L.POINT 모바일 앱을 구현할 당시 iOS 페이지에 ‘Touch ID’라는 명칭을 사용했다. (2017. 02. 기준) iOS iPhoneX가 나온 이후, iPhoneX는 ‘Face ID’ 명칭으로 별도 적용되었다. 안드로이드는 ‘지문인식’이라는 명칭을 사용했다. 위에서 언급했듯이 안드로이드 개발 가이드라인의 공식 명칭은 ‘지문인증’이지만, ‘지문인식’이라는 명칭이 사용자에게 더 쉽게 인지된다고 판단하여 후자로 적용하였다.

생체 인증 팝업은 개발될 때, iOS에서 ‘시스템’ 팝업을 사용하고 안드로이드에서 ‘커스텀’ 팝업을 사용한다. 하여 iOS는 별도로 디자인을 진행하지 않고 기본 시스템 팝업을 사용했다. 위에서도 언급했듯이 안드로이드 개발 가이드라인에 따르면 표준 안드로이드 지문 아이콘 png 파일을 사용하라고 권고하고 있지만, 우리는 새로 팝업을 제작해야만 한다면 L.POINT 아이덴티티가 잘 드러나는 방향이 더 좋겠다고 판단하여 팝업을 새로 디자인하여 적용하였다.

아래는 (좌 1, 2) 엘포인트 앱 iOS 설정 화면과 디자인하지 않은 기본 시스템 Touch ID 인증 팝업, (우 3, 4) 엘포인트 앱 안드로이드 설정 화면과 커스텀하여 만든 지문 인증 팝업이다.

iPhone X 대응하기

iPhone X는 고해상도에 큰 디스플레이를 갖고 있다. 기존 iPhone과는 달리 홈버튼이 없어졌으며 상단 하드웨어 디자인은 U자 형태를 갖고 있다. 이러한 변화로 인해 생긴 몇가지 UI 고려 사항을 정리해보고자 한다.

아래 Screen Size, Layout에 대한 아래 설명은 iOS HIG의 내용을 부분 번역한 글이다.

참고: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Screen Size ─── iPhone X의 디스플레이 세로 너비는 4.7인치 너비 디스플레이인 iPhone 6, 7, 8의 너비와 일치한다. 그러나 iPhone X는 4.7인치 디스플레이보다 145pt 길다. 세로 콘텐츠 영역이 거의 20% 늘어난 것이다.

앱의 모든 아트웍 이미지를 높은 해상도로 제공해야 한다. iPhone X는 3x배율의 높은 해상도 슈퍼 레티나 디스플레이를 갖고 있다. 문자, 다른 플랫, 백터 아트웍은 독립적인 해상도인 PDF로 제공하는 것이 좋다. 레스터라이즈된 아트웍은 3x배율과 2x배율 둘 다 제공해야 한다.

Layout ─── iPhone X 용으로 디자인 할 때, 레이아웃이 스크린을 채우는지와 디바이스의 라운딩된 코너와 센서 하우징 또는 홈 스크린에 접근하기 위한 인디케이터에 가려져있지 않은지 확인해야 한다.

이마트 앱 iPhone X 대응 스토리 ─── 다른 iPhone 디바이스보다 화면이 긴 iPhone X에서도 최적화된 화면을 제공하려면, 상단의 Status Bar와 하단의 Bottom Area 영역에 대한 별도 개발 처리가 필요하다. 별도 개발 처리가 이루어지려면 사전에 기획에서 명확하게 정의되어야 한다. 아래 이미지는 이마트앱을 구축할 때에 iPhone X의 Status Bar와 Bottom Area 영역 처리를 정의한 상세설계서 페이지다. 이마트 프로젝트를 진행할 때, 아래와 같이 공통으로 iPhone X일 경우, Status Bar 영역만큼 상단 영역에 공백(개발 기준: 44px)을 주고 컬러는 화이트 처리하는 것으로 정의하였다. iPhone X일 경우, Bottom Area는 하단 영역에 공백(개발 기준: 34px)을 주고 컬러는 화이트 처리하는 것으로 정의하였다.

iPhone X일 때, 위 정의와 같이 구현되려면, 각 개발 파트 별로 협의가 필요하다. 예를 들어 이마트앱을 구현할 때는 아래와 같이 진행하였다. 참고로 이마트앱은 알림, 설정 등의 네이티브(앱) 개발 필수인 페이지를 제외하고, 거의 모든 화면이 웹으로 구현되어 네이티브(앱) 개발, 웹 개발, 마크업의 협업으로 개발되었다.

네이티브 개발: 앱에서 기기 정보를 웹에 전달하고, Status Bar와 Bottom Area 영역을 늘려준다.

마크업: iPhone X 용, 그 외 iPhone 용 화면 스타일을 구현한다.

웹 개발: iPhone X인 경우, iPhone X용으로 만든 화면이 노출될 수 있도록 분기 처리한다.

iPhone X를 별도로 대응하지 않으면 어떻게 될까? ─── 아래는 개발 도중의 이마트앱 iPhone X 예시 화면이다. 아래 화면은 iPhone X 대응이 부분적으로 이루어지지 않은 상태이다.

공통 정의와 별도 정의 ─── 위에 언급한 것과 같이 이마트 앱을 구축할 때 상세설계서에 iPhone X 대응을 ‘Status Bar: 화이트, Bottom Area: 화이트’로 공통 정의했지만, 예외 정의가 필요하여 별도로 정의를 추가한 화면들이 있다. 아래는 플러스엑스가 진행했던 엘포인트앱과 이마트앱의 iPhone X 대응 완료한 화면이다.

Widget UI, 안드로이드는 자유롭고 iOS는 명확하다

안드로이드와 iOS 위젯은 각기 다른 특징을 갖고 있다. 구축하면서 유의해야 할 각 OS 위젯의 특징에 대해 이야기해보려 한다.

안드로이드 위젯 특징과 사례 ─── 안드로이드 위젯은 커스텀이 자유롭다는 특징 두가지가 있다. 1) 가로x세로 길이를 유동적으로 쓸 수 있다. 2) 위젯 개수를 여러개 만들 수 있다. 아래는 이 두가지 특징을 반영하여 최근 2018. 7. 오픈한 이마트 앱 안드로이드 위젯 사례이다. 첫 오픈 때에는 4x4 한가지 사이즈만 구축했는데, 플레이스토어 고객 리뷰를 모니터링하여 다양한 사이즈의 안드로이드 위젯을 추가했다.

iOS 위젯 특징과 사례 ─── iOS 위젯의 특징은 위젯 펼친 모드, 접힌 모드가 일관되게 제공되야 하며, 이에 대한 가이드가 명확하다는 점이다. 홈 스크린 액션 뷰에 위젯을 넣을 경우, 아래 3번째 이미지와 같이 노출된다. 아래는 iOS 특징을 반영하여 최근 2018. 7. 오픈한 이마트 앱 iOS 위젯 사례이다.