웹페이지 로딩속도 개선 방법 - 스피너 대신 스켈레톤

웹사이트의 첫 인상은 “로딩 경험”이 결정합니다.
기존에는 단순 스피너(Spinner)만 보여주는 방식이었지만, 이번 개편을 통해 스켈레톤 UI(Skeleton UI) 로 전면 교체하며 사용자 경험(UX)이 크게 향상되었습니다.

아래는 변경 전·후를 시각적으로 정리한 비교입니다.

---

1. 변경 전: 스피너(Spinner)

사용자가 홈페이지에 접속하면, 공지사항 데이터가 완전히 로드될 때까지 아무 정보도 없이 단순 로딩 화면만 노출되었습니다.

 

 

📌 문제점

• 내용이 아무것도 보이지 않아 답답함
• 로딩이 얼마나 걸릴지 예측 불가
• 페이지가 멈춘 것처럼 착각하게 됨

---

2. 변경 후: 스켈레톤 UI

이제는 데이터가 도착하기 전에도 실제 레이아웃과 비슷한 구조를 회색 박스 형태로 미리 보여줍니다.

 

 

데이터가 로딩되면 자연스럽게 실제 콘텐츠로 채워집니다.

 

---

💡 스켈레톤 UI가 좋은 이유

1) 훨씬 빠르게 느껴진다

빈 화면보다 레이아웃이 보이는 상태가 사람들에게 “준비 중”이라는 신호를 주며,
체감 속도는 실제보다 2배 빠르게 느껴지는 경우도 많습니다.

2) 레이아웃 점프(Layout Shift)가 없다

스피너 방식은
→ “빈 화면 → 갑자기 콘텐츠 등장” 으로 레이아웃이 튀는 느낌이 있지만,

스켈레톤 UI는
→ “회색 박스 → 실제 내용 자연스러운 전환” 으로 훨씬 부드럽습니다.

3) 전문적이고 현대적인 UX

YouTube, Instagram, Facebook 등 모든 대형 서비스가 채택하고 있는 방식입니다.
사용자가 “이 사이트 잘 만든 사이트네”라고 느끼는 핵심 포인트가 됩니다.

---

🎨 구현 코드 예시 (React + Tailwind CSS)

 

// 공지사항 로딩 시 6개의 스켈레톤 카드 렌더링
{[...Array(6)].map((_, i) => (
  <div
    key={i}
    className="h-[220px] bg-gray-200 rounded-2xl animate-pulse"
  ></div>
))}

 

핵심 Tailwind 포인트

• bg-gray-200: 연한 회색 박스
• animate-pulse: 깜빡이는 로딩 애니메이션
• rounded-2xl: 실제 카드와 동일한 둥근 모서리
• h-[220px]: 실제 카드 레이아웃과 동일한 비율

---

🌐 유명 서비스들의 실제 사용 예

YouTube

• 썸네일 자리 → 회색 박스
• 제목/채널명 → 회색 막대

Facebook

• 프로필 원형 → 회색 동그라미
• 글 내용 → 회색 막대 2~3줄

Instagram

• 이미지 자리 → 회색 정사각형 박스

이처럼 세계적인 서비스들이 모두 스켈레톤 UI를 기본 로딩 방식으로 사용합니다.

---

✨ 최종 정리

 

구분	스피너	스켈레톤 UI
사용자 체감 속도	느림	빠름
UX 안정성	갑작스러운 변화	부드러운 변화
정보 전달	없음	전체 레이아웃 미리 제공
전문성	기본적	현대적이고 세련됨

홈페이지 구현 시, 로딩속도가 느리다면, 스켈레톤 UI를 적용해 로딩이 빨라 보이고 자연스럽게 느껴지는 UX를 구현할 수 있습니다.