Kim.KANGHEE
104 lines
4.4 KiB
Markdown
104 lines
4.4 KiB
Markdown
이 프로젝트에서 파일 관리 페이지의 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를 활성 탭에 따라 달리 보이게 할 수 있으면 반영 |