모바일 쇼핑몰 디자인을 따로 챙기는 분은 의외로 적습니다. PC 화면을 예쁘게 만들고 “모바일도 알아서 되겠지” 하고 넘어가죠. 그런데 지금 대부분의 쇼핑몰은 매출의 7할 이상이 휴대폰에서 나옵니다.
즉 공들인 화면에서는 3할이 나오고, 대충 넘어간 화면에서 7할이 나오는 상황입니다. 1,500개 이상의 쇼핑몰 스킨을 제작하면서 모바일에서 반복적으로 발견한 문제 다섯 가지를 정리했습니다.
전부 휴대폰으로 자기 쇼핑몰을 열어 5분이면 확인할 수 있는 것들입니다.
1. 구매 버튼이 엄지에 닿는 자리에 있는가?
휴대폰은 한 손으로 잡습니다. 엄지가 편하게 닿는 범위는 화면 아래쪽이고, 위쪽 모서리는 손을 고쳐 잡아야 닿습니다.
그런데 PC 화면을 그대로 줄인 구조에서는 구매 버튼이 상품 정보 아래 어딘가에 묻힙니다. 스크롤을 내리다 보면 화면 밖으로 사라지고, 사려고 마음먹은 순간에 버튼을 찾아 다시 스크롤해야 합니다.
해결책은 하나입니다. 화면 아래에 고정되는 구매 바가 있어야 합니다. 상품 어디를 보고 있든 항상 같은 자리에 버튼이 있는 구조입니다.
2. 한 화면에 상품이 몇 개 보이는가?
PC에서 4단으로 진열하던 그리드를 모바일에서 그대로 쓰면 상품 하나가 손톱만 해집니다. 반대로 1단으로 크게 놓으면 스크롤이 끝없이 길어집니다.
| 모바일 진열 | 인상 | 어울리는 경우 |
|---|---|---|
| 1단 | 화보처럼 크게 보임 | 객단가 높은 브랜드, 상품 수 적을 때 |
| 2단 | 가장 무난한 균형 | 대부분의 쇼핑몰 |
| 3단 이상 | 사진이 작아 판단이 어려움 | 액세서리처럼 형태가 단순한 상품 |
기본은 2단입니다. 상품 두 개를 나란히 비교할 수 있으면서 사진도 판단할 만큼은 큽니다.
3. 상품명이 두 줄에서 끊기지 않는가?
모바일에서 가장 자주 깨지는 지점입니다. PC에서는 한 줄에 들어가던 상품명이 모바일에서는 두세 줄로 넘어가고, 템플릿이 두 줄까지만 보여주도록 만들어져 있으면 중요한 정보가 잘린 채 노출됩니다.
“[신상] 여름 린넨 셔츠 오버핏 화이트”가 “[신상] 여름 린넨 셔츠 오버…”로 끝나면 색상 정보가 사라집니다.
- 상품명 앞에 붙이는 대괄호 표기를 줄인다 — 앞자리를 잡아먹습니다
- 중요한 정보(색상·소재)를 앞쪽에 배치한다
- 글자 크기는 최소 13~14px — 그보다 작으면 확대하게 됩니다
4. 첫 화면이 몇 초 만에 뜨는가?
모바일은 데이터 환경이 일정하지 않습니다. 지하철이나 엘리베이터 앞에서 열면 로딩이 눈에 띄게 느려집니다. 그런데 메인 배너 한 장이 2MB를 넘는 쇼핑몰이 흔합니다.
첫 화면이 뜨기 전에 나가는 사람은 통계에 방문자로도 안 잡힙니다. 광고비를 써서 데려왔는데 화면을 보지도 못하고 이탈하는 셈입니다.
메인 배너는 300KB 이하, 상품 썸네일은 100KB 이하를 기준으로 잡으세요. 화질보다 용량을 먼저 챙기는 편이 매출에 유리합니다.
5. 결제까지 몇 번을 눌러야 하는가?
상품을 고른 다음부터 결제 완료까지 실제로 터치를 세어 보세요. 다섯 번을 넘으면 중간에 빠져나가는 사람이 눈에 띄게 늘어납니다.
특히 확인할 지점은 두 가지입니다. 옵션 선택이 한 화면에서 끝나는지, 그리고 비회원 구매가 가능한지입니다. 회원가입을 강제하면 첫 구매 고객의 상당수가 그 자리에서 나갑니다.
상품을 찾는 길이 있는가?
상품이 서른 개를 넘어가면 스크롤만으로는 원하는 걸 못 찾습니다. PC에서는 좌측에 카테고리 목록이 늘 보이지만, 모바일에서는 그 자리가 없습니다.
그래서 모바일에서는 세 가지 중 하나는 있어야 합니다.
- 상단 고정 카테고리 띠 — 좌우로 밀어서 이동
- 검색 아이콘 — 화면 위쪽에 항상 보이는 자리
- 정렬·필터 — 가격순, 인기순 정도만 있어도 충분
특히 검색은 살 생각이 확실한 사람이 씁니다. 이름을 알고 찾아온 고객이라 전환율이 가장 높은데, 검색창이 햄버거 메뉴 안에 숨어 있으면 그 고객을 놓칩니다.
정리 — 휴대폰으로 5분 점검
- 구매 버튼이 화면 아래에 항상 붙어 있는가
- 상품이 한 줄에 2개씩 보이는가
- 상품명이 잘리지 않는가
- 첫 화면이 3초 안에 뜨는가
- 결제까지 다섯 번 이내로 끝나는가
다섯 개 중 셋 이상 걸린다면 부분 수정으로는 해결되지 않습니다. 화면 구조 자체가 PC 기준으로 짜여 있다는 뜻이라, 쇼핑몰 리뉴얼을 검토할 시점입니다.
자주 묻는 질문
모바일 쇼핑몰 디자인에서 가장 먼저 봐야 할 것은 무엇인가요?
구매 버튼의 위치입니다. 화면 아래에 고정되어 상품을 어디까지 보고 있든 항상 눌릴 수 있어야 합니다. 스크롤을 올려야 버튼을 찾는 구조면 사려던 사람도 중간에 빠져나갑니다.
모바일에서 상품은 한 줄에 몇 개가 적당한가요?
2단이 기본입니다. 상품 두 개를 나란히 비교할 수 있으면서 사진도 판단할 만큼 큽니다. 객단가가 높은 브랜드는 1단으로 크게, 액세서리처럼 형태가 단순한 상품은 3단도 가능합니다.
올라운드샵은 어떤 곳인가요?
올라운드샵은 카페24 디자인센터 베스트파트너로, 1,540개 이상 브랜드의 쇼핑몰 스킨을 제작해 온 쇼핑몰 디자인 전문 스튜디오입니다. 뷰티·패션·식품 등 업종별 반응형 스킨을 카페24 디자인센터에서 판매합니다.
모바일부터 설계된 스킨을 보세요
올라운드샵은 카페24 디자인센터 베스트파트너로, 1,540개 이상 브랜드의 쇼핑몰 스킨을 제작해 온 쇼핑몰 디자인 전문 스튜디오입니다. 고정 구매 바와 2단 진열까지 고려한 반응형 스킨을 단독으로 판매합니다.
