🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.
이 포스팅은 파일 검사 프로세스에서 발생한 문제를 해결하기 위한 과정의 내용을 담고 있습니다. 백드롭 화면에 가려진 검사 진행 상황 표시 문제를 해결하기 위해 모달 내부로 진행 상태를 옮기고, 이를 통해 사용자 경험을 개선한 방법을 다룹니다.
1️⃣ 프로세스 변경 배경
1. 기존 Modal 검사 프로세스의 문제점
현재 파일 검사 프로세스에서는 파일들을 선택한 후 검사 버튼을 클릭하면 모달 창이 뜨고, 분석이 진행 중임을 사용자에게 알립니다. 이때 모달 창 뒤에 있는 백드롭 화면에서 전체 파일 검사 진행도가 실시간으로 업데이트되며, 파일 목록에서도 개별 파일의 검사 상태가 반영됩니다. 하지만, 모달 창이 열려 있는 동안 이 모든 정보가 어두워진 배경 화면에 표시되기 때문에 사용자는 진행 상황을 제대로 인지하지 못합니다.
저는 이와 같은 백드롭 화면에서의 진행도 표시 방식이 사용자 경험을 저해한다고 판단했습니다. 따라서 모달 창 내부에서 진행 상황을 직관적으로 확인할 수 있도록 프로세스를 변경하는 것이 필요하다고 보았습니다. 또한, 검사 과정이 길어질 경우 사용자가 모달 창에서 벗어날 수 있는 "중단하기" 버튼이 필요하다고 생각했습니다. 모달 창에 갇히지 않고 다른 작업을 수행할 수 있도록 하는 것이 사용자 경험을 개선하는 데 중요한 요소였습니다.
추가적으로, 검사 중 모달 창이 비정상적으로 닫히거나, 검사 도중 추가적인 상호작용(파일 추가 등)이 발생할 경우 버그가 발생할 가능성이 높다고 판단했습니다. 이러한 문제를 방지하기 위해 프로세스의 안정성을 강화할 필요성도 있었습니다.
2. 프로세스 변경 제안
프로세스 개선을 위한 제안 준비
문제점을 인식한 후, 개선 방안을 제시하기 위해 빠르게 준비에 착수했습니다. 단순히 기존 방식의 문제와 개선사항만 나열하는 것이 아니라, 구체적인 해결책을 제시하고자 새로운 모달 디자인까지 제작하여 팀원들에게 제안을 준비했습니다. 이를 위해 PPT 자료에 문제 정의, 개선 필요성, 그리고 변경된 모달 디자인 시안을 정리한 후 팀원들 앞에서 발표하였습니다.
팀원들은 제 제안에 대해 긍정적인 반응을 보였고, 다양한 의견을 주셨습니다. 특히 팀원들은 디자인 변경 사항에 대해 멘토님과 디자이너분의 의견을 듣는 것이 좋겠다는 제안을 하셨습니다. 이에 따라 멘토링 시간에 변경된 모달 디자인을 설명드렸고, 두 분 모두 변경된 디자인 방향에 동의해 주셨습니다. 그 결과, 새로운 모달 디자인을 채택하여 프로젝트에 반영하기로 최종 결정되었습니다.
추가로, 도연님께서 깃허브의 PR 리뷰 코드 디자인을 모달의 검사 결과 페이지에 적용해 보는 것이 좋겠다는 의견을 주셨습니다. 이 제안이 검사 결과를 더욱 직관적이고 가독성 높게 만들 수 있다고 판단하여, 해당 디자인을 검사 결과 페이지에 반영하기로 하였습니다.
Git PR :🚀 feat : 코드 검사 페이지 검사하기 모달창 퍼블리싱 : https://github.com/FlawDetector-team-yes/FlawDetector-team-yes/pull/53
3. 긴급 디자인 변경 소식
프로젝트 4주차에 스팩스페이스에서 긴급하게 디자인 변경 소식을 전달받았습니다. 기업 측에서는 랜딩 페이지를 제외한 대부분의 페이지에서 디자인과 로직이 크게 변경되었으며, 이는 사용자들의 UI 관련 피드백과 다양한 제안을 종합하여 반영한 결과였습니다.
특히 검사 페이지에서는 사용자가 파일 검사를 시작한 후에도 모달이 닫힐 수 있도록 변경되었습니다. 이는 사용자에게 더 큰 자유도를 제공하기 위한 조치로, 검사가 진행되는 동안에도 사용자가 검사 중인 파일의 코드를 확인하고, 각 파일의 검사 진행 상황을 추적할 수 있도록 설계되었습니다. 이러한 변경 사항은 사용자 경험을 대폭 개선할 수 있는 방향으로 진행되었습니다.
2️⃣ 과제 및 목표
검사 기능의 프로세스 변경으로 인해 예외 처리의 중요성이 부각되었습니다. 기존에는 모든 파일 검사가 모달창 내에서 이루어졌고, 검사가 끝난 후 검사 이력을 저장하고 모달 창을 닫으면 검사가 초기화되는 구조였습니다. 하지만 사용자가 검사 도중에도 다른 파일을 확인하거나 여러 검사를 동시에 진행할 수 있도록 요구가 있었습니다. 이로 인해 사용자 인터페이스의 자유도가 크게 높아졌지만, 다양한 예외 상황을 처리해야 하는 과제가 발생했습니다.
3️⃣ 직면한 문제
검사 도중 여러 상호작용이 가능해짐에 따라 다양한 예외 상황이 발생했습니다. 특히 다음과 같은 문제들을 처리해야 했습니다.
- 검사 도중 페이지를 벗어나거나 "뒤로 가기"를 누른 경우.
- 모달을 닫은 상태에서 검사가 완료된 경우.
- 검사 중 사용자가 추가로 다른 파일을 검사하려고 할 때.
- 검사 도중 로그아웃 하거나, 다중 레포지토리를 동시에 검사하려는 경우.
이처럼 사용자가 상호작용하는 방식이 복잡해짐에 따라, 기존 단일 레포지토리 검사 로직이 다중 레포지토리 검사 시나리오에 적합하지 않았습니다. 새로운 구조에 맞는 상태 관리 및 예외 처리가 필요했습니다
4️⃣ 시도한 방법
1. 레포지토리 정보 상태 관리
- `Zustand` 상태 관리 라이브러리를 사용해 각 레포지토리의 검사 상태를 전역적으로 관리할 수 있는 `reposState`를 추가했습니다. 이를 통해 다른 페이지로 이동하거나 모달이 닫혀도 검사 상태를 추적할 수 있게 했습니다.
- 파일 정보에 레포지토리 이름(repoName)을 추가하여, 각각의 파일에 대한 검사 상태를 레포지토리별로 구분할 수 있도록 개선했습니다. 이를 통해 여러 레포지토리를 동시에 검사할 때 파일별 상태 관리가 용이해졌습니다
- 파일 검사 중 모달이 닫히거나 페이지를 이동해도, 이미 진행중인 파일 검사들은 백그라운드에서 계속 처리되어 완료도면 Firebase에 저장되도록 구현하였습니다. 이를 통해 사용자는 검사 도중 다른 작업을 수행할 수 있으며, 검사 상태는 손실되지 않고 안전하게 저장됩니다.
2. 검사 중 다른 레포지토리 검사 제한
동시에 여러 레포지토리를 검사하려고 할 때, 한 레포지토리 검사 중일 때는 다른 레포지토리 검사를 제한하는 로직을 추가했습니다. 이를 통해 중복 검사를 방지하고 시스템 리소스 관리 효율성을 높였습니다.
3. UI 개선
- 모달이 닫힌 상태에서도 검사 진행 상황을 확인할 수 있도록, 파일 리스트에 검사 상태를 실시간으로 표시하였습니다.
- 오른쪽 하단의 플로팅 액션 버튼을 통해 사용자가 모달을 다시 열어 검사 상태를 쉽게 확인할 수 있도록 하여, 사용자의 편의성을 향상시켰습니다.
5️⃣ 성과 및 결과
사용자 경험(UX) 향상 :
검사 도중에도 사용자의 자유도를 높이면서, 발생 가능한 예외 상황에서 오류를 최소화하여 검사 흐름을 방해하지 않았습니다. 사용자는 검사 중에도 다른 파일이나 레포지토리를 확인하거나, 검사 중이던 상태를 유지한 채 다른 작업을 수행할 수 있었습니다.
검사 중 예외 상황 처리 강화 :
여러 검사 시나리오에서 발생할 수 있는 예외 상황을 포괄적으로 처리함으로써 시스템 안정성과 데이터 처리 정확도가 향상되었습니다.
Git PR :🚨 fix : 마이페이지, 코드 검사 페이지 다중 레퍼지토리 동시 검사 중 발생하는 버그 수정 및 로직 개선 : https://github.com/FlawDetector-team-yes/FlawDetector-team-yes/pull/99
6️⃣ 배운 점
예외 처리의 중요성 :
UI 자유도가 높아질수록 예외 상황에 대한 처리가 필수적이라는 것을 깨달았습니다. 검사 도중 발생할 수 있는 다양한 상호작용을 모두 고려해 꼼꼼하게 예외 처리를 구현함으로써, 시스템의 안정성과 사용자 경험을 개선할 수 있었습니다.
유연한 상태 관리 :
`Zustand`와 같은 상태 관리 라이브러리를 활용하여, 여러 레포지토리 검사 상황에서 상태를 일관되게 관리하는 방법을 배우게 되었습니다. 특히, 페이지 이동이나 모달 종료와 같은 비동기 상황에서도 상태 유지를 지속하는 방법을 익혔습니다.
UX와 기능성의 균형 :
사용자에게 더 많은 자유도를 제공할수록 예외 상황에 대한 꼼꼼한 처리가 필수적이라는 점을 배웠습니다. 사용자의 행동 패턴을 미리 예측하고 대응책을 마련하는 것이, UX 향상과 시스템 신뢰성 모두에 기여할 수 있다는 점을 경험했습니다.
