이번 작업은 카페24 쇼핑몰 관리자 페이지에서 상품으로 이미지를 등록 후, 모듈을 활용해 만든 서브페이지에서 썸네일 이미지의 화질이 저하된다는 문제를 해결해드려야 했어요.
추가로, 반응형 디자인에서 모바일 화면에서의 비주얼 요소 레이아웃을 1열에서 2열로 수정이 필요하다고 하셨죠.
상품 썸네일 이미지 등록이 문제일까?
사실 상품의 상세페이지가 아닌 서브페이지에 활용할 비주얼 요소, 즉 메인 이미지를 상품 등록의 이미지 업로드 기능을 활용하는 것은 처음 보는 사례입니다.
물론 사용자인 쇼핑몰 담당자가 직접 이미지를 업로드할 수 있는 직관적인 방법이긴 하지만 적절하지 않은 기능활용이라고 할 수 있어요.
이런 기능이 많아질수록 쇼핑몰을 운영하는데 있어서 점점 방해가 되는 요소로 작용하기도 합니다.
저라면 상품도 아니고 배너도 아닌 서브페이지에 활용할 이미지라면 그냥 이미지 업로드 가이드를 전달드리고 이미지를 업로드하고 활용하도록 할 것 같네요.
상품 이미지 깨질 때 해결 방법
먼저 상품 등록 페이지에서 등록한 이미지가 화질이 저하되고, 아무리 화질이 좋고 큰 이미지를 넣어도 수정이 되지 않는 것은 상품 상세 정보 등록의 이미지 사이즈 설정과 관계가 있습니다.
확인 방법은 카페24 쇼핑몰 관리자 페이지에서 해당 상품의 등록 또는 수정 페이지를 열고
“이미지 정보 > [이미지 사이즈 변경] 클릭 > 이미지 사이즈 변경 팝업”
에서 설정된 이미지 사이즈를 확인할 수 있습니다.
아래 예시 상품을 보면 모두 1999px로 되어있는데, 이럴 경우 1999px 이상의 이미지를 등록한다고 해도 1999px로 자동으로 리사이징이 되어서 업로드가 됩니다. 이 사이즈보다 작은 이미지 역시 1999px로 리사이징이 되죠.
두 경우 모두 이미지가 원하는 퀄리티로 노출되지 않을 수가 있습니다.
의뢰인의 경우에는 이 이미지를 페이지의 메인 비주얼 요소로 사용하고 있어서 더욱 문제가 컸습니다. 아무리 큰 이미지를 넣어도 깨져보이는 거죠. 이미지 사이즈가 고정되어있기 때문에요.
이미지 사이즈 변경시 주의점
또 한 가지 문제점은 여기서 이미지 사이즈 변경을 해서 수정할 경우에는 모든 상품 이미지의 설정이 변경된다는 점이에요.
물론 기존에 등록된 이미지들은 설정 전에 리사이징이 된 상태로 등록이 되었기때문에 그대로 활용이 가능하지만, 앞으로 업로드를 할 때는 새로운 이미지 사이즈에 맞춰서 작업을 해야하죠.
이 부분에 대해서 설명을 해드리니, 설정을 변경하고 싶지는 않다고 하셔서 이미지 업로드를 해서 수정하는 방법으로 작업을 해드렸습니다. 방식의 변경으로 해상도 저하 문제가 해결 되었습니다.
이렇듯 서브페이지와 같이 특정페이지에서 사용되는 이미지의 경우에는 파일업로드를 통해서 이미지를 업로드하여 사용하는 것을 권장합니다.
이런 기능과 연계된 디자인 요소의 수정작업은 운영과도 관계가 있기 때문에 쇼핑몰 운영에 대한 이해가 바탕이 되어야합니다.
1열인 상품의 레이아웃은 2열로 변경하고 자연스럽게 간격 조절까지 해드렸습니다.
