티스토리 이야기
티스토리의 새로운 첫화면, 홈커버로 만들어보세요 본문
그동안 사이트의 홈화면을 꾸미기 위해서는 티에디션, 테터데스크를 사용해야 했습니다. 디자인, 구성, 이 모든 역할은 오롯이 사용자의 몫이었습니다. 스킨 제작자는 이에 전혀 관여를 할 수 없었습니다. 그래서 저희는 스킨 제작자가 홈화면을 디자인해서 사용자에게 제공할 수 있도록 하고 싶었습니다.
홈커버는 스킨 제작자가 사이트 홈화면을 미리 구성해 사용자에게 제공할 수 있도록 설계되었습니다. 스킨 제작자는 홈화면에 사용할 수 있는 커버 아이템을 제작하여 사이트 전체 디자인을 적절히 제어할 수 있습니다. 또, 사용자는 이를 원하는대로 배치하기만 해도 자신만의 멋진 사이트를 만들 수 있습니다.
이제 홈커버를 어떻게 제작하는지에 대해서 알아보도록 하겠습니다.
커버 아이템 등록
홈커버는 여러 커버 아이템의 조합으로 구성됩니다. 커버 아이템은 사용자가 설정한 순서대로 데이터를 표시하여 홈화면을 만듭니다. 커버 아이템은 티스토리 스킨의 메타데이터를 담고 있는 index.xml을 통해 등록할 수 있습니다.
<cover>
<item>
<name>커버 아이템 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명</description>
</item>
</cover>
name은 커버를 구분하는 key로 사용되며 중복되지 않아야 합니다. label은 사용자에게 표시되는 이름입니다. 중복되어도 무방하나 사용자가 혼란스럽지 않도록 가급적 명확히 구분되는 이름을 사용하는 것이 좋습니다. description은 추가적인 설명이 필요할 때 사용합니다. 이름만으로 커버의 설명이 충분하지 않다고 생각될때 짧은 문장으로 특징을 설명할 수 있습니다.
<cover> 엘리먼트에 여러개의 <item> 엘리멘트를 정의할 수 있고 이를 등록하면 사용자는 스킨 편집 화면에서 다음과 같이 커버 아이템을 볼 수 있게 됩니다.
커버 아이템 사용
커버가 등록되기만 하면 사용자는 스킨 아이템에 사용될 데이터와 순서를 설정할 수 있습니다. 이렇게 설정된 데이터를 어떻게 표시할 수 있을지 알아보겠습니다.
커버 데이터는 세가지로 구분됩니다. ‘최신글’, ‘글선택', ‘직접입력’입니다. 최신글은 표시할 글의 카테고리와 개수를 저장하고 해당하는 글을 개수만큼 반복하여 표시합니다. 글선택은 표시할 글을 직접선택하여 저장하며 마찬가지로 해당하는 글을 반복하여 표시합니다. 직접입력은 사용자가 표시될 내용을 직접 입력하여 저장하고 이를 표시합니다.
다음은 feature라는 이름의 커버아이템을 스킨에서 사용한 예입니다.
<s_cover_group>
<s_cover_rep>
<s_cover name='featured'>
<div class='featured'>
<s_cover_item>
<div class='featured-item'>
<s_cover_item_thumbnail>
<img class="image" src="">
</s_cover_item_thumbnail>
<strong class="title"></strong>
<a href="" class="action">자세히 보기</a>
</div>
</s_cover_item>
<button class='btn-prev'><</button>
<button class='btn-next'>></button>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
<s_cover_group> 은 커버가 표시될 영역이고 사용자가 선택한 커버 아이템과 동일한 이름의 <s_cover>가 <s_cover_rep>에 표시됩니다.
위의 예로 최신글을 표시한다면 다음과 같이 치환될 것입니다.
<div class=’featured’>
<div class=’featured-item’>
<img class=”image” src=”https://sample.com/hello.png”>
<strong class=”title”>반갑습니다</strong>
<a href=”/entry/hello” class=”action”>자세히 알아보기</a>
</div>
<div class=’featured-item’>
<img class=”image” src=”https://sample.com/world.png”>
<strong class=”title”>어서오세요</strong>
<a href=”/entry/world” class=”action”>자세히 알아보기</a>
</div>
<button class=’btn-prev’><</button>
<button class=’btn-next’>></button>
</div>
Poster 스킨의 홈 커버
Poster 스킨에서는 홈 커버를 어떻게 사용했는지 살펴보겠습니다. Poster 스킨은 총 5개의 커버 아이템을 제공합니다. 커버는 다음과 같이 등록되어 있습니다.
<cover>
<item>
<name>cover-slider</name>
<label><![CDATA[ 슬라이더 ]]></label>
<description><![CDATA[ 좌우 스와이프가 가능한 슬라이더입니다. ]]></description>
</item>
<item>
<name>cover-list</name>
<label><![CDATA[ 리스트 ]]></label>
<description><![CDATA[ 제목과 본문 내용을 주요하게 보여주는 일반 리스트입니다. ]]></description>
</item>
<item>
<name>cover-thumbnail-list</name>
<label><![CDATA[ 섬네일 리스트 ]]></label>
<description><![CDATA[ 섬네일을 주요하게 보여주는 리스트입니다. ]]></description>
</item>
<item>
<name>cover-masonry</name>
<label><![CDATA[벽돌 리스트]]></label>
<description><![CDATA[ 섬네일 크기에 따라 자동으로 배치되는 벽돌 리스트입니다. ]]></description>
</item>
<item>
<name>cover-gallery</name>
<label><![CDATA[ 갤러리 ]]></label>
<description><![CDATA[ 섬네일만 나열하여 보여줍니다. 마우스오버시 타이틀이 노출됩니다. ]]></description>
</item>
</cover>
등록된 커버는 다음과 같이 사용됩니다. 커버 아이템 아래에는 항상 표시되는 cover-footer가 있고 블로그메뉴와 사용하는 소셜서비스 아이콘이 표시되고 있습니다.
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-list'>...
</s_cover>
<s_cover name='cover-slider'>...
</s_cover>
<s_cover name='cover-masonry'>...
</s_cover>
<s_cover name='cover-list'>...
</s_cover>
<s_cover name='cover-gallery'>...
</s_cover>
</s_cover_rep>
<div class="cover-footer">...
</div>
</s_cover_group>
이제 커버 아이템의 등록과 사용을 모두 정의했으니 이제 css로 원하는 스타일만 지정하면 됩니다. 생각보다 간단하죠? 어려운 부분은 어떤 커버를 디자인해서 사용자에게 어떻게 사용하게 할 것인가입니다. 그것은 스킨 제작자 여러분의 창의적인 아이디어로 해결해주시길 바랍니다.
지금까지 홈커버의 등록과 사용에 대해서 알아보았습니다. 스킨 제작자의 의도대로 홈화면이 디자인되면 멋진 사이트가 정말 많아질 것 같습니다. 스킨 제작자 여러분을 응원합니다.
감사합니다.
