칩

사용자가 고른 값을 화면에 남겨 두지 않던 시절이 있었습니다. 목록 위에 셀렉트 세 개를 두고, 사용자가 각각에서 하나씩 고르면 그 결과로 목록이 걸러졌습니다. 셀렉트는 고른 뒤 다시 접히기 때문에, 화면에 남는 것은 걸러진 결과뿐이었습니다.

그래서 이런 일이 생겼습니다. 문서 목록에 들어갔는데 2천 건이 있어야 할 자리에 3건만 보입니다. 사용자는 목록이 고장 난 줄 알고 새로고침을 하고, 그래도 3건이면 로그아웃했다가 다시 들어옵니다. 실제로는 지난주에 자기가 걸어 둔 조건이 그대로 남아 있었을 뿐입니다. 조건은 접힌 셀렉트 안에 있었고, 열어 보기 전에는 보이지 않았습니다.

칩은 이 문제를 화면 구성으로 푼 부품입니다. 고른 값을 목록 바로 위에 알약 모양으로 깔아 두면, 사용자는 열어 보지 않아도 무엇이 걸려 있는지 읽을 수 있습니다. 조건을 떼는 것도 같은 자리에서 끝납니다. 셀렉트를 다시 열어 체크를 푸는 대신 알약 오른쪽의 작은 엑스를 누르면 됩니다. 보여 주는 일과 없애는 일을 한 덩어리에 넣은 것이 이 부품의 발상입니다.

하나의 칩은 값 하나를 나타내고, 눌리면 그 값이 바뀌거나 사라집니다. 겉보기에는 작은 알약이지만 안에 들어가는 것은 넷입니다.

1. 라벨. 값을 글자로 적습니다. 마케팅팀 처럼 사용자가 고른 말을 그대로 씁니다. 줄이지 말아야 할 자리가 여기입니다. 라벨이 잘려 마케팅... 이 되면 지우려는 조건이 어느 것인지 알 수 없습니다.
2. 상태. 이 값이 지금 켜져 있는지 꺼져 있는지를 배경색이나 테두리로 나눕니다. 고를 수 있게 늘어놓은 칩에서는 안 고른 것은 테두리만, 고른 것은 배경을 채우는 식으로 구분합니다.
3. 제거 버튼. 라벨 오른쪽에 붙는 작은 엑스입니다. 이미 걸린 값을 보여 주는 칩에만 있고, 아직 고르는 중인 칩에는 없습니다.
4. 아이콘. 필요하면 라벨 왼쪽에 붙입니다. 사람을 나타내는 칩이라면 아바타를 앞에 넣어 누구인지 바로 보이게 합니다.

누를 수 있는 자리가 한 칩 안에 둘이라는 점이 다루기 까다로운 대목입니다. 몸통을 누르면 값을 고치는 화면이 열리고 엑스를 누르면 값이 사라지는데, 이 둘이 손가락 하나 너비 안에 붙어 있습니다. 터치 타깃은 손가락으로 누를 수 있게 확보해야 하는 최소 영역을 말하고 보통 44픽셀을 기준으로 잡는데, 칩 자체의 높이가 32픽셀이면 엑스는 그보다 작아집니다. 지우려다 편집 화면이 열리는 일이 여기서 나옵니다. 모바일에서는 엑스를 빼고 칩 전체를 누르면 지워지게 만드는 쪽이 안전합니다.

개수가 늘어나는 것도 미리 정해 둡니다. 조건 열두 개를 걸면 칩이 세 줄이 되고 목록이 화면 밖으로 밀립니다. 두 줄까지만 보이고 나머지는 +9 로 접는 규칙을 정해 두면 이런 일이 안 생깁니다.

같은 모양이지만 맡는 일은 셋으로 갈립니다.

걸린 조건을 보여 주는 자리가 가장 흔합니다. 목록 위에 지금 적용 중인 필터를 늘어놓고, 각각에 엑스를 붙여 하나씩 뗄 수 있게 합니다. 앞에서 본 3건 문제가 이 한 줄로 사라집니다.

여러 개를 고르는 입력에도 씁니다. 체크박스를 세로로 깔면 선택지 열 개가 화면 절반을 먹지만, 칩으로 늘어놓으면 두 줄에 들어갑니다. 대신 칩은 체크 표시가 없어서 무엇이 골라졌는지를 색으로만 알립니다. 색만으로 구분하면 색을 구별하기 어려운 사람에게는 아무 정보도 전달되지 않으므로, 고른 칩에는 체크 아이콘을 함께 넣는 것이 접근성 쪽 기본 처리입니다.

태그를 직접 만들어 넣는 입력도 칩으로 받습니다. 인풋에 글자를 치고 쉼표나 엔터를 누르면 그 말이 칩으로 굳는 방식입니다. 메일 수신자 칸이 이렇게 동작합니다. 굳은 뒤에는 글자가 아니라 덩어리라서, 백스페이스 한 번에 한 사람씩 지워집니다. 주소를 열 개 넣고 세 번째만 빼야 할 때, 글자로 남아 있으면 쉼표 사이를 커서로 찾아 지워야 하지만 칩이면 그 하나만 누르면 됩니다.

"적용된 필터를 칩으로 빼 주세요. 지금은 뭐가 걸렸는지 안 보여요."

조건을 접힌 곳에서 꺼내 목록 위에 보이게 하자는 요청입니다.

"이건 칩이 아니라 배지예요. 누를 게 아니잖아요."

모양이 비슷해도 누를 수 없는 표시라면 다른 부품을 써야 한다는 지적입니다.

"칩이 열두 개 붙으면 세 줄이 되는데, 두 줄까지만 보이고 접을까요?"

개수가 늘어날 때의 규칙을 미리 정하자는 제안입니다.

페이지덱의 문서 목록에 필터가 붙던 주에 있었던 일입니다. 민서가 만든 첫 화면은 셀렉트 세 개를 나란히 둔 것이었고, 출시 사흘 만에 문의가 들어왔습니다. 문서가 사라졌다는 내용이었는데 확인해 보니 지난 접속에서 걸어 둔 조건이 남아 있었습니다.

민서가 셀렉트 아래에 칩 줄을 넣고 조건마다 엑스를 붙였습니다. 태오가 물은 것은 개수였습니다. 팀 스무 개와 태그 마흔 개를 다 걸면 어떻게 되느냐는 질문에, 두 줄까지 보이고 나머지는 +12 로 접기로 정했습니다. 지현은 접힌 칩을 눌렀을 때 셀렉트가 열리는 게 아니라 나머지 칩이 펼쳐지게 해 달라고 했습니다. 조건을 보러 들어간 사람에게 고치는 화면을 여는 건 한 단계 더 가는 일이기 때문입니다.

칩을 작은 버튼으로 읽는 경우가 많습니다. 둥근 모서리에 누르면 반응하니 그렇게 보입니다. 그런데 버튼은 동작을 실행하고 칩은 값을 나타냅니다. 저장 은 버튼이고 마케팅팀 은 칩입니다. 이 구분이 흐려지면 한 줄에 초안 공유됨 내보내기 가 같은 모양으로 놓이고, 사용자는 앞의 둘도 누르면 무슨 일이 일어나는 줄 알고 눌러 봅니다.

칩이면 무조건 지울 수 있다고 여기는 것도 자주 나옵니다. 걸린 필터 칩에 엑스가 붙어 있다 보니 모든 칩이 같은 줄 압니다. 하지만 값을 보여 주기만 하는 칩에는 엑스가 없습니다. 만든 쪽이 이걸 모르고 읽기 전용 칩을 필터 칩과 같은 모양으로 두면, 사용자는 엑스를 찾다가 칩 몸통을 눌러 보고 아무 일도 안 일어나면 화면이 멈춘 줄 압니다. 누를 수 없는 값은 칩이 아니라 배지로 두는 편이 낫습니다.