사용자경험 개선을 위해 Optimistic UI를 적용 해봤습니다 !

Optimistic UI란?

Optimistic UI는 서버의 응답을 기다리지 않고, UI를 먼저 업데이트 하는 디자인 패턴입니다.

Optimistic UI를 사용하는 이유

예를 들어, 좋아요 이벤트를 생각해보겠습니다.

일반적인 경우 사용자가 좋아요를 클릭하게 되면, 프론트엔드에서는 데이터 저장을 위해 서버로 요청을 보내고 요청이 성공한 것을 확인 한 후, UI를 업데이트 해줍니다.

네트워크 환경이 원활한 경우에는 서버에 요청하는 시간이 짧아, 크게 문제가 없어 보일 것입니다.

하지만 네트워크 환경이 좋지 않은 곳에서는, 서버 요청시간이 길어지고 UI업데이트 지연이 발생해 사용자에게 렉이 걸린듯한 안좋은 경험을 줄 수 있습니다.

이러한 경험은 .. 사용자가 뒤로가기를 누르게 만들곤 하죠 ㅠㅠ..

Optimistic UI를 적용하면, 서버요청을 기다리지 않고 UI를 바로 업데이트 해주기 때문에,

UI업데이트 지연을 방지하고, 좋은 사용자 경험을 줄 수 있습니다.

저는 이번에.. 출근길 지옥철에서 저의 어플을 직접 사용해보면서.. UI지연현상이 일어나는 것을 확인하고, 고민끝에 Optimistic UI를 적용하게 되었습니다.

아래 이미지는 제 프로덕트에 Optimistic UI 를 적용하기 전,후를 비교한 영상입니다.

*테스트는 인터넷이 매우느린 Slow 3G 환경에서 진행했습니다.

Optimistic UI 적용 전 - 저장을 클릭하고 한참 뒤에, UI가 변경되는 것을 확인 할 수 있습니다.

Optimistic UI 적용 후 - 저장을 클릭함과 동시에 UI가 업데이트 됩니다.

Optimistic UI 주의사항

Optimistic UI를 적용하게 될 경우, 데이터 성공여부를 기다리지 않기 때문에 서버와 클라이언트간에 데이터 불일치 현상이 발생 할 수 있습니다.

이러한 문제를 해소하기 위해, 데이터 요청이 실패할 경우 UI를 롤백 시키는 방법이 있긴 하지만 데이터 불일치 현상을 100% 커버할 수 있다고 보기는 어렵습니다.

그렇기 때문에 Optimistic UI 를 적용할 경우, 데이터 신뢰성과 사용자 경험개선간 트레이드오프에 대해 고민하고 선택해야 할 것 같습니다.

저는 고민끝에, Optimistic UI를 적용하게 되었는데, 여러분은 어떤 방식을 더 선호하시나요!?