코딩,프로그램

CSS로 구현하는 점점 커지는 원 애니메이션: 로딩 UI 만들기

successmylife 2024. 12. 17. 13:24

CSS로 구현하는 점점 커지는 원 애니메이션: 로딩 UI 만들기

웹사이트를 개발하다 보면 사용자가 무언가를 기다리는 동안 화면에 로딩 상태를 표시해야 할 때가 있습니다. 흔히 로딩 스피너나 애니메이션으로 이러한 상태를 표현하곤 하는데, 단순한 아이콘보다 조금 더 생동감 있고 세련된 효과를 제공하고 싶을 때 "점점 커지는 원" 애니메이션을 활용할 수 있습니다. 이번 글에서는 CSS와 약간의 HTML, JavaScript를 사용해 사용자 경험을 높일 수 있는 로딩 UI를 만드는 방법을 단계적으로 설명하겠습니다.

 

목표: 점점 커지는 원 애니메이션과 텍스트가 포함된 로딩 UI 만들기

우리는 아래와 같은 요소를 구현할 것입니다:

  1. 화면 중앙에 배치된 반투명한 오버레이.
  2. "화면을 로딩 중입니다. 잠시만 기다려 주세요."라는 안내 문구.
  3. 점점 커졌다 작아지는 원 3개가 순차적으로 애니메이션 되는 효과.

이 로딩 UI는 간단한 CSS 애니메이션과 HTML, JavaScript로 구성되며, 별도의 라이브러리를 사용하지 않아도 손쉽게 구현할 수 있습니다.

기본 구조: HTML 코드 작성

HTML은 로딩 UI를 구성할 기본 요소입니다. 여기서는 div 태그를 사용하여 오버레이와 모달 창을 정의하고, 애니메이션 효과를 보여줄 원을 추가합니다.

<div id="overlay" style="display: none;"></div>
<div id="waitingModal" style="display: none;">
    <div class="loading-circle">
        <div></div>
        <div></div>
        <div></div>
    </div>
    화면을 로딩중입니다. 잠시만 기다려 주세요.
</div>
  • #overlay: 화면 전체를 덮는 반투명한 배경입니다.
  • #waitingModal: 로딩 상태를 표시하는 중앙의 모달 창입니다.
  • .loading-circle: 3개의 원을 포함하는 컨테이너로, 각각 원은 div로 표현됩니다.

여기서는 기본적으로 style="display: none;" 속성을 사용하여 초기에는 숨겨져 있다가 필요할 때 표시되도록 합니다.

스타일 정의: CSS 작성하기

이제 HTML 요소에 스타일을 적용해봅니다. CSS는 로딩 UI의 외형을 담당하며, 특히 점점 커지는 원 애니메이션을 구현하는 핵심 역할을 합니다.

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

#waitingModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    text-align: center;
}

.loading-circle {
    margin: 0 auto 20px;
    width: 50px;
    height: 50px;
    position: relative;
}

.loading-circle div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff;
    position: absolute;
    animation: pulse 1.5s infinite ease-in-out;
}

.loading-circle div:nth-child(1) {
    animation-delay: 0s;
}

.loading-circle div:nth-child(2) {
    animation-delay: 0.5s;
}

.loading-circle div:nth-child(3) {
    animation-delay: 1s;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}

스타일 설명

  1. #overlay: 화면 전체를 덮는 반투명 배경입니다. rgba(0, 0, 0, 0.5)로 50% 투명한 검은색을 적용했습니다.
  2. #waitingModal: 중앙에 표시되는 로딩 창으로, transform: translate(-50%, -50%) 속성을 사용해 화면의 정중앙에 위치시켰습니다.
  3. .loading-circle: 점점 커지는 원을 포함하는 컨테이너입니다. margin으로 아래의 문구와 적당한 간격을 조정했습니다.
  4. .loading-circle div: 원을 나타내는 각 div에 @keyframes를 사용한 애니메이션을 적용했습니다. 원은 transform: scale()로 크기를 변화시키며, opacity로 투명도를 부여해 부드러운 효과를 냅니다.
  5. @keyframes pulse: 원의 크기가 커졌다 작아지는 애니메이션을 정의합니다. 각 원이 순차적으로 커지게 하기 위해 animation-delay를 활용했습니다.

애니메이션과 상호작용: JavaScript 작성하기

HTML과 CSS만으로는 로딩 UI를 표시하고 숨기는 동작을 구현하기 어렵습니다. 이를 위해 JavaScript를 활용해 showWaitingModal과 hideWaitingModal 함수를 작성합니다.

// 모달 표시
function showWaitingModal() {
    document.getElementById('overlay').style.display = 'block';
    document.getElementById('waitingModal').style.display = 'block';
}

// 모달 닫기
function hideWaitingModal() {
    document.getElementById('overlay').style.display = 'none';
    document.getElementById('waitingModal').style.display = 'none';
}

// 예제: 페이지 로드 시 모달 표시 후 3초 후 닫기
document.addEventListener('DOMContentLoaded', function () {
    showWaitingModal();
    setTimeout(hideWaitingModal, 3000);
});

함수 설명

  • showWaitingModal: #overlay와 #waitingModal의 display 속성을 block으로 설정해 화면에 표시합니다.
  • hideWaitingModal: 반대로 display 속성을 none으로 설정해 화면에서 숨깁니다.
  • 사용 예제: 페이지 로드 시 모달을 표시하고, 3초 후에 자동으로 닫히도록 설정했습니다. 실제 사용 시 필요한 시점에 이 함수를 호출하면 됩니다.

구현 결과

이제 완성된 코드를 브라우저에서 실행하면 화면 중앙에 반투명한 오버레이와 함께 점점 커졌다 작아지는 3개의 원이 나타납니다. "화면을 로딩 중입니다. 잠시만 기다려 주세요."라는 문구도 함께 표시되어 사용자가 현재 로딩 중임을 직관적으로 이해할 수 있습니다.

활용 팁

  • 색상 변경: .loading-circle div의 background 값을 변경하면 원의 색상을 쉽게 바꿀 수 있습니다.
  • 속도 조정: @keyframes에서 animation의 1.5s 값을 수정하면 원의 애니메이션 속도를 조정할 수 있습니다.
  • 동적 호출: 이 UI는 간단한 JavaScript 함수 호출로 동작하므로, AJAX 요청 등 다양한 상황에서 활용할 수 있습니다.

로딩 UI는 사용자가 대기 상태를 불편하게 느끼지 않도록 돕는 중요한 요소입니다. 이처럼 애니메이션과 간결한 디자인을 활용해 사용자 경험을 개선해보세요.

반응형