UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄
2013. 6. 3. 00:02ㆍUX 가벼운 이야기
글을 시작하며...
1,2,3탄에 이어 이번 포스팅에서는 모바일 UI패턴을 다룬 다양한 웹사이트에서 몇 가지 핵심적인 용어를 모아 정리해 보았습니다. 또한 각 OS의 고유 패턴 중 몇 가지 주요 네비게이션을 비교해보고자 합니다.
2. Coach Marks / Empty Data / Walkthroughs
위의 패턴들은 도움말을 제공할 수 있는 패턴입니다. '이 앱이 얼마나 친절한가?'를 판단할 수 있는 하나의 요소가 될 수 있는데요. 초기 진입 시에만 볼 수 있도록 설계하고 다음 진입 부터는 '설정'같은 메뉴 안에 두어 언제든 도움말을 호출할 수 있도록 합니다.
2.1 Empty Data
데이터가 없는 초기 상태를 표현하는 패턴입니다. 가끔 클라이언트에게 빈 화면에 대한 재미있는 아이데이션을 요청받을 때가 있습니다. 그만큼 빈 화면에 대한 처리는 중요한 요소입니다. 아무것도 없는 빈 화면보다는 "데이터가 없습니다"라고 표시해주거나 그보다는 "이 공간은 어떤 역할을 하는 화면이고 제대로 쓰려면 어떻게 해야 합니다"라고 친절히 말해주는 것이 더 유용합니다.
2.2 Coach Marks
앱을 처음 진입하는 사용자를 위해 간단한 도움말을 제공하는 패턴입니다. 홈 화면 위에 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시하는 형태입니다.
2.3 Walkthroughs
Coach Mark보다 상세한 도움말을 뜻합니다. Wizard와 같이 앱 초기 진입 시 몇 단계로 걸쳐 상세한 도움말을 제공합니다. 긴 프로세스를 거치고 싶지 않는 사용자를 위해 본 단계를 건너뛰고 바로 홈 화면으로 진입할 수 있는 경로를 주는 것이 중요합니다.
3. Launcher (=Dashboard, Springboards)
응용 프로그램 혹은 앱의 경우 메뉴의 진입점을 아이콘 등으로 표시하는 방식을 뜻합니다. 기능 혹은 카테고리로 메뉴를 분류하며 새로운 컨텐츠를 강조합니다. 스마트폰 초창기 시절 모바일 앱의 메인 화면에서 많이 쓰다가 현재는 Drawer와 같은 패턴을 많이 쓰는 추세입니다. Hub와 같은 역할을 하여 메뉴를 한 눈에 볼 수 있고 쉽게 제어할 수 있습니다. 하지만 모든 메뉴가 동일한 우선 순위를 가진 것처럼 느껴질 수 있으며 메뉴의 개수가 많을 경우 한 화면 안에 표시할 수 없는 단점이 있습니다.
4. Drawer (=Sliding Menu, Side Bar)
평상시에는 닫혔다가 당길 때 열리는 서랍과 같다고 'Drawer'라고 부르기도 하며 슬라이딩되면서 나오는 모션에서 착안하여 'Sliding Menu'라고도 불립니다. 일반적으로 앱의 최상위 메뉴를 표시하며, 최근 활동이나 알림 등 각 앱의 부가적인 기능을 모아볼 수 있는 공간으로 쓰입니다. Tab Bar의 경우 일반적으로 메뉴가 5개가 넘어가는 경우 More메뉴 안에 숨겨야 하는 한계가 있습니다. Launcher 역시 터치 영역을 확보하기 위해서 가급적 9개 이상의 메뉴를 표시하지 않습니다. 이에 반해 Drawer 패턴의 가장 큰 장점은 리스트 기반의 다양한 메뉴를 표시할 수 있다는 점입니다.
5. Swipe Paging / Swipe View (Android) / Flip View (Windows8)
최상위 메뉴 혹은 상세 화면을 좌우로 Swipe하여 항목을 이동한다는 큰 개념은 같지만 이 패턴에 관한 정의가 각 OS에 따라 조금씩 다릅니다.
5.1 Swipe Paging (=Filmstrip)
최상위 레벨의 페이지를 나란히 정렬하는 방식을 말합니다. 대표적으로 iPhone의 날씨앱을 예로 들 수 있는데요. 한 번에 한 페이지씩 볼 수 있으며 사용자는 Swipe동작으로 페이지를 이동합니다. 이 패턴을 사용할 시 중요한 점은 현재 페이지의 위치 정보를 주어야 한다는 것인데요. 대표적으로 Dot Indicator가 쓰이고 있습니다. 하지만 페이지 확장성이 제한적이라는 단점이 있습니다. 아래 오른쪽 화면과 같이 페이지가 많아질수록 사용성은 떨어지게 됩니다.
5.2 Swipe View
Android 표준 가이드에서는 Swipe View라고 정의되어 있으며 두 가지 방식으로 정의하고 있습니다. 상세 화면간 이동을 위해 사용할 것을 제안하고 있으며 또 한가지는 Tab 간 이동 시에 사용됩니다. 이는 요즘 모바일 웹에서 사용되는 패턴과 동일한데요. 아래 그림과 같이 Tab을 터치하여 이동하는 방법 외에 Swipe 동작을 통해 이동할 수 있도록 합니다.
5.3 Flip View
Windows8 표준 가이드에서는 FlipView라고 부르는데, 아래 그림과 같이 상세 화면에서 사용하며 최상위 화면에서는 지양할 것을 권하고 있습니다. 항목을 전환하는 반복적인 동작이 사용자에게 짜증을 일으킬 수 있기 때문입니다.
6. Split View (iOS) / Multi-pane Layout (Android)
효율적인 공간 활용을 위해 태블릿에 탑재된 기본 패턴입니다. 폰에서 목록(List View)과 그에 따른 상세 화면(Detail View)을 각각 따로 제공하는데요, 넓은 공간의 특성 상, 태블릿에서는 두 화면을 결합하여 나란히 표시합니다. 기본적인 원칙은 왼쪽 창에는 목록을 제공하며 오른쪽 창에는 현재 선택된 항목에 대한 상세 화면을 표시하는 것입니다. 이 때, 현재 선택된 항목에 Highlight 표시를 하여 오른쪽 창과의 관계를 인지할 수 있도록 해야 합니다.
시리즈를 마치며...
이번 블로깅을 통해 소개했던 UI 패턴은 극히 일부에 지나지 않습니다. 셀 수 없을 만큼 다양한 패턴이 누군가에 의해 책으로, 혹은 온라인 라이브러리에 저장되어 공유되고 있는데요. 산재된 정보를 정리하고 개념를 비교해보는 과정에서 새로운 관점을 얻을 수 있는 기회였습니다. UX를 이제 막 시작하는 분들께 작은 도움이 되었길 바라면서 글을 마칩니다.
[참고##UI 용어##] [참고##가이드라인##]
1,2,3탄에 이어 이번 포스팅에서는 모바일 UI패턴을 다룬 다양한 웹사이트에서 몇 가지 핵심적인 용어를 모아 정리해 보았습니다. 또한 각 OS의 고유 패턴 중 몇 가지 주요 네비게이션을 비교해보고자 합니다.
관련 글
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄
1. Splash Screen
프로그램을 로드하는 동안 표시되는 이미지를 말합니다. 평균 2~3초간 지속되는 시간동안 애플리케이션의 로고와 함께 앱에 대해 간략한 소개를 하거나, 로딩 진행률을 애니메이션으로 표시하기도 합니다. Splash Screen에 사용되는 로고나 텍스처를 통해 애플리케이션의 아이덴티티를 표현할 수 있어야 합니다.
2. Coach Marks / Empty Data / Walkthroughs
위의 패턴들은 도움말을 제공할 수 있는 패턴입니다. '이 앱이 얼마나 친절한가?'를 판단할 수 있는 하나의 요소가 될 수 있는데요. 초기 진입 시에만 볼 수 있도록 설계하고 다음 진입 부터는 '설정'같은 메뉴 안에 두어 언제든 도움말을 호출할 수 있도록 합니다.
2.1 Empty Data
데이터가 없는 초기 상태를 표현하는 패턴입니다. 가끔 클라이언트에게 빈 화면에 대한 재미있는 아이데이션을 요청받을 때가 있습니다. 그만큼 빈 화면에 대한 처리는 중요한 요소입니다. 아무것도 없는 빈 화면보다는 "데이터가 없습니다"라고 표시해주거나 그보다는 "이 공간은 어떤 역할을 하는 화면이고 제대로 쓰려면 어떻게 해야 합니다"라고 친절히 말해주는 것이 더 유용합니다.
2.2 Coach Marks
앱을 처음 진입하는 사용자를 위해 간단한 도움말을 제공하는 패턴입니다. 홈 화면 위에 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시하는 형태입니다.
2.3 Walkthroughs
Coach Mark보다 상세한 도움말을 뜻합니다. Wizard와 같이 앱 초기 진입 시 몇 단계로 걸쳐 상세한 도움말을 제공합니다. 긴 프로세스를 거치고 싶지 않는 사용자를 위해 본 단계를 건너뛰고 바로 홈 화면으로 진입할 수 있는 경로를 주는 것이 중요합니다.
3. Launcher (=Dashboard, Springboards)
응용 프로그램 혹은 앱의 경우 메뉴의 진입점을 아이콘 등으로 표시하는 방식을 뜻합니다. 기능 혹은 카테고리로 메뉴를 분류하며 새로운 컨텐츠를 강조합니다. 스마트폰 초창기 시절 모바일 앱의 메인 화면에서 많이 쓰다가 현재는 Drawer와 같은 패턴을 많이 쓰는 추세입니다. Hub와 같은 역할을 하여 메뉴를 한 눈에 볼 수 있고 쉽게 제어할 수 있습니다. 하지만 모든 메뉴가 동일한 우선 순위를 가진 것처럼 느껴질 수 있으며 메뉴의 개수가 많을 경우 한 화면 안에 표시할 수 없는 단점이 있습니다.
4. Drawer (=Sliding Menu, Side Bar)
평상시에는 닫혔다가 당길 때 열리는 서랍과 같다고 'Drawer'라고 부르기도 하며 슬라이딩되면서 나오는 모션에서 착안하여 'Sliding Menu'라고도 불립니다. 일반적으로 앱의 최상위 메뉴를 표시하며, 최근 활동이나 알림 등 각 앱의 부가적인 기능을 모아볼 수 있는 공간으로 쓰입니다. Tab Bar의 경우 일반적으로 메뉴가 5개가 넘어가는 경우 More메뉴 안에 숨겨야 하는 한계가 있습니다. Launcher 역시 터치 영역을 확보하기 위해서 가급적 9개 이상의 메뉴를 표시하지 않습니다. 이에 반해 Drawer 패턴의 가장 큰 장점은 리스트 기반의 다양한 메뉴를 표시할 수 있다는 점입니다.
5. Swipe Paging / Swipe View (Android) / Flip View (Windows8)
최상위 메뉴 혹은 상세 화면을 좌우로 Swipe하여 항목을 이동한다는 큰 개념은 같지만 이 패턴에 관한 정의가 각 OS에 따라 조금씩 다릅니다.
5.1 Swipe Paging (=Filmstrip)
최상위 레벨의 페이지를 나란히 정렬하는 방식을 말합니다. 대표적으로 iPhone의 날씨앱을 예로 들 수 있는데요. 한 번에 한 페이지씩 볼 수 있으며 사용자는 Swipe동작으로 페이지를 이동합니다. 이 패턴을 사용할 시 중요한 점은 현재 페이지의 위치 정보를 주어야 한다는 것인데요. 대표적으로 Dot Indicator가 쓰이고 있습니다. 하지만 페이지 확장성이 제한적이라는 단점이 있습니다. 아래 오른쪽 화면과 같이 페이지가 많아질수록 사용성은 떨어지게 됩니다.
5.2 Swipe View
Android 표준 가이드에서는 Swipe View라고 정의되어 있으며 두 가지 방식으로 정의하고 있습니다. 상세 화면간 이동을 위해 사용할 것을 제안하고 있으며 또 한가지는 Tab 간 이동 시에 사용됩니다. 이는 요즘 모바일 웹에서 사용되는 패턴과 동일한데요. 아래 그림과 같이 Tab을 터치하여 이동하는 방법 외에 Swipe 동작을 통해 이동할 수 있도록 합니다.
5.3 Flip View
Windows8 표준 가이드에서는 FlipView라고 부르는데, 아래 그림과 같이 상세 화면에서 사용하며 최상위 화면에서는 지양할 것을 권하고 있습니다. 항목을 전환하는 반복적인 동작이 사용자에게 짜증을 일으킬 수 있기 때문입니다.
6. Split View (iOS) / Multi-pane Layout (Android)
효율적인 공간 활용을 위해 태블릿에 탑재된 기본 패턴입니다. 폰에서 목록(List View)과 그에 따른 상세 화면(Detail View)을 각각 따로 제공하는데요, 넓은 공간의 특성 상, 태블릿에서는 두 화면을 결합하여 나란히 표시합니다. 기본적인 원칙은 왼쪽 창에는 목록을 제공하며 오른쪽 창에는 현재 선택된 항목에 대한 상세 화면을 표시하는 것입니다. 이 때, 현재 선택된 항목에 Highlight 표시를 하여 오른쪽 창과의 관계를 인지할 수 있도록 해야 합니다.
시리즈를 마치며...
이번 블로깅을 통해 소개했던 UI 패턴은 극히 일부에 지나지 않습니다. 셀 수 없을 만큼 다양한 패턴이 누군가에 의해 책으로, 혹은 온라인 라이브러리에 저장되어 공유되고 있는데요. 산재된 정보를 정리하고 개념를 비교해보는 과정에서 새로운 관점을 얻을 수 있는 기회였습니다. UX를 이제 막 시작하는 분들께 작은 도움이 되었길 바라면서 글을 마칩니다.
[참고##UI 용어##] [참고##가이드라인##]