#아티클공유
네비게이션 UXUI 가이드
해당 아티클에서는 앱 네비게이션을 제작할 때 어떤 사항을 고려해야할지에 대해 다루고 있습니다.그 방법이 매우 자세하고 실제 실무에서 사용시 어떻게 디자인시스템을 구축할지 보여주고있습니다.
내용 요약1. 네비게이션 바의 양옆 여백 정하기
저도 평소에 20으로 여백을 사용하는데요, 이 아티클에선 16으로 영역을 설정하였습니다. 생각보다 컨텐츠 여백을 일정하게 유지하지않는 앱이 많다고 합니다.
2. 높이와 동작 영역 설정하기
iOS는 44pt, 안드로이드는 56dp로 높이를 제시하고 있습니다. 그래서 여기선 48로 설정을 했더라고요. 저는 60선에서 해결하려고 하고 있는데 터치영역을 고려해서 4~8배수가 좋다고 생각합니다.
3. 타이틀 위치 정하기
사실 앱을 만들 때 제일 고민되는 부분인데요, iOS와 안드로이드의 차이점이 두드러지는 부분이 아닌가 싶습니다.
현재 어떤 화면을 보고있는지 확인할 수 있는 점에서 뒤로가기와 타이틀이 붙어있는 안드로이드의 방식은 ux적으로 불편할 수 있겠구나 싶었습니다.
4. 타이틀과 동작의 글씨 크기, 색상 설정
5. 추가로 애니메이션 제공
타이틀 크기가 바뀌는 애니메이션도 있다는걸 처음알았네요. 보통 하단으로 스크롤을하면 네이게이션 정보를 일부 숨기는 동작을 많이 사용합니다.
6. 네이게이션만으로 UX 향상시키기
앱 디자인을 하시는 분들이라면 늘 고민하는 엄지존에 대한 얘기입니다. 진행, 완료 버튼이 키보드에 가려진다면 때로는 포기하고 누구나 쉽게 인지하는 우측 상단에 두는 것도 방법일 수 있습니다.
그럼에도 엄지영역으로 버튼을 옮긴다면 더 많은 사용자가 사용을 할 것이라 보고있는데요, 해당 아티클에서 A/B테스트를 통해 버튼 위치를 어디에 둘 것인가 정하는 내용을 확인해보는 것도 좋을 것 같습니다.
앱 UXUI를 하신다면 누구나 알 수도, 혹은 쉽게 지나칠 수 있는 기본적인 가이드를 작성한 아티클입니다. 사이드프로젝트를 진행하며 얻는 내용들을 나누어 작성을 하고 계셨는데 실제로 저도 실무에서 네비게이션을 어떻게 활용할지, 하단 GNB는 어떻게 할지 항상 고민하던터라 이번기회에 디자인시스템을 터치영역까지 고려해 구축해보아야겠다는 생각이 들었습니다.