디자인 오픈북

로딩과 진행 표시

스피너, 진행 막대, 스켈레톤은 언제 각각 쓰나요? 남은 시간을 모르면 스피너, 진행률을 알면 진행 막대, 1~3초보다 길거나 화면 전체를 불러올 때는 스켈레톤을 씁니다.

기다림과 진행 상황을 보여 주는 막대와 점들입니다. 무엇을 기다리는지에 따라 고르는 게 다릅니다.

이름과 미리보기

미리보기를 누르면 멈추고, 다시 누르면 재생합니다.

  1. 스피너

    Spinner

    빙글빙글 도는 표시. 얼마나 남았는지 모를 때

  2. 진행 막대

    Progress bar

    몇 % 끝났는지 알 때 차오르는 막대

  3. 스켈레톤

    Skeleton screen

    내용 자리를 회색 덩어리로 먼저 그려 두는 로딩

  4. 스텝 인디케이터

    Step indicator

    1단계 → 2단계 → 3단계 중 지금 위치

  5. 스토리 바

    Story progress bar

    조각으로 나뉜 막대. 여러 장을 차례로 넘길 때

  6. 읽기 진행 바

    Reading progress bar

    글을 얼마나 읽었는지 맨 위에 차오르는 선

  7. 강도 표시기

    Password strength meter

    비밀번호가 얼마나 안전한지 칸이 차는 표시

  8. 홈 인디케이터

    Home indicator

    아이폰 맨 아래 가로 막대. 진행 표시가 아니라 제스처 손잡이

이렇게 씁니다

  • 1초 안에 끝나면 아무것도 띄우지 않습니다. 1~3초는 스피너, 그보다 길거나 화면 전체를 불러올 때는 스켈레톤을 씁니다.
  • 결제·가입처럼 3단계 이상 이어지는 흐름은 스텝 인디케이터로 "지금 몇 번째, 몇 개 남았는지"를 보여 줍니다.
  • 홈 인디케이터 바로 위에는 버튼을 두지 않습니다. 쓸어 올리는 제스처와 겹칩니다.

복사해서 쓰는 프롬프트

3단계 결제

결제 화면을 3단계로 만들어 줘: 배송지 → 결제 수단 → 확인.
- 맨 위에 스텝 인디케이터(Step indicator). 지난 단계는 체크, 현재 단계는 강조, 남은 단계는 흐리게.
- 다음 단계 데이터를 불러오는 동안 스켈레톤(Skeleton screen)을 보여 줘.
- 결제 버튼을 누르면 버튼 안에 작은 스피너(Spinner)를 넣고 버튼은 비활성화.

참고한 게시물: @uxwoodytips, @ui_motion_prompts

전체 카드 보기 (27)