모바일 상세페이지 레이아웃 기본기

변환기의 결과물은 최대 폭 600px의 중앙 정렬 컨테이너 안에 문단과 이미지를 세로로 쌓는 구조입니다. 왜 이 구조인지 이해하면 변환 결과를 직접 손볼 때도 무엇을 지켜야 하는지 알 수 있습니다.

왜 최대 폭 600px인가

휴대폰 화면의 CSS 폭은 기종에 따라 대략 360~430px이고, 태블릿과 PC에서는 그보다 넓습니다. 상세페이지 폭을 고정 픽셀로 짜면 좁은 화면에서 가로 스크롤이 생기고, 폭 제한 없이 두면 넓은 화면에서 한 줄이 너무 길어져 읽기 힘들어집니다. 최대 600px에 margin: 0 auto로 중앙 정렬하면 좁은 화면에서는 화면 폭에 맞게 줄어들고, 넓은 화면에서는 읽기 좋은 폭을 유지합니다. 여러 판매 채널의 앱 웹뷰에서 무난하게 동작하는 절충값이기도 합니다.

<div style="max-width:600px;margin:0 auto;
  padding:0 10px;text-align:center;
  line-height:1.7;font-size:15px;">
  ... 문단과 이미지 ...
</div>

이미지는 항상 가변 폭으로

이미지에 고정 폭(예: width:860px)을 지정하면 좁은 화면에서 그대로 넘칩니다. 변환기가 이미지마다 max-width와 width:100%를 함께 지정하는 이유입니다. 이렇게 하면 이미지는 원본 크기 이상으로 커지지 않으면서, 화면이 좁아지면 비율을 유지한 채 함께 줄어듭니다. height를 고정값으로 두면 찌그러지므로 height:auto가 원칙입니다.

글자 크기와 줄 간격

모바일 본문은 14px보다 작으면 확대 없이 읽기 어렵습니다. 변환기 기본값이 15px인 이유이며, 타깃 고객의 연령대가 높다면 16px 이상을 권합니다. 줄 간격(line-height)은 1.6~1.8 사이가 무난합니다. 다만 채널 자체 스타일이 우선 적용되는 경우가 있어 지정한 값과 실제 표시가 정확히 일치하지 않을 수 있습니다. 최종 판단은 항상 채널의 모바일 미리보기로 하세요.

나란한 이미지는 두 장까지만

이미지를 가로로 나란히 놓는 배치는 모바일에서 두 장이 한계입니다. 세 장 이상을 한 줄에 넣으면 한 장의 폭이 화면의 3분의 1 이하가 되어 내용을 알아볼 수 없습니다. 변환기는 두 장 배치의 폭을 옵션(기본 48%)으로 조절할 수 있게 했는데, 두 값의 합이 100%보다 작아야 사이 여백이 생긴다는 점만 기억하면 됩니다. 세 장 이상 묶인 이미지는 가급적 원본에서 세로 배치로 바꾸는 편이 좋습니다.

피해야 할 것들

• 고정 폭 테이블: 화면보다 넓으면 가로 스크롤을 만듭니다. 표가 필요하면 폭을 %로 지정하세요.
• float 기반 배치: 해제가 안 되면 이후 요소가 옆으로 끼어듭니다. 나란한 배치는 flex가 안전합니다.
• 절대 위치(position:absolute): 채널 컨테이너 밖으로 튀어나가거나 다른 요소를 덮을 수 있습니다.
• 특정 글꼴 의존: 기기에 없는 글꼴은 무시됩니다. 글꼴 없이도 읽히는 구성이 기본입니다.