티스토리 블로그 스킨 변경 방법(스킨 수정 족집게)

지난 어느 날 티스토리 스킨 페이지에서 Portfolio 스킨을 적용했다. 한동안 잘 쓰던 예쁜 스킨에 손을 대기 시작했다. 티스토리 "관리 페이지 > 꾸미기 > 스킨 변경"에서 스킨을 다운로드하고 skin.html과 style.css 파일을 Notepad++로 긁적긁적했다. 이쪽으로 옮겨보고 저 모양으로 해보고 이 색으로 변경하니 현재 스킨에 이르렀다. 티스토리 블로그 스킨을 수정하면서 알게 된 것을 적어본다.

 
 

블로그 스킨 찾기

티스토리 블로그 스킨은 제법 많다. 티스토리에서 제공하는 스킨 이외에 유・무료로 공유하는 이용자 제작 스킨은 332개나 된다. 이외에 구글링 하면 더 많은 스킨이 나온다. 이런 스킨을 내 블로그에 적용하는 것은 마치 인터넷 쇼핑하는 기분이다.

 
 

블로그 스킨 = skin.html + style.css

티스토리 블로그 스킨은 skin.html, style.css, 기타 파일로 구성돼 있다. 기본 형태만 있는 skin.html에 아이콘, 배경색, 테두리 형태, 가로 크기, 세로 크기, 여백 등의 스타일(style.css)을 주면 블로그 스킨이 된다.

▼ skin.html, style.css, 기타 파일 위치
블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집

▼ skin.html, style.css, 기타 파일 다운로드
블로그 관리 페이지 > 꾸미기 > 스킨 변경 > 다운로드

 
 

HTML 구조와 스킨 수정의 관계

티스토리 블로그 스킨 수정의 핵심은 무엇을 어떻게 바꿀까이다. 무엇은 블로그 메뉴, 최근 글, 검색 화면, 본문, 태그, 댓글 등이 될 수 있으며 이를 HTML 요소(Elements)라 한다. 그리고 요소는 세분화될 수 있다. 예를 들면 댓글 요소는 글쓴이, 날짜, 댓글 내용처럼 세분화될 수 있다. 이때 댓글 요소를 부모 요소라 하고 글쓴이, 날짜, 댓글 내용은 자식 요소라 한다. 이 세분화는 본인이 하기 나름이다. 세분화한 것을 또 세분화할 수 있다. 즉 세분화 과정을 거치면서 부모 요소는 자식 요소가 되고 그 자식 요소는 다시 부모 요소가 될 수도 있다.

HTML 요소의 부모-자식 관계는 블로그 스킨 변경에도 깊은 관계가 있다.
"자식은 부모를 닮는다."
HTML에서 부모의 글자 색이 검은색이면 자식의 글자 색도 검은색이 된다. 이것은 상속(inherit)이라 한다. 즉, 부모 쪽에서 정의한 글자 크기, 글자 색, 배경색 등의 스타일은 그대로 자식에게 영향을 준다. 이 개념을 유념해야 일을 두 번 하지 않는다. 예를 들어 어느 부모 요소에 3개의 자식 요소가 있는데 자식 요소 모두의 글자색을 모두 검은색을 하고 싶을 경우, 자식 요소 3개에 대해 각각 글자색을 변경하는 것보다 그 부모 요소의 글자색을 한 번 변경하는 것이 효율성에서 좋을 것이다.

 
 

브라우저의 요소 검사(선택)와 미리 보기

HTML의 모든 (부모/자식) 요소는 태그(Tag)로 감싸져 있다.(예:<div></div) 부모 요소도 태그, 자식 요소도 태그, 그 밑의 자식 요소도 태그로 구성돼 있다. HTML은 태그 투성이다. 현재 블로그 스킨의 skin.html의 라인 수 1,082줄에는 많은 태그가 코딩돼 있다. 그리고 이 태그에 감싸인 요소를 스타일링한 style.css의 라인 수는 4,388 줄이나 되기 때문에 수정하고 싶은 요소를 찾아 스타일링하려면 가독성이 떨어지는 소스 코드를 부모-자식 관계를 유념해 들여다봐야 한다.

인터넷 브라우저의 요소 검사기를 사용하면 변경하고 싶은 요소가 있는 곳과 스타일이 정의된 있는 곳을 쉽게 찾을 수 있으며 부모-자식 관계에 따른 스타일 상속을 일목요연하게 확인할 수 있다.

인터넷 브라우저에서 F12 키를 눌러 개발자 모드 창이 표시되게 한다.
① 요소 검사 아이콘을 클릭한다.
② 마우스 포인터를 변경하고 싶은 곳(요소)으로 가져간다.
③ 실시간으로 요소의 스타일 정보(가로길이, 세로 길이, 색, 배경색 등)가 표시된다.
④ ②에서 왼쪽 마우스를 클릭하면 해당 요소가 있는 HTML 파일(skin.html)의 소스 코드가 표시된다. 더블 클릭하면 태그, id 이름, class 이름, 요소 내용을 수정/추가할 수 있다. 이곳에서 수정/추가는 미리 보기용으로 실제 소스 파일이 수정/추가되는 것은 아니다.
⑤ ②에서 왼쪽 마우스를 클릭하면 해당 요소의 스타일이 정의된 소스 코드가 표시된다. id 이름(#으로 시작) 또는 class 이름(.으로 시작)(예:toc-active) 또는 태그 이름 안에는 속성(Property)(예:color)과 속성 값(예:#fff)이 정의돼 있다. 속성과 속성 값 위에 마우스 포인터를 가져가면 왼쪽에 체크 박스가 표시되며 이 체크 박스로 기존에 정의된 스타일 적용과 해제를 확인할 수 있다. 이곳에 표시된 이름(id, class, tag)과 속성/속성 값은 더블 클릭해 수정하거나 삭제할 수 있다. 속성을 추가하려면 기존 속성 값 옆의 빈 공간을 왼쪽 마우스로 클릭한다. 예) 배경색을 바꾸려면 background-color 속성의 속성 값 #856E82을 더블 클릭해 원하는 색으로 입력한다. 또는 #856E82 바로 왼쪽에 직사각형 아이콘(보라색)을 클릭하면 색상 팔레트가 표시된다. 이것 또한 원본 소스 파일이 실제로 수정되는 것은 아니고 미리 보기 용이다. 요소의 크기, 색, 배경색, 형태 등에 대한 속성 목록은 아래 링크의 기술 문서 참조.
⑥ 스타일이 정의된 파일명과 해당 파일의 줄번호가 표시된다.
⑦ 클릭하면 모바일 디바이스 화면 크기로 바뀌어 반응형 블로그 스킨을 만들 때 유용하다. 아이폰, 갤럭시 스마트폰, 아이패드, 사용자 정의 크기 등을 선택할 수 있다.

▼ 속성(Property) 리스트 참고
https://www.w3schools.com/cssref/default.asp

 
 

블로그 스킨 변경 시 주의사항

1. 스킨 수정 전에 블로그 관리 페이지 > 꾸미기 > 스킨 변경 > 보관(또는 다운로드)을 클릭해 백업한다. ※ 매우 중요
2. 티스토리 블로그 스킨은 대부분 반응형으로 PC 화면뿐만 아니라 모바일 화면 크기에도 맞춰져 있다. style.css 파일을 수정한 후에 위 이미지의 ⑦장치 에뮬레이션을 클릭해 모바일 화면에 영향이 없는지 확인한다.
3. 안된다고 스트레스받지 말자. 세상에는 똑같은 문제로 고민한 사람이 많다. 고로 정답은 인터넷에 있다.

 
 

블로그 스킨 수정

블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집
⑧ skin.html 소스 코드
⑨ style.css 소스 코드
⑩ 이미지, 아이콘, 자바스크립트 파일 등을 업로드할 때 클릭
⑪ 단축키 Ctrl + G를 눌러 ⑥에서 확인한 줄번호 3429를 입력한다.
⑫ ⑤에서 확인한 클래스명(.toc-active)인지 체크하고 ⑤에서 배경색을 바꿔서 미리 보기 한 색으로 변경
😂 적용

 
 

스킨 변경에 도움이 되는 소프트웨어와 사이트

▼ 티스토리 스킨 가이드
티스토리는 블로그 스킨에 대한 가이드라인을 제공한다. 스킨 가이드에는 "최근 글", "인기 글", "최근 댓글", "카테고리", "검색" 등 티스토리 블로그 스킨에 필요한 요소를 만드는 방법이 기술돼 있다.
https://tistory.github.io/document-tistory-skin/

▼ 소스 코드 편집기 : Notepad++
간단한 스킨 편집은 위의 티스토리 블로그 관리 페이지에서 해도 되지만, 본격적으로 스킨을 수정하거나 공부하려면 소스 코드 편집기가 편하다. 왼쪽 창에는 skin.html을 열고 오른쪽 창에는 style.css을 열어 놓으면 관계 비교가 수월하다.
https://notepad-plus-plus.org/

▼ 소스 코드 편집기 : Visual Studio Code
현업 개발자가 많이 사용한다고 한다.
https://code.visualstudio.com/

▼ color 관련 : 픽픽(PicPick)
색상 추출 도구를 단축키에 등록해 사용하면 색 코드를 쉽게 추출할 수 있다.
https://picpick.app/ko/

▼ color 관련 : Color Hunt
색 감각이 없어서 자주 참조하는 사이트로 파스텔 톤 팔레트가 좋다.
https://colorhunt.co/

▼ color 관련 : ColorSpace
색 코드를 입력하면 입력한 색과 어울리는 색을 뽑아준다. 현재 블로그 스킨의 Tag 페이지의 색은 이곳의 도움을 받았다.
https://mycolor.space/

▼ color 관련 : CSS Gradient
그러데이션 제조기 사이트
https://cssgradient.io/

▼ 학습 사이트 - w3schools
설명이 쉽고 가독성이 좋다. "Try it Yourself" 버튼으로 언어 문법을 바로 테스트할 수 있다.
https://www.w3schools.com/

▼ 학습 사이트 - MDN web doc
많은 개발자가 참여하고 추천하는 사이트인 듯하다.
https://developer.mozilla.org/ko/

▼ 시연 사이트 - CodePen
HTML, CSS, Javascript 등을 바로 테스트할 수 있다.
https://codepen.io/

▼ 무료 사진과 동영상 - pixabay
출처 밝힘 없이 상업적 이용이 가능한 사진과 동영상이 많다.(사용 전 라이선스 확인 필수)
https://pixabay.com/ko/

▼ 무료 아이콘 - icon-icons
출처 밝힘 없이 상업적(Free for commercial use)으로 이용 가능한 아이콘이 많아 이용하는 사이트.(사용 전 라이선스 확인 필수)
지원 파일 : png, svg, ico, icns
https://icon-icons.com/ko/

▼ 아이콘 다운로드 - iconsdb
아이콘을 원하는 색으로 바꿀 수 있다. 저작권은 아이콘마다 다르다.(사용 전 라이선스 확인 필수)
지원 파일 : ico, png, gif, jpg, icns
https://www.iconsdb.com/

 
 

글을 마치며...,

현재 스킨의 원조는 Portfolio 스킨이다.
처음에는 작은 수정이었는데 이 작은 수정이 또 다른 수정을 만들기 시작했다. 블로그 스킨 수정 블랙홀에 빠졌다.
계속 개조되는 블로그 스킨은 만화 원피스의 프랑키처럼 됐다. 프랑키는 기능이라도 개선됐지만 블로그 스킨은 그렇지 못하다. 이것저것을 넣다 보니 소스 코드가 엄청 지저분해졌다. skin.html의 라인 수는 897줄에서 1082줄, style.css의 라인 수는 2610줄에서 4388줄로 늘어났다. 스킨의 기능 구현을 위한 자바스크립트 파일도 늘어가는 중이다.

"이제는 그만할까? 원래가 좋은 것 같아!"라는 생각이 든다. ㅋ
ing...,

이런 말이 있다.
튜닝의 최종 정착지는 순정이다.


feat. 이 글은 언젠가 쓰려했는데 이제야 쓴다.