프론트 화면 개선 과정 정리
기존 디자인의 문제점
기존 업무 관리 화면에서는 업무 단위가 많아질수록 세로 스크롤이 과도하게 길어지는 문제가 있었습니다.
사용자는 필요한 정보를 찾기 위해 계속해서 아래로 스크롤해야 했고, 이는 가독성과 사용성 모두에 부정적인 영향을 미쳤습니다.
1차 개선 시도: 생산일 기준 필터링
처음 시도한 개선은 생산일 기준으로 데이터를 필터링하여, 초기 렌더링 시 한 달 단위의 데이터만 표시되도록 한 것이었습니다.
이를 통해 초기 화면 로딩 시의 스크롤 부담은 어느 정도 줄일 수 있었습니다.
하지만 이 방식은 데이터가 누적될수록 여전히 스크롤이 길어질 수밖에 없다는 한계가 있었습니다.
즉, 근본적인 해결책은 아니었습니다.
2차 개선: 카테고리별 그룹화
보다 근본적인 해결을 위해 업무를 카테고리별로 그룹화하고, 각 그룹을 접고 펼칠 수 있는 인터페이스로 개선하였습니다.
이를 통해 사용자는 필요한 카테고리만 펼쳐서 볼 수 있고, 전체 업무량이 많더라도 시각적 부담과 스크롤 길이를 최소화할 수 있습니다.
요약
- 문제: 업무량이 많아질수록 긴 세로 스크롤
- 1차 시도: 생산일 필터링 (근본적 해결방안이 아님)
- 최종 개선: 카테고리 그룹화 및 토글 기능으로 시각적 효율 개선
생산명에 생산상태도 라벨로 같이 표기하고 있는데 생산명이 길어지면 생산상태가 잘려보여서
생산상태를 컬럼으로 따로 빼서 보여지게 하는 게 UI적으로 더 나을 것 같다는 생각을 해봅니다.
더불어 생산상태도 필터링될 수 있게 추가하면 좋을 것 같아 기획요청건에 넣어두었습니다.
참고로 그룹화하는 것은 Cursor AI를 활용했는데 모델은 claude-3.7-sonnet-thinking을 사용했습니다.
이모델 저모델 다 사용해보면서 해당 모델이 로직적으로 요구하는 것을 가장 잘 반영한다고 느꼈습니다.
어느정도 기획적인 아이디어만 있으면 웬만한 건 커서가 다 구현해줘서 개발이 쉬워졌습니다.
AI로 인해 개발이 편해졌다는 게 장점이 되기도 하지만 위협을 느끼는 것도 사실입니다..