상세페이지 첫 화면, 많이 넣을수록 좋을까요?

상세페이지 첫 화면, 왜 따로 설계해야 할까요?

상세페이지 첫 화면은 스크롤 없이 보이는 한 화면, 흔히 퍼스트뷰라고 부르는 영역입니다. 상품 사진과 가격 아래로 상세설명이 이어지는 오픈마켓 구조에서는 상세설명의 첫 이미지가 고객이 상품 이야기를 처음 읽는 자리가 됩니다.

닐슨 노먼 그룹의 2018년 시선 추적 조사에서 사용자는 페이지를 보는 시간의 약 57%를 첫 화면에, 약 74%를 처음 두 화면에 썼습니다. 같은 기관은 방문자가 페이지에 머물지 떠날지를 처음 10초 안팎에서 정하는 경우가 많다고 정리했습니다.

첫 화면은 다음 화면을 보게 만드는 자리로 따로 설계합니다. 첫 화면을 정할 때 필요한 것은 세 가지입니다.

• 높이: 휴대폰 한 화면이 상세 이미지 원본 기준으로 몇 px인지
• 내용: 상품 사진, 핵심 효익 한 줄, 근거 하나
• 이음새: 다음 내용이 화면 아래에 걸쳐 보이는지

상세페이지 첫 화면 높이 — 휴대폰 한 화면이 원본 몇 px인지 재기

스마트스토어 고객센터는 상세설명 권장 크기를 가로 860px로 안내합니다. 이 이미지는 휴대폰에서 화면 폭에 맞춰 줄어들기 때문에, 첫 화면에 보이는 높이도 원본 기준으로 다시 계산해야 합니다.

1. 01휴대폰에서 상세페이지를 열고 첫 상세 이미지가 보이는 상태로 화면을 캡처합니다
2. 02캡처에서 상세 이미지가 차지한 폭과, 화면 안에 보이는 이미지 높이를 잽니다
3. 03보이는 높이 ÷ 이미지 폭 × 860을 계산하면 원본 기준 첫 화면 높이가 나옵니다
4. 04가지고 있는 휴대폰 중 화면이 가장 작은 기기에서 잰 값을 기준으로 삼습니다

표의 숫자는 계산 예시입니다. 앱 상단 메뉴와 하단 구매 버튼이 차지하는 높이가 기기와 화면마다 달라서 실제 값은 직접 재야 합니다. PC에서는 이미지가 줄지 않아 한 화면에 보이는 원본 높이가 휴대폰보다 짧은 경우가 많습니다.

첫 화면 높이는 짐작하지 말고 가장 작은 화면에서 잰 값으로 잡습니다. 그 높이 안에 들어가는 것만 첫 화면 내용이고, 나머지는 두 번째 화면부터 배치합니다.

상세페이지 첫 화면 구성 요소 — 상품 사진, 효익 한 줄, 근거 하나

첫 화면에서 고객이 확인하고 싶은 것은 내가 찾던 상품이 맞는지, 그리고 왜 이 상품인지입니다. 그래서 첫 화면에는 이 두 질문에 답하는 요소만 두고, 위에서 아래로 다음 순서로 배치합니다.

핵심 효익 한 줄은 상세페이지 전체의 요약입니다. 3단 높이 조절 노트북 거치대처럼 기능 이름만 쓰기보다, 고개를 덜 숙이게 해 주는 노트북 거치대처럼 고객이 얻는 결과를 앞에 둡니다. 첫 화면 문구는 기능 이름보다 고객이 얻는 결과로 씁니다.

스크롤 유도 — 첫 화면 아래를 일부러 잘라 보이게

첫 화면이 깔끔하게 끝나 보이면 고객은 페이지가 거기서 끝났다고 느끼기 쉽습니다. 닐슨 노먼 그룹은 이것을 가짜 바닥(false floor)이라고 부르고, 아래에 내용이 더 있다는 신호로 잘려 보이는 글자나 이미지를 두라고 권합니다.

• 첫 화면 아래 끝에 다음 절 사진의 윗부분이 걸치게 둔다
• 첫 화면 맨 아래를 큰 여백이나 굵은 가로 구분선으로 끝내지 않는다
• 다음 절 제목을 화면 경계에 걸쳐 반쯤 보이게 둔다
• 첫 이미지와 다음 이미지의 배경색을 이어서 끊긴 느낌을 줄인다

상세 이미지를 여러 장으로 나눠 올린다면 자르는 위치도 함께 봅니다. 첫 화면 높이에 딱 맞춰 자르면 이미지 사이의 틈이 바닥처럼 보일 수 있으니, 이음새는 첫 화면 경계보다 아래에 둡니다. 첫 화면의 끝은 다음 내용이 걸쳐 보이는 자리로 남겨 둡니다.

상세페이지 첫 화면에서 뺄 것 — 브랜드 소개, 긴 공지, 배지 여러 개

첫 화면이 빽빽해지는 이유는 대부분 중요한 것을 빼지 못해서입니다. 버리는 것이 아니라 아래 절로 옮긴다고 생각하면 정리가 쉬워집니다.

첫 화면에서 뺀 내용은 지우지 말고 맡을 절을 정해 옮깁니다. 배송 공지처럼 꼭 먼저 알려야 하는 내용은 한 줄 띠로 줄여 첫 화면 높이를 지킵니다.

상세페이지 첫 화면 구성 한눈에 보기 — 영역별 역할

상세페이지 첫 화면 점검 전 10초 체크리스트

1. 01가장 작은 휴대폰에서 첫 화면 높이를 재 보았나요?
2. 02첫 화면에서 상품 사진이 화면 폭 대부분을 차지하나요?
3. 03핵심 효익 문구가 두 줄 안에 끝나나요?
4. 04근거는 하나만, 확인할 수 있는 사실로 넣었나요?
5. 05브랜드 배너나 긴 공지가 상품보다 먼저 보이지 않나요?
6. 06배지가 한 화면에 하나뿐인가요?
7. 07화면 아래에 다음 내용이 걸쳐 보이나요?
8. 08이미지를 나눈 이음새가 첫 화면 경계와 겹치지 않나요?

상세페이지 첫 화면부터 다시 만들기 — 상품 정보 하나로 블록 구성

첫 화면을 바꾸면 그 아래 절의 순서와 문구도 함께 손봐야 하는 경우가 많습니다. 효익 한 줄을 바꾸면 두 번째 화면의 사용 장면 설명도 거기에 맞춰야 하기 때문입니다.

셀러리 상세페이지 스튜디오는 상품명, 핵심 특징, 상품 URL, 사진을 넣으면 헤드라인과 설명, 구매 유도 카피를 담은 블록별 상세페이지를 만들고, 에디터에서 블록을 고친 뒤 내려받을 수 있습니다. 첫 화면 기준을 정해 두면 블록 순서와 헤드라인만 고쳐 다시 내보내면 됩니다.