[UX] 구글 머티리얼 디자인 – 3.4.머티리얼 기초(Material foundation) – 내비게이션(Navigation): 내비게이션 화면 전환(Navigation transition)
내비게이션 화면 전환(Navigation transition)은 사용자가 홈 화면(Home screen)에서 상세 화면(Detail screen)과 같이 화면 간에 이동이 발생할때 일어납니다. 여기서 화면은 이전 포스팅에서 언급한 바와 같이 액티비티, 라우트, 뷰컨트롤러의 개념으로 이해하면 됩니다.
출처: 원문보기
1. 내비게이션 화면 전환에 대하여
1.1. 내비게이션과 모션 (Navigation and motion)
내비게이션 화면 전환은 앱 내에서 두 화면 사이에서 사용자들에게 화면 전환을 알리기 위해 모션 효과를 사용합니다. 내비게이션 화면 전환은 개별 요소(Elements)가 다른 개별 요소가 어떻게 연관되어 있는지를 나타내는 이동효과를 사용하여 앱의 계층 구조를 표현함으로써 사용자들에게 화면들의 방향성을 알려줍니다.
하나의 예로 개별 요소가 화면 전체를 채우도록 확장하는 역할을 한다고 했을 때, 확장되는 행위는 새로운 화면이 자식 요소(child element)라는 것으로 표현이 되는 것입니다. 반대로 자식 요소를 확장시키는 요소는 부모 요소(parent element)로 정의할 수 있겠습니다.
설명이 다소 어렵지만 쉽게 말해, 한 화면에서 다른 화면으로 이동하는 시각적 효과를 사용하여 요소와 요소의 관계를 설명한다는 것입니다. 예를 들어, 특정 버튼을 눌러서 화면이 이동하면 해당 버튼과 해당 화면은 서로 연관되어 있다는 것을 알 수 있게 한다는 것이고, 이동이 시작되는 화면은 부모 요소(parent element), 이동을 하는 목적지 화면은 자식 요소(child element)로 정의한다는 것입니다.
화면 전환에 사용되는 다양한 모션 효과(예: 떠오르기, 확대축소, 페이드인 등)은 이후 별도 포스팅에서 다시 자세히 다루겠습니다.
1.2. 계층구조 (Hierarchy)
계층형 화면 전환(Hierarchical transitions)은 앱의 계층 구조를 통해 사용자들을 상위 단계로 또는 하위 단계로 이동하게 합니다. 반대로 평등형 화면 전환(Peer transitions)은 사용자들을 같은 계층 구조의 화면들 사이에서 자식 화면 사이의 이동을 가능하게 합니다.
즉, 계층형 화면 전환은 부모, 자식 간 화면 관계에서의 화면 전환을 의미하며, 평등형 화면 전환은 하나의 부모가 갖는 여러 자식 화면이 있다고 가정했을 때, 이 자식들 화면 사이의 화면 전환을 의미하는 겁니다.
2. 계층형 화면 전환 (Hierarchical transitions)
계층형 화면 전환은 사용자가 앱의 계층 구조 상 한단계 상위 계층 또는 하위 계층 관계에 있는 화면으로의 이동을 나타냅니다. 서로 인접한 화면들은 서로 부모, 자식 관계로 표현합니다. 이때 부모 화면은 자식 화면보다 계층 구조상 더 상위에 위치하게 됩니다.
다시 간단히 설명하면 부모 화면은 다른 화면으로의 이동을 시작하는 화면이라고 생각하면 되고, 부모 화면에서 이동하는 화면(목적지 화면)은 이 부모 화면의 자식 화면으로 정의한다고 생각하면 됩니다.
2.1. 부모-자식 간 화면 전환 (Parent-child transitions)
부모 화면으로부터 종속된 자식 화면 요소는 컨테이너 변환 화면 전환 패턴을 사용하여 터치와 함께 확장되면서 떠오르기로 나타납니다. 모션 효과는 부모와 자식 화면 사이의 관계를 강조하면서 상호작용의 목적지로서의 자식화면에 형태로 표현됩니다. 자세한 형태는 아래 그림을 참고하시면 되겠습니다.
위 그림의 특징을 부연 설명하면 부모 화면은 자식 화면보다 상위 계층에 있기 때문에 아래에 있는 표면 요소인 자식 화면은 아래에서 떠오르는 형태(Lift up)로 표현되고 있는 것을 볼 수 있습니다.
위 그림 역시 부모, 자식 화면 간의 이동을 나타내며, 자식 화면이 떠오르면서 동시에 확대되는 형태로 화면을 가득 채우는 형태로 화면 전환이 일어나는 것을 설명하는 것입니다. 화면 전환 원리는 마찬가지로 부모 화면이 더 상위 계층임을 표현하기 위해 자식 화면은 아래에서 위로 떠오르는 형태로 표현된다는 것에 있습니다.
화면 전환의 모션 효과는 사소해 보이지만 화면 및 정보 계층 구조를 나타내기 위한 표현으로써 임의로 디자인 선호에 따라 변경하지 말아야 하는 요소 중 하나입니다. 그럼에도 불구하고 실무에서는 이러한 것들을 제대로 지키지 않고 개발하는 경우가 많습니다. 실무자로서 이러한 머티리얼 디자인의 설계 배경을 이해해야 되는 이유가 여기에 있다고 다시 한번 강조해도 지나치지 않겠습니다.
3. 평등형 화면 전환 (Peer transitions)
평등형 화면 전환(Peer transitions)은 계층 구조 상 같은 레벨에 있는 화면 간에서 발생하는 화면 전환을 의미합니다. 형제 간 화면 전환(Sibling transitions)은 같은 부모 화면을 갖는 자식 화면 간에서 발생하는 화면전환입니다. 최상위 계층 간 화면 전환(Top-level transitions)은 계층 구조 상 최상위 화면에 해당하는 화면 간 전환을 위해서만 사용되는 개념으로 이해하면 됩니다.
3.1. 형제 간 화면 전환 (Sibling transitions)
앨범의 사진, 프로필의 섹션, 절차를 나타내는 각 단계 등과 같이 계층 구조 상 같은 부모를 갖는 화면들은 화면들 간의 관계를 나타내기 위해 계층 레벨의 변화없이 같은 레벨의 화면끼리 서로 이동합니다. 평등형 화면(Peer screen)은 서로서로 슬라이드 형태로 이동합니다. 평등형 화면 전환에서 형제 화면은 슬라이드 형태로 등장하는 과정에서 다른 형제 화면의 등장 방향과 반대방향으로 이동합니다.
너무나 당연한 이야기겠지만 아래 그림에서 탭을 하여 새로운 화면이 슬라이드 형태로 등장하면, 기존의 화면(형제 화면)은 새로운 화면이 등장하는 방향과 반대로 슬라이드 형태로 사라지게 된다는 이야기입니다.
탭(Tabs)은 형제 화면들이 같은 높이값(Elevation)에 위치하고 함께 이동하는 것을 통해 서로 관계가 있다는 것을 표현합니다.
위 그림은 여행앱을 나타내는 것으로 3가지 서로 다른 유형의 형제 화면인 여행 화면(Fly, Sleep, Eat)을 탭(Tabs)을 통해서 스위치하는 것을 나타냅니다.
3.2. 최상위 계층 간 화면 전환 (Top-level transitions)
앱의 최상위 계층에서 목적지(Destination)들은 중요한 과업에 따라 그룹으로 구성됩니다. (이때 과업들은 서로 연관관계가 없이 구성될 수 있습니다.) 이러한 화면 전환은 페이드(Fade) 화면 전환 패턴을 사용하여 처리됩니다.
여기서 중요한 것은 형제 들 간 화면 전환은 슬라이드 형태로 화면 전환이 일어나지만 최상위 계층 간 화면 전환(정보 계층 구조 상 가장 최상위에 위치한 화면들)의 화면 전환은 페이드인(Fade in), 페이드아웃(Fade out) 형태로 처리된다는 것을 유념해야 합니다.
위의 그림은 Bottom navigation bar에 매핑된 최상위 계층 화면 전환과 화면 전환 효과로써 페이드(Fade) 형태로 처리되는 것을 나타냅니다. 3.1.에서 탭을 선택했을 때 , 화면이 등장하고 사라지는 것과는 달리 페이드(Fade) 형태의 모션 효과로 처리되는 것을 확인할 수 있습니다.
위 그림은 실제 사례로 최상위 계층으로 사진 앱 내에서 Album, Photos, Search가 각각의 최상위 계층 화면으로 구성되고, 이 화면들이 서로 연관관계가 높지 않은 것을 나타내고 있습니다.
4. 마무리
화면 전환에서 사용하는 모션(Motion) 효과는 이후에 다시 별도 챕터에서 다룰 예정입니다. 슬라이드(Slide)가 대략 어떤 것이고, 페이드(Fade)가 어떤 효과인지는 사례 정도에서 확인하는 것으로 일단 충분합니다.
그것보다 중요한 것은 내비게이션에서 이야기하는 화면과 화면의 계층 구조가 의미하는 바가 무엇인지를 정확히 이해하는 것이 더 중요합니다. 이전 포스팅에서 화면에 대한 개념을 설명하였으니 화면과 화면의 계층 구조가 정확히 무엇을 의미하는지 이해가 되지 않는다면 이전 내용을 다시 리뷰하는 것을 권장합니다.
참고로 여기서 이야기하는 화면의 계층 구조라는 것은 단순히 정보 구조(Information architecture)를 의미하지 않습니다. 정보 구조를 분석하는 것은 중요하지만 정보 구조에 대한 분석이 반드시 화면의 계층 구조와 동일하게 구성된다고 볼 수 없으며, 화면에 대한 개념을 이해하는 것은 개발자와 어떤 단위를 화면(예: 라우트, 액티비티, 뷰컨트롤러)으로 볼지를 커뮤니케이션하기 위한 개념에서 이해가 되어야 한다는 것입니다.
화면 설계를 하는 담당자가 이 개념을 왜 알아야 되는지에 대한 의문을 가질 수도 있겠지만 머티리얼 디자인에서 이러한 개념에 대한 이해없이 단순히 시각적 구성 요소에 대한 설계를 할 경우 여러가지 문제를 야기할 수 있기 때문에 사소해 보이지만 계속 강조하는 것입니다.
단적인 예로 위의 화면 전환 모션 효과로 슬라이드와 페이드의 사용 등도 실무에서는 자신들이 원하는 모션 효과를 임의로 변경해서 사용하거나 하는 등의 일이 비일비재하게 일어나며, 이는 화면 계층 구성과 표현의 일관성에 영향을 줄 수 있는 것으로 임의로 처리하지 않아야 하는 것입니다.
이렇듯 머티리얼 디자인에서 제시하는 설계 방향을 유지하는 것이 중요한 이유는 하나의 화면은 단순히 하나의 화면으로만 존재하는 것이 아니며 다양한 화면 전환과 레이어를 통한 화면의 중첩과 사용자의 입력을 통한 인터렉션이 복합적으로 고려된 설계안을 머티리얼 디자인에서 제시하고 있기 때문입니다.
사설이 길었지만 다음 내용은 내비게이션에서도 다소 복잡한 검색(Search)에서의 화면 이동을 다룰 예정입니다. 대부분의 앱에서 검색 기능을 사용하지만 대부분의 앱에서 검색 기능은 자체적으로 구현하는 과정에서 다양한 오류를 발견하게 되기 때문에 이에 대한 가이드라인을 머티리얼 디자인에서 제공하고 있습니다. 검색 기능 상에서 화면을 어떻게 구성하고, 어떻게 이동해야 되는지에 대한 가이드라인을 잘 숙지하여 기능 구현에 참고하기 바랍니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기