탭과 세그먼트 버튼의 차이점
세그먼트 버튼의 사용 용도와 tab과의 차이점
한윤석 (DOBLING, UI/UX 디자이너)
현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.
두블링의 공모전(BNK 경남은행 앱 디자인 공모전)준비를 위해 UI디자인 작업을 하는 도중 문제에 부딪히게 됩니다.
경남은행 카드 페이지 기존UI기존 경남은행 앱 화면을 UI를 개선하는 디자인을 진행중에 있는데 위 화면의 네모박스 안에 '전체, VIP, 체크카드, 신용카드(개인/기업)' 버튼을 어떻게 개선할 것이냐?에 대해서 토론을 하게 됩니다.
팀원들과 상의 후 최종적으로 Tab 버튼과 Segment button중 Segment button을 사용하기로 결정하였습니다. 결정하는데 있어서 세그먼트 버튼이 어떤 용도로 어떤 곳에 사용되는지 인사이트를 얻었고, 그 내용을 공유하려고 합니다.
세그먼트 버튼이 적용된 경남은행의 개선 UI도 함께 보여드리겠습니다!
아래 이미지의 오른쪽 개선한 앱 화면에 Segment button UI가 적용되었습니다.
왼쪽 : 기존 앱 화면 / 오른쪽 : 개선한 앱 화면세그먼트 버튼의 용도와 탭과의 차이점
세그먼트 버튼의 용도
세그먼트 버튼이 무엇인가요?
세그먼트 버튼은 사용자들이 옵션을 선택하거나, 보기를 전환하거나, 요소를 정렬하는데 쓰입니다.
데이터 등의 보기를 전환할 때
옵션을 선택할때
요소를 정렬할 때위와 같이 세그먼트 버튼은 연결된 테이블 또는 그리드를 필터링하거나 보기의 표시 모드를 전환할 때 사용됩니다.
탭과 세그먼트 버튼의 차이점
애플 IOS 가이드라인
탭 : 탭은 사용자에게 앱에서 다른 하위 작업, 보기 또는 모드 간에 전환할 수 있는 기능을 제공합니다. 탭을 사용하여 사용자가 앱의 전체 기능과 관련된 동일한 데이터 세트 또는 다른 하위 작업에 대한 다른 관점에서 엑세스 할 수 있도록 합니다. 주로 다른 앱의 화면 하단에 사용되는 내비게이션 바입니다.
세그먼트 버튼 : 상호 배타적인 버튼입니다. 탭과 유사하게 작동하지만 보기를 전환하는 데 자주 사용할 수 있다고 합니다. 밀접하게 관련되어 있지만 상호 배타적인 선택 사항을 제공하려고 할 때 세그먼트 버튼을 사용하십시오.
결론
탭은 앱의 전체 기능과 관련된 '하위 작업'에 대한 디자인을 할 때 사용하면 되고 세그먼트 버튼은 탭과 유사하지만 '밀접하게 관련되어 있지만 상호배타적인 선택 사항, 즉 데이터, 옵션선택'을 제공하고자 할 때 사용하면 됩니다.
