스켈레톤 UI는 실제 데이터를 불러오기 전, 보이게 될 화면의 윤곽을 먼저 그려주는 로딩 애니메이션입니다. 데이터를 가져오고 있으며, 어떤 모습으로 보일지 미리 보여줘 사용자의 이탈을 막는 효과가 있는데요. 오늘 소개할 서비스는 다양한 종류의 스켈레톤 UI 샘플을 확인할 수 있는 곳으로, SVG를 복사해 바로 적용하거나 다운로드하여 활용할 수 있습니다.
스켈레톤 UI 리스트를 확인하기 전, 검색을 통해 (버튼, 인풋 등) 원하는 스켈레톤 UI를 먼저 찾아볼 수 있으며, 기본 적용되어 있는 다크모드를 라이트모드로 변경하거나 컬러를 바꿔 샘플을 확인할 수 있습니다. 단순 샘플만 볼 수 있다면 더 구체적인 내용은 직접 적용하는 등의 과정을 거쳐야 하는데, 이곳에서는 컬러 변경은 물론 다크/라이트 모드에 적용되었을 때의 모습도 바로 살펴볼 수 있어 편리합니다.
아바타, 리스트 오픈, 리스트 닫기, 버튼, 인풋 활성화 등에 해당하는 스켈레톤 UI 샘플입니다. 상단 ‘기본 구성’과 같이 일정한 주제에 따라 스켈레톤 UI를 확인할 수 있는 모습입니다.
이어서 헤딩/텍스트 영역과 카드/선택 영역에 해당하는 스켈레톤 UI를 확인할 수 있는데요. 자세히 확인하거나 적용해보고 싶은 샘플은 마우스를 가져다 대 다운로드 버튼, SVG 복사 버튼을 클릭해 활용할 수 있습니다. 일정한 화면에 적용된 모습까지 상세화면에서 볼 수 있으면 했는데 아쉽게도 리스트에서 확인하는 것이 전부입니다.
리뷰와 미디어 파일에 해당하는 스켈레톤 UI도 다양하게 준비되어 있는데요. 하나만 제공되는 것이 아니라 동일한 영역이나 상황에 대한 스켈레톤 UI를 여럿 살펴볼 수 있다는 점이 좋습니다.
앞서 말씀드린 것처럼, 검색창 우측 컬러 버튼을 통해 원하는 색이 덧씌워진 스켈레톤 UI를 확인할 수 있으며 다크모드와 라이트모드를 스위칭해 샘플을 확인할 수 있으니, 적용 전 조건에 맞는 충분한 확인이 가능하지 않을까 싶네요! 스켈레톤 UI 샘플은 이곳을 통해 더 자세히 확인하실 수 있어요!
한성규님의 ‘지금 써보러 갑니다‘에 게재된 글을 모비인사이드가 한 번 더 소개합니다.
