안녕하세요 조상원입니다. 안드로이드에서 로딩을 시각화 하면서 배운 내용을 소개하겠습니다.
스켈레톤UI란
스켈레톤UI는 웹 및 모바일 앱에서 로딩 중에 사용자 경험을 향상시키기 위한 디자인 패턴 중 하나입니다.
사용자에게 데이터가 로딩되고 있는지 시각적으로 알려줌으로써 지루함을 덜 느끼고 페이지가 어떻게 보일지에 대한 감을 잡을 수 있게 도와줍니다.
스켈레톤 UI의 장점
- 스켈레톤 UI는 사용자에게 로딩 화면 없이 데이터가 표시되기를 기다리는 것으로 인한 긴장감을 줄이며 작동하지 않는 것으로 오해하는 것을 방지합니다.
- 사용자는 앱이 어떤 일을 하고 있는지 알고 싶어합니다. 스켈레톤UI는 데이터가 로딩 중임을 시각적으로 나타내어 긴 로딩 시간의 인내심을 줄입니다.
MVVM 아키텍쳐에 스켈레톤 UI 적용
- MVVM 아키텍처에서 뷰모델은 데이터를 관리하고 뷰에 전달하는 역할을 합니다. 스켈레톤UI를 표시하기 위해 데이터 로딩 상태를 뷰모델에서 관리합니다.
- 뷰모델 내에서 로딩 상태를 나타내는 변수를 유지하고, 서버로 요청을 보내기 전과 응답을 받은 이후 로딩 상태에 따라 스켈레톤 UI를 표시하거나 실제 데이터를 표시합니다.
- 서버로부터 응답을 받은 후 뷰모델의 데이터를 업데이트 합니다.
- 뷰는 뷰모델의 데이터 상태에 따라 자동으로 업데이트됩니다. 로딩이 완료되면 스켈레톤UI가 숨겨지고 실제 데이터가 표시됩니다.
