문서 목록의 사용자 경험 개선

카테고리

디자인

서브카테고리

UX 디자인

대상자

• 웹 개발자, UX/UI 디자이너
• 중간 수준의 프론트엔드/백엔드 개발자
• 법률 관련 시스템 개발에 관심 있는 개발자

핵심 요약

• 문서 목록의 가독성과 사용성을 향상하기 위해 파일 아이콘, 파일 크기, 타임스탬프, 이미지 미리보기 등의 기능 추가
• 프론트엔드에서 useRouter() 및 useUser() 훅 사용하여 사용자 권한에 따른 조건적 UI 제공
• 백엔드에서 NestJS로 파일 메타데이터(파일명, 크기, MIME 타입, 케이스 연관성, 업로드자)를 정확히 저장 및 조회

섹션별 세부 요약

1. 왜 이 작업이 중요했는가

• 법률 전문가가 사용하는 Lura 시스템에서 문서 목록의 가독성이 핵심 요소
• 이전 상태는 무작위 파일명 목록(1248dd9_contract.pdf, meeting_notes_final_final_2.docx)으로 사용자 경험 저하
• 사용자는 데이터베이스 구조보다 파일 정보의 명확성을 우선시

2. 구현한 기능

• 프론트엔드
• useRouter() 및 useUser() 훅으로 사용자 역할 기반 조건부 삭제 버튼(canDelete && ( )) 제공
• 파일 유형 아이콘(PDF, Word, 이미지 등) 및 pretty-bytes 라이브러리 사용한 파일 크기 표시
• 지원되는 파일 유형에 대해 호버 시 이미지 미리보기 추가
• 백엔드
• NestJS에서 파일 업로드 시 필수 메타데이터 저장: 파일명, 크기, MIME 타입, 케이스/워크스페이스 연관성, 업로드자
• prisma.document.findMany()로 케이스 기반 문서 조회 시 추가 처리 없이 필요한 데이터 전달

3. 개선의 의미

• 기술적 복잡성보다 사용자 중심의 설계 중요성 강조
• 사용자는 복잡한 백엔드 구조보다 간단한 파일 정보 확인을 우선시
• "보기 좋고 사용하기 쉬운" UI는 기술적 성과보다 사용자 만족도에 직접 기여

결론

• 사소한 기능 개선도 사용자 경험에 큰 영향을 미침
• 프론트엔드/백엔드 모두에서 사용자 중심의 데이터 처리와 UI/UX 최적화를 적용해야 함
• "기본 기능"의 개선은 장기적인 프로젝트 성공에 기여하는 핵심 요소