12CODE
Q

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

50개 영역 중 12위 · 111건

이런 질문도 같은 답입니다

모바일 상세페이지 폰트크기이미지 종횡비 표준모바일 가독성 타이포그래피

결론부터

먼저 텍스트 크기와 대비는 국제 웹 접근성 표준(WCAG)이 명확한 기준을 제시합니다.

답변

3단계
01

일반 본문 텍스트의 명도 대비는 4.5:1 이상을 권장하고, 모바일 화면에서 본문 텍스트는 최소 16px 이상을 유지해야 확대 없이 읽기 편합니다. 16px 미만으로 내려가면 모바일 브라우저가 자동으로 확대(줌)를 유도하는 경우가 있어 레이아웃이 깨지거나 가로 스크롤이 발생하는 부작용이 생길 수 있으니, 폰트 크기는 이 기준을 최소선으로 잡으세요.

02

한 줄당 글자 수와 행간도 함께 관리해야 합니다. 가독성을 위한 한 줄당 글자 수는 한글 기준 한 줄에 20~35자 내외, 줄 간격(line-height)은 폰트 크기의 1.5~1.8배가 읽기 편한 범위로 실무에서 통용됩니다. 모바일 화면 폭이 좁으니 폰트 크기를 키우는 것과 별개로 좌우 여백(패딩)을 충분히 둬야 한 줄에 텍스트가 지나치게 빽빽하게 들어차는 걸 막을 수 있습니다.

03

이미지 종횡비는 1:1(정사각형) 또는 4:5(세로형) 비율이 실무에서 가장 흔히 쓰입니다. 4:5 비율은 인스타그램 피드 기본 비율과 동일해서 모바일 세로 화면을 효율적으로 채우면서도 과도하게 길어 스크롤 피로를 유발하지 않는 균형점으로 선호됩니다. 지나치게 가로로 긴 비율(16:9 등)은 모바일 세로 화면에서 이미지가 작게 표시돼 디테일이 잘 안 보이는 단점이 있으니, 가로로 긴 원본 이미지가 있다면 세로 방향으로 크롭하거나 여러 장으로 나눠 배치하는 걸 권합니다.

같이 보면 좋은 게시글

3편

12CODE ACADEMY

체계적으로 배우고 싶다면

퍼포먼스 광고 운영 과정에서 이 판단 기준을 순서대로 다룹니다.

과정 둘러보기 →

×N의 의미

같은 취지의 질문이 몇 번 반복됐는지입니다. ×10을 넘으면 개인의 실수가 아니라 구조적으로 헷갈리게 설계된 지점이라고 보는 편이 정확합니다.

MKT TOOLS

실무자를 위한 무료 도구

카피 글자수 검사, CPC·ROAS 계산기, UTM 생성기까지.

워크스페이스 열기 →