티스토리의 모바일 UX 최적화 사례 분석

티스토리의 모바일 UX최적화 사례 분석

티스토리의 모바일 UX 최적화 사례 분석

 

모바일 UX반응형코어 웹 바이탈네비게이션접근성애드센스

📑 목차

• 개요: 모바일 우선 원칙
• 사례① 레이아웃/네비 최적화
• 사례② 타이포/가독성 개선
• 사례③ 로딩속도 & 광고 CLS 방지
• 사례④ 접근성(A11y) 베스트
• 이미지 슬롯·OG·ALT 규칙
• 지표: LCP·INP·CTR·scroll_90
• 배포 전 체크리스트
• 최종 정리

 

개요: 모바일 우선 원칙

 

트래픽의 다수가 모바일에서 발생합니다. 성공 사례는 공통적으로 1) 단순한 상단 네비, 2) 68~75자 글줄 길이, 3) 이미지/광고 크기 고정, 4) 첫 화면 자원 최소화를 지킵니다.

핵심: “읽기 편한 구조 → 빠른 체감 속도 → 방해 없는 광고” 순서를 고정하세요.

핵심은 1열 본문 + 간결 네비 + 자리 고정 광고입니다

 

사례① 레이아웃/네비 최적화

 

• 헤더 축소: 로고 1줄 + 햄버거 메뉴, 검색은 모달.
• 스티키 TOC: 긴 글은 상단 “목차” 버튼을 스티키로 제공.
• 하단 바: 공유/이전·다음/댓글을 고정해 재방문 동선 강화.

 

/* 그리드 */
.main{display:grid;grid-template-columns:1fr;gap:20px}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border)}

 

사례② 타이포/가독성 개선

 

• 폰트 사이즈: 본문 16~18px, 줄간 1.75, 문단 간격 10~14px.
• 글줄 길이: max-width: 68ch로 가독성 확보.
• 다크모드: prefers-color-scheme로 자동 전환.

 

.post{max-width:68ch;margin:auto}
.post p{line-height:1.78}
@media (prefers-color-scheme: dark){body{background:#0b1220;color:#e5e7eb}}

 

사례③ 로딩속도 & 광고 CLS 방지

 

1. 이미지: WebP/AVIF, width/height 지정, loading="lazy".
2. 폰트: preload + font-display:swap.
3. 광고: 고정 높이 컨테이너로 자리 비움 방지.

<img src="hero.webp" width="1200" height="630" loading="lazy" alt="핵심 비주얼">
<div class="ad-slot" style="min-height:280px"><!-- adsense --></div>

팁: 첫 화면 이미지는 크리티컬 CSS 이후에 로드되도록 우선순위를 조절하세요.

 

사례④ 접근성(A11y) 베스트

 

• 링크/버튼에 aria-label, 현재 섹션에는 aria-current="page".
• Tab 포커스 스타일 커스텀, 대비(AA) 충족.
• 이미지 ALT는 행동/의미가 드러나는 한 문장으로.

 

이미지 슬롯·OG·ALT 규칙

 

• 대표 썸네일(OG): 1200×630, 대비 높은 색 + 12~16자 핵심 문구.
• 본문 이미지: WebP, 크기 고정, loading="lazy".
• ALT: “모바일 1열 레이아웃와 스티키 TOC”처럼 구조가 보이게 작성.

 

가독성 변수 (글줄 길이 / 줄간 / 대비) 조합이 체류시간을 만듭니다

 

지표: LCP·INP·CTR·scroll_90

 

지표	목표	영향 요인
LCP	≤ 2.5s	히어로 이미지, 폰트 블로킹
INP	≤ 200ms	스크립트 지연, 이벤트 최소화
scroll_90	≥ 35%	리드 압축, 첫 이미지/표 배치
CTR	≥ 4%	제목·썸네일, 목록 카드 구성

 

배포 전 체크리스트

 

1. 헤더/네비가 1~2줄로 간결하며 스크롤을 방해하지 않는가?
2. 본문 폭 68ch, 글자 16~18px, 다크모드 대비가 충분한가?
3. 이미지/광고에 width/height가 지정되어 CLS를 방지하는가?
4. 핵심 표/체크리스트를 첫 화면 근처로 끌어올렸는가?
5. GA4의 scroll_90·view_second_post가 수집되는가?

 

레이아웃. 타이포. 속도. 접근성을 순차적으로 개선하세요

 

최종 정리

 

모바일 UX 최적화는 읽기 쉬운 구조와 빠른 체감 속도, 안정적 레이아웃이 삼각편대를 이룹니다. 위의 사례와 체크리스트로 우선순위를 잡고, 동일 URL을 지속 업데이트하며 LCP/INP/scroll_90/CTR을 주기적으로 점검하면 모바일 성과가 안정적으로 상승합니다.