내비게이션(Navigation),
레이아웃
내비게이션, 레이아웃 기초 공사
내비게이션은 앱구성에서 기본적이고 중요한 기초공사라고 할 수 있다. 기본구성이지만 실제 공통 설계 시 반영이 되지 않거나 구축하면서 고객변심으로 변경이 자주 일어난다. 특히 화면설계서 업무단 설계 시 시스템 이전(back) 키 및 Return 버튼의 표기가 안되어 개발자의 표기 요청을 받기도 하는 부분이다. 그럼 기초공사에 대해서 몇 가지 정리를 해 보기로 한다.
1. GNB(Global Navigation Bar)/ 타이틀 바(Title Bar)
1) GNB는 화면의 최상단에 배치되고, 주요 화면에 대한 사용자의 접근을 용이하게 한다.
2) 타이틀 바(Title Bar)는 서브 페이지 전 화면 공통 상단에 배치하며, 타이틀 바 상단에는 GNB 영역이 존재한다.
3) 다음 화면에서는 GNB가 노출되지 않는다.
GNB 미노출 화면 : 전체메뉴/ 회원가입/ 로그인 / 최초로그인-시작화면설정 / 카메라 촬영/ 회원탈퇴완료 / 간편 비밀번호변경완료 / 간편 비밀번호 재설정 완료 / 인트로페이지(온보딩 앱 안내) / 상세화면 등
4) 서브 페이지 타이틀 바가 Sticky 되면서 헤더는 자연스럽게 최상단 너머로 애니메이션 숨김 처리한다.
5) 사용자의 화면 탐색 방향에 따라 헤더 영역이 노출되거나 숨김 처리된다.
6) 상세 화면의 경우 타이틀 바 영역이 화면 특성에 따라 가변 한다.
7) 뒤로 가기는 이전경로로 이동하고, 이동 불가한 페이지의 경우 서브메인이 있는 경우 서브메인으로, 서브메인이 없는 경우 홈화면으로 이동한다.
GNB(Global Navigation Bar)/ 타이틀 바(Title Bar)2. Process Button(BACK 버튼 및 뒤로 가기 플로우)
1) 메인 : 기능노출 버튼 없으며, 한번 뒤로 가기 토스트메시지(앱 종료 알림)가 노출되며, 두 번 뒤로 가기 시 앱 종료를 시킨다.
2) 서브메인 : 진입 이전 화면으로 이동(history back(-1))처리한다.
3) 기능 프로세스 :
- 프로세스 시작 : 진입 이전 화면으로 이동(history back(-1))처리한다.
- 프로세스 중간 : 프로세스 이탈로 간주하여 프로세스 시작화면으로 이동한다.
- 프로세스 종료(완료) : 완료화면에서는 back버튼을 두지 않는다.
3. 종류별 내비게이션바(home/전체메뉴/검색/이전버튼 정의)
1. 바닥페이지들(로그인화면, 2 depth menu 이하 화면, 완료화면)에서는 현재 메뉴명(화면명)을 좌측 또는 중앙배열을 많이 적용하고 있다.
2. 상품몰 상세화면에서는 상품명이 긴 경우는 2줄로 내려가게 되어서 보통 상품 카테고리명(입출금, 예적금, 카드, 외환 등...)을 노출하고 해당 상품명은 콘텐츠 노출영역 상단에 가운데 정렬위치를 선호한다. 펀드 같은 경우 글자수가 30~50자까지 긴 경우의 노출을 원활하게 하기 위해서이다.
3. 팝업화면(Fupp popup, Ground popup, Dialog Popup, Layer Popup)들은 가운데 정렬 또는 좌측정렬을 많이 사용하고 있다.
종류별 내비게이션바 구성
4. 시스템 이전(Back) 키와 Return 버튼 이동 정의
1. 시스템 이전(Back) 키는 Android 단말기에 존재하는 하드웨어 /소프트웨어 버튼으로 사용자가 최근에 본 화면 기록을 기초로 시간 역순—사실상 화면 간 시간 의존적—으로 탐색하는 데 사용한다 [History. Back].
2.Return 버튼은 APP 화면 간 계층 의존적 탐색에 사용한다. 리스트 화면 A에서 항목을 선택하면 상세 화면 B로 이동하게 되며, 화면 B는 화면 A로 돌아갈 수 있도록 Return 버튼을 제공해 주어야 한다.
3.iOS에서는 시스템 이전(Back) 키가 없기 때문에 사용자가 홈(Home) 키를 통해 APP을 중지하고 새로 시작하는 불편함이 있으므로, MC APP 자체적인 대체 기능 버튼을 제공해 주도록 한다.
시스템 이전(Back) 키와 Return 버튼 이동 정의5. Process Button
1. Process Button (Button 1개 Case)
업무/거래 단 화면에 사용하는 Process 진행 목적용 버튼으로 Device 화면 하단 Fixed Area지정하며
Device / 화면 Width를 Full 사용한다. 버튼은 화면 하단에 붙어 있는 고정형 버튼으로 정의한다.
2. Process Button (Button 2개 Case)
업무/거래 단 화면에 사용하는 Process진행 + 취소 목적용 버튼으로, Device 화면 하단 Fixed Area지정하며 Device / 화면 Width Full 기준 - 각 버튼 비율 50:50 (Process 메인 및 긍정 버튼 우측배치)으로 배치한다.
3. Share + Process Button (Button 3개 Case)
업무/거래 단 화면에 사용하는 Process진행 + 부가기능 목적용 버튼으로, Device 화면 하단 Fixed Area지정하며 Device / 화면 Width Full 기준 - 각 버튼 비율 30:70 (Process 메인 및 긍정 버튼 우측배치)으로 배치한다. 긍정도 부정도 아닌 경우는 50:50 비율 유지하고, 버튼명이 6글자 이상일 경우는 50:50 비율로 적용한다.
4. 조건 충족 시 Process Button Style
Main Process 버튼의 경우, 해당 화면의 Next Process 진행 조건이 충족되었을 시 해당 버튼의 Style 및 상태를 변경한다. 화면 하단에 붙어 있는 고정형 버튼으로 정의한다.
Process Button지금까지 기본적인 내비게이션의 정의에 대해서 간략하게 정리를 해 보았다. 기획자들이 설계서 작성 시 많이 놓치고 설계를 하는 부분 중의 하나로, 업무단 각 기획자들은 해당 화면에 대해서 내비게이션 공통 외의 버튼 기능에 대해서는 각 화면마다 표시를 해 두는 것이 추후 타 팀들과의 관계에서 크게 무리 없이 프로젝트를 수행해 나갈 수 있을 것이라고 생각한다.
