내가 버튼을 누를 때
유튜브와 머티리얼 가이드의 사례
유튜브 앱에서 재생 버튼을 누를 때,
Overlay 모양이 달라졌다.
시공간 연속체 수정과 카페인 과다 충전, 오후 반차, 다양한 고양이 동영상 등의 개선으로 업데이트가 바쁜 유튜브에서 재생 버튼을 누를 때 보이는 Overlay의 형태를 바꾸었다.
유튜브는 구글의 머티리얼 디자인 가이드에 따라서 오브젝트의 높이(elevation)와 그림자(shadow), 불투명도(opacity)를 사용한다. Overlay는 머티리얼 디자인에서 UI의 상태를 표시하는 비주얼 방식으로 반투명도(semi-transparent)를 활용한다.
유튜브 앱을 보면서 이 방식의 활용과 엘리먼트의 상태에 대해서 다시 찾아보기로 했다.
음성으로 스크린을 제어하는 경우도 있다는 걸 알아두면 좋다.머티리얼 디자인의 버튼 상태(States)에 대해서 간략하게 정리해 보았다. 원래는 리스트와 다양한 오브젝트에 대한 예시가 있지만, 주로 버튼과 아이콘 버튼에 대한 부분에 집중해 보려고 한다.
손가락이 누르는 범위에 대해서 Android에서는 48dp, iOS는 44pt의 정사각형을 권장하고 있다. 그래서 실제 디자인에서는 보이는 부분보다 누를 수 있는 범위가 더 넓다.
모바일에서는 Selectd, Actived, Pressed가 많이 쓰인다. Pressed는 머티리얼 디자인 가이드를 따르는 앱에서 많이 보이며, Actived와 함께 사용된다. 보통의 경우는 Selected와 Actived가 많이 사용된다.
자주 보는 유튜브의 플레이 모습이다. 재생되고 있는 화면을 탭 하면, UI가 표시된다.
전체 구성부터 확인해 본다. 많은 UI에서 다양한 화살표가 쓰이는데, 유튜브의 경우에는 화면이 가로(landscape), 세로(portrait)로 변하는 부분과 최소화되는 방향, 다음 영상을 보는 부분에서 화살표가 구분되어 쓰이고 있다.
또 버튼 그룹이 2군데가 있는데, 영상 위에 표시되는 1번 그룹의 경우와 영상 하단에 표시되는 2번 그룹에 같은 아이콘이 표시되는데, 맥락에 따라 순서가 다르게 되어 있다.
사용자가 택할 수 있는 부분의 영역을 라인으로 표시한 이미지다. 다른 부분은 원으로 반투명 Overlay가 표시된다. 자주 사용되는 버튼의 누를 수 있는 영역이 크게 되어 있고, 가장 자주 쓰일 것 같은 재생 버튼은 원이 아닌 테두리가 둥근 사각형으로 되어 있다.
각 영역은 Active 될 때 영역과 Pressed 모션이 상황에 따라 다르게 적용되어 있다.
멈춤에서 재생으로 가는 경우는 Active 상태가 된 후, Play 아이콘으로 변하는 짧고 빠른 모션이 재생된다. 재생에서 멈춤으로 가는 경우는 모션 없이 바로 변경된다.
재생 버튼이 아닌 경우는 Active 모션과 Pressed 모션이 동시에 실행된다. iOS의 유튜브 앱의 경우는 Pressed 모션이 왼쪽 상단부터 시작돼서, 원을 가득 채우면서 마무리된다.
영상 하단의 메뉴 그룹의 경우에는 아이콘과 텍스트가 같이 표시되어 있는데, Overlay가 오브젝트의 중간 부분에 맞춰져 있다. '오프라인 저장'의 경우는 텍스트가 살짝 원을 벗어난다.
리스트와 텍스트 버튼, 아이콘 버튼이 섞여 있는 채널 정보의 경우는 List Item과 Button에서 보이는 상태를 확인할 수 있다.
List Item의 경우, 해당되는 부분을 탭하면, 화면 디자인의 구조를 알 수 있다. Pressed 상태의 경우, 색상이 쓰인 경우는 색상의 컬러에 투명도를 적용하여, Active 상태를 표시한다. Actived와 Pressed 상태를 동시에 사용하는 경우가 많다.
다른 구글의 앱들에서도 Pressed가 쓰이긴 하지만, 앱의 특징에 따라 Pressed가 매우 제한적으로 쓰이기도 한다. 주로 중요한 Task 혹은 눈에 띄게 만들고 싶은 경우에 쓰이기도 한다.
지메일의 Actived, Pressed
지메일은 유튜브와 다르지만, 비슷한 방식의 UI를 가지고 있다. 최근 업데이트로 다크 모드 색상이 바뀌기도 했다.
최근 업데이트된 지메일의 작성하기는 Pressed 상태가 있어서 투명한 색상의 Overlay가 버튼을 덮는다.
새로 생긴 하단의 메뉴인 '메일'과 '회의 참여'의 경우도 Actived와 Pressed가 적절하게 쓰였다. 탭 해야 하는 면적이 넓은 경우, 모션의 효과가 극대화된다.
지메일 상단의 검색 창과 햄버거 메뉴에도 각각 Pressed와 Actived 상태가 적용되어 있다. 직접 사용해보면, 알겠지만, Pressed의 모션은 상단 탭과 하단 탭의 메뉴에 쓰이고, 메일 목록은 모션 없이 바로 보인다. 항상 보이는 메뉴에는 모션이 적용되어 있지만, 변경되는 정보인 메일의 리스트인 경우는 즉시 선택하고 반응한다.
상세 보기의 상단 메뉴에도 모션이 적용되어 있다. 메일 보기의 경우에도 상시 쓰이는 메뉴에는 모션이 적용되어 있다. 다른 메뉴와 달리 즐겨찾기의 경우는 상태가 변하기 때문에, Actived 색상이 다르게 적용되어 있다.
머티리얼과 Pressed States
Active 혹은 Actived의 경우는 모바일 앱에서 필수적으로 사용된다. 아마 디자인 가이드를 제작할 때도 필수적이다.(나는 가끔... 꼼꼼하지 않은 구석이 있지만...) 그리고 머티리얼의 Pressed 상태가 모든 앱에서 사용되진 않는다는 사실도 알아야 한다. Pressed 상태의 모션을 남용하면, 사용자의 정보를 느리게 보여주는 인상을 받을 수 있다.
최근의 앱들은 가이드에서 빠른 반응을 권장하고 있기 때문에, Active/Actived 상태에 집중하는 경우도 많다. 다양한 방법의 하나로 사용자가 선택한 UI를 명확하게 보여주는 Pressed 상태를 적절하게 이용하길 바란다.
모션이 사용성을 해치는 경우가 있다. 그래서 모션은 사용자의 행동과 분리되어 있는 편이 좋다. 마이크로 모션이 끝나야 Task가 끝나는 경우는 없어야 한다는 것이다. 어떤 행동의 결과가 모션으로 지연되면 안된다.
머티리얼의 Pressed에 알아두면 좋은 점은 프론트-엔드 엔지니어가 Press 상태를 사용할 수도 있기 때문이다. 프로그래머가 작업을 할 때, 컴포넌트나 엘리먼트를 탭해서 바로 이루어지는 이벤트가 있고, 사용자가 누른 손가락을 화면에서 땔 때 시작되는 이벤트가 있다. iOS의 경우는 3D Touch 같은 케이스도 있다.
대부분의 소프트웨어에서 누른 채로 화면을 움직이거나, 누른 채로 손가락을 살짝 치우면, 이벤트가 일어나지 않는 경우가 있다. 이런 경우는 사용자의 실수를 방지하기 위한 오래된 안전장치다. 이런 부분을 프론트-엔드 개발자와 공유하면, 좀 더 유용한 앱과 적절한 디자인을 만들 수 있을 것이다.
