[티스토리 스킨 편집] 사이드바 이미지 배너 넣기

* 이번에는 전의 글에 사이드바에 이미지 배너를 넣는 것이 가능한지 물어보는 댓글이 있어서 사이드바에 이미지 배너를 넣는 방법에 대해서 살펴볼 것이다. 기본적으로 이미지 사이드바를 넣는 방법은 몇 가지가 있을 텐데, 각각의 장단점이 있을테니 간단하게 살펴볼 것이다. 크게 이미지를 업로드하는 방법과 사이드바를 넣는 방법으로 나누어서 살펴볼 것인데, 어떠한 방법을 선택할지는 먼저 아래에 정리를 하여 넣어두었으므로 참고하고 해당 방법을 따라가면서 해보는 것이 좋을 것이다. 이번의 글은 꼭 반응형 스킨이 아니더라도 일반 스킨에 대해서도 수정과 응용이 가능하다.

* 이전 글

2016/05/09 - [티스토리 반응형 스킨 편집] 페이스북 좋아요 버튼, 구글+1버튼 넣기

2016/05/13 - [티스토리 반응형 스킨 편집] 반응형 커스터마이징(상단 메뉴, 크기 변경 수정)

* 이미지 업로드

: 사이드바에 이미지를 넣기 위해서는 일단 중요한 것이 이미지를 어디에 저장해두고 제공해주느냐가 문제이다. 가장 쉽게 선택할 수 있는 옵션들은 아래와 같을 것이다.

1. HTML/CSS 의 파일 관리에 이미지를 업로드하여 사용

2. 외부 이미지 호스팅 사이트에 업로드하여 사용

3. 블로그 다른 공지사항 글 등에 이미지를 넣고 해당 이미지 링크를 사용

: 일단 1번과 2번이 가장 쉽게할 수 있는 방법이고, 3번도 쉽게 가능은 하지만, 사이드바에 맞는 이미지와 공지사항 등의 글에 넣는 이미지의 크기는 다르게 하는 것이 좋기 때문에 추천은 하지 않지만, 가능은 하다. 일단 1번 같은 경우에는 티스토리 블로그 안에서 자체적으로 해결 가능하기 때문에 쉽게 사용할 수 있고, 2번은 외부의 웹서비스를 사용하기 때문에 어려워 보일 수 있으나, URL을 가져오는 것은 아주 쉽게 가능하고, 3번은 1번과 2번을 다소 혼합했지만, 별도의 글을 작성해야 하는 번거로움이 있다. 먼저 순서대로 각 이미지를 업로드하고 URL을 획득할 수 있는 방법에 대해서 살펴볼 것이다.

1. HTML/CSS 의 파일 관리에 이미지를 업로드하여 사용

: HTML/CSS의 파일 관리에 이미지를 업로드하는 방법은, 현재 스킨과 관련된 파일로 이미지를 업로드하는 방법으로 티스토리 내부에 이미지를 가지고 있기 때문에 서로 다른 웹서비스 장애로 인하여 이미지가 표시 되지 않거나 하는 위험성이 적다. 하지만 아래에서도 살펴보겠지만, 스킨에서 내부적으로 관리하는 CDN의 URL이 다르기 때문에 그 부분을 알아내는 것이 프로그래밍을 모르는 블로거들에게는 힘들수도 있기 때문에 그 부분만 잘 넘긴다면 쉽게 적용할 수 있을 것이다. HTML/CSS의 파일 관리에 이미지를 업로드하는 방법은 아래의 순서대로 따라서 하면 된다.

1. 관리 페이지 > 꾸미기 > HTML/CSS 편집 메뉴

2. 파일 업로드 화면 > "+ 추가" 버튼

3. 파일 선택 > 업로드

: 추가 버튼 이후 파일을 업로드하게 되면 아래와 같이 파일이 업로드 되는 것을 확인할 수 있다.

4. 파일 URL 확인

: 이 다음 부분이 애매하면서도 불확실할 수도 있는 부분이 될수도 있는데, 일단 파일의 URL은 스킨 자체에서 사용할 때에는 위의 경우 "./images/ohb6Dyw.jpg"를 사용하면 되지만, 사이드바에 모듈로 추가하는 식으로 하는 경우에는 전체 URL을 사용해야 한다. 따라서, 이후에 실제 HTML을 넣는 부분을 어떻게 하느냐에 따라서 필요할수도 필요 없을수도 있는 부분이다. 일단 이렇게 파일을 업로드하게 되면 바로 어느 특정 위치에 파일이 저장 되었는지 확답할 수가 없다. 그래도 우클릭으로 URL을 확인해보면 아래와 같이 나오는 것을 확인할 수 있다.

http://cfs.tistory.com/custom/blog/11/111868/skin/images/ohb6Dyw.jpg

: 우클릭을 해서 파일의 URL을 확인할수도 있지만, 이렇게 파일을 확인하는 것은 실제 서비스되는 URL과는 다르기 때문에 간혹 티스토리의 이미지 관리 정책이 바뀌게 되면 오류가 날 수 있기 때문에 크게 추천하지는 않는다. 그나마 정확하게 알 수 있는 방법은, 실제로 이미지를 잠시 스킨에 추가해본 다음에 해당 이미지의 URL을 따오는 것이다. 이미지의 URL을 따오는 과정을 거치는 와중에 이미 사이드바에 추가하는 것 또한 처리가 가능할 정도이기 때문에 이 방법이 왜 필요한지 다소 이해하기 어려울수도 있을 것이다.  이를 확인하기 위하여 아래와 같은 단계를 거치면 된다.

1. "HTML/CSS 스킨" 메뉴의 HTML 편집

2.  HTML의 적당한 위치에 "<img src="./images/ohb6Dyw.jpg"/>"를 추가

3. 스킨을 저장하여 블로그로 이동

4. 화면에 보이는 위치의 이미지 URL을 확인

: 위의 화면을 보면 URL에는 "//s1.daumcdn.net/cfs.tistory/custom/blog/11/111868/skin/images/ohb6Dyw.jpg"가 뜬 것을 확인할 수 있으며, 위의 우클릭으로 확인한 URL과는 달리 다음의 CDN에서 이미지가 제공되고 있음을 알 수 있다. 이렇게 스킨 HTML 편집에서 사용되는 이미지와 실제 서비스되는 이미지 URL이 다르므로 혹시라도 HTML/CSS 편집 화면에서 URL을 가져오는 경우 나중에 간혹 스킨의 아이디가 변경되거나 무언가 티스토리 내부 정책이 바뀌면 서비스가 되지 않을수도 있으므로 참고하고 있으면 좋을 것이다. 간단하게 하고 싶다면 HTML/CSS 편집 화면에서 우클릭으로 한 URL을 가지고 각종 URL 동작을 할 수도 있으나, 100% 보장을 할 수 없기 때문에 추천은 하지 않는 것이다.

2. 외부 이미지 호스팅 사이트에 업로드하여 사용

: 블로그에 제한된 이미지의 수/용량보다 더 많은 이미지를 넣고 싶거나, 이미지의 업로드가 제한된 인터넷 게시판에 이미지를 이용해서 글을 작성하고 싶을 때 많이 사용하는 방법이다. 외부의 이미지 호스팅 사이트를 이용해야 하는 번거로움이 가장 크고, 혹시 모를 외부 이미지 호스팅 업체의 서비스 종료나 서비스 장애가 있는 경우 블로그의 이미지가 보이지 않는 영향을 미칠수도 있는 리스크가 조금 있다. 하지만 URL을 획득하는 것과 이미지 호스팅을 위한 서비스가 주된 사이트를 사용하면 이미지의 관리가 블로그의 HTML/CSS 파일 관리를 하는 것보다 훨씬 유동적으로 관리가 가능하기 때문에 이미지의 관리상으로는 더욱 편리할 것이다. 추가적으로 혹시 티스토리 블로그 뿐만 아니라 별도의 외부 홈페이지에서 같은 이미지를 사용하고 싶은 경우 티스토리에 업로드된 이미지 제공은 외부로 가져가는 경우 막히는 경우가 많고 이러한 이미지 호스팅을 이용하게 되면 어디서든 이용할 수 있는 장점이 있다.

: 대표적인 이미지 호스팅 사이트를 하나 소개하자면 imgur.com이 있다. 사이트에 로그인하고나서 상단에 보면 파란색 버튼으로 바로 이미지를 업로드할 수 있게 되어있다. 

: 여기의 "Upload images"를 클릭하게 되면 각종 방법으로 이미지를 업로드할 수 있게 해주고 있다. 컴퓨터의 파일을 직접 찾는 방법, 이미지를 드래그앤드롭으로 바로 업로드하는 방법, 이미지의 URL을 입력하는 방법과 직접 복사/붙여넣기를 하는 방법이 있다. 이러한 방법중 하나를 결정해서 이미지를 업로드하면 아래와 같이 이미지가 보이며, "Start Upload"를 누르면 업로드가 된다.

: 업로드가 완료되면 해당 이미지에 대한 정보를 나타내는 페이지가 나오며, 여기서 "Direct Link"의 URL을 복사해서 보관하고 있으면 된다.

: 위의 경우에는 URL이 "http://i.imgur.com/iBcX9kA.jpg"임을 확인할 수 있다. 나중에 사이드바 이미지 배너의 URL은 이 URL을 사용하면 된다.

3. 블로그 다른 공지사항 글 등에 이미지를 넣고 해당 이미지 링크를 사용

: 이 경우에는 티스토리 내부에 이미지를 두면서 해당 이미지를 다른 글에서 먼저 넣고 저장하여 가져오는 방법으로 별도로 글을 하나 써야 하기 때문에 조금은 번거로울수도 있다. 그런데 HTML/CSS 편집이 어려우면 그냥 속편하게 이러한 방법을 해도 된다는 것을 느낄 수 있을 것이다. 현재 이 글에 이미지를 하나 아래와 같이 넣고 수정을 통해서 사이드바 이미지 배너를 넣어보도록 할 것이다.

<http://techslides.com/web-performance-resources-and-optimization-tools의 이미지>

: 위와 같이 글에 이미지를 넣고, 이미지의 URL을 브라우져 우클릭으로 확인해보면 아래와 같이 나오고, 이미지의 URL이 "https://t1.daumcdn.net/cfile/tistory/2509873A5751895015"와 같이 나오는 것을 확인할 수 있다.

: 이렇게 사용하는 것도 아주 큰 문제는 없지만, 1번과 비슷한 티스토리의 내부 이미지 관리 정책이 문제가 될 수 있지만, 1번보다는 리스크가 확실히 적고, 외부에서 이미지를 사용하지 못한다는 점이 있으므로 자기의 취향에 맞게 잘 선택하면 될 것이다.

* 사이드바 이미지 배너 넣기

: 본인의 상황과 취향에 맞게 이미지의 업로드가 완료 되었으면, 이제 사이드바 이미지 배너를 넣는 것을 진행하면 된다. 사이드바에 이미지 배너를 넣는 방법은 여러 가지가 있을 수 있는데 그 중에서 가장 대표적인 두 가지를 이야기한다면, 아래와 같다

1. 사이드바 태그 입력기를 편집하여 배너 넣기

2. 스킨을 편집하여 배너 넣기

: 각각의 방법은 또 장단점이 있을 수 있는데, 일반적인 프로그래밍을 모르는 사람이 접하기에는 그냥 태그 입력기가 편할수도 있고, 개발자라면 스킨 편집을 한번 해보는 것도 나쁘지는 않을 것이다. 그리고 스킨을 보관함에 넣고 계속 사용하고 싶다면 스킨을 편집해서 사용하는 것이 좋은 방법이 될 수 있을 것이다. 그러면 각 방법은 아래와 같이 하면 된다.

1. 사이드바 태그 입력기를 편집하여 배너 넣기

: 사이드바 모듈은 관리 페이지의 사이드바 모듈로 새로운 모듈을 추가해서 배너를 넣고 싶은 위치에 쉽게 위치 시킬 수 있는 방법으로, 사이드바 이미지 배너를 넣기 위해서는 "사이드바 태그 입력기" 플러그인을 활성화 시켜줘야 한다. 아래와 같이 관리 페이지로 가서 먼저 플러그인을 활성화 시킨 뒤 순서대로 진행하면 된다. 

1. 태그 입력기 플러그인 활성화

: 관리 페이지 > 플러그인 설정 > 관리 및 통계 > 태그 입력기 선택 > 사용(저장)

2. 사이드바에  태그 입력기 추가

: 사이드바의 원하는 위치에 태그 입력기를 넣고, 편집 버튼을 눌러서 원하는 HTML을 넣으면 된다. 이 경우에는 이미지 배너의 가장 간단한 소스인 <a> 태그와 <img> 태그만 넣도록 하고 있다.

: 태그 입력기 모듈의 편집 버튼을 누르면 아래와 같이 태그를 입력할 수 있는 칸이 나오고, "사용자 모듈에 저장"를 체크하면 입력한 이름으로 모듈 보관함에 저장이 되므로 다시 사용하거나 여러 위치에 중복해서 넣거나 하는 것도 가능하다.

: 입력한 태그는 아래와 같이 넣었다. 필요하면 복사/붙여넣기를 해서 넣으면 된다.

<a href="http://unikys.tistory.com/">
    <img src="http://i.imgur.com/iBcX9kA.jpg"/>
</a>

: 이와 같이 사용자 모듈을 넣게 되면 아래와 같이 오른쪽 상단에 이미지 배너가 추가된 것을 확인할 수 있다. 이 이미지 배너의 위치를 조절하고 싶다면 사이드바 설정 메뉴에서 드래그앤드롭으로 원하는 위치에 끌어다 놓으면 된다.

: 이 방법은 태그 입력기를 통해서 조금 더 자유스럽게 다양한 기능들을 넣을 수 있는 방법으로 쉽고 간단하게 적용이 가능하다.

2. 스킨을 편집하여 배너 넣기

: 위의 태그 입력기를 이용하는 방법의 가장 큰 단점은 무엇보다도 편집이 위의 작은 창 안에서 해야 한다는 점이 가장 불편할 수 있을 것이다. 따라서 위의 방법보다는 이 방법이 조금 더 편할 수 있을 것이다. 게다가 스킨 자체에 사이드바 이미지 배너를 모듈로 추가하는 것이기 때문에 스킨 보관함에 넣어서 사용할 수 있게 되는 것도 좋은 점이다. 사이드바를 추가하기 위해서는 HTML/CSS 스킨 편집에 들어가서 <s_sidebar>를 찾아야 한다.

1. 관리페이지 > HTML/CSS 스킨 편집

: 여기서 사이드바에 모듈을 추가하기 위해서는 <s_sidebar>를 찾은 다음 다른 모듈의 위나 아래에 적당하게 위치 시키면 된다. 

: 위와 같이 <s_sidebar> 의 안에 아래의 소스를 넣었다.

<s_sidebar_element>
    <!-- 이미지 배너 -->
    <div id="imageBanner" class="widget">
        <a href="http://unikys.tistory.com/">
            <img src="./images/ohb6Dyw.jpg"/>
        </a>
    </div>
</s_sidebar_element>

: 각 부분에 대해서 설명하자면 아래와 같다.

- <s_sidebar_element> : 사이드바 모듈로 등록(티스토리 태그)

- <!-- 이미지 배너 --> : 모듈의 이름을 여기에 설정

- <div id="imageBanner" class="widget"> : 사이드바 모듈의 wrapper

- <a>~</a> : 사이드바 모듈로 넣을 태그

- <img src="./images/ohb6Dyw.jpg" /> : 혹시 이미지 업로드를 HTML/CSS 편집의 파일로 업로드 했으면 ./로 직접 URL 설정이 가능하며, 외부 이미지 호스팅인 경우에는 전체 URL을 넣어야 한다.

: 위와 같이 넣고 저장하면 사이드바 관리 메뉴에서 모듈의 위치도 조정할 수 있고, 블로그에도 정상적으로 보이게 되는 것을 확인할 수 있다. 위와 같이 스킨을 편집해서 사용하는 경우에는 이미지 업로드 방식은 1번 방식, HTML/CSS 편집의 파일 관리를 통해서 업로드하는 것이 일관성이 있으므로 좋고, "./images/ohb6Dyw.jpg"와 같이 URL을 별도로 알아내지 않아도 사용 가능하므로 편리하게 사용할 수 있을 것이다.

: 그런데 혹시 HTML을 잘 모르거나 티스토리 스킨의 동작 방식을 잘 모른다면 스킨을 편집하다가 잘못하면 전체 블로그가 이상해질 수도 있으므로 조심해서 편집하는 것이 좋을 것이다. 이렇게도 사이드바 이미지 배너를 넣고 결과를 보면 앞서 추가하였던 이미지 배너에 추가해서 아래와 같이 두개의 사이드바 이미지가 들어가게 된 것을 확인할 수 있다. 이미지 배너의 위치를 조절하고 싶으면 관리 페이지의 사이드바 메뉴에서 원하는 위치를 선택해서 넣으면 된다.

: 참고로 이렇게 고정되어있는 사이드바가 아닌 떠다니는 사이드바를 원하는 경우에는 별도로 자바스크립트를 이용해서 추가하면 될 것이다.

* 정리

: 대략적으로 각 이미지를 업로드하는 방법과 사이드바를 넣는 방법을 구분해서 상황 별로 사용하면 좋을 것 같은 경우는 아래와 같이 생각한다. 그런데 외부에서도 같은 이미지를 사용하는 경우 이외에는 어느 방법을 사용하든 크게 상관은 없을 것이다.

- HTML에 대해서 잘 알고 있고 스킨 편집을 잘 할 수 있는 경우: HTML/CSS 편집의 파일 관리로 이미지 업로드 후 스킨 편집

- HTML에 대해서 전혀 모르고 어려운 경우: 외부 이미지 호스팅으로 이미지 업로드 후 태그 입력기

- 공지사항에도 같은 이미지를 사용하고자 하는 경우: 공지사항에 이미지 업로드 후 해당 URL을 태그 입력기로 넣기

- 동적으로 사이드바 이미지를 자주 바꾸는 경우: 외부 이미지 호스팅과 태그 입력기로 넣기

- 티스토리 이외의 외부에서도 같은 사이드바 이미지를 사용하고자하는 경우: 외부 이미지 호스팅과 태그 입력기로 넣기

- 현재 상황을 잘 모르겠다: 외부 이미지 호스팅과 태그 입력기로 넣기

: 일반적인 상황에서는 그냥 외부 이미지 호스팅과 태그 입력기로 넣는 것을 추천하며, HTML에 대해서 잘 아는 경우 조금 도전적으로 블로그를 꾸며보고 싶을 때에는 스킨 편집을 직접하는 것이 재미있을 것이라 생각한다. 하지만 스킨을 편집하다가 블로그가 망가지는 경우에 대해서도 항상 염두해두고 스킨 보관함에 백업해두는 것을 잊지 말자.

* 다음편

- 테터데스크와 반응형 스킨의 충돌 해결

- 사이드바, 하단바의 위젯 변경/수정

- 글 템플릿 수정(소셜 플러그인 수정)

- 성능 최적화