[SwiftUI]Modal View

Uno·2021년 3월 21일
1

SwiftUI

목록 보기
5/30

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

정의

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.

해석해보면,
모달리티는 디자인 기술 중 하나이다. 근데 그 기술은 컨텐츠를 보여주는 것이고, 유저의 이전화면으로부터 분리된 일시적인 컨텐츠를 보여주는 기술이다. 또 이와동시에 딱봐도 나갈 수 있는 액션이 있어야한다.
정도?

  • 이를 통해서 유저들이 그 화면에 포함하고 있는 컨텐츠(아마도 화면 내부에서 나타난 새로운 뷰)에 대해서 집중하도록 도와주고,

  • 아주 중요한 정보에 대해서 사용자에게 동의 여부나 이와 유사한 정보에 대해서 받을 수 있도록 할 수 있다.

정도로 이해됩니다.


구체적 예시

  1. Sheet (iOS 13 이후)
  2. Fullscreen (iOS 13 이후)
  3. Alerts
  4. Activity view
  5. Action sheet

이렇게 나열하고 있고 1,2번에 대해 추가적으로 설명하고 있네요.

  • Sheet
    “카드처럼 나타나는 뷰” 입니다. ( present 하여 나타내는 하나의 View를 하나의 sheet )
    카드는 내가 보고있던 뷰의 일부분만 가리면서 표현하는 그런 모달 화면입니다. 이를 통해서 내가 어느 페이지에서 이 시트가 나타났는지 알 수 있습니다. 유의할 점으로 너무 많은 정보를 담으려고 하지 말라고 합니다.
    이 카드(시트)에서 나오는 방법(화면을 사라지게하는 방법)은 위에서 아래로 스와이프하거나 버튼을 누르거나 화면 어느곳이든 아래로 스크롤 하는 방법을 권유하고 있습니다.

  • Full screen
    시트와 다르게 화면 전체를 덮어버리는 뷰 방식입니다.
    화면을 전환할 때, 너무 산만하지 않게 전환하길 권유합니다.
    이전 화면으로 돌아가는 방식은 버튼을 통해서 하도록 권유합니다.

사용하는 예시는 사진관련 작업이나 정보량이 많은 경우 사용한다고 합니다.


권고사항

  • 모달이 사용할만할 때만 사용해라
    이게 무슨말이냐면, 쓸데없이 사용하지 말라는 말 같습니다. 이전화면과 명백히 다른 내용을 보여주는 걍우에 사용하거나, 이전화면을 가리는 것이 좋을 때 사용하는 것이 적절하다고 말하고 있습니다.

  • 필수적이고 중요한 정보같은 경우 경고창(alert)과 사용해라
    경고창은 무언가 문제가 생길 우려가 있을때 나타납니다. 이건 사용자에게 앱을 사용하던 경험을 인터럽트하죠. 다만 그 인터럽트에 대해서 이게 그럴만하다라고 사용자가 느껴야하고 결국 이 앱에 대해서 믿음을 가지게 될 것이라고 합니다(혼자 추가한부분)

  • 모달을 사용할 때 keep it simple하라.
    복잡하면 사람들이 앱에서 시선을 땐답니다(앱을 삭제해버리거나 나가버리는 것이죠?)
    모달을 사용하는 것은 계층에 따른 화면전환이죠.
    In the order word,
    순서가 있다는 겁니다. 회원가입을 할때,

  1. 로그인화면
  2. 회원가입버튼
  3. 회원가입정보
  4. 인증
  5. 완료

이런식입니다. 이런 화면은 이전정보로 돌아갈 필요가 있을 수도 있습니다. 이럴때 모달을 활용하기 적합한 것이죠. 작업의 순서가 있으니까요

마지막에 완료와 함께 Done버튼으로 이전 화면을 클리어하고 새로운 뷰를 보여주는 것이 HIG에 맞다고 말하고 있습니다. 그러므로 모달을 통해 화면전환 할때는 DONE 버튼을 사용하지 않으면서 계층을 이동하는게 맞죠. 맨 마지막만 사용하는 것이 화면 로직에 맞다고 말한 겁니다.

  • Dismiss할 수 있는 버튼이 있어야한다고합니다.
    물론 제스처를 활용할 수도 있습니다.

  • 모달 화면이동 중간 혹은 특정 화면에 머무르다가 종료할 때, 정보가 사라질 수 있음을 확인시켜주는 것을 권장합니다.
    그러니까 회원가입을 중간까지 했는데 중간에 나가려고 버튼이나 재스쳐를 취하면 현재까지 작성했던 정보가 사라질 수 있음울 언급하라는 거죠.

  • 카드를 위에서 나타나지 않도록 해라.
    니가 위에 나타나게 할 수 있어도 위에 어느것도 나타나게 하지 말라고 합니다.
    (위에 나타나는 것 : top of a popover)
    드물게 위에서 팝오버가 필요할 수도 있는데 그때는
    카드가 나타나기 전에 팝오버를 닫으라고 합니다
    이부분에 오역이 있을 수 있으므로 원본 넣을게요!
    사실 거의전부내맘대로 오역일수도...ㅎㅎ

In rare cases when you need to present a card after people take an action in a popover, close the popover before displaying the card

[image:D73AC30B-AFF4-4F40-9920-4A7974A4822B-24093-000005C5CC422CDA/image.png]
이게 팝 오버입니다
출처: https://blog.kiprosh.com/presenting-a-uipopoverpresentationcontroller-popup-for-iphone/


  • 일반적인 경우라면, 현재 화면의 타이틀과 어떤 타이틀인지 알 수 있는 id를 넣으라고 합니다.

  • 모달 뷰와 앱을 동일하게 구성하라고 합니다.
    그러니까 회원가입로직이면 모두 내비게이션 바를 사용하여 하나의 로직임을 보이라는 거죠

  • 모달 화면전환 스타일에 일관성을 부여하라고합니다.
    어디선 절로나오고 어디선 이리나오고 이러지 말라는 거죠. 만약 그럴라면 그럴 논리적인 이유로 화면구선을 해야겠죠??

마지막으로는 다음을 참고하라고 알려주고있습니다.
For developer guidance, see UIViewController and UIPresentationController .


결론

  • 화면구성의 주제가 동일하면 화면전환스타일하나로해라
  • 중간에 나가면 정보 소실될 유려가 있음을 알려라(잇다면)
  • 팝오버사용했으면 종료하고 시트 사용해라

정도가 화면구성하면서 고려하면 좋을 사항 같습니다.
UI UX설계 단계에서 이러한 애플정책이므로 이런 화면전환은 앱 심사 통과못할 수 있음을 언급하면
회사에서 똑똑해보이지 않을까요..? ㅎㅎ

읽어주셔서 감사합니다. 틀린정보나 부족한 이해가 보이신다면 도와주신다면 정말 감사하겠습니다!!

profile
iOS & Flutter

0개의 댓글