앱을 켰는데 화면이 텅 비어 있습니다. 이게 고장 난 걸까요, 아니면 열심히 준비 중일까요? 이 짧은 순간, 우리는 은근히 초조해집니다.
그래서 잘 만든 서비스는 "지금 불러오는 중이에요"라고 꼭 알려줍니다. 빙글빙글 도는 동그라미, 회색 뼈대만 뜬 화면, 쭉 차오르는 막대까지. 다 비슷해 보이지만 쓰임새는 제각각이에요. 오늘은 이 로딩(loading·불러오기) 화면 장치 4가지를 하나씩 정리해 드립니다.
디자이너나 개발자와 이야기할 때 이 단어들이 자주 튀어나옵니다. 뜻만 알아도 대화가 훨씬 수월해져요. 지금부터 스피너, 스켈레톤, 프로그레스바, 스플래시를 순서대로 풀어 보겠습니다.
1. 스피너 (Spinner)
빙글빙글 도는 동그라미로 "지금 뭔가 하고 있어요"를 알리는 표시. 신호등 옆에서 깜빡이는 불빛처럼, 멈추지 않았다는 신호예요.
스피너는 가장 흔한 로딩 표시입니다. 다만 얼마나 걸리는지, 무엇을 불러오는지는 알려주지 않아요. 그냥 "처리 중"이라는 뜻만 담깁니다. 그래서 오래 돌면 오히려 답답하게 느껴지기도 하죠. 로딩이 1초를 넘길 것 같다면 스피너보다 다른 방법이 낫습니다.
이럴 때 써요: 버튼을 눌러 저장할 때, 결제처럼 시간이 들쭉날쭉한 짧은 작업에 잠깐 띄웁니다.
2. 스켈레톤 (Skeleton)
들어올 내용의 자리를 회색 뼈대로 미리 보여주는 화면. 밥상을 차리기 전에 수저부터 딱딱 놓아두는 것과 같아요.
스켈레톤은 '뼈대'라는 뜻입니다. 글과 사진이 들어올 위치를 회색 네모와 동그라미로 먼저 그려 둬요. 사용자는 "아, 여기 목록이 뜨겠구나" 하고 미리 짐작하게 됩니다. 화면이 갑자기 확 바뀌지 않으니 체감 속도가 더 빠르게 느껴지죠. 요즘 앱의 피드나 목록 화면에서 자주 볼 수 있습니다.
이럴 때 써요: SNS 피드, 뉴스 목록처럼 화면 구조가 정해진 콘텐츠를 불러올 때 씁니다.
3. 프로그레스바 (Progress Bar)
0%에서 100%까지 차오르는 막대. 라면 타이머처럼 "얼마나 남았는지"를 눈으로 보여줘요.
프로그레스바는 진행률(進行率)을 숫자와 막대로 보여줍니다. 스피너와 가장 큰 차이가 바로 이 점이에요. 끝이 보입니다. 파일이 몇 % 올라갔는지 알면 사용자는 끝까지 기다릴 마음이 생기죠. 그래서 시간이 오래 걸리고, 그 시간을 가늠할 수 있는 작업에 어울립니다.
이럴 때 써요: 사진 업로드, 파일 다운로드, 앱 설치처럼 진행 정도를 잴 수 있을 때 씁니다.
4. 스플래시 (Splash)
앱을 켜면 처음 잠깐 뜨는 브랜드 화면. 영화가 시작되기 전 제작사 로고가 스치는 그 순간과 비슷해요.
스플래시는 앱이 켜지며 준비하는 몇 초를 채워 주는 첫 화면입니다. 보통 로고나 브랜드 이름이 가운데에 뜨죠. 텅 빈 흰 화면을 보는 것보다 기다림이 덜 지루하게 느껴집니다. 다만 볼거리 없이 너무 오래 붙잡아 두면 그것대로 불만이 쌓입니다(로고를 3초씩 감상하고 싶은 사람은 별로 없으니까요).
이럴 때 써요: 앱을 처음 실행하며 데이터를 준비하는 동안, 브랜드를 짧게 각인시킬 때 씁니다.
자주 묻는 질문
스피너와 스켈레톤, 언제 뭘 써야 하나요?
불러올 화면의 모양이 정해져 있다면 스켈레톤이 유리합니다. 목록이나 피드처럼 자리가 뻔한 화면이 그렇죠. 반대로 버튼 저장처럼 짧고 구조를 그리기 애매한 작업에는 스피너가 간편합니다.
프로그레스바는 꼭 정확한 %를 보여줘야 하나요?
가능하면 실제 진행률에 맞추는 편이 좋습니다. 막대는 다 찼는데 화면은 그대로면 신뢰가 확 떨어지기 때문이에요. 진행 정도를 재기 어려운 작업이라면 차라리 스피너를 쓰는 게 정직한 선택입니다.
스플래시 화면은 길수록 좋은가요?
아닙니다. 스플래시는 브랜드를 잠깐 보여주는 용도이지, 일부러 시간을 끌라는 장치가 아니에요. 준비가 끝나면 바로 다음 화면으로 넘어가는 것이 가장 좋습니다. 억지로 늘린 스플래시는 사용자를 지치게 만듭니다.
이렇게 로딩 UI 4가지를 살펴봤습니다. 빙글빙글(스피너), 뼈대(스켈레톤), 막대(프로그레스바), 첫 화면(스플래시)만 기억해도 화면을 보는 눈이 한결 밝아질 거예요. 이번 글로 화면 UI 묶음이 마무리됩니다. 다음 편부터는 팀이 '일하는 방식'으로 넘어갈게요. 애자일, 워터폴, 스크럼, 스프린트, 칸반, 이터레이션. 회의 때 자주 들리지만 막상 설명하려면 막막한 그 단어들을 쉽게 풀어 드리겠습니다.
이 시리즈의 다른 글
- 메뉴 아이콘 이름 4가지 — 햄버거·케밥·미트볼·도너, 왜 다 음식일까요?
- 알림 UI 용어 6가지 — 팝업·모달·얼럿·토스트·스낵바·바텀시트 뜻
- 화면 영역 용어 6가지 — 헤더·푸터·GNB·LNB·탭바·브레드크럼 뜻
- 입력 컨트롤 용어 8가지 — 라디오·체크박스·토글·드롭다운 뜻
참고 출처: Skeleton Screens vs. Progress Bars vs. Spinners — Nielsen Norman Group