Optimistic UI

Optimistic UI

 

• Optimistic UI(낙관적인 UI ?)는 특정 요청이 성공 할 것이라 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다.
• 어떤 요청이 아주 높은 확률로 성공한다는 보장이 있을 때, 그리고 그 요청이 너무 늦지 않은 시간 안에 응답이 온다는 보장이 있을 때 사용할 수 있는 UI라고 생각하면 된다.

 

 

 

Optimistic UI - 세 UI의 이야기

 

세 UI는 술집에 간다. 첫 UI는 술을 한 잔 주문하고, 그 후로도 몇 번 더 주문한다.

몇 시간 후, 그는 계산을 하고 취해서 술집을 나선다.

또다른 UI는 한 잔을 시키면서 계산을 먼저하고, 이후로도 먼저 계산하고 마시기를 반복하다 취해서 술집을 나간다.

마지막 UI는 술집에 들어서자마자 취해서 바로 다시 나온다. - 그는 술집에서 늘 일어나는 뻔한 상황을 잘 알고 있으며, 시간을 낭비할 만큼 한가하지 않다.

└ 여기서, 마지막 UI가 바로 Optimistic UI이다.

 

 

 

Optimistic UI를 사용하는 이유

 

• 요청의 응답이 도착하기도 전에 미리 그 결과를 예측해서 보여주기 때문에 유저 입장에서는 마치 즉각적으로 응답이 오는 것처럼 느껴지게 된다.
• 이는 곧 사용자 경험에 긍정적인 영향을 준다.
• 대표적으로 페이스북의 좋아요 버튼이 Optimistic UI로 동작하고 있다.
  └ 좋아요 버튼을 누르는 순간 즉각적으로 UI에 변화가 반영되지만, 개발자 도구의 network 탭에서 확인해 보면 미묘하게 요청을 주고 응답을 받는 시간이 존재함을 알 수 있다.

 

 

주의사항

 

• Optimistic UI는 상당히 유용하지만 혹시 모를 에러 발생에 대비하는 로직은 반드시 구성해 두어야 한다.
• 요청이 정말 예기치 못한 상황으로 실패하는 경우가 있을 수 있기 때문에, 이에 대한 대비가 없을 경우 사용자 입장에서는 분명 요청이 성공한 것처럼 보였는데 실제로는 실패하는 어이없는 상황을 마주할 수 있기 때문이다.