모바일 우선 개발을 위한 반응형 이미지 갤러리 만들기 📱

모바일 우선 개발은 오늘날 웹 개발의 중요한 부분입니다. 사용자들이 모바일 기기를 통해 웹사이트에 접근하는 경우가 많기 때문에, 우리는 모바일 환경에서도 완벽하게 작동하는 웹사이트를 만들어야 합니다. 오늘은 모바일 우선 개발의 핵심 요소 중 하나인 반응형 이미지 갤러리를 만드는 방법을 알아보겠습니다.

HTML 구조

먼저, 갤러리를 위한 HTML 구조를 만들어봅시다. 간단한 div 태그를 사용하여 이미지를 감싸고, 각 이미지에는 고유한 클래스를 지정합니다.

<div class="image-gallery">
    <img src="image1.jpg" class="responsive-image" alt="image1">
    <img src="image2.jpg" class="responsive-image" alt="image2">
    <img src="image3.jpg" class="responsive-image" alt="image3">
</div>

CSS 스타일링

이제 CSS를 사용하여 이미지가 다양한 화면 크기에 맞게 조정되도록 만들어보겠습니다. .responsive-image 클래스에 스타일을 적용하여, 이미지가 부모 요소의 크기에 맞게 조정되도록 합니다.

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    margin: 5px;
}

이 CSS 코드는 이미지 갤러리를 가운데 정렬하고, 이미지가 화면 크기에 따라 크기가 조정되도록 합니다. flex-wrap 속성은 화면이 작아질 때 이미지가 다음 줄로 넘어가도록 합니다.

JavaScript를 사용한 최적화

마지막으로, JavaScript를 사용하여 이미지 로딩을 최적화할 수 있습니다. 사용자가 스크롤하여 이미지가 화면에 나타날 때만 이미지가 로드되도록 하는 '지연 로딩(lazy loading)' 기법을 적용해보겠습니다.

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    }
});

이 코드는 이미지가 화면에 나타날 때만 이미지를 로드하도록 합니다. 이를 위해 IntersectionObserver API를 사용합니다. 이미지 태그에 class="lazy"와 data-src="image_path.jpg" 속성을 추가하고, 실제 src 속성은 제거하여 초기 로딩 시 이미지가 로드되지 않도록 합니다.

이제 여러분은 모바일 우선 개발을 위한 반응형 이미지 갤러리를 만드는 방법을 배웠습니다. 이 방법을 사용하여 사용자 경험을 향상시키고, 모바일 환경에서도 멋진 웹사이트를 제공해보세요!