제 티스토리 블로그는 직전까지 개인 제작자분이 만든 스킨을 일부 수정하여 사용하다 얼마전부터 현재의 스킨인 'Poster' 로 변경을 하였습니다. Poster 스킨은 티스토리 블로그를 하시는 분들이라면 다들 아시듯이 얼마전 티스토리에서 자체 스킨 4개를 공개했는데 그 중 하나입니다. Poster, Whatever, Letter, Portfolio 이렇게 네가지 스킨이 공개가 되었는데 저는 블로그에 사진보다는 텍스트 비중이 높았기에 Poster 스킨을 적용시켜 보았습니다.
참고로 이번 티스토리 자체 스킨이 좋은 점은 반응형 구조로 되어 있어 데스크탑과 모바일 모두에서 훌륭하게 작동을 한다는 것과 커버를 지원한다는 점입니다. 커버란 사이트 첫 화면 구성을 의미하는데 이 기능이 대폭 강화되어 왠만한 웹사이트 구성에 버금가는 레이아웃으로 구성이 가능하죠. 지금까지 나왔던 무료 블로그 툴 중에서는 가장 강력한 기능을 가지고 있는 것 같습니다.
Poster 스킨 적용에 앞서 모바일 화면에서도 기존의 모바일 티스토리 기본 스킨을 적용하지 않고 반응형 사이트로 구동하기 위해서 한가지 선행해야 할 부분이 있습니다. 관리자 화면인 블로그 관리(자신의 티스토리 블로그 주소/manage)에 가시면 화면 좌측에 꾸미기 메뉴가 있습니다. 여기 메뉴 중 '모바일' 이 있는데요, 모바일 꾸미기 설정에서 '티스토리 모바일웹 자동 연결을 사용하지 않습니다' 를 적용해야 모바일에서도 Poster 스킨으로 작동합니다. 많은 분들이 이 부분을 적용하지 않아서 당황해하시더군요.
이후에는 블로그 관리 메뉴 > 꾸미기 > 스킨 변경 페이지에서 우선 원하는 스킨(이 경우는 Poster 스킨)을 적용 하면 변화된 블로그 모습을 바로 확인해 볼 수가 있습니다. 적용 이후 자신의 티스토리 블로그 첫화면에 들어가면 기대했던 것과는 다른 밋밋한 리스트형 화면을 보게 됩니다. 사실 현재 제 블로그는 텍스트 위주의 공간으로 꾸며져 있기에 첫화면을 따로 설정하진 않았습니다. 객관적으로 가장 많은 정보를 전달할 수 있는 방법이 지금과 같은 리스트형 구조니까요. 하지만 웹사이트와 같이 다양한 레이아웃 구성을 통해 첫화면에서 강한 인상을 주고 싶으신 분들도 많이 계실 것입니다. 이제부터는 이런 분들을 위한 레이아웃 구성을 변경하고 설정하는 부분에 대해서 알려드리도록 하겠습니다.
우선, 기본적으로 스킨의 커버를 설정하는 페이지는 블로그 관리 > 꾸미기 > 스킨 편집 페이지입니다. 해당 페이지에서 스킨 커버의 기본적인 설정 변경에서 부터 HTML, CSS의 편집 그리고 파일업로드 등의 작업을 할 수 있습니다. 오늘은 기본적인 설정 변경만을 통해 커버를 꾸미는 것을 목적으로 하고 있기에 HTML이나 CSS 변경은 따로 건드리지 않도록 하겠습니다.
일단 우측의 스킨 편집 화면을 보면 '최신글' 이란 주황색 버튼이 보이실 것입니다. 홈화면을 지금과 같은 리스트 형태로 하고 싶으신 분들은 여기에서 설정만 변경해서 적용하면 됩니다. 저같은 경우는 제 블로그에 어떠한 포스팅들이 주로 올라오는지에 대해 방문자들이 파악하기 쉽도록 20개씩 나타나도록 했습니다. 또 스킨 옵션 항목을 보면 목록 더보기가 있는데 이를 활성화 시키면 최하단부에 더보기가 생깁니다. 그 외에 푸터 텍스트, 푸터 이미지 라고 있는데 이 부분을 변경하시면 블로그 최하단부에 고정적 글 혹은 이미지가 생성이 됩니다. 카피라이트 표기 등을 할 때 좋겠죠? 또 블로그와 연계된 페이스북, 트위터, 인스타그램 주소 등이 있을 경우 입력하여 적용시키면 아이콘으로 사이트 최하단부에 고정적으로 나타납니다.
단순 리스트 형태가 아닌 티스토리 커버 예시 사이트에서 본 것과 같은 레이아웃 구성을 하고 싶으실 경우에는 커버 상태를 적용시켜야 합니다. 커버를 탭하면 홈 설정이 나오는데요 이 부분의 구성을 달리해서 홈 화면 레이아웃을 변경하는 것입니다. 홈 설정에서 커버 아이템을 추가하고 순서를 위아래로 변경하여 레이아웃을 구성하기만 하면 됩니다.
적용할 수 있는 커버 아이템은 5가지 종류로 슬라이더, 리스트, 썸네일 리스트, 벽돌 리스트, 갤러리로 나뉩니다. Poster 스킨 데모 사이트를 방문해 보면 굉장히 잘 구성이 되어 있는 것을 볼 수가 있는데요, 위의 5가지 레이아웃 구조를 적절히 배치해서 이런 멋진 사이트 구성을 완성한 것입니다. 홈 화면 상단부 부터 원화는 커버 아이템의 종류와 노출되기 원하는 글의 종류와 글 수를 선택해서 적용하기만 하면 아주 간단하게 원하는 화면으로 구성이 가능하죠.
위의 Poster 데모 사이트의 커버 아이템 배치를 위에서부터 살펴보자면 섬네일 리스트 > 슬라이더 > 벽돌 리스트 > 리스트 > 갤러리 순으로 구성한 것을 확인해 볼 수 있습니다. 이미지 위주의 포스팅이 많고 사진 위로라면 섬네일 리스트나 갤러리 커버 아이템이 잘 어울립니다. 저는 이미지가 별로라서 적용해 봤는데 오히려 이상해 보이더군요.
스킨 커버의 종류 및 설정과 옵션 설정에 대해 더욱 자세히 알고 싶으신 분들은 티스토리 Poster 스킨 안내 페이지에서도 알 수가 있습니다. 방문해 보시면 사이트 하단부에 스킨 기본 설정 방법에서부터 스킨 커버 설정, 스킨 옵션 설정에 관한 방법까지 예시와 함께 안내가 되어 있으니 참고하시면 도움이 될 것 같습니다. 예시 확인해 보면서 다양한 레이아웃을 구상해서 멋진 블로그 완성해 보시기를 바랍니다!
