GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

css 이미지 확대 애니메이션 9종 — 라이트박스 전환 모음

· Godrich · 9종 · 17분 읽기

전환바닐라 JSCSS만클릭미디어·프레스

css 이미지 확대 애니메이션 아홉 가지 중 하나는 클릭한 썸네일이 있던 자리에서 그대로 커지며 펼쳐지고, 하나는 아래로 스와이프한 속도를 계산해 닫을지 되돌아갈지를 정하며, 하나는 키보드로 넘길 때마다 포커스 링이 다음 자리로 미끄러집니다.

이벤트만 놓고 보면 01·02·03·08은 클릭(click)과 키보드(keydown)만으로 반응하는 단순한 구조를 공유하고, 04·06은 pointerdown·pointermove·pointerup·pointercancel까지 더한 드래그형이며, 05는 더블탭(dblclick)까지 얹어 아홉 개 중 가장 많은 네 계열(클릭·더블탭·키보드·포인터)의 입력을 듣습니다. 07은 click·keydown과 별개로 focus 이벤트로 포커스 이동 자체를 감지하고, 09는 클릭 버튼·키보드와 별개로 matchMedia의 change 리스너를 열어 두어 OS의 동작 줄이기 설정이 바뀌는 순간을 이 편에서 유일하게 실시간으로 반영합니다. 입력의 많고 적음보다 계산 한 겹이 어디서 도는지가 이 편에서 항목을 늘어놓은 기준입니다.

썸네일 자리에서 확장하는 라이트박스01 lightbox-thumbnail-morph-expand 배경 페이드 + 이미지 스케일업 전환02 lightbox-backdrop-fade-scale 캡션이 아래에서 슬라이드로 올라오는 라이트박스03 lightbox-caption-slide-up 스와이프로 다음·이전 넘기는 라이트박스04 lightbox-swipe-next-prev 확대 후 드래그로 이동하는 라이트박스05 lightbox-zoom-pan-drag 아래로 던지듯 닫는 라이트박스06 lightbox-close-velocity-fling 포커스 링이 미끄러지며 갇히는 라이트박스07 lightbox-keyboard-focus-trap-ring 썸네일 줄이 따라 움직이는 라이트박스08 lightbox-thumbnail-strip-sync 모션 줄이기를 즉시 반영하는 라이트박스09 lightbox-reduced-motion-instant

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개의 해부 — 계산 한 겹이 어디서 도는가

누구나 이미지 클릭 시 확대되는 동작을 기대하지만, 그 확대가 어디서 시작해 어디서 멈추는지는 아홉 가지가 저마다 다른 계산으로 답합니다. 애니메이션 구동은 animate(duration, onFrame, onDone) 헬퍼 하나로 공통인데, reduce가 참이면 트윈 없이 onFrame(1)을 즉시 불러 최종값으로 스냅하고 아니면 requestAnimationFrame 루프를 돕니다(01~09 전부 같은 헬퍼).

번호 이름 누적면적 강도_평균 움직인프레임
01 썸네일 자리에서 확장하는 라이트박스 36.70% 111.0 15/23
02 배경 페이드 + 이미지 스케일업 전환 39.72% 79.2 14/23
03 캡션이 아래에서 슬라이드로 올라오는 라이트박스 39.87% 110.8 21/23
04 스와이프로 다음·이전 넘기는 라이트박스 39.87% 95.2 20/23
05 확대 후 드래그로 이동하는 라이트박스 30.18% 53.5 9/23
06 아래로 던지듯 닫는 라이트박스 39.87% 74.1 15/23
07 포커스 링이 미끄러지며 갇히는 라이트박스 39.82% 106.4 20/23
08 썸네일 줄이 따라 움직이는 라이트박스 39.87% 99.7 10/23
09 모션 줄이기를 즉시 반영하는 라이트박스 22.44% 78.2 17/23

누적면적이 가장 큰 항목은 03·04·06·08 네 개로 39.87%에서 공동입니다. 가장 작은 항목은 09로, 두 판 다 좁은 이미지 하나만 켜고 끄듯 전환해 22.44%에 그칩니다. 강도_평균이 가장 높은 항목은 01 하나로 111.0까지 오르는데, 03(110.8)과 0.2 차이로 매우 가깝지만 01이 근소하게 앞섭니다. 강도_평균이 가장 낮은 항목은 05로 53.5에 그치는데, 확대 배율이 커도 이동 자체는 서서히 보간되기 때문입니다. 23개 델타 구간 가운데 움직인프레임이 가장 촘촘한 항목은 03으로 21/23이고, 가장 뜸한 항목은 05로 9/23입니다.

실제 좌표를 재서 이동 거리를 만든다 — 01·07

01의 openFrom()은 getBoundingClientRect로 썸네일과 목표 이미지의 실제 화면 좌표를 재고, 두 중심점의 차(dx·dy)와 너비 비율(scaleFrom)을 구해 그 차이만큼 이동·확대하는 FLIP 기법을 씁니다. 07의 glideRingTo()도 같은 방식으로 포커스 링의 이전 위치와 목표 요소의 실제 위치를 매번 실측해, 그 델타만큼 되돌렸다가 0으로 애니메이션하는 식으로 링이 미끄러지는 것처럼 보이게 만듭니다.

손을 뗄 때의 속도로 판정한다 — 04·06

04의 endDrag()와 06의 endDrag()는 둘 다 pointermove마다 (e.clientX - lastMoveX) / dt 또는 (e.clientY - lastMoveY) / dt로 순간 속도를 계산해 두었다가, 손을 뗀 순간 그 속도가 SWIPE_VELOCITY_PX_MS·LIGHTBOX_FLING_VELOCITY_PX_MS(둘 다 0.5)를 넘는지로 커밋 여부를 판정합니다. 04는 거리 조건(SWIPE_COMMIT_RATIO)과 속도 조건 중 하나만 넘어도 다음·이전 이미지로 넘어가고, 06은 같은 방식으로 거리(DRAG_COMMIT_RATIO)나 속도 중 하나만 넘으면 닫힘으로 판정합니다.

자기 자신의 치수를 실측해 값을 만든다 — 02·03·08

02의 fromAspect()는 이미지 자신의 가로세로 비율(aspect)을 ASPECT_NORM_LO·HI 사이로 정규화해 시작 스케일과 배경 어둡기를 함께 도출하고, 03은 caption.getBoundingClientRect().height로 캡션 자신의 실제 렌더 높이를 잰 뒤 그 높이만큼 아래서부터 밀어 올립니다. 08의 centerOffsetFor()는 offsetLeft·offsetWidth·clientWidth를 매번 실측해 활성 썸네일이 줄 가운데로 오는 이동량을 index × 고정폭이 아니라 그때그때 계산합니다.

확대 비율에 따라 이동 범위를 다시 잰다 — 05

05의 panBounds(s)는 frame.getBoundingClientRect()로 뷰포트 실제 크기를 잰 뒤 (s - 1) × 너비 / 2 로 지금 확대 배율에서 남는 여백을 계산합니다. 배율이 바뀔 때마다 이 함수가 다시 불리므로 드래그로 이동할 수 있는 범위도 매번 새로 정해집니다.

실시간 리스너로 설정 변화를 따라간다 — 09

나머지 여덟 개는 로드 시점에 matchMedia 값을 한 번만 읽어 reduce 변수에 고정하지만, 09는 mql.addEventListener('change', onRealChange)로 실제 OS 설정이 바뀌는 순간까지 실시간 반영하고, 화면 안 스위치가 만드는 simulateReduce와 합쳐 effectiveReduce() 하나로 두 신호를 함께 판정합니다. 아홉 개 전부 Math.random을 쓰지 않는 결정적 계산이라 같은 조작에는 항상 같은 결과가 나옵니다.

패턴별 코드

01썸네일 자리에서 확장하는 라이트박스

그리드의 썸네일을 클릭하면 그 이미지가 있던 화면 위 자리와 크기에서 그대로 커지기 시작해 화면 전체 라이트박스로 펼쳐지며, 항상 중앙에서 뜨는 일반 대화상자와 달리 시작 위치가 클릭한 자리 그대로입니다. getBoundingClientRect로 썸네일과 목표 이미지의 실제 좌표를 재서 그 차이만큼 이동·확대하는 FLIP 기법을 씁니다. 상품·포트폴리오 이미지 그리드에 맞습니다.

  function openFrom(idx) {
    if (open) return;
    open = true;
    var thumbImg = thumbs[idx].querySelector('.thumbImg');
    var fromRect = thumbImg.getBoundingClientRect();
    fullImg.className = 'fullImg ' + imgClassByIdx[idx];
    lightbox.style.visibility = 'visible';
    lightbox.setAttribute('aria-hidden', 'false');
    backdrop.style.visibility = 'visible';
    var toRect = fullImg.getBoundingClientRect();
    var dx = (fromRect.left + fromRect.width / 2) - (toRect.left + toRect.width / 2);
    var dy = (fromRect.top + fromRect.height / 2) - (toRect.top + toRect.height / 2);
    var scaleFrom = fromRect.width / toRect.width;
    animate(OPEN_MS, function (e) {
      var s = scaleFrom + (1 - scaleFrom) * e;
      var tx = dx * (1 - e);
      var ty = dy * (1 - e);
      fullImg.style.transform = 'translate(' + tx.toFixed(2) + 'px,' + ty.toFixed(2) + 'px) scale(' + s.toFixed(4) + ')';
      backdrop.style.opacity = (e * 0.72).toFixed(3);
    }, function () {
      closeBtn.focus({ preventScroll: true });
    });
  }
썸네일 자리에서 확장하는 라이트박스
새 창에서 열기

01 · 썸네일 자리에서 확장하는 라이트박스 — 측정 누적면적 36.697% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getBoundingClientRecttransform-originFLIP technique

02배경 페이드 + 이미지 스케일업 전환

뒤 배경이 어둡게 페이드되는 동안 이미지는 최종 크기보다 살짝 작은 상태로 시작해 커지며 멈춥니다. 일반적인 대화상자의 페이드-스케일과 다른 지점은, 시작 스케일과 배경 어둡기가 둘 다 이미지 자신의 가로세로 비율에서 함께 계산된다는 것입니다. 블로그 본문 이미지를 확대해 보여줄 때 맞습니다.

  // 이미지 자신의 가로세로 비율에서 시작 스케일과 배경 어둡기를 함께 계산한다 — 두 값이 같은 정규화 지점에서 나온다
  function fromAspect(w, h) {
    var aspect = w / h;
    var norm = clamp((aspect - ASPECT_NORM_LO) / (ASPECT_NORM_HI - ASPECT_NORM_LO), 0, 1);
    var scaleFrom = SCALE_FROM_MIN + (SCALE_FROM_MAX - SCALE_FROM_MIN) * norm;
    var dim = DIM_MAX - (DIM_MAX - DIM_MIN) * norm;
    return { aspect: aspect, scaleFrom: scaleFrom, dim: dim };
  }
배경 페이드 + 이미지 스케일업 전환
새 창에서 열기

02 · 배경 페이드 + 이미지 스케일업 전환 — 측정 누적면적 39.722% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

clamp()transform: scalebackdrop opacity

03캡션이 아래에서 슬라이드로 올라오는 라이트박스

이미지가 다 펼쳐지고 나서 한 박자 늦게 하단 캡션 띠가 화면 아래에서부터 밀려 올라와 자리를 잡아, 이미지와 캡션이 한꺼번에 나타나지 않고 두 단계로 나뉩니다. 캡션 자신의 실제 렌더 높이를 측정해 그 높이만큼 아래서부터 밀어 올리므로 글자 수가 달라져도 시작 위치가 어긋나지 않습니다. 사진 설명이 있는 갤러리, 작품 상세 보기에 맞습니다.

    animate(IMAGE_MS, function (e) {
      fullImg.style.transform = 'scale(' + (0.86 + 0.14 * e).toFixed(4) + ')';
      fullImg.style.opacity = e.toFixed(3);
      backdrop.style.opacity = (0.7 * e).toFixed(3);
    }, function () {
      // 캡션 자신의 실제 렌더 높이를 측정해 그 높이만큼 아래서 밀어 올린다 — 텍스트 길이마다 시작 위치가 다르다
      caption.style.visibility = 'hidden';
      caption.style.opacity = '1';
      var capH = caption.getBoundingClientRect().height;
      caption.style.transform = 'translateY(' + capH.toFixed(1) + 'px)';
      caption.style.visibility = 'visible';
      timers.push(setTimeout(function () {
        animate(CAPTION_MS, function (e2) {
          caption.style.transform = 'translateY(' + (capH * (1 - e2)).toFixed(1) + 'px)';
        }, function () {
          closeBtn.focus({ preventScroll: true });
        });
      }, CAPTION_GAP_MS));
    });
캡션이 아래에서 슬라이드로 올라오는 라이트박스
새 창에서 열기

03 · 캡션이 아래에서 슬라이드로 올라오는 라이트박스 — 측정 누적면적 39.872% · 움직인 프레임 21/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

transform: translateYrequestAnimationFramestaggered timing

04스와이프로 다음·이전 넘기는 라이트박스

라이트박스가 열린 채로 좌우로 드래그하면 지금 이미지가 밀려나면서 다음 또는 이전 이미지가 그 자리를 채웁니다. 082의 인라인 캐러셀 슬라이더와 다른 시연으로, 여긴 전체화면 오버레이 안에서 번호 카운터와 함께 넘어가고 드래그 거리와 손을 뗄 때의 순간 속도 둘 중 하나만 기준을 넘어도 다음 장으로 커밋됩니다. 여러 장짜리 상품·여행 사진 라이트박스에 씁니다.

  viewport.addEventListener('pointermove', function (e) {
    if (!dragging) return;
    var now = performance.now();
    var dt = now - lastMoveT;
    if (dt > 0) velocity = (e.clientX - lastMoveX) / dt;
    lastMoveX = e.clientX;
    lastMoveT = now;
    setTrackX(dragBaseX + (e.clientX - dragStartX));
  });
  function endDrag(e) {
    if (!dragging) return;
    dragging = false;
    var deltaX = e.clientX - dragStartX;
    var w = viewportW();
    var commit = Math.abs(deltaX) > w * SWIPE_COMMIT_RATIO || Math.abs(velocity) > SWIPE_VELOCITY_PX_MS;
    if (commit) {
      goTo(idx + (deltaX < 0 ? 1 : -1));
    } else {
      goTo(idx);
    }
  }
스와이프로 다음·이전 넘기는 라이트박스
새 창에서 열기

04 · 스와이프로 다음·이전 넘기는 라이트박스 — 측정 누적면적 39.872% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

Pointer EventssetPointerCapturevelocity threshold

05확대 후 드래그로 이동하는 라이트박스

더블탭이나 버튼으로 이미지를 확대하면 그다음부터는 드래그한 방향으로 이미지가 이동합니다. 확대된 만큼 남는 여백 안에서만 움직이도록 이동 범위가 매번 다시 계산되는데, 이는 256의 돋보기·미니맵 뷰어와 다른 지점으로 여긴 라이트박스가 열려 있는 동안의 확대·이동만 다룹니다. 제품 상세 이미지, 지도·도면 이미지 확대에 맞습니다.

  // 확대 배율만큼 남는 여백을 프레임 실측 크기로 매번 다시 계산한다 — 확대 정도가 바뀌면 이동 가능 범위도 바뀐다
  function panBounds(s) {
    var r = frame.getBoundingClientRect();
    return { x: (s - 1) * r.width / 2, y: (s - 1) * r.height / 2 };
  }

  function apply() {
    fullImg.style.transform = 'translate(' + offX.toFixed(2) + 'px,' + offY.toFixed(2) + 'px) scale(' + scale.toFixed(3) + ')';
    zoomNote.textContent = scale.toFixed(1) + '×';
  }

  function zoomTo(target, onDone) {
    var fromScale = scale;
    var fromX = offX, fromY = offY;
    animate(ZOOM_MS, function (e) {
      scale = fromScale + (target - fromScale) * e;
      var b = panBounds(scale);
      offX = clamp(fromX * (1 - e), -b.x, b.x);
      offY = clamp(fromY * (1 - e), -b.y, b.y);
      apply();
    }, onDone);
  }
확대 후 드래그로 이동하는 라이트박스
새 창에서 열기

05 · 확대 후 드래그로 이동하는 라이트박스 — 측정 누적면적 30.183% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

clamp()pointer drag pantransform: scale

06아래로 던지듯 닫는 라이트박스

아래로 드래그하다 손을 떼는 순간 마지막 이동 속도를 계산해, 빠르게 떨쳐낸 경우에만 화면 밖으로 튕겨 나가듯 닫힙니다. 느리게 놓으면 스프링으로 원래 자리에 되돌아옵니다. 모바일 사진 뷰어, 스토리형 이미지 뷰에 맞습니다.

  fullImg.addEventListener('pointermove', function (e) {
    if (!dragging) return;
    var now = performance.now();
    var dt = now - lastMoveT;
    if (dt > 0) velocityY = (e.clientY - lastMoveY) / dt;
    lastMoveY = e.clientY;
    lastMoveT = now;
    curX = e.clientX - dragStartX;
    curY = Math.max(0, e.clientY - dragStartY);
    var progress = clamp(curY / (stageH() * DRAG_COMMIT_RATIO), 0, 1);
    setDrag(curX, curY, progress);
  });
  function endDrag() {
    if (!dragging) return;
    dragging = false;
    var h = stageH();
    var commit = curY > h * DRAG_COMMIT_RATIO || Math.abs(velocityY) > LIGHTBOX_FLING_VELOCITY_PX_MS;
    if (commit) flingClose(velocityY);
    else springBack();
  }
아래로 던지듯 닫는 라이트박스
새 창에서 열기

06 · 아래로 던지듯 닫는 라이트박스 — 측정 누적면적 39.872% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

pointer velocityspringBack()translate()

07포커스 링이 미끄러지며 갇히는 라이트박스

라이트박스 안에서 탭이나 화살표로 다음 버튼으로 옮겨갈 때마다, 각진 포커스 사각형이 순간이동하지 않고 이전 위치에서 다음 위치까지 실측 좌표로 미끄러지듯 이동합니다. 끝에서 Tab 하면 처음으로, 처음에서 Shift+Tab 하면 끝으로 감기는 진짜 포커스 트랩이라 초점이 라이트박스 밖으로 새지 않습니다. 키보드로 다루는 이미지 뷰어, 접근성 중시 갤러리에 맞습니다.

    var boxRect = lightbox.getBoundingClientRect();
    var toRect = el.getBoundingClientRect();
    var toX = toRect.left - boxRect.left;
    var toY = toRect.top - boxRect.top;
    var toW = toRect.width;
    var toH = toRect.height;
    var fromRect = lastRingRect || { x: toX, y: toY, w: toW, h: toH };
    focusRing.style.width = toW + 'px';
    focusRing.style.height = toH + 'px';
    focusRing.style.transform = 'translate(' + toX + 'px,' + toY + 'px)';
    var dx = fromRect.x - toX;
    var dy = fromRect.y - toY;
    var sx = fromRect.w / toW;
    var sy = fromRect.h / toH;
    focusRing.style.opacity = '1';
    animate(LIGHTBOX_FOCUS_RING_MS, function (e) {
      var ix = dx * (1 - e);
      var iy = dy * (1 - e);
      var isx = sx + (1 - sx) * e;
      var isy = sy + (1 - sy) * e;
      focusRing.style.transform = 'translate(' + (toX + ix).toFixed(2) + 'px,' + (toY + iy).toFixed(2) + 'px) scale(' + isx.toFixed(4) + ',' + isy.toFixed(4) + ')';
    }, function () {
      lastRingRect = { x: toX, y: toY, w: toW, h: toH };
    });
포커스 링이 미끄러지며 갇히는 라이트박스
새 창에서 열기

07 · 포커스 링이 미끄러지며 갇히는 라이트박스 — 측정 누적면적 39.817% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getBoundingClientRectfocus trapwill-change: transform

08썸네일 줄이 따라 움직이는 라이트박스

라이트박스 하단의 작은 썸네일 띠에서 지금 보고 있는 사진의 썸네일에만 테두리가 표시됩니다. 이미지를 넘길 때마다 그 테두리를 중심으로 띠 전체가 가운데로 오도록 오프셋을 다시 실측하는데, 이는 082의 정적 배열형 슬라이더 썸네일 트랙과 다른 지점으로 여긴 슬라이더 본문이 아니라 이미 열린 라이트박스에 딸린 보조 띠입니다. 여러 장 사진 라이트박스의 하단 내비게이션에 씁니다.

  // 활성 썸네일을 줄 가운데로 오게 하는 이동량을 그때그때 실측한다 — index * 고정폭이 아니다.
  // (082/256 의 정적 배열형 스트립과 다른 지점: 여기는 화면 폭이 바뀌거나 썸네일 크기가 달라져도
  // offsetLeft·clientWidth 실측으로 다시 계산되므로 항상 정중앙에 맞는다.)
  function centerOffsetFor(el) {
    var thumbLeft = el.offsetLeft;
    var thumbW = el.offsetWidth;
    var stripW = strip.clientWidth;
    var trackW = stripTrack.scrollWidth;
    var target = stripW / 2 - thumbLeft - thumbW / 2;
    var minOffset = Math.min(0, stripW - trackW);
    return clamp(target, minOffset, 0);
  }
썸네일 줄이 따라 움직이는 라이트박스
새 창에서 열기

08 · 썸네일 줄이 따라 움직이는 라이트박스 — 측정 누적면적 39.872% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

centerOffsetFor()transform: translateXscroll sync

09모션 줄이기를 즉시 반영하는 라이트박스

모션을 줄이도록 설정돼 있으면 확장·스와이프·플링 같은 움직임을 전부 생략하고, 이미지와 배경이 스위치처럼 즉시 나타나고 사라집니다. 로드 시점에 한 번만 값을 읽는 다른 여덟 개와 달리, matchMedia의 change 리스너로 실제 OS 설정이 바뀌는 순간까지 실시간으로 반영합니다. 접근성 대응이 필요한 모든 이미지 라이트박스에 맞습니다.

  function openFrom() {
    if (open) return;
    open = true;
    var reduceNow = effectiveReduce();
    modeNote.textContent = reduceNow ? '즉시 전환 (모션 줄이기)' : '보통 모션으로 열림';
    fullImg.style.transform = 'scale(.82)';
    fullImg.style.opacity = '0';
    lightbox.style.visibility = 'visible';
    lightbox.setAttribute('aria-hidden', 'false');
    backdrop.style.visibility = 'visible';
    animate(OPEN_MS, function (e) {
      fullImg.style.transform = 'scale(' + (0.82 + 0.18 * e).toFixed(4) + ')';
      fullImg.style.opacity = e.toFixed(3);
      backdrop.style.opacity = (0.74 * e).toFixed(3);
    }, function () {
      closeBtn.focus({ preventScroll: true });
    });
  }
모션 줄이기를 즉시 반영하는 라이트박스
새 창에서 열기

09 · 모션 줄이기를 즉시 반영하는 라이트박스 — 측정 누적면적 22.44% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

matchMediaprefers-reduced-motionchange event

값이 UI를 바꾸는 곳 — 스케일 시작점·속도 임계치·유지시간

상수 하나만 옮겨도 화면에서 받는 인상이 눈에 띄게 갈립니다. 01은 LIGHTBOX_MORPH_SCALE_FROM(0.3)이 썸네일이 시작하는 크기를 장면 폭 대비 몇 %로 잡을지를, 02는 ASPECT_NORM_LO·HI와 SCALE_FROM_MIN·MAX·DIM_MIN·MAX가 이미지 비율에 따라 시작 스케일과 배경 어둡기를 어디까지 벌릴지를, 03은 CAPTION_GAP_MS(120ms)가 이미지가 다 펼쳐진 뒤 캡션이 올라오기까지 쉬는 한 박자를 결정합니다. 04는 SWIPE_COMMIT_RATIO(0.25)·SWIPE_VELOCITY_PX_MS(0.5)가 드래그를 다음 장 전환으로 커밋할 거리·속도 기준을, 05는 ZOOM_SCALE(2.2)이 더블탭했을 때의 배율을, 06은 DRAG_COMMIT_RATIO(0.32)·LIGHTBOX_FLING_VELOCITY_PX_MS(0.5)가 던진 것으로 볼 거리·속도 기준을 정합니다. 07은 LIGHTBOX_FOCUS_RING_MS(220ms)가 포커스 링이 다음 자리로 미끄러지는 시간을, 08은 SYNC_MS(320ms)가 썸네일 띠가 재중앙 정렬되는 데 걸리는 시간을, 09는 실제 설정과 화면 안 스위치를 합친 effectiveReduce() 하나가 애니메이션 전체를 켜고 끄는 스위치 역할을 그대로 결정합니다. 탐색 막대나 썸네일 없이 사진 한 장만 놓고 이미지 확대 보기를 붙이고 싶다면 02나 09처럼 배경 페이드와 스케일만 쓰는 항목이 가장 가볍습니다.

이웃 가지

같은 이미지 확대·갤러리 축에서도 초점은 갈립니다. 그리드에 박힌 이미지가 순서대로 나타나는 전환에 집중한 CSS 이미지 슬라이드 애니메이션 9종은 이미지가 등장하는 방식을 다루지만, 이 편의 01·02·03은 그 이미지가 클릭된 뒤 라이트박스로 확장되거나 페이드되는 전환만 다룬다는 점이 다릅니다. 인라인 캐러셀로 여러 장을 넘기는 이미지 슬라이드 css 9종 — GSAP 없이 반응형까지와도 이어지지만, 이 편의 04·08은 슬라이더 본문이 아니라 이미 열린 라이트박스 안에서 스와이프·썸네일 동기화만 다룬다는 점에서 갈립니다. 돋보기·미니맵처럼 확대 보기 자체가 주제인 이미지 확대 보기 UI 9종 — 사진 파일 없이 만드는 뷰어와 비교하면, 이 편의 05는 라이트박스가 열려 있는 동안의 확대·이동만 다뤄 뷰어 단독 UI보다 범위가 좁습니다.

어디서 깨지는가 — 접근성·reduced-motion·포커스 이동

그리드에 지금 붙어 있는 이미지 대신 실제 사진으로 이 아홉 가지 라이트박스 전환을 확인하려면, zip 비밀번호 nhfnnp8k를 입력해 vanilla·react 코드를 각각 열어보면 됩니다.

06의 endDrag()가 실제로 겪은 함정은 거리 조건 하나만으로 닫힘을 판정했을 때 나옵니다 — curY > h * DRAG_COMMIT_RATIO만 보면, 화면 위쪽에서 짧고 빠르게 아래로 튕기듯 던진 동작이 이동 거리 자체는 짧아 커밋되지 않고 그대로 원래 자리로 되돌아옵니다. 그래서 06은 거리 조건과 Math.abs(velocityY) > LIGHTBOX_FLING_VELOCITY_PX_MS라는 속도 조건을 OR로 묶어, 둘 중 하나만 넘어도 닫히게 합니다.

reduce 상태에서 각자 무엇을 멈추는가

01~08은 로드 시점에 window.matchMedia('(prefers-reduced-motion: reduce)').matches를 한 번만 읽어 reduce 변수에 고정합니다. reduce가 참이면 01·02는 각각 FLIP 위치 보간과 스케일·배경 전환을 건너뛰고 최종 상태로 바로 나타나거나 사라지며, 03은 확대 전환만 멈추되 캡션이 이미지보다 한 박자 늦게 뜨는 순서 자체는 그대로 유지한 채 둘 다 즉시 최종 위치에 나타납니다. 04·08은 각각 스와이프 전환과 썸네일 띠 재정렬 애니메이션만 멈추고 다음 이미지·오프셋으로 바로 건너뛰며, 05는 확대·이동 트윈이 멈추는 것은 물론 자동 시연의 panLoop() 자체가 아예 실행되지 않아 도는 동작이 하나도 남지 않습니다. 06은 드래그를 따라가는 실시간 이동은 그대로 두되(포인터 좌표를 직접 대입하는 부분이라 애초에 트윈이 아닙니다) 손을 뗀 뒤의 스프링백·플링 전환만 즉시 스냅으로 바뀌고, 07은 포커스 링이 다음 요소로 미끄러지지 않고 그 자리로 바로 이동합니다. 09만 다릅니다 — 로드 시점 판정 대신 effectiveReduce()가 실제 OS 설정과 화면 안 시뮬레이션 스위치를 둘 다 실시간으로 반영해, 스위치를 눌러도 즉시 전환 여부가 바뀌는 유일한 항목입니다.

키보드·스크린리더로 확인할 것

아홉 개 모두 role="dialog"와 aria-modal="true"를 라이트박스 요소에 달아 열려 있는 동안 그 안이 별도의 대화상자임을 알리고, Escape 키로 닫히는 동작도 공유합니다. 07은 여기서 한 겹 더 나아가 탭이나 화살표로 다음 컨트롤로 옮길 때 끝에서 Tab 하면 처음으로, 처음에서 Shift+Tab 하면 끝으로 감기는 진짜 포커스 트랩을 구현해 초점이 라이트박스 밖으로 새지 않고, 04·05·06은 pointerdown·pointermove·pointerup·pointercancel과 별개로 화살표 키나 더블탭으로도 같은 조작을 할 수 있어 마우스가 없어도 됩니다. dialog 역할과 Pointer Events의 정확한 동작은 MDN 문서에 정리돼 있습니다.

변형 세 가지와 접근성

변형 값 느낌
썸네일 확장 시작 스케일 넓히기 01 LIGHTBOX_MORPH_SCALE_FROM 0.3 → 0.6 시작 크기를 장면 폭의 30%에서 60%로 넓히면 썸네일이 이미 커진 상태에서 시작해 펼쳐지는 거리가 짧아지고 커지는 느낌이 약해진다
닫힘 판정 스와이프 속도 임계치 낮추기 06 LIGHTBOX_FLING_VELOCITY_PX_MS 0.5 → 0.2 속도 임계치를 0.5에서 0.2로 낮추면 더 느리게 놓아도 던진 것으로 인정돼 닫히는 판정이 훨씬 쉬워진다
포커스 링 이동 시간 늘리기 07 LIGHTBOX_FOCUS_RING_MS 220 → 400 이동 시간을 220ms에서 400ms로 늘리면 포커스 링이 다음 자리로 더 천천히 미끄러져 눈으로 따라가기 쉬워진다

세 변형 다 마크업이나 리스너 배선은 손대지 않고 상수 하나씩만 옮긴 값이라, role·aria-modal·Escape 닫기 같은 접근성 속성과 reduce 분기는 변형과 상관없이 그대로 살아 있습니다. 시작 스케일이나 속도 임계치, 이동 시간을 바꿔도 스크린리더가 읽는 값이나 동작 줄이기 대응은 깨지지 않습니다.

FAQ

아홉 개 다 실제 사진 파일이 필요한가요?

아니요. 아홉 개 모두 이미지 영역을 자체 CSS 그라디언트로 그려, 사진 파일이 하나도 없어도 데모가 그대로 동작합니다. 실제 서비스에 붙일 때는 fullImg에 해당하는 요소의 배경을 실제 나 사진 URL로만 바꾸면 되고, 이동·확대·전환 계산은 이미지 내용과 무관하게 좌표와 크기만 봅니다.

이 라이트박스를 css 모달 팝업으로 써도 되나요?

부분적으로는 됩니다. role="dialog"·aria-modal="true"·Escape 닫기 같은 구조는 일반 모달 팝업과 같지만, 09를 뺀 나머지는 시작 위치·전환 방식이 이미지 하나를 확대해서 보여주는 데 맞춰져 있어 폼이나 안내문처럼 내용이 긴 팝업에는 03의 캡션 슬라이드 정도만 그대로 옮겨 쓰는 편이 자연스럽습니다.

setTimeout·setInterval 대신 requestAnimationFrame만 써도 되나요?

가능합니다. 03의 캡션 지연(CAPTION_GAP_MS)처럼 실제 시간 간격이 필요한 곳은 setTimeout이 맞고, 그 외 값이 바뀌는 구간은 이미 animate() 안에서 requestAnimationFrame 루프를 돌고 있어 따로 바꿀 부분이 없습니다. 값을 계산하는 함수(FLIP 델타·속도 판정·실측 오프셋)와 언제 그 값을 부르는지는 아홉 개 모두 항상 분리돼 있습니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.