티스토리 블로그 첫화면 꾸미기 완성

때맞춰 이런 저런 일들이 한꺼번에 터지는 바람에 미션 수행도 마지막날에 진행을 해봅니다.
시간투자를 좀더 하고 연구 노력하면 멋진 티스토리 첫화면 공개할 수도 있었을텐데 하는 아쉬움은
없습니다. 왜냐하면 꾸미는데는 자신이 없거든요! ^^

<티스토리 블로그 첫화면 관련글>
- 티스토리 첫화면 꾸미기 저장이 되지 않고 에러가 난다면
- 티스토리 첫화면 꾸미는 방법(이용방법)  
- 티스토리 첫화면 꾸미기 너무 심플한것 아냐?

블로그 첫 화면에 대한 컨셉?

첫화면에 대한 컨셉은 멋진 디자인보다는 최신글을 쉽게 찾고 구분할 수 있도록 상단에 배치하자입니다.

블로그의 첫 화면을 멋진 디자인을 입혀서 고급스럽게 꾸며놓으면 방문자에게 좋은 인상을 주고 기억에 남는 블로그가 되겠지만,  방문자에 대한 배려가 없다면 이용하는데 불편함이 따를 수 있습니다. 블로그의 첫 화면은 자주 방문하는 사람들이 주로 보는 화면이라고 생각을 합니다.

블로그 방문자를 크게 세가지로 분류해보면 ...

  • 첫번째. 검색을 통한 방문 (포스트로 이동)
  • 두번째. 구독기를 통한 방문 (구독자, 포스트로 이동)
  • 세번째. 다른 블로그나 카페, 웹페이지에서 걸어놓은 링크를 통한 방문 (첫화면 접속가능성 높음)

위의 경우를 봤을때 검색을 통한 방문이 가장 많으며 검색을 통하여 방문하는 경우는 첫화면을 보지 못합니다. 구기를 이용하여 방문하는 경우도 첫화면이 아닌 해당글로 바로 이동이 되기 때문에 일부러 홈을 누르지 않으면 첫화면을 보기는 쉽지 않지요! 그러므로 블로그의 첫 화면을 보는 방문자는 다른 블로그나 카페, 웹페이지에 걸려 있는 링크를 타고 들어오는 경우가 대부분입니다. 여기서 다른 블로그의 사이드바에 걸려 있는 링크를 타고 들어오는 경우 대부분 블로그메인(첫화면)으로 접속이 됩니다. 이렇듯 내 블로그를 알고 있는 이웃이나 그 이웃의 링크를 타고 들어오는 사람들이 블로그의 첫화면을 접하게 될 확률이 높기 때문에 첫화면은 자주 찾는 이웃들에 대한 배려가 있어야 된다고 봅니다. 자주 찾는 이웃들은 기존글들을 대부분 다 읽었기 때문에 최신글에 관심이 갈 수 밖에 없지요!

그래서 저의 블로그 첫화면은 전체 최신글을 최상단에 배치하고, 제 블로그를 잘 표현할 수 있는 컨텐츠를 두번째와 세번째에 배치를 하였습니다. 그 이후는 수익블로그인만큼 블로그 수익과 결산 포스트를 배치하였으며, 마지막으로 여행등 일상적인 내용들과 블로그 히스토리로 구성을 하였답니다.

그러면 비앤아이 블로그의 첫화면의 구성에 대해서 정리하도록 하겠습니다.

 

1. 한줄 알림줄 - HTML  

가끔은 블로그 방문자들에게 하고 싶은 말이 있을때가 있습니다. 그래서 한때는 m2day를 연결해서 사용도 했다가 제거를 했지만 이기회에 다시 한번 알림줄을 넣었습니다. 물론 수정할때는 첫화면 편집화면으로 들어가서 수정해야 하는 불편함은 있습니다. ^^

구성설명.
한줄 알림줄은 목록형을 아무것이나 선택한 후 디자인에서 html을 이용하여 작성하였습니다.

 

2. 전체 최신글 - 헤드라인형  

간혹 어떤 블로그에 가보면 최신글을 찾기가 쉽지 않아 최신글을 찾느라 시간낭비를 하는경우가 많습니다.
그래서 최신글을 상단에 배치하고 글의 갯수를 좀더 많이 넣고 싶었지만 헤드라인형에는 그런기능이 없더군요!
아쉽지만 어쩔 수가 없어서 하단에 "최신글 더보기" 링크를 달았습니다.  

구성설명.
전체 최신글은 아이템을 헤드라인형을 사용했으며 가장 최신글이 큰이미지와 제목, 요약내용이 표시가 되고 우측 하단의 작은 썸네일 이미지를 클릭하면 제목과 요약글이 보이는 형태입니다.

아이템의 타이틀을 지정하고 강조를 위하여 타이틀 아래 빨간 테두리를 넣었으며 요약글이 썸네일이미지와 겹쳐서 글자수를 줄였습니다.

이미지가 있는 글만 가져오기

이 헤드라인 아이템을 사용할때는 포스팅시 이미지를 잘 선정해야 합니다.
이미지를 바꾸는 방법이 없기 때문입니다. 물론 이미지가 들어가는 다른 목록형이나 조합형 모두 똑 같습니다. 
또한 이미지가 없는경우를 대비하여 이미지가 들어가는 모든 아이템에는
글선택에서 "이미지가 있는글만 가져오기"를 선택해줬습니다.

마지막줄 우측에 있는 "+ 최신글 더보기"기는 영역을 추가하고 목록형 아이템을 선택한 다음 디자인에서 html에 직접 태그를 적어서 작성했습니다. 소스는 아래와 같이 매우 간단합니다.

 <div style="text-align:right;padding:10px 5px;">
   + <a href="category"><font color=tomato>최신글 더보기</font></a>
 </div>


3. 블로그 팁 카테고리 글 - 목록형  

여기서부터는 가끔 최신글과 중복이 될 수도 있습니다. 중복배제 할 수 있는 기능을 제공하지 않기 때문에 중복배제를 위해서는 중복되지 않는 다른 카테고리를 선택하거나 수동으로 글을 직접 선택해주는 방법밖에 없는것 같습니다.

아무래도 제 블로그를 많이 찾는 분들이 블로그 팁에 관심이 많아서 좋은 내용은 없지만 블로그팁관련글을 두번째로 배치해봤습니다. 

구성설명.
목록형을 이용했는데 썸네일이미지의 크기가 1:1, 3:4, 4:3, 7:4, 원본비율로 정해져 있어서 저의 경우는 7:4로 했습니다. 기본값에서 타이틀을 삽입하고 포스트제목을 눈에 띄게 주황색으로 했고 요약글의 수를 조금 줄여서 영역을 조금 좁혔습니다.

바라는 점.
썸네일 이미지를 원하는 크기로 지정할 수 없는 점이 매우 아쉽습니다. 이것은 일률적인 첫화면이 만들어주질 우려를 하게 만들지요!.

썸네일 이미지의 사용자 지정크기 지원이 꼭 필요합니다.

 

4. 블로그관련 및 애드센스관련글-조합형  

구성설명.
조합형으로 구성을 하였는데 이 조합형이 제법 괜찮은 것 같습니다. 조합형중 하나의 아이템을 선택한 후에 각각의 아이템별로 제목이나 포스트 제목을 별도로 수정이 가능합니다. 타이틀과 포스트제목이나 요약글을 잘 꾸미면 멋진 구성을 만들 수가 있을것 같습니다. 저의 경우 2단 구성인데 아이템별로 전체 테두리를 넣어보려 했으나 기능이 없더군요!

바라는 점.
각 아이템(프레임)별 위아래 테두리는 있는 전체 테두리를 지정할 수 있는 기능이 있으면 좋겠습니다.

 

5. 맛과 여행 관련 글 - 이미지목록형  

 
구성설명.
맛과 여행카테고리중 최신글을 보여주는 영역으로 아무래도 여행관련글이 많다 보니 작은 이미지만으로 구성을 해봤습니다. 여행관련 내용이라 아이템 제목과 포스트제목을 밝은 색으로 바꿨습니다.
구성이 너무 심플해서 뭔가 부족해 보이긴 하지만 제 블로그에서 중요도가 낮아서 이 정도면 괜찮다 싶네요!

 

6. 블로그 수익 및 결산 - 목록형  

구성설명.
이 영역도 목록형입니다. 이미지와 글이 한줄에 한개씩 나오는 아이템을 선택하여 여러단으로 꾸며졌을 경우의 복잡함을 배제하였습니다. 하단쪽에 배치 되어 있어서 포스트를 많이 표시해도 될듯하여 5개를 넣었습니다.

 

7. 제휴마케팅 관련글 배치ㅡ목록형  

끝단에 제휴마케팅관련글을 배치했습니다. 수익에 대한 기대는 별로 하지 않지만 말이죠~~

구성설명.
목록형을 선택한 다음 글선택에서 검색을 이용하여 직접 선택하여 배치하였습니다. 특별한 꾸밈은 없고 포스트제목만 강조하였습니다. 이미지는 7:4~

 

8. 블로그 히스토리ㅡHTML  

가장 끝단으로 비앤아이 블로그의 히스토리를 넣었습니다.
공지에 넣어야 할 내용이지만 하단에 오픈함으로써 블로그 방문자들의 눈에 잘 띄게 했습니다.

구성설명.
목록형을 아무거나 선택한 후 디자인에서 HTML을 선택하여 태그를 통하여 작성하였습니다.
태그를 입력하고 적용을 누르면 선택된 목록형은 지워지고 입력한 태그가 적용이 되어 나타납니다.
강조할 부분이 아니므로 회색조로 꾸몄으며 css를 이용하면 링크나 글자색은 한번에 수정이 가능합니다.

 

바라는 점  

티스토리에 바라는 점이나 수정해야 하는 부분에 대해서는 이미 포스팅을 통하여 작성을 했기 때문에 별다른 내용은 크게 없습니다.

- 티스토리 첫화면 꾸미기 저장이 되지 않고 에러가 난다면
- 티스토리 첫화면 꾸미기 너무 심플한것 아냐?

하지만 꼭 지원해줬으면 하는 기능 몇가지만 정리해보면...

  • 파일첨부나 url을 통한 이미지 변경 기능
  • 선택한 아이템에 대한 css 지원 및 html  수정기능
  • 태터데스크와의 병행 사용

태터데스크와의 병행사용은 첫화면에서가 아니라 포스트에서 태터데스크를 사용할 수 있으면 좋겠습니다.
태터데스크 플러그인 설정에서 포스트 상단이나 하단을 선택한 경우 메인에는 적용이 되지 않고
포스트에서만 적용될 수 있도록 해주신다면 감사히 이용할 수 있겠습니다.

저의 경우 태터데스크를 포스트 하단에 적용하여 사용하고 있었는데 첫화면 꾸미기를 이용하는 경우 포스트 하단을 더 이상 꾸밀 수 없다는 점이 너무 아쉽습니다. 이대로 간다면 첫화면 꾸미기를 버리고 태터데스크를 사용할 수 밖에 없을지도 모른다는...(이거 협박 아닙니다. 절실한 제 마음입니다.)

마지막으로 간단하게 꾸며본 제 블로그의 첫화면입니다.

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon 윤뽀 2010.03.30 13:24 신고  댓글주소  수정/삭제  댓글쓰기

    깔끔하네요 ^^
    kay님 배려가 돋보이는 첫화면인데요?

    저는 지난 1차 미션때 이 내용을 포스팅해놔버려서 마지막날인 오늘까지도 참 난감합니다 ㅋㅋ 티스토리에서 걍 인정해줬음 좋겠는데 ;
    오늘내에 새 포스팅을 쓸 수 있을지

    • BlogIcon Kay~ 2010.03.31 09:49 신고  댓글주소  수정/삭제

      ^^ 감사합니다. 베타테스터를 할때는 될 수 있으면 나눠서 하는 것이 좋더라고요!
      저도 예전에 티스토리 블로그 베타테스터할때 한번에 다해서
      난감했었다는.. ㅎㅎ
      그래도 윤뽀님 마지막 포스팅 잘 하셨네요~~

  2. BlogIcon 비프리박 2010.03.30 16:18 신고  댓글주소  수정/삭제  댓글쓰기

    자신의 컨셉에 맞게, 자신이 원하는 바를 잘 드러내면서,
    블로그 첫화면을 꾸며보기.
    그런데 그것이 이번 클로즈 베타 테스팅에서 잘 구현되는가?
    이게 과제일텐데, 저는 어째 클로즈 베타에 맞춰가는 저를 발견합니다. -.-;

    nkay님의 첫화면, 방금 잘 구경하고 들어와서 글을 봤습니다.
    저도 얼른 마지막 숙제를 해야할텐데 말입니다. ^^

    • BlogIcon Kay~ 2010.03.31 09:51 신고  댓글주소  수정/삭제

      ㅋㅋ 저도 그렇습니다.
      베타버전에 맞추어 디자인을 할 수 밖에 없습니다.
      포토샵으로 디자인하고 css수정하는 일은 보통 사람들이 할 수 있는 분야가 아니기 때문이지요!
      그래도 그렇게 디자인을 하면 그런 분들이 점수가 높을것입니다. ㅋㅋ
      전 첫화면에 대한 시간할애를 많이 하지 않으려는 생각을 가지고 있기도 하고..
      디자인과는 친하지 않아서 지원하는 기능만을 이용해서 꾸몄답니다.

  3. BlogIcon DanielKang 2010.03.30 19:05 신고  댓글주소  수정/삭제  댓글쓰기

    오호 예전보다 확실히 깔끔하게 바뀌었네요
    언제쯤 모두에게 적용될수 있을련지 기대됩니다. ㅎㅎ

    • BlogIcon Kay~ 2010.03.31 09:53 신고  댓글주소  수정/삭제

      깔끔하긴 한데 틀에 맞추려다 보니..
      블로그들이 일률적 첫화면을 만들지 않을까 하는 걱정도 됩니다.
      물론 기능업데이트가 되어 오픈이 될거라 믿고 있지만요! ㅎㅎ

  4. BlogIcon 비프리박 2010.03.30 23:24 신고  댓글주소  수정/삭제  댓글쓰기

    이제서야^^ 베타테스팅 2차 보고서를 작성했네요. ^^
    트랙백 놓고갑니다.

    • BlogIcon Kay~ 2010.03.31 09:55 신고  댓글주소  수정/삭제

      ㅎㅎㅎ 마감시간 임박해서 마무리를 하셨군요!
      마감시간이 다가오면 정신이 최고로 집중이 되어..
      짧은 시간에 원하는 것을 완성할 수 있다는 장점이 있지요! ㅎㅎ
      아주 스피디하게 말이죠!

  5. BlogIcon ageratum 2010.03.31 00:06 신고  댓글주소  수정/삭제  댓글쓰기

    빨리 정식 오픈해서 한번 사용해 봤으면 좋겠어요..^^

  6. BlogIcon sky~ 2010.03.31 09:18 신고  댓글주소  수정/삭제  댓글쓰기

    아 저도 빨리 해보고 싶어요 베타가 끝났으면 ㅎㅎㅎ

  7. BlogIcon HEPI 2010.03.31 11:24 신고  댓글주소  수정/삭제  댓글쓰기

    역시 Kay~님의 첫화면은 깔끔하군요.
    구성도 잘 된듯하고, 너무 부러워요.

  8. BlogIcon Pink Notch 2010.03.31 13:22 신고  댓글주소  수정/삭제  댓글쓰기

    항상 명쾌한 설명이예요 ㅎㅎ 잘 활용해볼게요~~

  9. BlogIcon 머 걍 2010.03.31 19:32 신고  댓글주소  수정/삭제  댓글쓰기

    케이님 포스트만 참고해도 별 어려움이 없을거 같네요^^
    근데 썸네일 이미지 선택이 어려운 문제라서 안되는 걸까요?

    • BlogIcon Kay~ 2010.04.05 00:27 신고  댓글주소  수정/삭제

      예. 첫화면을 꾸밀것이라면 썸네일 이미지에 신경을 써야 합니다.
      첫화면에 표시할 이미지를 가장 먼저 등록해야 하지요!

  10. BlogIcon 머니야 머니야 2010.04.01 09:08 신고  댓글주소  수정/삭제  댓글쓰기

    저는 용의자님께서 디자인해 주신 첫화면을 쓰는데..
    복원기능은 어떤지 몰겠네요..
    테터로 바꾼다음...다시 원상복원할때 별 문제는 없을런지가 가장 궁금해요..ㅠㅠ

    • BlogIcon Kay~ 2010.04.05 00:28 신고  댓글주소  수정/삭제

      첫화면 꾸미기 하면 태터데스크는 자동으로 저장이 된답니다.
      제가 확인한바로는 태터로 바꾸면 원상복귀 되더라고요!

  11. BlogIcon 마루. 2010.04.01 13:51 신고  댓글주소  수정/삭제  댓글쓰기

    상콤 합니다..^^...저는 능력이 않되서 그냥 처음 그대`~~~로...

  12. BlogIcon 이름이동기 2010.04.01 14:00 신고  댓글주소  수정/삭제  댓글쓰기

    와우 !!!! 멋지게 꾸미셨네요 ~ ㅎㅎㅎ
    저도 한동안 이리저리 만지고 그랬는데 ...
    한동안 신경을 안썼더니 엄두가 안나요 ㅠ ㅋㅋ

    • BlogIcon Kay~ 2010.04.05 00:29 신고  댓글주소  수정/삭제

      ㅎㅎ 오랜만이네요~~
      학교엔 열심히 다시시는거죠? ㅎㅎ
      이번 티스토리 첫화면 꾸미기는 매우 간편해서 좋더군요!

  13. BlogIcon 둥이 아빠 2010.04.04 20:04 신고  댓글주소  수정/삭제  댓글쓰기

    너무 이쁘게 리뷰를 해주셨기에 아마도 당첨..ㅎㅎㅎ

    몇일 뒤에 발표인데 기다려지는데요..ㅎㅎㅎ

    2차 미션도 저도 급하게 올렸답니다.ㅎㅎㅎ

  14. BlogIcon 못된준코 2010.04.05 06:46 신고  댓글주소  수정/삭제  댓글쓰기

    역쉬 케이님 대단하세요.~~~~~블로그 꾸미기의 대가...!!!!!!!

    • BlogIcon Kay~ 2010.04.06 09:25 신고  댓글주소  수정/삭제

      ㅍㅎㅎ 누가 보면 웃겠습니다.
      전 꾸미기와는 아주 거리가 멀거든요..
      예술적인 능력이 턱없이 부족해요~~ ㅋㅋ

  15. BlogIcon 서툰용 2010.04.06 10:15 신고  댓글주소  수정/삭제  댓글쓰기

    구성이 깔끔하고 이용자한테도 편한 구성인것 같아요~ 저도 잠시 참고하여 고치러 갑니다~~

  16. BlogIcon 길브로 2010.06.25 02:00 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 항상 Kay님 블로그에서 유용한 정보 얻어가는 초보 블로거입니다. 저도 첫 화면을 꾸미고자 하는데, 윗글 '7. 제휴마케팅' 부분 처럼 포스트가 3개 들어가는 목록형을 선택했는데요. 이게 3개가 한줄에 배열되지 않고, 하나가 다음 줄로 넘어가서 위엔 2개, 밑에 1개 이렇게 되버리네요. 혹시 이거 해결할 방법이 있을까요? 이해가 어려우실까봐 제 블로그 남겨드릴께요. http://gilbro.tistory.com/

    • BlogIcon Kay~ 2010.06.25 10:05 신고  댓글주소  수정/삭제

      아무래도 폭이 좁아서 그런것 같습니다.
      티에디션 들어가서 상단에 보면 너비보정이 있는데 그곳에서 너비를 보정하는 방법으로 해결을 해야 할듯 합니다.

  17. BlogIcon 베이비파파 2012.05.24 10:55  댓글주소  수정/삭제  댓글쓰기

    내용 잘 보고 갑니다. 허접한 블로그 하나하나 만들어가는데 도움이 많이 되네요^^
    그런 의미에서 조금이나마 도움을 주고자 ad~원클릭하고 갑니다.^^