세상을 지배하다


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

티스토리 '첫화면 꾸미기' 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월 중으로 서비스가 오픈하는 것으로 알고 있는데 직접 여기저기 건드려 보면 금방 감이 오실거에요. 한 가지 말씀드리고 싶은 점은 테터데스크에 비해 조작이 쉽고 편리하다는 점입니다. 개발자께서 강조하기도 했지만 사용성 부분에 신경을 많이 쓰신 것 같더라고요. 암튼 간지 첫화면을 갈구하는 분들께 이 글이 도움이 됐으면 좋겠습니다.



신고
    본 블로그는 모든 컨텐츠의 무단 전재 및 재배포를 금합니다. 출처를 밝히더라도 스크랩 및 불펌은 절대 허용하지 않으며, 오직 링크만 허용합니다.
    또한 포스트에 인용된 이미지는 해당 저작권자에게 권리가 있으므로 이미지를 사용할 경우 저작권 표시를 명확히 해 주시기 바랍니다. 감사합니다.
    여행과 사진, 그리고 영화를 이야기하는 블로그 '세상을 지배하다'를 구독해 보세요 =)
    양질의 컨텐츠를 100% 무료로 구독할 수 있습니다 ▶ RSS 쉽게 구독하는 방법 (클릭)
 

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. BlogIcon Uplus 공식 블로그  댓글주소  수정/삭제  댓글쓰기

    와우. 레인맨님은 차근차근 설명 잘하시는 타입이군요! 'ㅁ')a

    2010.03.30 12:01 신고
  3. BlogIcon 끝없는 수다  댓글주소  수정/삭제  댓글쓰기

    저는 여행블로거면서 여행 포스팅은 하나도 안 쓰니, 첫화면을 어찌해야할지 모르겠습니다. ㅋㅋㅋㅋ 암튼 레인맨님 따라해봐야겠어요 ㅋㅋㅋ

    2010.03.30 15:07 신고
  4.  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    2010.03.30 15:19
  5. BlogIcon 예문당  댓글주소  수정/삭제  댓글쓰기

    화면이 포탈사이트 같네요.
    출판 블로거인 저희는 리뷰 화면이 활용하기 좋겠네요.

    2010.03.30 16:24 신고
  6. BlogIcon G_Gatsby  댓글주소  수정/삭제  댓글쓰기

    이미 블로거로서의 정체성을 잃고 있는 중입니다.
    이 포스트는 많은 도움이 되겠군요.^^
    잘 지내시죠?
    ^^

    2010.03.30 17:20 신고
    • BlogIcon Reignman  댓글주소  수정/삭제

      개츠비님 만큼 정체성이 확실한 블로그도 드물죠. ㅎㅎ
      저는 개츠비님의 러브라인이 잘 그려지고 있는지 그게 궁금합니다. 크크크

      2010.03.30 22:33 신고
  7. BlogIcon Whitewnd  댓글주소  수정/삭제  댓글쓰기

    허헐 전 썸네일 테두리 없애버렸다는 ㅋ
    아직 태터데스크 쓰지만요... 자꾸 첫화면 이미지에 테두리가 나오더라구요 ~!

    저도 첫화면은 어떻게 꾸밀지 무지 고민중인데 아직까지 표족한
    답이 안나오는 것 같아요.
    3번이 괜찮아 보이네요 ~!!! 이미지 비율이 안맞아도 자동으로
    이미지를 짤라서 비율을 맞추는듯 !?

    2010.03.30 20:10 신고
    • BlogIcon Reignman  댓글주소  수정/삭제

      테두리가 없는 게 아무래도 좀 깔끔해 보이는 거 같아요.
      썸네일 비율은 1:1, 3:4, 4:3, 7:4, 원본비율 이렇게 5가지가 있더군요. ㅎㅎ

      2010.03.30 22:34 신고
  8. BlogIcon 블루버스  댓글주소  수정/삭제  댓글쓰기

    꼭 첫화면이 reignman님을 위한 것 같습니다.ㅋㅋ
    배치해 두신 게 블로그 특성에 맞춰 잘 어울립니다.
    빨리 저도 사용해보고 싶네요.^^

    2010.03.30 20:12 신고
  9. BlogIcon 좋은엄니  댓글주소  수정/삭제  댓글쓰기

    어머어머어머 왠일이래욤.....

    읽고나서 BLOG TOP을 눌러보았다는...에이긍...ㅎ~

    멋져요~!!!ㅎㅎㅎ

    무엇보다도 영화리뷰란의 작은 상자가 완전 맘에 든는걸요?^^

    나는.....그럼 빵으로만 해야 되는겨용...레인맨님...?^^*

    2010.03.30 21:01 신고
    • BlogIcon Reignman  댓글주소  수정/삭제

      맞아요!!! 좋은엄니님..ㅋㅋ
      지금 좋은엄니님의 첫화면이 제 영화리뷰란의 작은 상자와 거의 비슷하지요.
      티스토리를 사용하시면 딱인데..아쉽습니다. ㅎㅎ

      2010.03.30 22:37 신고
  10. BlogIcon Zorro  댓글주소  수정/삭제  댓글쓰기

    정말 첫화면 무지 깔끔하세요~~
    갑자기 제가 사용하고 있는 첫화면이 생각나네요;;

    2010.03.30 21:35 신고
  11. BlogIcon ageratum  댓글주소  수정/삭제  댓글쓰기

    베타테스트 하시는 분들의 포스트를 보면
    빨리 사용해 보고 싶다는 욕구가 마구 생기네요..ㅋㅋ

    2010.03.31 00:10 신고
  12. BlogIcon 銀_Ryan  댓글주소  수정/삭제  댓글쓰기

    아게라텀님 댓글에 격하게 공감합니다 ^^;;
    원래 첫화면에 대한 필요성 자체를 못 느꼈었는데 레인맨님을 비롯해서 여러 베타테스터 분들의 멋진 포스팅을 보다보니 첫화면이 필요하다는 얘기에 설득당하고 있어요. 거의 70% 정도 넘어왔으니, 정식 서비스가 시작될 쯤이면 130% 정도의 상태가 될 것 같습니다 ^^;

    그나저나 레인맨님 진짜 설명 잘해주시네요 ^^;

    2010.03.31 00:56 신고
    • BlogIcon Reignman  댓글주소  수정/삭제

      자기만의 대문을 갖는 다는 것이 참 좋죠.
      정말 다양한 스타일의 디자인이 가능해서
      개성넘치는 첫화면들을 볼 수 있을 것 같습니다. ^^

      2010.03.31 14:58 신고
  13. BlogIcon 새라새  댓글주소  수정/삭제  댓글쓰기

    기능들이 많이 좋아지고 다양해진것은 분명한데..
    이걸 써야할지 말아야 할지 아직은 고민이네요..
    레인맨님은 깔끔하게 잘 적용하셔서 보기 좋은데요^^

    2010.03.31 05:19 신고
    • BlogIcon Reignman  댓글주소  수정/삭제

      블로그 첫 페이지에 그냥 최근포스트가 덩그라니 자리하고 있는 것 보다는
      자신의 블로그 컨셉을 어필할 수 있는 첫화면을 만들어 놓는 것이 좋겠죠. ㅎㅎ

      2010.03.31 14:59 신고
  14. BlogIcon beat™  댓글주소  수정/삭제  댓글쓰기

    영화전문인 레인맨님다운 첫페이지네요 +_+

    2010.03.31 08:22 신고
  15. BlogIcon 디자인이소  댓글주소  수정/삭제  댓글쓰기

    레인맨님의 영화리뷰 블로그에 맞는
    깔끔하고 풍성한 영화관련 이야기들이 한눈에 들어오^^

    2010.03.31 10:31 신고
  16. BlogIcon 피아노쌤  댓글주소  수정/삭제  댓글쓰기

    저도 자꾸 티스토리로 옮기고 싶다는...ㅎㅎ

    2010.03.31 16:49 신고
  17. BlogIcon 찰꼬부기  댓글주소  수정/삭제  댓글쓰기

    읽는 내내... 고개를 끄덕이게 만드는
    당신은 진정한 능력자~!!^^


    기립박수 중~!! ㅎㅎㅎ

    2010.03.31 19:43 신고
  18.  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    2010.03.31 21:37
  19. BlogIcon 참치먹는상연  댓글주소  수정/삭제  댓글쓰기

    역시 부지런하신 레인맨님~~
    한눈에 보기좋게 정리가 되네요^^

    2010.04.01 00:22 신고
  20. BlogIcon 이수헌  댓글주소  수정/삭제  댓글쓰기

    항상 유익하게 잘 보고있답니다 ㅎㅎ

    꾸준히 레인맨님 티스토리 눈팅만 하다가

    이번에 우연히 초대장을 받게되어

    새로 티스토리 하나 만들다 보니

    이런거 저런거 정보 얻으려고 다시 와봤어요 ㅎㅎ

    레인맨님처럼 깔끔하게 티스토리 정리하려니

    힘드네요 ㅎㅎ

    좋은하루 되세요 ㅎㅎ

    2010.04.03 08:01 신고
  21. BlogIcon 예문당  댓글주소  수정/삭제  댓글쓰기

    와우 넘 멋져요.
    저도 첫화면 꾸미기 시작되면, 레인맨님 첫화면 잘 보구, 이쁘게 꾸미고 싶어요.
    레인맨님 블로그는 볼때마다 넘 부럽다능....
    저도 열심히 해서 내공 쑥쑥 올리겠슴당. ^^

    2010.04.05 10:19 신고


1425

카테고리

전체보기
영화
여행
사진
그외