팝업 버튼과 풀다운 버튼, 왜 다르게 생겼을까요?
버튼으로 알아보는 메타포의 차이
HIG의 팝업 버튼 · 풀다운 버튼버튼에 숨겨진 메타포 차이
애플 HIG의 팝업 버튼과 풀다운 버튼은 각기 다른 사용 목적과 인터랙션 방식을 반영한 디자인 언어를 갖고 있습니다. 둘이 구분되어 있다는 사실조차 대부분 모르셨을 것 같은데요.
이 글에서는 두 버튼의 간단한 특징을 먼저 알아보고, 시각적 차이를 통해 각 버튼이 제공하는 기능과 기대하는 행동이 무엇인지 살펴보겠습니다. 화살표 하나의 차이가 사용자 경험에 어떤 영향을 미칠까요?
팝업 버튼팝업 버튼
팝업 버튼은 수직으로 펼쳐지는 목록에서 단일 선택 옵션을 제공하는 버튼입니다.
목적: 상태 전환, 필터 설정 등의 단일 선택
용도: 옵션 변경 가능성을 즉각 인지해야 할 때
구성: 버튼에는 현재 선택된 옵션이 표시되며, 클릭 시 다른 옵션 목록이 드러남
장점: 공간 효율성이 높고, 단순하고 명확한 인터페이스 제공
iOS 설정 내 팝업 버튼팝업 버튼의 예시 : 옵션
위 페이지에는 팝업 버튼을 활용해 저장 공간을 많이 차지하는 앱을 정렬하는 기능을 제공하고 있습니다. 위의 팝업 버튼 역시 필터 선택과 단일 선택 기능을 지원하며, 사용자가 현재 선택한 옵션을 명확히 확인할 수 있도록 설계되어 있습니다.
풀다운 버튼풀다운 버튼
풀다운 버튼은 아래로 펼쳐지는 목록에서 명령어 또는 옵션을 제공하는 버튼입니다.
목적: 명령 선택, 여러 항목 선택이 필요한 상황
용도: 작업 또는 옵션을 일관성 있게 제공할 때
구성: 클릭 시 명령 또는 항목의 목록이 드러나며, 메뉴에는 하위 항목이나 추가 기능이 포함될 수 있음
장점: 다기능적이며, 사용자 작업 흐름을 간결하게 유지
더 보기 풀다운 버튼 · 제스처를 통한 항목 표시풀다운 버튼의 예시 : 작업 수행
iOS에서의 풀다운 버튼은 더 보기 버튼 및 제스처로 표현되고 있는 모습입니다. 파일 앱 상단의 더 보기 풀다운 버튼을 눌러 작업을 수행할 수 있으며, 브라우저 탭에서 터치 앤 홀드 제스처를 통해 동작 메뉴를 표시합니다. 이는 제한된 공간을 효율적으로 활용하고, 제스처 기반의 단순화된 인터페이스를 지향하는 방향으로 보이기도 합니다.
양방향 화살표 · 아래 화살표의 메타포 차이화살표 메타포의 차이
두 컴포넌트 모두 작업 및 옵션을 리스트 항목으로 나타나게 한다는 점에서 공통된 역할을 하는데, 왜 화살표 메타포의 형태가 다른 걸까요?
팝업 버튼(A)은 '상태 변경 가능' 및 '양방향 선택 가능'이라는 의미를 전달하며, 이를 통해 위아래로 이동하거나 변경할 수 있는 옵션이라는 점을 암시합니다.
풀다운 버튼(B)은 드롭 다운과 같이 '아래로 선택지 표시'라는 의미를 전달하며, 선택가능한 항목이 아래 표시됨을 암시합니다.
메타포가 다른 이유
아래 화살표(B)는 단순히 목록을 열어서 선택한다는 동작을 예상하게 하는데 그칩니다. 반면 위아래 화살표(A)는 현재 상태를 기준으로 이동하거나 더 많은 옵션이 위아래로 존재한다는 점을 시각적으로 보여줍니다. 이를 통해 팝업 버튼(A)은 옵션 변경을, 풀다운 버튼(B)은 항목 선택의 기능을 수행한다는 의미를 직관적으로 전달하고자 합니다.
마치며
팝업 버튼과 풀다운 버튼이 점차 리스트, 심볼 버튼, 제스처 등으로 바뀌어가고 있다는 점이 인상적이었습니다. 두 버튼이 빈번히 사용될 때는 둘의 차이가 체감이 되겠지만, 사용처가 적어지는 시점에서 둘의 차이를 일반 사용자가구분할 수 있을지, 구분하였을 때 사용성의 큰 차이가 있는지는 의심이 들기도 합니다.
그만큼 아이콘이나 심볼의 메타포가 인터페이스 내에서 순간적인 선택에 있어 판단을 하게 하는 중요한 요소로 작용될 수 있으며, 유사한 컴포넌트와의 구분을 위해서는 세심한 고려가 필요해 보입니다.
앞서 설명한 두 가지 버튼과 관련된 메뉴 · 드롭다운에 관한 글을 아래에서 확인하실 수 있습니다!
