아코디언 아이콘, 결국 캐럿(▼)이 답이다

Smashing Magazine의 Vitaly Friedman이 아코디언 메뉴에 어떤 아이콘을 붙여야 하는지 정리했다. NN/g가 아이콘 없음, 화살표, 캐럿, 플러스/마이너스 네 가지를 비교한 연구를 바탕으로, 사용자가 '펼쳐진다'는 신호를 가장 잘 읽는 쪽은 아래를 향한 캐럿이라고 결론 짓는다.

"If it's a link, the easiest and most effective way is to simply underline it — without any arrow, caret, or other icon."Smashing Magazine (Vitaly Friedman)

왜 중요한가

아이콘은 장식이 아니라 '이 요소가 무엇을 하는지'를 알리는 어포던스다. 캐럿은 아이콘 자체를 눌러보는 비율이 높아 동작을 가장 잘 전달했고, 화살표나 플러스/마이너스는 다른 곳에서도 쓰여서 의미가 겹쳐 오해를 낳을 수 있다. 링크라면 밑줄이면 충분하다는 지적도 같은 맥락이다.

실무 적용

아코디언은 기본값을 아래 방향 캐럿으로 두고, 펼칠 때 회전시키는 것으로 상태를 보여주자. 텍스트는 페이지로 이동하고 아이콘만 메뉴를 여는 분리형 버튼은 피하고, 카테고리를 누르면 메뉴가 열리되 카테고리 페이지 링크는 메뉴 안에 두는 구조가 안전하다.

교차 참고

• NN/g: Accordion Icons — 네 가지 아이콘을 비교한 원 연구로, 어떤 아이콘이 탭을 유도하는지 다룬다.
• NN/g: Animation Purpose in UX — 캐럿 회전 같은 전환 모션이 상태 변화를 알려주는 역할을 설명한다.

Wemeet의 관점

Wemeet은 이런 작은 컴포넌트의 규칙이 곧 서비스의 신뢰감이라고 본다. 디자인 시스템에 '아코디언 = 아래 캐럿 + 회전'을 한 줄 규칙으로 못 박아 두면 화면마다 아이콘이 달라지는 일이 사라지고, 리뷰에서 취향 논쟁에 쓰는 시간도 줄어든다.