티스토리 첫화면 꾸미기, 베타테스터 2번째 미션

블로그 주제 : 자동차, 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/

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

더 많은 티스토리 유저들을 만족할 수 있는 좋은 서비스 많이 해주세요~!
수고하셨습니다.