26.아코디언 아이콘을 최선으로 적용하는 방법

Nov 6. 2025

개요

요약하자면: 화살표형 캐럿(caret) 아이콘이 사용자가 아코디언(접혀 있다 펼쳐지는 메뉴)형 UI가 같은 페이지 내에서 확장될 것이라는 것을 가장 잘 나타내는 표식(signifier)이었다.

오늘날 아코디언은 모바일 환경에서 특히 중요하다. 콘텐츠를 접어서 페이지 길이를 관리할 수 있게 해 주며, 데스크톱에서도 시각적 복잡성을 줄이고 사용자가 현재 과업(task)에 가장 관련성 높은 콘텐츠에 집중할 수 있게 도와준다.

디자이너들이 자주 묻는 질문은: “어떤 아이콘을 써야 ‘이 항목을 눌렀을 때 같은 페이지에서 펼쳐질 거야’라는 의미를 가장 잘 전달할 수 있을까?”라는 것이다.

⸻

방법론(메서드)

우리는 모바일 내비게이션(navigation) 및 서브내비게이션(subnavigation)을 주제로 한 더 큰 연구의 일부로 이 질문을 조사했다.

모바일 웹사이트 11개 업종(의류 전자상거래, 대형 리테일, 자동차 부품, 금융, 뉴스, 지방정부, 고등교육, DIY 홈프로젝트, 소비재 리뷰, 헬스케어, 여행) 각각에 대해 프로토타입을 만들었다.

각 프로토타입에는 아코디언이 이미 펼쳐진 상태로 메뉴 항목이 보여지도록 하여, 사용자가 메뉴를 찾는 것보다는 ‘아코디언 아이콘’ 자체의 상징(signifier)과 상호작용(interaction)만을 측정할 수 있게 설계했다.

아이콘 변형은 다음과 같이 5가지였다:

• 아래를 향한 캐럿(caret)

• 더하기(plus)

• 오른쪽을 향한 화살표(right-facing arrow)

• 통제용 무의미 아이콘(foil icon)

• 아이콘 없음(no icon)

우리는 11개의 모바일 프로토타입을 만들어서 아코디언 사용성에 대해서 연구하기로 결정했다. 11개는 각기 다른 산업으로 의류 이커머스, 큰박스 소매, 오토 파츠, 금융, 뉴스, 지역 공공기관, 고학력 교육, DIY 홈 프로젝트, 사용자 제품 리뷰, 건강서비스와 여행이었다. 이 프로토타입은 인터렉션이 되지않는 간단한 목업으로 메뉴는 이미 오픈된 상태였고 카테고리는 스크린에 보이는 상태였다. 사용자가 메뉴를 찾고 홈페이지 콘텐츠를 보는 등의 노력을 측정하는 것이 아니라 아코디언과의 상호작용만을 측정하도록 했다.

각 프로토 타입은 아코디언의 시각정보만 사용하는 작업으로 이루어졌다. 예를 들어서 사용자 제품 리뷰 웹사이트의 경우 우리의 요청 작업은 ‘식기세척기의 리뷰를 찾아라’처럼 간단했다.

우리는 5개의 각 프로토타입 유형을 준비했다. 4개의 아이콘과 아이콘이 없는것 1개로 구성했다.

아코디언 아이콘을 관련 레이블 오른쪽, 화면 가장자리에 가깝게 배치하고 오른쪽 정렬했다. (레이블 왼쪽도 가능한 위치라는 점을 인지하고 있다. 하지만 이 배치에는 결과가 일반화되지 않을 수 있다.)

텍스트 레이블 의 길이는 사용자가 보거나 클릭하는 위치에 영향을 미칠 수 있으므로 각 프로토타입의 레이블 길이가 균등하게 분포되도록 했으며 각 작업에 대한 "올바른" 답변(즉, 사용자가 선택할 가능성이 높은 메뉴 옵션)이 각 프로토타입에서 다른 길이로 되도록 했다.

또한 작업 성공률(90% 이상)을 높이고, 각 작업을 완료하기 위해 선택해야 하는 "올바른" 메뉴 카테고리를 사람들이 쉽게 식별할 수 있도록 여러 파일럿 연구를 진행했다. 각 파일럿 연구 후, 메뉴의 작업 문구와 라벨을 개선했다. 이를 통해 정량적 데이터를 수집하기 전에 프로토타입의 정보 아키텍처 에 대한 사용성 연구를 여러 차례 진행했다 . 이 과정을 통해 대부분의 참가자에게 적합한 카테고리를 찾는 것이 비교적 쉬운 일이었다. 연구 목표는 사용자에게 제공된 작업에서 정보를 찾는 것이 아니라 아코디언 기호를 테스트하는 것이었기 때문이다.

참가자 . 본 연구에는 136명의 참가자가 참여했다. 모든 참가자는 다양한 아이콘의 인스턴스를 (서로 다른 프로토타입과 순서로) 보았다.

절차 . 테스트는 UserZoom 에서 모바일 기기에서 일련의 첫 번째 클릭 작업으로 진행되었다. 모든 참가자에게 11개의 프로토타입 각각에 대한 하나의 버전과 관련 작업을 무작위 순서로 보여주었다. 참가자들이 답을 찾으려면 어디를 탭해야 하는지 지정한 후, 어떤 결과가 나올지(새 페이지로 바로 이동, 같은 페이지에서 추가 메뉴 옵션 표시 등)를 예상하는 객관식 질문에 답해야 했다.

우리는 다음에 대한 데이터를 수집했다.

수집한 데이터는 다음과 같다:

• 탭 위치(tap location): 사용자가 어디를 눌렀는가(레이블, 아이콘, 레이블-아이콘 사이 공간 등)

• 사용자 기대(expectation): 탭 이후에 어떤 일이 생길 것으로 예상하는가(같은 페이지에서 펼쳐질 것인가, 새로운 페이지로 이동할 것인가)

⸻

데이터 수집 결과

탭 위치: 사용자들이 어디를 누르나

탭 위치 데이터를 보면, 아이콘이 없는 조건(no-icon)에서는 사용자가 레이블(text label)을 누를 확률이 더 높았다. 반면 아이콘이 있는 조건에서는 레이블과 아이콘을 거의 동등하게 누르는 경향이 있었다.

단지 캐럿(caret) 아이콘이 있는 경우에는 통계적으로 유의미하게 아이콘을 누르는 비율이 레이블을 누르는 비율보다 약간 더 높았다.

이 결과는 “아이콘만 누르면 된다, 레이블은 누르지 않아도 된다”처럼 아이콘과 레이블에 서로 다른 기능을 부여하는(split button) 방식은 안전하지 않다는 것을 보여준다.

⸻

데이터 수집 결과

사용자 기대: 탭 후 어떤 일이 생길 것인가

사용자가 “이 아이콘/레이블을 누르면 새로운 페이지로 이동할 것인가, 아니면 같은 페이지에서 메뉴가 펼쳐질 것인가”를 얼마나 잘 예측하는가를 측정했다.

아코디언의 경우 “같은 페이지에서 펼쳐질 것”이라는 기대가 이상적이며, 그 기대가 50 % 이하로 나오는 것이 바람직하다.

결과는 다음과 같다:

• 표준 아이콘(캐럿, 더하기, 화살표)의 경우, 새로운 페이지로 이동할 것이라는 기대(new-page expectation)가 통계적으로 50 %와 유의미하게 다르지 않았다 — 즉, 사용자들이 “같은 페이지에서 펼쳐질 것”이냐 “새로운 페이지로 이동할 것”이냐를 확실히 예측하진 못했다.

• 반면 아이콘이 없거나 의미 없는 아이콘(foil)인 조건에서는 사용자가 “새로운 페이지로 이동할 것”이라는 기대가 유의미하게 더 높았다.

• 캐럿 아이콘이 있는 조건이 “같은 페이지에서 펼쳐질 것”이라는 기대가 가장 높았으며, 아이콘 없음이나 무의미 아이콘 조건보다 통계적으로 유의미하게 더 좋았다.

• 더하기(plus) 아이콘은 무의미 아이콘(foil)보다는 유리했지만, 아이콘 없음(no-icon) 조건보다는 유의미하게 낫다고 보기 어려웠다.

• 오른쪽 화살표(right-facing arrow) 아이콘은 아코디언에 사용될 경우 나머지 표준 아이콘들과 통계적으로 유의미한 차이를 보이지 않아 “아코디언에 사용하기에 적합하지 않다”고 결론지었다.

⸻

주요 발견 (Key Findings)

• 아이콘이 전혀 없으면, 사용자는 해당 항목을 누르면 새로운 페이지로 넘어갈 것이라고 기대하는 경향이 있었다.

• 새롭고 익숙하지 않은 아이콘(foil) 역시 사용자의 기대를 충족시키지 못했다.

• 표준 아이콘(캐럿, 더하기, 화살표) 중에서 캐럿이 아이콘 없음 또는 무의미 아이콘보다 사용자가 같은 페이지에서 펼쳐질 것이라는 기대를 가장 잘 전달했다.

• 더하기 아이콘은 크게 잘하진 못했으며, 화살표는 아예 적절하지 않다고 보았다.

• 사용자들은 아이콘 또는 레이블 중 하나만 강조해서 누르기 보다는 둘 다 눌렀고, 따라서 아이콘과 레이블에 서로 다른 행동을 배정(split button)하는 방식은 권장하지 않는다.

⸻

디자인 권고사항 (Design Recommendations)

• 모바일 메뉴에서 아코디언을 쓴다면, 캐럿(caret) 아이콘이 가장 안전한 선택이다.

• 레이블(text label)과 아이콘(icon)이 서로 다른 동작(action)을 갖지 않게 해야 한다. 즉, 레이블을 누르면 링크로 이동하고 아이콘을 누르면 아코디언이 펼쳐지고 … 이런 식은 피해야 한다. 본 연구 결과 사용자들이 아이콘과 레이블을 거의 비슷하게 누르며, 둘이 다른 행동을 기대하지 않았다.