최근 진행하는 프로젝트에 맛집 좋아요 기능이 있습니다.
정석적인 방법으로 좋아요 기능을 구현하면 아래와 같은 흐름입니다.
1. 사용자가 좋아요 버튼 클릭
2. 서버에 신호 전달
3. 서버에서 다시 클라이언트로 응답 전달
4. 응답 결과에 따른 컴포넌트 렌더링
이러한 과정은 안정적이지만 사용자 측면에서 부정적인 영향을 줄 수 있습니다. 사용자가 위 과정을 모두 거치기까지 기다려야만 버튼의 변화를 볼 수 있고, 서버 응답시간이 길어질수록 사용자는 더욱 긴 시간을 써야합니다.
이때 사용하는 개념이 바로 Optimistic UI입니다.
Optimistic UI란?
Optimistic UI란 실패할 확률이 거의 없는 요청에 대해 문제 없이 데이터를 받아오는 것을 가정하고, 유저에게 이미 성공한 화면을 보여주는 것입니다.
대표적인 예로 좋아요, 북마크 기능 등이 있습니다.
Optimistic UI를 적용하게 되면 아래와 같은 흐름이 진행됩니다.
1. 사용자가 좋아요 버튼 클릭
2. 클라이언트 단에서 좋아요 성공을 가정하고 화면 렌더링
3. 서버에 신호 전달
4. 서버에서 다시 클라이언트로 응답 전달
5. 만약 실패 시 클라이언트는 다시 되돌리기
사용자는 버튼을 누르자마자 결과 화면을 볼 수 있기 때문에 사용자 경험이 매우 향상됩니다.