개발고생일지/블로그-Tistory

12화. 티스토리 블로그 관리 인터페이스 9/11 꾸미기편 1

Fartist 2023. 2. 22. 06:00
- 목차
들어가는 말
1. 스킨 변경
2. 메뉴
3. 스킨 편집 1


 들어가는 말

 '꾸미기' 영역은 방문자들이 블로그에 들어왔을 때 가장 먼저 만나게 되는 대문과 집안 인테리어를 꾸미는 것입니다. 아무리 콘텐츠가 좋아도 블로그의 전체 모습이 너무 산만하거나, 콘텐츠를 열람하기에 어려운 형태를 가진다면 방문자는 오랫동안 우리 블로그에 머물기 어려울 것입니다. 꾸미기 영역은 설정하는 칸도 많고 '이름만 보고 바로 어떤 것이다' 직관적으로 이해할 수 없는 부분이 많습니다. 천천히 예시 이미지를 보면서 각 메뉴마다 어떤 변화가 나타나는지 확인하시기 바랍니다. 

 본인이 사용하는 스킨마다 '스킨 편집'에서 제공하는 기본 설정들이 조금씩 차이가 있습니다. 이 게시글은 여러 스킨 중 'Book Club'스킨을 예시로 듭니다. 다른 스킨도 약간의 차이가 있을 뿐 큰 틀은 비슷합니다. 이 글로 독자분들이 조금이나마 꾸미기 영역의 인터페이스가 익숙해지시기를 희망합니다.

[그림 12-2] '꾸미기' 영역
[그림 12-2] '꾸미기' 영역


 1.  스킨 변경

[그림 12-3] 스킨 변경 메인화면
[그림 12-3] 스킨 변경 메인화면

 '스킨 변경' 메뉴를 클릭하면 [그림 12-3]과 같은 창이 나타납니다. 여기서는 티스토리가 기본적으로 제공하는 스킨들을 살펴볼 수 있습니다. 만약 다른 스킨 중에 마음에 드는 것이 있다면 마우스 커서를 위로 올려봅시다.

[그림 12-4] 스킨 위에 마우스 커서
[그림 12-4] 스킨 위에 마우스 커서

 숨겨진 메뉴 '미리보기'와 '적용'이 나타납니다. 미리 보기는 해당 스킨을 적용했을 때 어떤 모습으로 바뀌는지 이미지로 보여줍니다. 새로운 인터넷 탭으로 나타나지만 버튼이 작동하지 않는 이미지라는 점 참고하시기 바랍니다. 그리고 적용을 눌러야 비로소 해당 스킨이 입혀집니다.

 [그림 12-4]의 '사용중인 스킨'에서 가장 오른쪽에 위치한 '메뉴 설정'을 눌러봅시다.


 2.  메뉴

[그림 12-5] 메뉴 설정
[그림 12-5] 메뉴 설정

 '꾸미기' 영역의 '메뉴'로 이동합니다. 어디선가 많이 본 창일 것입니다. 우리가  5화 인터페이스 콘텐츠 편 1에서 '페이지'라는 녀석을 다룰 때 잠시 이곳을 사용했습니다. 

 이전글 링크

 메뉴는 5화에서 이미 다루었으므로 여기서는 넘어가겠습니다.


 3.  스킨 편집

 다시 돌아와 [그림 12-4]에서 '사용중인 스킨'에 있는 버튼 중, '편집'을 눌러보겠습니다.

[그림 12-6] 스킨 편집 메인화면
[그림 12-6] 스킨 편집 메인화면

 그러면 [그림 12-6]이 나타납니다. 매우 복잡해 보이지만 하나씩 차근차근 살펴보겠습니다.

[그림 12-7] 스킨 편집 메인화면 구성
[그림 12-7] 스킨 편집 메인화면 구성

 스킨 편집의 메인화면은 크게 두 화면으로 구성됩니다. 우측의 큰 빨간 박스는 '편집 영역'입니다. 실질적으로 블로그의 생김새를 변경하는 곳으로 여러 항목들이 나열되어 있습니다. 좌측의 큰 빨간 박스는 미리 보기 영역입니다. 우측에서 설정한 것을 미리 확인할 수 있는 공간입니다. 좌측 빨간 박스의 연두색 박스 '새로고침'을 누르면, 우측 스킨 편집 영역에서 설정한 값들을 미리 보기 할 수 있습니다. 실제로 설정한 값을 블로그에 적용하고 싶을 때는 우측 빨간 박스 안에 있는 연두색 박스 '적용'을 클릭하면 됩니다.

1) 홈설정

[그림 12-8] 홈 설정
[그림 12-8] 홈 설정
[그림 12-9] 홈 설정 영역
[그림 12-9] 홈 설정 영역

 '홈 설정'이 다루는 부분은 [그림 12-9]의 빨간 박스 안 입니다. '홈 화면 글 수'를 수정하면 그에 따라 블로그 홈 화면에서 보여주는 글의 개수가 달라집니다. 

 '목록 구성 요소'는 세 가지가 있습니다. '내용만', '목록만', '내용 + 목록"입니다. 각각의 설정값으로 변하는 화면은 다음과 같습니다.

[그림 12-10] 홈 설정에 따른 블로그 홈 화면 변화 - 내용만[그림 12-10] 홈 설정에 따른 블로그 홈 화면 변화 - 목록만[그림 12-10] 홈 설정에 따른 블로그 홈 화면 변화 - 내용 + 목록
[그림 12-10] 홈 설정에 따른 블로그 홈 화면 변화

 

[그림 12-11] 홈 설정에서 '커버' 아이템 추가
[그림 12-11] 홈 설정에서 '커버' 아이템 추가

 홈 설정에서 '커버'를 누르면 홈 화면을 커스텀할 수 있습니다. 티스토리에서 약간의 차이점을 주면서 해당 영역을 커스텀해줍니다. 

[그림 12-12] 홈 커버 아이템 추가
[그림 12-12] 홈 커버 아이템 추가


2) 기본 설정

[그림 12-13] 기본 설정
[그림 12-13] 기본 설정

 기본 설정은 가만보면 [그림 12-8] 홈 설정과 비슷해 보입니다. 홈 설정은 블로그 홈에서 콘텐츠가 어떻게 보이는지 설정했다면, 기본 설정은 '카테고리' 내에서 콘텐츠가 어떻게 보일지 설정합니다. 목록 구성 요소와 각 설정이 변화시키는 모습도 '홈 설정'과 똑같습니다. 여기서 설정한 값은 미리 보기에서 확인하기 어려운데 이유는 카테고리로 들어가야 하기 때문입니다. 설정을 바꾸고 '적용'을 눌러 실제 블로그에 적용해 봅시다. 블로그 홈 화면으로 들어가 아무 카테고리나 선택하면 비로소 바뀐 설정을 확인할 수 있습니다.


 꾸미기는 양이 많기 때문에 3개의 글로 나누었습니다. 꾸미기편 1을 마칩니다.

반응형