블로그의 정체성을 어필하기 위한 티스토리 '첫화면 꾸미기'

 

나는 티스토리 첫화면 디자이너!

티스토리 '첫화면 꾸미기' 1차 테스트가 끝나고 2차 미션에 접어 들었습니다. 1차 미션에서 많은 테스터들의 여러 가지 제안과 버그 제보 등이 있었기 때문에 '첫화면 꾸미기'가 점차 자리를 잡아가고 있는 것 같습니다.

이번 '첫화면 꾸미기' 2차 미션의 주제는 바로 디자인입니다. 블로그마다 영화나 책, 여행, 스포츠, IT, 자동차 등 다양한 주제가 있을 것이고, 그 컨셉에 맞도록 첫화면을 꾸미는 것이 중요하겠죠.

첫화면은 단 하나의 화면으로 블로그의 정체성을 어필하고, 전체적인 블로그 컨셉을 압축시켜 표현해야 합니다. 예컨대, 저같은 경우에는 영화블로그를 운영 중이기 때문에 왼쪽에 보이는 이미지에서 확인할 수 있듯이 '영화 리뷰'와 '영화와 사람', '실화 영화'라는 섹션을 만들어 놓았고, 위쪽에는 가장 최근에 발행한 포스트가 노출되도록 설정해 놓았습니다. 제 블로그에는 영화와 전혀 상관이 없는 포스트들도 상당히 많습니다. 그럼에도 불구하고 첫화면을 이렇게 설정해 놓은 것은 블로그의 컨셉은 물론 제가 지향하고자 하는 블로그의 정체성을 구독자들과 방문자들에게 어필하기 위함입니다.

①최근 포스트 ②영화 리뷰 ③영화와 사람 ④실화 영화 등 각 섹션의 타이틀은 모두 동일합니다. 진한 회색 바탕에동그라미 아이콘 + 하얀 글씨로 제목을 넣었습니다. 타이틀의 역할은 매우 중요합니다. 첫화면이 익숙하지 않은 방문자에게는 다소 산만해 보일 수 있는 여지를 타이틀을 활용하여 소거할 수 있습니다. 고로 타이틀이 잘 부각될 수 있도록 디자인을 하는 것이 좋을 것 같습니다.

보시다시피 저는 첫화면을 사이드바의 길이와 맞췄습니다. 블로그마다 사이드바의 길이는 모두 다르겠지만 제 블로그는 3단 스킨이라 사이드바의 길이가 그렇게 긴 편이 아니기 때문에 정확히 맞췄는데요. 미관상 더 보기 좋은 것 같고, 첫화면이든 사이드바든 여백이 없기 때문에 그만큼 디자인과 노출의 낭비가 없는 것 같습니다. 사실 제 블로의 첫화면은 영화리뷰 중간정도에서 잘립니다. (해상도 1920*1080 기준) 스크롤을 내려야 아랫쪽의 첫화면을 확인할 수가 있죠. 포털 사이트를 보면 스크롤을 내리지 않아도 첫화면의 거의 모든 부분을 확인해 볼 수 있습니다. 첫화면은 짧고 간단할 수록 좋다라는 것에 대한 방증이죠. 블로그의 특성상 첫화면이 길어질 수 밖에 없지만 최대한 길이를 줄이는 것이 좋겠죠. 만약 그것이 어렵다면 앞서 말했듯이 타이틀을 잘 부각시켜서 구역을 확실하게 나누어 방문자들에게 깔끔한 첫화면을 보여 주는 것이 중요하다고 봅니다.

제가 사용 중인 네 개의 아이템을 각각 설명해 드리겠습니다.
참고로 본 포스트에 삽입된 이미지의 검정색 테두리는 첫화면에서 보여지지 않습니다.

1. 최근 포스트

사실 첫화면은 링크를 타고 들어온다거나 구독 프로그램을 통해 들어오는 구독자들, (거의 없겠지만) 즐겨찾기를 통해 들어오는 방문자들에게나 노출이 되는 것이지 검색이나 메타사이트를 통한 방문자들에게는 큰 의미가 없죠. 해당 포스트로 바로 이동하니까요. 그럼에도 불구하고 가장 상단에 '최근 포스트'를 배치한 것은 주제와 상관없이 가장 최근에 포스팅한 글을 어필하고 싶었기 때문입니다. 블로거들끼리 방문을 하고 서로 답방을 하는 경우 가장 최근 글에 댓글을 남기는 것이 보통입니다. 이런 경우 최근 포스트를 눈에 잘 띄는 곳에 위치시켜 놓는 것은 이웃 블로거들을 위한 배려라고도 볼 수 있습니다. 배경도 일부러 검은색 아이템을 사용했습니다. 암튼 이런저런 이유로 최근 포스트를 상단에 배치했는데, '최근 포스트' 부분은 헤드라인형 아이템을 사용하고 있습니다. 헤드라인형 아이템은 공간 대비 효율이 아주 좋습니다. 적은 공간에 많은 포스트를 보일 수 있고, 최근 포스트를 강조하거나 (직접 글선택을 할 시에) 더 많이 보여주고 싶은 글을 강조할 수도 있으니까요. 우측 하단에 보이는 썸네일을 클릭하면 해당 포스트로 바로 이동되지 않고 그 글에 대한 제목과 내용이 요약되어 나타납니다. 좋은 기능이죠. 어떠한 주제가 됐든 헤드라인형 아이템이 첫화면의 상단에 가장 잘 어울리는 아이템이 될 것 같습니다.

2. 영화 리뷰

'영화 리뷰' 구역은 개인적으로 가장 마음에 드는 구성입니다. 현재 목록형 아이템을 사용 중인데 제목도 없고 글요약도 없고 아무것도 없습니다. 그저 썸네일만을 활용한 구성입니다. 작은 사이즈의 썸네일을 활용하여 적은 공간에 비교적 많은 글들을 노출시킬 수 있으며, 보여지는 글의 갯수는 당연히 조절할 수 있습니다. 리뷰 포스트마다 영화 포스트를 올리기 때문에 자동으로 포스터가 보여집니다. (참고로 썸네일은 직접 선택한 글에 한해서 수동으로도 선택이 가능합니다) 이렇게 영화 포스터처럼 작은 사진 하나로 해당 포스트를 표현해 낼 수 있는 글이 많은 블로그에게는 아주 좋은 디자인이 될 것 같습니다. 책이나 음반을 주로 리뷰하는 블로거, 자동차 블로거, 특히 요리 블로거에게는 나름 괜찮지 않을까 싶네요.

간단한 사용TIP

1번 이미지 같이 썸네일에 테두리를 넣을 수도 있습니다. 다른 아이템들도 마찬가지인데요. 테두리가 없으면 깔끔한 느낌이고, 테두리를 넣으면 뭔가 잘 정돈이 된 듯한 느낌이 듭니다. 테두리 적용방법은 해당 아이템 클릭 > 디자인 > 하단의 테두리 색을 지정하면 됩니다. (2번 이미지 참고)

1	2	3	4

(클릭해서 보세요)

앞에서 잠깐 언급한 썸네일 수동 설정방법입니다. 앞서 말했듯이 직접 선택한 글만 수동 설정이 가능합니다. 아이템에 집어 넣을 글을 선택하면 3번과 같이 아이템에 글이 들어감과 동시에 들어간 글의 목록이 리모콘 하단에 표시됩니다. 그 우측에 빨간색 네모로 표시해 둔 곳을 클릭하면 4번과 같이 해당 글의 사진들을 쭉 불러옵니다. 원하는 사진을 대표이미지로 선택하면 됩니다. 링크된 이미지는 불러오지 않습니다. 해당 포스트에 직접 올린 이미지만 불러온다는 점 참고하세요.

※ 썸네일 설정을 끝내 놓고 마음에 들지 않아 다른 사진으로 교체를 하려고 하니 3번 이미지의 빨간 네모 속에 보이는 썸네일 교체 버튼이 가장 윗쪽 버튼만 남고 전부 사라지더군요. 글을 목록에서 지웠다가 다시 추가하면 해결이 되긴 합니다. 아마도 버그겠지요.

현재 제 블로그에는 가로 6개 * 세로 6개해서 36개의 글이 '영화 리뷰' 구역에 노출되고 있는데, 절반 정도로 줄였으면 하는 소망이 있습니다. 첫화면은 최대한 심플하고 깔끔한게 좋으니까요. 1차 미션에서도 이야기한 적이 있는데 버튼 하나만 추가된다면 제 소망이 이루어질 것 같습니다. 만약에 '페이지 넘김 버튼'이 추가된다면 이런 구성(아이템) 뿐만 아니라 모든 종류의 구성에서 실용적이고 깔끔한 디자인이 가능할 것으로 예상됩니다. 그리고 클래퍼보드와 카메라 아이콘이 어두운 타이틀 배경에서는 잘 보이지 않는 것은 개인적으로 좀 아쉽네요. ㅜㅜ

3. 영화와 사람

'영화와 사람' 구역은 비교적 평범하고 무난한 구성입니다. 제목이 꼭 필요하고, 글요약도 있으면 좋을 만한 내용의 포스트들이거든요. 개인적으로 첫화면에 요약글이 들어가 있으면 좀 지저분해 보인다고나 할까요, 다소 산만한 분위기를 유발시키는 것 같더군요. 저의 경우에는 포스팅을 할때 이미지를 꼭 넣는 편인데, 글만으로 포스팅을 하는 분들에게는 요약글이 꼭 필요하겠죠. 썸네일 비율을 조절하는 범위가 한정적이라는 것이 아쉬울 뿐입니다. 비율을 수동으로 조절할 수 있다면 썸네일을 보다 완벽하게 표현할 수 있을 것 같습니다. 여담입니다만 이제는 포스팅을 하면서 첫화면에 보여질 이미지나 제목, 글의 앞부분도 어느 정도 감안을 해야 할 것 같습니다. 보시다시피 사진과 제목, 글이 잘리고 있으니 생각을 안할 수가 없자나요. ㅎㅎ 왠지 주객이 전도되는 느낌입니다.

4. 헐리웃 스타들 & 실화 영화

마지막은 '헐리웃 스타들 & 실화 영화' 라는 섹션입니다. 최근에 새로 추가된 '조합형' 아이템을 활용한 디자인입니다. 작은 공간을 다채롭게 꾸미기에 가장 이상적인 아이템인 것 같습니다. 설정하는 방법은 그다지 어렵지 않습니다. 제 블로그 하단에는 도서 광고가 노출되고 있는데, 섹션 하단에 경계선을 한 줄 넣어 구분지어 놓았습니다. 구분선은 아이템별로 설정이 가능하며 대략 10여 종류의 구분선을 섹션의 윗쪽에, 혹은 아랫쪽에, 아니면 둘 다 넣을 수도 있습니다. '조합형' 아이템은 이름 그대로 정말 다양한 조합이 가능합니다. 활용만 잘하면 첫화면을 아주 멋지게 꾸밀 수 있을 것 같습니다.

클로즈 베타 테스터로 '첫화면 꾸미기'를 사용을 해보니 디자인에 관한한 딱히 정답이 없는 것 같습니다. 각자가 운영하고 있는 블로그의 주제에 따라 어떤 아이템이 적합하다기 보다는 개인의 취향에 맞는 디자인을 선택하게 될겁니다. 단, 방문자들을 위해 지나치게 조잡한 구성은 지양해야겠죠. '첫화면 꾸미기'를 구성하는 방법은 정말 무궁무진합니다. 4월 중으로 서비스가 오픈하는 것으로 알고 있는데 직접 여기저기 건드려 보면 금방 감이 오실거에요. 한 가지 말씀드리고 싶은 점은 테터데스크에 비해 조작이 쉽고 편리하다는 점입니다. 개발자께서 강조하기도 했지만 사용성 부분에 신경을 많이 쓰신 것 같더라고요. 암튼 간지 첫화면을 갈구하는 분들께 이 글이 도움이 됐으면 좋겠습니다.