Optimistic UI

hgb072082·2022년 3월 6일
0

Front-end

목록 보기
28/30

Optimistic UI

단어 그대로 낙관적으로 생각하는 UI입니다. 서버로부터 받는 응답이 대부분 오류가 나지 않을 것이다. 성공적일 것이다라고 가정하고 사용자에게 성공했을 때의 결과를 바로 보여주는 것이다.

  1. 사용자가 👍 버튼을 누른다.
  2. 좋아요 갯수가 1개 증가한 UI를 바로 보여준다,
  3. 서버에 mutation을 요청한다.
  4. 서버에서 응답을 받는다.

오류가 발생했을 경우

성공할거라고 예상했는데, 서버에서 뒤늦게 에러가 났다는 응답이 오면 어떻게 하는가?

💡 조용히 원래 상태로 되돌린다.

중고마켓에서 찜하기 버튼을 생각해보자.

  1. 사용자가 찜하기 🤍 버튼을 누른다.
  2. 💛 버튼 색상이 바뀌면서 찜이 되었음을 바로 알려준다.
  3. 서버에 요청한다.
  4. 서버에서 실패했다는 응답을 받는다.
  5. 조용히 찜하기 버튼의 🤍색깔을 변경한다.

이렇게 함으로써 에러가 났다는 경고창으로 인해 사용자는 뜬금없이 방해 받을 일도 없고, 색상이 다시 변경되었기 때문에 다시 시도 해야겠다는 생각을 자연스럽게 하게 된다.

profile
개발개발

0개의 댓글