[UIKit] UILabel에 skeletonView 적용하기

lyoodong's avatar
lyoodong
Sep 01, 2024
[UIKit] UILabel에 skeletonView 적용하기
Contents

skeletonView

UI는 데이터에 의존적입니다. 쉽게 말해, 우리가 간단한 텍스트를 표시하는 뷰를 하나 만든다고 가정하겠습니다. 이 뷰는 특정 버튼의 클릭에 의해 로딩되며, 이때 텍스트는 API 호출의 결과입니다.
 
이때 버튼의 클릭이 트리거가 되어, 텍스트 데이터에 대한 API 요청과 화면 전환이 같이 이루어진다고 가정해보겠습니다. 우리가 접근할 수 있는 방식은 2가지 입니다.
 
  1. 로딩 인디케이터 등을 통해 API 요청 응답이 오기 까지 기다리고, 응답이 오면 즉시 화면을 전환한다.
  1. 응답 여부와 무관하게 화면은 넘기고, 응답이 오면 데이터를 UI 뿌려준다.
 
1번의 방식은 비교적 과거에 유행했던 방식이며, rx를 통한 비동기 프로그래밍이 대세가된 지금은 많은 서비스에서 2번을 사용하고 있습니다. 이때, 한 가지 문제가 발생합니다.
 
💡
“빠른 화면 전환은 사용자에게 좋은 경험이나, 비동기적인 API 응답이 오기전 까지는 데이터가 없는데 UI 적으로 어떻게 대응하지?”
 
이때, skeletonView를 사용한다면
  1. 즉각적인 화면 전환을 통한 사용자 만족
  1. API 응답이 오기 전까지는 ‘로딩 중’이라는 UI를 적용하면서, 사용자에게 혼란을 주지 않음
과 같은 2마리 토끼를 잡을 수 있습니다.
 
서두가 길었는데 그냥 요약하자면ㅋㅋ “일단 넘겨버리고, 응답이 오지 않았다면 로딩 상태를 표기하자”가 될 수 있습니다. 이런 상황에서 자주 사용되는 것이 skeletonView입니다.

linesCornerRadius과 skeletonCornerRadius

적용한 skeletonView에 cornerRadius를 적용하기 위해서 일반적으로 skeletonCornerRadius 프로퍼티를 이용합니다. 하지만, Label과 같이 다수의 line이 있는 컴포넌트에 대해서는 linesCornerRadius를 적용해야 우리가 원하는 UI를 얻을 수 있습니다. 
// 텍스트 기반 컴포넌트
label.linesCornerRadius = 10

// 일반적인 컴포넌트
view.skeletonCornerRadius = 10
 
github 이슈나 stack overflow 를 뒤져보니 과거에는 이 기능이 제공되지 않아, 여러 트릭이 존재했던 것 같습니다. 현재는 업데이트가 되어, 해당 기능을 사용할 수 있으니 다행이라는 생각이 드네요. 감사합니다.
 
[출처]
https://github.com/Juanpe/SkeletonView/blob/main/Translations/README_ko.md#-multiline-text
 
Share article

More articles

See more posts

[iOS] 앱이 종료되는 시점에 API 요청하기

lyoodong's avatar
August 6, 2024
[iOS] 앱이 종료되는 시점에 API 요청하기

[iOS] NavigationItem과 NavigationBar의 차이

lyoodong's avatar
May 21, 2024
[iOS] NavigationItem과 NavigationBar의 차이
RSSPowered by inblog