iOS의 탐색 디자인 알아보기

♪ 잔잔한 힙합 연주 음악 ♪ ♪ 안녕하세요 저는 Sarah McClanahan이고 Evangelism 팀의 디자이너입니다 오늘 제가 알려드릴 건 iOS 앱에서 내비게이션을 개선하기 위한 실용적 조언과 지침과 모범 사례입니다 앱의 내비게이션이 훌륭해도 주목받지 못할 때가 자주 있죠 사람들이 콘텐츠와 체험에 집중할 수 있기 때문입니다 내비게이션은 사람들에게 다음을 가르치는 것과 관련 있죠 사물이 작동하는 방식 사물이 속한 곳 앱 내 요소들이 작동하는 방식입니다 내비게이션의 목표는 친숙함의 토대를 충분히 제공해서 사람들이 쉽게 콘텐츠를 발견하고 앱과 상호 작용하는 겁니다 내비게이션이 우리의 기대에서 지나치게 많이 벗어나거나 세상에 대한 자연스러운 이해와 일치하지 않으면 우린 좌절감을 맛보고 앱이 사용하기 힘들다고 종종 느낍니다 하지만 내비게이션을 잘 하는 데는 집중력과 의지가 필요합니다 오늘 제가 다룰 개념들은 새롭진 않지만 기본적이고 iOS에서 앱이 성공하는 데 필수적입니다 따라서 이 플랫폼이 낯선 분이든 앱 체험을 개선할 방법을 찾고 계신 분이든 이 세션은 그분들을 위한 겁니다 오늘은 iOS의 흔한 내비게이션 형식인 탭 바 이야기를 하겠습니다 그런 다음 화면 사이를 이동하는 상호 작용을 설명하죠 다음을 탐색하는 방식으로요 계층형 내비게이션과 모달 프레젠테이션을요 보시다시피 우린 내비게이션이란 큰 주제 영역 중 일부만 다룰 겁니다 그런데 여기에서 시작하는 이유는 이 핵심 패턴들이 종종 오용되기도 하는 기본을 나타내기 때문입니다 그걸 아는 일은 앱이 발전하거나 다른 기기를 지원하면서 여러분이 성공하기 위한 바탕이 되기 때문입니다 그럼 먼저 탭 바를 설명해보죠 탭 바는 화면 하단에 위치하는 전체 내비게이션 컨트롤로 앱 콘텐츠를 여러 섹션으로 분류해줍니다 탭들을 정보 계층을 반영하는 컨트롤로 간주하세요 UI 컨트롤 자체가 이미 명확한 분류를 해석해서 앱의 여러 영역 사이의 관계를 확립해줄 겁니다 따라서 탭 바는 최상 레벨 콘텐츠를 나타내는데 이는 앱의 계층에서 최상위에 있어야겠죠 각각의 탭은 앱의 옵션 메뉴를 전달하고 이 섹션들은 의미가 있고 서술적이어야 합니다 이건 아주 단순한 것처럼 들릴 수 있지만 실제로는 여러 이유로 앱에서 잘 안 보이기 쉽습니다 좋은 예를 몇 가지 살펴보죠 이 앱들의 콘텐츠를 전혀 못 본 상태일 때 탭들이 기능을 암시하는 방식에 주목해보세요 그것들은 간결한 기호를 나타내는 방식만으로 앱이 할 수 있는 일을 자세히 전달해줍니다 Listen Now와 Radio는 이것이 청각 미디어가 있는 콘텐츠 기반 앱이란 걸 드러냅니다 이 앱의 경우 Library와 Albums는 콘텐츠가 풍부한 앱을 암시하고 동반되는 For You 탭은 강력한 개인화를 나타냅니다 이 앱에 있는 탭들은 아주 집중적이어서 그 기능이 자명하고 그 콘텐츠 영역에서 제가 할 수 있는 걸 정확히 알려줍니다 우리가 자주 목격하는 건 앱들의 첫 탭에 여러 기능이 부담스럽게 실려 있는 경향입니다 탭들 전반에 기능을 분배해서 인터페이스에 균형을 만들려고 해보세요 하나의 사례를 갖고 이걸 살펴보면서 탭이 종종 사람들을 잘못 이끌거나 혼동하게 할 수 있는 방식을 탐색해보도록 하죠 저한테 가상의 앱이 있는데 그 앱은 사람들이 도시에서 엄선된 경로를 발견하게 해줘요 지역에서 자전거 타는 사람처럼요 여러분이 여행을 하거나 다른 도시로 이주하거나 자전거 타기에 빠져든다면 경로를 저장하고 여행 일정을 만들기 위한 쉬운 방법이 있어요 이겁니다 이 앱의 기능은 자전거를 탈 경로를 찾는 거니까 먼저 보게 되는 건 운행을 위한 필터가 있는 지도 뷰입니다 그리고 향후 일정이 나온 섹션이 있는데요 그 콘텐츠를 편집하거나 친구들을 초대해서 제가 그것과 상호 작용할 수 있죠 그리고 집단 뷰에는 함께 묶여져 있는 경로들이 있습니다 모든 기능을 하나의 탭 안에 넣고 싶은 욕심이 있을 수 있어요 이런 식으로요 한눈에 보이니까요 아니면 앱이 시간이 지나며 발전해서 기능을 탭 바에 있는 섹션들에 넣는 걸 잊어버린 분이 있을지 모르겠네요 오늘 전 여러분이 앱에서 그 점을 재고하시길 바랍니다 이 디자인에서 사람들은 자신이 찾으려는 걸 위해 화면 스크롤을 많이 해야 할 수 있고, 관련이 없는 상이한 기능들을 해석하는 게 정신적으로 힘들 수 있어요 지도 뷰를 필터링하고 여행 일정을 편집하는 일은 전혀 다른 두 가지 기능입니다 사고 방식도 다르고요 누군가 앱을 열어 그걸 사용하려 할 때 말이죠 이런 식으로 앱의 기능을 통합시키는 일에 신중하세요 아니면 앱의 나머지 부분을 사람들이 이용하지 않을 거란 두려움 때문에 그렇게 하는 것도요 앱의 기능이 잘 구성되어 있고 명확하게 전달될 때 그걸 이해하기 훨씬 쉽죠 그렇게 하는 방법 중 하나는 한 걸음 물러나서 자문하는 겁니다 사람들은 왜 여러분의 앱을 사용할까요? 잊지 마세요, 훌륭한 앱에는 집중적인 솔루션이 있습니다 그 목표는 몇 가지를 아주 잘 하는 겁니다 앱 하나로 모든 걸 해결하려는 게 아니고요 이 자전거 앱의 탭 바를 다시 살펴보죠 사람들은 이 앱을 써서 관심을 두는 장소들과 자기 수준에 적절한 경로를 찾습니다 이건 앱에서 가장 중요한 뷰 중 하나예요 사람들이 가장 관심을 갖는 콘텐츠를 나타내니까요 그럼 한 걸음 물러서서 탭 바를 재평가하면서 경로가 사용될 수 있는 방식과 그 콘텐츠가 앱에서 좀 더 균형 잡힌 느낌으로 표현될 수 있는 방식을 알아봅시다 이건 경로의 세부 사항입니다 개요가 보일 거로 예상하는 사람이 있겠죠 거리와 고도 증가와 지도에 대한 접근권과 경로 전체에 있어서 도로 표면도요, 인도나 도로처럼요 가파른 오르막이나 내리막에 대한 분명한 공지를 보면 이 경로가 제 수준에 맞는지 아는 데 도움이 될 수 있습니다 그리고 마지막으로 경로 상에 있는 음식점들도 계획하는 데 아주 좋죠 그럼 사람들은 경로를 본다는 이런 핵심 기능을 어떻게 이해할까요? 경로가 도움이 되려면 그게 어디 있는지 알아야만 해요 경로는 연관된 도시와 관계를 맺고 있을 가능성이 높죠 그래서 저는 그 도시에서 자전거를 타는 것과 관련해서 유용한 정보를 주는 도시의 개요를 알고 싶을 수 있죠 그 뷰를 스크롤해서 내려가면 자전거를 탈 수 있는 모든 경로의 목록이 나올 거예요 그런데 이 앱은 다른 도시들의 경로도 지원합니다 이는 각 도시가 '모든 장소' 목록에 있어야 한다는 뜻이죠 경로를 찾아갈 때 장소들은 계층에서 최상위가 될 수 있습니다 보시다시피 이 작업 흐름에만도 콘텐츠가 참 많고 그건 이 앱이 선사하는 가치에서 핵심입니다 이는 탭 바 항목이 될 아주 타당한 이유가 됩니다 이제 그것의 자립적인 모습에 주목하세요 이 탭에 장소와 관련이 없는 걸 넣는다는 건 논리적이지 않을 겁니다 훌륭한 탭 바의 디자인에는 콘텐츠 구성도 포함됩니다 관계를 처리하는 데 있어서 자연스러운 방식을 찾아보세요 앱의 다른 핵심 기능들을 갖고 이런 연습을 해볼 수 있죠 예를 들어 여행 일정을요 그리고 이렇게 자문할 수 있어요 '여행 일정이란 뭘까?' '사람들은 그걸 어떻게 사용할까?' '내 앱 중 어디에 그것들을 위한 장소를 내어줄까?' 사람들이 여러분의 앱 콘텐츠에 익숙하지 않다 하더라도 그리고 익숙하지 않다면 특히 최선은 기능과 콘텐츠를 명확하게 전달하고 계층에서 어디에 속하는지와 사람들이 그것에 참여하는 방식도 평가하는 겁니다 그런 다음 이 앱은 첫 탭에 모든 기능을 밀어 넣는 것에서 훨씬 더 명확하고 단순한 내비게이션 형태로 개선될 수 있습니다 이제 핵심 기능은 탭 바에서 더욱 균형이 잡히게 되죠 이 섹션들은 자립하니까요 그것들은 연관되어 있으면서 콘텐츠 영역과 작업 흐름 측면에서 뚜렷하게 구분됩니다 이는 내비게이션을 훨씬 더 직관적이게 해주죠 다음으론 약간 관련된 내용을 설명하고 싶은데요 우리가 볼 때 그건 다르게 표현됩니다 기능을 복제해서 하나의 탭에 통합하는 일은 피하세요 이처럼 콘텐츠가 풍부한 앱에서 Home이란 제목의 탭은 앱 전체의 기능을 한 곳에서 선보일 만한 매력적인 보관함처럼 보일 수 있습니다 예를 들어 사람들이 여행 일정 기능을 이용하지 않는 것 같고 그 기능이 존재한다는 걸 사람들의 모르기 때문이라고 여러분은 걱정할 수 있어요

따라서 참여를 독려하는 게 합리적으로 느껴질 수 있습니다 가시성을 늘리기 위해 탭 바에서 동작을 반복해서요 가령 Places 카드 위에 New Itinera Messages app ry처럼 말이죠 그리고 여행 일정 뷰의 가장 중요한 위치에 기능들이 있는 버전을 만든다든지요 가령 친구 초대하기라든가 경유지 나열하기가 있겠죠 그것의 추가 동작을 쉽게 해서요 일부 기능이 앱 전체에서 발견되지 못할 거라는 두려움으로 인해 그렇게 하고 싶을 수 있어요 분명히 말씀드리자면 여기에선 콘텐츠 복제가 중요한 게 아닙니다 대부분의 경우 노래나 사진 같은 비슷한 종류의 콘텐츠가 여러 탭에 존재하게 하면서도 다른 식으로 구성하는 게 합리적일 수 있어요 하지만 뭔가를 이루기 위해 사람들이 할 수 있는 동작이 여러분 앱의 기능이라면 불필요한 중복은 혼란을 야기합니다 현실에서 Home 탭은 앱의 계층을 교란합니다 다른 탭들의 기능이나 앱 전체의 영역들이 충분한 맥락 없이 한 화면에 복제되고 추가된다면 불필요한 중복과 혼란이 야기됩니다 Home은 모든 기능이 그 자리를 위해 싸우는 탭이 됩니다, 그 탭은 검색 용이성이란 문제를 해결하려 하기 때문이죠 하지만 현실에서 그건 콘텐츠의 이해와 그것에 대한 행동 사이의 분열을 유발합니다 이게 여러분의 앱이라면 Home 탭을 완전히 없애버리는 걸 고려해보세요 기능의 불필요한 중복은 사물들이 속해야 할 곳과 그 이유를 사람들이 알지 못하게 합니다 Home 탭과 관련된 또 하나의 우려는 반복되는 기능으로 인해 탭을 건너뛰는 사람이 생길 수 있다는 거죠, 그 동작이 다른 탭에도 존재하니까요 뷰 내의 어떤 요소를 두드려서 누군가를 또 다른 탭으로 이동시키는 건 신경에 거슬리고 갈피를 못 잡게 합니다 누구에게든 탭을 자동으로 바꾸게 하지 마세요 다음으로 탭이 있는 내비게이션의 가장 큰 장점 중 하나는 다수의 최상위 레벨 계층에 대한 접근권입니다 따라서 내비게이션 전체에서 탭 바를 숨기거나 제거하는 일은 피하세요 탭 바로의 지속적인 접근권은 사람이 정보 계층의 여러 레벨 사이를 왔다 갔다 할 수 있게 해주는 동시에 각각의 맥락을 유지하게 해줍니다 예를 들어 저는 Places 탭에서 자전거 운행을 고려하는 새로운 경로를 볼 수 있습니다 그걸 Itinerary 탭에서 제가 만들고 있는 여행 일정과 비교할 수 있죠 이미 저장한 경로로요 그 경로는 제 계층의 두 레벨 깊이에 있습니다 이건 탭들에 규정된 목적이 있고 구체적 콘텐츠 범주를 나타낼 때만 효과가 있습니다 마지막으로 견고한 정보 아키텍처에 여러분이 투입하는 모든 노력에는 명확하고 간결한 기호가 지정되어야 합니다 올해 Apple Design 상호 작용 부문 수상자를 살펴보죠 이건 Slopes 앱입니다 제가 보기에 정말 멋진 건 이 앱을 실행하면 가운데 탭이 열린다는 거예요 그건 시즌 통계치가 있는 Logbook입니다 다른 탭들은 구체적입니다 이해하기 쉽고 앱이 하는 일과 그 사용 방법을 곧바로 인지할 수 있습니다 한 번 보면 그 이유는 기호들이 콘텐츠를 대표해주기 때문입니다 스키 타는 날 기록 리조트 검색 친구들과의 통계치 비교 그 모든 게 간단명료한 표시로 핵심 기능을 나타냅니다 탭 바는 내비게이션의 강력한 컨트롤입니다 배운 걸 전부 복습해보죠 탭을 사용해서 정보 계층을 반영하세요 탭 전체에 기능들의 균형을 잡는 방식으로 그것들을 구성하세요 기능들을 복제해서 단일 탭에 그것들을 병합하는 일은 피하세요 앱 전체에 탭 바가 늘 지속되게 해주세요 마지막으로 각 탭에 명확하고 간결한 기호를 사용하세요 좋아요, 상호 작용으로 들어가보죠 앱 화면들 사이에서의 길 찾기에 관한 얘기를 하자면 두 가지의 아주 흔한 전환 형태가 있습니다 앱의 계층에서 길 찾기를 할 수 있습니다 우리가 가끔 '푸시'로 지칭하는 용어로요 가령 세부 사항으로 푸시해 들어간다는 것처럼요 아니면 모달 프레젠테이션으로 전환할 수 있습니다 그것들은 앱의 계층을 횡단하고 뷰 사이를 전환하는 방법 중 침해가 없고 친숙합니다 두 가지를 모두 보여드리죠 계층 내비게이션을 통해 전환할 땐 뷰가 푸시를 합니다, 이는 사람이 어떤 요소를 두드렸고 다음 화면이 우측에서 좌측으로 시야 내에 들어온다는 뜻입니다 앱의 계층에 더 깊이 파고들 때 푸시 전환은 예상되는 초기 설정입니다 푸시가 멋진 이유는 그게 정보 계층을 직접 반영해주기 때문입니다 그건 높은 수준에서 더욱 세부적인 사항으로 파고들며 콘텐츠를 통과하며 이동하는 걸 문자 그대로 표현한 겁니다 반면에 모달은 인터페이스에서 자립적 작업을 위해 따로 잡아둔 겁니다 모달은 독립적인 작업 흐름에 효과가 아주 좋죠 이는 의사 결정을 하고 업무를 완료할 수 있을 만큼 누군가 그 뷰에서 정보를 충분히 보유한다는 뜻입니다 모달이 독특한 이유는 사람들을 정보 계층에서 분리하는 방식으로 초점을 만들기 때문입니다 예를 들어 새 여행 일정을 만드는 일이 모달 뷰로 제시됩니다 누군가 선택하거나 제목, 도시, 날짜 범위와 같은 데이터를 입력하고 친구를 초대하기까지 할 수 있죠 이게 모달에 적합한 이유는 그 UI는 뷰를 끝내거나 앱의 다른 곳에서 길 찾기를 하기 전에 편집되고 완성될 의도로 만들었기 때문입니다 그 모든 게 사용자 입력이므로 앱의 나머지는 필요가 없습니다 필드 작성을 위한 참고 자료로요 이제 여러분이 이 상호 작용들을 알게 됐으니 두 가지 모두를 자세히 알아보죠 먼저 계층형 내비게이션입니다 이건 고려해야 할 두 가지 지침입니다 푸시 전환을 사용하여 앱 계층의 여러 레벨 사이에서 길을 찾아보세요 계층형 내비게이션은 최상위와 2차 콘텐츠 사이의 관계를 강화해줍니다 최상위 콘텐츠는 계층에서 더 높이 있습니다 저는 더 세부적인 내용을 원하기에 계층을 더 파고 들어가서 보조 뷰에 접근합니다 저는 선택할 때 옵션의 폭을 좁히고 나머지 계층에 대한 접근권을 없앱니다 바로 이런 식이어야죠 콘텐츠는 점점 더 구체적으로 변해야 하고 제가 세부 사항으로 푸시하며 들어갈 때 옵션은 더 적어져야 합니다 푸시 전환을 사용할 때는 탭 바가 화면 하단에 고정된 상태로 지속되게 하는 게 아주 중요합니다 앞에서 말씀드린 것처럼 그건 탭이 있는 내비게이션의 가장 큰 장점 중 하나입니다 그건 일관됩니다 그건 앱의 핵심 영역에 접근할 수 있게 해줍니다 늘 사용 가능하기 때문이죠 이는 사람들이 서로 다른 계층에 있는 콘텐츠를 탐색할 수 있다는 뜻입니다 뷰가 밀려 들어올 때 좌측에서 우측으로 쓸어넘겨서 왔던 데로 돌아가는 게 자연스럽게 느껴집니다 자신의 상태가 보존되어야 할 다른 탭들에서 계층에 대한 접근권을 잃지 않은 채로요 다음으로는 화면 상단에 있는 내비게이션 바를 사용하는 게 중요합니다 계층에 있는 사람들을 안내해줄 적절한 기호와 함께요 제가 보여드리죠 제가 콘텐츠를 파고 들어가서 제 정보 계층을 뚫고 이동할 때 내비게이션 바의 뒤로 가기 버튼이 바뀌면서 제가 방금 왔던 화면의 제목을 반영하는 모습에 주목하세요 그건 화면을 스크롤하고 파고 들어가는 식으로 제가 앱 속으로 더 깊이 들어갈 때 유용합니다 제가 왔던 곳이나 거기로 돌아갈 방법을 기억하지 않아도 되게요 뒤로 가기 버튼이 계층에서 위 레벨을 표시할 수 있으니까요 계층형 내비게이션을 사용할 수 있는 다른 곳은 디스클로저 인디케이터가 사용되는 모든 경우입니다 디스클로저 인디케이터는 '셰브런'으로 지칭하기도 하는데 전환하기로 예상되는 방향을 가리킵니다 셰브런이 다른 전환을 개시하면 UI가 나타내는 것과 이어지는 상호 작용 사이에 단절이 일어납니다 지도를 진행의 정신적 모델로 푸시하는 개념이죠 서구 문화에서는 좌측에서 우측으로 글을 읽고 그 방향은 진행을 나타냅니다 그런데 아랍어나 히브리어처럼 우에서 좌로 읽는 언어들에선 진행의 정신적 모델이 반대 방향으로 흐릅니다 여러분의 앱이 우측에서 좌측으로 가는 언어를 지원한다면 푸시의 전환은 뒤집어져서 콘텐츠 흐름과의 연계가 만들어집니다 계층형 내비게이션을 써야 할 때의 마지막 고려 사항은 작업 흐름의 맥락과 관련이 있습니다 가령 누군가가 콘텐츠 사이를 자주 돌아다닐 때죠 여러분이 제시하는 작업 흐름에서 사람들이 자주 상호 작용하길 기대한다면 뷰 사이를 자주 왔다 갔다 하거나 작업 흐름 도중에 앱을 바꾼다거나 하는 식으로요 아니면 뷰에서 상당한 시간을 소모한다면 푸시를 사용하세요 익숙한 사례는 메세지 앱입니다 그 계층은 상대적으로 평평하긴 해도 저는 푸시 전환으로 메시지들에 쉽게 들어갔다 거기에서 나왔다 할 수 있습니다 각각의 메시지가 푸시가 아니라 모달이라면 서로 다른 채팅창 사이를 매끄럽게 이동하기가 어려울 겁니다 메시지 전달은 유동적으로 느껴져야 하지만 의미가 없는 모달을 끝내는 건 사람들이 화면을 떠나는 걸 생각할 수밖에 없게 하고 그건 너무 복잡하게 느껴집니다 푸시는 앱의 핵심 영역들 사이를 마찰 없이 전환할 수 있게 합니다 여기까지 계층형 내비게이션의 개요였습니다 복습해보죠 앱의 계층을 횡단하는 데는 주로 푸시 전환이 사용됩니다 탭 바는 늘 화면 하단에 지속적으로 고정되게 해주세요 각 화면의 내비게이션 바를 사용해서 명확한 제목과 후면 기호를 반영하여 계층으로 사람들을 안내해주세요 디스클로저 인디케이터가 존재하면 푸시를 사용하세요 그리고 작업 흐름에 콘텐츠 사이를 자주 돌아다녀야 할 필요가 있을 때도요 계층형 내비게이션은 아주 흔하고 상대적으로 단순한 상호 작용이라서 이 전환은 여러분의 앱에 자주 사용될 가능성이 높습니다 반면에 모달 프레젠테이션에선 맥락 변화가 더욱 중요합니다 거기에서 중요한 건 누군가를 집중된 작업 흐름이나 자립적 작업으로 분리시키는 거죠 iOS에서 모달을 사용할 때는 언제나 화면 하단에서 제시하세요 모달은 정보 계층을 방해합니다 그건 화면 하단에서 나와서 탭 바를 덮습니다 그렇게 해서 사람들이 여러분의 앱을 파고드는 걸 막죠 그건 의도적인 차단입니다 집중을 강화하는 게 그 목적이니까요 이제 여러분은 궁금할 수 있어요 '자립적 작업이 뭘까?' 일반적인 사례 세 가지를 설명하죠 모달 프레젠테이션은 단순 작업, 다단계 작업 전체 화면 콘텐츠에 사용할 수 있습니다 각각의 사례를 알려드리죠 첫째, 단순한 작업의 완수를 요구하는 업무 흐름에 모달리티를 사용하세요 가령 이벤트를 만들거나 상기시키는 메모를 남길 때요 상기시키는 메모를 남길 때 필요한 건 제가 입력 필드를 편집하고 수정하는 거예요 이걸 하는 동안 집중력을 유지하면 방해 없이 이 작업을 완수할 수 있습니다 또한 다른 요소나 탭을 두드려서 실수로 그 흐름에서 벗어날 가능성을 최소화해줍니다 둘째, 복잡한 작업이 담겨 있는 업무 흐름에 모달리티를 사용하세요 이는 다단계일 가능성이 있습니다 가령 지갑에 교통 카드를 넣는 것처럼요 복잡한 작업에 모달을 쓰는 건 직관에 반하는 것 같을 수 있지만 잊지 마세요 목적은 집중력을 강화하는 거예요 탭 바를 숨기고 사람들이 앱 주위를 돌아다니는 걸 예방하는 식으로요 작업이 완료되거나 취소되기 전에 말이죠 셋째, 기사, 영상 전체 화면 콘텐츠를 시청할 때 모달을 사용하세요 최소한의 추가 내비게이션을 필요로 하는 콘텐츠를요 피트니스 앱에서 운동을 시작하는 건 영상으로 제시되는 데 이건 모달 프레젠테이션에 잘 어울리는 경우입니다 계층형 섹션에서 우린 내비게이션 바가 사람들을 안내해주는 것의 중요성을 설명했어요 그건 모달 프레젠테이션에서도 똑같이 중요합니다 모달의 구조를 살펴볼 땐 내비게이션 바를 길 찾기의 안내인으로 생각하세요 기호와 동작의 사용은 사람들에게 확신을 줄 수 있어요 자신이 있는 곳과 다른 곳으로 가기 위해 취할 수 있는 동작과 관련해서요 제목은 화면의 콘텐츠로 사람들을 이끄는 걸 돕습니다 그 예로 'New Itinerary'가 있죠 우측 기호는 선호하는 동작을 의도한 것이라서 중요성을 강조하기 위해 굵은 폰트로 나타낼 때가 많죠 그 기호 자체는 간결하고 긍정적인 동사로 누르면 정확히 뭘 예상할 수 있는지를 알려줍니다 이 선호 동작은 모달을 끝내주고 앱의 이전 상태가 보존될 겁니다 모달에 여전히 입력이나 상호 작용이 없다면 선호 동작을 비활성화 상태로 두는 게 저장하거나 계속하기 위해 필드가 필요하다는 점을 분명하게 하는 데 좋은 방법입니다 여러분한테 선호 동작이 있으면 좌측 동작을 사용해서 'Cancel'로 모달을 끝내는 일은 제가 이 작업 흐름을 버린다는 걸 명확히 나타냅니다 Cancel을 두드리기 전에 제가 정보를 하나라도 입력했다면 이때는 여기 보이는 것처럼 경보나 동작 시트를 보여주기 좋은 때입니다 계속 취소하면 데이터를 잃을 거란 점을 사람들에게 알려주는 겁니다 하지만 제가 UI와 상호 작용한 적이 없다면 Cancel을 두드리면 모달이 끝나기만 할 겁니다 닫기 기호는 아껴서 사용하고 모달 프레젠테이션에 최소한의 상호 작용이 필요하고 글자 입력이 불필요할 때만 쓰세요 때로는 모달에서 'X'가 끝내는 주된 방법인 걸 보게 될 겁니다, 가령 App Store의 Today 탭에 있는 이 기사처럼요 이때 닫기 부호가 효과가 있는 건 사용자 입력이 없기 때문입니다 그래서 미묘한 끝내기 동작으로 사람이 그 콘텐츠에 집중할 수 있습니다 이건 입력과 상호 작용을 필요로 하는 모달에서 닫기 부호가 문제가 될 수 있는 사례 한 가지입니다 제가 필터를 선택한 다음 닫기를 두드리면 선택은 적용될까요? 아니면 취소될까요? 명확한 표시가 있는 동작이 없으면 사람들은 궁금해하겠죠 '닫기를 누르면 어떻게 되나요?' 그러니 명심하세요 내비게이션 바의 기호를 쓰는 게 대개는 우선입니다 그게 더 확실하고 동작이 더욱 분명하기 때문이죠 마지막으로 우린 모달 위의 모달을 제한하려 합니다 그건 거슬리면서 너무 복잡하게 느껴질 수 있거든요 강조할 만한 건 모달 뷰 그 자체가 관련이 있으면 서브뷰와 전환을 지원할 수 있다는 겁니다 앞에서 제가 이건 편집 뷰라고 언급했었죠 텍스트 필드와 테이블 셀의 선택과 입력이 보기만을 위한 게 아니라 상호 작용을 위한 거란 뜻이었어요 예를 들어 제가 여행 일정에 추가한 제 친구 한 명의 테이블 셀을 두드릴 수 있습니다 이게 푸시할 거라 예상하죠 셰브런이 있으니까요, 기억하시죠? 제가 푸시하면 이 뷰는 Kate에 관한 정보를 보여주고 Kate를 일정에서 없앨 옵션을 저한테 줄 수 있어요 하지만 'Add People'과 'Upload Photo' 표시는 명청색이고, 그건 이 동작들을 두드릴 수 있다는 걸 나타내죠 이 경우들 각각은 작업 흐름 내에 있는 작업 흐름입니다 저는 시작할 때 여행 일정을 넣었고 이제 그 일정에 사진을 넣고 있습니다 사진 업로드는 상호 작용이 꽤 많은 작업 흐름입니다 카메라 롤을 샅샅이 스크롤해서 새 사진을 선택하는 것처럼요 저는 이것도 자립적 작업으로 규정할 거예요 일단 사진을 선택하면 그 모달은 끝나고 저는 새 여행 일정의 첫 모달로 되돌아옵니다 다수의 모달리티 더미는 제한하려 하세요 그게 필요할 때도 있긴 합니다 일관성을 유지하고 서브뷰에 집중하기 위해서요 지금까지 iOS에서의 모달 프레젠테이션의 개요였습니다 모달은 화면 하단에서 제시되어야 합니다 그것은 세 가지 종류의 작업에 사용될 수 있습니다 단순, 다단계, 전체 화면 작업이죠 내비게이션 바에 있는 선호와 취소 동작을 사용하세요 상호 작용이 미미한 콘텐츠에는 닫기 부호를 사용하세요 모달 위에 모달은 제한하세요 제 자세한 설명이 여러분에게 유용했길 바랍니다 iOS 앱에 내비게이션을 디자인할 때 생각할 것은 콘텐츠가 구성되는 방식과 사람들이 여러분의 기능과 상호 작용하는 방식과 그걸 여러분의 계층과 관련해서 가장 잘 표현할 방법입니다 그렇게 하면 사람들은 앱의 멋진 기능들 모두에 쉽게 접근하고 그것과 상호 작용할 수 있습니다 들어주셔서 감사합니다 ♪