라이트박스(Lightbox) 학습

라이트박스는 이미지/영상을 클릭했을 때 배경을 어둡게 처리하고, 콘텐츠를 중앙에 크게 보여주는 미디어 감상 특화 UI 패턴입니다.

이미지

설명

1. 라이트박스 핵심 UX 원칙

몰입감: 배경을 80~90% 어둡게 처리해 미디어에 집중시키는 것이 핵심입니다.
갤러리 내비게이션: 라이트박스 안에서 이전/다음 이동이 가능해야 합니다.
원본 비율 유지: 이미지가 찌그러지지 않도록 비율을 유지하며 화면 안에서 최대로 보여줍니다.

2. UI 디자인 체크리스트

닫기(Exit): X 버튼, 배경 클릭, ESC 키 모두 지원
캡션(Caption): 이미지 설명으로 맥락 제공
로딩 인디케이터: 고해상도 이미지 로딩 시 사용자 불안 감소
카운터: 현재 위치 표시 (예: 3 / 12)

4. 라이트박스 vs 모달

모달 폼/텍스트/버튼 중심, 입력/확인 상호작용에 적합

라이트박스 이미지/영상 감상 중심, 어두운 배경 + 원본 비율 중심 설계

교수님의 실전 팁

"모바일에서는 핀치 줌/스와이프 기대치가 높습니다. PhotoSwipe, Lightgallery.js 같은 검증된 라이브러리를 커스텀하는 방식이 구현 안정성과 UX 모두에서 유리한 경우가 많습니다."

코드

HTML

<div class="gallery">
  <img src="thumb1.jpg" class="lightbox-trigger" data-full="large1.jpg" alt="이미지 1">
  <img src="thumb2.jpg" class="lightbox-trigger" data-full="large2.jpg" alt="이미지 2">
</div>

<div id="lightboxOverlay" class="hidden">
  <span class="close-btn">&times;</span>
  <img id="lightboxImage" src="" alt="확대 이미지">
  <div id="caption">이미지 설명이 들어갑니다</div>
</div>

CSS

#lightboxOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
}

#lightboxImage {
  max-width: 90%;
  max-height: 80%;
  border: 3px solid white;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.close-btn {
  position: absolute;
  top: 20px; right: 30px;
  color: white;
  font-size: 50px;
  cursor: pointer;
}

jQuery (동작 제어)

$('.lightbox-trigger').on('click', function() {
  let fullImageUrl = $(this).attr('data-full');
  let altText = $(this).attr('alt');

  $('#lightboxImage').attr('src', fullImageUrl);
  $('#caption').text(altText);
  $('#lightboxOverlay').removeClass('hidden');
});

$('#lightboxOverlay, .close-btn').on('click', function(e) {
  if (e.target !== this && !$(e.target).hasClass('close-btn')) return;
  $(this).closest('#lightboxOverlay').addClass('hidden');
});