티스토리 티애디션은 반응형이 안된다? NO! 티스토리 티애디션 반응형에 어울리도록 적용하는 방법
티스토리에서 제공 중인 티애디션은 플래쉬 등을 이용하는 시스템이기 때문에 기본적으로 반응형에는 어울리지 않습니다. 하지만 티애디션을 제외하면 티스토리 블로그의 첫 화면을 깔끔하게 꾸미기가 상당히 힘들어서 티애디션 중에서도 반응형이 어느정도 가능한 아이템들 위주로 만드는 것이 일반적인 방법인데요.
며칠간 다양한 방법으로 티애디션을 테스트해보았습니다. 지금 제가 사용 중인 Skeleton 이나 마크쿼리 ↩님이 배포하고 계시는 스킨을 사용하는 블로거분들의 티애디션도 많은 참고를 했습니다. 대부분의 블로거분들이 티애디션의 사이즈 자체를 줄여서 모바일에서도 적당한 사이즈로 보이게끔 적용하고 계시더군요. 하지만 제가 PC화면에서 사용 중인 헤드라인형 아이템 같은 경우, 모바일에서 읽어버리면 모바일 화면의 작은 사이즈로 인해 이미지가 반토막 나거나 일부가 찌그러지는 등의 현상이 있더군요. 결국, 헤드라인 아이템을 사용하고자 한다면 사이즈를 작게 만드는 방법 뿐인데요. 사실 헤드라인 아이템이란 것이 PC화면 사용자를 위해서이고, 모바일 화면 사용자를 위한 아이템은 아닙니다. 즉, 반응형웹에서 문제가 되는 헤드라인형 아이템 등은 모바일에서는 필요가 없다는 것이지요.
일반 목록형 아이템 등은 반응형 웹에서도 적당히 조절되어 모바일 화면에서도 잘 보여집니다. 반응형 웹 스킨에서의 티애디션은 대체로 목록형 아이템 위주로 선택하시면 큰 문제는 없어보입니다. 허나, 꼭 헤드라인형 아이템과 목록형 아이템을 섞어서 사용하고자 하시는 분들이 있다면 지금 이 방법을 사용하시기 바랍니다.
오늘은 PC화면과 모바일 화면을 분리하여 티애디션을 설정함으로써, PC First(PC화면에 우선하는) 형태의 디자인으로 바꾸는 방법을 알려드립니다. 이렇게하면 티스토리에서도 반응형에 어울리도록 적용이 가능 할 것 같습니다. 소스코드는 Skeleton 스킨에서의 적용 방법입니다. (같은 Spec을 따르는 스킨이나 웹사이트에서도 가능합니다.)
티애디션 헤드라인 모바일에서 표시하지 않기
제가 며칠간 고민고민하다가 문득 생각해 낸 아이디어는 헤드라인형 아이템을 모바일 화면에서는 지워버리는 방법
입니다. 이럴 경우, 헤드라인형 아이템과 혼합으로 된 최신글을 노출시켜 줄 수 있는 목록형 아이템이 있으면 더 좋겠지요.
먼저 티애디션의 헤드라인형 아이템을 선택한 다음, HTML 수정으로 들어갑니다. ▼
그런 다음, 전체의 소스코드를 다음의 div로 감싸줍니다. ▼
현재 코드에서는 visible md와 lg가 들어가 있습니다. 즉, 큰 화면에서만 이 소스코드를 출력하고, 작은 화면에서는 출력하지 않는다는 명령입니다.
여전히 적용하여 테스트 중입니다만, 현재의 방법이 티애디션을 반응형에서 관리하는 방법 중에서는 괜찮은 선택인 것 같습니다. 모바일을 생각하여 작은 사이즈의 티애디션을 설정해놓으면, PC화면에서 접속했을 경우 뭔가 아직도 공사 중이고, 무언가 완료되지 못했다는 느낌을 계속 주기 때문인데, 반대로 PC화면에 맞도록 티애디션의 사이즈를 늘려놓으면 모바일에서 접속했을 때, 일부가 짤려 나가버림으로써 역시 공사 중이거나 무언가 오류가 있는 사이트라는 느낌을 줍니다.
아래는 현재의 소스코드를 적용한 뒤 살펴본 화면들입니다. ▼
PC 와이드 화면 입니다.
일반 PC화면 입니다.
조금 좁은 가로사이즈를 이용하는 PC 화면입니다. 좁은 사이즈를 사용하는 PC화면에서도 티애디션의 헤드라인형은 숨겨집니다.
아이패드 세로 모드.
아이패드 가로 모드.
아이폰 세로 모드.
아이폰 가로모드.
관련 글 보기
- 2013/12/15 - [각종정보/블로그] - 티애디션 헤드라인형 최신글 목록 1개로 고정하기(item-310430)
- 2013/12/15 - [각종정보/블로그] - 티스토리 블로그 메뉴바에 SNS 아이콘 추가하기 : Skeleton 반응형웹(모바일 포함)
- 2013/12/14 - [각종정보/블로그] - 티스토리 블로그 카테고리 글보기 혹은 검색 시 나오는 날짜 위치 이동하기
- 2013/12/13 - [각종정보/블로그] - 티스토리 블로그에 페이스북 댓글 플러그인을 반응형으로 설치하는 방법
- 2013/12/12 - [각종정보/블로그] - 티스토리 반응형 모바일 애드센스 삽입하기 : 반응형 웹 skeleton 스킨
- 2013/12/12 - [각종정보/블로그] - 티스토리 skeleton 반응형 스킨에서 구글 애드센스 본문 상단에 2개 배치하기