상세페이지 모바일 최적화, 이 3가지 규격만 지키면 안 깨집니다

상세페이지가 PC에서는 멀쩡한데 모바일에서만 깨져 보인다면, 대부분 PC 화면 기준으로 만들었기 때문입니다. 모바일쇼핑 비중이 76%를 넘는 지금, 상세페이지 모바일 최적화부터 잡아야 합니다.

이미지 위주로 만드는 상세페이지는 특히 취약합니다. PC 화면 폭에 맞춰 만든 이미지를 그대로 모바일에 올리면 글자가 뭉개지거나 이미지가 화면 밖으로 밀려나기 쉽고, 예쁘게 만들어놓고도 정작 구매가 결정되는 화면에서 안 읽히면 그 상세페이지는 없는 것과 같습니다. 이 글은 모바일에서 상세페이지가 깨지는 원인과, 발행 전에 점검해야 할 최소 기준을 정리합니다.

상세페이지가 모바일에서 깨지는 이유는 PC 기준으로 만들었기 때문입니다

커머스 트래픽의 대부분이 모바일이므로 모바일 세로 화면 기준으로 먼저 설계해야 합니다. 그런데 실제로는 반대로 작업하는 경우가 많습니다. PC 모니터의 넓은 화면에서 보기 좋게 이미지·글자 크기를 잡고, 그 결과물을 모바일에서 그대로 재사용하는 순서입니다. PC 화면에서 문제없어 보였던 요소들이 좁은 모바일 화면으로 옮겨가는 순간, 이미지는 잘리고 글자는 작아지고 여백은 뭉개집니다.

왜 지금 모바일 최적화가 특히 중요해졌을까요

국가데이터처가 발표한 2026년 1월 온라인쇼핑동향에 따르면, 전체 온라인쇼핑 거래액 중 모바일쇼핑 거래액 비중은 78.2%였습니다. 국가데이터처의 2026년 2월 발표에서도 이 비중은 76.9%로, 온라인쇼핑 열 건 중 일곱∼여덟 건이 모바일에서 일어나고 있습니다. PC에서만 확인하고 발행한 상세페이지는 실제 구매가 일어나는 화면의 대부분을 검수하지 않은 채 내보내는 셈입니다.

이미지 폭이 화면보다 크면 레이아웃이 밀립니다

가장 흔한 붕괴 원인은 이미지 폭입니다. PC 기준으로 넓게 만든 이미지를 모바일 화면에 그대로 넣으면 옆으로 밀려나거나 강제로 축소되면서 그 안의 글자까지 함께 작아집니다. 구글 서치 센트럴도 모바일·PC에서 같은 HTML을 유지하되 화면 크기에 따라 표시만 달라지는 반응형 디자인을 권장 구성으로 안내하고 있습니다. 구현·유지보수가 가장 단순하고, 모바일과 PC의 콘텐츠·메타데이터를 따로 관리할 필요가 없다는 것이 이유입니다. 상세페이지 이미지를 만들 때도 특정 플랫폼의 폭 기준에 맞추는 것보다, “가장 좁은 화면에서도 안 잘리는가”를 우선 기준으로 삼는 편이 안전합니다.

글자 크기가 작으면 확대해야 읽힙니다

PC 화면에서는 적당해 보이던 글자가 모바일에서는 작게 보여 손가락으로 확대해야 읽히는 경우가 많습니다. Chrome for Developers는 페이지 텍스트의 60% 이상이 12px 이상이어야 모바일에서 읽기 쉬운 수준으로 본다고 안내합니다. 12px 미만 텍스트가 40% 이상이면 모바일 사용성에 문제가 있는 것으로 판단됩니다. 실무에서는 이보다 여유 있게, 본문은 16px 안팎을 기준으로 잡고 확대 없이 읽히는지 직접 확인하는 것이 안전합니다.

한 화면에 메시지 하나만 담아야 합니다

모바일 화면은 PC보다 세로로 길고 가로 폭은 훨씬 좁습니다. 한 화면(스크롤 한 번 분량)에 여러 메시지를 동시에 밀어 넣으면 어느 것도 제대로 눈에 들어오지 않습니다. 한 화면에 한 메시지만 담아 스크롤할수록 다음 정보가 자연스럽게 이어지도록 구성하는 것이 모바일 세로 화면에 맞는 흐름입니다. 이 원칙 하나만 지켜도 텍스트·이미지가 뒤섞여 복잡해 보이는 문제의 상당 부분이 정리됩니다.

발행 전 이 3가지만 확인하면 대부분 막을 수 있습니다

완성한 상세페이지를 발행하기 전, 아래 세 가지만 순서대로 확인하면 대부분의 모바일 레이아웃 붕괴를 막을 수 있습니다.

1. 이미지 폭이 가장 좁은 모바일 화면 기준으로도 잘리거나 밀려나지 않는지 확인한다
2. 본문 글자 크기가 확대 없이 읽히는지 실제 화면에서 확인한다(대략 16px 안팎 기준)
3. 한 화면(스크롤 한 번 분량)에 메시지가 하나로 정리돼 있는지 확인한다

모바일 화면 말고도 첫 화면 문구·후기·이미지까지 함께 점검하고 싶다면 상세페이지 3분 진단의 8개 문항을 이어서 확인해 보세요.

모바일에서 안 깨지는 상세페이지를 만드는 가장 확실한 방법은, 발행 버튼을 누르기 전 실제 모바일 화면으로 한 번 열어보는 것입니다.

자주 묻는 질문

PC에서 확인했으면 안전한 것 아닌가요?

아닙니다. PC와 모바일은 화면 폭 자체가 다르므로 PC에서 문제없어 보여도 모바일에서는 이미지가 잘리거나 글자가 작아질 수 있습니다. 두 화면을 각각 따로 확인해야 합니다.

이미지 폭은 정확히 몇 px로 맞춰야 하나요?

플랫폼마다 권장 규격이 다르고 수시로 바뀔 수 있으므로, 발행 직전 사용 중인 플랫폼의 최신 판매자 가이드를 직접 확인하는 것이 가장 안전합니다.

반응형 디자인이 꼭 필요한가요?

필수는 아니지만 구글이 공식적으로 가장 권장하는 방식입니다. 같은 HTML을 유지한 채 화면 크기에 따라 표시만 달라지므로 구현과 유지보수가 가장 단순하고, PC·모바일 콘텐츠를 따로 관리하지 않아도 됩니다.

글자만 크게 하면 가독성 문제가 다 해결되나요?

크기만 키운다고 끝나는 것은 아닙니다. 줄 간격과 한 줄에 들어가는 글자 수도 함께 봐야 실제로 편하게 읽힙니다.

모바일 미리보기 기능이 없으면 어떻게 확인하나요?

대부분의 에디터·플랫폼이 모바일 미리보기 기능을 제공하지만, 없다면 실제 스마트폰으로 발행 전 페이지를 직접 열어 확인하는 방법이 가장 확실합니다.