모바일 UI·UX 디자인 시 고려해야 할 가이드라인 1
애플 iOS HIG와 Material design 가이드를 중심으로
모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기 device의 특성과 사용 맥락의 차이에서 기인합니다.
우선 모바일은 데스크톱에 비해 화면의 크기가 작습니다. 데스크톱은 의자에 앉아서 실내에서 사용합니다. 큰 모니터에서 많은 정보를 탐색하고 업무를 봅니다. 포토샵 같은 몰입형 앱의 다양한 기능을 몇 시간 동안 집중해서 사용할 수 있습니다. 그에 비해 모바일은 야외에서 또는 이동 중에 사용합니다. - 횡단보도를 걷다 보면 스마트폰을 보고 걷는 사용자를 자주 볼 수 있습니다. - 사용자는 작은 화면의 스마트 폰으로 SNS를 사용하고 뉴스를 보거나 게임을 하면서 이동합니다. 스마트 폰은 대중교통을 이용할 때나 커피숍에서 제일 많이 사용됩니다. 모바일의 이동성은 데스크톱에 비해 집중할 수 있는 사용자 환경이 아닙니다. 작은 화면으로 콘텐츠를 읽으면 인지 부하가 증가합니다. 모바일 기기에서 텍스트를 이해하는 것이 데스크톱에 비해 두 배가량 더 힘들어진다고 합니다.(제이콥 닐슨의 모바일 사용성 컨설팅 보고서)
또한 모바일은 키보드와 마우스같이 외부 입력도구가 없이 손가락으로 스크롤하고 선택하고 텍스트를 입력해야 합니다. 사용 맥락상 많은 차이점이 있음에도 데스트톱 화면을 크기만 줄여서 디자인된 모바일 웹과 앱이 아직도 많습니다. - 네이티브 앱은 적고 모바일 웹이나 하이브리드 앱에 많습니다. 스마트폰의 다양한 사용 시나리오를 개발하고 이를 디자인 작업 과정에 그대로 반영해야 합니다.
햇빛이 비치는 야외에서 한 손으로 콘텐츠를 보는 - 뉴스를 보거나 쇼핑하는 - 사용자를 감안해서 디자인해야 합니다. 따라서 모바일 사용에는 필요하지 않거나 중요도가 떨어지는 기능은 숨기거나 제거하여 기능을 최소화합니다. 깊은 계층구조는 피하여 내비게이션 구조를 단순화해야 합니다.
얼마 전까지 데스크톱용을 디자인한 후 모바일 용으로 디자인하는 것이 당연했습니다. - 최근에는 모바일 퍼스트가 대세라 모바일부터 디자인하긴 합니다 - 데스크톱과 모바일 두 기기를 고려해서 디자인하다 보면 모바일의 특성에 맞게 디자인하기 매우 어렵습니다. iOS와 안드로이드 가이드를 언어의 문제로 100% 이해 못 하고 디자인하고는 했습니다. 다음 가이드는 윈도에서 데스크톱 웹디자인만 하다가 모바일 디자인을 하면서 겪은 저의 많은 시행착오에 대한 기록입니다. 전부 기억을 다 못할 것 같아 저도 작업할 때 참고용으로 브런치에 정리합니다. 많은 디자이너들이 저 같은 시행착오를 덜 겪었으면 좋겠습니다. 위 가이드는 바이블이 아닙니다. 절대적인 원칙은 없습니다. 따라서 무조건적으로 지킬 필요는 없습니다. 단지 모바일에서 최적의 UX 디자인을 하기 위해서 고려해야 할 사항이 어떤 것인지 참고만 하시고 디자인하시면 됩니다.
1차적으로 총 50가지를 5편에 걸쳐서 두서없이 정리했습니다.
1. 모바일에서는 모달 상태의 경고창 alert 상단 우측 “X”버튼은 노출하지 않습니다.
모바일에서 경고 Alert 같은 대화창에서 X버튼은 하단의 "확인", "취소" 버튼과 기능이 중복됩니다.Alert에 대한 자세한 사항은 구글 메터리얼 디자인 가이드를 참고하세요.
https://material.io/design/components/dialogs.html
우측 상단의 [X] 버튼은 데스크톱 윈도 OS의 UI기준입니다. 모바일은 데스크톱과 UI기준이 다른 측면이 많습니다.모바일에서 창 닫기 버튼은 우측 상단보다 하단이 사용성이 좋습니다. 위 예시 같이 닫기 버튼이 하단에 있으면 한 손으로 사용하는 경우 엄지 손가락 터치가 쉽습니다.
2. 풀프레임 대화창 Dialog에 “X”버튼 (닫기 버튼)은 왼쪽 상단을 권장합니다.
풀프레임 대화창은 사용자가 특정 정보의 입력을 요청할 경우 사용됩니다. iOS와 안드로이드 OS 모두 내비게이션 바(안드로이드는 툴바) 왼쪽에는 햄버거 버튼이나 뒤로 가기 버튼 같은 내비게이션 컨트롤이 위치해 있습니다. 키보드로 정보를 입력해야 하는 모달상태의 대화창의 경우 상단바의 왼쪽에 닫기(취소) 버튼이 있고. 우측에는 확인이나 기타 부가적인 컨트롤을 위치시키는 것을 기본으로 합니다. 사용자 인터페이스 일관성 측면에 내비게이션 관련 컨트롤은 동일 위치에 둘 것을 권장합니다.
모바일에서 사용자의 정보 입력을 요구하는 대화창(dialog)에서는 우측 상단에 “X”버튼(닫기 버튼)은 우측에 놓지 않고 좌측울 권장합니다.
대화창에서 “X”버튼은 좌측에 위치시키고 완료(저장) 버튼은 상단 우측에 놓는 것을 권장하는 것은 입력을 완료하고 키보드를 내리고 완료 버튼을 탭 하는 단계를 축소하기 위함입니다.3. 긍정적인 액션 버튼은 우측에 배치합니다.
모바일에서 대화창(다이얼로그)또는 경고 메시지창 alert에서 긍정적인 액션은 화면의 오른쪽에 위치시켜는 것을 원칙으로 합니다.
대화창에서 긍정을 의미하는 확인 버튼과 부정을 의미하는 취소 버튼의 위치를 오른쪽에 배치할 건지 왼쪽에 배치할 건지에 대해 많은 논란이 있었습니다.
모바일 환경에서 다이얼로그의 긍정적인 액션은 화면의 오른쪽에 위치시키는 것을 원칙으로 합니다. 구글의 가이드라인은 “대체적으로, 부정적 행동은 왼쪽에 있는 반면 긍정적 행동은 오른쪽에 있다.”라고 설명합니다. 즉 확인 버튼은 오른쪽에 취소 버튼은 왼쪽에 배치합니다. 데스크톱 윈도에서는 확인 버튼이 왼쪽에 있고 맥 OS에서는 오른쪽에 있습니다. 안드로이드는 초기 버전에서는 확인 버튼이 왼쪽에 있었습니다. iOS는 맥과 동일하게 확인 버튼을 오른쪽으로 통일시켰지만 안드로이드는 초기 파편화로 앱마다 위치가 달랐습니다. 사용자들의 혼란이 많아지자 최근 안드로이드는 긍정적인 액션은 우측으로 통일시켰습니다. 두 모바일 OS 모두 확인 버튼을 우측으로 통일한 이유는 실생활에서 사람들이 생각하고 행동하고 있는 것을 은유하는 메타포를 적용한 것으로 이해할 수 있습니다. 집안의 불을 켜는 스위치는 오른쪽을 누르면 켜지고 왼쪽을 누르면 꺼집니다. 책을 읽을 때 왼쪽에서 오른쪽으로 읽습니다. 기차 플랫폼에서 다음 행선지는 오른쪽에 이전 행선지는 왼쪽에 있습니다. 오른쪽은 다음 단계로 진행하는 개념도 같이 있습니다 - 다른 문화권도 있습니다만 예외 사항입니다. - 이처럼 실세계의 오른쪽 개념을 가상의 모바일환경에 메타포로 적용했음을 일수 있습니다. 사용자의 자연스러운 행동을 유발하기 위해서는 긍정적이고 진행의 의미가 있는 [확인] 버튼은 오른쪽에 있는 것이 맞을 듯합니다. 그러함에도 일부 왼쪽에 긍정을 의미하는 버튼을 배치하는 앱이 있을 수도 있습니다. 관건은 일관성입니다. 왼쪽 배치나 오른쪽 배치가 중요한 것이 아니라 앱 전반적으로 통일된 위치에 배치하는 것이 중요합니다.
버튼에 대한 자세한 내용은 아래를 참고하세요.
4. 입력을 완료하지 않은 상태에서 완료 버튼(보내기/로그인)은 오류를 방지하기 위해서 비 활성화를 권장합니다.
사용자가 모바일 환경에서 작업을 수행할 때 성공하는 경우보다 실패하는 경우가 더 많다고 합니다. - 제이콥 닐슨의 모바일 사용성 컨설팅 보고서 - 사용자의 오류가능성을 최소화해야 합니다. 사용자에게 발생할 수 있는 실수를 막고, 오류를 방지하기 위해 인터페이스에서 어느 정도의 제약을 통해 오류가 최대한 발생하지 않게 노력해야 합니다. 오류 메시지는 사용자 경험을 헤치는 주범입니다.
메일 내용작성을 완료하지 않은 상태에서는 “보내기”버튼은 활성화시키지 않아야 합니다.메일 내용 작성 중에 Navigation Bars의 “보내기”버튼은 비활성화되어 있어야 합니다. 비활성화 상태에서는 사용자의 탭에도 반응을 하지 않습니다. 메일의 보내기 같은 실행 액션은 다이얼로그에서 모든 필수 필드를 입력할 때까지 비활성화하여 오류를 방지해야 합니다.
5. 입력 내용에 맞는 키보드를 제공해야 합니다.
모바일 환경에서 키보드와 마우스 같은 외부 입력 정치가 없다는 것은 많은 사용성 문제를 발생시킵니다. 사용자가 정보를 입력할 때 화면의 반을 가상의 키보드가 차지합니다. 회원가입 같은 양식을 입력할 때 키보드에 가려져 필드가 3개 이하로 노출됩니다. 그 이상의 필드를 입력할 때 사용자는 화면을 스크롤하면서 입력해야 합니다. 필드가 많아질수록 타이핑이 힘들고 오타가 날 확률이 높습니다. 숫자 입력란에 문자입력 키보드를 제공하는 것처럼 적절하지 못한 키보드 제공은 키보드를 변경하여 입력해야 하는 번거로움이 있습니다. 이러한 상황이 반복된다면 사용자는 작업을 중단하거나 포기할 것입니다. 상황에 맞는 키보드를 앱/웹 전반에 걸쳐 일관되게 제공해야 합니다.
전화번호 입력에는 숫자 키보드를 제공해야 합니다
검색필드에서는 일반 키보드가 아닌 “검색”버튼이 있는 검색용 키보드를 제공해야 합니다.
이메일 입력 필드에는 일반 텍스트 키보드가 아니라 '@'가 있는 이메일 키보드를 제공해야 합니다.텍스트 필드 디자인에 대한 자세한 내용은 아래 링크를 참조
6. 검색 필드 우측에 검색 버튼은 추천하지 않습니다.
검색바에서도 검색필드 우측에 검색버튼은 ios와 안드로이드에서 추천하지 않습니다. 검색어 입력 후 키보드의 검색 버튼을 탭 하는 것이 사용성이 더 높습니다.
검색필드가 내비게이션바 하단에 위치해도 검색 필드 우측에 검색버튼은 추천하지 않습니다.7. 스크롤을 고려하여 콘텐츠의 그리드를 화면 하단에 정확하게 정렬하지 마십시오.
사용자는 디자이너의 생각보다 스크롤을 많이 하지 않습니다. 특정한 요인이 없는 이상 스크롤 하지 않고 곧바로 검색 같은 내비게이션 아이콘을 텝합니다. 스크롤하면 더 많은 콘텐츠가 있음을 예상할 수 있는 시각적인 단서를 제공해야 합니다. 화면의 그리드를 정확하게 정렬한다면 앱/웹의 콘텐츠를 더 볼 수 있다는 예상을 할 수 없어 스크롤할 요인이 적어집니다.
화면에 콘텐츠가 넘치게 정렬하여 사용자에게 스크롤이 가능하다는 시각적인 힌트를 제공합니다.
8. 텝은 중첩되지 않아야 합니다.
탭은 동일한 계층에 있는 관련 콘텐츠를 분류하고 조직화하여 탐색을 돕는 내비게이션 컨트롤입니다.
탭을 한 줄이상으로 디자인하면 복잡해져 개별 탭을 인식하기 어렵습니다. 한 줄에 다 들어가지 않을 만큼 많은 탭이 필요하다면 디자인을 간소화하거나 그룹을 조정해야 합니다.
텝은 2단으로 중첩되게 하기보다는 항목을 줄이거나(최대 5개) 좌우스크롤을 권장합니다.9. 버튼 스타일은 중요도에 맞게 사용해야 합니다.
버튼의 중요도에 따라 시각적인 계층을 만들고 그에 맞춰 UI 디자인을 해야 합니다.
버튼의 유형으로 버튼의 시각적인 중요도를 만들 수 있습니다. 시각적인 계층을 만드는 목적은 오류의 가능성을 줄이고, 작업 수행에 도움을 주기 위해서입니다. 버튼을 모두 강조하는 것은 시각적인 잡음이 돼 사용성을 떨어트립니다.
로그인이 가장 중요한 버튼입니다. [회원가입]은 로그인과 같은 형태로 디자인하면 안 됩니다. 한 화면에서 다른 기능을 가진 버튼을 동일하게 디자인하지 마십시오.
버튼의 크기와 대비로 기능의 위계도 디자인 할 수 있습니다. 사용자가 가장 많이 사용하는 버튼의 크기를 가장 크게 합니다버튼에 대한 더 자세한 내용은 아래를 참고하세요.
10. 시각적 노이즈는 최소화해야 합니다.
사용자가 콘텐츠에 집중할 수 있도록 디자인해야 합니다. 작은 화면의 모바일을 디자인할 때 모든 시각적인 요소는 목적과 의미를 가지고 있어야 합니다. 목적이 없는 디자인 요소는 화면을 산만하게 할 수 있습니다. 사용자가 목표로 하는 작업 수행을 지원하고 콘텐츠에 집중하는데 도움이 되지 않는 시각적인 요소를 최소화해야 합니다. 색상의 수는 제한하고 사용자의 행동을 유도하는 요소 외에는 색상을 적용하지 않아야 합니다. 작은 화면 안에 기능과 콘텐츠를 촘촘하게 채우기보다는 모바일 사용환경을 고려하여 충분한 여백을 줍니다. 콘텐츠가 많다면 시각적인 계층구조를 명확히 하고 연관 정보는 근접성(그루핑)을 통해서 화면의 복잡함을 줄입니다.
콘텐츠 내 보더라인은 최소화해야 합니다. 기능적으로 불필요한 요소와 시각적으로 산만한 요소를 제거하십시오.
격자형 보더라인은 가급적 사용하지 않는 걸 추천합니다.화면의 복잡한 정보를 단순화시키고 사람들이 화면의 요소들을 그룹화하여 빠르게 인식할 수 있도록 도와주는근접성 원칙에 대한 더 자세한 내용은 아래를 참고하세요.
11. 선택이나 활성화 등 콤포넌트의 상태를 색상만 표현지 않아야 합니다.
탭과 같은 컴포넌트의 선택과 활성화 표시를 색과 명도 대비만으로 표현하면 저시력자나 색구분이 어려운 사용자는 인지하기 어렵습니다. 콤포넌트의 상태는 테두리(Boder), 또는 구분선(Indicator) 등의 형태적 차이를 같이 활용하여 표현해야합니다..
색상 차이를 알 수 없는 색맹이거나 흑백 디스플레이 사용자의 경우 색상 만으로 콘텐츠를 구분하기 어렵습니다. 접근성에 대한 더 자세한 내용은 아래를 참고하세요.
12. 키보드를 통해 많은 정보를 입력해야 하는 대화창에서 [완료]를 의미하는 버튼은 상단 내비게이션 바 우측을 권장합니다.
많은 정보를 입력해야 하는 풀프레임 대화창에서 입력을 위해 키보드가 노출될 경우 하단에 [완료]를 의미하는 버튼은 키보드에 가려지게 됩니다. 키보드를 고려하여 내비게이션 바 우측에 [완료]를 버튼을 위치시키는 걸 권장합니다.
하단의 [취소], [게시하기] 버튼은 모바일에서는 우측같이 키보드가 노출되면 가려지게 됩니다. 사용자는 작성을 완료하기 위해서는 키보드를 닫아야 합니다.
모바일에서는 키보드를 고려해서 디자인해야 합니다. 키보드를 닫지 않고도 완료할 수 있어야 합니다.2편으로 이어집니다.
참고 사이트
