Company · PCR Analysis Web App
분석 전 설정 흐름을 다시 설계한 3단계 위자드
8개 분석 설정 항목을 사용자 사고 흐름 기준의 3단계로 나누어 설정 오류와 학습 부담을 줄였습니다.
역할프론트엔드 설계 및 구현
기간회사 프로젝트
기여설정 흐름 재구성, 검증 UI, 상태 관리 개선
문제 유형UX Flow
01
문제와 배경
기존 분석 프로그램은 시약, 분석 파일, 플레이트 수, 타겟 등 8개 항목을 한 화면에서 모두 설정해야 했습니다. 설정값 자체도 중요했지만, 더 큰 문제는 사용자가 지금 무엇을 결정해야 하는지 한눈에 이해하기 어렵다는 점이었습니다.
02
중요하게 본 지점
처음에는 항목별 validation을 더 촘촘히 넣는 방식도 생각했습니다. 하지만 사용자의 오류는 단순한 입력 실수보다 흐름을 이해하지 못한 상태에서 발생하는 경우가 많았습니다. 그래서 항목을 기능 기준이 아니라 사용자의 사고 순서 기준으로 다시 묶었습니다.
03
실행한 일
- 파일 선택, 분석 옵션, 검증 및 자동 저장의 3단계로 흐름을 재구성했습니다.
- 각 단계의 판단 기준을 툴팁과 실시간 검증으로 보완했습니다.
- 공통 파일 경로와 상태는 Redux로 관리해 props 전달과 중복 로직을 줄였습니다.
04
결과
- 내부 클릭 로그 기준 설정 오류율을 약 20% 줄였습니다.
- 사용자로부터 매뉴얼 없이도 분석 설정 흐름을 이해할 수 있었다는 피드백을 받았습니다.
- 엑셀 경로 관련 코드량을 약 20% 줄여 유지보수성과 코드 리뷰 효율을 개선했습니다.