12CODE

MKT FAQ

MKT FAQ 카피·디자인·숏폼·UGC

모바일 화면에서 상세페이지 가독성을 극대화하기 위한 가로 폭 대비 텍스트 폰트 크기 및 이미지 종횡비(Ratio)의 표준 규격은?

이런 질문도 같은 답입니다: 모바일 상세페이지 폰트크기 · 이미지 종횡비 표준 · 모바일 가독성 타이포그래피

답변

먼저 텍스트 크기와 대비는 국제 웹 접근성 표준(WCAG)이 명확한 기준을 제시합니다. 일반 본문 텍스트의 명도 대비는 4.5:1 이상을 권장하고, 모바일 화면에서 본문 텍스트는 최소 16px 이상을 유지해야 확대 없이 읽기 편합니다. 16px 미만으로 내려가면 모바일 브라우저가 자동으로 확대(줌)를 유도하는 경우가 있어 레이아웃이 깨지거나 가로 스크롤이 발생하는 부작용이 생길 수 있으니, 폰트 크기는 이 기준을 최소선으로 잡으세요. 한 줄당 글자 수와 행간도 함께 관리해야 합니다. 가독성을 위한 한 줄당 글자 수는 한글 기준 한 줄에 20~35자 내외, 줄 간격(line-height)은 폰트 크기의 1.5~1.8배가 읽기 편한 범위로 실무에서 통용됩니다. 모바일 화면 폭이 좁으니 폰트 크기를 키우는 것과 별개로 좌우 여백(패딩)을 충분히 둬야 한 줄에 텍스트가 지나치게 빽빽하게 들어차는 걸 막을 수 있습니다. 이미지 종횡비는 1:1(정사각형) 또는 4:5(세로형) 비율이 실무에서 가장 흔히 쓰입니다. 4:5 비율은 인스타그램 피드 기본 비율과 동일해서 모바일 세로 화면을 효율적으로 채우면서도 과도하게 길어 스크롤 피로를 유발하지 않는 균형점으로 선호됩니다. 지나치게 가로로 긴 비율(16:9 등)은 모바일 세로 화면에서 이미지가 작게 표시돼 디테일이 잘 안 보이는 단점이 있으니, 가로로 긴 원본 이미지가 있다면 세로 방향으로 크롭하거나 여러 장으로 나눠 배치하는 걸 권합니다.

← FAQ 목록으로