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