Kim.KANGHEE
4.4 KiB
4.4 KiB
이 프로젝트에서 파일 관리 페이지의 UI/UX를 리디자인해줘.
목표: 현재 페이지를 "도구 영역"과 "결과 확인 영역"으로 명확히 분리하고, 탭 / KPI / 필터 / 검색 / 빈 상태가 한눈에 이해되도록 구조를 개선해줘. 기존 기능은 유지하고, 마크업 구조와 스타일 중심으로 정리해줘.
현재 화면 요약:
- 상단에 "파일 관리 도구" 카드가 있고, ZIP / 백업 / QUICK MOVE(MAC, GUID, GPU) 기능이 있음
- 그 아래에 "FILE WORKSPACE" 영역이 있고, "처리된 파일 / 백업 및 저장소" 탭이 있음
- KPI 카드로 MAC 파일 / GUID 파일 / GPU 파일 수가 보임
- 검색창이 따로 있음
- 하단에는 파일 리스트 대신 empty state가 보이며 "처리된 파일이 없습니다"와 "IP 처리로 이동" 버튼이 있음
현재 문제:
- 도구 영역과 결과 확인 영역의 구분은 생겼지만, 사용자의 행동 흐름 기준으로는 아직 약간 분산되어 보임
- 탭 / KPI / 검색 / 설명 문구의 위계가 조금 애매함
- KPI 카드가 정보 표시는 되지만 클릭 가능한지, 필터와 연결되는지 직관성이 약함
- 검색창이 현재 보는 범위와 강하게 연결되어 보이지 않음
- empty state는 나쁘지 않지만 더 명확한 안내와 액션 구조로 정리 가능함
원하는 구조:
-
상단 카드 = 파일 관리 도구
- ZIP
- 백업
- QUICK MOVE(MAC / GUID / GPU)
- 이 영역은 "작업 실행" 용도라는 것이 명확해야 함
-
하단 메인 카드 = 결과 확인 워크스페이스
- 상단 헤더: 페이지 제목 + 짧은 설명
- 같은 줄 또는 바로 아래: 메인 탭
- 처리된 파일
- 백업 및 저장소
- 그 아래: KPI 카드
- MAC
- GUID
- GPU
- 그 아래: 필터 + 검색
- 예: 전체 / MAC / GUID / GPU
- 검색창은 현재 활성 탭/필터 기준 검색이라는 점이 드러나야 함
- 마지막: 데이터 리스트 또는 empty state
원하는 UX 방향:
- 사용자가 첫눈에 "여기는 결과 확인 영역"이라는 점을 이해할 수 있게 해줘
- 탭 → KPI → 필터/검색 → 결과 목록 순서로 자연스럽게 읽히게 해줘
- KPI 카드는 클릭하거나 선택 가능한 카드처럼 보이게 해줘
- 검색창 placeholder를 더 구체적으로 바꿔줘 예: "처리된 파일명, MAC, GUID 검색"
- empty state는 더 친절하고 명확하게 보여줘
예:
- 아이콘
- 제목
- 설명
- 1차 액션 버튼
디자인 방향:
- Bootstrap 기반 유지
- 지금보다 조금 더 정돈된 관리자 페이지 느낌
- 과한 장식보다 실무형 UI
- 카드/버튼/탭의 시각적 계층을 명확히
- spacing, alignment, radius, hover state를 정리
- 색상은 기존 의미를 유지
- MAC = blue 계열
- GUID = green 계열
- GPU = red/pink 계열
수정 범위:
- templates/index.html
- static/ css
- 필요 시 js 최소 수정
- Flask 백엔드 로직, 라우트, 데이터 구조는 수정하지 말 것
반드시 유지:
- 기존 Jinja 변수명
- 기존 form submit 방식
- 기존 endpoint 이름
- 기존 버튼 동작 로직
- 기존 데이터 바인딩 구조
금지사항:
- 새 라이브러리 추가 금지
- 전체 페이지를 처음부터 갈아엎는 전면 재작성 금지
- 백엔드 로직 변경 금지
- 기존 기능 삭제 금지
완료조건:
- 도구 영역과 결과 영역이 시각적으로 명확히 분리될 것
- 결과 영역은 "탭 → KPI → 필터/검색 → 결과" 흐름이 분명할 것
- KPI 카드가 단순 숫자 표시가 아니라 탐색 요소처럼 보일 것
- 검색창이 현재 탭/필터와 연결되어 보일 것
- empty state가 더 직관적일 것
- 기존 기능은 그대로 동작할 것
- 모바일/좁은 화면에서도 크게 깨지지 않을 것
작업 방식:
- 먼저 관련 파일을 읽고 현재 구조를 짧게 요약
- 변경 계획을 5~8줄로 먼저 제시
- 그 다음 최소 diff 원칙으로 수정
- 마지막에 변경 파일 목록과 핵심 변경점, 확인할 테스트 포인트를 정리
가능하면 다음도 반영해줘:
- KPI 카드 클릭 시 해당 필터가 활성화되도록 연결할 수 있으면 연결
- empty state 버튼 문구와 보조 문구를 더 자연스럽게 개선
- 검색창 라벨/placeholder를 활성 탭에 따라 달리 보이게 할 수 있으면 반영