홈페이지 FAQ나 메뉴에 클릭하면 내용이 펼쳐지는 아코디언 UI를 쓰고 있다면, 어떤 아이콘을 붙였는지 다시 한번 살펴볼 필요가 있습니다. 아이콘 하나로 사용자가 '클릭하면 새 페이지로 넘어간다'와 '클릭하면 내용이 펼쳐진다'를 전혀 다르게 예상하기 때문입니다. 결론부터 말하면 위아래로 모양이 바뀌는 캐럿(▼→▲) 아이콘이 가장 안전하고, 화살표나 복잡한 조합 아이콘은 오히려 혼란을 키울 수 있습니다.
아이콘 하나가 바꾸는 사용자의 기대
아코디언은 클릭한 항목만 펼쳐지고 나머지는 접혀 있는 메뉴·FAQ 구조를 말합니다. 아이콘이 아예 없으면 사용자는 이 항목을 누르면 새 페이지로 이동한다고 생각해, 실제로 내용이 펼쳐져도 그 변화를 알아채지 못하는 경우가 많습니다. 우측을 향한 화살표(▶)는 다음 페이지로 넘어가는 느낌을 주고, 아래쪽 화살표(▼) 하나만 쓰면 눌렀을 때 정말 펼쳐지는 건지 어디론가 이동하는 건지 사용자가 확신하지 못합니다.
우리 홈페이지 FAQ·메뉴에 미치는 영향
특히 텍스트는 페이지로 연결되는 링크인데 옆의 아이콘만 아코디언을 여는 '분할 버튼' 구조는 사용자가 어디를 눌러야 할지 헷갈려 클릭 실수를 늘립니다. 아이콘 종류별로 사용자가 어떻게 받아들이는지 정리하면 다음과 같습니다.
| 아이콘 유형 | 사용자 반응 | 권장 여부 |
|---|---|---|
| 아이콘 없음 | 새 페이지 이동으로 오인 | 피하기 |
| 우측·하향 화살표 단독 | 펼침 동작을 알아채지 못함 | 피하기 |
| 캐럿(▼↔▲) | 열림·닫힘 상태를 명확히 인지 | 권장 |
| +/− 아이콘 | 작동은 하나 추가·확대 등과 혼동 가능 | 조건부 사용 |
지금 점검할 네 가지
- 아이콘을 캐럿으로 통일하기 FAQ, 메뉴, 상품 상세 등 사이트 전체의 아코디언에서 아이콘을 ▼(닫힘)과 ▲(열림)로 맞추고, 화살표나 삼각형이 섞여 쓰이고 있다면 하나로 정리합니다.
- 분할 버튼 구조 없애기 제목 텍스트를 누르면 다른 페이지로 가고 옆의 아이콘만 아코디언을 여는 구조가 있는지 확인하고, 하나의 요소는 하나의 동작만 하도록 고칩니다.
- 진짜 링크는 제목 자체에 걸기 다른 페이지로 연결해야 하는 항목은 제목 글자에 밑줄을 넣어 링크로 표시하고, 화살표나 캐럿 같은 아코디언 아이콘을 따로 붙이지 않습니다.
- +/− 아이콘 재검토하기 저장, 추가, 확대·축소 버튼과 함께 쓰이고 있다면 같은 페이지 안에서 +/−가 다른 의미로 겹치지 않는지 점검하고, 겹친다면 캐럿으로 바꿉니다.
- 실제 사용자 반응 확인하기 담당자나 동료에게 바뀐 디자인을 보여 주고, 클릭 전에 어떤 일이 일어날지 예상해 보게 해서 의도대로 읽히는지 확인합니다.
흔히 하는 오해
- +/− 아이콘이 직관적이라고 생각하기 쉽지만, 장바구니 담기나 수량 조절 버튼과 같은 화면에 있으면 같은 아이콘이 서로 다른 의미로 읽혀 혼란을 줍니다.
- 디자인을 화려하게 만들려고 화살표와 캐럿, +/−를 페이지마다 섞어 쓰는 경우가 있는데, 아코디언은 한 사이트 안에서 아이콘 규칙이 하나로 통일돼 있어야 합니다.
- 아이콘만 바꾸면 해결된다고 생각하기 쉽지만, 열림과 닫힘 상태에 따라 아이콘 모양이 실제로 바뀌는지, 애니메이션 없이 멈춰 있지는 않은지도 함께 확인해야 합니다.
한 줄 정리 아코디언 아이콘은 화려함보다 명확함이 먼저이며, 열림과 닫힘을 분명히 보여 주는 캐럿 아이콘 하나로 통일하는 편이 가장 안전합니다.