commerce 상세페이지들을 보면 대부분 상품 상세 정보에서 이미지를 사용한다. 그리고 이 이미지들은 height가 굉장히 긴 편이다. 그런 경우 상세정보가 궁금하지 않고 다른 것이 궁금한 사용자들에게 스크롤을 많이 해야 원하는 내용을 볼 수 있다는 불편함이 생긴다. 물론 header를 통해 원하는 위치에 바로 이동하게 기능을 제공하지만, 사용자들이 모든 기능을 다 알고 있지 않을 수도 있고 일반적으로 아래로 내려간다는 스크롤을 이용해서 내려가기 때문에 스크롤을 최소화하여 다음 section이 표시되는 것도 중요하다고 생각이 되었다.
이를 상세 정보에서 주로 사용되는 사진 더보기 기능을 활용해서 사용자 경험을 향상시키고자 이 기능을 구현하게 되었다.
여기서 필요한 부분은 다음과 같다.
- 모든 이미지가 이미지 height에 상관없이 같은 크기만큼만 표시하고 hidden 되어야 함.
- hidden 되는 부분이 자연스럽고, 더 내용이 있음을 간접적으로 표시하기 위해 그라데이션 효과를 추가해야 함.
- 더보기 버튼을 클릭했을 때, 전체 이미지가 표시되고 그라데이션이 제거되어야 함.
전체 코드는 다음과 같다.
<div className="relative w-full">
{!isMoreView && (
<div className="absolute inset-0 bg-gradient-to-t from-white to-transparent h-[450px] pointer-events-none">
{/* 이미지 그라데이션 */}
</div>
)}
<Image
src={productDetail}
alt="상세정보"
width={0}
height={0}
sizes="100vw"
className={`w-full ${isMoreView ? 'h-auto object-contain' : 'h-[450px] overflow-hidden object-cover object-top'}`}
/>
{!isMoreView && (
<button
className="absolute bottom-0 left-0 w-full bg-white py-[8px] rounded-3xl border drop-shadow-sm"
onClick={() => setIsMoreView(true)}
>
더보기
</button>
)}
</div>상세 정보 이미지
이미지는 원본 이미지 하나만을 사용한다. 중요한 건 모든 상세 정보 이미지의 크기가 다양하기 때문에 특정 값으로 둘 수 없다. 여기서 원하는 건 이미지 원본을 그대로 표시하기를 원하는 것이기 때문에 fill 속성을 사용할 수도 없다. 원본 사이즈 그대로 표시하기 위해서 width와 height 값을 0으로 설정해두고, sizes를 100vw로 설정해두었다.
이미지의 height는 더보기를 누르기 전과 후가 달라야 하는데, 더보기를 누르기 전에는 450px, 누른 후에는 전체 height여야 한다. 더보기 상태를 알려주는 isMoreView 값을 통해 누르기 전에는 h-[450px], 누른 후에는 h-auto를 사용해주었다. 더보기를 누르기 전에 이미지는 잘린 상태가 되어야 한다. 이를 위해 overflow-hidden을 적용해주면, 이미지가 아래와 같이 변하게 된다.
즉, 설정된 height 값에 따라 이미지가 원본 비율을 유지하고자 한다. 이를 해결해주기 위해서 object-cover를 적용해주었고, 이미지는 중앙 부분이 아닌 가장 윗 부분부터 표시가 되어야 하기 때문에 object-top을 추가로 설정해주어서 맨 위부분 부터 표시되고 height를 벗어나는 부분이 overflow 될 수 있게 해주었다.
※ 이미지는 초기 로딩과 같은 성능 개선을 위해서라면 처음 이미지는 450px 크기로 잘린 이미지를 사용하고, 더보기를 클릭 했을 때 원본이미지로 하는 것이 더욱 좋을 것이다. 다만, 이렇게 할 경우 DB에 추가적인 데이터를 가지고 있어야 하기도 하고, 모든 상품에 대해 그러한 이미지들을 생성해주어야 해서 프로젝트 규모상 생략되었다.
그라데이션
{!isMoreView && (
<div className="absolute inset-0 bg-gradient-to-t from-white to-transparent h-[450px] pointer-events-none">
{/* 이미지 그라데이션 */}
</div>
)}그라데이션 효과는 투명하다가 아래로 갈 수록 흰 색이 되는 느낌으로 적용해주었다. 이미지 위에 존재해야 하므로 absolute를 적용해주었다.
