skeletonView

UI는 데이터에 의존적입니다. 쉽게 말해, 우리가 간단한 텍스트를 표시하는 뷰를 하나 만든다고 가정하겠습니다. 이 뷰는 특정 버튼의 클릭에 의해 로딩되며, 이때 텍스트는 API 호출의 결과입니다.

이때 버튼의 클릭이 트리거가 되어, 텍스트 데이터에 대한 API 요청과 화면 전환이 같이 이루어진다고 가정해보겠습니다. 우리가 접근할 수 있는 방식은 2가지 입니다.

1. 로딩 인디케이터 등을 통해 API 요청 응답이 오기 까지 기다리고, 응답이 오면 즉시 화면을 전환한다.
2. 응답 여부와 무관하게 화면은 넘기고, 응답이 오면 데이터를 UI 뿌려준다.

1번의 방식은 비교적 과거에 유행했던 방식이며, rx를 통한 비동기 프로그래밍이 대세가된 지금은 많은 서비스에서 2번을 사용하고 있습니다. 이때, 한 가지 문제가 발생합니다.

<aside> 💡

“빠른 화면 전환은 사용자에게 좋은 경험이나, 비동기적인 API 응답이 오기전 까지는 데이터가 없는데 UI 적으로 어떻게 대응하지?”

</aside>

이때, skeletonView를 사용한다면

1. 즉각적인 화면 전환을 통한 사용자 만족
2. API 응답이 오기 전까지는 ‘로딩 중’이라는 UI를 적용하면서, 사용자에게 혼란을 주지 않음

과 같은 2마리 토끼를 잡을 수 있습니다.

서두가 길었는데 그냥 요약하자면ㅋㅋ “일단 넘겨버리고, 응답이 오지 않았다면 로딩 상태를 표기하자”가 될 수 있습니다. 이런 상황에서 자주 사용되는 것이 skeletonView입니다.

linesCornerRadius과 skeletonCornerRadius