대환대출 (2023.12 ~ 2024.01)
Nextjs framer-motion tanstack-query recoil styled-components
배경
주택담보대출 대환대출 인프라가 출시되며 기존의 금리진단 서비스를 대환대출 서비스로 확장하는 프로젝트를 진행했습니다. 비즈니스 로직의 추가 뿐만 아니라 사용자 경험을 개선하는 것도 중요한 목표였습니다.
주요 도전 과제
UI 개편
문제점:
기존의 스크롤 기반 UI는 여러 한계점을 가지고 있었습니다.
- 사용자가 많은 정보를 순차적으로 입력해야 하는 불편함
- 중요한 정보를 실수로 누락하거나 잘못 기입하는 경우가 빈번하게 발생
- 상담과정에서 이로 인한 재신청 요청으로 사용자의 이탈 발생
- 전반적인 사용자 경험 저하
해결 방안:
이러한 문제점들을 해결하기 위해 UI를 교체했습니다. 새롭게 바뀐 UI는 다음과 같은 장점을 제공해 주었습니다.
- 사용자가 입력한 정보를 기반으로 다음 단계를 동적으로 제시
- 직관적인 대화형 인터페이스로 사용자 친화성 향상
- 자연스러운 대화 흐름을 위한 부드러운 애니메이션 제공
이러한 챗봇형 UI를 구현하는 과정에서 가장 큰 도전 과제는 컴포넌트의 생명주기와 연계된 복잡한 애니메이션 처리였습니다. 특히 메시지의 등장, 사라짐, 그리고 다음 메시지와의 자연스러운 연결을 구현하는 것이 까다로웠습니다.
이 문제를 해결하기 위해 framer-motion을 사용했고, framer-motion에서 제공하는 API를 통해 복잡한 애니메이션 로직을 선언적이고 관리하기 쉬운 방식으로 구현할 수 있었습니다.
결과
개발 생산성 향상
- 비즈니스 로직과 애니메이션 로직의 분리로 비즈니스 로직 수정에 대한 내성 향상
사용자 경험 개선
- 모던하고 직관적인 인터페이스로 사용자 경험 향상
- 사용자 입력 오류 및 누락 감소로 재신청률 개선 및 상담 프로세스 효율성 개선으로 전환율 향상
이를 통해 기존 금리진단 서비스를 현대적이고 대환대출 서비스로 성공적으로 탈바꿈 했습니다.