옵티미스틱 UI(optimistic UI) 란 무엇인가! 🤔

❗️❗️옵티미스틱 UI 

낙관적인 접근법을 사용하는 UI라고 함. 서버에서 응답을 요청하고 받을때 이것은 오류 절대 ㄴㄴ~~~! 백퍼 성공적임 이라고 가정하고 사용자에게 보여주는것을 말한다.

옵티미스틱UI를 사용하면 사용자들에게 더 좋은 환경을 제공할 수 있다!

인스타그램의 좋아요 기능으로 예를 들어보자

 

1. 일반적인 접근법 (옵티미스틱 UI 사용 X 🙅‍♂️)

1. 좋아요 클릭
좋아요 버튼을 눌렀을때 서버로 요청을 보낸다

2.로딩
요청보낸것을 응답받을때까지 기다림

3.좋아요 활성화
응답에 성공했으면 좋아요 버튼 활성화

단점: 사용자는 서버에 응답이 올때까지 기다려야함 UX가 상당히 저하
장점: 서버와 UI가 데이터가 항상 같다는게 보장되어 있음!

 

2. 낙관적 접근 (옵티미스틱 UI 사용 O 🙆‍♂️)

1. 좋아요 클릭
좋아요 버튼을 클릭! 서버로 요청을 보낸다

2.좋아요 활성화
UI를 먼저 업데이트 한 후 서버의 요청 기다림

단점: 오류 해결이 어렵다. 안정성이 떨어짐
장점: UI업데이트가 더 빠르기 때문에 사용자들이 상향된 UX를 느낄수 있음

🤷‍♂️ 만약 클릭했는데 요청에 실패했다????

이전 상태로 롤백해야 함.
사용자에게 알럿창으로 오류 결과를 보여주고 좋아요 버튼을 비활성화 상태로 돌려놓는다.

👉🏻👉🏻👉🏻👉🏻👉🏻👉🏻👉🏻
비교하자면 일반적인 접근법으론 요청을 했을때 api 호출이 일어나서 성공하면 사용자에게 성공한 UI를 보여주는것 이고 낙관적인 접근법으로 요청했을때는 성공한 UI를 먼저 보여주고 그 뒤에 호출의 결과를 얻는 것이다.

옵티미스틱UI를 사용하면 사용자의 경험을 줄 수 있다는 것이 큰 장점 같다. 하지만 데이터의 안정성이 필요하거나 요청실패의 확률이 높은경우엔 일반적인 접근방법을 사용하는 것이 좋을 것 같다.

 

https://medium.com/distant-horizons/using-optimistic-ui-to-delight-your-users-ac819a81d59a

Using optimistic UI to delight your users