안녕하세요 🌱 Lawn입니다 코더스하이 윤성관 대표님과 함께하는 HIG 독서모임을 함께하면서 배우게된 내용을 정리해보도록 하겠습니다

HIG Story 굉장히 중요한 부분이다. 모드라고 하면 옛날 전자시계에 있던 모드버튼을 생각해보면 된다. 모드를 누르면 현재시각, 날짜, 알람 등 다양한 화면이 나온다. 이 화면을 이 기능들이 같이 사용하기에 모드라는 것으로 기능을 바꿀 수 있다. 다양한 컨택스트(~~을 하는 현재 상황)들이 있다. 지도를 보여주는 와중에 Alert를 보여주는 것도 모달이다. 메일에서도 전체 뷰가 올라와서 메일을 쓰는 모드를 유지하는 것 등 모달리티는 앱안에 여러가지 모드가 있다는 전재하에 들어간다.

🌱 Modality

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

• 사용자를 독립적인 임무나 서로 가깝게 연관된 옵션들에 집중할 수 있게 한다. -> 테스크에 집중시키기 위해
• 사용자에게 매우 중요한 정보를 확실히 주고, 필요한 경우 바로 동작하도록 할 수 있게 한다. -> 경고를 할때

iOS는 앱 내 특정 상황에 사용할 수 있도록 얼럿, 액티비티 뷰(혹은 공유시트), 액션시트(사진을 찍거나 선택할때 밑에 조그만하게 나오는 시트)를 제공한다. 앱에서 커스텀 모달을 보여주고 싶다면, iOS 13 이후의 버전에서 아래 서술된 스타일을 제공할 수 있다.

☘️ Sheet

시트는 아래에서 올라와 뒤에 내용을 가리는 카드 모양의 스타일이다. 이때 뒤에 있는 뷰는 상호작용(터치 등)을 할수가 없다. 이렇게 시트를 통해 가려진 이전 뷰는 현재 시트 뒤에서 보여지며, 사용자들이 현재 시트를 열기 전에 진행하고 있던 일을 알 수 있도록 도와준다. 사용자는 카드를 다음과 같은 방법으로 제거할 수 있다.

• 스크린을 위에서 아래로 스와이프
• 카드 내용이 최상단으로 스크롤 되었을 때, 스크린을 아래서 어디로든 스와이프
• 버튼 탭

이런 시트를 사용하는 경우는 복잡한 임무 수행이 필요하지 않은, 몰입하지 않는 내용을 보여줄 때 이런 카드 형식의 카드를 슬 수 있다.

HIG Story 모달을 우리는 항상 쓰고 있었다. 만약 사파리 윈도우를 별도로 저장하려면 이를 저장하는 모달 시트가 나온다. 이렇게 모달 시트가 나오면 뒤에 사파리 페이지와의 인터렉션을 더이상 할 수없다. 이때 이 폴더 말고 새로운 폴더를 만들기 위해 폴더버튼을 누르면 새로운 폴더를 만드는 모달이 나오고 이름을 지정하고 저장하기 전까지는 뒤에있는 뷰와의 인터렉션을 막는다. 이렇듯 이런 macOS에서의 모달이 IOS로 들어간 것이 Sheet와 Fullscreen이다.

☘️ Fullscreen

풀스크린은 전체 화면을 덮는 모달이다. 이전의 화면은 완전히 가려지고, 시각적 방해를 최소화한다. 사용자는 버튼을 탭함으로서 풀스크린 모달 화면을 제거할(벗어날) 수 있다.

풀스크린 모달은 비디오, 사진, 카메라 뷰와 같은 몰입도 높은 내용이나, 문서에 마크업을 하거나 사진을 수정하는 등 전체 화면을 쓸 만한 가치가 있는 복잡한 일을 수행할때 사용한다.

NOTE 아이패드의 경우에는 스플릿 뷰(리스트와 컨텐츠로 나뉘는) 또는 팝오버에서 모달을 띄울때 시트를 사용하자. 풀 스크린이 아닌 컴팩트한 환경에서는 시트를 써라 모달을 쓰지말자.

HIG Story 로그인 할때 모달을 많이 사용한다. 로그인은 한번 하고나면 다시 하게 만들면 안되기에, 특히 아이폰은 개인적인 장치기에 로그인 정보를 기억해도 좋다.

Use modality when it makes sense.

말이 되는, 맥락에 맞는 모달을 사용하자. 중요한 선택을 할때나 사용자가 집중을 해야하는 순간에 모달을 사용해야한다. 모달을 사용하면 모달에만 집중할 수 있으며 벗어나려면 모달을 닫아야만 한다. 따라서 꼭 필요할때 사용하자.

HIG Story Alert를 웬만하면 사용하지 말자. 사용자는 액션을 취하면 그대로 동작할거라고 생각을 하는데, Alert를 쓰면 정상적인 사용자의 행동을 방해할 수 있다. 예를들어 메일을 지우거나 할떼 매번 Alert가 뜨거나 이름 입력했을 때 Alert가 사용되면 사용자는 짜증난다. 하지만 만약에 프라이버시나, 사용자의 의도와 다른 문제가 발생했을때는 Alert를 사용해서 사용자를 막아서야 한다. Alert를 이왕 썻다면 애매하게 말하지 말고 한없이 부정적인 표현을 사용해도 좋다. 예전에 통신사 네비게이션 앱을 사용했었는데 한강을 지날때 3g가 끊기는 구간에서 항상 3g연결이 끊겼다고 Alert가 나온다. 운전중에!!! Alert를 닫아야할수도 없는데 이런건 정말 좋지 않은 UX다. 차라리 위에 간단하게 빨간색으로 표시해주는게 더 좋다.

Reserve alerts for delivering essential — and ideally actionable — information.

중요하고, 이상적으로 실행 가능한 정보를 전달하하기 위해 알람은 유보하자. 일반적으로 알람은 무엇인가 문제가 생겼기 때문에 나타난다. 알람은 사용자의 앱 사용을 방해하며 이를 닫기 위해 탭을 요구하므로, 사용자로 하여금 알람이 꼭 필요했다고 느낄 수 있게 만드는것이 중요하다. Alerts에서 가이드를 확인하자.

HIG Story 앱을 보다보면 HIG를 읽어보지 않은것 같은 앱이 너무 많다. 예를 들어 어떤 앱 중에 앱을 사용할때 모달이 올라오는데 이후에 모달이 내려가지가 않는다. 모달은 짧은 상황에 잠시 사용자를 집중하게 만들기 위해 사용하는데 모달에서 모든것을 수행하게 만드는것은 좋지 않다. 모달이 무엇인지 이해하고 사용하자.

Keep modal tasks simple, short, and narrowly focused.

모달에서 수행하는 일을 간단하게, 짧게, 좁은 범위에 초점을 맞추자 앱 안에 또다른 앱을 만들지 않도록 주의해야한다. 만약 모달에서 수행하는 일이 너무 복잡하면, 사용자는 모달 내용을 접했을 때 이전에 하던 일이 무엇이었는지 혼란을 느낄 수 있다. 그러면 사용자들은 불편하게 이전의 단계를 다시 밟아나가야 한다. 만약 모달에서 수행하는 일이 여러 화면을 포함한다면, 간단하게 만들어야하며, 명확한 방법을 사용자에게 제시하자. 그리고 모달에서 일을 완수하는 것 외에는 Done(완료) 버튼을 사용하면 안된다. 사용자가 오해할 수 있는 단어를 사용하면 안된다.

Always include a button that dismisses the modal view.

항상 모달 화면을 없앨 수 있는 버튼을 포함시키자. 예를 들어, Done(완료)나 Cancel(취소)버튼을 사용할 수 있다. 버튼을 포함시키면, 사용자에게 화면을 닫는 것 말고도 다른 대안을 제시 할 수있다.

When necessary, help people avoid data loss by getting confirmation before closing a modal view.

필요하다면, 모달 뷰를 닫기 전 사용자에게 확인을 받아 데이터 손실을 막자. 사용자가 화면을 닫기 위해 제스처를 쓰든 버튼을 누르든, 그 행동이 사용자가 하고 있는 컨텍스트에 대한 데이터 손실을 일으킬 수 있다면, 상황을 설명할 수 있는 액션 시트를 만들어 사용자들이 해결할 수 있도록 하자.

Don’t display a card that appears on top of a popover.

팝오버 상단에 카드를 보여주지 말자 팝오버 안에 카드를 배치할 수는 있으나, 팝오버의 상단에는 아무것도 나오지 말아야 한다. (알람을 제외하곤) 팝오버 내에서 액션을 취한 후 카드를 보여줘야하는 드문 경우엔, 카드를 보여주기 전에 팝오버를 닫자.

In general, display a title that identifies the modal task.

기본적으로 모달에서 어떤 일을 수행하는지 알려주는 제목을 표시하자. 사용자들이 모달을 접했을때 사용자가 이 모달의 의도가 무엇인지 알 수 있게 표시해 주는 것이 중요하다. 화면에 제목을 표시하거나 가이드를 제공하는 텍스트를 보여줄 수도 있다.

Coordinate the modal view appearance with your app.

앱과 모달 화면을 서로 잘 어울리게 하세요. 예를 들어, 모달 화면이 네비게이션 바를 포함한다면, 이는 앱 안에 있는 네비게이션 바의 모습과 같은 것을 사용해야 한다.

Choose a modal transition style that makes sense in your app.

앱과 맥락이 맞는 모달 화면 전환 스타일을 고르자 앱과 잘 어울리는 전환 스타일을 사용하고, 현재 내용이 바뀌었다는 것을 잘 알릴 수 있도록 하자. 기본 전환 스타일은 모달 화면을 아래서 위로 수직 상승시키며, 사라질땐 아래로 내려간다. 앱 전체에 모달 전환 스타일은 일정하게 사용하자. 개발자의 가이드라인은 UIViewController 과 UIPresentationController 에서 확인하자.

📺 스위프트 하이 HIG 독서모임