12CODE
지금 읽는 곳 퍼스트뷰가 답해야 하는 세 가지 질문은 무엇인가 1 / 6
12code 라이브러리 아티클 표지. 상세페이지 첫 화면(퍼스트뷰)에 반드시 들어가야 할 3가지 요소

상세페이지 첫 화면(퍼스트뷰)에 반드시 들어가야 할 3가지 요소

첫 화면에 무엇을 넣을지보다, 무엇을 빼야 세 가지가 들어가는지가 실제 작업입니다.

이 과목 04 / 25편 중급 3분
과목 ID211
트랙S2
모듈이커머스 운영·수익성 관리
레슨04
난이도중급
플랫폼공통
발행일2026-09-01
검토일2026-09-01
관련 과목205 · 19 · 26
출처5건
핵심요약5개
01

퍼스트뷰에 넣어야 할 세 가지는 무엇인지, 왜 여기서 사야 하는지, 지금 무엇을 누르면 되는지다

02

폴드 경계를 픽셀 수치로 고정하는 공식 표준은 없으므로 실기기 프리뷰로 직접 확인해야 한다

03

국내 온라인쇼핑 거래액의 대부분이 모바일에서 발생하므로 퍼스트뷰 설계 기준은 모바일이다

04

가격·배송비·혜택 조건은 첫 화면에 쓰는 순간 표시광고법상 실증 책임이 따라붙는다

05

첫 화면 아래에 콘텐츠가 더 있다는 신호를 주지 않으면 가짜 바닥 현상으로 이탈이 생긴다

01

퍼스트뷰가 답해야 하는 세 가지 질문은 무엇인가

첫 화면은 디자인 영역이 아니라 응답 영역입니다. 방문자가 스크롤을 시작할지 뒤로가기를 누를지 결정하는 구간이므로, 그 짧은 시간에 세 가지 질문에 답해야 합니다. 이게 무엇인가, 왜 하필 여기서 사야 하나, 지금 무엇을 누르면 되나입니다.

첫째는 상품 정체입니다. 대표 이미지와 상품명이 담당하는데, 이미지가 분위기 컷 한 장뿐이면 정체가 전달되지 않는 경우가 많습니다. 둘째는 구매 이유입니다. 가격, 구성, 배송 조건, 차별점 중 이 상품에서 가장 강한 하나를 골라 문장으로 박습니다. 셋째는 행동 지시입니다. 폴드 위에 최소 하나의 구매 버튼을 두는 배치가 일반적으로 권장됩니다.

02

첫 화면의 범위를 어떻게 확정하나

폴드는 스크롤 없이 화면에 보이는 경계선을 뜻합니다. 여기서 자주 나오는 질문이 그 경계가 몇 픽셀이냐는 것인데, 이를 고정 수치로 정하는 국내외 공식 표준은 없습니다. 기기와 해상도, 브라우저 주소창 높이에 따라 첫 화면 영역이 달라지기 때문입니다.

그래서 실무에서는 수치 대신 확인 절차를 씁니다. 최근 한 달 트래픽 기준으로 방문이 가장 많은 기기 상위 3종을 뽑고, 그 해상도에서 상세페이지를 열어 첫 화면에 무엇까지 들어오는지 캡처합니다. 국가데이터처 온라인쇼핑동향조사 기준으로 온라인쇼핑 거래액 중 모바일 비중이 2026년 초 기준 75에서 78퍼센트 구간에 있는 만큼, 기준 화면은 데스크톱이 아니라 모바일로 잡는 것이 맞습니다.

03

세 요소가 안 들어갈 때 무엇부터 빼야 하나

현실의 상세페이지 첫 화면은 이미 꽉 차 있습니다. 배너, 쿠폰 팝업, 앱 설치 유도, 상단 고정 공지, 브랜드 스토리 문구가 자리를 나눠 갖고 있는 경우가 흔합니다. 이때 판단 기준은 그 요소가 앞의 세 질문 중 하나라도 답하는가입니다.

답하지 않는 요소는 폴드 아래로 내립니다. 특히 화면을 덮는 쿠폰 팝업은 첫 화면 전체를 가리므로 세 요소를 모두 무력화합니다. 닫기 버튼이 작거나 위치가 애매하면 이탈 원인 자체가 되기도 합니다. 쿠폰을 알리고 싶다면 팝업 대신 가격 옆 한 줄 표기로 옮기는 편이 안전합니다.

04

첫 화면에 쓴 문구에 어떤 책임이 따라붙나

첫 화면 문구는 가장 눈에 잘 띄는 광고 문구이기도 합니다. 표시·광고의 공정화에 관한 법률 제3조는 거짓·과장, 기만적, 부당비교, 비방 광고를 금지하고, 같은 법 제5조는 광고에서 제시한 주장에 대해 광고주에게 실증 자료를 준비·제출할 입증책임을 지웁니다.

특히 조심할 표현이 최상급입니다. 국내 1위, 최고, 유일 같은 배타적 표현은 공인기관 인증이나 제3자 통계 같은 객관적 근거 없이는 쓸 수 없습니다. 판매량 1위 같은 문구를 쓴다면 어느 채널의 어느 기간 집계인지 근거를 보관하고, 가능하면 문구 자체에 그 범위를 병기하는 편이 안전합니다.

05

가격과 배송 조건은 첫 화면에서 어디까지 밝혀야 하나

첫 화면에서 가격을 보여 주고 배송비는 결제 단계에서야 드러나는 구조는 이탈을 만드는 대표적인 구성입니다. 해외 조사기관 Baymard Institute 집계에서도 배송비와 세금 같은 추가 비용 과다가 결제 이탈 사유 상위에 올라 있습니다. 이 수치는 특정 해외 조사기관의 설문 집계라 국내 공식 표준은 아니지만, 추가 비용이 뒤늦게 등장할 때 이탈이 생긴다는 구조 자체는 국내 자사몰에서도 그대로 관찰됩니다.

법적으로도 정보를 뒤로 숨기는 구성은 위험합니다. 공정거래위원회는 가격을 단계별로 나눠 보여 주는 순차 공개 가격 책정을 다크패턴 세부 유형으로 분류했고, 이 유형을 포함한 여섯 가지가 전자상거래법에 명시돼 2025년 2월 14일부터 시행됐습니다. 첫 화면에 최종 부담액을 예측할 수 있는 정보를 함께 두는 편이 전환과 준법 양쪽에서 유리합니다.

06

아래에 내용이 더 있다는 신호를 어떻게 주나

세 요소를 잘 배치하고도 이탈이 나는 경우가 있습니다. 섹션 배경 경계가 화면 하단과 우연히 겹쳐 방문자가 여기가 끝이라고 착각하는 가짜 바닥 현상입니다. 이 착각이 생기면 아래에 있는 리뷰나 상세 스펙을 아예 못 보고 나갑니다.

방지책은 단순합니다. 첫 화면 하단에 다음 섹션의 일부가 살짝 걸치도록 배치해 잘린 콘텐츠를 노출합니다. 배경색이 바뀌는 지점을 화면 경계와 어긋나게 두는 것만으로도 대부분 해결됩니다. 실기기 캡처를 놓고 하단이 깔끔하게 끊겨 보이면 오히려 위험 신호로 읽는 습관을 들이는 편이 좋습니다.

다음 행동

자사몰에서 가장 매출이 큰 상품 하나를 골라 모바일에서 첫 화면을 캡처하고, 그 안에서 상품 정체, 구매 이유, 구매 버튼 세 가지에 각각 동그라미를 쳐 보세요. 빠진 항목이 있다면 그 자리를 지금 차지하고 있는 요소가 개선 대상입니다.

다음 글 · 레슨 05→상세페이지가 길수록 전환율이 떨어진다는 게 사실인가: 업종별 적정 길이

← 이전 글 · 레슨 03 카카오 1초 로그인 도입 후 이탈률·장바구니 전환율 변화 실제 효과는

출처

facts 항목 기준 · 본문 인라인 미표기5건
F-01채널톡 랜딩페이지 제작 가이드(폴드 구조·가짜 바닥) — https://channel.io/ko/blog/articles/landingpage-guide-1-d5679e3f업계
F-02국가데이터처 온라인쇼핑동향 보도자료(모바일 거래 비중) — https://mods.go.kr/menu.es?mid=a10301120300업계
F-03표시·광고의 공정화에 관한 법률 제3조·제5조 — https://www.law.go.kr/LSW/lsInfoP.do?lsId=002011&ancYnChk=0업계
F-04공정거래위원회 온라인 다크패턴 자율관리 가이드라인 — https://www.korea.kr/briefing/pressReleaseView.do?newsId=156583129업계
F-05Baymard Institute, Cart Abandonment Rate Statistics(해외 조사기관 집계) — https://baymard.com/lists/cart-abandonment-rate업계

플랫폼 기능·심의 기준·가격·법률은 바뀝니다. 이 글은 2026-09-01에 위 출처를 기준으로 확인했습니다.

CHALLENGE

배운 걸 실전 문제로 확인

카테고리별 Level Test로 실무 레벨을 점검해보세요.

챌린지 보기 →
이 과목의 게시글25편
01트래픽은 느는데 구매 전환율이 1% 미만일 때 상세페이지 상단부터 디버깅하는 순서02제품 이미지 중심 구성 vs 리뷰(UGC) 중심 구성 첫 구매 전환율을 높이는 배치 공식03카카오 1초 로그인 도입 후 이탈률·장바구니 전환율 변화 실제 효과는04상세페이지 첫 화면(퍼스트뷰)에 반드시 들어가야 할 3가지 요소05상세페이지가 길수록 전환율이 떨어진다는 게 사실인가: 업종별 적정 길이06장바구니에 담고 결제 안 하는 고객 결제 페이지 이탈 원인 3단계 디버깅07무료배송 임계값(예: 3만원 이상) 설정이 객단가와 전환율에 미치는 영향08상세페이지 리뷰 위젯 몇 개부터 노출해야 신뢰도가 올라가나 (사회적 증거 임계치)09자사몰 결제수단 간편결제(카카오페이·네이버페이) 미도입 시 이탈률 손실 추정10상세페이지 사이즈·색상 옵션 선택 UI 드롭다운 vs 버튼형 전환율 비교11재방문 고객을 위한 최근 본 상품 노출이 장바구니 재추가율에 미치는 효과12모바일 자사몰 상세페이지 썸네일 이미지 로딩 속도와 이탈률의 관계13상세페이지 내 배송·교환·환불 안내 위치 구매 직전 이탈을 줄이는 배치법14첫 구매 고객 vs 재구매 고객 상세페이지 UX를 다르게 설계해야 하는 이유15리뷰 정렬 기준(최신순·추천순·별점순)이 구매 전환에 미치는 영향16상세페이지 상단 베스트 리뷰 고정 노출 실제 전환율 개선 사례17장바구니 페이지 교차판매(Cross-sell) 상품 노출 위치와 객단가 상승 효과18결제 실패·오류 발생 시 고객 이탈을 막는 에러 메시지 UX 설계법19자사몰 회원가입 필수 vs 게스트 체크아웃 허용 전환율 차이20상세페이지 제품 소개 영상 삽입 위치와 자동·수동 재생 설정의 전환 효과21스크롤 뎁스(Scroll Depth) 분석으로 상세페이지 이탈 구간을 찾아내는 방법22상세페이지 CTA 버튼 문구(구매하기 vs 지금 담기) A/B 테스트 결과 해석법23자사몰 검색 결과 0건일 때 이탈을 막는 대체 상품 추천 설계24프로모션 배너·마감 임박 타이머가 구매 전환에 미치는 심리적 효과와 부작용25자사몰 GA4·서버로그 데이터로 상세페이지 이탈 지점을 정량 진단하는 방법 과목 전체 보기 →

MKT TOOLS

실무자를 위한 무료 도구

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

워크스페이스 열기 →