brunch

You can make anything
by writing

C.S.Lewis

by DaDa Oct 25. 2022

[HIG] 애플 휴먼 인터페이스 가이드라인 리딩 -3

모달, 팝업, 토스트, 스낵바, 모달, 툴팁

UXUI를 공부하면서, 또 개발자와 UI를 만들때도 자주 등장하는 '모달창'. 모달이 무슨 뜻인지도 모르고 쭉 작업해왔으나, HIG를 쓱 보면서 모달에 대해 제대로 짚고 넘어가기로 했다. 모달창은 UI 디자인 할때 정말 많이 고려되는 UI 중 하나이므로 ..

우선 모달창 모달창 하는것에서 모달은 모달리티(Modality) 를 뜻한다. IT 용어 인듯한데, 아래와 같이 정의되어 있다.

“모달리티란 인터랙션 과정에서 사용되는 커뮤니케이션 채널”

(Modality: The type of communication channel used for interaction. It also covers the way an idea is expressed or perceived, or the manner in which an action is performed.

Modality(모달리티)

Modality is a design technique that presents content in a temporary mode that’s separate from the user's previous current context and requires an explicit action to exit. Presenting content modally can:

• Help people focus on a self-contained task or set of closely related options.

• Ensure that people receive and, if necessary, act on critical information

모달은 디자인 기술로, 사용자가 현재 접하는 내용(화면)과 분리된 모드에서 내용을 보여주며 이를 나가기 위해 확실한 동작을 요구합니다. 내용을 모달로 보여주면 다음과 같은 효과를 얻을 수 있습니다 :

• 사용자를 독립적인 임무나 서로 가깝게 연관된 옵션들에 집중할 수 있게 합니다.

• 사용자에게 매우 중요한 정보를 확실히 주고, 필요한 경우 바로 동작하도록 할 수 있게 합니다.

모달은 사용자의 action 을 요구한다. 어쨌든 모달창이 띄워지고 이 창을 없애고 전 페이지로 가려면 클릭(Cancel, OK) 등의 액션을 취해야 한다. 이 점에서 'Toast Pop-up' 창과는 다르다.

또한, 모달창의 대표적인 특징은 현재 접하는 페이지에서 이동되어 새로운 창이 등장하는 것이 아니라, 현재 페이지 내에서 분리된 콘텐츠를 보여주는 것이다. (부모-자식 관계라고 칭하더라.) 모달창의 콘텐츠에만 집중할 수 있도록 레이어를 까는 개념으로 생각하면 좋다. 이런식으로 등장하는 대부분의 페이지를 뭉뚱그려 모달창이라고 부른다.

(좌) Alert , (우) Modal View

Always include a button that dismisses the modal view. For example, you might use Done or Cancel. Including a button ensures that the modal view is accessible to assistive technologies and provides an alternative to dismissal gestures.

항상 모달 화면을 없앨 수 있는 버튼을 포함시키세요. 예를 들어, Done(완료)나 Cancel(취소)버튼을 사용할 수 있습니다. 버튼을 포함하면, 모달 화면이 보조기술을 사용하기 쉽고, 화면 닫기 제스처에 대한 대안을 제공할 수 있습니다.

서비스를 사용하면서 정말 쉽게 발견할 수 있는 모달창들.

우리가 일반적으로 task 를 수행하고 action 이 일어나는 공간은 'Page' 이다. 근데 한 페이지 내에서 또 수많은 기능적인 요소들이 등장하곤 한다. Page만 해도 수십개인데, 각 페이지에 올라가는 레이어들만 하면 도대체 페이지가 몇개야. 이렇게도 UI 설계는 복잡한 것이다.

모달을 공부하면서, 정말 많은 디자이너들이 헷갈려할 용어들을 모아보았다.

팝업, 토스트, 스낵바, 모달, 툴팁

1) 팝업(Pop-up)

팝업창은 현재 접하는 페이지에서, 아예 새로운 페이지를 띄우는 것이다. 대개 Web에서 적용되는데, 핸드폰 환경에서는 글쎄, 적용하기 어려울것 같다. 팝업창이 있는 UI 를 본적도 없다. 아마 디바이스 사이즈 때문이겠지. 작은 디바이스 환경에서 팝업창을 구현한다면 사용자 경험이 나락으로 떨어지지 않을까 ..

부모 페이지에 접근할 수 없는 모달창과 다르게 팝업창은 기존의 페이지와 새로운 페이지에서 액션을 취하는 것이 자유롭게 가능하다.

팝업창은 페이지가 별도로 뜨고, 두 페이지를 자유롭게 오갈 수 있다. 흔히 웹사이트 들어가면 뜨는 광고창이 그러하다.

2) 토스트 팝업(Toast Pop-up)

마치 토스터기에서 토스트가 나오는 모양과 같다고 붙여진 이름이다. 알림을 위한 팝업의 일종으로, 몇 초간 나타났다가 사라지는 형태를 취한다.

사용자의 액션 없이도 2-3 초(duration) 있다가 사라지는 토스트 팝업

3) 스낵바(Snack-bar)

스낵바는 토스트 팝업 + 모달 을 합친 느낌의 UI 이다. 아래 이미지를 참고해서 말하자면, '메세지가 삭제 되었습니다' 라고 알림을 주면서 'UNDO' 를 통해 사용자가 메세지 삭제를 취소할 수 있는 액션을 하도록 기회를 준다. 또한, 토스트 팝업과 같이 별도의 액션이 없다면 2~3초 뒤에는 알아서 사라지는 구조이다.

이 UI는 iOS에서는 거의 발견하지는 못했고, 서비스 중에서는 커머스 서비스들이 이 UI를 많이 채택 하는듯 하다. 물건을 장바구니에 담았을 때 이러한 UI가 자주 사용된다. 빠르게 서핑하고 싶은 사용자를 방해하지 않으면서도 바로 장바구니에 접근할 수 있게 해준다.