아코디언(accordion)을 열고 닫는 기능을 보여주기에 가장 신뢰할 수 있는 아이콘은 무엇일까요? 캐럿(caret), 체크론(chevron), 화살표(arrow), 삼각형(triangle) 사이에 실제로 눈에 띄는 차이가 있을까요?
실제로 연구를 보면 약간의 차이가 있다는 것을 알 수 있습니다. 하지만 더 흥미로운 점은 분리 메뉴(split menus)가 해롭다는 것, 아이콘과 텍스트 레이블이 서로 다른 동작에 연결되는 것이 왜 좋지 않은지, 그리고 캐럿(caret)이 가장 안전한 아이콘 선택인 이유입니다. 자세히 살펴보겠습니다!
아이콘 없음 = 페이지 열기
발견된 내용은 그리 놀랍지 않습니다. 아무런 아이콘을 사용하지 않을 경우, 사용자들은 메뉴 항목을 탭하면 새 페이지로 직접 이동할 것이라고 예상합니다. 사용자들은 **사용자 지정 아이콘(custom icons)**에 어려움을 겪는 경우가 많은데, 이는 해당 아이콘이 아코디언을 열 것임을 명확하게 신호하지 않기 때문입니다. 그리고 대부분의 아이콘에서 사람들은 아이콘과 레이블 모두를 상당히 균등하게 탭하는 경향이 있습니다.
많은 디자인(아래와 같은)은 아코디언의 상태에 따라 사방으로 가리키는 화살표와 캐럿을 추가하여 상황을 약간 복잡하게 만드는 경향이 있습니다. 하지만 일반적으로 카테고리로 연결되는 링크를 표시하기 위해 화살표를 사용할 필요는 없습니다.
가장 간단한 경험칙은 매우 단순합니다. 만약 그것이 링크라면, 가장 쉽고 효과적인 방법은 단순히 밑줄을 긋는 것입니다. 어떤 화살표, 캐럿 또는 다른 아이콘도 필요 없습니다. 아마 특별히 흥미롭지는 않겠지만, 항상 완벽하게 작동합니다.
화살표 ▶와 분리 버튼의 혼란스러운 동작
오른쪽을 향하는 화살표 아이콘 ▶를 사용하는 것은 새 페이지로 직접 이동할 것이라는 기대와 연관되어 있지 않습니다. 또한 같은 아이콘이 아래를 향하는 ▼를 가리킨다고 해서 아코디언이 탭/클릭 시 열릴 것이라고 반드시 암시하지는 않습니다.
아코디언의 경우 분리 버튼(split buttons)을 피하는 것이 좋습니다. 즉, 텍스트 레이블은 페이지로 직접 연결되지만 아이콘은 아코디언을 여는 방식입니다. 대신, 사용자가 메인 카테고리를 탭하여 메뉴를 노출시키고; 카테고리 페이지에 접근하려면 메뉴 내부에 링크를 추가하는 것이 훨씬 더 신뢰할 수 있습니다.
플러스 +/− 및 화살표 ↓/↑는 이해되지만 오해될 수 있습니다
아코디언 메뉴의 경우, 확장 및 축소 상태를 나타내기 위해 일반적으로 +/− 또는 화살표 ↓/↑를 사용하며, 보통 잘 작동합니다. 하지만 이 두 기호 모두 매우 다양한 해석을 가질 수 있습니다. 플러스 +는 나중에 저장하기부터 장바구니에 추가하기, 확대하기에 이르기까지 무엇이든 의미할 수 있으며, 특히 여러 레벨의 탐색(multi-level navigation)에서 동시에 많은 레벨이 열릴 경우 매우 혼란스러울 수 있습니다.
화살표 ↓/↑는 스크롤링이나 슬라이딩을 의미하거나 다음 일치 항목 찾기를 의미할 수도 있지만, 페이지의 특정 부분으로 이동(jump)하는 것을 의미할 수도 있습니다. 플러스와 화살표 모두 잘 이해되고 작동하지만, 디자인에 따라 혼란스러울 수 있는데, 이는 주로 기호가 과부하되어 사용되기 때문입니다.
마무리하며
안전한 선택은 기본적으로 아래를 가리키는 캐럿/삼각형 ▼을 사용하는 것이며, 상호작용 시에는 위를 가리키거나 옆을 가리키는 캐럿(caret)으로 변경하는 것입니다. 대안이 필요하다면, +/- 역시 일반적으로 잘 작동합니다.
하지만 링크가 어디로 연결되는지 표시하기 위해 더 많은 아이콘이나 화살표가 필요한 것은 아닙니다. 분할 메뉴(split menus)도 마찬가지인데, 종종 도움말 섹션보다 더 많은 실수를 유발합니다. 대신, 하나의 버튼 또는 드롭다운을 사용하여 정확히 한 가지 일만 수행하도록 하는 것이 좋습니다. 즉, 모든 옵션을 보여주고 사용자가 세부적으로 탐색(drill down)할 수 있도록 해야 합니다.
그리고 직접적인 링크가 필요한 경우, 제목 자체를 페이지로 연결하고 밑줄을 긋습니다. 대부분의 경우, 단순할수록 더 좋습니다.
에디터 노트
저희는 이 멋진 프로젝트들이 유용하기를 바랍니다. 이들은 멋진 크리에이터들이 함께 만들어낸 결과물입니다. 자신의 작업을 공유하여 다른 사람들이 배우고 사용할 수 있도록 하는 모든 분들께 감사의 인사를 전합니다! 이것이 바로 우리가 웹과 그것을 만들고 디자인하는 사람들을 진심으로 사랑하는 이유 중 하나입니다. 💚
Smashing에서는 웹을 사랑합니다. 그래서 저희는 모든 웹과 관련된 아티클과 책을 출판하고, 워크숍 및 이벤트를 진행합니다. 저희 모두가 웹을 더욱 접근성 높고 사용하기 쉽게 만들기 위해 무엇을 할 수 있는지 보는 것을 좋아합니다. 또한 대규모 그룹(참석자 5명 이상) 및 학교, 학생들을 위한 친근한 할인 혜택을 제공하는 온라인 이벤트를 기획하고 참여하는 것도 좋아합니다. 관심 있으신가요? 그냥 이메일을 보내주세요, 저희가 처리해 드리겠습니다!
- 여러 개의 라이브 세션 (각 2.5시간),
- PT 기준 오전 09:00 – 11:30 (CET 기준 오후 18:00 – 20:30)
- 워크숍 비디오 녹화본 및 슬라이드 제공,
- 무료 비디오 미리보기 (2.5시간)
- 모든 워크숍으로 이동 →
