brunch

You can make anything
by writing

C.S.Lewis

by 김준범 May 20. 2020

Android VS. iOS (4)

Dialogs, Alerts, Modal Vews, Snackbars..

8. Dialogs VS. Alerts

Android dialog는 주로 3 가지 기능을 하고 있다. 1) 경고 : 사용자가 수행하는 동작을 정지시키고, 상황에 대해 알려주는 것. 2) 메뉴 : 사용자에게 선택할 수 있는 option을 제공하거나 간단한 설정을 변경할 수 있게 하는 것. 3) 확인 : 실수를 방지하기 위해 동작이 수행되기 전에 사용자의 확인을 받는 것.

Android dialog는 제목과 콘텐츠, 버튼으로 이루어져 있다. 제목은 생략되기도 한다. 콘텐츠는 텍스트로만 되어있을 수도 있고, 옵션 리스트나 텍스트 필드로 이루어질 수도 있다. iOS의 altert 또한 Android dialog와 마찬가지로 제목과 콘텐츠, 버튼을 가지고 있다. 유일한 차이점은 콘텐츠는 생략될 수 있지만 제목은 항상 유지한다는 점이다.

Android dialog는 세 가지 형태가 있다. 1) 메뉴와 같은 Simple dialog : OK, Cancel버튼이 없다. 다이얼로그의 옵션 중 하나를 선택하면 다이얼로그가 사라진다. Back key를 누르거나 다이얼로그의 바깥쪽을 tap 하면 다이얼로그를 닫을 수 있다. 2) 가장 많이 쓰이는 Confirmation Dialog : 사용자의 액션을 확인하기 위한 버튼들이 있다. 3) Phone에서만 쓰이는 Full-screen dialog : full-screen dialog는 tablet에서는 쓰이지 않는다. Android의 full-screen dialog는 나중에 소개할 iOS의 modal view와 동일하다. 


Texts

Android dialog의 콘텐츠와 텍스트는 좌측 정렬되고, iOS alert의 제목과 설명 텍스트는 중앙 정렬된다. Android는 제목에 문장의 첫 글자만 대문자를 적용하는 "Sentence case"를 적용하고, iOS는 단어의 첫 글자마다 대문자를 적용하는 "Title Case"를 적용한다. Android와 iOS 모두 콘텐츠에는 "Sentence case"를 적용한다.

Android dialog와 iOS alert의 제목은 짧고 명확해야 한다. "Are you sure you want to delete the file?"와 같은 뭔가를 지시하는 의문문은 피해야 한다. "Delete the file?"과 같이 문장은 단순하고, 중립적이며, 직접적이어야 한다.


Buttons

Android와 iOS의 Dialog에서 버튼은 주로 1~2개가 적용된다. iOS의 가이드라인은 3개 이상의 버튼은 피하도록 권장하고 있다. 왜냐하면 버튼이 많을수록 복잡도가 증가하고 스크롤을 해야 할 수도 있기 때문이다. 두 가지 이상의 선택 옵션이 필요하다면, 대신에 action sheet를 사용하라. 그러나 iOS에서 iOS 버전을 업데이트할 것인지 물어보는 alert에서는 지금 설치하기, 나중에 설치, 자세히 보기라는 세 개의 버튼을 적용하고 있다. 

취소와 액션 버튼의 두 개의 버튼을 버튼을 적용할 때는, Android와 iOS에서는 취소 버튼을 좌측에, 액션 버튼을 우측에 배치한다. 버튼의 텍스트가 길어지면, 두 개의 버튼은 세로 방향으로 배열될 수 있다. 메인 액션 버튼이 취소 버튼의 위에 배치된다. 

버튼의 텍스트에는 Yes와 No를 적용하지 않는다. Cancel과 Save, Cancel과 Remove와 같이 버튼이 수행하는 액션을 표기하는 것이 더욱 명확하고 직접적이다. 

iOS는 액션이 취소 불가능할 경우 붉은색 버튼이나 텍스트를 사용한다. Android는 버튼 텍스트에 특정 색상을 사용하지 않는다. Android는 버튼 텍스트에 UPPERCASE(모두 대문자)를 사용하고, iOS sms Title Case(단어의 첫 글자만 대문자)를 사용한다. 버튼 텍스트는 Android는 우측으로 정렬되고, iOS는 중앙 정렬된다.

팝업의 내용이 많을 때, Android는 타이틀과 풋터를 고정하고 콘텐츠가 스크롤되게 만든다. 다이얼로그에서 선택할 수 있는 옵션이 많을 때 스크롤되는 콘텐츠가 사용된다. iOS는 스크롤을 방지하기 위해 콘텐츠를 길지 않게 사용하는 것을 권장하고 있다. 



9. Full-Screen Dialogs VS. Modal Views & Popovers

Android의 full-screen dialog는 iOS의 modal view와 같이 스마트폰 같은 작은 디바이스에서만 사용된다. iOS의 modal view는 4가지 스타일이 있다. full-screen, page sheet, form sheet와 split view, popover 같은 기타 스타일이다. Pohne에서 modal view는 나타날 때는 아래에서 위로 올라오고, 사라질 때는 위에서 아래로 내려가는 트랜지션이 적용된다.

Popover는 tablet에서만 사용된다.




10. Snackbars & Toasts VS. Alerts

다이얼로그 외에, Android는 사용자의 작업에 간섭이 덜한 힌트 메시지로서 snackbar나 toast를 사용한다. feedback으로써 snackbar나 toast는 사용자가 액션을 하고 나서 약 3초간 떠 있다가 자동으로 사라진다.

Snack bar는 사용자가 수행한 액션을 다시 취하거나 다른 액션을 수행할 수 있는 액션 버튼이 적용될 수 있다. Toast는 주로 시스템 메시지를 보여주는 데 사용된다. snackbar나 toast에 아이콘은 사용할 수 없다.

iOS 가이드라인에는 snackbar나 toast와 같은 컴포넌트는 명시되어 있지 않다. 피드백의 수단으로 alert를 사용하는 앱이 있는데, alert는 동작을 중단시키며 사용자의 행위에 매우 높은 간섭을 할 수 있다. iOS에서 비슷한 컴포넌트로는 볼륨 조절을 할 때 나타났다가 몇 초 후 사라지는 작은 팝업이다. 어떤 앱은 Android의 toasts처럼 몇 초동안 보이는 팝업을 커스터마이징하기도 한다.

어떤 앱은 Android의 toasts처럼 alert가 몇 초동안 보이도록 커스터마이징하기도 한다.



원문 출처 :

https://medium.com/@chunchuanlin/android-vs-ios-compare-20-ui-components-patterns-part-1-ad33c2418b45


작가의 이전글 Android VS. iOS (3)

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari