티스토리에서 워드프레스 이동후기


얼마전 티스토리 블로그에서 워드프레스로 이동하게 되었다. 사실 텀블러로 이동하려고 했는데, 워드프레스의 막강한 플러그인 기능과 설치형 블로그의 매력에 빠져서 결국 워드프레스로 이동하게 되었다.

 

워드프레스의 장점은 설치형 블로그에 아주 다양한 플러그인과 예쁜 스킨을 뽑을 수 있겠다. 나같은 개발자들이나 설치형 블로그 쓰지 일반인들은 못쓴다는 생각을 과감하게 버려야 한다. 정말 클릭 한번이면 윈도우 프로그램 설치 하는 수준으로 정말 쉽다. 그리고 플러그인도 스마트폰에 앱 설치 하듯이 정말 간편하다.

 

티스토리도 그나마 오픈된 형태이지만 html이나 js정도만 쓸 수 있어 항상 아쉬웠다. 워드프레스는 내가 좀 부족하다 싶으면 바로바로 php를 수정을 할 수 있다. 포털에서 운영하다보니 용량이나 공간제안은 전혀 없는 반면에 워드프레스는 웹호스팅을 받아야 한다. 많이 접속하면 트레픽도 늘려야 되고 돈도 많이 들어 간다.

 

일단, 워드프레스 이동은 정말 잘한 것 같다. 하지만 기존에 사람들이 블로그 URL링크를 다른곳에 퍼다 나른것을 마이그레이션 해야하는데 아쉽게 그러지 못했다. 티스토리에서 워드프레스로 자료를 이동하는 것은 플러그인 하나로 쉽게 할 수 있지만 URL을 만드는 로직이 좀 다르다.

 

티스토리의 경우 글번호와 글제목으로 링크가 만들어 지는데, 나는 이때까지 글번호를 설정하였고 이렇게 설정되어 있던 링크를 공유하고 있었다. 워드프레스도 글번호 URL을 지원하는데 티스토리와의 방식이 좀 다르다.

 

정리 하자면

  • 티스토리를 지금 쓰고 있는 경우 글번호 보다는 제목으로 링크를 만드는 것이 나중에 공유된 링크를 지원가능 하다.
  • 워드프레스는 초보자도 쉽게 쓸수있는건 분명하지만 웹호스팅을 해야하기때문에 돈이 든다.
  • 워드프레스의 플러그인과 스킨 기능이 막강하다.

 

팁!

나처럼 티스토리에서 워드프레스도 이동했는데 링크가 숫자로 공유되고 있었더라면 공유된 링크를 어떻게 유효하도록 할 것인가에 대한 해결책은 다음과 같이 해결 했다.

인덱스 페이지(첫페이지) 로딩시 URL/글번호 의 형태가 들어오면 기존의 글로 넘겨주고 아닌 경우 그냥 새롭게 만든 페이지를 띄우는 방식이다.

이렇게라도 해결 해서 다행이다. 참고로 공유된 링크로 들어 오는 사람들이 블로그 방문객의 80%를 차지 하고 있다는 사실을 구글 애널리틱스 분석을 통해 알았다.

 

워드프레스는 좋지만 기존의 글들에 대한 정리만 확실 하다면 추천!

 




티스토리 초대장받은 블로그 사용율

티스토리는 초대장을 통해서 가입이 이루어진다. 초대장이 없으면 가입이 불가능하다. 초대장은 블로그의 활용내역에 따라 한달에 한번씩 지급된다.

2013년 부터 블로그를 많이 하면서 초대장이 생겨 기회가 될때마다 초대를 해주었다. 


지금까지 초대해준 사람이 약 50명 정도 되는것 같다. 초대해준 사람들의 블로그를 한번씩 들어 가봤더니 다들 만들기만 하고 글을 쓰지 않았다는 슬픈 현실..

사람들의 소유욕인걸까 싶기도 하고..

거의 반 정도는 만들기만 하고 사용하지 않았고, 또 반 정도는 한개 정도씩만 포스팅 하였다. 5%정도가 현재도 꾸준히 사용하고 있었다. 

초대할때 댓글을 보고 잘 할것 같은 사람들만 뽑아서 초대 해줬는데도 이런 결과라니.. 

어떨 수 없는 부분이고 중요한건 블로그가 차세대 SNS가 될 것은 틀림없는 사실이다. 기사를보니 페이스북 사용자들이 천천히 빠져나가고 있다던데, 꾸준히 블로그를 하는 사람들은 지금도 그렇지만 나중에 대박나는 날이 올 것이다. 

[다음뷰]꿈을 현실로 만드는 블로그!

꿈을 현실로 만드는 블로그!

내가 해야 될것을 일깨워준 블로그

2007년 블로그를 개설했다. 그 당시만 해도 블로그의 영향력이나 블로그를 통해 뭔가를 할 수 있다는 생각은 없었다. 누구나 그렇듯 블로그 개설만 하고 내버려 두었다. 2009년 나는 스마트폰앱을 개발을 했다. 앱을 배포할 장소와 사용자와의 커뮤니케이션을 위한 소통의 도구가 필요했다. 그것이 바로 현재 블로그이다. 나는 앱을 개발해서 블로그를 통해 공개했으며 설치파일도 같이 배포했다. 자연스럽게 이용자들과 댓글을 통해 소통 할 수 있었으며 이런 소통을 바탕으로 좀더 멋진 앱을 개발 할 수 있는 큰 보탬이 되었으며, 내가 앱을 만들어 가기위한 충분한 이유가 되었다. 

나의 실력을 높여준 블로그

내가 만든앱을 사용해보고 그것을 댓글을 통해 표현 한다는것. 나에게는 정말 재미있는 일이 아닐 수 없었다. 나는 이런 재미에 앱을 점점 업데이트 나가게 되었으며, 그에 따라 앱의 품질도 높아졌다고 생각된다.  당시 앱을 유료화를 통해 수익을 받을 수 있었지만, 돈보다는 사용자들이 편안하게 즐겁게 재미있게 쓰게하고 싶다는 나만의 철학이 생겼으며, 지금도 개발자로 일하고 있지만 이런 생각은 전혀 변함이 없다.

나의 가치를 높여준 블로그

이렇게 점점 앱이 유명해지면서 방송/언론사 인터뷰요청이 들어 왔다. 신문부터 시작해서 티비방송에도 출연하게 되었다. 내가 하고자 하는것을 블로그에 남겼으며 이를 바탕으로 이용자들과 소통으로 인해 이런 일들이 얼마나 가치 있는것인지 일깨워주었다. 

나의 가치와 정보공유를 위한 블로그

소프트웨어 개발자라는 직업. 정말 어떠한 직업과는 다르다. 꿈을 현실로 만드는 직업이다. 이러한 꿈들을 현실로 만들기 위해 나의 정보를 개발자들에게 공유하여 이런 개발자들이 또다른 창의적인 무언가를 만들기위해 보탬이 되고 싶었다. 내가 격어 왔던 시행착오나 나만의 노하우를 하나하나 블로그에 쓰기 시작했다. 이게 2012년 부터이다.  

블로그를 통해 좀 더 소통하자.

2013년 올해 초 블로그를 본격적으로 해봐야 겠다는 생각으로 지금 현재 까지 항상 블로그를 생각하면서 달려왔다. 이렇게 나의 글을 통해 다른 개발자들과 소통하고 가르켜주고 배울수 있다는 점이 너무 좋다.  소프트웨어 개발자들에만 극한되는 블로그 좀 아쉬운 부분이 있겠지만, 이런 개발자 분들이 내 블로그의 정보를 바탕으로 뭔가를 만들어 낼것이며 그것을 통해 사용자들이 사용한다는 것만으로도 나는 모든 이용자들과 소통한다고 생각된다.

올해 블로그 결산(2013년 11월 26일 기준)

포스팅 글: 140개(3D1P)

방문자 수: 239,987명 

누적 방문수: 411,171명 (2007 ~ )

포스팅은 3일에 1개정도 수준으로 글을 작성 했으며, 방문자수는 전년 대비 120% 증가하였다. 또한 구글 애드센스를 통한 작은 수익금도 마련할 수 있었다. 무었보다 나의 글을 통해 다양한 사람과 소통 할 수 있었다는 점 도움될 수 있었다는것과 글을 쓰는 연습을 해볼 수 있었다는 점에 매우 만족한다. 

포스팅 글 공유 횟수

가장 인기 있었던 글 TOP3

이 글을 쓰기 몇일전 어느 출판사에서 연락이 왔다. 개발관련 자료를 보고 책을 한번 출판하는게 어떻겠냐고.. 평소에 책을 쓰고 싶다고 많이 생각 해왔던 터라 너무 반가웠다. 이 모든것이 블로그를 통해 이루어진 성과라고 생각하고 내가 꿈꿔왔던것을 하나하나 실현 해나가는것 같다. 블로그를 통해서 많은 것을 이루었으며, 내 인생을 뒤돌아 보고 앞으로 나아갈 발향을 정확하게 지적해준것이 블로그라고 생각된다.

2014년 블로그 운영계획

2013년 아쉬운 운영방법을 좀 더 체계적이고 안드로이드 앱 개발에 있어 다양한 주제와 개발자 뿐만아니라 서비스를 만들어가는 사람들이 함께 소통 할 수 있는 소통의 장으로 만들어갈 계획이다. 그러기위해서는 좀 더 수준 높은 컨텐츠를 바탕으로 여러 페이스북이나 트위터같은 SNS를 통해 글을 송고할 계획이다. 그리고 기회가 된다면 전문분야가아닌 일반인들도 쉽게 이해되는 개발관련글을 작성하고 싶다. 

티스토리 블로그 좋은점

다음 뷰를 통해 글을 쉽게 송고하며, 사용자 스킨지원으로 다양한 블로그를 꾸밀 수 있는 것이 가장 매력적이다. 얼마전 모바일 웹페이지도 설정 할 수 있는 기능으로 인해, 모바일에서도 좀더 자유롭게 되어 무척이나 좋았다. 특히 반응형웹으로 바꾼 후 이 설정기능으로 인해 좀 더 빛을 바랠수 있었다. 이런 오픈된 스킨지원으로 인해 모든것이 가능하기때문에 사실상 바쁜점을 없는것 같다. 

2014년! 블로그로 인해 나의 어떤꿈들이 또 현실로 이루어질까 설레인다. 

티스토리 블로거를 위한 AdSense 정책 정리

금일(11/12) 구글 애드센스팀에서 티스토리 블로거를 위한 AdSense 정책에 대해서 행아웃을 통해 세션을 발표 했습니다. 주요내용을 정리 했으니 구글 애드센스를 사용하시는 분들이라면 한번쯤 알아 두시면 좋을것 같습니다.

3개월간 적발된 정책위반 사례 5가지

1. 페이지 상단을 채운 광고

페이지 상단을 광고로 채우면, 본문 콘텐츠를 하단으로 밀어내어 사용자들이 광고를 콘텐츠로 오인할 수 있으며, 사용자 경험에도 좋지 않다.

2. 모바일 사이트 상단을 채운 광고

300×250이나 250×250 광고를 모바일 사이트 상단에 게재하는 것은 본문 콘텐츠를 하단으로 밀어 내며, 사용자 경험에도 좋지 않기 때문에 허용되지 않는다.

3. 큰 박스 테투리를 친 광고 

광고 주변으로 큰 박스 테두리를 치는 경우, 광고가 콘텐츠와 구분되어 보이지만 부자연스러운 사용자 시선을 끌 뿐만 아니라, 페이지 상단에 위치한 경우 콘텐츠를 하단으로 밀어내기 때문에 허용하지 않는다.

4. 광고 형식과 유사한 콘텐츠 옆에 게재

콘텐츠를 광고 형식과 유사하게 만들어 가까이 배치하는 것은 허용되지 않는다.

5. 광고 상단에 가까이 배치한 제목과 라벨

광고 상단에 광고와 관련없는 제목이나 라벨을 배치하는 것은 사용자가 광고를 오해하게 만들 수 있기 때문에 허용되지 않는다.

주요 Q/A

Q. 다수의 블로그로 애드센스계정을 나눠 쓸수 있는가?
: 같은 카테고리내 목적이 다르면 괜찮다. 
Q. 콘텐츠의 저작권
: 한글 자막, 음악등 2차 저작물로써 저작권이 인정됨으로 저작권 위반의 글이다.
Q. 사진의 노출 정도
: 가슴 엉덩이등 클로즈업등은 안된다. 가족 직장동료에게 공유가능한 사진.
Q. 애드센스 계정 하나로 몇개 사이트를 사용할 수 있나?
: 같거나 중복사이트를 제외하면 갯수는 상관없다.
Q. 잘못 클릭할때 어떤 제재가 있나?
: 너무 우려하지 말고 실수로 클릭할수 있다는 것을 감안하고 있다. 애널리틱스의 게시자 툴바를 활용해서 무효클릭을 방지 할 수 있다. 
Q. 테두리에 색상을 넣어도 되나?
: 된다. 광고에 주목도를 넓히기 위해서 사용하는것은 정책에 위반된다.

이외에 테투리관련 부분과 상단 250사이즈 2개배치에 대한 많은 궁금증을 보이셨는데 다음과 같이 정리 하면 될듯 합니다. 

  • 테두리 자체가 정책위반이 되는 것은 아니다. 테두리로 인해 불필요한 시선을 끌지만 않으면 된다.

  • 상단 250 두개를 배치 한다는건 정책 위반은 아니나, 첫 화면에 콘텐츠는 보이지 않고 광고만 보이면 정책이 위반 된다. 각자 레이아웃에 맞게 좋은 방법을 찾아 가면 좋을듯 하다. 

나눔고딕 웹폰트 무료 호스팅 해주는 곳

블로그를 꾸미다보면 폰트도 자유자제로 바꾸고 싶은 욕심이 들것이다. 폰트도 저작권이 있어서 아무거나 넣기도 힘들다. 네이버에서 나눔서체를 무료로 배포 하고 있기때문에 나눔고딕을 폰트로 쓰면 좋은데, 초보자들에게는 쉽지 않다.

보통 브라우저별로 웹폰트 확장자가 다르기 때문에 브라우저별로 폰트 파일로 만들어서 업로드 한다음 CSS에서 폰트 로드되게 해야 한다. 하지만 이런 나눔고딕 폰트를 무료로 호스팅 해주는 Mobilis가 있기에 아래와 같이 쉽게 구현 할 수 있다.  직접 폰트파일을 업로드 하지 않아도 된다.

그리고 Font-Face 라는 곳을 추천한다. 이곳에도 쉽게 사용할 수 있도록 코드뿐만 아니라, 호스팅도 지원한다.

웹폰트는 사파리는 ttf, 크롬이나 파이어폭스는 woff라는 확장자를 가진다. 아래 코드는 IE를 제외한 브라우저는 무료로호스팅 하는 곳에서 웹폰트파일을 받아오고, IE는 직접 업로드 해서 불러온 것이다.

CSS의 가장 윗부분에 붙여넣으면 적용 된다.

/* 사파리 */
@font-face { 
    font-family:'NanumGothicWeb'; 
    font-style:normal; 
    font-weight:400; 
    src: url('http://api.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.ttf') format('truetype');
}

/* 크롬, 파이어폭스 */
@font-face { 
    font-family:'NanumGothicWeb'; 
    font-style:normal; 
    font-weight:400; 
    src: url('http://webfonts-cdn.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.woff') format('woff');
}

/* IE */
@font-face {
    font-family:나눔고딕, 
    MalgunGothic; 
    src:local('나눔고딕'), url(./images/NanumGothic.eot) format('truetype');
};



@charset "utf-8";

*{
        font-family: 'NanumGothicWeb', 나눔고딕;
}

body {
        font-family: 'NanumGothic', 나눔고딕;
}

div {
        font-family: 'NanumGothic', 나눔고딕;
}

부트스트랩기반의 마크쿼리를 적용한 티스토리

반응형 웹을 오픈소스로 공개한 부트스트랩에 대한 많은 관심을 가지고 있었다. jQuery등 내가 모르는 부분이 많아서 티스토리에 적용 해볼까 하다가 여러번 포기 한적이 있었다. 그와중에 또 한번 적용을 시도 해볼려다가 우연히 마크쿼리를 찾게 되었다. 

부트스트랩 기반으로 티스토리, 워드프레스등 다양한 블로그에 스킨을 만들어서 오픈베타를 공개했다. 

마크쿼리 공식홈페이지: http://markquery.github.io

한국어 가이드: http://markquery.kr

스킨 다운로드 GitHub: https://github.com/markquery/tistory-spidersweb

반응형웹으로 바꾸다!

GitHub에서 파일을 다운받은뒤 티스토리에 새로운스킨 등록에서 파일을 등록을 해주면 쉽게 적용이 된다. 

나는 이전 컨텐츠에 코드를 쉽게 보기위해 SyntaxHighlighter를 써왔기 때문에 SyntaxHighlighter를 설치하고, 나눔고딕으로 폰트를 바꿨다. 

반응형 웹인 부트스트랩 기반이기 때문에 브라우저, 디바이스에서 최적화된 UI/UX를 제공 한다.

 – 데스크탑에서 브라우저

– iPad Mini


– 갤럭시 S3

티스토리의 경우 모바일 페이지를 따로 제공을 해주나 마크쿼리 스킨을 이용하게되면 모바일 페이지가 무의미 해진다. 브라우저의 창이나 디바이스의 해상도에 따라 최적의 UI/UX를 제공하기 때문이다. 이런것을 반응형 웹이라고 부른다. 

아직 오픈베타이기 때문에 몇몇 문제점이 나타난다. 물론 부트스크랩이나 마크쿼리 스킨의 문제점으로 보기는 힘들고, 티스토리와의 연동에 문제점들이다. 

1. 반응형 웹은 이미지또한 브라우저의 크기에 따라 줄었다 커졌다한다. 이렇게 반응을 하기위해 이미지 리소스삽입시 <img src=”url”> 태그를 써야되나 티스토리의 글쓰기시 이미지 삽입되는 부분이 태그가 아닌 치환자(?)로 되어 있기 때문에 이미지의 크기가 고정되어 버린다. 이것을 해결 하기위해 모두 img 테그로 변환해야 한다.(지금 이글은 모두 img태그로 변형 했다.) 기존에 이미 작성 해놓은 컨텐츠들을 마이그레이션 해줘야 한다.

2. 메인을 꾸미기위한 홈에디션을 사용시 위의 이미지와 같은 문제점이 발생한다. 홈에디션에서 사용자편집에서 html로 작성을 할 수있어서 이부분은 해결 될 수는 있지만 초보자가 사용하기에는 다소 힘들 수도 있다. 또한 홈에디션 사용시 우측 메뉴들의 구성이 깨지는 문제점이 발생한다.

3. 개발자 블로그이기에 SyntaxHighlighter를 사용이 빈번히 발생하는데 이또한 크기가 고정으로 되는 문제점이 발생한다. 

이런 문제점이 있는것은 당연한것이며, 이런것을 제외하고는 모든것에 만족스럽고 훌륭하다. 그리고 마크쿼리가 추구하는 누구나 쉽게 활용할수 있고 자유롭게 접근 할수 있다는 점이 목표를 이룬것 같다고 생각 한다. 웹디자이너, 개발자 없이도 더욱 멋지고 경쟁력 있는 콘텐츠를 제작가능할 것 같다.

Facebook Social Plugins을 이용한 블로그(티스토리)에 댓글 기능 추가

요즘 SNS중에 페이스북을 많이 사용하는데, 페이스북에는 여러가지 컨텐츠를 포괄하기 위해 소셜 플러그인을 제공하고 있다.

특정 블로그나 웹페이지 사이트에서 웹을 공유하기, 댓글, 좋아요등을 사용 할 수 있는 플러그인이다.

   

그 중에 가장 많이 활용 할수 있는건 바로 댓글 기능이다.

댓글기능에 플러그인을 추가 하는 방법을 하나씩 살펴 보자.

먼저 아래의 페이스북 개발자 사이트로 들어가서 색상이나, 사이즈, 포스팅 갯수등 설정 후  Get Code 클릭하면 끝이다.  

http://developers.facebook.com/docs/reference/plugins/comments/

그러면 아래 처럼 코드들이 나온다. HTML5나 아이프레임등 형식으로 넣을 수 있다.

HTML5로 예를 들어 넣어 보겠다.

이걸 내 블로그나 홈페이지에 넣으면 끝이지만, 

아래 data-href는 사이트에서 고정된 주소가 아니라 페이지에 맞는 주소로 변해야 한다.

예를 들어 티스토리 블로그의 경우 치환자라고 해서 블로그URL 뒤에 상세페이지 URL을 치환 해준다.

티스토리 블로그의 URL이 http://www.kmshack.kr이라고 치면 data-href에는 “http://www.kmshack.kr[ ##article_rep_link## ]” 이렇게 주면 페이지 별로 URL이 바뀐다.

* 치환자가 치환되어 [# #] 사이에 공백을 넣어 두었으니 실제 사용시 붙이도록 하자.



자 이제 댓글 기능이 필요한 페이지에 넣으면 된다.

이런 댓글 뿐만 아니라 회원가입, 좋아요, 공유하기 등 많은 소셜 플러그인이 있으니 필요하다면 사용해보자.

http://developers.facebook.com/docs/plugins/