iOS/개념 & 개발

[iOS/Swift] Alert 확인/취소 액션 버튼 위치 정하기

유정주 2022. 1. 29. 00:10
반응형

안녕하세요. 개발하는 정주입니다.

 

오늘은 Alert 확인/취소 액션 버튼의 위치 정하기에 대해 포스팅하려고 합니다.

 

Alert 버튼 위치를 고민하는 원인에 대해서는 지난 포스팅을 참고해 주세요.

2022.01.21 - [iOS/iOS 프로젝트] - [iOS/Swift] 작심삼일 개발 일지 - 2

 

[iOS/Swift] 작심삼일 개발 일지 - 2

안녕하세요. 개발하는 정주입니다. 오늘은 작심삼일 개발 일지 - 2에 대해 포스팅하려고 합니다. https://github.com/jeongju9216/ThreeDayHump GitHub - jeongju9216/ThreeDayHump: "작심삼일" iOS 애플리케..

jeong9216.tistory.com

 

 


목차


    Human Interface GuideLine

    애플에서는 저처럼 UI/UX에 대해 고민하는 사람들을 위해 Human Interface GuideLine를 제공합니다.

    HIG대로 개발을 하지 않으면 앱스토어 등록 리젝의 원인이 되기도 합니다.

     

     

    Alerts - Views - iOS - Human Interface Guidelines - Apple Developer

    Alerts Alerts convey important information related to the state of your app or the device. An alert consists of a title, an optional message, one or more buttons, and optional text fields for gathering input. Aside from these configurable elements, you can

    developer.apple.com

     

    HIG에서는 Alert에 대해서도 언급하였습니다.   

     


    투 버튼 형식

    저는 확인 버튼과 취소 버튼이 있는 투 버튼 형식의 Alert를 사용합니다.

    버튼이 하나라면 고민할 이유가 없겠죠?

     

    투 버튼 형식일 때는 자주 눌리는 버튼이 오른쪽, 취소 버튼이 왼쪽에 와야 한다고 가이드하고 있습니다.

    In a typical two-button alert, the button people are most likely to tap is on the trailing side and the Cancel button is on the leading side.

    아무래도 오른손으로 핸드폰을 조작하는 사람이 많다 보니 이렇게 가이드를 하는 듯합니다.

     

    저도 가이드에 따라 취소를 왼쪽에, 확인을 오른쪽에 배치하였습니다.

     


    버튼이 두 개보다 많은 경우

    Alarm Sheet를 사용하거나 버튼이 두 개 이상 Alert를 사용하는 경우가 있습니다.

    이럴 때는 버튼을 세로로 배치하라고 합니다.

     

    세로로 배치할 때도 버튼들의 순서를 어떻게 해야 할지 고민이 많을 텐데요.

    이와 관련된 내용도 HIG에서 언급하고 있습니다.

     

    An alert that contains more than two buttons displays them in a stack, with the most likely button at the top and the Cancel button at the bottom.

    가장 많이 사용할 것 같은 버튼을 맨 위에, 취소 버튼을 아래에 두라고 하네요.

     


    마지막 인사

    Alert를 구현할 때 참고하시어 구현하면 통일성이 증가할 것 같습니다.

    감사합니다!

     


    참조

    https://developer.apple.com/design/human-interface-guidelines/ios/views/alerts/

     


    아직은 초보 개발자입니다.

    더 효율적인 코드 훈수 환영합니다!

    공감 댓글 부탁드립니다.

     

     

     

    반응형