나의 블로그 일지 12(티스토리 모바일 가독성 높히기)

PC를 이용해 열심히 글을 작성하고 모바일을 통해서 확인 했을때 의외로 표가 제대로 한 화면에 보이지 않기도 하고

문맥상 어색한 곳에서 줄 바꿈이 되어 가독성이 떨어지는 경험을 하게 되었다. 티스토리 블로그의 모바일 가독성을 높이기 위해서는 디자인, 기술, 콘텐츠 구성 측면에서 세심한 최적화가 필요하다는 것을 알게 되었다

다음은 모바일 가독성을 높히기 위해서 해야 먼저 살펴봐야 할 것들이다

반응형 스킨 선택:
티스토리에서 제공하는 반응형 스킨이나 모바일 최적화 스킨을 선택하면 화면 크기에 따라 자동으로 레이아웃이 조정된다 (반응형 스킨이란 다양한 기기(데스크톱, 태블릿, 스마트폰)의 화면크기에 맞춰 자동으로 디자인과 레이아웃이 조절
레이아웃 단순화:
불필요한 사이드바, 과도한 광고, 복잡한 메뉴를 제거해 핵심 콘텐츠에 집중할 수 있도록 디자인
모바일 네비게이션 개선:
햄버거 메뉴나 슬라이드 메뉴 등 직관적인 모바일 네비게이션을 적용해 사용자 경험을 향상

메타 뷰포트 설정:
HTML 헤드 부분에 다음과 같은 메타 태그를 추가해 모바일 기기에서 적절한 확대/축소가 이루어지도록 한다

html

복사편집

<meta name="viewport" content="width=device-width, initial-scale=1.0">
폰트 크기 및 줄 간격:
모바일 기기에서도 읽기 쉽게 기본 폰트 크기를 16px 이상, 줄 간격은 1.5~1.8 정도로 설정한다. 예를 들어, CSS 코드에 다음과 같이 지정할 수 있다.

css

복사편집

body { font-size: 16px; line-height: 1.6; padding: 10px; }
이미지 반응형 처리:
CSS의 max-width: 100%; 속성을 적용해 이미지가 화면 크기에 맞게 자동 조정되도록 한다.

css

복사편집

img { max-width: 100%; height: auto; }

이미지 압축 및 최적화:
고해상도 이미지는 압축 툴을 사용해 파일 용량을 줄이고, 로딩 속도를 개선
Lazy Loading 적용:
페이지 로딩 시 한 번에 모든 이미지를 불러오지 않고, 스크롤에 따라 차례로 로딩하는 방식을 사용해 성능을 향상

다양한 기기 테스트:
여러 모바일 기기(스마트폰, 태블릿 등)에서 실제로 블로그를 테스트해 레이아웃, 폰트 크기, 이미지 표시 등을 확인
분석 도구 활용:
Google PageSpeed Insights, GTmetrix 등의 도구로 페이지 속도와 성능을 분석하고, 개선점을 찾아 수정한다
사용자 피드백 반영:
방문자들의 피드백을 수집해 가독성, 디자인, 로딩 속도 등의 문제점을 지속적으로 개선

이와 같이 티스토리 블로그의 모바일 가독성을 높이기 위해서는 반응형 디자인 적용, CSS와 메타 태그 최적화, 콘텐츠 구성 개선, 이미지 및 미디어 최적화, 페이지 속도 개선 그리고 지속적인 테스트와 피드백 반영이 필수적이다

계속 반복해서 읽으며 하나 하나 차근 차근 직접 실행해 가면서 읽혀야 할것 같다

simplelifyer 님의 블로그