사용자가 만들어 보는 티스토리 첫화면 꾸미기.

2010티스토리 첫화면 꾸미기.

첫화면을 만들기전 우선 고민해본 문제 무엇을 어떻게 보여주고 이야기 할것인가 ? 
사실 사람에게 첫인상은 꽤 중요하지만 블로그의 경우 검색을 통해  들어온다면 첫화면을 보지 않고 나갈수도 있는 문제 그리고 첫화면에 너무 많은것을 넣을려구 하다간 어느 한가지 주제도 드러나지 않고 산만해 보일수도 있는 문제 과연 내 블로그의 주제는 무엇인가 나는 무엇을 보여주고 싶은가를 생각하다가 아직 모든 기능이 업데이트 되지 않은 상황에서 우선 사용자의 궁금증을 풀어주기 위해 종합적으로 보여드리기 블로그의 모든 카테고리를 종합적인 구성으로 첫화면을 구성 했습니다.

우선 이 화면은 제가 넣고 싶은거 다 넣어서 아주 길게 만들어본 화면 구성 입니다. 위쪽 블로그 메뉴에서 home을 누르시면 보실수 있는 첫 화면입니다. 너무 길어서 2등 분활을 했습니다. 단순 블로그의 종합 나열한 형태라 할수 있습니다.
사실 응용하면 리뷰, 시사, IT,사진이든 모두 사용할수 있지 않나 생각을 해보며 글 첫머리에 이야기 한대로 모든 카테고리를 넣어 좀 종합판의 웹진 형태로 만들어 봤습니다. 모든것을 집어 넣게 되면 결국 스크롤이 상당히 길어 집니다.

헤드라인의 구성과 갤러리형의 조합 특정 주제만 이야기 하고 싶을때.

블로그가 하나의 주제가 아닌 카테고리가 많은 블로거의 경우 첫화면에서 모든것을 보여주지 않고 굵직한 내가 보여주고 싶고 주제가 분명한 카테고리를 선정해 구성해본 첫화면 우선 왼쪽의 헤드라인 + 갤러리형의 경우는 사진이 많은 포스팅을 위주로 썸네일 형태로 많이 보여줄수 있는 쪽으로 구성 그리고 헤드라인은 그날의 포스팅을 보여주고 있다. 주제가 어떤 블로그든 그냥 무난한 구성이 되지 않을까 생각하지만 왼쪽의 경우가 사진 블로그에 더 적당하다는 생각에서 만들어 본 레이아웃 오른쪽의 경우 썸네일과 텍스트의 복합형으로 헤드라인의 구성을 빼버린 경우 입니다. 첫 화면을 바로 봤을때는 오늘 어떤 이야기가 포스팅된지는 알수 없으나 이것 역시 웹진 형태로 레이아웃을 만들었다고 할수 있습니다.

이미지가 없는 텍스트를 많이 활용해 만들어본 레이아웃 사용자에 따라 결국 레이아웃의 형태는 달라지겠지만 왼쪽의 단순 텍스트와 목록형의 구성은 좀 밋밋해 보이는게 특징 그래서 오른쪽에 다시 목록과 썸네일 복합적인 화면으로 구성한쪽이 사실 눈으로 보기엔 더 나아 보일수도 있으나 너무 많이 늘어 놓으면 집중이 안되고 산만해 보일수도 있다는 생각이 드네요.
블로그의 주제에 맞는 첫 화면 레이아웃 보다는 무엇을 어떻게 보여주고 싶은가 하는 사용자의 마음에 따라 레이아웃은 여러형태로 나올수 있지 않을까 생각해 봅니다.

레이아웃 구성시 포인터를 준점.

현재 티스토리 첫화면 꾸미기 에디터는 크게 4가지의 형태로 나뉜다. 큰 이미지를 삽입하는 헤드라인형 , 작은 이미지를 보여주면서 글을 요약하는 썸네일형 + 텍스트형 , 그리고 이미지만을 보여주는 갤러리형 , 텍스트만 보여주게 되는 목록형, 이 4가지로 모든것을 구성되어 있다.
자칫하면 단조롭고 모두 똑같아 보일수 있는 레이아웃이 나오기에 각각의 형태에 본인 블로그 백그라운드 컬러와 어울리게 타이틀 제목으로 포인터를 주면서 모든 형태를 만들었다.

목록형이든 썸네형태든 모두 타이틀제목을 삽입해 방문객이 이것이 무엇을 이야기 하는지 알아볼수 있도록 만들었다. 타이틀 제목에 모두 밑줄 사용과 다른 형태의 컬러사용.

타이틀제목

단순히 포스팅 제목위에 카테고리를 정의 해주면서 텍스트를 글상자로 감싸거나 각기 다른 컬러를 사용하고 밑줄 효과를 이용해 방문객이 봤을때 무엇을 이야기 하는지 알수 있도록 포인터를 줬다.
주제의 구분을 짓기 위해 밑줄긋기 효과는 간단하면서도 깔끔해지고 정리가 된다는 효과가 있다.

또 다르게 블로그 레이아웃에 포인터를 준다면 배경색과 텍스트의 컬러의 효과다. 블로그 스킨이 화이트의 배경이라 첫화면에서 다른 컬러를 이용해 만들어 본다면 꽤 화려하게 컬러풀하게도 만들어 진다.
너무 화려한것이 싫어 헤드라인만 기본구성에서 배경색을 바꾸고 나머지는 카테고리 타이틀에 각각의 다른 컬러와 폰트의 크기를 조금씩 다르게 지정해 주제의 구분이 되도록 구성을 했다.

그리고 이번 티스토리 첫화면 꾸미기는 태그별, 댓글이 많은글 , 트랙백이 많은글등 직접 지정하거나 해서 첫화면에서 지나간 옛날글들을 다시 보여줄수 있다는 것도 큰 특징이다.
사실 타이틀에 글로써 아닌 이미지를 삽입해 이미지로 표현 한다거나 테이블바디 역시 배경이미지를 넣는다거나 하면 훨씬 더 화려하게 보여질수도 있으나 너무 복잡해질거 같은 생각도 든다.

현재까지 티스토리 첫화면 꾸미기에서 오픈되지 않은 부분과 좀 수정했으면 하는 부분.

html이나 css에 대해 어느정도 익숙한 사용자를 위한 치환자가 공개되지 않아 html이나 css를 강제로 소스에 집어넣어 삽입했을 경우 발생하는 문제가 버그인지 에디터의 실수인지 알수 없으나 일단 간단한 css나 html 태그의 삽입을 해보면 별 문제없이 보여지는걸 봐선 일단 스킨의 자유도의 높은 tistrory의 특성상 이 부분도 공개되면 에디터를 이용해 다양한 탬플릿을 만들어 내는 사용자가 나오지 않을까 하는 생각도 합니다. 단지 이전의 태터데스크보다 치환자등은 이전 글에 잠깐 이야기했듯 제가 보기엔 훨씬 소스는 복잡해 보입니다. 그리고 글 포스팅후 글목록이 첫화면에 갱신되는 시간이 현재 너무 긴거 같군요. 예전 태터데스크에서 10분 정도면 새글이 적용이 되어 첫화면에 보여졌는데 첫화면 꾸미기의 경우 더 길어진듯 합니다.
그리고 같은 목록에서 글을 불렀을때 이전에 이미 로딩된 글이라면 다른 아이템에서 그 목록을 다시 사용할 경우 중복되어 보여지지 않았으면 합니다.

앞으로 추가될 기능이 꽤 있다고 지난주 간담회에 이야기가 나왔기에 어떤 형태가 되든 하나씩 오픈되지 않을까 예상해 봅니다. 현재 첫화면 꾸미기 에디터는 Firefox 3.6, 구글크롬 , ie8에서 큰 문제 없이 잘 됩니다.

티스토리 첫화면에서 추가되었으면 하는 기능.

갤러리는 왜 썸네일형태의 목록만 봐야해 ? 좀 더 비쥬얼하게 구성은 안될까 ?
그리고 갤러리형은 샘플이 너무 적고 현재 너무 단조롭다 이미지를 누르면 크게 보여지거나 슬라이드쇼의 형태로 이미지가 보여지는 갤러리 아이템이 있었으면 한다. 좀 다양하게 보여지는 탬플릿이 있었으면 한다.

위젯은 꼭 사이드 메뉴에만 적용해야 하나 첫 화면에서 lbs의 기반의 서비스나 다음지도,카페등 다른 sns서비스를 연결해 flickr의 이미지 목록, 트위터 , 뉴스위젯, 날씨 , 일정관리, 다음서비스와 연계해 좀 더 많은 정보를 보여주면 안될까 ?

간단히 구성하면 TITLE 블로그 주제와 상관없이 자신을 소개하는 동영상이나 이미지등을 넣어 본다. 콘텐츠부분 블로그의 포스팅한 내용들로 구성 , 하단 위젯이나 다음의 다른 서비스와 연계한 위젯등을 넣거나 플리커등 외부 SNS서비스와 연동해서 넣어 본다. 문제점 구성이 복잡해지고 외부적인 요인으로 인해 서버에 트래픽 증가가 올수 있다.
문제점은 티스토리가 한번 생각해 보고 사용자가 쉽게 접근할수 있도록 만들어주고 풀어나가야 할 숙제다.

티스토리의 장점은 스킨의 자유도가 높은 반면 초보자가 접급하기는 어렵다.
예전에 티스토리 스킨을 직접 만들기 위해 워드프레스의 스킨을 가져와 치환자를 바꿔 만들어 잠시 사용한 적이 있으나 관둔 이유는 브라우저의 호환성 때문이다. 스킨 만드는게 꽤 손이 많이 가고 시간도 많이 뺏기고 귀찮은 일이란걸 느꼈다.
현재 블로그 스킨도 오픈된 스킨 소스에서 필요한 부분만 가져와 블로그에 사용하고 있는 사용자로 현재의 첫화면 꾸미기는 일단 사용하기 쉽고 간단하다.
검색의 키워드로 접속하면 블로그의 첫화면은 못보겠지만 즐겨찾기도 많이 이용하고 있지않나 생각해 보며 앞으로 공개될 치환자와 CSS 코딩 사용 문제에 따라 좀 더 다양하고 재미있는 탬플릿들이 많이 나오지 않을까 생각해 봅니다.

초대장 배포후 티스토리에 처음 블로그를 개설한 사용자들에게 듣는 이야기는 어렵다와 처음에 멀 해야 할지를 모르겠다 이다. 개인적으로는 티스토리에 내부적인 SNS와 비슷한 기능이 있었으면 하는 바램이 있다.
사실 티스토리에 내부에 먼가 좀 즐길거리를 만들어 줬으면 하는 바램이 있다. 스킨의 자유도가 높다는건 이제는 티스토리만의 장점이 아니다. 다른곳도 점점 오픈되고 있기에 좀 더 비쥬얼하고 먼가 특색있는 서비스를 앞으로 더 보여주길 기대하고 좀 더 쉽고 편리하게 만들어지기를 바라며 긴 글 끝까지 읽으셨다면 감사합니다.

[Review/IT,디지털] - 심플해지고 빨라진 티스토리 첫화면 꾸미기.
[blah blah] - 티스토리 T-Time 간담회 다녀왔어요.