모바일 앱 UI를 업데이트 순서

Question

모바일 앱을 개발하다가 랜더링 그러니까 UI를 업데이트하는 순서가 궁금해서 질문을 올려봅니다.

예를 들어 사용자가 게시글에 좋아요를 누른다고 했을 때 다음과 같은 방법 중에서 어떤 방법을 사용해야 하는지 궁금합니다..! 특히 현업에서는 어떤 방법을 사용하는지 왜 그렇게 사용하시는지 궁금합니다😄

1) 디바이스 로컬 UI 업데이트, 동시에 서버 데이터 업데이트. 서버 업데이트가 완료 되면 서버 데이터로 UI 반영.

2) 디바이스 로컬 UI 업데이트, 동시에 서버 데이터 업데이트. 그러나 서버 업데이트 데이터는 UI에 바로 반영하지 않음. 사용자가 앱을 다시 실행하거나 refresh되는 상황에서 나중에 서버 데이터를 반영할 것으로 기대.

3) 서버 데이터를 업데이트, 서버 데이터가 업데이트 되면 해당 데이터로 UI 업데이트.

4) 디바이스 로컬 UI 업데이트, 서버 데이터는 바로 업데이트 하지 않음. 나중에 서버 데이터는 업데이트 하기.

제가 이 고민을 하게 된 이유가, 게시물에 좋아요를 누르는 상황에서 비롯되었습니다. 처음에는 (3)번 방법을 사용했습니다. 하지만, 좋아요를 누르고 서버에 업데이트 되는데 약 0.5~1s 정도 UI가 지연되어서 불편하더군요. 그래서 (1)번 방법으로 변경했습니디. 사용자가 일단 좋아요를 누르면 디바이스에서 좋아요를 토클하고, 나중에 업데이트가 완료된다면 반영하는 방식으로요. 그런데 (1)번 방법도 사용자가 빠르게 좋아요를 2번 누른 상황에서, 좋아요가 표시되고 바로 해제가 안되는 (서버에서 좋아요를 눌렀다는 업데이트로 인해서 나중에 해제가 됩니다) 문제가 있습니다 ㅠㅠ.

다른 분들의 의견이 궁금합니다🔥

포크코딩 · Answer

답변: (2)번 방식과 (4)번 방식을 혼용

# 왜 (2)번 방식이 필요한가?
- 금지된 콘텐츠나 정보가 서버로부터 퍼지는 것을 방지(ex, 야한 사진 등)
- 액션 순서 보장 | 서버가 분산 시스템이 될 경우에 특정 액션들에 대해서 순서를 보장해줄 필요가 있음
- 캐시 최적화 | 서버에서 무엇을 캐싱할 것인지 판단하는 순간이 필요함

# 왜 (4)번 방식이 필요한가?
- 인터넷 오프라인 | 모바일 디바이스들은 오프라인 상태가 될 수 있는 경우가 있음. 해당 상황을 어느 정도 대비 해둬야 함. UX 원칙에 따라 피드백은 필요하니 일단 로컬 UI로만 업데이트 후, 서버랑 통신 진행
- 인간인지 체크하기 | 봇이나 자동화된 브라우저가 진행했을 가능성을 염두해 둬야 함.
- 통계 데이터 수집을 위한 대기 | 어떤 게시글에 좋아요를 누르고 다음에 어떤 게시글을 클릭하는지 같은 것은 추천 시스템이나, 개인화 알고리즘을 위한 좋은 자료이기 때문에 수집하는 경우가 많음. 이때 클라이언트에서 해당 이벤트를 대기하는 동작이 필요.

# (1)번과 (3)번은 쓸모가 없는가?

(1) -> 주로 리얼타임 시스템이나 서비스 등에서 사용
(3) -> 알람 서비스 등에서 사용