티스토리 북클럽 스킨 메인 구성 하는 방법

티스토리 북클럽 스킨 메인 구성하는 방법

티스토리 메인화면의 구성을 이렇게 다양하게 설정하는 방법을 알아보겠습니다. 기본적으로 티스토리 북클럽은 스킨 이름처럼 책을 소개하는 것에 적합한 디자인으로 구성되어 있습니다. 썸네일 영역 모양도 기본적으로 직사각형으로 되어있습니다. 썸네일 영역을 정사각형으로 보이게 하는 방법은 다음에 알려드리겠습니다.

관리자 모드 스킨 편집으로 들어가서 스크롤을 아래로 살짝 내리면 리스트라는 항목이 있습니다. 리스트 타입을 눌러보면 북리뷰, 베스트셀러, 뉴북, 뉴스레터 이렇게 선택할 수 있는 목록이 있고 선택했을 때 각각 어떻게 보이는지 확인해보도록 하겠습니다.

먼저 첫번째 북리뷰는 이미지와 텍스트의 조합이 각각 절반 정도 비율로 보입니다. 베스트셀러는 큰 이미지와 간단한 제목으로 표시가 됩니다. 뉴북은 텍스트 중심으로 보이면서 이미지도 조금 보여줍니다. 뉴스레터는 텍스트를 집중적으로 보여줍니다. 하지만 리스트에서 타입을 골라서 적용하면 메인화면의 구성이 한 가지 스타일로만 구성되게 됩니다.

첫 번째 사진처럼 다양한 구성으로 조합하려면 관리자 모드 스킨 편집에서 홈 설정 항목에서 최신 글이 아닌 커버를 클릭하면 다양한 조합으로 구성할 수 있습니다. 커버 아이템을 추가한 후 각각 다른 스타일의 커버를 선택하면 다양하게 메인화면을 구성할 수 있습니다. 저는 커버 갤러리 1과 뉴스 테러 이벤트 배너로 설정되어 있는 모습입니다. 드래그해서 순서를 바꾸거나 수정 삭제할 수 있습니다.

커버 아이템 추가를 누르면 어떤 스타일로 보이게 할지 고를 수 있습니다.

콘텐츠 목록에서 보이게 할 글을 선택할 수도 있으며 보이는 글의 숫자도 설정할 수 있습니다. 카테고리 목록에서 카테고리를 선택할 수도 있습니다.

각각 다른 5가지 커버 스타일을 차례대로 설정한 후 어떤 모습으로 보이는지 확인해 보겠습니다.

커버 아이템을 각각 썸네일 리스트와 커버 갤러리 1번으로 선택했을 때 보이는 모습입니다.

커버 갤러리 2번과 뉴스레터를 적용했을 때 보이는 모습입니다.

마지막으로 이벤트 배너를 적용했을 때 보이는 모습입니다.

커버를 설정해서 다양한 메인화면을 구성할 수 있지만 여기서 한 가지 중요한 점이 있는데요. 요즘 대부분의 사람들이 검색을 할 때 PC보다 모바일을 많이 사용합니다. 모바일 검색이 70% 이상을 차지하기 때문에 PC에서 설정한 구성들이 모바일에서도 각각 어떤 모습으로 보이는지를 체크해서 가독성이 높은 디자인으로 구성하는 것이 중요합니다. 모바일 환경에서 내가 만든 블로그가 보이는 모습이 중요하다는 걸 잊지 마세요!!

북클럽 스킨 선택 시 모바일에서 가독성 좋게 보이는 설정으로는 관리자모드 스킨 편집에서 리스트 항목에서 뉴북을 추천합니다. 텍스트 중심에 작은 이미지가 들어가 있는 구성인데 모바일로 봤을 때 가독성이 좋은 편입니다. 하지만 썸네일이 직사각형이기 때문에 정사각형으로 수정하는 것이 좋습니다. Html을 수정해야 하는 부분 이기 때문에 Html, css 수정하는 방법 알려드리면서 자세하게 설명드리겠습니다.