HIG읽기 : Modality

1) Modal란 ? 

현재 context 과정에서 다른 context를 가진 임시 모드를 보여주는 방법으로,

시간이 흐른다고 자동으로 없어지지 않고 사용자가 action을 주어야 modal 창이 사라진다.

 

- 공식 문서에서 "context"라는 말이 자주 쓰이는데 이때 "context"란 사용자의 상황/문맥을 말한다.

ex) 연락처에 이름과 전화번호를 입력하고 있는 context -> 연락처에 사진을 입력하는 다른 context

 

- "임시 모드"라고 하면 짧고 해야 하는 일이 분명한 모드라고 생각하면 된다. 예를 들어서 전자 시계에서 현재시각을 보여주는 기본에 "날짜"를 확인할 수 있는 모드, "스톱워치"기능이 있는 2가지의 추가 모드가 있는 것처럼, 부가적인 추가 기능이라고 생각하면 쉽다.

 

 Modal과 Navigation의 차이점

Modal	Navigation
현재 사용자가 수행하고 있는 context와는 별개로 해당 화면에서 추가적인 작업을 수행하거나 경고를 할 때 사용된다.	현재 사용자가 수행하고 있는 context의 연속성이 있어서 이전 페이지와 현재 페이지가 매끄럽게 이어질 때 사용된다.

 

 

ex) Modal 의 예시 : 사진첩에서 사진을 차례대로 보는 context 속 공유하기 버튼을 눌렀을 때

 

ex) Navigation 의 예시 : 환경설정에서 text 입력 소리를 변경하기 위해 사용자가 이동하는 context

 

 

2) Modality의 장점

- " 현재 context와 다른 독립적인 task" 혹은 " 현재 context와 밀접하게 관련된 option들"에 집중할 수 있다.

- 유저에게 중요한 정보를 전달하거나, 정보를 전달한 후 유저가 행동을 하게 이끈다. (alert을 떠올리면 쉬움)

 

3) Modal 의 종류

alerts, activity views, share sheets, action sheets

 

※  sheet

- card 형식으로 보이는 비 몰입형의 modal로 부분적으로 가려진다.

- 거의 전체를 가리는 양식과 반만 가리는 양식이 존재

- 원래 있던 작업은 뒤에 멈춰있음을 알리기 위해 previous view는 살짝 흐리게 보이고, 이전 콘텐츠들과 interaction은 불가능진다.

- madal을 끄는 방법 (스크롤이 다 되었음에도 위에서 아래로 내릴 때, 버튼을 클릭했을 때)

 

4) custom Modal의 presentation style 

1️⃣ Automatic

sheet와 같은 기본적인 스타일 

 

2️⃣ Fullscreen

몰입형의 modal로 Previous view 전체를 덮는 스타일 (종료 버튼 필수)

 

3️⃣ Popover

horizontally regular environment(ipad) : popover 사용 (5번 current context에 주의사항 확인 !)

↔️ compact environment (iphone) : sheet 사용

 

4️⃣ Page sheet and form sheet

 Previous view를 일부를 덮는 방식

 

+) Page sheet와 form sheet 차이 

: 좌측이 Page sheet, 우측이 form sheet

이 두개의 sheet는 기능을 구현할 때는 상관 없으나, 디자인 적인 명칭이 다르다.

Page sheet에는 사용자가 입력을 하는 창이 존재하지 않고, form sheet에는 존재한다.

 

참고로 두 sheet 모두 한 화면을 꽉 채우는 sheet이지만 중간까지만 덮는  Page sheet나 form sheet도 존재한다.

 

+) Fullscreen과 Page sheet 차이 

: 좌측이 Page sheet, 우측이 Fullscreen

Page sheet의 상단에는 scheme가 존재하고, Fullscreen은 scheme가 없이 꽉 차 있다.

 

이때 scheme란 Page sheet의 상단에서 보이는 뒷 페이지의 흐릿흐릿한 previous view 부분을 의미한다. 

 

Fullscreen는 navigation이 아닌가요?

 

앞서 말했던 것처럼 navigation은 하나의 context로 사용자가 앞 혹은 뒷 view로 흘러가야 한다. 하지만 우측의 Fullscreen의 상단에는 이전이나 이후의 view로 이동하는 button 대신에 해당 modal을 지울 x만 존재한다. (2번의 Fullscreen의 특징 참고)

 

 

5️⃣ Current context

previous view의 내용을 부분적으로 다루는 스타일

※ current context에서 split view pane, popover, fullscreen이 아닌 view로  modal이 나온다면, 

iphone에서는 sheet로 전환하라 !

-> iphone에서는 split view pane, popover, fullscreen 대신 sheet를 지향하라.

 

6️⃣ Custom

말그대로 커스텀 컨테이너를 만들어 사용하는 것

 

5) Modal 의 사용법 

1️⃣ 집중이 필요할 때 사용하라. 

- 이목을 끌어들어야 할 때

- 현재 task와 다른 task를 수행해야 할 때

- 사용자에게 선택을 요구해야 할 때

: modal은 사람들을 현재 context에서 벗어나게 하고 모달을 지울때 또 다른 액션이 필요하므로 확실한 이점을 제공할 때만 사용해야 한다.

 

2️⃣ Alert은 꼭 필요할 때만 사용하라.

- 부정적인 일이 발생했을 때 alert을 주로 사용한다. 

- 사용자의 흐름을 방해하고, alert 자체가 사람들에게 불쾌감을 준다. 

- 만약 alert을 사용한다면 확실히 부정적이게 말하라. ex) "이거 나가면 삭제된다. 괜찮냐 !" 

- 필수적인 핵심을 전달하고, 액션을 요구할 때 사용하라. ( 문제인 상황만을 전달한다면, alert은 사용하지 말라. )

 

ex) 네트워크가 연결 안돼서 인스타 로드가 안되는 상황만을 전달하기 때문에 alert을 사용하지 않은 경우

(사용자의 액션을 요구하지 않음) 

3️⃣ Modal은 Simple + short + 단방향 흐름

- 너무 복잡하면 유저는 길을 잃기 쉽다. 따라서 앱안에 또 다른 앱이 있는 느낌의 헤비한 모달은 피하라.

- 사용자가 기존의 task로 돌아가는 데 길을 잃지 않게 modal에 subview가 필요하다면 hierarchy 구조가 아닌, Flat 구조로 설계하라.

- "Done" button은 마지막에 모달이 사라질 때만 사용하라.

 

4️⃣  몰입감이 필요하거나 복잡한 task는 Fullscreen 모달을 사용하라.

- fullscreen modal은 산만함을 최소화 시킬 수 있다.

- multistep task을 가능하게 한다.

 

+ 복잡한 task에서 Page sheet가 아니라 Fullscreen을 사용하는 이유

 

navigation과 달리 하나의 context로 연결되는 것이 아니라서 modal로 사용을 해야 하는데,

해당 view의 context가 길거나 쉽게 삭제되지 않았으면 하는 경우에 Fullscreen를 사용한다. 

 

예를 들어서, 아래의 "입출금통장" Fullscreen을 살펴보자.

 

우선 사용자가 통장 잔고를 확인하는 context에서 입출금통장 개설하기 버튼을 눌렀기 때문에 새로운 context를 시작하게 된다. 따라서 다른 context로 연결이 되기 때문에 navigation이 아닌 modal로 입출금통장 개설 context가 진행된다.

그럼 일단 modal을 사용해야 한다는 건 okay.

 

다음으로 "입출금통장"이 modal의 종류 중 Fullscreen이 아닌 Page sheet로 되어 있다고 생각을 해보자.

우선 입출금통장 개설을 몇 초만에 끝나는 것이 아니라 몇 분 정도로 진행 사항이 길다.

신청하기를 눌러서 해당 modal에서 입출금통장 개설 context가 진행되고 있다. 사용자가 열심히 계좌번호를 입력하고 전화번호 인증하고 거의 모든 절차를 끝내갈 때 즈음에 내용을 확인하다 실수로 위에서 아래로 modal을 내렸다..?? 그러면 이제 입력한 정보가 다 날라가는... 일이 발생할 수 있다.

뿐만 아니라 모달은 앞에서 언급한 것처럼 "임시창" 이다. 하지만 임시라고 하기엔 좀 heavy한 작업을 하고 있지 않은가? 사람들이 좀 더 몰입적으로 입출금통장 개설을 하도록 유도해야 할 것이다.

 

이처럼 "입출금통장"처럼 modal은 사용해야 하지만, 몰입감이 필요하거나 복잡한 task는 Fullscreen을 이용하는 것이 좋다. 

 

5️⃣  언제든 madal을 내릴 수 있게 하라.

- sheet의 madal을 끄는 방법

             : 스크롤이 다 되었음에도 위에서 아래로 내릴 때

             : 닫기 버튼을 클릭했을 때

- Done button, Cancel button 등 배치

 

6️⃣ modal view를 끄면서 정보가 날라갈 수 있으면 유저에게 알려라.

- 유저가 종료버튼을 누르거나 종료 제스쳐를 취해서 modal이 꺼질 때, modal view 내에서 생성한 data가 사라질 수 있다면 action sheet로 유저에게 현 상황을 알려라

 

7️⃣  modal view title을 표시하라. 

- 사용자가 현재 어디에 있는지를 알려주기 위해 좌측 상단에 < 이전title 이라던가, 중앙 상단에 현title을 표시하라.

 

8️⃣ app의 디자인과 modal view 디자인을 어우러지게 하라.

ex)  modal view 안에 navigation bar를 넣는다면 app에서 사용했던 navigation bar 디자인과 동일하게 해야 한다.

 

9️⃣ Modal transition style은 App에 어울리는 것으로 선택하라.

- app의 임시 context shift 임을 알리기에 어울리는 transition style을 사용하라.

- app 전체에서 일관된 transition style을 사용하라.

- default transition : 처음엔 modal이 밑에서 위로 올라오고, 끄면 위에서 아래로 내려감

 

 

 NOTE 

modality는 조금 긴 감이 없잖아 있었는데 몰랐던 부분들을 제대로 공부하게 된 것 같아 뿌듯하다.. 특히 alert은 부정적인 의미를 내포하고 있기 때문에 남발하면 안 된다는 것과 page sheet, form sheet, full screen modal의 차이를 알게 되었다 ! 뿌-듯- ! 그리고 모달의 종류가 이렇게 많고 방대한(?) 내용인지 몰랐다! 하루 하루 성장하는 게 신기하다! 늦게 자지만 졸립지는 않은게 더 신기하다 ㅎㅎ 내일도 화이팅 !

 

 출처 

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

Modality - App Architecture - iOS - Human Interface Guidelines - Apple Developer

 

https://www.youtube.com/watch?v=V2RN2XOQndw&list=PLLFDewH7eSVxGMERS4CrwkDXXYZoE5mVZ&index=12