프로토파이 스켈레톤 ui 샘플 이미지

스켈레톤 ui, 로딩 속도를 심리적으로 빠르게 – 강좌

해당 강좌는 유튜브 멤버십 회원 전용 강좌입니다.

바로 구독하기

프로토파이로 스켈레톤 UI를 만들어 보도록 할게요. 실제 데이터가 렌더링 되기 전, 보일 화면의 윤곽을 먼저 그려서 사용자 입장에서 어떤 화면이 그려질지 예측할 수 있게 됩니다. 그리고 같은 속도의 로딩이라도 단순 회전 로딩과 비교하면 심리적으로 훨씬 빠르게 느낄 수 있습니다.

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

핵심 요약

여러분들이 가장 많이 사용하는 유튜브, 페이스북, 링크드인, 구글 드라이브 등 다양한 곳에서 사용하고 있습니다. 주로 무거운 이미지나 영상을 불러오거나 데이터를 복잡한 로직에 의해 계산되는 영역에 사용하면 좋습니다.

스켈레톤 ui를 사용하는 웹사이트 예시