출처는 디자인 케이스북 D2 · Jeton. 광고 랜딩 /surl/P/88은 첫 화면(985px)에서 48.6%가 빠져나가는데,
내려간 사람은 잘 삽니다(구매하기 클릭 1,055회). 첫 화면 아래에 뭔가 더 있다는 신호가 없는 것이 원인 가설이고,
이 모듈이 가장 싸게 시험할 수 있는 장치입니다. 개선 전 기준선 = 10% 스크롤 통과율 51.4%.
① 알약 배지 의도 가장 명확
<!-- 감싸는 박스에 position:relative 필수 -->
<div class="ij-sh1">아래로 더 보기 <i></i></div>
추천 상황 — 광고 랜딩처럼 이탈이 큰 곳. 글자가 있어 "더 있다"가 즉시 읽힘. 문구는 "후기 320건 보기"처럼 바꿔도 됨.
② 가는 세로선 + 흐르는 점 가장 조용함
<div class="ij-sh2"></div>
추천 상황 — 브랜드 톤(Quiet Premium)에 가장 가까움. 룽고·롤리오처럼 조용한 페이지. 다만 신호가 약해 이탈 개선폭은 ①보다 작을 수 있음.
③ 겹화살표 글자 없음
<div class="ij-sh3"><i></i><i></i></div>
추천 상황 — 영문·다국어 페이지. 번역이 필요 없음.
④ 홈·스킨 전용 — 스크롤하면 사라지는 버전 JS 포함
홈(skin8 layout·index.html)은 스킨 파일이라 <script>가 안 지워집니다. 그래서 홈에서는 화면에 고정해두고
조금만 내리면 사라지게 할 수 있습니다. ①~③은 히어로 안에 갇혀 있지만, 이 버전은 화면 하단에 고정되어 있다가
60px만 내려가면 부드럽게 사라집니다. 상세(description)에는 쓰지 마세요 — script가 지워져 힌트가 영영 안 사라집니다.
홈 히어로 (고정 → 60px 스크롤 시 사라짐)
아래로 더 보기
<!-- 히어로 바로 뒤, body 아무 곳에나 -->
<div class="ij-sh-fix" id="ijShFix">아래로 더 보기 <i></i></div>
<style>
.ij-sh-fix{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:40;
display:inline-flex;align-items:center;gap:7px;padding:8px 15px 8px 16px;
border-radius:30px;background:rgba(255,255,255,.86);border:1px solid rgba(44,62,45,.14);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;
font-size:13px;font-weight:600;color:#2C3E2D;letter-spacing:-.2px;white-space:nowrap;
box-shadow:0 2px 10px rgba(0,0,0,.06);
opacity:1;transition:opacity .45s ease, transform .45s ease;
-webkit-animation:ijShBob 2.1s ease-in-out infinite;animation:ijShBob 2.1s ease-in-out infinite}
.ij-sh-fix i{display:block;width:7px;height:7px;border-right:1.6px solid #2C3E2D;
border-bottom:1.6px solid #2C3E2D;transform:rotate(45deg);margin-top:-3px}
.ij-sh-fix.ij-gone{opacity:0;-webkit-animation:none;animation:none}
@-webkit-keyframes ijShBob{0%,100%{-webkit-transform:translateX(-50%) translateY(0)}50%{-webkit-transform:translateX(-50%) translateY(6px)}}
@keyframes ijShBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@media (prefers-reduced-motion: reduce){.ij-sh-fix{-webkit-animation:none!important;animation:none!important}}
</style>
<script>
(function(){
var el=document.getElementById('ijShFix'); if(!el) return;
function chk(){
var y=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
if(y>60) el.classList.add('ij-gone'); else el.classList.remove('ij-gone');
}
// capture:true = cafe24 내부 컨테이너 스크롤도 잡음 (ij-fade-io와 같은 이유)
document.addEventListener('scroll',chk,true);
window.addEventListener('scroll',chk,{passive:true});
chk();
})();
</script>
왜 fixed인가 — 홈 히어로는 화면을 꽉 채우는 경우가 많아 absolute로 두면 히어로 높이에 따라 위치가 흔들립니다. fixed로 화면 기준에 두고 JS로 끄는 게 안정적입니다. pointer-events:none이라 밑에 있는 버튼 클릭을 막지 않습니다.
어디에 뭘 쓰나
상품 상세 (description·mdesc) → ①②③ 순수 CSS만
· cafe24가 <script>를 지움. JS 버전 넣으면 힌트가 영영 안 사라짐
· 첫 적용 대상 = 광고 랜딩 /surl/P/88 (10% 스크롤 통과율 51.4%)
홈·스킨 파일 (skin8/layout, index.html) → ④ JS 버전
· 스킨은 script가 살아있음. 60px 내리면 사라져서 깔끔함
붙이는 법 (①②③ 공통)
1. 첫 화면을 감싸는 요소에 position:relative 를 준다
2. CSS 블록(.ij-sh1 ~ @media reduce)을 <style> 안에 넣는다
3. 히어로 안쪽 맨 끝에 해당 <div> 한 줄을 넣는다
★ 부모에 overflow:hidden 이 있으면 잘린다 → overflow:clip 으로 바꿀 것
⚠️ ①②③에는 사라지는 처리가 없습니다. 상세에서는 JS를 못 쓰기 때문인데,
position:absolute로 첫 화면 하단에 두면 스크롤과 함께 화면 밖으로 올라가므로 결과는 같습니다.
①②③을 fixed나 sticky로 바꾸면 계속 따라다니니 그럴 땐 ④를 쓰세요.