반응형 레이아웃과 접근성을 함께 고려한 사내 운영 대시보드 전면 리뉴얼

배경과 목표

• 가로 스크롤 없이 핵심 지표를 먼저 보여주기
• 키보드만으로 모든 조작을 끝낼 수 있게 하기
• 좁은 화면에서 열을 숨기는 대신 세로로 재배치하기

담당한 일과 작업 과정

1. 정보 우선순위 다시 세우기

   실제로 매일 보는 값과 월말에만 보는 값을 나눠, 앞쪽에는 네 개 지표만 남겼습니다. 나머지는 접힌 영역으로 옮겼습니다.

2. 표를 카드로 전환

   좁은 폭에서는 한 행을 카드 한 장으로 바꿔 항목 이름과 값을 함께 보여줍니다. 열을 숨기지 않으니 정보가 사라지지 않습니다.

3. 키보드 이동 정리

   포커스 순서를 화면 순서와 맞추고, 포커스 표시를 장식용 경계선보다 선명하게 만들었습니다. 필터는 버튼 그룹으로 바꿔 화살표 이동을 지원합니다.

결과물

확인한 것과 배운 점

• 열을 숨기는 대신 배치를 바꾸는 쪽이 좁은 화면에서 훨씬 덜 답답했습니다.
• 포커스 순서를 화면 순서와 맞추는 일만으로도 키보드 사용이 크게 편해졌습니다.

SAMPLE · 공개 링크나 성과 수치는 넣지 않았습니다