온라인에서 가장 참기 힘든 시간, 바로 ‘로딩 중…’ 화면을 볼 때입니다. 사이트에 들어왔는데 하얀 빈 화면만 3초 이상 지속되면 방문자의 53%는 뒤로 가기를 누릅니다.
이 지루한 기다림의 시간을 우리 브랜드의 ‘쇼타임’으로 바꿀 수 있습니다. 넷플릭스나 유튜브처럼 로고가 빙글빙글 돌아가는 멋진 로딩 화면을 만들어보세요. 방문자는 “아, 뭔가 준비 중이구나” 하고 안심하게 되고, 사이트의 전문성은 올라갑니다.
오늘 드릴 코드는 여러분의 브랜드 로고를 넣을 수 있고, 색상도 마음대로 바꿀 수 있으며, 로딩이 끝나면 알아서 사라지는 ‘똑똑한 애니메이션’입니다. 티스토리 스킨 편집이나 워드프레스 플러그인에 복사해서 붙여넣기만 하세요.
1. 복사해서 붙여넣는 ‘로딩 화면’ 올인원 코드
아래 코드를 <body> 태그 바로 아래에 붙여넣으시면 됩니다. (티스토리의 경우 [스킨 편집] > [html 편집] > HTML 탭에서 <body>를 찾으세요)
<!-- 로딩 화면 시작 (body 태그 바로 밑에 붙여넣기) -->
<div id="loading-screen">
<div class="spinner-container">
<!-- ★ 수정할 곳 1: 브랜드 로고 이미지 주소 -->
<img src="https://cdn-icons-png.flaticon.com/512/6783/6783360.png" alt="로고" class="loading-logo">
<div class="spinner"></div>
</div>
</div>
<style>
/* 1. 전체 화면 덮기 */
#loading-screen {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: white; /* 배경색 변경 가능 (예: #f0f0f0) */
z-index: 9999; /* 다른 요소보다 가장 위에 표시 */
display: flex; justify-content: center; align-items: center;
transition: opacity 0.5s ease; /* 사라질 때 부드럽게 */
}
/* 2. 로고와 스피너 중앙 정렬 */
.spinner-container { position: relative; width: 100px; height: 100px; }
/* 3. 로고 스타일 (가운데 고정) */
.loading-logo {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 50px; /* 로고 크기 조절 */
height: auto; z-index: 2;
}
/* 4. 돌아가는 원(스피너) 스타일 */
.spinner {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
border: 5px solid #e0e0e0; /* 회색 테두리 (원 바탕) */
/* ★ 수정할 곳 2: 브랜드 포인트 색상 (돌아가는 부분) */
border-top-color: #2196F3;
border-radius: 50%;
animation: spin 1s linear infinite; /* 1초마다 무한 회전 */
}
/* 5. 애니메이션 정의 (빙글빙글) */
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
<script>
// 페이지의 모든 리소스(이미지 등) 로딩이 끝나면 실행
window.addEventListener('load', function() {
const loader = document.getElementById('loading-screen');
loader.style.opacity = '0'; // 투명하게 만들기
// 0.5초 뒤에 아예 없애버리기 (화면에서 제거)
setTimeout(function() {
loader.style.display = 'none';
}, 500);
});
</script>
<!-- 로딩 화면 끝 -->“솔직히 고백하자면, 저도 처음엔 GIF 이미지를 썼습니다. 그런데 GIF는 용량이 커서 오히려 로딩을 더 느리게 만들더군요. 이 코드는 순수 CSS로 그리기 때문에 용량이 ‘0’에 가깝습니다. 사이트 속도에 전혀 영향을 주지 않죠.”
2. 우리 브랜드 스타일로 커스텀하기
코드가 낯설어도 겁먹지 마세요. 딱 2가지만 수정하면 됩니다. 주석(/* ★ 수정할 곳... */)을 달아놓은 부분을 찾으세요.
- ✅ 로고 바꾸기:
<img src="...">안에 있는 주소를 사장님 브랜드 로고 이미지 주소로 바꿔치기하세요. (배경이 투명한 PNG 파일이 가장 예쁩니다!) - ✅ 색상 바꾸기: CSS 코드 중간에
border-top-color: #2196F3;부분을 찾으세요. 저 파란색 코드를 브랜드 포인트 컬러(예: 스타벅스 초록색 #00704a)로 바꾸면 그 색깔로 빙글빙글 돌아갑니다.
💡 코드캠의 실전 TIP: 너무 빨라도 문제?
혹시 사이트가 너무 빨라서 로딩 화면이 0.1초 만에 번쩍하고 사라지나요? 그럴 땐 스크립트의 window.addEventListener('load', ...) 부분을 setTimeout(function() { ... }, 2000); (2초 지연) 등으로 감싸서 강제로 보여주는 시간을 늘릴 수도 있습니다. 하지만 로딩은 짧을수록 좋으니 굳이 추천하진 않습니다.
디테일이 명품 사이트를 만듭니다
사소해 보이지만, 이런 로딩 애니메이션 하나가 사이트의 첫인상을 결정합니다. 방문자는 무의식중에 “여기는 신경 써서 만든 사이트네”라고 느끼게 됩니다.
지금 바로 적용해 보세요. 답답했던 흰색 화면이 사장님의 브랜드를 알리는 멋진 광고판으로 변신할 겁니다.
혹시 로고가 가운데 정렬이 안 되거나, 원의 두께를 조절하고 싶으신가요? 댓글로 질문 주시면 수정할 부분을 콕 집어서 알려드리겠습니다!
