티에디션 꾸미기 솔찍한 나의 생각

티스토리 첫페이지 꾸미기 그 시작

티스토리 첫페이지 꾸미기를 티스토리에서 준비하면서 베타테스터 인원을 모집 했고, 저도 베타테스터로 참여했었습니다. 티스토리 간담회에서도 첫페이지 꾸미기에 대한 이야기를 듣고 그동안의 개발자의 고충도 듣고 했었죠. 참 여러가지 생각을 하면서 만드는 구나 하는 생각도 그때 들었었습니다.

다른 포털 사이트등의 블로그들의 첫페이지를 보면 뭔가 잡지의 첫페이지처럼 화려하게 잘 꾸며져 있죠. 그렇게 쉽게 꾸미는걸 제공하지 않아서 사실 티스토리로 넘어오는것을 꺼려하는 분도 실제로 본적이 있습니다. 그런 유저들을 위해서 만든게 티스토리 첫페이지 꾸미기이며, 블로그를 꾸미기를 좋아하는 분들의 심리를 파악한 티스토리의 리스펀스이기도 하죠.

지금은 첫화면 꾸미기가 티에디션이라는 새로운 이름을 얻었지만, 사실 티스토리 첫페이지 꾸미는 부분은 플러그인형태로 테터데스크라고 하는것이 제공 되고 있었습니다. 다만 일부 유저에게 외면 받았던 이유는 속도 측면에서의 개선이 없다는 점과, 다양한 카테고리에 글을 원하는 글 순서대로 반영할 때 일부 제약이 있다는 점. 웹표준에 역행하는 일부 스타일 적용등에 있을겁니다.

티에디션은 그리드CSS 를 적용하여 티스토리 유저의 다양한 블로그폭을 모두 지원하며, 액티브하게 설정되도록 바뀌었습니다. 다만 첫버전인 만큼 아직 문제는 있었으며, 이 부분은 베타테스터기간동안 여러 유저가 문제에 대해 제기하고 요청을 해서 즉각 수정된 부분도 많습니다. 아직 문제가 있을 수 있고, 불만이 있는 부분도 있을겁니다. 다만 베타테스터를 모집하고 반응을 바로바로 수집하고 반응을 해준다는것에 있어서는 티스토리가 참 잘하고 있다는 생각이 듭니다.

티스토리 첫페이지 꾸미기 티에디션 아쉬운 점

티스토리 첫화면 꾸미기 베타테스터를 하면서 몇가지 건의를 했던 내용이 있는데 반영되진 않는 점도 있습니다. 티스토리 간담회에 갔을때 개발자의 말을 듣고 그부분을 고민했지만, 쉬운 접근 쉬운 사용에 대해서도 생각을 해야했기에 그런식으로 했다는 이야기도 들었습니다. 다만 몇가지 써보니 아쉬운점이 보여서 적어봅니다.

HTML 버튼에 대한 내용입니다. HTML 버튼은 티에디션 이전의 테터데스크에서도 있었던 버튼이지만, 그때는 HTML 버튼을 누르면 구조와 CSS 를 조정이 가능했습니다. 완벽하게 제어는 사실 힘들긴 했지만 그래도 어느정도 제어가 가능해서 꾸미고 했었죠.

티에디션에 있는 HTML 버튼은 좀 특성이 다릅니다. 꼭 사이드바의 HTML 편집기 와 비슷한 역할을 합니다. 그 아이템을 대체하는 HTML 문구를 넣을 수 있는 부분이죠. 제생각에 HTML 에 대한 부분이 그런의미를 뜻한다면 상위 메뉴로 빼놓아야 편하지 않을까 생각이 듭니다. 막상 아이템을 하나 추가하고 바로 이미지등의 태그를 입력하려면 HTML 버튼을 바로 눌러서 설정할 수 없고, 하나의 아이템을 임의로 선택 후 디자인 > HTML 순으로 접근을 해야합니다. 오히려 직관적인 메뉴 접근을 해치고 있지 않나 생각이 듭니다.

만일, HTML 이 구조와 CSS 를 따로 구분해서 보여주고 그것에 맞게 바로 그곳에서 꾸밀 수 있다면 디자인 안쪽에 있어야하는게 맞긴 합니다. 다만 이렇게 하면 CSS 를 관리하는 부분이 첫페이지에도 있고 스킨자체의 style.css 에도 존재하니 불필요한 2중구조가 될 가능성도 있죠. 여러가지로 고민해봐야겠지만 여러가지를 생각하기에는 의견도 상당히 중요하기에 저도 의견을 내어봅니다.

티스토리 첫페이지 꾸미기 티에디션 좋았던 점

티에디션을 써보면서 좋았던점은 첫화면을 멋지게 꾸밀 수 있는데 초보자도 쉽게 사용이 가능하다는 점입니다. 잘 모르더라도 마우스로 몇번만 클릭하면 간단하게 하나의 셋이 완성이 됩니다. 당연 더 이쁘게 꾸미실 분들은 연구해서 더 이쁘게 꾸밀 수 도 있죠. 적은 노력으로 괜찮은 생산품이 나온다는건 중요한 내용입니다.

그리고 티에디션은 각각의 블로그의 개성을 충분히 살려줄 수 있습니다. 노력여하에 달려있죠. 제 블로그에 꾸며둔 내용보다 훨씬 아기자기하게 잘 꾸며두신 분도 많을겁니다. 노력과 시간이 들어가면 얼마든지 더 다양하게 남들보다 더 이쁘게 더 눈에 잘 띄게 설정이 가능하다는것이죠. 그리고 이것은 블로거들에게는 가장 중요한 요소이기도 합니다.

또 한가지 좋은 점은 속도가 빠르다는 점입니다. 테터데스크를 쓰시다가 티에디션을 쓰시는 분은 속도가 상당히 빠르다는걸 알 수 있을겁니다. CSS 가 완벽하게 구성된 티에디션은 아니지만, 그래도 그전에 사용하던 첫화면 꾸미기와는 비교가 안될만큼 빠른 속도를 보여줄것입니다.

티스토리 첫페이지 꾸미기 티에디션 꾸며보자

티에디션에 첫화면에 타이틀부분을 꾸미는 글을 사실 여러게시물에서 봤습니다. 저도 같은 방법으로 꾸며보다가 몇가지 아쉬운점이 발견되었고, 이걸 어떻게 하면 좀 편하게 좀 쉽게 꽁수로 이용할 수 있을까 연구를 시작했습니다.

이미 이 방법을 쓰고 계신 분도 있겠지만 저도 우연찮게 생각이 난 방법이고 쉽게 잘 응용 할 수 있을듯해서 동영상으로 그리고 그림으로 설명을 해볼까 합니다. 어렵지는 않습니다. 그리고 한번 꾸며두면 계속 활용이 가능하고 더 다양하게 꾸밀 수 있습니다.

위 사진은 티스토리 첫화면 꾸미기 티에디션에 어떤 특정 아이템에 타이틀을 없앤 뒤, 그위에 다시 아이템을 하나 별개로 생성 후 HTML 편집에서 div 공간을 만든 사진입니다. 이렇게 공간을 만들고 글을 적으면 글자가 일단 나타나게 됩니다. 글자만 나타난다니 누구나 다 할 수 있다구요? 하지만 아닙니다. 이렇게 div 에 class 이름을 줘놓는다면 얼마든지 이쁘게 CSS 를 활용하여 꾸밀 수 있습니다. 활용의 폭은 아주 큽니다.

방법 :

항목을 만든뒤 HTML 편집에서 아래와 같이 입력을 합니다.

<!-- 코드 예시 -->


<div class="tedition">조회수가 많은 게시물(예시)</div>

style="" 이런식으로 이부분에 스타일을 같이 넣지는 말아주세요. 그러면 애써서 div 를 넣어두고 다시 망치는 부분이 생기니까요. 아래부분을 따라주세요.

해당 div 항목에 스타일을 적용한 부분입니다. 대부분의 아이템에 동일한 class 네임을 준뒤 스타일을 적용하면 페이지가 뜨는 속도도 빠르고 일관성있게 스타일을 줘서 꾸밀 수 있습니다. 당연 class 이름을 서로 다르게 주면 각 항목마다 배경이미지를 다르게 해서 더 다양하게 꾸밀 수 있죠.

/* CSS 예시 */

div#ttCanvas .tedition {
color: #151515;
font-family: 바탕,serif;
font-weight: normal;
font-size: 26px;
background: url("https://t1.daumcdn.net/cfile/tistory/131B350B4BFA8FD16E") no-repeat 0 0;
height: 33px;
padding: 10px 0 17px 64px;
border-bottom: 1px solid #DDD;
letter-spacing: -3px;
}

위에 CSS 는 div 에서 지정했던 class 에 대해서 꾸미는 부분입니다. 이 부분을 적용하면 해당 .tedition 부분이 동시에 모두 적용됩니다. 아이템이 아무리 많더라도 위에 한개의 코드로 모두 적용이 된다는 소리죠. 근데 이미지를 서로 다르게 놓고 싶다면 각 class 네임을 다르게 준 뒤, 해당 스타일도 다르게 설정을 해주면 됩니다. CSS 를 꾸미는건 사용자의 자유입니다. 얼마든지 이쁘게 꾸밀 수 있다는 것이죠.

꾸미는 방법에 대해서 글로 설명하는것보다 동영상으로 시원하게 한번 보는게 좋겠죠. 그래서 티에디션 타이틀 꾸미기를 동영상으로 만들어보았습니다. 이미지 활용은 iconfinder.net 등을 활용하면 좋습니다.



class 네임과 id 에 대해서 궁금하신분은 아래 링크를 참고해주세요.

관련 링크


티스토리 스킨 배우기 id, class 는 왜 있는가
XHTML 웹표준 틀리기 쉬운 문법들

티에디션 발행하기

http://cdmanii.com/te/2

티에디션 발행하기는 티스토리 간담회에서 나왔던 그것이군요. 티스토리 첫화면 꾸미기인 티에디션을 잘 꾸며서 그것을 따로 발행해서 볼 수 있는 영역을 만든다고 했었는데 그게 이것이었습니다. 사실 활용도 측면에서는 큰 효용이 있을까하는 의구심이 들긴하지만 티스토리도 다른 모블로그처럼 첫화면을 태그등을 잘 몰라도 쉽게 꾸밀 수 있게된점과 좀 더 활용을 하고 싶은 사람들에게도 어느정도의 자유성을 두었다는 점에서 좋게 생각하고 싶습니다. 앞으로도 개선사항을 항상 수집하고 노력하는 티스토리인만큼 앞으로 점점 발전히리라고 생각됩니다.

처음으로 구글 메인에 글이 떳네요. 감사합니다.

다음쳇페이지도 등극 !