레이아웃 구상2 : 사이드바, 본문영역
제작할 스킨의 사이드바와 본문 영역의 레이아웃 구성에 대해 작성
하였습니다.지난 글 요약
- 이탈율 감소
- 체류시간 높이기
- 세션당 페이지수 높이기
- 적절한 광고 배치 가능한 환경
왼쪽 사이드바
왼쪽 사이드바는 크게 두 가지 영역으로 나누었습니다. 위쪽의 영역은 일반적인 포지션을 가지고, 아래쪽 영역은 Sticky 한 옵션으로 스크롤을 내리면 상단에 고정되는 박스로 실제로 블로그 스킨은 아래와 같은 용도로 사용 할 수 있도록 구상을 하였습니다.
(상단) Sidebar1 - Normal
왼쪽 사이드바의 상단 부는 흘려버려도 되는 콘텐츠를 넣어서 활용 할 수 있습니다.
- 블로그 소개
- 저자 소개
- 화면 고정 광고가 허용되지 않는 광고
(하단) Sidebar2 - Sticky Position
- (상단) Sidebar 1 - 흘려버려도 되는 콘텐츠
- 블로그 소개
- 화면 고정 광고가 허용되지 않는 광고
- (하단) Sidebar 2 - 화면에 고정되어 지속적으로 노출 시키는 콘텐츠
- 본문의 목차
- 검색창
- 유입을 만들고 싶은 글 강제 노출
- 현재 포스트 또는 현재 포스트의 카테고리를 고려하여 타게팅된 광고나 링크 노출
- 고정 광고가 허용되는 광고 삽입
- 자신의 판매하는 물품 고정으로 노출
- 자신의 개인 배너, 홍보, 마케팅 수단으로 활용
PC 화면에서 이 포스트를 보시는 분은, 본문 스크롤을 내리면 Sticky 한 옵션이 무엇인지 금방 알 수 있을 것입니다. 제 미래는 모르지만, 블로그는 지속적으로 해나갈 예정이고 제 다른 수익을 창출할 수 있는 창구가 생기면 왼쪽 사이드바의 Sticky 한 영역으로 유입을 만들기 위해 이런 구상을 하였습니다.
티스토리 사이드바 설정
위와 같은 레이아웃을 코드로 구현하고 나서 티스토리 > 설정 > 꾸미기 사이드바 에 들어가면 사이드바 3개가 나오는데, 사이드바1은 왼쪽 사이드바의 위쪽 블록, 사이드바 2번은 왼쪽 사이드바의 Sticky 영역, 사이드바 3번은 오른쪽 사이드바로 사용이 가능합니다.
오른쪽 사이드바
오른쪽 사이드바는 일반 다른 스킨의 사이드바와 크게 다른 점이 없지만, 제가 가장 중요하게 생각하는 부분은 폭을 320px로 고정하는 것입니다.
사이드바 320px로 설정할 경우 장점
- 최신글/인기글 긴 제목 표시하기 충분한 크기
- 애드핏의 가로 320px 크기 광고 삽입 용도
CPM이 높은 애드핏 광고 배치
광고 배치와 관련된 자세한 부분은 따로 포스트를 작성할 예정이지만, 요약하면 애드핏 320 x 100 또는 320 x 50 크기의 광고를 이질감 없이 배치 할 수 있습니다. 일반적으로 사이드바의 CTR은 본문의 광고보다 낮습니다.
최신글/인기글 긴 제목 노출 가능
스킨을 만들기 위해 여러 스킨은 관찰하면서 Tistory에서 배포하는 Magazine 스킨을 보았는데, 지금까지 본 사이드바 중에서 최신글 인기글이 가장 잘 눈에 들어왔습니다. 이 스킨을 참고하여 제작한 스킨 사이드바의 최신글과 인기글은 아래와 같이 구성하였습니다.
본문
본문 영역은 메인 컨텐츠가 담기는 영역으로 별다르게 스킨 차원해서 할 수 있는 것은 생각하지 못했습니다. 단지 좋은 글을 적는 것이 최선이라고 생각했습니다.
다만 내가 사용할 스킨이나 제작할 스킨이 결정되면 스킨에 따라 글을 쓸 때, 최적의 포스트 길이, 광고 배치 등이 전략적으로 선택 될 수 있다고 생각합니다. 이 부분은 스킨 제작 과정 번외로 다음 포스팅에서 제작한 스킨을 어떻게 활용하면 좋을지에 대한 나름의 구상을 소개할 예정입니다.
끝까지 읽어 주셔서 감사합니다.😄
'Tistory' 카테고리의 다른 글
| #5 CSS Flex 로 반응형 3단 레이아웃 구성하기 (0) | 2020.11.25 |
|---|---|
| #4 CSS Grid의 Grid template areas 속성으로 반응형 3단 레이아웃 구성하기 (0) | 2020.11.25 |
| #2 이탈율 감소, 체류 시간을 높이는 레이아웃 구상 Part.1 구현 방향과 헤더 영역 (0) | 2020.11.23 |
| #1 티스토리 스킨 제작 : 블로그 운영 문제점과 스킨의 요구사항 (6) | 2020.11.23 |
| 구글 무료 저작권 이미지 검색 팁 - 크레이티브 커먼즈 라이선스(CCL) 필터링 (3) | 2020.09.05 |