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

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


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

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

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

티에디션은 그리드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("http://cfile8.uf.tistory.com/image/131B350B4BFA8FD16EDFEA") 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 에 대해서 궁금하신분은 아래 링크를 참고해주세요.





티에디션 발행하기


http://cdmanii.com/te/2

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




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



다음쳇페이지도 등극 !
신고

이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 이전 댓글 더보기
  2. semix2 2010.05.25 11:26 신고

    타이틀 부분을 임의로 꾸밀 수 있었군요. 좋은 정보 배워갑니다-

    perm. |  mod/del. |  reply.
  3. 버섯공주 2010.05.25 12:41 신고

    오! 역시, 같은 티에디션을 쓰더라도 훨씬 깔끔해 보이는군요. ㅠ_ㅠ 정말... 능력자... 부럽...

    perm. |  mod/del. |  reply.
  4. 따옥따옥 2010.05.25 13:22 신고

    역시 고수님 !!

    많이 배우고 갑니다 ^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:41 신고

      댓글 너무 감사합니다. ^^ 블로그에 노무현대통령님 보니 마음이 살짝 아려오네요. 좋은 분이었죠. 제가 블로그에 달아둔 노란리본도 그걸 기려서 달아둔거랍니다.

      perm. |  mod/del. |  reply.
  5. G_Kyu 2010.05.25 13:49 신고

    티 에디션에 대한 생각을 깔끔하게 정리해 주셨넨요~
    저도 티에디션으로 변경하였지만, 살짝 불편한 점이 있네요 ^^;

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:43 신고

      저는 HTML 저 버튼 위치가 불편하더라구요. 대표 이미지 설정하는 부분도 생각해보니 너무 구석에 있는것같구요. 생각보다 자주 쓸듯한데.. 바로 그냥 처음부터 대표이미지 위치 설정이 가능해도 좋을듯하고. 그러고보니 아이디어가 막 떠오르네요. 개발자분은 머리 아프시겠지만요 ㅋ;

      perm. |  mod/del. |  reply.
  6. 유아나 2010.05.25 15:41 신고

    마지막 꽁수(?)는 어렵네요. 제가 초보라서 그런가봐요 ㅠㅠ

    perm. |  mod/del. |  reply.
  7. 호환 2010.05.26 00:41 신고

    파워블로거 시디매니님의 트랙백에다가 거기에 선트랙백이라니 조금 놀랐습니다 ㅎㅎㅎ

    언제나 구글리더로 포스팅 하시는 글 잘 읽고 있습니다 ^^ 감사합니다~!!

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:44 신고

      죄송해요. 제가 회사에 있을때 글은 보고 트랙백만 먼저 날리고 댓글은 못달은듯해요 ㅋ; 댓글 달려 뛰어갈게요. !~

      perm. |  mod/del. |  reply.
  8. Zorro 2010.05.26 00:48 신고

    티에디션 이뿌게 나온거 같기도 하지만..
    아직 적응이 덜 되어서 어렵네요^^;;
    구글 메인 추카드려용~~~ㅎㅎ

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:45 신고

      점점 개선되겠죠? ㅋ 저는 HTML 부분 구조로 좀 나오면 좋겠어요. CSS 완전 분리되면 좋겠구요. 축하해주셔서 감사합니다. ^^

      perm. |  mod/del. |  reply.
  9. get style (겟 스타일) 2010.05.26 01:27 신고

    우왓 멋지네요 ^^* 티에디션 보다 궁금한게 있는데요 동영상 강좌 만드실때 어떤툴로 찍으신 건가요? 좋아보이네요 안그래도 좋은 동영상 강자 캡쳐 툴이 없나 찾고 있었거든요 답변좀 해주시면 감사하겠습니다^^*

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:46 신고

      캠타시아 라는 유틸리티를 사용해서 찍었어요. 찍은뒤 편집하기 하면 자동으로 마우스가 가만히 있는 부분은 확대해서 보여주기도 하고 그래요 ㅋ

      perm. |  mod/del. |  reply.
  10. 엘로스 2010.05.26 01:38 신고

    심도있는 리뷰 잘보고 갑니다. 말씀대로 계속 개선되고 있는 기능이니 만큼 좀 더 파워풀하고 멋진 기능이 더 추가되리라 기대합니다. ^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:47 신고

      부족한 글에 칭찬 감사합니다. 앞으로 점점 발전해서 티스토리 유저가 많아지면 좋겠어요. ㅋ

      perm. |  mod/del. |  reply.
  11. 은빛냇물 2010.05.26 11:56 신고

    저렇게 할 수도 있었군요.
    자바스크립트로 페이지 열릴 때 티에디션 CSS만 강제로 수정시키면 원하는 글꼴로도 바꿀 수 있겠네요.
    잘 읽고 갑니다.

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:49 신고

      댓글 감사합니다. ^^ 근데 티에디션도 CSS 쓰는건 style.css 에서 끌어갈 수 있으니 궂이 구분안하고 style.css 에 다 적어도 될것같아요. 글꼴 바꾸는건 ajax 로 아니면 말하신 자바스크립트로 하면 될듯해요.

      perm. |  mod/del. |  reply.
  12. 2010.05.26 12:27

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 12:39 신고

      헙 솔직 맞습니다. 제가 적다보니 솔찍이 되버렸네요 ㅋㅋ 근데 지금 제목바꾸기에는 뭔가 늦어버렸고.. 근데 강조하는 느낌은 살짝 있어요 ㅋ 댓글 감사합니다. ^^

      perm. |  mod/del. |  reply.
  13. JiNi 2010.05.26 12:50 신고

    저도 티에디션에 약간 아쉬운 점이 있습니다.
    트랙백 남깁니다.

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:50 신고

      아쉬운점은 티스토리 유저의 바램이기도 하죠. 개발자분이 많이 수용해주실거예요. ^^

      perm. |  mod/del. |  reply.
  14. 웅이아뿌 2010.05.26 14:26 신고

    아 좋은글 잘 써주셨네요 ^^
    잘 보았습니다. 저도 바꾸어야 하는데 ...
    뭐가 바쁜지 ㅎㅎㅎ

    좋은 하루 되세요 ~

    perm. |  mod/del. |  reply.
  15. shinlucky 2010.05.26 22:14 신고

    흐음 설명해주신것보니까 한번 갈아타볼까 고민됩니다. ^_^

    perm. |  mod/del. |  reply.
  16. greenbea 2010.05.26 22:17 신고

    랙백이 타고 왔습니다.
    아쉬운 점, 좋았던 점, 꾸며보기, 발행하기 잘 나눠서 쓰셨네요

    꼼꼼한 리뷰 잘 읽고 갑니다!!

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:55 신고

      칭찬 너무 감사합니다. ^^ 좀 더 적고 싶은 글이 많은데 시간이 부족하네요 ㅠ 몇가지 더 적을글을 더 적어볼까해요. 밤 늦었는데 좋은꿈 꾸세요. ^^

      perm. |  mod/del. |  reply.
  17. 소나기 2010.05.26 23:40 신고

    꼼꼼한 리뷰 잘 읽었습니다.
    html관련 부분은 정말 대단하시군요. 저는 거의 아는게 없다보니
    그저 감탄만..^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.26 23:56 신고

      따라만 하셔도 급방 하나 뭔가 만들어질거에요. 실제로 따라 하셔서 만드신분이 있네요. 저도 글써놓고 너무 기뻐요. ^^

      perm. |  mod/del. |  reply.
  18. BlueRoad 2010.06.02 11:55 신고

    우연찮게 티에디션을 적용해보니, 조금 불편한 점이 있어 검색해보다 여기까지 왔네요.
    항목별 타이틀을 꾸미는게 좀 이해가 안되서 이미지로 만들어서 채워두었다가,
    혹시나 방법이 있을까 해서 검색해보니 이렇게 멋진 방법이 있네요.
    영상으로 자세한 설명은 잘 봤으니 시간될때 연구 좀 해봐야겠습니다..^^;

    perm. |  mod/del. |  reply.
  19. 개떵이 2010.06.02 23:54 신고

    저는 아직.. 하다가 사진이 안나오고 그래서;; 다시 없애버렸어요 ㅠㅠ! 다음에 다시 씨디맨씨 글보고
    제대로 해봐야겠어요 ㅠㅠ

    perm. |  mod/del. |  reply.
  20. Sentimental C. 2010.11.26 17:21 신고

    안녕하세요 ^^ 잘읽고 갑니다. 아직 초보라 html다루는 법도 모르겠구 모든게 복잡하네요~ 가끔 애용하며 보겠습니당 ㅋ
    저 혹시 한가지 질문하고 싶은게 있습니다.
    티에디션에서 앞에 대문을 꾸미는데 새로로된 이미지를 내걸면 이미지 조절이 힘들더라구요 ㅠㅠ 이 이미지를 이쁘게 조절하고 싶은데 못하는걸까요? ㅠㅠ

    perm. |  mod/del. |  reply.
  21. rockchalk 2014.01.11 11:27 신고

    감사합니다. 덕분에 쉽게 잘 따라 만들 수 있었습니다. ^^

    perm. |  mod/del. |  reply.