지금까지 설계한 정보구조와 카피, 신뢰 요소가 아무리 잘 짜여 있어도, 실제로 대부분의 고객은 스마트폰 화면으로 이 페이지를 봅니다. PC 화면에서 보기 좋게 만든 상세페이지가 모바일에서는 이미지가 잘리거나, 로딩이 느려 스크롤도 하기 전에 이탈을 유발할 수 있습니다. 이번 강의에서는 지금까지 만든 내용을 모바일 기준으로 다시 점검합니다.
이미지 용량이 큰 상세페이지는 모바일 데이터 환경에서 로딩이 느려 첫 화면이 뜨기도 전에 이탈로 이어질 수 있습니다. 상세페이지에 들어가는 이미지는 가능한 한 용량을 줄이고, 플랫폼이 제공하는 이미지 최적화 기능(자동 압축 등)을 활용하는 것이 좋습니다. 특히 17강에서 설계한 상단 3초 화면의 이미지는 로딩이 늦어지면 그 3초라는 시간 자체를 못 쓰게 되므로 가장 먼저 점검해야 할 항목입니다.
PC 화면 비율로 만든 이미지나 텍스트가 들어간 배너 이미지는 모바일 화면 폭에서 글자가 잘리거나 너무 작아 안 보이는 경우가 흔합니다. 특히 16강에서 만든 장벽 해소 카피를 이미지 안에 텍스트로 넣었다면, 모바일 화면에서 실제로 어떻게 보이는지 직접 스마트폰으로 확인해야 합니다. 이미지 안 텍스트보다 실제 텍스트(플랫폼 에디터의 글자)로 처리하면 화면 크기에 따라 자동으로 줄바꿈되어 잘림 문제를 줄일 수 있습니다.
모바일 화면은 PC보다 한 번에 보이는 영역이 좁아, 같은 정보량이라도 스크롤이 훨씬 길어집니다. 17강에서 설계한 8개 블록이 모바일에서 지나치게 길게 늘어지지 않는지 확인합니다. 블록 사이에 구분이 명확하지 않으면 고객이 지금 어느 부분을 보고 있는지 헷갈려 중간에 이탈할 수 있습니다. 소제목이나 구분선으로 블록 경계를 명확히 하는 것이 도움이 됩니다.
검색 결과나 목록 화면에서 보이는 썸네일은 모바일에서 매우 작게 표시됩니다. 여러 장의 썸네일을 등록할 수 있다면, 가장 먼저 보이는 대표 이미지는 텍스트 없이 상품이 한눈에 파악되는 이미지로, 두 번째 이미지부터 핵심 정보(향 지속시간, 세트 구성 등)를 간단한 텍스트로 보여주는 순서를 권합니다. 대표 이미지에 정보를 욱여넣으면 오히려 작은 화면에서 무엇을 파는 상품인지조차 알아보기 어려워집니다.
결제·장바구니 버튼이 모바일 화면에서 손가락으로 누르기 어려울 만큼 작거나, 다른 요소와 붙어 있으면 오탭이나 불편함으로 이탈이 늘 수 있습니다. 플랫폼 기본 템플릿을 쓰는 경우 대부분 자동으로 최적화되지만, 직접 꾸민 이미지형 배너 안에 버튼을 넣는 방식이라면 특히 확인이 필요합니다.
가장 확실한 방법은 실제로 본인 스마트폰에서 상세페이지를 열어 처음부터 끝까지 스크롤해보는 것입니다. 이때 판매자 입장이 아니라 처음 이 상품을 검색해서 들어온 고객 입장으로, 로딩 시간을 체감하고 이미지가 잘리는 부분이 있는지 직접 확인합니다.
본인이 쓰는 스마트폰 한 대, 그것도 와이파이가 연결된 상태에서만 확인하면 실제 고객이 겪는 상황과 차이가 날 수 있습니다. 가능하다면 다른 기종의 스마트폰을 하나 더 빌려 확인하거나, 와이파이를 끄고 이동통신 데이터로 접속해 로딩 속도를 다시 체감해보는 것을 권합니다. 화면 크기와 통신 속도가 다른 환경에서 반복해서 확인할수록, 실제 고객이 처음 상세페이지를 열었을 때 느끼는 경험에 더 가까워집니다.
[담당 상품명 / 점검 기기: ( )]
1. 로딩
- 첫 화면이 뜨는 데 체감 시간: ( )초
- 용량이 큰 이미지 발견 여부:
2. 이미지 잘림
- 텍스트가 잘리거나 안 보이는 이미지 위치:
3. 스크롤/구조
- 전체 스크롤 길이가 지나치게 긴가(예/아니오):
- 블록 구분이 명확한가(예/아니오):
4. 썸네일
- 대표 이미지에 텍스트가 과도하게 들어가 있는가(예/아니오):
- 두 번째 이미지부터 핵심 정보가 보이는가(예/아니오):
5. 버튼
- 결제/장바구니 버튼이 누르기 편한가(예/아니오):
20강. [실습] 상세페이지 개선안 작성에서 14~19강 내용을 종합해 실제 상세페이지 개선안을 Before/After로 완성합니다.