Image & Media

드래그할 수 있는 구분선을 사이에 두고 한쪽에는 한 이미지, 다른 쪽에는 다른 이미지가 보입니다.

[적용할 곳]에 비포 애프터 슬라이더(Before-After Slider)를 넣어 줘. 이미지 비교 슬라이더(image comparison slider), 컴페어 슬라이더(compare slider)라고도 불러.
두 이미지를 겹쳐 두고, 세로 구분선을 드래그하면 한쪽은 더 많이, 다른 쪽은 덜 보이게 해 줘. 구분선은 지연 없이 포인터를 바로 따라오게.
구분선은 가운데에서 시작하고, 터치와 방향키로도 움직일 수 있게 해 줘.

포인터를 올리면 이미지가 틀 안에서 커지고, 때로는 포인터를 따라 이동합니다.

[적용할 곳]에 호버 줌(Hover Zoom) 효과를 넣어 줘. 이미지 줌 온 호버(image zoom on hover), 줌 팬(zoom-pan)이라고도 불러.
포인터가 이미지 위에 있는 동안 틀 크기는 그대로 두고 이미지가 틀 안에서 느리고 부드럽게 커지고, 벗어나면 부드럽게 돌아오게 해 줘.
이미지는 틀에 맞춰 잘라 레이아웃 밖으로 넘치지 않게 하고, 키보드 포커스에도 같은 줌을 보여 줘.

덮개가 줄어들거나 마스크 가장자리가 넓어지면서 이미지가 드러납니다.

[적용할 곳]에 이미지 리빌 와이프(Image Reveal Wipe)를 넣어 줘. 마스크 리빌(mask reveal), 클립 패스 리빌(clip-path reveal)이라고도 불러.
이미지가 스크롤로 화면에 들어오면 덮개가 한쪽에서 걷히며 스크롤에 맞춰 부드럽게 이미지를 드러내게 해 줘. 화면을 벗어나기 한참 전에 완전히 보이도록.
레이아웃이 튀지 않게 이미지 자리를 미리 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 이미지를 처음부터 다 보여 줘.

정지 이미지가 틀 안에서 천천히 확대되며 움직입니다.

[적용할 곳]에 켄 번스 효과(Ken Burns Effect)를 넣어 줘. 슬로 팬 앤 줌(slow pan and zoom)이라고도 불러.
이미지마다 보이는 동안 아주 천천히 한 방향으로만 확대되며 흘러가다가, 다른 방향으로 움직이는 다음 이미지로 크로스페이드되게 해 줘. 차분하고 끊김 없이.
어느 순간에도 이미지가 틀 전체를 덮어 가장자리가 보이지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 이미지를 멈춰 둬.

썸네일이 제자리에서 커지며 어두워진 배경 위 가운데에 크게 펼쳐집니다.

[적용할 곳]에 라이트박스 줌(Lightbox Zoom)을 넣어 줘. 이미지 줌 오버레이(image zoom overlay), 미디엄 스타일 줌(Medium-style zoom)이라고도 불러.
썸네일을 클릭하면 제자리에서 부드럽게 커져 가운데 큰 화면이 되고 뒤쪽 페이지는 어둡게 물러나게 해 줘. 닫으면 같은 자리로 다시 줄어들게.
Esc 키나 배경 클릭으로 닫히게 하고, 열려 있는 동안 포커스를 큰 화면 안으로 옮기고, 닫은 뒤에는 썸네일로 돌려 줘.

둥근 렌즈가 포인터를 따라다니며 이미지 일부를 확대해 보여 줍니다.

[적용할 곳]에 돋보기(Magnifier Lens)를 넣어 줘. 렌즈(lens), 루페(loupe)라고도 불러.
둥근 렌즈가 지연 없이 포인터 바로 아래에 놓이고, 그 아래 이미지 부분을 확대해 보여 주게 해 줘.
확대된 화면은 포인터 아래 정확한 지점과 어긋나지 않게 맞추고, 터치 기기에서는 손가락으로 이미지를 누르고 있는 동안 렌즈를 보여 줘.