웹사이트에서 가장 많이 사용되는 로더 중 하나인 점 3개 로더를 구현해보겠습니다. 복잡한 효과 없이도 직관적이고 깔끔한 로딩 경험을 제공할 수 있는 이 로더는 모든 종류의 웹사이트에 잘 어울립니다. 순차적으로 튀어오르는 점들의 리듬감이 사용자에게 자연스러운 대기감을 줍니다.
1. HTML 구조 설정하기
먼저 로더와 메인 콘텐츠를 담을 기본 HTML 구조를 만들어보겠습니다. 간단하면서도 명확한 구조로 설계합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>점 3개 로더</title>
</head>
<body>
<!-- 로더 화면 -->
<div class="loader-container" id="loader">
<div class="dots-loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="loading-text" id="loadingText">로딩 중...</div>
</div>
<!-- 메인 콘텐츠 -->
<div class="main-content" id="mainContent">
<h1 class="welcome-text">완료!</h1>
<p class="sub-text">로딩이 완료되었습니다.</p>
<button class="restart-btn" onclick="restartLoader()">다시 보기</button>
</div>
</body>
</html>
구조의 핵심은 .dots-loader 안에 있는 3개의 .dot 요소입니다. 각각의 점이 독립적으로 애니메이션되면서 순차적인 효과를 만들어냅니다. loader-container는 전체 화면을 덮는 오버레이 역할을 하고, ID를 통해 JavaScript에서 제어할 수 있도록 설정했습니다.
2. CSS로 점 애니메이션과 스타일링 구현하기
이제 점 3개가 순차적으로 튀어오르는 애니메이션을 CSS로 구현해보겠습니다. 핵심은 각 점마다 다른 애니메이션 지연시간을 주는 것입니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 로더 컨테이너 */
.loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 9999;
transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.loader-container.hidden {
opacity: 0;
visibility: hidden;
}
/* 점 3개 로더 */
.dots-loader {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
.dot {
width: 16px;
height: 16px;
background: #3498db;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }
/* 로딩 텍스트 */
.loading-text {
color: #333;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
animation: fadeInOut 2s infinite ease-in-out;
}
/* 바운스 애니메이션 */
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
@keyframes fadeInOut {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
여기서 가장 중요한 부분은 bounce 애니메이션과 각 점의 animation-delay 설정입니다. 첫 번째 점은 -0.32초, 두 번째는 -0.16초, 세 번째는 0초의 지연시간을 가져서 순차적으로 튀어오르는 효과를 만듭니다. transform: scale(0)에서 scale(1)로 변화하면서 점이 작아졌다 커지는 자연스러운 바운스 효과가 생성됩니다.
3. JavaScript로 동적 로딩 텍스트와 전환 효과 추가하기
정적인 로더에 생동감을 더하기 위해 단계별로 변화하는 텍스트와 부드러운 전환 효과를 JavaScript로 구현해보겠습니다.
// 로딩 텍스트 변화
const loadingTexts = [
'로딩 중...',
'잠시만 기다려주세요...',
'거의 완료되었습니다...',
'완료!'
];
let textIndex = 0;
const loadingTextElement = document.getElementById('loadingText');
function startLoader() {
textIndex = 0;
loadingTextElement.textContent = loadingTexts[0];
// 텍스트 변경 애니메이션
const textInterval = setInterval(() => {
if (textIndex < loadingTexts.length - 1) {
textIndex++;
loadingTextElement.textContent = loadingTexts[textIndex];
} else {
clearInterval(textInterval);
}
}, 800);
// 2.5초 후 로딩 완료
setTimeout(() => {
clearInterval(textInterval);
// 로더 숨기기
const loader = document.getElementById('loader');
loader.classList.add('hidden');
// 메인 콘텐츠 표시
setTimeout(() => {
const mainContent = document.getElementById('mainContent');
mainContent.classList.add('visible');
}, 500);
}, 2500);
}
function restartLoader() {
// 메인 콘텐츠 숨기기
const mainContent = document.getElementById('mainContent');
mainContent.classList.remove('visible');
// 로더 다시 표시
setTimeout(() => {
const loader = document.getElementById('loader');
loader.classList.remove('hidden');
startLoader();
}, 300);
}
// 페이지 로드시 로더 시작
window.addEventListener('load', function() {
startLoader();
});
JavaScript의 핵심은 setInterval을 사용해 0.8초마다 로딩 텍스트를 변경하는 것입니다. 배열에 담긴 텍스트들이 순차적으로 표시되면서 사용자에게 진행 상황을 알려줍니다. setTimeout을 중첩해서 사용하여 부드러운 전환 효과를 만들었고, restartLoader 함수로 데모 기능도 추가했습니다.
4. 메인 콘텐츠 스타일링과 반응형 처리하기
마지막으로 로딩 완료 후 보여질 메인 콘텐츠를 스타일링하고, 다양한 디바이스에서 잘 보이도록 반응형 처리를 해보겠습니다.
/* 메인 콘텐츠 */
.main-content {
min-height: 100vh;
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 0;
transition: opacity 0.5s ease-in;
color: white;
text-align: center;
padding: 20px;
}
.main-content.visible {
opacity: 1;
}
.welcome-text {
font-size: 48px;
margin-bottom: 20px;
font-weight: 300;
}
.sub-text {
font-size: 18px;
max-width: 600px;
line-height: 1.6;
opacity: 0.9;
}
.restart-btn {
margin-top: 30px;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.restart-btn:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.dot {
width: 14px;
height: 14px;
}
.dots-loader {
gap: 10px;
}
.loading-text {
font-size: 16px;
}
.welcome-text {
font-size: 36px;
}
.sub-text {
font-size: 16px;
}
}
@media (max-width: 480px) {
.welcome-text {
font-size: 28px;
}
.sub-text {
font-size: 14px;
}
.restart-btn {
font-size: 14px;
padding: 10px 20px;
}
}
메인 콘텐츠는 아름다운 그라데이션 배경과 함께 중앙 정렬로 배치했습니다. backdrop-filter: blur(10px)를 사용한 버튼은 모던한 글래스모피즘 효과를 연출합니다. 반응형 디자인에서는 768px와 480px 두 개의 브레이크포인트를 설정해 태블릿과 모바일에서도 최적화된 경험을 제공합니다.
실제 사용 팁:
- 로더 색상은 브랜드 컬러에 맞게 #3498db 부분을 변경하세요
- 애니메이션 속도는 animation-duration을 조절해서 변경 가능합니다
- 실제 사이트에서는 window.addEventListener('load')를 사용해 페이지 로드 완료를 감지하세요
이제 여러분만의 점 3개 로더가 완성되었습니다!
📁 완성된 예시 파일
위에서 설명한 모든 기능이 포함된 완전한 HTML 파일을 확인하고 싶으시면, 밑에 파일을 다운로드해서 확인해주세요~
'웹 퍼블리싱 | Web Publishing > 로더 | Loader' 카테고리의 다른 글
| 웹사이트에 멋진 로딩 화면 만들기: 단계별 가이드 (0) | 2025.06.26 |
|---|
