[리팩토링] 이메일 인증번호 전송 사용자 경험 개선 - 1

문제

이메일 인증번호 전송 과정에서 좋지 않은 사용자 경험을 제공했다.

인증번호 전송 버튼을 클릭하면 입력한 이메일로 인증번호를 전송하게 되는데 인증번호를 성공적으로 전송한 경우
"인증번호가 전송되었습니다." 알림이 출력되도록 로직을 설정했지만 인증번호를 전송하는 과정이 4~5초 정도 소요되어 사용자는 인증번호 전송 버튼을 누른 후 약 5초 후에 해당 알림을 받아볼 수 있었다.

 

그래서 인증번호 전송 버튼을 클릭하는 동시에 전송 알림이 출력되도록 로직을 수정했지만 이메일 중복확인 기능을 추가하면서 다시 문제가 발생했다.

 

신규 회원인 경우에는 문제가 없지만 이미 가입된 이메일인 경우 "인증번호가 전송되었습니다." 알림과 "이미 사용 중인 이메일입니다." 알림이 두 번 출력되는 문제가 있었다.

 

해결 방법

제일 이상적인 해결 방법으로는 인증 번호가 전송되는 시간을 줄이는 방법

• 내가 구현한 로직에서 걸리는 시간이랑 인증 번호를 전송하는 로직에서 걸리는 시간을 확인해봐야 한다.
• 인증 번호를 전송하는 로직은 외부 라이브러리에서 가져온 로직이라 해당 과정에서 시간이 오래 걸리는 것이라면 해결하기 힘들지도?

"인증번호가 전송되었습니다." 알림이 5초 뒤에 뜨는 방법 고수

• 최후의 보루. 사용자 경험이 너무 좋지 않다.

중복된 이메일로 가입하려고 하는 경우 두 번의 알림이 발생

• 현재 방식. 위의 방법보다 좋지 않아보인다.

아무래도 "인증번호가 전송되었습니다." 알림이 '인증번호가 제대로 전송되는 즉시' 출력되도록 하는 것이 제일 좋아보인다.

하지만 인증번호가 제대로 전송되기 위해서는 5초에 가까운 시간이 필요하니 '인증번호가 제대로 전송되지 않는 경우'가 아닌 경우 해당 알림이 출력되도록하는 로직을 고안해보자.

 

[리팩토링] 이메일 인증번호 전송 사용자 경험 개선 - 2