Web Guide갤러리라이트박스이미지 확대
갤러리와 라이트박스 UX
사진을 눌렀는데 아무 반응이 없으면 방문자는 당황합니다.
확대해서 보고 싶은 이미지는 확대되어야 합니다. 그리고 돌아오기도 쉬워야 합니다.
01확대가 필요한 경우
모든 이미지를 확대할 수 있게 할 필요는 없습니다. 자세히 봐야 하는 이미지에만 적용하면 됩니다.
반대로 확대가 필요한데 안 되면 불편합니다.
제품 사진재질이나 디테일을 확인하려 합니다.
도면·평면도작게는 볼 수 없습니다.
인증서·증빙글자를 읽어야 합니다.
현장 사진규모나 상황을 자세히 보려 합니다.
불필요한 경우장식용 배경 이미지, 아이콘, 이미 충분히 큰 이미지.
02확대 화면 설계
이미지를 클릭하면 어두운 배경 위에 크게 뜨는 방식이 일반적입니다. 이때 닫기와 이동이 쉬워야 합니다.
특히 모바일에서 닫기 버튼이 작으면 빠져나오지 못하는 느낌을 줍니다.
닫기 버튼
충분히 크게. 오른쪽 위가 관례입니다.
배경 클릭
이미지 밖을 누르면 닫히게 합니다.
키보드
이스케이프로 닫고, 방향키로 이동할 수 있게.
이전·다음
여러 장이면 이동 버튼을 둡니다.
순번 표시
'3 / 12'처럼 몇 번째인지 보여줍니다.
설명
이미지 설명이 있으면 함께 표시합니다.
03모바일에서 다르게
모바일에서는 손가락으로 확대·축소하고 밀어서 넘기는 것이 자연스럽습니다. 버튼만 있으면 불편합니다.
또 화면이 작아 이미지가 충분히 크게 보이지 않을 수 있습니다.
점검 항목
핀치 확대
손가락으로 확대·축소가 되어야 합니다.
스와이프 이동
옆으로 밀어 다음 이미지로 넘어가게 합니다.
큰 닫기 버튼
손가락으로 쉽게 누를 수 있게.
아래로 밀어 닫기
익숙한 동작. 제공하면 편합니다.
가로모드
돌렸을 때 이미지가 더 크게 보이게 합니다.
04성능 고려
갤러리에 이미지가 많으면 페이지가 무거워집니다. 목록에서는 작은 썸네일만 불러오고, 확대할 때 큰 이미지를 가져오는 방식이 필요합니다.
또 화면에 보이지 않는 이미지는 나중에 불러오게 하면 초기 로딩이 빨라집니다.
원본을 모두 불러올 때
페이지가 매우 무거움 · 초기 로딩이 느림 · 데이터 소모 · 모바일에서 특히 문제
썸네일 + 지연 로딩
목록은 작은 이미지만 · 화면에 보일 때 불러옴 · 확대 시 원본 요청 · 빠르고 가벼움
CHECK POINT
□ 확대가 필요한 이미지에만 적용했는가
□ 클릭하면 확대된다는 것을 알 수 있는가
□ 닫기 버튼이 충분히 큰가
□ 배경을 클릭해도 닫히는가
□ 키보드로 닫고 이동할 수 있는가
□ 여러 장이면 순번이 표시되는가
□ 모바일에서 핀치 확대와 스와이프가 되는가
□ 목록에서 썸네일만 불러오는가
#갤러리#라이트박스#이미지 확대#썸네일#지연 로딩#모바일 제스처#성능#홈페이지 디자인#웹비스타#홈페이지 제작