티스토리 이야기

티스토리 글쓰기 가이드 : 단축키

Joo — Wed, 27 Mar 2019 16:36:41 +0900

티스토리 글쓰기 기본 모드에는 여러 단축키가 있습니다. 마우스로 모든 기능을 사용할 수 있지만 간단한 문서 편집에서 단축키가 있다면 훨씬 쉬운 문서 작성이 가능할 것입니다. 어떤 단축키가 있는지 하나씩 살펴보겠습니다.

문단 스타일

스타일	PC	Mac
제목1 (h2)	Alt+Shift+2	Ctrl+Alt+2
제목2 (h3)	Alt+Shift+3	Ctrl+Alt+3
제목3 (h4)	Alt+Shift+4	Ctrl+Alt+4
문단3 (p)	Alt+Shift+7	Alt+Shift+7

티스토리 에디터에서 제공하는 문단 스타일은 제목1이 HTML의 h2에 해당합니다. 글 제목이 h1에 해당하기 때문입니다. 인용과 다른 문단 스타일은 단축키를 제공하지 않습니다.

글자 스타일

스타일	PC	Mac
굵게	Ctrl+B	Command+B
기울임꼴	Ctrl+I	Command+I
밑줄	Ctrl+U	Command+U

기타 액션

액션	PC	Mac
전체선택	Ctrl+A	Command+A
실행취소	Ctrl+Z	Command+Z
다시실행	Ctrl+Y / Shift+Ctrl+Y	Command+Y / Shift+Command+Y
링크삽입/수정	Ctrl+K	Command+K

현재는 몇가지 없지만 앞으로도 유용한 기능에 대해서 단축키를 추가할 예정이니 많은 의견 부탁드립니다.
감사합니다.

티스토리 글쓰기 가이드 : 마크다운 문법

Joo — Sun, 24 Mar 2019 21:36:24 +0900

마크다운은 2004년 존 그루버가 만든 text to HTML 컨버팅 도구입니다. 마크다운을 사용하면 많은 기능을 가지고 있는 에디터가 없어도, 복잡한 HTML 코드 작성없이도 형식을 갖춘 문서를 쉽게 작성할 수 있습니다. 물론 티스토리의 새로운 에디터는 강력한 기능을 가지고 있어 이런 도구가 필요없을지도 모릅니다. 하지만 마크다운은 단순 텍스트라 이력 관리가 쉽고 복사 붙여넣기에도 강점이 있어 티스토리에서는 마크다운 모드를 제공하기로 했습니다.

이제 마크다운으로 어떻게 글을 작성할 수 있을지 알아보도록 하겠습니다.

마크다운 기본 문법

글의 기본인 문단(<p>)은 아무런 기호를 사용하지 않고 작성하면 됩니다. 기본문법은 줄바꿈(<br>)을 사용하기 위해선 특별한 방법을 사용해야 하지만 후에 설명할 Github flavor 문법으로 인해 별다른 방법없이 줄바꿈을 사용할 수 있게 되었습니다.

문단을 나누기 위해서는 두번 줄바꿈을 해주면 됩니다. 이 방법은 작성할 때도 문단이 나뉜 것처럼 보이고 실제로도 문단이 나뉘기 때문에 아주 유용합니다. 문제는 문단 앞뒤 간격이 없도록 설정한 경우 마크다운에서 보는 문단의 모양과 미리보기로 보는 문단의 모양이 다르게 보인다는 것입니다. 따라서 마크다운 모드로 글을 쓰시는 경우 설정에서 문단 앞뒤 간격을 사용하실 것을 권장합니다.

제목(<h1>~<h6>)은 문단 앞에 단계에 해당하는 수의 #을 넣는 것으로 사용할 수 있습니다.

# h1 로 전환

## h2 로 전환

인용(<blockquote>) 은 문단 앞에 >을 넣는 것으로 사용할 수 있습니다. 인용 안에서 줄바꿈이나 문단구분을 사용하려면 새로운 줄 앞에 또 >를 넣어주어야 합니다.

> 인용문입니다.
>
> 인용문 안에서도 새로운 문단을 사용할 수 있고
>
> ## 제목도 사용할 수 있습니다.

리스트는 크게 순서없는 리스트(<ul>), 순서있는 리스트(<ol>) 2가지가 있습니다. 순서 없는 리스트는 -, *, +을 문단 앞에 사용하고 순서 있는 리스트는 1. 등으로 직접 숫자를 사용합니다.

* 섞어 써도 되는
+ 순서가 필요없는
- 리스트 

1. 첫번째
2. 두번째 
3. 세번째를 구분하는 리스트

마크다운에는 폰트를 변경하거나 글자크기를 변경하는 표현식은 없습니다. 강조, 밑줄, 취소 등의 표현만 가능합니다.

**강조** 와 또 다른 _강조_, ~~취소~~

<strong>강조</strong>와 또 다른 <em>강조</em>, <del>취소</del>

링크(<a>) 문서와 문서를 연결하는 HTML에서 가장 중요한 기능 중 하나입니다. 표시할 텍스트와 연결할 URL을 마크다운에서는 다음과 같이 표시합니다.

[티스토리 개발 이야기](https://tistory.io)

<a href="https://tistory.io">티스토리 개발 이야기</a>

테이블(<table>)은 블로그에 작성하는 글에는 그리 유용하진 않지만 일부 사용해야하는 경우가 있습니다. 테이블은 다음과 같이 사용합니다.

| 제목 | 내용 |
| ---- | ---- |
| 첫번째 | 내용입니다. |
| 두번째 | 내용입니다. |

<table>
<thead>
  <tr>
    <th>제목</th>
    <th>내용</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>첫번째</td>
    <td>내용입니다.</td>
  </tr>
  <tr>
    <td>두번째</td>
    <td>내용입니다.</td>
  </tr>
</tbody>
</table>

마지막으로 개발자들이 마크다운을 사랑하는 이유. 코드, 코드 블럭입니다. 이 문서에서도 아주 유용하게 사용 중인데요. `로 감싸면 inline 코드, ```로 감싸면 코드블럭이 됩니다.

    ```kotlin
    fun main(args: Array<String>) {
        println("Hello, world!")
    }
    ```

    <pre><code class="language-kotlin">
    fun main(args: Array<String>) {
        println("Hello, world!")
    }
    </code></pre>

Github Flavor 문법

2004년 존 그루버가 말한 마크다운은 지금과 같이 다양한 기능을 제공하지는 않았습니다. 테이블도 없었고 코드블럭도 들여쓰기를 사용해야만 했습니다. 이로 인해 다양한 확장이 나타났는데요. 티스토리는 가장 활발히 사용되고 있는 Github Flavor Markdown (GFM)을 사용하기로 했습니다. 100% 지원하는 것은 아닙니다. Github에서만 사용되는 것도 있으니까요. 하지만 대부분 지원하려고 노력하고 있으니 자세한 내용은 GFM 문서를 통해 확인해주세요.

감사합니다.

티스토리의 새로운 첫화면, 홈커버로 만들어보세요

Joo — Fri, 23 Nov 2018 11:10:30 +0900

그동안 사이트의 홈화면을 꾸미기 위해서는 티에디션, 테터데스크를 사용해야 했습니다. 디자인, 구성, 이 모든 역할은 오롯이 사용자의 몫이었습니다. 스킨 제작자는 이에 전혀 관여를 할 수 없었습니다. 그래서 저희는 스킨 제작자가 홈화면을 디자인해서 사용자에게 제공할 수 있도록 하고 싶었습니다.

홈커버는 스킨 제작자가 사이트 홈화면을 미리 구성해 사용자에게 제공할 수 있도록 설계되었습니다. 스킨 제작자는 홈화면에 사용할 수 있는 커버 아이템을 제작하여 사이트 전체 디자인을 적절히 제어할 수 있습니다. 또, 사용자는 이를 원하는대로 배치하기만 해도 자신만의 멋진 사이트를 만들 수 있습니다.

이제 홈커버를 어떻게 제작하는지에 대해서 알아보도록 하겠습니다.

커버 아이템 등록

홈커버는 여러 커버 아이템의 조합으로 구성됩니다. 커버 아이템은 사용자가 설정한 순서대로 데이터를 표시하여 홈화면을 만듭니다. 커버 아이템은 티스토리 스킨의 메타데이터를 담고 있는 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'>&lt;</button>
        <button class='btn-next'>&gt;</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’>&lt;</button>
  <button class=’btn-next’>&gt;</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로 원하는 스타일만 지정하면 됩니다. 생각보다 간단하죠? 어려운 부분은 어떤 커버를 디자인해서 사용자에게 어떻게 사용하게 할 것인가입니다. 그것은 스킨 제작자 여러분의 창의적인 아이디어로 해결해주시길 바랍니다.

지금까지 홈커버의 등록과 사용에 대해서 알아보았습니다. 스킨 제작자의 의도대로 홈화면이 디자인되면 멋진 사이트가 정말 많아질 것 같습니다. 스킨 제작자 여러분을 응원합니다.

감사합니다.

References

홈커버 가이드 문서: https://tistory.github.io/document-tistory-skin/common/cover.html
Poster 스킨: https://www.tistory.com/skin/pg_Poster

HTML 편집없는 스킨 변경, 스킨 옵션으로 만들어보세요.

Joo — Fri, 23 Nov 2018 11:03:03 +0900

스킨을 사용하면서 이것만 조금 바뀌면 좋겠는데 html편집은 너무 어렵다는 생각을 하신 적이 있나요? 혹은 스킨을 제작하면서 사용자가 선택해서 사용할 수 있는 부분이 있으면 좋겠다고 생각을 하신 적이 있나요? 이러한 요구에 응답하기 위해서 저희는 스킨 제작자가 제공하는 옵션을 만들기로 했습니다.

스킨옵션은 스킨 제작자가 사용자에게 옵션을 제공할 수 있도록 설계되었습니다. 스킨 제작자는 스킨에서 사용하는 변수를 정의해서 변수에 따라 스킨이 다르게 보이도록 디자인할 수 있습니다. 또, 사용자는 어려운 html 편집없이 스킨 옵션을 선택해서 자신만의 멋진 사이트를 만들 수 있습니다.

이제 스킨 옵션을 어떻게 제작하는지에 대해서 알아보도록 하겠습니다.

스킨 옵션 등록

스킨 옵션은 티스토리 스킨의 메타데이터를 담고 있는 index.xml을 통해 등록할 수 있습니다.

<variables>
  <variable>
    <name>치환자에서 사용할 이름</name>
    <label>사용자에게 표시할 이름</label>
    <description>설명 (optional)</description>
    <type>타입</type>
    <option>타입에서 사용하는 옵션 값</option>
    <default>기본 값</default>
  </variable>
</variables>

name은 스킨옵션의 key이며 중복될 수 없습니다. 치환자에서 이를 사용합니다. label은 스킨 편집에서 사용자에게 표시될 이름이며 description은 현재 사용되고 있지 않으나 향후에 스킨옵션을 설명하기 위해 사용될 예정입니다.

type은 스킨이 어떻게 사용될 지에 대해서 설정합니다. option은 type별로 어떤 값이 설정될 수 있는지에 대해서 설정하고 default는 기본으로 설정될 값입니다.

스킨 옵션 타입

스킨 옵션에는 총 5개의 타입이 있습니다.

STRING: input box로 값을 입력받으며 단순 치환용도로 사용합니다.
IMAGE: 사용자로부터 이미지를 업로드 받아 사용합니다.
BOOL: 켜고 끄는 기능을 제공할때 사용합니다.
COLOR: 전체 혹은 특정 영역의 색 테마를 제공할때 사용합니다.
SELECT: option 값을 통해 사용자로부터 선택지를 제공할때 사용합니다.

이제 스킨 옵션을 어떤 용도로 사용해야 하는지에 대해서 알아보겠습니다.

스킨 옵션 사용

#2 스킨의 이미지 변경 옵션

티스토리의 두번째 반응형 스킨인 #2 스킨은 큰 화면에서는 왼쪽에 조금 작은 화면에서는 위쪽에 커다란 이미지가 배치됩니다. 이 이미지는 모든 페이지에서 표시되기 때문에 사이트의 얼굴이라 할 수 있습니다. 하지만 출시되었을때 이 이미지는 변경이 쉽지 않았습니다. html 에서 관련된 css를 찾아서 변경을 해주어야 했습니다. 이젠 스킨 옵션을 통해 다음과 같이 편하게 이미지를 변경할 수 있게 되었습니다. 티스토리 이야기에서도 이 스킨을 사용 중입니다.

<variable>
  <name>cover-image</name>
  <label>
    <![CDATA[ 커버이미지 ]]>
  </label>
  <type>IMAGE</type>
  <option />
  <default>
    <![CDATA[ https://t1.daumcdn.net/tistory/0/Ray2/images/header_default.jpg ]]>
  </default>
  <description>
    <![CDATA[ 커버 이미지를 변경합니다. ]]>
  </description>
</variable>

#2 스킨은 하나의 스킨옵션을 사용합니다. IMAGE타입입니다. 이 경우 아래와 같이 설정에 표시됩니다.

사용은 몹시 간단합니다. 설정한 옵션이 있는 경우 커버 이미지에 대한 스타일을 재정의하기만 하면 됩니다.

<style>
  <s_if_var_cover-image>
  .wrap_sub {
    background-image: url('');
  }
  </s_if_var_cover-image>
</style>

Poster 스킨의 리스트타입 옵션

사이트 운영에 최적화된 최신 스킨인 Poster 스킨은 여러가지 스킨옵션을 제공중이고 스킨커버도 다양하게 지원하고 있습니다. 티스토리 공식 블로그에서도 이 스킨을 사용 중입니다. 다양한 옵션 중에서 리스트 타입에 대해서 알아보겠습니다.

<variable>
  <name>post-type</name>
  <label><![CDATA[ 리스트 타입 ]]></label>
  <description><![CDATA[ 섬네일형 또는 리스트 타입을 선택합니다. ]]></description>
  <type>SELECT</type>
  <option>
  <![CDATA[
    [
      {
        "name":"post-type-thumbnail",
        "label":"섬네일형",
        "value":"post-type-thumbnail"
      },
      {
        "name":"post-type-text",
        "label":"리스트형",
        "value":"post-type-text"
      }
    ]
  ]]>
  </option>
  <default>post-type-text</default>
</variable>

리스트 타입은 SELECT타입을 사용하고 있습니다. option에 json으로 선택지를 넣어두고 사용자가 이를 선택할 수 있도록 합니다. Poster 스킨은 섬네일형(post-type-thumbnail), 리스트형(post-type-text)을 선택할 수 있도록 했고 기본으로 리스트형이 선택되도록 했습니다.

선택된 값을 어떻게 사용하는지 알아보겠습니다. 먼저 html에서는 body에 선택한 post-type값이 class로 들어가도록 합니다. css에서는 이 class에 해당하는 디자인이 보이도록 설정합니다.

// html
<body class="<s_if_var_post-type> </s_if_var_post-type>">
  
// css
.post-type-thumbnail .post-item {
	float: left;
	width: 24.0625%;
	margin: 0 0 57px;
	padding-left: 1.25%;
	border: 0;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
	padding-left: 0;
}
.post-type-thumbnail .post-item a {
	padding: 0;
}

... 생략

지금까지 스킨옵션의 등록과 사용에 대해서 알아보았습니다. 어려운 html/css 편집없이도 다양한 요구를 만족시킬 수 있는 멋진 스킨이 많아지면 좋겠습니다. 스킨 제작자 여러분을 응원합니다.

감사합니다.

References

스킨 옵션 가이드 문서: https://tistory.github.io/document-tistory-skin/common/variable.html
Poster 스킨: https://www.tistory.com/skin/pg_Poster