brunch

You can make anything
by writing

C.S.Lewis

by Yunjung Seo Sep 01. 2015

Android 5 Lollipop & ios 8

안드로이드5 롤리팝 & ios8 비교

android6 마시멜로우와 ios9이 곧 출시를 앞두고 있는 상황에 android5 롤리팝과, ios8은 얼마나 차이를 두고 있고, 어떤 비슷한 부분이 있는지에 대해 조사해 보았습니다.

과거 안드로이드와 애플의 ios는 전혀 다른 디자인을 적용해 보여주고 있었습니다. 하지만 구글이 메테리얼 디자인을 발표 한 이후에는 언뜻 비슷해보이는 부분이 많아졌습니다.


Lockscreen

Android Lollipop Lock screen(좌) / ios8 Lock screen (우)

우선 락스크린을 살펴보겠습니다. 롤리팝과 ios8 모두 얇고 큰 텍스트를 활용해 시간과 날짜 요일에 대해 알려주고있습니다. 위치에 있어서는 ios는 상단에 위치하고 있고 롤리팝은 상단과 중앙의 중간쯤 자리하고 있습니다. 롤리팝은 락스크린 화면에서  전화, 잠금, 카메라 기능의 세가지 버튼을 볼 수 있습니다. 그와 반대로 ios8은 좌우 스와이프를 통해 잠금화면을 풀 수 있게 해놓았고, 상하 스와이프를 통해 하단에 카메라와 퀵세팅 버튼을 실행할 수 있게 제공하고 있습니.

 Android Lollipop Lock screen(좌) / ios8 Lock screen (우)

잠금화면을 해제할때 ios가 swipe 하는 행동을 유도하고, 화면이 밀리는 효과를 주었다면 롤리팝은 터치한 부분 부터 원이 퍼져나가는 듯한 애니메이션 효과를 주고 있습니다.


Homescreen

Android Lollipop Lock screen(1) / ios8 Lock screen, search bar (2,3)

홈화면에서 롤리팝은 상단에 검색창을 제공하고, 아이폰은은 화면의 빈공간을 아래로 당기면 검색창을 제공하고 있습니다. 앱 아이콘에 있어서 롤리팝은 매테리얼 디자인을 활용했고, 약간의 그림자를 넣어 배경과 분리시켰습니다. ios8는 사각형 모양의 동일한 프레임 안에 앱아이콘을 구성하고 있습니다.


Dial

다이얼화면에서 롤리팝은 앱아이콘때와 마찬가지로 특정한 프레임속에 있는것이아니라, 숫자와 영문을 표시하고있고, 그림자를 활용해 뒤의 add contacts화면과 분리시켜주고 있습니다. 이와반대로 ios8은 라인으로 된 원안에 숫자와 영문을 표시하고 있으며, 통화버튼 역시 동일한 크기로 배치시켰습니다. 롤리팝과 다르게 ios8 은 하단에 즐겨찾기나, 최근 통화목록, 연락처 등 주소록이나 통화 관련한 탭을 제공하고 있습니다.


Quick setting

다음으로 퀵세팅부분에서 롤리팝은 아이콘과 텍스트를 함께 제공하여 어떠한 기능인지 확실히 나타내 주고 있습니다. ios8 에서는 다른 화면과 마찬가지로 원 또는 사각 프레임 안에 플랫한 아이콘으로 정보를 제공하고 있습니다.


Multi-tasking

실행중인 앱이나, 최근 실행했던 앱을 보여주는 멀티태스킹 화면입니다. 롤리팝에서는 상하로 계층관계를 나타내고 있다면, ios8에는 좌우로 움직이며 실행했던 앱을 볼 수 있습니다. 하단에는 실행되는 앱아이콘을 함께 제공하고있고, 상단에는 즐겨찾기나, 최근 통화했던 사람의 목록을 사진으로 보여주고 있습니다. 개인적인 생각으로는 롤리팝의 멀티태스킹 화면이 최근사용한 앱의 목록을 더 쉽게 알 수 있는 구조라 생각됩니다. 좌우 보다는 상하로 사용앱의 정보를 알 수 있는것이 시간을 좀 더 잘나타내고 있다고 생각하기 때문입니다. 그 외에도  ios8의 멀티태스킹화면은 실행중인 앱화면, 앱아이콘, 즐겨찾기를 포함한 최근 통화 목록까지 너무 친절하게 많은것을 보여주려 하지 않았나 라는 생각이 들었습니다. 롤리팝의 멀티태스킹 화면은 ios8의 사파리 화면의 구조와 닮아있습니다. 여기에서 드는 의문은 iod8의 멀티태스킹화면은 좌우로 이동되어지는데 사파리 실행화면은 상하로 볼 수 있도록 구성되어졌다는 점입니다.

ios8 safari 구성화면


Shadow / Blur

다음은 안드로이드와 ios에서 제공하고있는 음성인식 서비스 입니다. 좌측은 google now, 우측은 siri입니다. 여기에서 알 수 있는 점은 롤리팝은 머터리얼 디자인을 적용하면서 그림자를 활용해 각 레이어들을 분리시키고 있다는점입니다. 그와 반대로 ios8에서는 배경에 블러효과를 적용하여 실행되는 화면과 배경을 분리시켰습니다. 머터리얼 디자인이 쉐도우를 활용해 각 개체간의 계층구조를 잘 나타내었다면, ios의 블러효과는 배경과 정보가 자연스럽게 녹아들도록 표현하고 있다고 생각합니다.


Notification

잠금상태에서 알람화면 입니다. 롤리팝은 동일한 배경안에 정보를 배치하였고, ios는 라인과, 텍스트, 아이콘만으로 알람을 보여줍니다. 액션에서는 롤리팝은 터치를 통해 바로 정보를 볼 수 있고, ios8은 스와이프를 통해 답장을 하거나, 삭제를 할 수 있습니다.


Keypad

마지막으로 키패드 화면입니다. 앞서 화면들에서도 보았다시피 롤리팝의 키패드는 각 알파벳간의 영역의 구분이 없고, 검색버튼에 컬러를 달리해 눈에 잘 띄게 제공하고있습니다. ios8의 키패드는사각형의 버튼안에 알파벳을 구성하고 있는것을 볼 수 있습니다.


이렇듯 닮은듯 서로 다른 android의 머터리얼디자인과 ios의 플랫디자인을 살펴보았습니다. 자료를 조사하면서 플랫하다는 큰 디자인적인 면은 비슷하지만, 그안의 UX나 UI화면들을 다르다는 것을 알게 되었고, 서로 영향을 주며 사용자를 더 생각하며 발전하고 있다는 점을 깨닫게 되었습니다. 안드로이드6 마시멜로우와 ios9의 출시일이 얼마 남지 않았습니다. 앞으로 이 두 os가 어떻게 변할지 기대됩니다.



*출처

http://www.phonearena.com/news/Android-L-vs-iOS-8-first-look_id57664

http://www.redmondpie.com/apple-ios-8.1-vs-google-android-5.0-lollipop-visual-comparison-screenshots/

http://www.phonearena.com/news/Android-5.0-Lollipop-vs-iOS-8-UI-comparison-vote-for-the-better-interface-here_id63646

작가의 이전글 2015 Web Design Trend
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari