농구 동호회 운영 화면, 모바일 정보 밀도 설계법

농구 동호회 운영 화면은 정보가 쉽게 늘어납니다. 출석 인원, 라인업, 경기 기록을 모두 보여주려 하면 작은 화면이 금방 답답해져요. 그래서 화면에 “모든 정보”를 넣기보다, 지금 결정해야 할 정보를 먼저 두는 편이 중요합니다.

360px 너비를 기준으로 직접 만들어 보니, 좌우 여백을 각각 16px로 두면 실제 콘텐츠 폭은 328px입니다. 이 폭에서는 카드 3개를 나란히 두기보다 세로 흐름으로 쌓고, 각 카드 안의 정보 계층을 줄이는 방식이 읽기 편했어요.

출석 확인→라인업 결정→경기 기록 확인

첫 화면의 상단은 경기 날짜와 참여 인원처럼 맥락을 알려주는 영역으로 시작합니다. 그 아래에는 출석 상태를 둡니다. 이름 전체를 길게 반복하기보다 참여·미정·불참처럼 상태별 숫자를 먼저 보여주고, 필요할 때만 멤버 목록을 펼치게 하면 됩니다. 테스트해 보면 운영자는 목록보다 “현재 몇 명인지”를 먼저 확인하는 경우가 많았어요.

라인업은 출석 카드 바로 다음에 배치합니다. 5명 단위의 팀 구성을 카드 안에서 구분하고, 멤버 이름은 2줄 이상 길어지지 않게 처리합니다. 직접 만들어 보니 이름, 포지션, 상태를 한 줄에 모두 넣는 구성은 328px 폭에서 시선이 자주 끊겼습니다. 이름과 상태만 기본 노출하고, 자세한 정보는 탭이나 바텀시트로 분리하는 편이 안정적이었어요.

기록 영역은 수치를 많이 보여주기보다 최근 경기의 핵심 결과를 한 줄 요약으로 둡니다. 예를 들어 득점, 리바운드, 어시스트처럼 서로 성격이 다른 항목은 3열로 균등 분할할 수 있습니다. 328px을 3등분하면 열 하나당 약 109px이므로, 숫자는 크게 두고 항목명은 짧게 써야 합니다. 돌려 보니 긴 라벨보다 약어와 보조 설명을 조합한 구성이 모바일에서 덜 복잡했습니다.

• ✓현재 결정할 정보
• ✓한 카드 한 행동
• ✓펼쳐서 보는 세부 정보

터치 요소는 서로 붙이지 않는 것도 중요해요. 출석 변경, 라인업 편집, 기록 보기처럼 행동이 3개라면 카드마다 대표 행동을 1개만 두는 편이 좋습니다. 버튼을 2개 이상 나란히 두어야 한다면 우선순위가 낮은 행동은 메뉴로 옮깁니다.

플랜비(plan-b)의 멤버·회비·출전 로테이션·전술보드처럼 운영 정보가 이어지는 서비스도 같은 원칙을 적용할 수 있습니다. 한 화면은 현재 경기 운영에 집중하고, 상세 관리 화면은 별도 흐름으로 나누는 방식입니다. 작은 화면일수록 정보량보다 다음 행동이 선명한지가 화면의 완성도를 좌우해요.