티스토리 모바일 확대 / 축소 기능 적용하기

안녕하세요. 에디터 가을여행입니다.

사실 글을 쓰는 입장이 아닌 블로그와 같은 글을 읽는 사용자들은 필요한 정보를 찾기 위해 간단하게 모바일로 검색하는 사람들이 대부분이고 작은 화면으로 포스팅들을 빠르게 훑어보게 됩니다. 티스토리는 모바일 주소를 사용하지 않아도 모바일웹으로 접속됩니다.

그럼에도 정작 이미지나 글씨는 축소 / 확대를 지원하지 않게 설정되어 있습니다. 인내심이 부족한 우리들은 바로 '뒤로가기' 를 누릅니다. 티스토리의 경우 스킨이나 플러그인에 따라 여러가지 편의사항들이 막혀 있어서 따로 수정해 줘야 하는 불편함이 일부 있습니다.

특히 스크린샷 등의 이미지안에 보이는 글씨 등이 작아서 확대하지 않고는 가독성이 많이 떨어지는건 사실입니다. 많은 구독자들을 모으거나 광고나 정보를 제공하고자 하는 분들 입장에서는 꼭 해야하는 작업중의 하나입니다.

 

Viewport 찾기

 

관리 -> 스킨 편집 -> HTML 편집 버튼을 누르시면 편집 가능한 화면으로 이동합니다.

[CTRL + F] 로 viewport를 입력하면 위와 같이 두줄을 찾으실 수 있습니다. 현재 뷰포트가 고정되어 있는 상태이며 이 부분을 주석처리 해주세요. <!-- 로 시작해 --> 로 끝나는 이 구간은 주석으로 실행되지 않습니다.

Viewport 수정하기

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>

 

이제 뷰포트를 주석으로 숨겼으면 실제 적용할 코드를 넣어줘야 합니다. 윗 줄을 그대로 복사하여 주석 처리한 바로 아랫줄에 붙여넣고 [적용] 버튼을 누르시면 모바일 접속시에 티스토리 화면을 줄이거나 확대할 수 있습니다.

- 실제로 모바일에서 티스토리 블로그에 접속하여 정상 작동하는지 확대 / 축소 기능을 확인해 봅니다.

마치면서...

티스토리 블로그를 사용하면서 꼭 수정하거나 보완해야 하는 기능들이 일부 있습니다. '서식 만들기 및 불러오기', '복사방지 일부 해제', ' 구글 서치콘솔 적용' 와 같은 웹 마스터 도구 등록하기 등 티스토리 메뉴얼에 설명되지 않는부분에 대해서 짬짬히 연재해 보겠습니다.

주로 HTML 수정이 필요한 사항들이지만 대부분 복사후 특정 구간에 붙여넣기 정도라 따라하는데 어렵지 않으시리라 봅니다. 중요한 내용은 몇줄 안되는데 장황하게 글이 길어졌습니다.