# 로딩을 위한 UX 디자인 패턴

> Clean Markdown view of GeekNews topic #10588. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=10588](https://news.hada.io/topic?id=10588)
- GeekNews Markdown: [https://news.hada.io/topic/10588.md](https://news.hada.io/topic/10588.md)
- Type: news
- Author: [kuroneko](https://news.hada.io/@kuroneko)
- Published: 2023-08-28T12:30:47+09:00
- Updated: 2023-08-28T12:30:47+09:00
- Original source: [pencilandpaper.io](https://pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback/)
- Points: 50
- Comments: 3

## Topic Body

- 로딩 화면은 시스템이 하는 일에 대한 가시성을 제공하여 사용자 경험을 향상 시킬수 있음.  
- 적절한 로딩 화면을 만들기 위해 고려해야 할 사항이 몇 가지 있음.  
  - 디자인에 앞서 로딩 시스템을 확인해야 함.  
  - 로딩이 사용자의 입력을 차단하는지, 진행률을 알 수 있는지, 얼마나 많은 정보를 불러오는지, 모바일 경험은 어떤지 등.  
  - 패시브 로딩(시스템이 미리 불러오는 것)인지, 티브 로딩(사용자의 행동에 따라 불러오는 것)인지 등.  
- 한 번에 보여주는 양에 따른 변화  
  - 복잡한 구성 요소의 경우 하나씩 보여주는 게 좋을 수 있음.  
  - 비교적 간단한 구성 요소의 경우 로드가 완료된 후 한 번에 표시하는 게 좋음.  
  - 구성 요소의 수가 많으면 지연 로딩이 필요함.  
    - 무한 스크롤, 더 보기 버튼, 페이징 등의 접근 방식 활용.  
- 빈도에 따른 변화  
  - 계속 변경되는 경우, 로딩을 보여주는 UI를 최소화해야 함.  
    - 구글 드라이브가 실시간 저장되는 UI를 참고.  
  - 가끔 변경되는 경우 즉시 사용자에게 보여주는게 좋음.  
    - 보고 있는 콘텐츠가 업데이트 되었으니, 화면을 새로고침 하라는 팝업 등.  
- 소요 시간에 따른 변화  
  - 진행률을 명확하게 알 수 있는지, 아니면 불확실한지 먼저 검토해야 함.  
  - 0.1초 이하인 경우  
    - 즉시 결과를 보여주면 됨.  
    - 몇몇 경우에는 가짜 로딩 화면을 보여주는 게 더 좋을 수 있음.  
    - 사용자가 느끼기에 중요한 작업이거나 (저장 등), 사용자가 액션을 취할 수 있는 지연 시간이 필요한 경우 (메일 전송의 되돌리기 버튼 등).  
  - 0.1초 ~ 1초 사이인 경우  
    - 아주 흔한 지연 시간이고, 사용자의 눈에 띄지 않으므로 로딩 화면을 추가하지 않는 게 좋음.  
  - 1초 이상인 경우  
    - 1초를 넘기는 순간 사용자가 대기 시간을 인지하게 되므로, 적합한 로딩 화면을 추가하는 게 좋음.  
    - 로딩되는 구성 요소가 작은 경우 로딩 스피너가 좋은 선택. (파일 업로드 등)  
    - 화면이 바뀌는 경우 스켈레톤 로딩 화면이 좋음.  
    - 이미지가 핵심 콘텐츠인 경우 주요 색상을 추출하여 흐리게 처리하면 아주 좋음.  
  - 2초 ~ 10초 사이인 경우  
    - "5초 가량 소요됩니다" 와 같은 시간표시기가 효과적일 수 있음.  
    - 진행 표시줄은 항상 좋은 선택임.  
    - 몇 가지 단계로 구성된 경우, 해당 단계를 보여주는 것도 방법.  
      - 명확한 단계가 없는 경우에도 일반적인 메시지를 사용할 수 있음. (서버 연결 중 등)  
  - 10초 이상 걸리는 경우  
    - 진행률을 명확하게 알 수 있는 경우 퍼센트와 남은 시간 등을 표시해주는 게 좋음. (파일 업로드의 50% 등)  
      - 단 99%에서 멈추는 것은 매우 치명적이므로 이런 경우가 발생할 수 있으면 다른 방법을 사용해야 함.  
    - 더 오래 걸리는데 진행률을 명확하게 알 수 없으면, 작업이 완료되면 이메일 등으로 알려주겠다고 하고 사용자가 제어할 수 있도록 하면 좋음.  
    - 아예 백그라운드에서 작업이 되면서 사용자의 모든 행동을 방해하지 않는 것도 좋음. (구글 드라이브의 업로드 진행 상태 등)

## Comments



### Comment 18952

- Author: thenewseason
- Created: 2023-09-05T10:27:31+09:00
- Points: 1

좋은 글 감사합니다.  
  
- 즉시 처리되는 요청도 경우에 따라 로딩을 잠깐 보여주는게 더 좋다.  
- 0.1~1초 는 로딩을 안보여주는게 낫다.   
  . 저는 250ms 까지는 안보여주는데 이게 1초까지 늘어나도 괜찮을지는 모르겠네용  
- 1초 이상은 화면이 바뀌는 경우 스켈레톤, 아닌 경우 스피너를 사용

### Comment 18667

- Author: rlwnd1104
- Created: 2023-08-28T15:07:09+09:00
- Points: 1

오 로딩화면에 대한 근거를 찾고있던 중이었습니다! 감사합니다 ㅎㅎㅎ

### Comment 18663

- Author: kuroneko
- Created: 2023-08-28T12:32:05+09:00
- Points: 1

- [HN 스레드](https://news.ycombinator.com/item?id=37274610)  
  
요약이 너무 길어진 것 같네요... 아무튼 좋은 내용이 많아서 최대한 들고 왔습니다.  
  
가짜 로딩 화면이 있으면 더 신뢰성이 올라간다는 내용이 흥미롭네요. 헤커 뉴스 쪽에서도 그 주제를 꽤 말하더군요.