로딩

정의

로딩은 화면이 지금 무언가를 불러오는 중이라는 사실을 사용자에게 알려 주는 상태입니다. 빙글빙글 도는 스피너를 보여 주거나, 실제 콘텐츠가 들어올 자리에 회색 뼈대만 미리 깔아 두는 스켈레톤을 써서 곧 내용이 채워질 것임을 예고합니다. 데이터를 서버에서 받아오는 동안 화면을 텅 빈 백지로 두면 사용자는 멈춘 건지 고장 난 건지 알 수 없어 불안해집니다. 로딩 표시는 바로 그 빈 시간을 채워, 지금 열심히 일하는 중이니 조금만 기다려 달라는 신호를 대신 전해 줍니다. 목록을 불러올 때, 화면을 처음 열 때, 버튼을 눌러 저장할 때처럼 결과가 곧바로 나오지 않는 거의 모든 자리에 이 로딩 표시가 자리합니다.

왜 중요한가

사람은 화면이 반응 없이 멈춰 있으면 실제 걸린 시간보다 훨씬 더 길고 답답하게 느낍니다. 아무 표시 없는 몇 초는 영원처럼 느껴져, 사용자는 새로고침을 누르거나 아예 창을 닫아 버리기도 합니다. 로딩 상태는 이 불안을 다스리는 장치입니다. 무언가 진행되고 있다는 시각적 신호만 있어도 사람은 훨씬 참을성 있게 기다립니다. 특히 스켈레톤은 최종 화면이 어떤 모양으로 채워질지 미리 보여 주기 때문에, 실제 속도는 같아도 체감 속도가 눈에 띄게 빨라집니다. 결과가 언제 올지 예측 가능해지는 것만으로 기다림의 질이 달라지는 셈입니다. 반대로 로딩 표시가 없으면 아무리 서버가 빨라도 화면이 굼뜨고 미덥지 않다는 인상을 줍니다. 결국 로딩 상태는 실제 성능을 넘어, 사용자가 기다림을 어떻게 느끼는가 하는 체감의 문제를 다루는 장치인 셈입니다. 같은 3초라도 잘 설계된 로딩 앞에서는 짧게 느껴지고, 아무 표시 없는 정적 앞에서는 하염없이 길게 느껴집니다.

흔한 실수

• 아주 짧은 대기에까지 로딩 표시를 띄우는 것입니다. 0.1초 만에 끝날 일에 스피너가 번쩍 깜박이면 오히려 화면이 지저분하고 불안정해 보입니다. 눈에 거슬리는 깜박임만 남습니다.
• 1초 넘게 걸리는데도 아무 표시 없이 화면을 그대로 두는 것입니다. 사용자는 멈춘 줄 알고 같은 버튼을 다시 누르거나 이탈해 버립니다.
• 스켈레톤의 모양이 실제 콘텐츠와 전혀 다른 것입니다. 뼈대와 실제 화면의 크기나 위치가 어긋나면, 내용이 들어오는 순간 레이아웃이 덜컹 튀어 오히려 어수선해집니다.

실무 팁

• 대기가 짧고 결과 위치를 예측하기 어려울 땐 스피너를, 들어올 콘텐츠의 자리가 분명할 땐 스켈레톤을 쓰세요. 스켈레톤은 최종 모습을 미리 보여 줘 체감 속도를 눈에 띄게 높입니다.
• 1초 이상 걸리는 작업에는 반드시 로딩 표시를 두되, 아주 짧은 대기에는 굳이 띄우지 마세요. 잠깐 사이의 깜박임은 오히려 화면을 불안정해 보이게 만듭니다.
• 스켈레톤의 크기와 배치는 실제 콘텐츠와 최대한 똑같이 맞추세요. 자리가 정확히 예약되어 있어야 내용이 채워질 때 레이아웃이 튀지 않고 매끄럽게 이어집니다.

관련 개념