칩 · 태그

정의

칩은 작고 둥근 라벨처럼 생겼지만, 그 자체로 사용자가 누르거나 지울 수 있는 독립된 요소입니다. 쓰임새는 크게 둘입니다. 하나는 필터 칩으로, 목록 위에 조건들을 칩으로 늘어놓고 눌러서 켜고 끄며 결과를 좁힙니다. 다른 하나는 태그로, 입력창에 적어 넣은 항목이나 사용자가 붙인 분류를 작은 조각으로 표시하고, 각 조각에 달린 엑스 버튼으로 필요 없는 것을 하나씩 눌러 제거합니다. 겉모습이 배지와 비슷해 헷갈리기 쉽지만, 배지가 다른 요소에 딸려서 상태를 알리기만 하는 표식이라면, 칩은 그 자체로 눌리고 지워지는, 사용자가 직접 조작하는 독립된 대상이라는 점이 결정적으로 다릅니다.

왜 중요한가

칩이 중요한 이유는 여러 개의 선택이나 항목을 좁은 공간에 눈에 보이게 담아 주기 때문입니다. 지금 어떤 필터가 켜져 있는지, 무엇을 이미 입력했는지가 칩으로 나열되어 있으면 사용자는 자신의 현재 상태를 한눈에 확인하고, 필요 없는 것을 그 자리에서 바로 지울 수 있습니다. 드롭다운 안에 숨은 선택과 달리 칩은 결과가 밖으로 드러나 있어, 내가 무엇을 골랐는지 기억에 의존하지 않아도 됩니다. 또 칩은 각각이 개별 조작 단위라 추가와 제거가 직관적이어서, 태그 입력이나 다중 필터처럼 항목이 유동적으로 늘고 주는 상황을 자연스럽고 부담 없이 다루게 해 줍니다.

흔한 실수

• 칩을 눌러도 아무 반응이 없거나 지울 방법이 없는 경우입니다. 칩은 조작 가능한 요소처럼 생겼기 때문에, 사용자는 당연히 누르거나 제거할 수 있다고 기대합니다. 그 기대를 배신하면 그저 답답한 라벨이 되어 버립니다.
• 선택된 칩과 안 된 칩의 차이가 흐릿한 경우입니다. 상태 구분이 약하면 지금 어떤 필터가 켜져 있는지 알 수 없어 칩을 쓰는 의미가 사라지고, 사용자는 결과가 왜 이렇게 나왔는지 매번 되짚어 봐야 합니다.
• 제거 버튼을 지나치게 작게 만드는 경우입니다. 특히 손가락으로 누르는 화면에서 엑스가 너무 작으면 옆 칩을 잘못 누르거나 여러 번 헛손질을 하게 되어, 지우는 간단한 동작마저 스트레스로 바뀝니다.

실무 팁

• 선택 상태를 색으로 분명하게 구분하세요. 켜진 칩은 채워진 배경과 강조색으로, 꺼진 칩은 옅은 테두리로 두면 지금 무엇이 활성인지 한눈에 읽혀 오조작이 줄어들고, 색만으로 부족할 때는 체크 표시를 함께 두면 더 확실합니다.
• 칩 개수가 많아지면 한 줄에 억지로 밀어 넣지 말고 여러 줄로 자연스럽게 흐르게 하세요. 줄바꿈을 허용하면 좁은 화면에서도 모든 칩이 잘리지 않고 다 보입니다.
• 제거용 엑스는 충분히 눌리는 크기로 두되 칩 본체 클릭과 구분되게 배치하세요. 선택과 삭제가 헷갈리면 지우려다 켜는 실수가 잦아지므로, 두 동작의 반응 영역을 명확히 나누는 것이 안전합니다.

관련 개념