왜 3초 만에 떠날까요? 상세 첫 화면 수리법

상세페이지를 열자마자 뒤로 가는 비율이 높다면, 첫 화면(스크롤 전 영역)에서 이미 판단이 끝났을 가능성이 큽니다. 저도 식품몰을 운영하며 첫 화면을 바꿨을 때 체류와 클릭이 바로 달라지는 걸 여러 번 확인했습니다. 아래 점검표대로 1시간 내 수정해보면 원인과 해법이 분명해집니다.

고객은 첫 3초에 무엇을 확인하나요?

모바일 첫 화면(대략 640~800px 높이)에서 고객은 1) 이게 무엇인지, 2) 나에게 맞는지(사이즈·맛·호환 등), 3) 가격·혜택이 납득되는지, 4) 신뢰할 수 있는지, 5) 지금 무엇을 눌러야 하는지 순서로 훑습니다. 시선은 이미지→가격/혜택 숫자→버튼 순으로 F패턴에 가깝게 움직입니다. 이 5가지를 첫 화면에서 한 번에 보여주지 못하면 스크롤 전에 이탈합니다. 저희 식품몰 기준으로 첫 화면에 ‘무엇/얼마/언제도착’을 넣었을 때 7일 평균 체류가 9.6초→12.8초, 장바구니 클릭률이 0.9%→1.3%로 움직인 적이 있습니다(상황에 따라 다를 수 있습니다).

3초 만에 떠나게 만드는 흔한 첫 화면 오류는?

1) 느림: LCP(최대 콘텐츠 표시) 3.0초 초과, 첫 이미지 용량 500KB 이상, 합쳐서 2MB 넘는 리소스. 2) 정보 과잉: 자동 재생 배너·캐러셀, 상단 팝업 2개 이상으로 주의 분산. 3) 핵심 정보 숨김: 가격·재고·배송일이 스크롤 아래에 있어 ‘얼마/언제’를 즉시 못 봄. 4) 선택 장애: 옵션 미선택 기본값으로 바로 구매 불가, 오류 메시지가 접혀 있음. 5) 가독성 저하: 본문 12px, 대비비 3:1 이하, 배경 위 흰 글자. 6) 맥락 없는 사진: 사이즈·사용 장면이 없어 실제 크기·질감 추정 불가. 7) 신뢰 단서 부재: 리뷰 개수, 교환·반품 기준, 사업자·배송 정책 링크 없음.

첫 화면은 어떻게 재구성하나요(모바일 기준)?

권장 순서와 수치입니다. 1) 대표 이미지 1장(4:5 또는 1:1, 1200px 긴 변, WebP 120~200KB, 손·인체·사용 장면으로 크기 맥락 제공). 2) 상품명 1줄: [카테고리] 핵심 효익/스펙(16~24자 예: [한식 간편식] 2인분 7분 완성 김치찌개). 3) 서브라인 1줄: 용량/호환/대상 요약(예: 한 팩 600g, 1~2인, 무항생제 돼지고기). 4) 가격 블록: 판매가 크게, 할인가/쿠폰 1개만 요약, 적립 안내는 접기. 5) 신뢰·배송 요약줄: ★평점(리뷰수), 오늘 16시 전 주문 시 내일 도착(수도권), 반품 기준 링크. 6) 옵션 선택: 베스트셀러 1개 자동 선택, 다른 옵션은 펼치기. 7) 주요 버튼 1개: 구매하기(44~56px 높이, 대비비 4.5:1 이상), 보조 버튼은 텍스트 링크. 상단 고정 장바구니/구매 고정바는 스크롤 25% 이후 노출을 권장합니다.

30분 내 점검·수정 체크리스트는?

1) 3초 테스트(5분): LTE(4G)로 시크릿 창에서 열고 3초 안에 ‘무엇/얼마/언제도착/어디누름’을 말할 수 있는지 동료 2명에게 확인합니다. 2) 속도(10분): PageSpeed로 LCP 2.5초 이하, 첫 이미지 200KB 이하로 압축(WebP/AVIF) 후 재측정. 3) 정보 정리(10분): 상품명 1줄·서브 1줄로 재작성, 가격 블록에서 쿠폰 1개만 노출, 리뷰★·배송·반품 한 줄 추가. 4) 선택·버튼(5분): 옵션 1개 자동 선택, 오류 문구는 붉은색 14px 이상, 구매 버튼 단독 강조. 팝업은 최초 5초 동안 비노출로 지연합니다. 변경 전후 7일간 상세 진입 대비 장바구니 클릭률(예: 0.8%→1.1%), 25% 스크롤 도달률(예: 68%→80%)을 같은 요일로 비교해 효과를 확인합니다.