모바일까지 깨지지 않는 반응형 기획전 만들기
국내 쇼핑몰 구매의 70% 이상이 모바일에서 일어납니다. 데스크탑에서 멋지게 보이던 기획전이 모바일에서 글자가 잘리거나 버튼이 눌리지 않으면 그대로 매출 손실로 이어집니다. 처음부터 모바일을 기준으로 설계하는 습관이 중요합니다.
1. 고정 픽셀 대신 비율로 생각하기
가로 폭을 720px처럼 고정하면 작은 화면에서 잘립니다. 카페24 퍼블리셔의 블록은 화면 폭에 맞춰 자동으로 늘어나고 줄어드는 반응형 구조이므로, 가능하면 가로 100% 기준으로 구성하고 이미지도 가로에 꽉 차게 맞추는 편이 안전합니다.
2. 이미지 속 글자를 조심하기
배너 이미지 안에 작은 글씨로 정보를 넣으면 모바일에서 읽히지 않습니다. 핵심 문구는 이미지가 아니라 텍스트 블록으로 넣으면 화면 크기에 따라 크기가 조절되어 항상 또렷하게 보입니다.
3. 터치 영역 확보하기
손가락으로 누르는 버튼은 최소 44px 이상 높이를 확보해야 오작동이 줄어듭니다. 버튼이 너무 작거나 서로 붙어 있으면 옆 버튼이 눌리는 일이 잦습니다.
4. 열 수 줄이기
데스크탑에서 4열이던 상품 그리드는 모바일에서 2열로 줄이는 것이 보기 좋습니다. 한 줄에 너무 많은 카드를 넣으면 이미지와 글자가 과도하게 작아집니다.
5. 길이를 의식하기
모바일은 세로로 길게 스크롤됩니다. 정보가 많다면 아코디언으로 접어 두고, 가장 중요한 혜택과 대표 상품을 위쪽에 배치해 스크롤 없이도 핵심이 보이게 하세요.
6. 마지막은 실제 기기 점검
에디터 미리보기로 1차 확인한 뒤, 가능하면 실제 휴대폰으로 배포된 페이지를 한 번 더 열어 보는 것이 가장 확실합니다. 기기별 폰트와 줄바꿈 차이를 잡아낼 수 있습니다.