요즘 저희 지역의 시민단체들 중에 홈페이지를 없애고 블로그를 만드는 단체들이 늘어나고 있습니다. 외부업체에 웹호스팅을 맡겨놓은 홈페이지를 관리하는 것도 어렵고, 크고 작은 수정작업을 할 때마다 번거롭게 관리업체의 도움을 받아야 하기 때문입니다.
아울러 홈페이지를 유지하는데도 시민단체 입장에서는 적지 않은 비용이 들어가 것도 중요한 이유입니다. 최근 티스토리 블로그의 <메뉴 설정> 기능을 활용하면 홈페이지 못지 않게 화려한(?) 첫 화면을 구성할 수 있습니다.
아울러 뉴스 기능을 활용하는 것은 기존 홈페이지 보다 훨씬 뛰어나고 원래 홈페이지에 사용하던 독립도메인을 그대로 사용할 수 있을 뿐만 아니라 사진이나 문서화일을 정리하여 보관하는 것도 그다지 불편하지 않습니다.
티스토리 블로그로 홈페이지 대신할 때, 배너 광고 만드는 법
블로그로 홈페이지를 만들면서 배너광고 다는 법을 쉽게 할 수 있는 방법을 알려달라는 부탁을 받아 오늘은 블로그에 베너광고 다는법을 알려드립니다. 시민단체 블로그는 이런 저런 이슈가 발생할 때마다 베너광고를 통해 회원들이나 시민들에게 홍보를 하기도 하고, 어떤 때는 온라인 서명운동을 받는다던지 하는 적극적인 활동을 할 때가 있습니다.
잘 아시는 분들은 이미 아시겠지만, 티스토리 블로그에는 배너광고를 쉽게 할 수 있도록 되어 있습니다. 잘 아시는 분들은 읽으실 필요가 없구요. 자 그럼 지금부터 티스토리 블로그에 배너광고 만드는 법을 알려드립니다.
현재 제 블로그에는 '활동가, 시민교육을 디자인하다'라는 배너 광고가 달려있습니다. 민주화운동 기념사업회에서 진행하는 시민교육활동가 아카데미 교육과정을 홍보하는 광고입니다. 이건 돈을 받고 하는 광고는 아니구요. 일종의 공익광고 차원에서 제가 임의로 홍보를 해주고 있습니다.
그럼, 이런 공익광고를 만드는 법을 지금부터 알려드리겠습니다. 위의 사진을 보시면 '마산YMCA' 홈페이지로 연결되는 배너광고가 있습니다. 지금부터 저 배너광고를 티스토리에 만드는 법을 안내합니다.
먼저 티스토리에서 배너를 만들려고 하면 관리자 메뉴에서 '배너출력'이라는 플러그인을 활성화시켜야 합니다. 관리자메뉴 - 플러그인으로 들어가셔서 '배너출력'이라는 플러그인을 더블 클릭 하시면 위 사진과 같은 화면이 열립니다. 그럼 사용을 클릭하시고 저장하시면 배너기능을 사용할 수 있게 됩니다.
이미지 배너출력 만들기
'배너출력' 플러그인을 활성화시킨 후에 관리자 모드에서 스킨 - 사이드바 설정으로 들어가시면 <이미지 배너출력> <HTML 배너출력>이라는 메뉴가 새로 만들어진 것을 확인하실 수 있습니다.
오른쪽에 보이는 <민주화운동기념사헙회>라고 되어 있는 것은 제가 이미 만들어 놓은 배너 광고입니다. 우선 상대적으로 좀 더 쉬운 이미지 배너광고를 만들어 보겠습니다.
배너광고를 만들려면 왼쪽의 <이미지 배너출력>이라는 메뉴 위에 마우스를 올려놓고 드래그하여 오른쪽으로 옮겨오면 <이미지 배너출력 [편집]>이라는 메뉴가 만들어집니다.
편집을 누르면 위의 사진과 같은 팝업창이 하나 더 열립니다. 여기에 이름과 이미지 URL, 연결할URL을 알맞게 입력해주시면 됩니다.
이름 : 자신이 구분할 수 있도록 적당한 명침을 적어줍니다. 여기서는 일단 TEST라고 정했습니다.
이미지 URL : 사용하고자 하는 이미지가 인터넷상의 어떤 곳에 올라가 있어야 합니다. 흔히 서버가 있으면 서버에 이미지 파일을 올려놓으면 됩니다. 서버가 없는 경우에는 공짜로 사용할 수 있는 웹하드들이 있는데, 여기서는 유크라우드<Ucloud> 사용하는 것으로 설명하겠습니다. 아이폰에 가입하면 KT에서 공짜로 서비스를 해주는 인터넷상의 저장공간입니다.
연결할 URL : 연결할 URL은 이미지 파일을 클릭하였을 때 열리도록 하고 싶은 웹사이트 주소입니다. 여기서는 마산 YMCA 홈페이지가 열리도록 연결해보겠습니다.
지금 사용하려고 하는 이미지 파일은 바로 위에 있는 마산YMCA 배너 이미지 파일입니다. 원래 만들어져 있는 마산YMCA 홈페이지의 일부를 캡처하여 '포토스케이프'를 활용하여 편집하였습니다. 포토스케이프를 사용하면 어렵지 않게 이 정도 이미지 파일은 만들 수 있을 것입니다.
4대강 반대운동 등 시민단체가 이슈를 홍보하는 배너광고들의 경우는 홍보를 시작하는 단체에서 이미지 파일을 만들어 배포하는 경우가 많기 때문에 그런 경우에는 만들어진 이미지 파일을 그냥 활용하면 됩니다.
여기까지 따라해보시면 어려울 것이 하나도 없습니다. 다만, 배너광고를 만들어 달아보지 않은 분들에게는 [이미지 URL] 주소를 받아오는 것이 조금 어려운 일일수도 있습니다. 저도 전에는 저희 단체 홈페이지를 호스팅 해주는 회사 서버에 알ftp 프로그램을 이용해서 그림파일을 올리고 <이미지URL> 주소를 만드는 복잡한 작업을 하였답니다.
오늘은 공짜로 쓸 수 있는 웹 저장 공간인 <Ucloud>를 활용하여 쉽게 해보겠습니다. 우선, '다음' 검색창에서 <Ucloud>를 검색하여 해당 서비스 웹사이트로 가서 윈도우용 프로그램을 다운 받아 컴퓨터에 설치합니다. (아이폰이 있으면 아이폰 '어플'도 다운 받아서 설치하시면 아이폰에서 찍은 사진을 웹상에 간편하게 저장할 수 있습니다.)
그러면, 컴퓨터 바탕화면에 있던 msymca.jpg라는 배너광고 그림 파일이 <Ucloud>의 <모바일 포토>라는 웹 상의 저장 공간으로 복사가 됩니다. 이제 <Ucloud>의 <모바일 포토>라는 폴더 안에 있는 msymca.jpg 파일을 찾아서 <파일링크만들기>를 클릭하면, 위의 4번째 사진의 팝업창에 <이미지URL>에 붙여 넣을 수 있는 주소가 복사됩니다. 복사된 이미지 URL 주소를 4번째 사진처럼 붙여넣기를 하시기만 하면됩니다.
이번에는 보너스로 HTML 배너광고 만드는 '편법'(?)을 하나 추가로 알려드리겠습니다. 대체로 연대활동이나 전국적인 시민운동 캠페인의 경우에는 MTML 코드를 만들어서 E-MAIL로 보내주고 홈페이나 블로그에 붙여넣을 수 있도록 만들어줍니다.
HTML 배너출력
그럼, 우리단체가 HTML 배너광고를 만들어서 다른 단체의 홈페이지나 블로그를 통해 홍보하고 싶을 때는 어떻게 하면 좋을까요? 제가 직접해보니 티스토리에서는 어렵지 않게 HTML 배너광고를 만들 수 있었습니다.
먼저 위 사진에서 보시는 것처럼 <이미지 배너광고>를 마우스로 드래그한 후에 '음영'이 생기면 오른쪽 마우스를 눌러 복사하기(Ctrl+C)를 합니다.
여기서 새메일을 클릭하시면 메일을 작성하는 새로운 창이 열립니다. 이 곳에 복사한 그림파일을 붙여넣으면 위의 사진처럼 그림파일이 만들어집니다.
편집을 클릭하시면 아까 붙여 넣은 그림 파일이 나오구요. 원본을 클릭하시면 HTML 코드 파일이 보입니다. 이곳에서 HTML 코드를 복사하시면 되는데요. 제가 복사해서 붙여넣어보니 HEAD 아랫 부분의 내용만 복사해 넣어도 <HTML 배너광고>가 완벽하게 만들어지더군요.(참고로 저는 HTML 코드를 다룰줄 모릅니다. 그래서 이런 편법을 사용하는 거지요.)
저장하기를 누르시거나 '미리보기'를 해보시면 아래 사진처럼 <마산YMCA> 홈페이지로 연결되는 2개의 배너광고가 만들어진 것을 확인하실 수 있습니다.
하나는 먼저 만들었던 <이미지 배너출력>으로 만든 광고이고, 다른 하나는 나중에 만든 <HTML 배너출력>으로 만든 광고입니다.
티스토리 블로그 하시는 분들 <배너출력> 기능을 활용해서 원하는 사이트와 링크도 만드시고, 이미지 배너나 HTML 배너를 활용하여 필요한 캠페인이나 온라인 시민운동에도 활용하시기 바랍니다.
