티스토리 블로그 만들기 강좌5 - 스킨


[이 글은 국민참여정당의 창당을 원하는 분들의 블로그 개설을 돕기 위한 목적으로 쓰여진 것입니다.]

국민참여정당 홈페이지에서 강좌를 보시는 분들의 경우에는 그림이 작아 어려움이 있으셨을 것으로 생각합니다. 제 블러그에서 강좌를 보시면, 그림을 클릭하여 크게 보실 수 있습니다. 참조하시기 바랍니다. <블로그에서  강의 보기> 티스토리 블로그 만들기 강좌1 - 티스토리 블로그 가입하기 티스토리 블로그 만들기 강좌2 - 환경설정 티스토리 블로그 만들기 강좌3 - '글쓰기, 글관리, 링크' 티스토리 블로그 만들기 강좌4 - 플러그인 티스토리 블로그 만들기 강좌5 - 스킨

안녕하세요.
드디어 마지막 강좌인 '스킨'에 대한 강의를 진행하게 되었습니다.

본래 '스킨(skin)'이란 말은 피부라는 뜻인데, 블로그 에서 스킨이라는 말의 의미는 '블로그의 타이틀과 배경 등의 외관'을 가리키는 말입니다.

티스토리 블로그의 관리자 메뉴 상에서 스킨은 아래와 같은 세부 항목으로 구성되어 있습니다.

스킨 선택
HTML/CSS 편집
사이드바 설정
화면출력 설정
카테고리 설정

위 메뉴 중에서 스킨 설정에서 가장 중요한 부분은 '스킨 선택'과 'HTML/CSS 편집'입니다.
그런데, 'HTML/CSS 편집'의 경우에는 html과 css에 대한 지식이 없는 분이라면 손대지 않는 것이 좋습니다.
자칫 잘못하면 블로그를 회복 불가능한 상태로 만들 수 있기 때문입니다.
따라서, 오늘의 강좌에서는 'HTML/CSS 편집'에 대해서는 다루지 않을 예정입니다.
이에 대해서는 시간을 두고 조금씩 스스로 알아가는 것이 좋으리라고 생각됩니다.

그럼 본격적으로 강좌를 시작하도록 하겠습니다.


1. 스킨선택(스킨위자드)

처음에 메인 메뉴의 '스킨'을 클릭하면, 자동으로 아래의 그림과 같이 '스킨선택' 메뉴가 나타나게 됩니다.
이 메뉴는 블로그 운영자가 언제라도 자기 블로그의 스킨을 원하는 형태로 바꾸어 적용할 수 있도록, 기능을 지원하고 있습니다.

그 방법에 대해서는, 본 강좌의 1강에서 설명한 '최초에 블로그 스킨을 설정하는 방법'에 대한 설명을 참조하시기 바랍니다.
그러나, 이 메뉴는 별도의 설명을 듣지 않은 그 누구라도, 손쉽게 자신이 원하는 스타일의 스킨을 선택해 적용할 수 있도록 간단한 인터페이스를 제공하고 있습니다.

이 메뉴에서 가장 중요한 부분은, 위 그림에서 붉은 색의 상자로 표시한 'HTML/CSS 편집'과 '스킨위자드'입니다.  
그런데, 'HTML/CSS 편집'의 경우에는 별도의 메뉴로 독립되어 있는 것이므로, 여기서는 '스킨위자드'에 대해서만 다루도록 하겠습니다.(결국, 스킨선택 메뉴에서 가장 중요한 부분은 '스킨위자드'기능이라고 할 수 있습니다.)

위 그림의 '스킨위자드' 부분을 마우스로 클릭하게 되면, 아래와 같이 화면이 전환됩니다.


위 그림이 스킨위자드 툴의 화면입니다.
우측의 네모난 상자가 스킨위자드 툴이고, 배경은 '스킨 미리보기 화면'입니다.

스킨위자드 툴의 기능은 크게 세가지로 구성되어 있습니다.

배경 - 블로그 배경의 이미지나 색상 설정
타이틀 - 블로그 타이틀의 이미지나 색상, 높이 설정
게시글 - 게시 글의 넓이, 글 제목의 색상, 본문 글자의 색상 등 설정

그럼, 하나 하나 그 기능에 대해 이야기 해보도록 하겠습니다.

<배경>


스킨위자드의 '배경' 메뉴는, '이미지'와 '직접올리기'로 구성되어 있습니다.
'이미지' 영역에서는 티스토리 측에서 제공하는 이미지 들이 올라와 있는데, 여기에는 '디자인'과 '패턴'이라는 두개의 항목이 있습니다. 이것은 블로그의 배경을 하나의 정형화된 디자인을 사용해 꾸밀 것인가, 혹은 이미지 패턴을 이용해 꾸밀 것인가를 결정해 선택하도록 한 것입니다. 

이것은 별도의 설명이 불필요 할 만큼 간단한 몇번의 클릭만으로 적용을 완료할 수 있습니다.
둘 중 어떤 것을 사용할 것인지를 결장 한 다음, 원하는 이미지를 선택하고, 맨 하단의 '적용'버튼를 클릭하는 것만으로 모든 작업을 마칠 수 있습니다.

따라서 이에 대해서는 별도로 설명하지 않고, 직접 올리기에 대해서만 간단히 언급하도록 하겠습니다.

아래는 '배경>직접올리기'의 화면입니다.
먼저, 아래 그림에 표시되어 있는 번호들에 대해 설명하자면, ①은 자신이 준비한 블로그 배경의 이미지를 찾아서 업로드하는 것이고, ②는 업로드한 이미지의 배열을 결정하는 것이며, ③은 만일 그림을 사용하지 않을 경우(그러니까 티스토리에서 제공하는 이미지나, 본인이 직접 준비한 이미지 중 그 어느것도 사용하지 않을 경우에) 블로그 배경의 색상을 지정하는 것입니다.


따라서, 만일 블로그의 배경을 꾸미는데 그림을 사용하지 않을 것이라면, ③의 색상을 선택하는 것으로 모든 것이 끝나게 됩니다.

아래 그림이, 이 모든것을 간단히 보여주고 있습니다.
붉은 화살표에 나온 바와 같이 색상을 선택한 후, 하단의 '적용'만 클릭하면, 모든 것이 끝나게 됩니다.


그럼, 직접 준비한 '작은 그림'을 이용해 '패턴' 형식으로 블로그 배경을 꾸미는 작업을 해보도록 하겠습니다. 
위 그림에서 '찾아보기'를 클릭하여, 아래와 같이 미리 준비한 그림을 찾아 업로드 합니다. (주의! - 파일 형식 jpg, gif, png / 용량 512KB)


위 그림은, 미리 준비한 '작은 꽃 이미지'를 찾아 업로드하는 장면입니다.


업로드가 완료되면, 우측 상단의 '이미지 사용'을 클릭하고, 이미지의 배열 방식을 '바둑판식'으로 설정합니다.
그리고, 맨 하단의 '적용'버튼을 클릭하면 모든 것이 완료됩니다.


이렇게 적용이 완료되고 나면, 위 그림과 같이 블로그 배경에 꽃 그림 무늬가 나타나게 됩니다.
 
<타이틀>

타이틀이란 아래 블로그의 타이틀을 가리키는 것입니다.
아래 그림의 붉은 상자로 표시한 부분을 우리는 '타이틀'이라고 합니다.


아래 그림에 나타나 있는 것처럼, '스킨위자드'의 타이틀 부분은 다음과 같은 세가지 세부 메뉴로 구성되어 있습니다.

① 이미지 - 티스토리에서 제공하는 타이틀 이미지와 패턴을 설정하는 곳입니다.(설정 방법은 위에서 언급된 '배경'의 '이미지'와 동일)
② 직접올리기 - 직접 타이틀 이미지를 올려 타이틀을 꾸미는 부분.(설정 방법은 위에서 언급된 '배경'의 '직접올리기'와 동일)
③ 텍스트 - 블로그 타이틀의 높이, 타이틀에 올라가는 글씨의 색상과 크기를 설정하는 기능


여기서는 '이미지'에 대해서는 별도의 설명을 생략하고 '직접올리기'와 '텍스트'에 대해서만 자세히 설명하도록 하겠습니다.


위 그림에 나타나 있는 바와 같이, '타이틀>직접올리기'의 메뉴는, 자신이 준비한 이미지를 업로드할 수 있는 기능(①번)과, 올린 이미지의 배열을 결정하는 기능(②번), 그리고 타이틀 설정에 이미지를 사용하지 않을 경우에 타이틀의 색상을 설정하는 부분으로 구성되어 있습니다. (③번)

만일 타이틀에 이미지를 사용하지 않을 것이라면, 배경에서 이미지를 사용하지 않는 경우와 마찬가지로, 여기에서도 간단히 위 그림의 ③번에 대한 설정을 완료하고 하단의 '저장'을 클릭함으로서 모든 작업이 끝나게 됩니다.

그러나, 만일 자신만의 특별한 타이틀 스킨을 사용하고자 한다면, 아래 그림과 같이 별도로 준비한 그림을 찾아 업로드 하면 됩니다.
(주의!! -  여기서 유의할 것은, 타이틀에 사용할 이미지를 '패턴' 형태로 이용할 것인지, 혹은 패턴을 사용하지 않고 원본 이미지채로 사용할 것인지를 미리 결정해서 이미지를 준비해야 한다는 것입니다. 만일 패턴 형태가 아니라 원본 이미지 하나 만으로 스킨 이미지를 설정하려면, 처음부터 이미지 자체가 타이틀 스킨의 크기에 알맞게 최적화되어 있어야 합니다.)


저는 이 작업을 위해, 미리 간단한 타이틀 스킨을 준비해 두었습니다.
(여기서 가장 중요한 것은 타이틀 스킨의 크기인데요. 보통의 경우, 스킨 크기는 가로 800~1000 pixel. 세로 100~200 pixel 사이에서 스킨의 형태에 따라 유동적으로 변화합니다. 처음에는 자기 블로그에 꼭 맞는 스킨을 만들기가 쉽지 않습니다. 따라서 두어차례 테스트를 통해 크기를 맟추고, 스킨위자드의 타이틀 '높이'와 '글 영역 넓이' 조절 기능을 이용해 설정을 완료합니다.)

위와 같이 준비해둔 타이틀 이미지를 업로드하고, 맨 하단의 '적용'을 클릭하고 나니, 아래 그림의 붉은 상자와 같이 타이틀이 변경되었습니다. 준비한 타이틀 이미지의 크기가 블로그 스킨의 크가와 맞지 않아 약간의 차이는 있지만, 이것은 이후에 조정 할 수 있을 만큼의 오차이니 그냥 지나치도록 하겠습니다. 


이미 위에서 설명한 바와 같이 '스킨위자드>타이틀>텍스트'는 블로그 타이틀의 높이와 타이틀에 올라온 글씨의 크기와 색상을 설정하는 곳입니다.

여기의 '블로그 타이틀의 높이를 설정하는 기능'(아래 그림 ①)을 이용하여, 위에서 그냥 지나쳤던, 블로그 타이틀 이미지의 크기가 블로그에 맞지 않는 문제를 해결할 수 있습니다. 즉, 블로그 타이틀의 높이를 위에서 업로드한 타이틀 이미지의 크기와 맞춤으로서 문제를 해결하는 것입니다. 저는 여기서, 원래 타이틀 스킨의 높이가 109이던 것을 120으로 조절해서, 제가 올린 타이틀 이미지가 다소 컸기 때문에 생긴 '아랫 부분이 잘려나가는 현상'을 해결하였습니다. (스킨이 최적화된 그림은 이 강좌 맨 마지막 부분을 참조하시기 바랍니다.)

블로그 타이틀의 '글씨색상', '글꼴', '크기'에 대한 설명은 생략하도록 하겠습니다.(아래 이미지의 ②, ③번)


<게시글>

'스킨위자드>게시글'은 블로그의 '게시글'영역에 대한 설정을 하는 곳입니다.
'글영역 넓이'(아래 그림 ①), '글 제목의 글자색과 글꼴 및 글씨 크기'(아래 그림 ②), '게시글 글자색과 글꼴 및 크기'(아래 그림 ③)를 설정 할수 있습니다.

여기서 '글 영역 넓이'를 설정하는 기능 (아래 그림 ①)을 이용하여, 위에서 타이틀 이미지의 크기가 스킨의 크기와 맞지 않아 생긴 (타이틀 이미지의 한쪽이 잘려나가는) 현상을 해결할 수 있습니다. 즉, 원래의 처음에 설정되어 있던 글 영역 크기를 보다 그 크기를 크게 함으로서(혹은 적게 함으로서), 위에서 올렸던 블로그 타이틀 스킨의 크기와 블로그 전체의 가로 폭을 동일하게 맞출 수 있는 것입니다. 저는 원래 640이던 글영역 넓이를 655로 넓힘으로서 '타이틀 스킨 이미지'와 블로그 전체 폭의 크기를 맞출 수 있었습니다. (완료된 그림은 맨 하단 참조)


'스킨위자드'에 대한 설명은 이것으로 마치겠습니다.


2. HTML/CSS 편집

이 기능은 HTML과 CSS에 대한 이해가 없는 분들은 사용하시지 않는 것이 좋습니다. 


3. 사이드바 설정

'사이드바 설정'은 블로그의 사이드바를 설정하는 기능입니다.
이곳을 통해 사이드바에 필요한 메뉴를 추가할 수도 있고, 제거할 수도 있습니다.

아래 그림은 '사이드바 설정'을 클릭하면 나타나는 화면입니다.

우측의 '사이드바 꾸미기' 하단에 있는 메뉴들을 마우스로 드래그 하여 그 위치를 바꿀 수도 있고, 각 메뉴 우측의 X표시를 클릭하여 (아래 그림의 붉은 원 안) 사이드바에서 해당 메뉴를 제거할 수도 있습니다.


위 그림에서 원하지 않는 메뉴를 X 표시를 클릭하여 제거하면, 그것들은 아래 그림과 같이 왼쪽으로 이동하게 됩니다.
또, 이것들을 그 오른쪽에 있는 + 표시를 클릭함으로서 다시 사이드바에 추가할 수도 있습니다.


이와같이 편집이 완료되면, 화면 우측 상단의 '저장'을 클릭함으로서 사이드바 편집을 완료할 수 있습니다.

여기서 특별히 언급해야 할 부분이 있는데, 그것은 블로그에 자기가 원하는 배너를 추가하는 기능에 관한 것입니다. 이것을 위해서는, 먼저 '플러그인'에서 '배너출력' 플러그인을 활성화해야만 합니다. 그리고 이것을 사이드바에 추가함으로서 원하는 배너(HTML 배너출력, 이미지 배너출력)를 블로그에 올릴 수 있습니다.

다음의 그림을 참조하시기 바랍니다.


위 그림의 (노란색 하단) 글상자에, 올리고자하는 HTML소스나( HTML 배너출력의 경우) 이미지 주소(이미지 배너출력의 경우)를 입력하여 저장하면 됩니다.

이처럼, 사이드바 편집울 마무리하게 되면,  아래 그림과 같이 블로그 사이드바의 편집이 적용되어 나타나게 됩니다.


4. 화면출력 설정

여기서는 블로그 화면의 출력 형식을 설정합니다.
보다 자세히 말하자면, '블로그 화면'과 '사이드바'의 출력 형식을 설정하는 것입니다.

'블로그 화면' 설정에서는 글과 방명록의 출력 되는 글의 숫자를 설정하고 글목록을 선택했을 경우에 어떤 형태로 그것을 출력할 것인지 등을 설정하게 됩니다. 또, '사이드바' 설정에서는 사이드바에 노출되는 글의 갯수나 글자 수 등을 설정하게 됩니다.

이 메뉴의 설정은 자신이 좋아하는 바에 따라 하면 족하고, 어떠한 형식에 구애될 필요는 없을 것입니다.
다만, 지나치게 많은 글들이 노출되게 하기 보다는, 보기에 간단하고 편리한 형식을 취하는 것을 권장드립니다.

개인적으로는 다음과 같은 설정을 추천합니다. 글1, 방명록 10, 글목록 10(목록만), 댓글과 트랙백은 기본으로 펼치지 않도록, 최신글 10, 최신덧글 10, 최근 트랙백 5. (나머지는 별도로 설정을 하지 않아도 좋다고 생각합니다.)


5. 카테고리 설정

카테고리 설정에서는 블로그의 카테고리를 생성하고, 이를 변경 할 수 있습니다.
아래 그림 ①의 하단에 있는 '추가'를 클릭하여 카테고리를 추가할 수도 있고, 이미 설정된 카테고리를 마우스로 선택한후 '삭제'를 클릭하여 이를 없앨 수도 있습니다.(카테고리를 삭제할 때는 해당 카테고리에 있는 모든 글들을 미리 다른 카테고리로 옮겨야 합니다.) 또, 마우스로 선택한 카테고리의 이름을 변경할 수도 있습니다.(마우스로 더블클릭하여 이름을 변경할 수도 있고, 이름을 변경할 카테고리를 마우스로 선택한 후 상단의 '수정'을 클릭하여 변경 할 수도 있습니다.)

아래 화면 우측은, 카테고리의 스타일을 설정하는 기능입니다.
이것은 취향에 따라 설정하면 그만이므로 별도로 설명하지는 않겠습니다.
하지만, 특별히 고치고 싶지 않다면 그냥 두는 것도 괜챦습니다.


저는 아래와 같이 블로그 카테고리에 '뉴스', '동영상'이라는 카테고리를 추가해 봤습니다.
(붉은 상자 안에 추가된 카테고리가 보입니다.) 카테고리를 추가한 후 맨 하단의 '저장'을 클릭하여 편집을 완료합니다.


이렇개 블로그에 카테고리를 추가한 결과, 블로그의 초기화면이 아래 그림과 같이 바뀌었습니다.
(상단의 타이틀 스킨은 위에서 두차례 조정한 결과 완전히 최적화 되었습니다.)
오른쪽 하단의 붉은 상자 안에 추가된 두개의 카테고리가 보입니다.



이것으로 '티스토리 블로그 만들기 강좌'의 마지막인 '스킨'에 대한 설명이 모두 끝났습니다.
부족한 인터넷 강좌였습니다만, 이 강좌가 블로그를 개설하고 운영하는데 작은 도움이라도 되기를 바랄 뿐입니다.

모자란 부분은, 다른 네티즌들이 작성한 설명을 참조하고 스스로 직접 배우고 터득하면서 채워나갈 수 있을 것으로 생각합니다.
그렇게 몇달의 시간을 보내고 나면, 어느새 당당한 파워블로거가 되어가고 있는 자신을 발견할 수 있을 것입니다.

감사합니다.
국민참여정당 화이팅!!!