로딩 중에도 자리 잡힌 화면 · Skeleton

본문이 올 자리에 뼈대 모양을 먼저 보여주는 로딩 UI

조회 0추천 0

직접 만든 예시

[목록 화면]의 로딩 상태를 실제 카드와 같은 크기의 스켈레톤으로 만들어줘. 완료 후 레이아웃이 튀지 않게 하고, 오류가 나면 재시도 버튼을 보여줘. 모션 감소 설정도 존중해줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 불러오는 중 표시를 넣어줘.

카드 자리 유지 → 1초 뒤 내용 표시 / 실패 모드에서는 재시도

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

빈 화면이나 회전 아이콘만 보일 때보다 어떤 내용이 나타날지 알 수 있습니다. 로딩·성공·오류 상태를 함께 요구해 빠진 상태를 줄입니다.

전문 용어를 활용해 mouseco가 작성한 문구입니다. 출처는 용어와 기법의 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Skeleton screen · 스켈레톤은 본문이 올 자리에 뼈대 모양을 먼저 보여주는 로딩 UI입니다.

막연한 요청을 구체적인 문구로

기존 요청: 불러오는 중 표시를 넣어줘.

[목록 화면]의 로딩 상태를 실제 카드와 같은 크기의 스켈레톤으로 만들어줘. 완료 후 레이아웃이 튀지 않게 하고, 오류가 나면 재시도 버튼을 보여줘. 모션 감소 설정도 존중해줘.

카드 자리 유지 → 1초 뒤 내용 표시 / 실패 모드에서는 재시도

예시는 위 기법을 보여주기 위해 직접 제작했습니다. 수치와 업무 상황은 가상이며 특정 모델의 성능 비교 결과가 아닙니다.

빈 화면이나 회전 아이콘만 보일 때보다 어떤 내용이 나타날지 알 수 있습니다. 로딩·성공·오류 상태를 함께 요구해 빠진 상태를 줄입니다.

적용할 때 확인할 점: 스켈레톤은 실제 처리를 빠르게 만들지는 않습니다. 진행률을 모르면 임의의 퍼센트를 표시하지 않습니다.