체크박스

종이 서식에는 원래 네모 칸이 있었습니다. 해당하는 항목마다 표시하라는 칸이고, 여러 개에 표시해도 되는지 하나만 해야 하는지는 옆에 적힌 안내 문구로 알렸습니다. 읽는 사람이 문장을 읽고 판단하는 구조였습니다.

화면으로 옮겨 오면서 그 방식이 통하지 않았습니다. 사람들은 안내 문구를 읽지 않고 일단 눌러 봅니다. 여러 개를 골라야 하는 자리에서 하나를 누르고 다음으로 넘어가거나, 하나만 골라야 하는 자리에서 두 개를 누른 뒤 앞엣것이 왜 풀렸는지 몰라 되돌아옵니다. 잘못 고른 상태로 제출해 버리면 알림 설정이 통째로 꺼져 있거나 약관 동의가 빠진 채로 다음 화면이 뜹니다.

그래서 모양 자체가 규칙을 말하게 만들었습니다. 네모 칸은 여러 개를 함께 고를 수 있다는 뜻이고, 동그란 칸은 하나만 고를 수 있다는 뜻입니다. 이 약속이 굳어진 덕분에 사용자는 안내를 읽기 전에 칸의 모양만 보고 무엇이 허용되는지 압니다. 체크박스가 지금까지 네모를 유지하는 이유도 여기 있습니다. 모양을 바꾸면 그 약속이 깨집니다.

각 칸이 서로 상관없이 혼자 켜지고 꺼지는 것이 핵심 동작입니다. 알림 종류가 셋 있으면 셋 다 켤 수도, 둘만 켤 수도, 다 끌 수도 있습니다. 하나를 누른다고 다른 것이 풀리지 않습니다. 여럿 중 하나만 고르는 라디오 버튼과 갈리는 지점이 바로 여기입니다.

상태는 셋입니다.

1. 켜짐 — 선택된 상태입니다. 칸 안에 체크 표시가 들어갑니다.
2. 꺼짐 — 선택되지 않은 상태입니다. 빈 네모로 둡니다. 회색으로 흐리게 두면 눌러도 안 되는 상태와 헷갈립니다.
3. 부분 선택 — 아래에 딸린 항목 중 일부만 켜져 있을 때 쓰는 상태로, 체크 대신 가로줄을 넣습니다. 행과 열로 데이터를 늘어놓은 테이블의 맨 위 전체 선택 칸이 대표적입니다. 20행 중 7행만 골랐을 때 이 칸이 켜져 있으면 20행이 다 골라진 줄 알고 삭제를 누르게 됩니다.

값이 실제로 반영되는 시점은 따로 정해야 합니다. 체크박스는 저장 버튼을 누를 때 한꺼번에 반영되는 자리에 쓰는 것이 기본입니다. 눌렀는데 아무 일도 일어나지 않는 것이 이상한 게 아니라, 여러 개를 다 고른 뒤 한 번에 보내는 것이 이 요소의 전제입니다. 누르는 즉시 반영돼야 하는 설정에는 토글을 씁니다.

누를 수 있는 영역도 설계 대상입니다. 칸 자체는 한 변이 20픽셀 남짓이라 손가락으로는 잘 안 맞습니다. 옆에 붙은 글자까지 묶어 눌리게 하면 영역이 열 배 가까이 넓어집니다. 키보드로는 탭으로 이동해 스페이스로 켜고 끕니다. 네모를 이미지로 그려 넣고 원래 요소를 감추면 이 동작이 사라져서, 마우스를 못 쓰는 사용자에게는 고를 방법이 없어집니다. 장애나 상황에 관계없이 쓸 수 있게 만드는 접근성 문제가 이 작은 부품에서 자주 터집니다.

가장 많이 보이는 자리는 가입 화면의 약관 동의입니다. 여기서는 칸이 하나만 놓이는 경우도 흔합니다. 여러 개를 고르는 요소인데 하나만 쓰는 이유는, 켜고 끄는 두 상태 가운데 하나를 고르는 일이기 때문입니다. 필수 항목과 선택 항목을 한 덩어리로 묶어 두고 전체 동의 칸을 위에 놓으면, 아래 항목이 일부만 켜졌을 때 그 칸이 부분 선택 상태가 됩니다.

두 번째는 목록에서 여러 건을 골라 한꺼번에 처리하는 자리입니다. 문서 목록에서 열두 개를 골라 한 폴더로 옮기거나 지우는 동작이 여기 해당합니다. 이 경우 고른 개수를 화면 어딘가에 숫자로 보여 줘야 합니다. 스크롤을 내리면 위쪽에서 고른 것이 안 보이기 때문에, 숫자가 없으면 사용자는 몇 개를 지우려는지 모른 채 버튼을 누릅니다.

세 번째는 조건을 좁히는 자리입니다. 검색 결과 옆에 상태나 담당자를 체크박스로 깔아 두면 여러 조건을 겹쳐서 걸 수 있습니다. 정해진 목록에서 하나만 고르는 셀렉트와 달리 조건을 동시에 두 개 이상 걸 수 있다는 점이 이 자리에서 쓰이는 이유입니다. 선택지가 열 개를 넘어가면 세로로 길어져서, 위에 검색 칸을 붙이거나 자주 쓰는 것만 보여 주고 나머지는 접습니다.

"여기는 체크박스 말고 토글이 맞아요. 저장 버튼이 없는 화면이잖아요."

누르는 즉시 반영되는 자리인지 아닌지로 요소를 가르자는 말입니다.

"전체 선택이 부분 선택 상태를 안 그리고 있어서 몇 개 골랐는지 안 보여요."

일부만 선택된 상황을 나타내는 상태가 빠졌다는 지적입니다.

"라벨까지 눌리게 해 주세요. 지금 네모만 눌려서 모바일에서 계속 빗나가요."

누를 수 있는 영역이 좁아 실제 사용에서 실패가 난다는 뜻입니다.

페이지덱에서는 문서 목록에 일괄 삭제를 붙이면서 이 이야기가 나왔습니다. 민서가 행마다 체크박스를 두고 맨 위에 전체 선택 칸을 그렸는데, 첫 안에서는 전체 선택 칸이 켜짐과 꺼짐 둘만 가지고 있었습니다. 세 행을 고른 상태에서도 위 칸은 빈 네모였습니다.

태오가 구현하면서 문제를 발견했습니다. 한 페이지에 50행이 보이는데 사용자가 3행을 고른 뒤 스크롤을 내리면 아무 표시도 남지 않는다는 것이었습니다. 민서는 부분 선택 상태를 추가하고, 목록 위에 "3개 선택됨" 이라는 줄을 붙였습니다. 지현은 삭제 버튼에도 같은 숫자를 넣자고 했습니다. 되돌릴 수 없는 동작 앞에서는 개수를 한 번 더 보여 주는 편이 낫다는 이유였습니다.

체크박스와 토글을 취향 문제로 보는 경우가 가장 많습니다. 둘 다 켜고 끄는 것이니 화면에 어울리는 쪽을 쓰면 된다고 생각하기 쉽습니다. 실제로 둘을 가르는 것은 모양이 아니라 반영 시점입니다. 토글은 누르는 순간 값이 바뀌고, 체크박스는 저장을 눌러야 바뀝니다. 이걸 섞어 두면 사용자는 설정을 켜 놓고 저장 버튼을 못 찾아 그냥 나가고, 다음에 들어왔을 때 꺼져 있는 것을 보고 기능이 고장 났다고 문의합니다.

모양만 맞추면 되는 부품으로 보는 것도 흔합니다. 네모에 체크 표시만 그리면 끝나 보이니 디자인 시스템에서 가장 먼저 그리고 가장 덜 검토되는 부품이기도 합니다. 하지만 이 요소는 눌리는 영역, 키보드 조작, 부분 선택, 화면 낭독기가 읽어 주는 이름까지 딸려 있습니다. 하나라도 빠지면 그 부품을 쓴 모든 화면에 같은 문제가 복사됩니다. 스무 화면에 퍼진 뒤에 고치면 스무 곳을 확인해야 합니다.