#2 이탈율 감소, 체류 시간을 높이는 레이아웃 구상 Part.1 구현 방향과 헤더 영역
Lucy Archive
Lucy 2023
2020. 11. 23. 13:11

티스토리 스킨 PC용 레이아웃 구성1티스토리 스킨 PC용 레이아웃 구성1

제작 스킨 기대 효과에 따른 레이아웃 구상1

지난 포스트에서는 적절한 스킨이 요구되는 이유와 스킨 제작을 결심하게 된 이유에 대해 설명하였습니다. 이번 포스트는

제작할 스킨에서 어떤 효과를 기대하는지 정리하고, 스킨 레이아웃에서 그 효과를 구현 할 수 있는 방안

에 대해 작성하였습니다. 포스트의 내용이 길어 이번 포스트에서는 기대 효과와 스킨 레이아웃 타이틀영역의 구현 방법, 다음 포스트는 나머지 레이아웃 영역의 세부 구현 방안계획에 대해 작성하였습니다.

제작할 스킨의 기대 효과

제작 스킨에 기대하는 효과는 아래와 같이 정리하였다. 아래 4가지는 모두 블로그 수익과 직접적으로 연관되는 요소라고 생각되기 때문이다. 이탈율 낮추고, 세션당 페이지수를 늘려 방문자의 체류시간이 올라가게 되면 블로그가 좋은 평가를 받아 검색 노출이 잘되고, 키워드에 따라 차이가 나겠지만 CPC에도 영향을 미칠 것이라 생각했다. 

  • 이탈율 감소
  • 체류시간 높이기
  • 세션당 페이지수 높이기
  • 적절한 광고 배치로 수익 최적화

사실, 이것보다 기본적으로 좋은 양질의 글이 있어야 하지만, 이것은 시간이 더 많이 필요한 문제이다. 작성할 글과 컨텐츠는 많이 있지만, 글쓰는 재주가 없어 포스팅으로 녹여내는 작업이 만만치 않다. 


기대하는 효과의 구현 방안

이탈율 감소

블로그 접속자가 이탈하는 이유는 크게 두 가지의 경우라고 생각하였다. 첫번째는, 페이지 로딩이 느려서 뒤로 가기를 누르는 경우이고, 두번째는 유입되는 경로에 노출되는 타이틀과 일치하지 않다고 판단되는 경우에 이탈율이 높아진다고 가정을 하였다. 내가 희소성이 있는 글의 주제로 이 글을 볼 수 밖에 없다면 얘기는 달라지겠지만...

  • 스킨의 디자인 요소 제거 (포기할 것을 포기)
    • 스킨 자체의 용량 최소화
    • 그림 사용하지 않기
    • 아이콘 사용하지 않기
    • 폰트 하나로 통일하기
    • 불필요한 기능 제거
  • 처음 노출되는 화면에 원하는 글이 맞는지 확인 시켜주기
    • 기본적으로 본문은 타이틀의 키워드와 일치 해야 하는 건 당연한 소리
  • 프로그래밍 기술적인 요소 : 내가 직접 하기는 아직 무리이고, 더 조사가 필요하다
    • 웹 페이지 요소별 로딩 우선 순위 (ex. 본문 -> 광고 -> 기타 Javascripts)
    • 보여지는 화면만 우선으로 로딩하기

체류시간 높이기, 세션당 페이지 수 높이기

스킨 레이아웃의 영역에서 체류시간이나 세션당 페이지 수를 높이는 방법은 적절한 링크가 적재 적소에 배치되는 방법 말고는 없다고 생각하였다. 

  • 티스토리 기본적으로 제공되는 링크 활용
    • 인기글
    • 최신글
    • 관련글
  • 적당한 타이밍과 공간에 필요한 링크 노출의 예
    • 타이밍 : 본문이 끝나는 시점에 다음글, 연관글 유도
    • 본문 상단 : 본문의 초반에 사전 지식이 필요한 연관 포스트 안내
    • 본문 하단 : 이어지는 포스트, 관련된 포스트 안내
    • 기타  관련된 주제, 유사 관심사 예측되는 링크 노출

※ 고려사항

체류시간을 높이고, 다른 내부 링크를 많이 만들면 만들수록 페이지 로딩 속도는 느려 지기 때문에, 적절한 배분이 필요 할 것으로 예상된다.

적절한 광고 배치

광고에 대한 포스트는 다음 포스트에서 자세하게 다룰 예정이다. 요약하자면 제작할 스킨은 아래의 광고 배치를 쉽게 적용 할 수 있는 구조이어야 한다.

  • 본문과 사이드바를 활용하여 활성화된 스크린에 2-3개의 광고가 노출되기
  • CPM이 주가 되는 수입의 광고는 클릭을 하지 않고 노출만 될 것 같은 곳에 배치
  • 접속한 사람이 뒤로가지 않고, 스크롤을 내릴 수 밖에 없는 곳에 광고를 배치하기

스킨 레이아웃 구상

지난 포스트에서 언급한 것과 같이, 이 블로그는 PC접속자와 모바일 접속자 비율이 9:1에 가깝다. 제작할 스킨은 PC의 넓은 화면을 활용 할 수 있는 3단 구성으로 결정하였다. 

기본 3단 구성 레이아웃기본 3단 구성 레이아웃

상단 타이틀

위의 레이아웃 구성에서 상단은 4가지 박스로 구성하였고, 특징과 이유는 아래와 같이 구상하였다. 

  • Header : 블로그명 작성
  • Nav : 카테고리나 내가 설정한 링크 노출
    • 스크롤이 내려가면 화면 상단에 고정되어 링크나 카테고리에 접근 가능
  • Ads : 검색 유입이 되면 일단 본문 상단까지는 스크롤를 내릴 것이라 예상해서 첫 화면에 광고를 노출
  • Post Title and Description : 포스트의 타이틀과 요약으로 원하는 글이 맞는지 확인 후 스크롤을 내리는 역할
    • 티스토리 글 작성시 Post Title 영역에 보여질 Description을 지정 필요

레이아웃 상단부 구성레이아웃 상단부 구성

추가적으로 경우에 따라 다르지만, 일반적으로 본문 상단의 광고가 클릭률이 높다고 한다. 위의 레이아웃을 적용하면 큰 거부감 없이 본문 상단 광고가 3개가 존재하고, Nav 아래의 큰 광고와 Article 영역의 작은 광고는 크기가 달라 (느낌상) 같은 광고가 보여지는 빈도가 적을 것이라고 예상하였다.


마무리

다음 포스트는 사이드바, 본문 등에서 주요하게 생각한 레이아웃 구상에 대해 작성할 예정입니다. 이 레이아웃 구상은 저의 예상이기 때문에 이 실제로 이탈율 감소, 체류 시간을 높일지는 추후에 확인을 해봐야 합니다. 블로그의 주요 키워드, 글쓰는 형태, 방문자 성향에 따라 천차만별이니 참고만 해주세요.

끝까지 읽어 주셔서 감사합니다.😄

관련포스트

👉 티스토리 스킨 제작 관련글 보기