'첫화면 꾸미기'에 해당되는 글 2건

  1. 2010.03.28 티스토리 첫화면 꾸미기, 베타테스터 2번째 미션 (4)
  2. 2010.03.21 티스토리 첫화면 꾸미기 베타테스트 (8)

블로그 주제 : 자동차, IT/모바일/통신, 문화생활(영화/뮤지컬/연극), 카메라, 일상생활 



첫화면 꾸미기 컨셉


안녕하세요. 두번째 티스토리 첫화면 꾸미기 베타테스터 미션 2번째 포스트입니다. 이번에는 첫화면을 마음대로 꾸며보는 방식으로 진행이 되는데요. 저는 자동차를 비롯한 IT/문화공연 위주로 올리곤하니, 그에 맞는 스타일이나 최대한 가독성있고 보기쉽게 구성해보려고 합니다.

간단하게 최신글 포스트 구성과 자동차 리뷰/프리뷰의 구성을 예로 들어 보겠습니다.



최신글 포스트 구성


기존에 사용했던 이미지는 아직도 해상도가 저하된 상태로 보여져서, 제대로 보이는 구성을 찾아보다가 위에 처럼 포털사이트 뉴스의 메인페이지처럼 사진위에 검은 투명배경에 기사가 뜨는 형식을 선택했습니다. 그리고 우측에는 최신글들의 썸네일제목,날짜가 보입니다.




 자동차 리뷰/프리뷰 구성


이번에 자동차리뷰는 좌측에 섬네일 이미지가 있고, 우측에 기사 제목과 포스트의 내용이 나오며, 날짜와 코멘트 숫자가 나옵니다. 여기서 기존의 기본 텍스트 타이틀과 다른 이미지를 사용하였습니다.




▲ 기본으로 설정되는 아이콘과 텍스트형식입니다. 여기서 더 발전한다면 배경 정도를 넣을 수 있습니다.


그럼, 이미지로 어떻게 바꾸는지 한번 해볼까요?



01 이미지를 만들고나서 HTML/CSS편집 메뉴를 눌러 파일업로드를 합니다.
02 올린 이미지를 마우스로 클릭하고, 미리보기화면에 마우스 오른쪽 버튼을 눌러 속성이 나오게합니다.
03 이미지 주소를 복사합니다.




04 첫화면꾸미기에서 아이템을 선택한 후 디자인탭으로 이동하여 타이틀을 선택합니다. 여기서 바로 태그가 적용이 되니 <img src="이미지경로">를 바로 넣어주면 아이템에 바로 뜨게 됩니다. 그리고 테두리를 선택한후 저장하면 위의 화면처럼 이미지가 뜨게 됩니다. 참 쉽죠~잉!




간격조정하기 / 아이템의 HTML을 만져봅시다!
이미지로 아이템을 설정하고나니 위아래 간격이 많이 붙는 것을 볼 수 있었습니다. 이때 간격을 조정하고 싶은데 아이템에는 간격조정 아이템이 존재하지 않아서, 어떻게하면 늘릴 수 있을까 생각했습니다.



▲ 아이템과 아이템 간격이 매우 좁아 답답하게 보입니다. 아래처럼 바꿔보도록 하겠습니다.





01
 아이템을 생성합니다.
02 디자인을 선택하고 HTML을 선택하여 <div style="height:5px"></div> 입력합니다.
03 적용을 눌러야, 위에 보시는대로 iPod touch부분위에 5px 간격이 늘어난 것을 볼 수있습니다. 





▲ 적용후에  이미지처럼 간격이 늘어난 것을 볼 수 있습니다.




■ 날짜와 코멘트 색상 변경하기


.tt-post-date {font:11px Trebuchet MS !important; color:#aeb700 !important;}
.tt-post-comment {font:11px Trebuchet MS !important; color:#ff7c3a !important;}


style.css의 하단에 위의 코드를 삽입해주면 기본으로 위에 지정한 class값이 정해져있어서 변경이 되는 것을 볼 수 있습니다.



주제에 맞는 레이아웃 구성



리뷰에 적합한 구조
   - 가장 하고싶었던 구조중에 하나였습니다.




사진을 보기 좋게 나열해주는 게럴리형 구조
    - 사진을 올릴때 저만의 폼을 이용해서 올리는데 세로형 비율로 깔끔하게 열려서 너무 좋습니다.




▲ 조합형 구조로 좌측과 우측에 크고 작은 썸네일 구성
    - 좌측에 2개, 우측에 세로로 4개가 구성되어 이미지와 글을 적절하게 조화하여 이미지있는 포스트에 적합합니다.


위와 같은 구성에는 수정해야할 부분이 생깁니다.
이유는 좌/우측의 상단 타이틀의 구조가 별도로 지정되기 때문입니다. 저의 경우는 한 주제를 동시에 적용했기에 이렇게 같은 주제로 할 경우는 우측의 타이틀 부분에 태그를 입력해야 합니다.

바랍니다! 같은 주제로 선택하여 이어서 조합되는 구조가 있었으면 좋겠습니다. (제가 못찾은건가요?;;)




▲ 타이틀 부분 간격은 입력란에 <div style="height:60px;"></div>를 입력하면 해결됩니다.



완성된 Sdayz 첫화면모습


주제가 많아서 첫화면이 길어졌는데, 1차 미션때 사용해본 것과 달리 나름 정리된 것 같습니다.




마무리

이번에 다시한번 첫화면을 꾸미면서 느꼈던 것이 만지면 만질 수록 블로그를 한층더 발전 할 수 있다는 것을 발견했습니다. 기존에 텍스트 타이틀의 디자인상의 보기가 매우 안좋았습니다, 그것을 수정할 수 있는 방법이 있을까 찾아보다가 타이틀 부분에 태그를 넣었는데, 다행히 적용이 되었습니다. 제가 한 방법처럼 적용하시면 쉽게 수정 하 실 수 있습니다. 앞으로 레이아웃은 티스토리디자이너 분들이 다양하게 만들어 주실 것 이라 기대하고 있습니다 ^.~

첫화면 꾸미기에서 가장 마음에 들었던 것은, 기업블로그를 보면서 현재 제가 적용한 자동차 리뷰/프리뷰의 레이아웃처럼 썸네일과 제목,내용이 보여지는 것이었는데, 이번에 적용을 할 수 있어서 어느 무엇보다 소원을 이룬 기분이 들었습니다. T^T/

앞으로 시간이 나는대로 천천히 스킨을 디자인할 예정인데요. 이번에는 기존의 스킨에 적용하면서 좀 획일화된 구조로 밖에 할 수 없어서 더 욕심이 납니다.

더 많은 티스토리 유저들을 만족할 수 있는 좋은 서비스 많이 해주세요~!
수고하셨습니다.
저작자 표시 비영리 변경 금지
신고
Posted by 순대포유

댓글을 달아 주세요

  1. Favicon of http://inbusan.tistory.com/ BlogIcon 낭만인생 2010.03.29 12:03 신고 Address Modify/Delete Reply

    새로운 스킨이 자꾸 나오니 기분은 좋습니다.
    저는 별로 사용하지도 못하지만...
    이제는 개인블로그는 넘어 묘한 뭔가가 탄생하는 듯한 스킨인 것 같네요.

    • Favicon of http://soondae4u.tistory.com BlogIcon 순대포유 2010.03.29 21:14 신고 Address Modify/Delete

      네, 갈수록 더 좋아지는 것 같아서 블로그 할때 기분이 좋습니다. 앞으로 더 많은 사람이 사용 할 수 있도록 개발될테니 조금만 기다리시면 쉽게 사용하실 수 있을 것 같아요. ^^

  2. Favicon of http://blog.naver.com/aiba10302 BlogIcon 김야끼 2010.04.08 09:38 신고 Address Modify/Delete Reply

    티스토리는 밋밋하다는 인식이 있었는데
    순대포유님 블로그 첫화면을 보니,
    생각이 달라지네요
    디자인감각이 뛰어나심


티스토리에서는 첫화면꾸미기 베타테스터모집했는데, 그결과 저는 3.2대1의 경쟁률의 뚫고 베타테스터로 선정이되었습니다. 직장을 다니느라 다른 분들처럼 빠르게 테스트를 해볼 수 없어서 퇴근하고 조금씩 쓰면서 리뷰를 하였습니다. 차근차근 첫화면 꾸미기에 대해서 알아 보도록해요~!


사용환경

Windows XP, SP3 / Intel(R) Core(TM)2 Duo CPU E6750 @ 2.66GHz 4GB RAM / Internet Explorer 7.0.5730.13




첫화면꾸미기 실행하기

TISTORY 관리자 > 스킨 > 첫화면 꾸미기

스킨으로 들어가니 첫화면 꾸미기 메뉴가 생겼습니다. 두곳에 생겼는데, 상단에서 바로 접속이 가능하고 좌측 사이드메뉴에서도 접속이 가능합니다.




첫화면 설정


첫화면 설정의 사용을 두근두근하며 눌렀습니다. 메세지가 뜨는데 기존 테터테스크 화면이 삭제된다는 메세지였는데, 바로 예! 를 누르고 진행하였습니다.






지금 보시는 화면이 활성화 되는 과정입니다.빈공간에  X 로 되어있는 부분이 앞으로 만들어질  첫화면의 프리뷰 화면입니다.




처음으로 실행한 첫화면꾸미기 화면


최근에 DSLR구입기를 작성했는데, 랜덤으로 이미지를 긁어와서 5%할인 쿠폰 이미지가 올라왔네요. 왜 항상 이상한 이미지만 자동으로 불러오는 걸까요? 제가 원하는 사진을 하려면 매번 직접글을 선택하는 것때문에 테터데스크를 사용할때는 너무 불편했습니다.  너무 많은 단계를 거처서 선택해야 했거든요.




마법사 설정 팝업















보시는 좌측 이미지는 새롭게 변화된 마법사 팝업창입니다.
헤드라인형/목록형/겔러리형/조합형으로 다양한 디자인 아이템들이 있어서 구미에 맞게 선택해 볼 수 있습니다. 기존의 테터데스크에서는 확인 눌러서 실제 실행화면을봐야하는 불편함이 있었던 것으로 기억하는데 매우 편리해졌네요.

그리고 구분선을 선택 할 수 있습니다. 위아래 한번에 선택할 수 있고 선의 모양도 다양합니다. 색상을 정할 수 없는게 아쉽지만, 그래도 괜찮습니다. :D











기존과 달라진 큰 차이점으로 한 화면에서 모든걸 설정할 수 있다는 점입니다. 직접선택을 누른후에 분류전체에서 원하는 글을 누르고나면 이미지가 있는 글은 옆에 이미지 선택 버튼이 생깁니다. 그리고 마우스를 하단글로 올려놓으면 X가 나와서 바로 삭제할 수 있는 기능이 있습니다.




글제목 옆의 이미지버튼을 눌렀을때 나타나는 썸네일입니다. 바로 그 위치에 레이어로 열려서 쉽고 빠르게 누를 수 있다는 장점이 있고, 해당 포스트 대한 이미지만 볼 수 있어서, 이전에 테터데스크는 큰장이 뜨고 모든 사진이 불러와졌던 것에 비하면 빠르고 쉽게 바뀐 것 같습니다. 그리고 우측의 이미지는 검색을 통해 빠르게 선택 할 수 있는 기능입니다. 글이 많을 경우 유용하게 쓸 수 있을 것 같습니다.



 잠깐! 


직접선택글은 왜 매번 새로 추가한글은 맨 하단으로 내려가있는건지 모르겠습니다. 테터데스크를 사용했을때는 이미지 썸네일을 나열했는데, 그때 너무 많이 노출 시키다보니 내용이 많으면 많을 수록 위로 올려야하는데 여간 귀찮은 일이 아닙니다. 

바라는 점인데요,대부분 선택하는 글들은 새로 올리는 글입니다. 4개만 노출 할 수도 있겠지만, 사람에따라 여러개의 이미지를 노출 시킬 수도있으니 옛날 글이 아래로 밀리는 방식으로 되었으면 좋겠습니다. 순서조절하는건 너무 귀찮아요!




팝업창을 펼치고 닫힐 수 있는데, 어떨때 사용하는지는 모르겠습니다. 좀더 크게해서 한화면에서 볼 수 있는 기능이 었으면, 오히려 의미가 있었을지 않을까 생각됩니다. 괜히 누르다가 다 가릴 이유가 있을까 하는 생각이 들었습니다. 음음... 제가 필요성을 못느껴서 그럴지도 모르겠네요.




디자인메뉴를 선택하면, 타이틀, 글제목 그리고 글요약을 개인 취향에 맞게 설정 할 수 있습니다. 그외에 단순 노출을 할 수 있도록 카테고리명, 댓글수,작성자,작성일이 있습니다.

새로워진 것은 글타이틀의 배경색테두리 그리고 아이콘을 설정 할 수 있습니다. 좀더 다양한 아이콘이 있었으면 좋겠습니다. 그래도 소소한 변화가 첫화면이 풍성해지는 것 같습니다. 앞으로 늘어나길 기대하겠습니다.



추천세트


추천세트에는 기존에 볼 수 없었던 레이아웃으로 11개의 스타일로 제공하고 있습니다. 썸네일로 볼땐 이쁜것 같더니실제로 설정해보면 맘에드는게 많지가 않네요. 특히나 여전히 이미지는 랜덤으로 이상한 거만 긁어와서 T^T 그런가봐요.




보관함


여러개의 스타일을 저장할 수 있는 보관함메뉴입니다. 화살표가 하단에 있는 것으로 보아 여러개를 저장 할 수 있습니다. 삭제는 마우스 오버를 하게되면 우측상단에 X 닫기 버튼이 있습니다. 썸네일 하단에는 저장할때 작성한 이름이 있습니다. 수정은 되지 않았습니다.



이런 기능들을 통해 지금의 첫화면을 꾸며 보았습니다.


첫화면을 적용하고 위에 보이는 이미지를 보면 찾을 수 있으시겠지만 몇가지 문제점을 찾았습니다. 혹은 고쳐졌으면 하는 점입니다.




문제점1 이미지


 
문제점1 헤드라인형 선택시 이미지 퀄리티 저하
 
처음 설정을하면 큰 비율로 불러들어지는데, 설 정할 수 있는게 모가 있는지 찾아보니 크기가 아닌 전체 비율로 설정 할 수 있었습니다. 이전에는 직접 픽셀을 입력해서 사용하곤 했는데, 이부분은 편리해 졌지만, 이미지를 보시면 알 수 있듯이 해상도가 깨져서 보입니다. 심하게 많이 뭉개졌는데, 이것도 설정화면에서는 깨끗하게 보이다가, 적용만 하면 완전 흐리게 보입니다. 왜그런건지 빨리 고쳐졌으면 좋겠습니다.




문제점2 이미지 (관리자 화면)



문제점2 해상도에 따라 짤리는 이미지

다른 썸네일 이미지는 그냥 넘길 수 있는 부분인 반면에, 헤드라인형 썸네일의 큰 이미지의 경우는 해상도에 따라 짤리는 부분이 달라지는데 이때 이미지의 영역중 원하는 부분으로 이동 할 수 가 없어서 보기가 안좋습니다. 지금 현재는 해상도오 이상해서 그것도 함께 문제가 됩니다 T^T

이럴때 사진편집기를보면 드래그해서 좌우로 움직일 수 도 있는데, 화면상에서 이미지를 마우스로 움직여서 비율이 안맞으면 원하는 부분이 보이도록 하는것도 괜찮을 것 같습니다. 이오버된 사진의 경우는 보여지는 부분이 왼쪽부터 시작해서 수정할 수 가 없네요.





문제점3 이미지


문제점3 상단의 여백생김

첫화면꾸미기 적용후 상단에 썸네일 단 사이에 여백이 생깁니다. 어떻게 조절을 할 수 도 없고, HTML 수정을 지난 번처럼 첫화면에의 설정메뉴가 없어서 고칠 수가 없습니다. 간격이라도 조정하게 해주세요.



(-) 필요하다 ! 다이렉트 대표이미지 업로드 기능

그밖에 필요한 기능이 있다면, 저는 이전부터 필요했던 기능인데요. 대표이미지는 꼭 기존에 올렸던 이미지들이 검색이 되는데, 별도로 업로드해서 바로 적용했으면 좋겠습니다. 대표 이미지의 경우 비율이 안맞는 이미지밖에 없을때 비율에 맞게 설정해서 올려야하는데, 다시 포스트로 가서 파일을 올리고 하는 것은 여간 불편한것이 아닙니다.



(+) 그래도 좋은것은  편해진 아이템 추가 위치 조정 삭제부분


중앙에 위치한 +를 누르면 하나의 영역이 생깁니다. 그리고 좌측의 위아래 모양을 누르면 아이템의 위치조정도 직관적으로 바로 가능하다는 점이죠.




위에 말했던 것 처럼 아이콘을 눌렀을때 파란색 영역이 생기면서 마법사 창에서 선택시 바로 적용됩니다. 삭제도 X자를 누르면 되게 때문에 쉽습니다.




사용후기 :: 작지만 강한 초보자를 위한 변화!

첫화면 꾸미기의 변화는 저게 느낄때 큰 변화라고 생각합니다. 우선 일일히 코드를 수정해서 사용하던 저로써는 제가 하던 것들이 한 팝업창의 기능으로 그리고 메인화면을 직접 선택해서 위치를 조정할 수 있는 것이 매우 편리했습니다.  UI적으로 상당히 많이 개선된 것을 볼 수 있습니다. 일부 버그들은 있겠지만, 크게 문제될 부분은 아니라 개선만 되면 되니, 이해하고 넘어가도록해요 :D

현재 베타테스트인점을 들었을때, 많은 것 같으면서도 적용하려면 막상 적용할 만한게 없는 레이아웃은 여분의 공간이 있고 다음으로 넘어가는 버튼이 있어서 앞으로 티스토리 담당 UI디자이너분들이 속속히 업데이트를 해주시리라 생각합니다. (빨리요~!! ㅋㄷ)

스킨을 수정/제작하는 분들은 이런 것이 바로 어울리면 좋겠지만, 아닐경우 직접스킨에 맞게 수정할 텐데, 부분적으로 HTML을 수정 할 수 는 있지만, 첫화면꾸미기 전체 레이아웃을 손볼 수가 없었습니다. 이런 것들도 앞으로 개선될 부분이라 위에는 언급하지 않았습니다. 다른 유저분들이 해주셨던거 같기도 하구요.
 
 
마지막 바램은 위에 문제점들이 어서 고쳐졌으면 좋겠습니다. 첫화면 꾸미기 프로젝트하시느라 수고 많이 하셨습니다. 티스토리 화이팅!
저작자 표시 비영리 변경 금지
신고
Posted by 순대포유

댓글을 달아 주세요

  1. Favicon of http://blog.ngel4u.com BlogIcon 천사마음 2010.03.22 10:50 신고 Address Modify/Delete Reply

    이미지 선택 기능이 제공되는거군요 ㅠ,.ㅠ

    • Favicon of http://soondae4u.tistory.com BlogIcon 순대포유 2010.04.07 20:49 신고 Address Modify/Delete

      네~ 이전에도 선택기능은 있었는데,
      문제는 선택글로 했을때 되서 문제죠.

      그냥 최신글도 고를 수 있게 해주시면 좋을텐데 말이예요~하도 이상한걸 긁어오니까요 ㅜㅜ

  2. 초코맛호빵 2010.03.22 17:57 신고 Address Modify/Delete Reply

    오,,,,,신기하네요. 쉽고 이미지로 되어있어서 보기 쉽게 이해되었어요~
    감사!!

  3. Favicon of http://valog.kr BlogIcon 발로그 2010.04.06 22:46 신고 Address Modify/Delete Reply

    체험기 정도가 아니라 메뉴얼로 써도 되겠는데요,
    1등 축하드립니당 ^^

    • Favicon of http://soondae4u.tistory.com BlogIcon 순대포유 2010.04.07 20:50 신고 Address Modify/Delete

      과찮의 말씀이십니다;;
      그냥 순서대로 작성한 것 밖에 없는데 말씀 고맙습니다.
      발로그님 글보고 공지 확인했어요.

      고마워요~!

  4. Favicon of http://winstory.com BlogIcon 김미니 2010.04.09 15:24 신고 Address Modify/Delete Reply

    설명이 쉬워서 그런지 대충 어떤것인지 한눈에 쏙 들어오네요. 예전에 티스토리 블로그를 이용했을 때 해봤던 테터데스크는 저한텐 어려웠는데.. 기대되네요. 빨리 나왔으면+_+a 1등 축하드려요~~~!! 맥북 우왕`

    • Favicon of http://soondae4u.tistory.com BlogIcon 순대포유 2010.04.10 23:45 신고 Address Modify/Delete

      축하 고맙습니다. 김니니님~
      저도 테터데스크는 맘대로 안되고 수정도 힘들고,
      디자인도 안이뻤는데, 이번엔느 확실히! 좋아졌습니다^^

      그런데... 맥북이 아니라 아수스예요~!
      근데 아직 소식이없네요 -_-a;;

티스토리 툴바