작성일자
카테고리 CMS/티스토리 가이드
안녕하세요. 오늘은 티스토리 블로그를 처음 사용하게 되면 궁금한 점 중에 초기화면인 HOME페이지 설정하는 방법을 알아보겠습니다. 

대부분의 블로그는 블로그 글내용에 중점을 두기 때문에 디자인이라든가 초기화면의 필요성에 대해서는 크게 신경을 안쓰는 상황입니다. 블로그에 들어오는 경우는 포털 사이트에서 검색어를 통해 링크를 클릭하여 들어와서 하나의 글을 보고 바로 나가는 경우가 대부분이라서 방문자가 블로그의 초기화면을 본다든가 다른 글을 검색한다든가 하는 추가적인 글보기를 하지 않게됩니다. 그래서 사이드바에 보기 쉽게 카테고리를 배치하거나 최근글 목록, 인기글 목록을 배치하면 관심을 끌 수도 있습니다. 

블로그에서 초기화면의 필요성에 대해서는 혹자는 위에서 예를 든 것처럼 글 하나만 달랑 보고 나가는 방문자님들을 위해서 초기화면을 만들 필요성이 없다고 합니다. 맞는 말이기도 합니다. 허접한 제 블로그의 방문자님들의 경우 블로그에 머무는 평균시간이 2분도 안되더군요. 그것은 그만큼 하나의 글만 보고 바로 나가는 방문자님들이 많기 때문입니다. 하지만 다음 상황으로 인해 초기화면이 필요하기도 합니다. 예를 들어 어떤 사이트에서 내 블로그를 소개하는 링크가 있다거나 다른 블로그에 댓글을 달게 되면 내 닉네임에 링크가 만들어집니다. 그래서 그 링크를 클릭하면 초기화면이 없을 경우 최근 글로 들어오게 됩니다. 검색어로 들어올 경우는 방문자가 필요한 정보를 얻기 위해 바로 해당 글이 보이는 것은 당연하지만 이 블로그가 어떤 블로그인지 궁금해서 들어왔는데 최근 글 (예를 들어 저의 경우 폰트소개 글- 글은 달랑 한줄임)이 보이게 되면 방문자는 다른 링크를 찾아야하는 수고를 하게 됩니다. 내 얼굴에 해당하는 HOME 페이지가 어떤 특정한 글이 보이는 것은 오해를 낳을 수도 있게 됩니다. 그래서 내 블로그의 전반적인 내용을 한눈에 볼 수 있도록 페이지를 만드는 것도 중요합니다. 

티스토리에서 초기화면이란 내 블로그 주소인 OOOO.tistory.com에 접속했을때 처음 보여지는 화면입니다. 또한 내 블로그의 메뉴에서 HOME버튼을 클릭하거나 블로그 로고를 클릭하면 나오는 화면이기도 합니다. 이 초기화면 설정을 하지 않으면 앞에서 말한 것처럼 최근 포스팅된 글이 나오게 됩니다. 이것을 바꾸려면 두가지 방법이 있습니다. 하나는 티에디션을 이용하는 것이고 다른 하나는 태터데스크라는 플러그인을 사용하게 됩니다. 


관리자 센터의 좌측 메뉴에서 화면설정을 선택하면 우측에 티에디션탭의 화면이 나옵니다. 우측의 사용하기 버튼을 클릭합니다.


1의 바로가기에서 배너사용의 체크박스에 체크하면 티에디션 설정화면의 우측 상단에 2와 같은 버튼이 만들어지고 초기화면으로 가면 항상 위 버튼이 나오므로 위 관리페이지의 화면설정에 오지 않아도 언제든 설정을 변경할 수 있습니다. 3의 발행하기는 트위터나 다음뷰로 내 초기화면을 그대로 웹진의 형태로 발행을 하여 해당 글을 선택을 하면 여러개의 글을 볼 수 있도록하는 기능입니다. 나중에 자세히 설명드립니다. 4의 티에디션 시작하기 버튼을 클릭합니다.


좌측 상단에 티에디션 설정 위젯이 떠 있고 1의 타이틀바를 클릭드래그하면 이동할 수 있습니다. 2는 미리설정된 프리셋으로 원하는 화면을 선택할 수 있습니다. 3은 설정을 완료하고 적용하기 버튼을 클릭하면 보관함에 저장할 것인지 묻는 메시지가 나오는데 저장하기를 선택하면 보관함에 저장됩니다. 4의 원래대로 버튼은 설정중 처음상태로 돌리는 기능입니다. 처음 설정하게 되면 추천세트로 나타나게 됩니다. 추천세트의 화면 이미지의 폭이 작으므로 5의 너비보정 버튼을 클릭합니다.


늘리기 버튼을 클릭하면 2의 이미지 가로 폭이 늘어납니다. 위치조정 버튼은 좌우로 위치조정이 가능합니다. 너비를 늘려서 좌우폭이 꽉차도록 조정하고 위치조정도 해줍니다.


각 프레임마다 상단에 플러스아이콘이 있는데 이것은 바로 위에 새로운 프레임을 만드는 기능을 합니다. 2와 3의 아이콘은 프레임간의 위치를 변경합니다. 3을 클릭하면 하단에 있는 5의 프레임과 위치가 교환됩니다. 4의 아이콘을 클릭하면 프레임이 제거됩니다. 6의 아이콘을 클릭해서 바로 위에 새로운 프레임을 만들면 티에디션 설정 위젯이 활성화됩니다. 우선 헤드라인형 목록이 나타납니다. 썸네일 이미지를 보고 마음에 드는게 없으면 8의 버튼을 클릭하면 더볼 수 있습니다. 9의 구분선은 프레임 위 아래로 구분선을 설정합니다. 헤드라인형의 목록에 마음에 드는 것이 없어서 목록형 탭을 클릭합니다. 11의 썸네일을 선택하면 5의 빈 프레임에 이미지와 캡션 글이 나타납니다.


마우스를 스트롤하면 위젯은 그대로 있고 화면이 올라갑니다. 1의 글 선택탭을 선택합니다. 카테고리별로 선택이 되어있는데 인기순이나 태그별로도 선택할 수 있습니다. 원하는 글의 체크박스에 체크합니다. 중복으로 체크해도 됩니다. 4의 체크박스에 체크하면 이미지가 있는 글만 나타나도록 할 수 있습니다. 5의 프레임도 다른 프레임과 중복되지 않도록 글선택을 해줍니다. 6의 플러스 아이콘은 현재 3개의 글만 나타나는데 이를 클릭하면 3개의 한세트의 글을 추가할 수 있는 아이콘입니다. 7의 아이콘을 클릭하여 프레임을 계속 추가하여 글을 선택해서 설정합니다. 


디자인탭을 선택하면 프레임내부의 글자출력을 설정할 수 있습니다. 타이틀이 없으므로 체크박스에 체크한 다음 타이틀 이름을 입력하면 우측의 타이틀바에 나타납니다. 폰트를 선택하고 글자의 크기도 변경합니다. 배경을 어두운 색으로 설정할 것이므로 글자의 색상은 흰색으로 바꿉니다. 배경색을 어두운 색으로 하고 테두리는 아래에만 나오게 한 다음 테두리의 색상도 선택합니다.

글제목과 글요약의 폰트와 크기 글자의 수를 설정하고 10에서 하단에 출력될 카테고리명 댓글 수 작성일 등에 체크합니다. 12는 썸네일 이미지의 가로세로비율과 위치, 테두리선을 설정합니다.

<이미지를 클릭하면 큰 화면으로 볼 수 있습니다.>

프레임을 계속 늘려서 사이드바의 하단보다 내려가도록 설정하고 적용하기 버튼을 클릭하면 저장할 것인지 묻는 메시지창이 나옵니다. 보관함에 저장에 체크하고 적용버튼을 클릭하면 다시 메시지창이 나옵니다. 계속 편집할 것인지 블로그홈으로 갈것인지 묻습니다. 두번째 버튼을 클릭합니다.

<이미지를 클릭하면 큰 화면으로 볼 수 있습니다.>

이제 내 블로그의 초기화면이 완성됐고 블로그 주소를 치면 초기화면이 나오며 메뉴에서 HOME버튼을 클릭하거나 블로그 이미지를 클릭하면 초기화면으로 나오게 됩니다. 이곳에 오면 우측 상단에 티에디션 버튼이 있으므로 언제든 설정을 변경할 수 있습니다. 참고로 위 블로그는 제가 관리해주는 지인의 블로그입니다. 

티에디션 발행에 관해 알아보기 위해서 처음이미지의 화면설정으로 갑니다.


티에디션 적용한 날짜가 나오고 발행하기에서 2의 아이콘을 클릭합니다. 트위터나 다음뷰에 발행할 수 있으며 다음뷰에 체크합니다. 4를 클릭하여 분류를 선택합니다. 여행기이므로 여행을 선택합니다. 발행명을 입력하고 꾸미기버튼을 클릭하면 작은 화면이 나옵니다. 7은 타이틀이 좌측에 있고 8은 중간에 있습니다. 선택하고 미리보기로 확인한 다음 발행버튼을 클릭하면 아래에서 발행된 내역이 나옵니다. 티에디션의 첫발행을 축하드립니다라는 메시지도 나옵니다.


내블로그의 사이드바에 있는 마이뷰의 목록에 발행한 글의 목록이 나타납니다. 다음뷰의 마이뷰페이지로 가서 최신글을 보면 목록에 추가되어있어서 타 블로거들이 볼 수가 있습니다.
저작자 표시 비영리 변경 금지
신고
BlogIcon 강침착

티스토리 오픈 2일째 입니다 ㅎㅎ
메인 티에디션 기능에 대해서 궁금했는데 제가 찾던 좋은 자료이네요.
아직까진 블로그 자료가 부족해서 메인을 채우기엔 역부족이라 저도 빨리 메인 꾸미고 싶네요 ^^

BlogIcon 베누시안

안녕하세요. 반갑습니다. 티스토리 새내기시군요. 좋은 평가 감사드리고요. 티스토리에 대해 궁금한 점은 이곳(http://guide.tistory.com/?_top_tistory=left_guide)에 가이드가 있으니 참고하시면 되고요. 그래도 해결이 안되시면 제 방명록이나 아무곳에 글을 남겨주세요. 모르면 찾아서라도 해결해드립니다.^^

BlogIcon jinzzassanai

전 머리가 멍청해서인지 잘안되요;;; 어쩔까요 필이가면 바로하고 오다말면 그냥손을 나버리는..ㅠㅠ 슬프네요 저에 이 밥팅같은생각이 ㅠㅠ

BlogIcon 베누시안

어이구 웬 그런 말씀을.. 처음 하다보면 다 그런겁니다. 다른것도 해보고 차차 익숙해지면 언제 그랬냐는 듯 쉬어집니다.

BlogIcon 조이 lee

와 정말 블로그 잘꾸미셨네요 ㅜㅜ 여태까지 블로그 하면서 본 블로그중에 최고에요 !!
저는 언제 쯤이면 이렇게 까지 꾸미게 될 수 있을 까요??

BlogIcon 베누시안

안녕하세요. 반갑습니다. 좋은 평가 감사드립니다. 요즘 워드프레스와 티스토리 스킨 변경관련된 글을 올리고 있는데 디자인 변경하려면 CSS를 알아야겠기에 이에 관한 글도 올라가고 있습니다. 참고하시면 도움이 되실겁니다. 댓글 감사드려요.~~

BlogIcon 소중한 you

자료 잘보고 갑니다...하지만 티에디션에 들어가는 방법 부터 어떻게 해야할지 해메고 있답니다.
바쁘시지 않다면 이 부분에 대해서 설명해주시면 감사하겠습니다~

BlogIcon 베누시안

안녕하세요. 반갑습니다. 블로그에 메뉴바가 있습니다. 거기서 Admin(관리자)이라는 메뉴를 클릭하면 관리자 센터로 가게 됩니다. 그다음부터 첫 이미지에 나오는 부분을 시작하면 됩니다.

BlogIcon 러브곰이

안녕하세요~
새내기 블로거인데요, 티에디션에 대해서 많이 배우고 제 블로그에도 적용해봤어요
좋은 정보 감사합니다^^

BlogIcon 베누시안

안녕하세요. 반갑습니다. 도움이 되신다니 다행입니다. 댓글 감사드려요.

BlogIcon 丁香

ㅎ_ㅎ 잘 배우고 갑니다

BlogIcon 베누시안

티스토리 처음 하시니 여러가지 궁금한 점이 많을 겁니다. 티스토리 가이드 부분을 보시면 많은 글이 있으니 참고하세요. http://notice.tistory.com 공지사항 페이지에서 우측에 카테고리가 있습니다. 댓글 감사합니다.

BlogIcon 민트라임

겨우 겨우 블로그 제목 이미지 추가를 했는데요, 블로그 제목 하단에 블로그 메뉴가 나오는데 이 메뉴의 위치 변경은 어떻게 하는지 알려주실 수 있으신가요?^^
블로그 제목으로부터 조금 더 아래에 위치해 있으면 좋겠거든요..

BlogIcon 베누시안

안녕하세요. 반갑습니다. 블로그 만드시느라고 수고가 많으시네요. CSS를 편집해줘야 하는데요. 블로그 관리자센터에서 HTML/CSS 편집창으로 들어가면 아래위로 두개의 창이 있습니다. 정확하게 수정할 부분을 찾아야하는데요. Ctrl+F키를 누르면 검색창이 나올겁니다. #header h1을 입력하면 CSS 편집창에서 우선 처음으로 수정할 부분이 나옵니다.

#header h1 { font-family~~~
color~~~~;
margin-bottom: 20px;
}

위처럼 margin-bottom: 20px;를 입력하세요.
그러면 타이틀 로고이미지와 메뉴가 사이가 벌어질겁니다. 또한 메뉴와 바로 밑에 있는 수평선이 사이가 많이 벌어졌는데 이것을 수정하려면 검색어로 #header .list_blogmenu 를 입력하고 검색이 되면 CSS편집창에서 중괄호 안에 다음처럼 입력하세요.

margin: 0 0 -20px -1px;

위처럼 -20px을 입력하면 됩니다. 저장버튼을 클릭하세요.



BlogIcon 민트라임

아, 친절한 댓글 답변 감사합니다...^^
저도 얼른 티스토리에 적응이 되었으면 좋겠어요~!

BlogIcon 베누시안

안녕하세요. 티스토리 스킨 수정은 CSS를 만지는 일이라서 다른 블로그와는 달리 아주 기술적인 부분이 많답니다. CSS는 하나의 프로그래밍 언어랍니다. 프로그래밍 언어중에서도 쉬운편에 속하죠. 그러니 티스토리 스킨을 만질 수 있게되면 웹프로그래밍을 하시는 겁니다.

BlogIcon GIRO

와.........티스토리 막 가입해서 배우려고 들어왔는데 정말 장난아니네요 ㅎㅎㅎㅎ...하나하나 배워나가야지..

BlogIcon 베누시안

안녕하세요. 반갑습니다. 글 보시다가 안되면 꼭 댓글을 남겨주세요.

BlogIcon 원초아

감사합니다. 재미있네요 ㅎㅎ

BlogIcon 베누시안

잘 되시나보네요. 원하는대로 되면 신기하기도하고 재미도 있답니다.

BlogIcon 김힐링

블로그 잘 보고 있습니다. 부트스트랩으로 검색해 들어왔다가 책도 구입하고, 이글 저글 읽고 있습니다.
질문이 있는데.. 답변 기다리겠습니다^^ 블로그와 홈페이지를 운영하려고 하는데, 티스토리를 이용하는 것이 좋은지 아니면, 설치형 블로그를 운영하는 것이 좋은지 궁금합니다. 마음대로 꾸미는 것이야 부트스트랩으로 만들면 더 좋겠지만, 아무래도 홍보 측면에선 서비스형 블로그가 유리하지 않은가요? 아니면 홍보하기 나름인가요? 부트스트랩으로 시작하기 전에 먼저 고려해봐야 할 사항이라 여쭈어봅니다. 수고하세요~

BlogIcon 베누시안

안녕하세요. 일장일단이 있습니다. 가입형이나 티스토리 같은 서비스형 블로그는 포털에서 운영하는 만큼 노출이 잘돼서 그만큼 홍보효과도 좋습니다. 하지만 디자인 측면에서 제한이 있어서 다양한 레이아웃을 적용하기 어렵습니다. 단순한 하나의 페이지만 존재하죠. 그래서 티스토리와 워드프레스를 병용하고 있답니다. 웹사이트의 규모를 생각해서 선택해야할 겁니다. 설치형으로 하신다면 어느 검색엔진이든 블로그를 중요시해서 블로그 콘텐츠를 우선적으로 상단에 배치하니 검색엔진 등록을 블로그로 하시는 것이 좋습니다.
감사합니다.

BlogIcon 김힐링

답변 감사드려요. 팁까지 하나 주시네요^^ 워드프레스와 티스토리 같이 사용하고 계시면 방문자가 분산 될 것 같네요. 그러면 오히려 검색과 노출에는 불리할 것 같습니다. 조언해주신대로 설치형에 블로그를 검색엔진에 등록해볼까 싶습니다:)

BlogIcon 베누시안

검색엔진에 등록할 때 워드프레스는 웹사이트로 하고 티스토리는 블로그로 신청하면 같은 내용의 글이라도 검색에서 제외되지 않습니다. 별개로 취급하더군요.

BlogIcon 김힐링

또 하나의 팁 감사합니다^^

BlogIcon 약방의 감초

네이버 하다가 티스토리 오니 배워야할께 한두가지가 아니네요.
종종 들려 배우고 갈께요~

BlogIcon 베누시안

감사합니다.

BlogIcon SokiJ

안녕하세요 티스토리 홈화면 관련 문의드려요 !

제가 티스토리 홈을 심플하게 꾸며보고 있습니다~

그런데 이미지가 말썽이네요..

썸네일 양 옆 이미지가 꽉안차고 남는 현상이 있어 문의드려요!

블로그 주소 남겨도 될런지 모르겠지만, 일단 남겨보겠습니다 부디 해결 방법을 알려주세요 !

http://sookij.tistory.com

티스토리 툴바