티스토리 스킨 제작 도움말 : 그룹 치환자와 값 치환자
티스토리는 index.xml 문서와 HTML 문서가 밀접하게 연결되어 동작하는 플랫폼입니다. 앞서 두 개의 강좌를 다 살펴보셨다면 index.xml은 티스토리 스킨을 제어하는 목적으로 사용한다는것을 알 수 있습니다. 그렇다면 제어를 위해서는 반드시 HTML에 무언가가 존재해야한다는걸 짐작할 수 있을 것입니다. 그것이 바로 티스토리 스킨 가이드에서 명시하고 있는 그룹 치환자와 값 치환자입니다.
치환자 공통 부분
그룹 치환자와 값 치환자는 정해진 태그가 있는 반면 개발자가 임의로 만드는 형태도 존재합니다. 친효스킨을 기준으로 설명드리자면 정해진 치환자는 다음과 같습니다. 전체가 아닌 일부만 말씀드리겠습니다.
그룹 치환자 : <s_cover_group>, <s_article_rep>, <s_sidebar>
값 치환자 :
티스토리는 index.xml 문서와 HTML 문서가 밀접하게 연결되어 동작하는 플랫폼입니다. 앞서 두 개의 강좌를 다 살펴보셨다면 index.xml은 티스토리 스킨을 제어하는 목적으로 사용한다는것을 알 수 있습니다. 그렇다면 제어를 위해서는 반드시 HTML에 무언가가 존재해야한다는걸 짐작할 수 있을 것입니다. 그것이 바로 티스토리 스킨 가이드에서 명시하고 있는 그룹 치환자와 값 치환자입니다.
치환자 공통 부분
그룹 치환자와 값 치환자는 정해진 태그가 있는 반면 개발자가 임의로 만드는 형태도 존재합니다. 친효스킨을 기준으로 설명드리자면 정해진 치환자는 다음과 같습니다. 전체가 아닌 일부만 말씀드리겠습니다.
그룹 치환자 : <s_cover_group>, <s_article_rep>, <s_sidebar>
값 치환자 : , ,
|
티스토리 스킨 가이드에 공식적으로 나와있는 모든 그룹 및 값 치환자들이 정해진 대표적인 치환자들이라고 생각하시면 됩니다. 그 외의 나머지들은 모두 개발자가 직접 만든 치환자입니다. 기본 그룹 치환자의 구조는 <s_name> 형태이며, 기본 값 치환자의 구조는 형태라는것을 알 수 있습니다. 친효스킨에서 별도로 만든 치환자는 다음과 같습니다. 마찬가지로 일부만 말씀드립니다.
그룹 치환자 : <s_if_var_rgy-main-tryangle>, <s_if_var_rgy-article-top-adss>, <s_if_var_rgy-article-share>
값 치환자 : , ,
커스텀 그룹 치환자의 기본 형태는 <s_if_var_name> 형태이며 커스텀 값 치환자는 입니다. 사용자가 임의로 만드는 그룹 및 값 치환자에서 중요한 포인트가 있습니다. 반드시 영어로 시작해야 한다는 것입니다. 또한 대소문자 구별을 합니다. 왠만하면 소문자를 추천합니다. 예전에 대문자를 사용했었는데 인식이 제대로 되지 않았던 문제가 있었습니다. 숫자도 사용이 가능하지만 절대 숫자 먼저 시작을 해서는 안 됩니다. 마무리로 요약을 해보겠습니다.
1. 치환자명은 알파벳+숫자 조합일 것
2. 치환자명 알파벳은 대소문자 구별을 하지만 왠만하면 소문자만을 사용할 것
3. 치환자명은 반드시 알파벳으로 시작할 것
그러면 그룹 치환자와 값 치환자를 좀 더 자세히 알아봅시다.
그룹 치환자
그룹 치환자는 위에서 확인했듯이 태그의 꾸러미를 의미합니다. 티스토리에서 기본적으로 제공하는 그룹 치환자는 모두 저마다의 역할이 있습니다. 위에서도 언급한 <s_cover_group>의 경우는 커버 그룹을 정의합니다. 만약 커버 기능을 넣고자 할 때는 무조건 넣어줘야하는 최상위 루트의 커버 태그입니다. 친효스킨을 확인해 보시면 알 것입니다. 커버 시작이라는 주석 처리 바로 아래에 <s_cover_group>이 시작되고 있음을 확인할 수 있을 것입니다. 이 또한 태그이므로 시작을 했으면 반드시 닫혀야 하는 태그도 존재합니다. 따라서 커버 기능이 끝나는 부분에 </s_cover_group>이 존재합니다.
티스토리의 기본 메뉴들은 정해져있습니다. 방명록, 댓글, 인덱스 페이지, 본문, 커버, 사이드바 등등이 그것입니다. 만약 방명록 버튼을 눌렀다면 방명록 기능이 출력되어야하고, 인덱스 페이지의 글 목록을 누르면 해당 글의 본문 내용이 출력됩니다. 이런 것들은 이미 정해진 것들이지요. 그러니 스킨 개발자 입장에서는 전체 레이아웃을 만들고 어떤 영역에 어떤 기능들이 들어가도록 설계할 것인가를 기본 그룹 치환자로 정하기만 하면 됩니다.
친효스킨의 경우는 2단형 반응형 스킨입니다. 더 자세히 나누자면 가장 맨 위에 있는 영역은 헤더, 그리고 그 아래 부분은 콘테이너, 맨 아래는 푸터입니다. 콘테이너는 사이드바와 콘텐츠 영역 두 개로 분할되어 있습니다. 사이드바는 고정입니다. 따라서 사이드바 영역에는 <s_sidebar> 그룹 치환자 뿐입니다. 가장 많이 변화하는 구간은 바로 사이드바 옆인 콘텐츠 영역입니다. 그렇기에 친효스킨의 콘텐츠 영역 안에는 꽤 많은 기본 그룹 치환자들이 병렬로 들어있습니다. 내용물은 다음과 같습니다.
| 그룹 치환자 | 기능 |
| <s_article_protected> | 보호글 |
| <s_list> | 검색결과+리스트 |
| <s_notice_rep> | 공지글 |
| <s_cover_group> | 커버 |
| <s_article_rep> | 본문 |
| <s_guest> | 방명록 |
| <s_tag> | 태그 클라우드 |
| <s_paging> | 페이징 |
그러므로 본문만 유동적으로 변하게 됩니다. 가만히 생각해 보시기 바랍니다. 헤더, 사이드바, 푸터를 제외한 영역만 그때 그때 기능이 달라집니다. 즉 원하는 영역에 기본 그룹 치환자를 넣으면 해당 기능들을 필요에 의해 그때 그때 꺼내 사용하게 되는 원리입니다. 근데 대체로 스킨들의 기본 뼈대는 아마 거의 비슷할 겁니다. 왜냐하면 사이드바 영역에 본문 내용을 넣을수는 없을테니까요.
티스토리 기본 그룹 치환자는 커버 기능을 제외하고 index.xml에서 제어하지 않습니다. 기본 그룹 치환자는 티스토리 플랫폼 자체적으로 제어가 이루어집니다. 그렇다면 개발자가 개인적으로 스킨의 특정 기능을 스킨편집 화면에서 제어할 수 있도록 만들기 위해서는 바로 사용자 임의의 그룹 치환자를 만들어야 한다는 결론에 도달합니다.
값 치환자
기본 값 치환자의 역할을 먼저 알아둘 필요가 있습니다. 기본 값 치환자는 사용자의 임의의 입력값을 그대로 인식받아 출력하게되는 원리입니다. 대표적인 사례가 바로 블로그 이름입니다. 관리자 페이지의 관리 > 블로그에 들어가보시면 블로그 이름을 입력하는 칸이 있습니다. 티스토리마다 각자 다른 블로그 이름을 사용합니다. 따라서 이 값은 정할 수 없습니다. 티스토리 계정주마다 다르니까요. 그래서 이 부분을 값치환자로 대처한 것입니다. 블로그 이름에 해당하는 값치환자는 친절한효자손 취미생활 입니다. 따라서 이 치환자를 헤더에 넣어두면 블로그 이름에 입력한 텍스트가 그대로 치환되어 출력하게 되는 원리입니다.
치환자 구조 · GitBook
치환자 구조 티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 값치환자는 해당하는 값
tistory.github.io
치환자 구조 역시 티스토리 가이드 페이지에서 제공되고 있으니 꼭 확인하시기 바랍니다. 가이드 페이지에서 치환자 구조 부분만 확인해서는 안 됩니다. 전체적으로 싹 다 훑어야 합니다. 각 기능별 값치환자가 각각 존재하고 있기 때문입니다. 잘 모르시겠다면 친효스킨 뿐만 아니라 다른 스킨들도 열람하여 분석해야 합니다. 지피지기 백전백승입니다. 스킨에 대해 많이 파악하고 많이 알아가는만큼 눈에 포착되고 머릿속에 들어올 것입니다. 끝.
|
티스토리 스킨 가이드에 공식적으로 나와있는 모든 그룹 및 값 치환자들이 정해진 대표적인 치환자들이라고 생각하시면 됩니다. 그 외의 나머지들은 모두 개발자가 직접 만든 치환자입니다. 기본 그룹 치환자의 구조는 <s_name> 형태이며, 기본 값 치환자의 구조는 형태라는것을 알 수 있습니다. 친효스킨에서 별도로 만든 치환자는 다음과 같습니다. 마찬가지로 일부만 말씀드립니다.
그룹 치환자 : <s_if_var_rgy-main-tryangle>, <s_if_var_rgy-article-top-adss>, <s_if_var_rgy-article-share>
값 치환자 : , ,
커스텀 그룹 치환자의 기본 형태는 <s_if_var_name> 형태이며 커스텀 값 치환자는 입니다. 사용자가 임의로 만드는 그룹 및 값 치환자에서 중요한 포인트가 있습니다. 반드시 영어로 시작해야 한다는 것입니다. 또한 대소문자 구별을 합니다. 왠만하면 소문자를 추천합니다. 예전에 대문자를 사용했었는데 인식이 제대로 되지 않았던 문제가 있었습니다. 숫자도 사용이 가능하지만 절대 숫자 먼저 시작을 해서는 안 됩니다. 마무리로 요약을 해보겠습니다.
1. 치환자명은 알파벳+숫자 조합일 것
2. 치환자명 알파벳은 대소문자 구별을 하지만 왠만하면 소문자만을 사용할 것
3. 치환자명은 반드시 알파벳으로 시작할 것
그러면 그룹 치환자와 값 치환자를 좀 더 자세히 알아봅시다.
그룹 치환자
그룹 치환자는 위에서 확인했듯이 태그의 꾸러미를 의미합니다. 티스토리에서 기본적으로 제공하는 그룹 치환자는 모두 저마다의 역할이 있습니다. 위에서도 언급한 <s_cover_group>의 경우는 커버 그룹을 정의합니다. 만약 커버 기능을 넣고자 할 때는 무조건 넣어줘야하는 최상위 루트의 커버 태그입니다. 친효스킨을 확인해 보시면 알 것입니다. 커버 시작이라는 주석 처리 바로 아래에 <s_cover_group>이 시작되고 있음을 확인할 수 있을 것입니다. 이 또한 태그이므로 시작을 했으면 반드시 닫혀야 하는 태그도 존재합니다. 따라서 커버 기능이 끝나는 부분에 </s_cover_group>이 존재합니다.
티스토리의 기본 메뉴들은 정해져있습니다. 방명록, 댓글, 인덱스 페이지, 본문, 커버, 사이드바 등등이 그것입니다. 만약 방명록 버튼을 눌렀다면 방명록 기능이 출력되어야하고, 인덱스 페이지의 글 목록을 누르면 해당 글의 본문 내용이 출력됩니다. 이런 것들은 이미 정해진 것들이지요. 그러니 스킨 개발자 입장에서는 전체 레이아웃을 만들고 어떤 영역에 어떤 기능들이 들어가도록 설계할 것인가를 기본 그룹 치환자로 정하기만 하면 됩니다.
친효스킨의 경우는 2단형 반응형 스킨입니다. 더 자세히 나누자면 가장 맨 위에 있는 영역은 헤더, 그리고 그 아래 부분은 콘테이너, 맨 아래는 푸터입니다. 콘테이너는 사이드바와 콘텐츠 영역 두 개로 분할되어 있습니다. 사이드바는 고정입니다. 따라서 사이드바 영역에는 <s_sidebar> 그룹 치환자 뿐입니다. 가장 많이 변화하는 구간은 바로 사이드바 옆인 콘텐츠 영역입니다. 그렇기에 친효스킨의 콘텐츠 영역 안에는 꽤 많은 기본 그룹 치환자들이 병렬로 들어있습니다. 내용물은 다음과 같습니다.
| 그룹 치환자 | 기능 |
| <s_article_protected> | 보호글 |
| <s_list> | 검색결과+리스트 |
| <s_notice_rep> | 공지글 |
| <s_cover_group> | 커버 |
| <s_article_rep> | 본문 |
| <s_guest> | 방명록 |
| <s_tag> | 태그 클라우드 |
| <s_paging> | 페이징 |
그러므로 본문만 유동적으로 변하게 됩니다. 가만히 생각해 보시기 바랍니다. 헤더, 사이드바, 푸터를 제외한 영역만 그때 그때 기능이 달라집니다. 즉 원하는 영역에 기본 그룹 치환자를 넣으면 해당 기능들을 필요에 의해 그때 그때 꺼내 사용하게 되는 원리입니다. 근데 대체로 스킨들의 기본 뼈대는 아마 거의 비슷할 겁니다. 왜냐하면 사이드바 영역에 본문 내용을 넣을수는 없을테니까요.
티스토리 기본 그룹 치환자는 커버 기능을 제외하고 index.xml에서 제어하지 않습니다. 기본 그룹 치환자는 티스토리 플랫폼 자체적으로 제어가 이루어집니다. 그렇다면 개발자가 개인적으로 스킨의 특정 기능을 스킨편집 화면에서 제어할 수 있도록 만들기 위해서는 바로 사용자 임의의 그룹 치환자를 만들어야 한다는 결론에 도달합니다.
값 치환자
기본 값 치환자의 역할을 먼저 알아둘 필요가 있습니다. 기본 값 치환자는 사용자의 임의의 입력값을 그대로 인식받아 출력하게되는 원리입니다. 대표적인 사례가 바로 블로그 이름입니다. 관리자 페이지의 관리 > 블로그에 들어가보시면 블로그 이름을 입력하는 칸이 있습니다. 티스토리마다 각자 다른 블로그 이름을 사용합니다. 따라서 이 값은 정할 수 없습니다. 티스토리 계정주마다 다르니까요. 그래서 이 부분을 값치환자로 대처한 것입니다. 블로그 이름에 해당하는 값치환자는 친절한효자손 취미생활 입니다. 따라서 이 치환자를 헤더에 넣어두면 블로그 이름에 입력한 텍스트가 그대로 치환되어 출력하게 되는 원리입니다.
치환자 구조 · GitBook
치환자 구조 티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 값치환자는 해당하는 값
tistory.github.io
치환자 구조 역시 티스토리 가이드 페이지에서 제공되고 있으니 꼭 확인하시기 바랍니다. 가이드 페이지에서 치환자 구조 부분만 확인해서는 안 됩니다. 전체적으로 싹 다 훑어야 합니다. 각 기능별 값치환자가 각각 존재하고 있기 때문입니다. 잘 모르시겠다면 친효스킨 뿐만 아니라 다른 스킨들도 열람하여 분석해야 합니다. 지피지기 백전백승입니다. 스킨에 대해 많이 파악하고 많이 알아가는만큼 눈에 포착되고 머릿속에 들어올 것입니다. 끝.
