왜 칩으로 좁힐까
이옌가와 레퍼(2000)의 연구처럼 선택지가 너무 많으면 사람들은 고르기를 포기해요(선택 과부하). 이와 동료들(2003)은 사람들이 여러 측면을 차례로 골라 좁혀 가는 패싯 탐색을 검색보다 선호한다고 보였어요. 필터 칩은 그중 자주 쓰는 조건을 결과 바로 위에 꺼내 두어, 필터 화면을 열지 않고도 한 번에 결과를 줄여 줘요. 모바일 검색 UX에서 특히 효과가 커요.
어떤 조건을 올릴까
모란(2018)은 사용자가 실제로 기준으로 삼는 조건과 값을 필터로 만들라고 권해요. 칩에는 그중 가장 자주 쓰이는 몇 개만 올리고, 나머지는 '필터' 칩을 눌러 여는 전체 화면에 둬요. 휘턴턴(2015)이 정리한 모바일 필터 트레이처럼, 전체 필터 화면에서는 결과 수가 어떻게 바뀌는지 보여주는 게 좋아요. 힉(1952)의 법칙처럼(힉의 법칙) 칩이 너무 많으면 고르는 시간이 늘어요. 가로 스크롤 칩은 화면 밖 칩이 잘 안 보이니 중요한 칩을 앞에 둬요.
선택 상태와 터치
머티리얼(Google, n.d.)은 선택된 필터 칩에 체크 표시와 채움을 함께 쓰도록 안내해요. 색만 바뀌면 선택됐는지 알기 어려우니까요. 적용된 조건은 결과 위에 계속 보여주고, 한 번에 모두 해제하는 '초기화'도 둬요. 칩은 작아 보이지만 파히와 동료들(2006)이 말한 엄지 타깃 크기는 지켜야 하고, 칩 사이 간격도 충분해야 잘못 누르지 않아요. 화면낭독기에는 '무료배송, 선택됨'처럼 상태를 함께 알려 줘요.
자주 묻는 질문
- 필터 칩과 전체 필터 화면은 무엇이 다른가요?
- 칩은 자주 쓰는 조건을 한 번에 켜고 끄는 지름길이고, 전체 필터 화면은 모든 조건을 자세히 고르는 곳이에요. 둘을 함께 쓰는 게 일반적이에요.
- 칩은 즉시 적용해야 하나요?
- 모바일에서는 누르는 즉시 결과가 바뀌는 게 자연스러워요. 전체 필터 화면은 '적용' 버튼으로 모아서 적용하는 방식도 괜찮아요.
출처 검토일: 2026-10-27
참고문헌
- Moran, K. (2018, July 15). Helpful filter categories and values for better UX. Nielsen Norman Group. 사용자에게 의미 있는 필터 항목과 값을 고르는 지침이라, 칩에 무엇을 올릴지 정할 때 참고하면 도움이 돼요.
- Whitenton, K. (2015, July 26). Mobile faceted search with a tray: New and improved design pattern. Nielsen Norman Group. 모바일에서 필터를 트레이로 띄우는 패턴을 다뤄, 칩과 전체 필터 화면을 함께 설계할 때 참고하면 도움이 돼요.
- Google. (n.d.). Chips. Material Design 3. 필터 칩·입력 칩·제안 칩의 차이와 선택 상태 표시를 다뤄, 칩 종류를 고를 때 참고하면 도움이 돼요.
- Yee, K.-P., Swearingen, K., Li, K., & Hearst, M. (2003). Faceted metadata for image search and browsing. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 401–408). ACM. 여러 측면(패싯)으로 좁혀 가는 탐색이 검색보다 선호된다는 연구라, 칩으로 조건을 쌓는 방식의 근거로 참고하면 도움이 돼요.
- Iyengar, S. S., & Lepper, M. R. (2000). When choice is demotivating: Can one desire too much of a good thing? Journal of Personality and Social Psychology, 79(6), 995–1006. 선택지가 너무 많으면 오히려 선택을 포기한다는 연구라, 칩으로 결과를 좁혀 주는 이유로 참고하면 도움이 돼요.
- Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26. 선택지 수와 결정 시간의 관계를 다룬 고전이라, 한 줄에 보여줄 칩 수를 정할 때 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 작은 칩의 높이와 간격을 정할 때 참고하면 도움이 돼요.