[iOS 앱 개발] Human Interface Guideline - App Architecture (1)

[iOS 앱 개발] Human Interface Guideline - App Architecture (1) : Loading, Modality, Navigation

부스트코스에서 강좌를 수강하면서 iOS 개발의 이것저것을 찾아보고 있는데, 강의 내용 중간에 야곰님이 휴먼 인터페이스 가이드라인 ( HIG ) 에 대해 자세히 읽어보라는 내용이 있더라구요. 이전에 친구한테서 애플의 앱스토어에 올라와있는 앱들이 다들 통일감이 있고 쓰기 편한 이유가 HIG를 잘 따라서 만들었기 때문에 그런 것 같다는 이야기를 들은적이 있어요. 호기심이 생겨서 무슨 내용을 담고있나 읽어보니까, 앱개발 뿐만 아니라 모든 소프트웨어에서 적용이 가능한 내용이 쭉 적혀있는 것 같아서 되게 괜찮더라구요. 그래서 이에 대한 내용들을 쭉 번역하고 정리하면서 개념들을 머리에 집어넣으려고 합니다! 예시도 찾아가면서 작성한 포스팅이고, 내용도 크게 어렵지 않고 실생활에서 자주 보던 내용들이라서 술술 읽어지더라구요. ㅋㅋㅋㅋ 

더 나은 앱 개발을 위해 여러분도 한번 쭉 읽어봅시다!

[원문] : https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/loading/

---

Loading

만약에 컨텐츠가 로딩중인 상황에서 화면이 멈추거나 비어있으면 앱이 죽은것처럼 보여 사용자가 당황할 수 있고, 이로 인해 사용자가 떠날 수도 있다.

• 로딩중일때는 정확하게 표시하자.

최소한, 무언가 일어나고 있다는걸 나타내주자. 더 나은 방법은, 얼마나 더 기다려야 할지 예측할 수 있게 진행척도를 게이지로 보여주는 것이다.

로딩이 덜 되어 화면에 컨텐츠가 나타나지는 않지만 로드중임을 보여주어 사용자를 기다리게끔 하는 중

• 컨텐츠를 최대한 빨리 보여주자.

사람들이 화면에 컨텐츠가 로딩될 때까지 기다리게 하지 말자. 즉시 화면을 보여주고 글, 이미지, 애니메이션의 자리만 배치하여 어떤 요소가 아직 로드되지 않았는지 보여주자. 컨텐츠가 로드되면 이 빈 자리를 컨텐츠로 채워넣자. 언제든지 가능하다면, 다음 보여줄 컨텐츠를 뒤에서 미리 로딩을 해놓자.

 

• 로딩이 되는 동안에는 사람들에게 정보를 전달하거나 즐겁게 하자.

로딩되는 중에 기다리는 시간이 지루하지 않도록 게임진행의 힌트나 정보를 제공하거나 영상, 이미지를 보여주는 것도 하나의 방법이 될 수 있다.

로딩시간동안 읽을만한 거리를 제공하는 모습 [출처] https://m.blog.naver.com/PostView.nhn?blogId=kimtom123&logNo=220782908295&proxyReferer=https%3A%2F%2Fwww.google.com%2F 

• 로딩 화면을 직접 만들자

물론 기본 진행상태 표시기는 대부분의 상태에서 적절하긴 하지만, 몇몇의 경우에는 부적절하다고 느낄 수 있다. 디자인한 앱의 스타일과 어울려 좀 더 몰입감을 주는 애니메이션과 요소를 이용해 로딩화면을 구성하는 것을 고려해보자.

---

Modality

Modality(형식, 속성)은 유저의 이전 화면과 분리된 일시적인 컨텐츠를 보여주는 모드이고, 화면(창)을 나가기 위해서 구체적인 조작이 필요하다. 모달로 컨텐츠를 보여주는 것은 1. 사람들이 연관된 옵션이나 단일 작업에 집중할 수 있게 하고, 2. 사람들이 정보를 전달받거나 중요한 정보를 다루도록 확실히 제공해준다.

iOS는 Alert, Activity View, Action Sheet를 특정 상황에 사용할 수 있도록 제공해준다. 앱에서 Custom Modal을 보여주기 위해서는 iOS13과 이후 버전에서는 다음과 같은 스타일을 제공해준다.

Sheet

Sheet 스타일은 부분적으로 컨텐츠를 덮고 남은 부분을 어둡게 처리해 상호작용이 가능하게 한 카드와 같은 형태로 나타난다. 현재 카드 아래로 이전에 사용한 화면이나 이전 카드가 보여서 유저가 이전 화면의 정보를 기억하고 활용할 수 있게 도와준다.

유저는 이 카드를 다음과 같은 방식으로 제거할 수 있다.

• 화면 위에서 아래로 Swipe 하기

• 화면 어디서든 카드 컨텐츠가 위까지 스크롤 되었을 때 Swipe 하기

• 버튼 누르기

몰입이 필요없거나 복잡한 작업이 아니라면 컨텐츠를 보여줄 때 Sheet를 활용하자.

Sheet

Fullscreen

Full-Screen 스타일은 전체 화면을 덮는다. 이전의 화면은 완전히 덥히고, 시선을 집중시킬 수 있다. 버튼을 눌러 이 화면을 닫을 수 있다.

Full-Screen Modal은 몰입이 필요한 영상, 사진, 카메라등의 컨텐츠에 적합하다. 또는 전체화면으로 보여줬을 때 좀 더 좋을 복잡한 작업 ( 문서편집이나 사진편집 ) 에 활용할 수 있다.

만약에 현재 화면의 정보를 보여주기 위해 FullScreen이 아닌 다른 스타일을 사용하고 있었다면, 반드시 그 환경에서 다른 컨텐츠를 보여주기 위해서는 Sheet 스타일을 사용해줘야 한다.

FullScreen View 

Use modality when it makes sence

Modal은 선택을 하거나 현재 하던것과 다른 작업을 할 때 처럼 사람들의 집중이 필요로 할 때만 사용해주는것이 좋다. Modal이 사람들을 하고있던 작업에서 떨어뜨려 놓고, modal에서 나오기 위한 추가 작업을 요구하므로 확실히 이익이 있을 때만 사용하는것이 바람직하다.

Reserve alert for delivering essential - and ideally actionable - information

특히, alert는 무언가 잘못되었을 때 나타난다. 왜냐하면 alert는 사용자 경험을 방해하고 창을 닫도록 요구하기 때문인데, 이것은 사람들이 무언가 잘못되었음을 느끼는 것이 보장되기 때문이다.

alert의 예시

Keep modal tasks simple, short, and narrowly focused

만들고 있는 앱 속에 앱을 만드는 것을 지양하자. (너무 복잡하면 안된다는 의미!) 만약에 modal 작업이 너무 복잡하면 사람들이 modal로 이동했을때 수행해야 할 작업이 무엇인지 헷갈려 목적을 잃을 수 있다. 특히 뷰의 계층을 포함하는 modal을 만드는 것을 조심히 해야 유저들이 목적을 잃지 않는 것과 왔던 단계를 재추적하여 돌아가는 것이 가능해진다. 만약에 modal 작업이 서브뷰를 포함해야만 한다면, 계층에서는 하나의 길만을 제공하고 명확하게 그 길을 보여줘야 한다. Done 버튼은 모든 작업을 수행했을 때 말고는 사용하는 것을 지양해야 한다.

Always include a button that dismisses the modal view

예를 들어, 개발자는 Done 이나 Cancel 버튼을 이용해야 한다. 이 버튼을 삽입하는 것은 modal View가 보조적인 기술에 도움이 되고, 제스쳐를 이용한 방법에 대한 대안으로 제공된다.

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

제스쳐를 이용해 modal을 닫든, 버튼을 이용해 닫든 간에 만약 그 행동이 사용자가 만들어둔 (작성해둔) 내용을 유실할 수 있다면, sheet를 보여줘서 사용자가 이에 대해 해결할 수 있는 상황을 만들어 주자.

Don't display a card that appears on top of popover

비록 개발자가 카드를 popover로 보여줄 수 있다고 해도, popover 위에는 아무것도 없어야 한다 (물론 경고를 위한 alert를 제외하고는). popover에서 사람들이 작업을 수행한 뒤에 나타날 카드를 보여줘야 하는 특수한 경우에는, 카드를 보여주기 전에 popover를 닫아줘야 한다.

In general, display a title that identifies the modal task

사람들이 modal 작업에 들어가면, 이전에 하던 작업에서 떨어져나오게 되고, 이것은 새로운 문맥을 만들기에 좋은 환경이 된다. 다른 뷰로 넘어오게 되면 해야할 작업에 대해 충분히 설명하거나 가이드를 제공해야 한다.

Coordinate the modal view appearance with your app

예를 들어, modal view가 네비게이션 바를 포함할 때, 이 네비게이션 바는 원래 있던 앱의 네비게이션 바와 같은 모습이여야 한다. (통일감을 주기 위해서)

Choose a modal transition style that makes sence in your app

앱과 비슷한 트랜지션 스타일을 이용하여 일시적인 문맥이동에 대한 암시를 강화할 수 있다. 기본 트랜지션은 수직한 방향으로 화면 아래에서 modal view가 올라오고, 창을 닫은 경우 내려가는 것이다. 개발하는 앱에 통일성을 가지는 modal 트랜지션 스타일을 사용하자.

---

Navigation

사람들은 자기가 예측한대로 앱의 네비게이션이 흘러가는 동안은 이에 대해 의식하지 못한다. 개발자의 몫은 앱의 목적에 맞게 구조를 짜면서 동시에 이에 대해 사용자가 의식하지 못하게 네비게이션을 설계하는 것이다. 네비게이션은 자연스럽고 익숙하게 느껴져야 하고, 인터페이스를 앞서거나 컨텐츠에서 주의를 돌려버리면 안된다. iOS에서는 3가지 주요 네비게이션 스타일이 있다.

Hierarchical Navigation

한 화면에서 여러 옵션중에 하나의 선택을 하면서 목적지를 향해 가는 구조. ( 약간 계속되는 갈림길의 느낌이 나는것 같네요 ) 다른 목적지로 가기 위해서는 선택을 되돌리거나 처음부터 다시 출발하여 다른 선택을 해야 한다. 설정이나 메일이 이 네비게이션 스타일을 사용한다.

 

Flat Navigation

여러 카테고리 사이를 오갈 때 주로 사용된다. 음악앱이나 앱스토어에서 이 네비게이션 스타일을 사용한다.

Content-Driven or Experience-Driven Navigation

컨텐츠 사이를 자유롭게 움직이거나, 컨텐츠 자체가 네비게이션을 정의하는 형태. 게임, 책, 다른 몰입감을 주는 앱들이 일반적으로 이 네비게이션 스타일을 사용한다.

몇몇 앱은 여러 개의 네비게이션 스타일을 섞어서 사용하기도 한다. 예를 들어, flat navigation을 사용하는 앱이 하나의 카테고리에 대해서는 hierarchical navigation을 사용할 수도 있다. (이거 완전 앱스토어 얘기 같네요 ㅋㅋㅋ)

Always provide a clear path

사용자는 항상 자기가 애플리케이션에서 어느 위치에 있고, 다음 목적지를 향해서 어떻게 가야할 지를 알고있어야 한다. 네비게이션 스타일에 상관없이, 컨텐츠 사이의 길은 논리적이고, 예측가능하며, 따라가기 쉬워야 한다. 일반적으로, 각각의 화면에 대해서는 하나의 흐름을 줄 수 있다. 만약에 다양한 흐름을 한 화면에서 봐야한다면 action sheet, alert, popover, modal view같은 방법을 사용할 수 있다.

Design an information structure that makes it fast and easy to get to content

정보의 구조를 설계할 때, 최소한의 탭, 스와이프, 화면으로 구성된 방식을 만들어야 한다.

Use touch gestures to create fluidity

터치 제스쳐를 활용하여 물흐르듯 자연스로운 화면전환 / 액션을 구현하자. 이를 통해 인터페이스끼리의 이동에서의 이질감을 최소화하자. 예를 들어, 이전 화면으로 넘어가는 기능이 화면 가장자리에서 스와이프 하는 동작을 통해 가능하게 하자. (사람들은 익숙하고 자연스러운 것을 원한다!)

Use standard navigation components

가능하다면 항상 페이지 컨트롤, 탭바, 세그먼트 컨트롤, 테이블 뷰, 콜렉션 뷰, 스플릿 뷰 같은 표준적인 네비게이션 컨트롤을 사용하자. 사용자는 이미 이러한 조작에 익숙해져있고, 직관적으로 앱을 어떻게 조작해야할 지 알 수 있다.

Use a navigation bar to traverse a hierarchy of data

네비게이션 바의 타이틀이 사용자에게 계층 구조상에서 현재 어느 위치에 있는지 알려줄 수 있고, 뒤로가기 버튼으로 사용자가 원하는 위치로 쉽게 돌아갈 수 있게 해준다.

아래 Page Control 예시에서 상단에 있는 Title + Back Button이 그 예시이다.

Use a tab bar to present peer categories of content or functionality

탭 바는 구조 내에서 사용자의 현재 위치가 어디든 간에 쉽고 간편하게 카테고리 사이를 이동할 수 있게 해준다.

이 Tab Bar가 바로 위에 보여줬던 Flat 구조의 예시인 앱스토어와 탭 바이다.

Use a page control when you have multiple pages of the smae type of content

페이지 컨트롤은 활성화된 페이지의 수와 어떤 페이지가 현재 활성화되어있는지 알려준다. 날씨 앱이 특정 위치에 대한 날씨 페이지를 보여주기 위해 이를 활용한다.

아래의 Dot 3개에 주목