모바일 우선 상세페이지 디자인 - 80%의 고객을 잡는 법

쿠팡과 스마트스토어 트래픽의 80% 이상이 모바일입니다. 그런데 셀러들은 여전히 PC 모니터로 상세페이지를 만들고, 모바일에서 어떻게 보이는지 거의 확인하지 않습니다. 모바일에서 깨진 페이지는 매출이 절반 이하로 떨어집니다. 이 글은 모바일 우선으로 상세페이지를 만드는 실전 원칙을 정리했습니다.

1. PC vs 모바일 - 보이는 게 다르다

같은 상세페이지가 PC 와 모바일에서 어떻게 다르게 보이는지:

같은 사진·같은 글이라도 모바일에서는 정보가 1/4로 압축됩니다. PC 기준으로 만들면 모바일에서 답답하거나 끊겨 보입니다.

2. 모바일 우선 디자인 5원칙

원칙 1 - 사진 가로 폭은 1000px 이상

모바일 화면 너비가 360~430px 이라고 작은 사진을 올리면 안 됩니다. 모바일 해상도는 약 2~3배 픽셀 밀도(Retina) 라서 작은 사진은 흐릿하게 보입니다.

• 권장: 가로 1000~1200px, 정사각형 또는 1:1.5 세로 비율
• 모바일은 세로로 길게 스크롤하므로 세로 사진이 자연스러움
• 가로로 긴 사진은 모바일에서 작게 보여 답답

원칙 2 - 한 줄 카피는 20자 이내

모바일 화면에 한 줄이 25자 정도 들어갑니다. 그 이상이면 두 줄로 끊기는데, 중요한 카피가 어색한 위치에서 끊어집니다.

• ❌ "이 제품은 첨단 소재로 제작되어 우수한 내구성을 자랑합니다" (32자)
• ✅ "스테인레스 304, 떨어뜨려도 끄떡없어요" (20자)

핵심 키워드를 짧게 끊어주는 것이 모바일 친화적입니다.

원칙 3 - 한 화면, 한 메시지

모바일에서 한 화면(스크롤 한 페이지) 안에는 메시지 하나만 담아야 합니다.

[ 메인 사진 1장 ]
↓ 스크롤
[ 헤드라인 한 줄 ]
↓ 스크롤
[ 사용 사진 1장 + 설명 한 줄 ]
↓ 스크롤
[ 다음 가치 + 사진 ]

PC 처럼 한 섹션에 여러 정보를 욱여넣으면 모바일에서 글자가 작아져 안 읽힙니다.

원칙 4 - 폰트 크기는 16px 이상

모바일에서 너무 작은 폰트는 가독성을 망칩니다.

• 본문: 16~18px
• 헤드라인: 24~32px
• 캡션·메모: 14px 이상

13px 이하 폰트는 모바일에서 글자가 흐려져 거의 읽지 않습니다.

원칙 5 - 버튼·CTA 는 큼직하게

모바일은 손가락으로 터치하니까 버튼 영역이 충분히 커야 합니다.

• 권장 버튼 높이: 44px 이상 (애플 권장)
• 버튼 사이 여백: 10px 이상
• 색상 대비: 배경과 명확히 구분

너무 작거나 다닥다닥 붙은 버튼은 모바일 사용자가 짜증냅니다.

3. 모바일 미리보기는 어디서

상세페이지를 만든 후 반드시 모바일에서 어떻게 보이는지 확인해야 합니다.

방법 1 - 실제 폰으로 확인

가장 확실한 방법. 본인 폰으로 상세페이지를 직접 보면서 스크롤·터치해보기.

방법 2 - 크롬 개발자 도구

• F12 (Windows) 또는 Cmd+Opt+I (Mac)
• 좌상단의 디바이스 아이콘 클릭
• iPhone 14, Galaxy S22 등 다양한 디바이스 시뮬레이션 가능

방법 3 - 셀러비서 미리보기

셀러비서 에디터는 생성된 상세페이지를 즉시 모바일/PC 양쪽으로 보여줍니다. 미리보기를 확인하면서 편집할 수 있어 시간 절약됩니다.

4. 자주 깨지는 부분

PC 에서는 멀쩡한데 모바일에서 깨지는 흔한 패턴:

패턴 A - 가로로 긴 표

기능 비교표, 옵션 표 등을 PC 처럼 가로로 만들면 모바일에서 글자가 깨알같이 작아집니다.

해결: 세로 형식으로 재배치하거나, 핵심만 추려서 2~3열로

패턴 B - 작은 모델 사진

전신 사진을 PC 기준으로 작게 넣으면 모바일에서 얼굴이 안 보일 정도가 됩니다.

해결: 모델 사진은 큼직하게, 클로즈업 컷도 별도로

패턴 C - 가로 슬라이드

PC 에서 사용한 좌우 슬라이드 갤러리는 모바일에서 잘 안 보이고 조작도 불편합니다.

해결: 세로 스크롤 그리드로 변경

패턴 D - 작은 텍스트 위에 사진

배경에 사진을 깔고 그 위에 텍스트를 얹는 디자인은 모바일에서 글자가 묻혀 안 보입니다.

해결: 사진과 텍스트를 분리. 텍스트는 단색 배경 위에

5. 모바일 첫 화면 (Above the Fold)

모바일에서 페이지를 열었을 때 스크롤 없이 보이는 첫 화면이 가장 중요합니다.

첫 화면에 반드시 있어야 할 것

1. 상품을 알 수 있는 메인 사진
2. 한 줄 헤드라인
3. 가격 (또는 가격 전 임팩트 한 줄)

이 3가지가 없으면 고객이 그대로 닫고 나갑니다. 평균 체류 시간이 3초인 모바일에서 결정적입니다.

6. 카테고리별 모바일 최적화 팁

의류·패션

• 모델 컷 큼직하게 — 모바일은 핏이 안 보이면 살 결심을 못 합니다
• 사이즈 차트는 세로 표 형식으로
• 컬러 선택지는 작은 썸네일이 아니라 큼직한 컬러 컷

식품

• 식감·재료 사진 클로즈업
• 영양 정보는 픽토그램으로 (긴 텍스트 X)
• 산지·원산지는 한 줄로

가전·도구

• 사용 장면 동영상 또는 GIF
• 스펙은 표 대신 카드 형식
• 크기 비교 사진 (실제 손과 함께)

영유아 상품

• 안전 인증 마크를 첫 화면에
• 사용 연령 큰 글씨로
• 부모 후기 인용문

7. GIF · 짧은 영상 활용

모바일에서는 GIF/짧은 영상이 정적 사진보다 클릭률·전환율을 30~50% 끌어올립니다.

어떤 상품에 적합한가

• 사용 동작이 있는 상품: 마사지건, 청소기, 운동기구
• 펴는 동작: 의류, 매트
• 결과를 보여줄 수 있는 상품: 청소용품(전·후), 뷰티

GIF 만들기

셀러비서 움짤 만들기 - 동영상을 GIF/WebP 로 변환하는 무료 도구. 상세페이지 가벼운 움짤을 브라우저에서 즉시 만들 수 있습니다.

긴 영상(5초 이상)은 모바일 데이터 부담이라 짧게 만드는 게 좋습니다.

8. 모바일 최적화 체크리스트

상세페이지 게시 전 마지막 점검:

• [ ] 실제 폰으로 페이지를 끝까지 스크롤해봤는가
• [ ] 첫 화면에 상품·가격·헤드라인이 다 보이는가
• [ ] 한 줄 카피가 20자 이내인가
• [ ] 폰트가 16px 이상인가
• [ ] 사진이 흐릿하지 않은가 (가로 1000px 이상)
• [ ] 가로 슬라이드 / 가로 표가 없는가
• [ ] 버튼이 손가락으로 누르기 적당한 크기인가
• [ ] CTA 가 페이지 마지막에 명확히 있는가

마치며

모바일 우선 디자인은 "PC 에서 멀쩡하면 OK" 라는 생각을 버리는 것에서 시작합니다. 같은 시간과 노력을 들이더라도 모바일에 최적화된 상세페이지가 매출에서 2~3배 차이를 만듭니다.

셀러비서로 모바일 최적화 상세페이지 만들기 → — 모바일 미리보기 자동 제공