12CODE
Q

홈페이지 이미지에 마우스를 따라다니는 돋보기(확대) 효과는 어떻게 넣나요

50개 영역 중 9위 · 184건

이런 질문도 같은 답입니다

홈페이지 이미지에 돋보기 넣는 방법이 궁금합니다.

결론부터

플랫폼에 따라 방법이 다릅니다.

답변

3단계
01

카페24는 별도 코드 작업 없이 바로 켤 수 있습니다 — [상점/운영 > 상점운영관련설정 > 상점 운영방식 설정] 페이지에서 '상품 이미지 부분 확대 보기 스크립트' 기능을 체크하면 마우스를 올린 부분이 확대되고, 확대보기 테두리 색상도 지정할 수 있습니다.

02

아임웹·고도몰은 사정이 조금 다릅니다. 카페24와 동일한 '기본 제공 마우스오버 확대(돋보기)' 메뉴가 있는지는 이번 조사로 공식 문서에서 확인되지 않았습니다 — 아임웹은 마우스오버 시 이미지 자체를 다른 이미지로 전환하는 기능은 있지만, 돋보기형 부분 확대와는 다른 기능입니다. 각 플랫폼의 앱스토어·부가기능 마켓에서 '이미지 확대', '돋보기', '줌' 키워드로 검색해 제공되는 위젯을 확인하거나, 고객센터에 직접 문의해보시는 걸 권합니다.

03

플랫폼에 기본 기능이 없다면 직접 구현하는 방법도 있습니다. jQuery 기반 이미지 줌 라이브러리를 상세페이지의 코드 삽입 영역(HTML/CSS/스크립트 직접 입력 기능)에 넣어 구현하는 방식이 실무에서 널리 쓰입니다. 다만 코드를 직접 넣는 작업이라 테마와 충돌할 수 있으니, 적용 전 테스트 페이지에서 먼저 확인해보시길 권합니다.

같이 보면 좋은 게시글

3편

12CODE ACADEMY

체계적으로 배우고 싶다면

퍼포먼스 광고 운영 과정에서 이 판단 기준을 순서대로 다룹니다.

과정 둘러보기 →

×N의 의미

같은 취지의 질문이 몇 번 반복됐는지입니다. ×10을 넘으면 개인의 실수가 아니라 구조적으로 헷갈리게 설계된 지점이라고 보는 편이 정확합니다.

MKT TOOLS

실무자를 위한 무료 도구

카피 글자수 검사, CPC·ROAS 계산기, UTM 생성기까지.

워크스페이스 열기 →