모바일 우선 티스토리 점검표｜폰트·여백·이미지 비율·탭 네비게이션

모바일 우선 티스토리 점검표-폰트.여백.이미지.탭 네비게이션

 

모바일 우선 티스토리 점검표｜폰트·여백·이미지 비율·탭 네비게이션

핵심: 방문자의 70% 이상이 모바일입니다. 글은 작은 화면 기준으로 설계해야 하며, 폰트·여백·이미지·탭 네비게이션이 체류 시간과 가독성을 좌우합니다.

📑 목차

• 폰트·줄간격·문단 폭
• 여백·행간·리스트 가독성
• 이미지 비율/용량/표기 규칙
• 탭 네비게이션·고정 바
• 모바일 우선 점검표(표)
• 오늘부터 실행 요약

폰트 크기. 줄간격 문단 폭이 읽기 속도와 이탈률에 직접 영향을 줍니다

1. 폰트·줄간격·문단 폭

• 본문 폰트 크기: 16–18px(선호 17px), 제목은 단계별 1.25–1.35배 비율.
• 줄간격(line-height): 1.7–1.85(가독–스크롤 균형값).
• 문단 폭: 모바일 기준 18–22자/줄(영문 45–75cpl) 유지.
• 문단 간격: 본문–본문 12–16px, 본문–소제목 18–24px.
• 리스트: 항목 길이는 1–2문장, 아이콘/불릿 통일.

팁: 긴 문단은 3–4문장마다 줄 바꿈, 핵심 수치는 rem 단위로 설정하면 스킨 변경에도 안정적입니다.

대표 썸네일은 1200 x 630(16:9) ,본문 주요 이미지는 1200x 675 권장

2. 이미지 비율/용량/표기 규칙

• 대표 썸네일: 1200×630(16:9), 대비 높은 색, 텍스트 최소화.
• 본문 핵심 이미지: 1200×675(16:9) 또는 1200×900(4:3), width/height 명시.
• 포맷: 사진→WebP/JPEG, 그래픽→PNG/WebP, 용량 200–350KB 목표.
• ALT: 이미지 목적·정보를 한 문장으로(예: “카테고리 3단 구조 예시”).
• 파일명: kebab-case 영문 권장(예: tistory-mobile-font-spacing.webp).

<img src="..." alt="모바일 본문 폰트 17px, 줄간격 1.8 예시" width="1200" height="675" loading="lazy" />

상단 고정 탭/카테고리+카드형 섹션은 모바일 탐색을 단순화 합니다

3. 탭 네비게이션·고정 바

• 상단 탭 수: 3–5개, 과업 중심 명칭(예: 시작하기·작성·운영).
• 고정 바: 56–64px 높이, 스크롤 시 최소 그림자만.
• 터치 타깃: 44×44px 이상, 탭 간격 8–12px.
• 현재 탭 표시: 굵기/밑줄/색상 중 1가지만 명확하게.
• 하단 앵커: “맨 위로” 버튼을 오른쪽 하단 고정(접근성 ↑).

4. 모바일 우선 점검표

항목	권장값	합격 기준
본문 폰트	16–18px	가독·스크롤 균형
줄간격	1.7–1.85	문단 숨 안참
문단 폭	18–22자/줄	3–4문장/단락
이미지	1200×675, WebP	<350KB, ALT 명확
탭	3–5개, 44px+	현재 탭 식별

오늘부터 바로 할 수 있는 실행 요약

• 폰트 17px, 줄간격 1.8, 문단 간격 16px로 통일.
• 대표 1200×630, 본문 1200×675(용량 200–350KB)로 리사이즈.
• 상단 탭 3–5개로 정리, 현재 탭 강조 적용.
• ALT·파일명 규칙 표준화 후 일괄 교체.

 

작성자 ｜ 티스토리 정보저장소

티스토리 블로그 운영에 필요한 필수 정보를 체계적으로 제공합니다. 본 글은 제목·요약문을 의도 기반으로 표준화하는 실무 가이드입니다.

최종 수정: 2025-11-19 · 문의: 댓글로 남겨주세요.