플랜비 카드 한쪽 두꺼운 띠를 테스트로 막은 이유

농구 동호회 운영에서는 멤버, 회비, 출전 로테이션, 전술보드처럼 확인할 항목이 4가지로 나뉘어요. 플랜비(plan-b) 화면도 이 정보를 카드로 정리하는 경우가 많습니다. 직접 만들어 보니 카드마다 한쪽에만 굵은 띠가 반복될 때, 정보보다 장식이 먼저 눈에 들어왔어요.

특히 카드가 3개 이상 이어지면 화면의 왼쪽이나 위쪽으로 시선이 쏠립니다. 사용자는 카드 제목과 상태를 빠르게 훑고 싶은데, 띠의 색과 두께가 카드의 중요도를 과장하는 것처럼 보일 수 있어요. 적용해 봤더니 같은 색을 작은 상태 표시, 아이콘, 텍스트 대비에 나눠 쓰는 편이 훨씬 차분했습니다.

한쪽 두꺼운 띠 중심 카드와 정보 위계 중심 카드 비교

그래서 플랜비에서는 이 원칙을 말로만 남기지 않고 테스트 조건으로 다뤄요. 디자인 규칙은 시간이 지나면 새 화면이나 수정 작업에서 빠지기 쉽기 때문입니다. 테스트해 보면 카드 컴포넌트의 테두리, 배경, 상태 표시가 의도대로 조합되는지 한 번 더 확인할 수 있어요.

확인 기준은 3가지예요.

1. 카드의 한쪽 가장자리에 굵은 장식 띠를 기본값으로 두지 않아요.
2. 상태는 짧은 텍스트, 작은 배지, 색 대비 중 필요한 1가지로 표현해요.
3. 카드 제목과 핵심 수치가 장식보다 먼저 읽히는지 확인해요.

돌려 보니 이 기준은 예쁜 화면을 위한 제약이라기보다, 운영자가 다음 행동을 고르기 쉽게 만드는 장치에 가까웠어요. 예를 들어 회비 현황 카드에서는 금액과 납부 상태가, 출전 로테이션 카드에서는 순서와 참여 여부가 먼저 보여야 합니다. 카드 1장 안에서 장식이 정보의 자리를 차지하면 확인 속도가 떨어질 수 있어요.

카드 목적 확인→정보 위계 배치→화면 테스트

라이프케어로그는 플랜비처럼 일상 운영에 쓰이는 도구에서 화면의 규칙도 제품 기능의 일부라고 봐요. 직접 만들어 보니 작은 카드 규칙 1개를 테스트로 고정하는 일이, 화면을 고칠 때마다 같은 판단을 되풀이하지 않게 해줬습니다.