스프링노트(Springnote)와 블로그(티스토리, 이글루스) 동시에 활용하기

kkamagui(까마귀, 한승훈) 2007. 11. 17. 23:13

2007. 11. 17. 23:13

스프링노트(Springnote)와 블로그(티스토리, 이글루스) 동시에 활용하기

원문 : http://kkamagui.springnote.com/pages/599820

들어가기 전에...

이 글은 kkamagui에 의해 작성된 글입니다.

마음껏 인용하시거나 사용하셔도 됩니다. 단 출처(http://kkamagui.tistory.com, http://kkamagui.springnote.com)는 밝혀 주십시오.

기타 사항은 kkakkunghehe at daum.net 이나 http://kkamagui.tistory.com으로 보내주시면 반영하겠습니다.

0.시작하면서...

"블로그(Blog)와 위키(Wiki) 중 어느 것이 더 좋은가?" 이 물음에 대해서 누가 더 좋다고 한마디로 결정하기 어렵다. 블로그는 매일매일 일어나는 일상에 대한 기록(log)를 남기는 목적에서 출발한 것이고, 위키는 여러사람이 지식을 공유하고 관리하기위한 목적에서 출발한 것이다. 블로그의 글이 "완성된 글"을 "올리는데" 목적이 있다면 위키의 글은 "계속해서 자라나는 글"을 "관리하는데" 목적이 있다고 할 수 있다.

서로 목적이 다르므로 목적에 맞게 골라쓰는 것이 제일 좋은 것이고 나도 티스토리(Tistory) 블로그와 스프링노트(Springnote)를 같이 사용하고 있다. 스프링노트는 위키기반의 시스템으로 개발이나 스터디를 정리하는 목적으로 사용하고 있고 티스토리는 일상의 신변잡기나 간단한 이슈들, 그리고 스프링노트의 글을 외부로 "공개"하는 용도로 사용하고 있다. 다행히도 스프링노트에는 작성된 글을 블로그로 보내주는 기능이 있으니 쉽게 블로그(티스토리, 이글루스 등등)로 보낼 수 있다.

지금부터 스프링노트와 블로그를 동시에 활용하는 방법을 알아보자. 블로그는 내가 티스토리를 쓰고 있는 관계로, 티스토리를 위주로 설명할 것이다. 이글루스나 네이버 블로그도 조금만 수정하면 되므로 끝까지 읽어본 뒤 적용해 보자.

1.티스토리에 Blog API 활성화하기

스프링노트에서 티스토리로 그을 보내기위해서는 Blog API를 활성화해야 한다. Blog API 관련 설정은 관리 모드에서 "환경설정" 탭의 "기타설정" 에서 찾을 수 있다. 페이지의 가장 아래로 내려가면 Blog API 관련 설정을 볼 수 있다.

스프링노트3.PNG

<환경설정 - 기타설정 화면>

스프링노트5.PNG

<Blog API 관련 설정>

아래 화면에서 "BlogAPI를 사용합니다" 를 체크한 후에 아래의 정보를 추후 스프링노트에 설정하면 된다.

2.스프링노트에 블로그 등록하기

스프링노트에 블로그를 등록하기위해서는 관리화면으로 이동해야 한다. 관리화면은 우측 하단의 "설정" 버튼을 클릭하면 이동할 수 있다.

스프링노트1(1).PNG

<관리 화면으로 이동>

관리화면에서 "블로그 설정" 탭으로 이동하면 "새로 추가하기" 버튼이 있다. 버튼을 눌러 아래의 설정을 다 체운뒤 "연결테스트" 버튼을 눌러 테스트가 정상적으로 끝나면 "확인" 버튼을 눌러 설정을 저장하자.

스프링노트2.PNG

<블로그 설정>

블로그의 종류는 현재 태터툴즈, 티스토리, 이글루스, 워드프레스를 지원하고 위 항목에 없는 기타 블로그를 위해 직접설정을 제공한다. 아래의 XML-RPC 주소나 Bloag API Blog ID와 같은 부분은 티스토리의 관리화면에서 봤던 정보를 입력하자. 입력이 끝난 후 "연결테스트" 버튼을 클릭해서 정상적으로 수행되었다는 메시지가 표시되면 성공한 것이다.

3.스프링노트의 글을 티스토리로 내보내기

스프링노트에서 작성된 글을 티스토리로 내보내기위해서는 스프링노트의 우측 상단에 있는 "메뉴" 버튼을 클릭해서 "블로그로 발행하기" 를 클릭하면 된다.

스프링노트6.PNG

<블로그로 발행하기>

스프링노트7.PNG

<블로그 선택 및 카테고리 선택>

블로그 이름과 카테고리를 선택한 후 "블로그로 내보내기" 버튼을 누르면 해당 블로그로 글을 내보낼 수 있다.

4.스프링노트에서 보내진 글 예쁘게 보기

4.1 기본 설정으로 보기

스프링노트에서 보내진 글을 별다른 설정없이 블로그에서 보면 약간 이상하게 보인다. 일단 아래를 한번 보자.

스프링노트9.PNG

<스프링노트의 글>

스프링노트8.PNG

<블로그의 글 - 숫자가 표시됨, 박스 표시 없음>

스프링노트10.PNG

<스프링노트의 글>

스프링노트11.PNG

<블로그의 글 - 박스 표시 없음>

위와 같이 많은 차이가 나게된다. 따라서 스프링노트의 글을 스프링 노트와 비슷하게 보려면 몇가지 설정을 해야 한다. 어떤 것을 수정해야 할까?

4.2 웹페이지 소스 분석 및 태그 찾기

블로그에서 오른쪽 버튼을 클릭하여 "소스보기" 로 페이지 소스를 보면 아래와 같은 소스를 볼 수 있다.

... 생략 ...
<H2>들어가기 전에...</H2>
<DIV>
<UL>
<LI>이 글은 kkamagui에 의해 작성된 글입니다.
<LI>마음껏 인용하시거나 사용하셔도 됩니다. 단 출처(<A href="http://kkamagui.springnote.com/">http://kkamagui.springnote.com</A>)는 밝혀 주십시오.
<LI>기타 사항은 kkakkunghehe at daum.net 이나 <A href="http://kkamagui.tistory.com/"><SPAN style="COLOR: #800080">http://kkamagui.tistory.com</A>, <A href="http://kkamagui.egloos.com/"><SPAN style="COLOR: #800080">http://kkamagui.egloos.com</A>으로 보내주시면 반영하겠습니다. </LI></UL></DIV>
... 생략 ...
<OL class=code>
<LI>    // 압력계산 코드     sPressure = (((( touch.px + 1 ) * touch.z2) >> 6) / touch.z1) - (touch.px >> 6);     sPressure1 = ( touch.z2/( touch.z1 - 1 ) );     if( sPressure1 < sPressure )     {         sPressure2 = sPressure1;     }     else     {         sPressure2 = sPressure;     }
<LI>     // 아래의 Touch와 XY버튼은 특별한 케이스이다.     // Touch Down     // Down 메시지는 계속 보낸다.     if( ( usSpecial & ( 0x01 << 6 ) ) && ( touch.x != 0 ) && ( touch.y != 0 ) && ( sPressure2 < 5 ) ) </LI></OL>
... 생략 ...

위에서 보는 것과 같이 문단으로는 <DIV> 태그를 사용하고 코드 영역으로는 <OL class=code> 태그를 사용함을 알 수 있다. 다시 말하면 이 태그의 속성을 잘 조절해 주면 지금보다 더 나은 화면을 볼 수 있다는 말이다. 이제 블로그의 스타일 코드를 수정하자.

4.3 블로그의 CSS 코드 수정

티스토리의 관리화면으로 이동해서 "스킨" 탭으로 이동하자. "HTML/CSS 수정" 을 눌러서 style.css를 적당히 수정해서 어느정도 괜찮은 화면을 만드는 것이 목표다.

스프링노트12.PNG

<HTML/CSS 편집 화면>

아래의 style.css 수정으로 가서 아래의 파란색 코드를 붙여넣자.

/* content 기본스타일 */ <<== 기존 코드
.content {font:90%/1.5 dotum, Verdana;}
.content h1{ font-size:200%;}
.content h2{ font-size:180%;}
.content h3{ font-size:140%; margin:0 5px; padding:0 0;}
.content h4{ font-size:120%; margin:0 5px; padding:0 0;}
.content input{ border:1px solid #6e6e6e; color:#666666;}
.content textarea{ border:1px solid #6e6e6e; color:#666666; overflow:visible; height:150px;}
.content .name{font-size:95%;}
.content .date{font:80% Tahoma; color:#999; letter-spacing:0;}
.content .cnt {font:75% Tahoma; letter-spacing:0; color:#999;}
/* kkamagui 추가 시작 */
.content .article a{color:#0011BB;}
.content .article h1{ font-size:200%;}
.content .article h2{ font-size:180%;}
.content .article h3{ font-size:140%; margin:0 5px; padding:0 0;}
.content .article h4{ font-size:120%; margin:0 5px; padding:0 0;}
/* 스프링 노트의 글을 붙였을 때 예쁘게 보이기위해 박스와 코드 부분 추가 */
.article div { border: dashed; border-width: thin; color: BLACK; background: #FFFF8C; }
.article .code { border: dashed; border-width: thin; color: BLACK; background: #CCFFCC; margin: 0px; padding: 0px;}
/* 코드 출력시 숫자 제외 */
.article .code li { list-style-type: none; margin: 0; padding: 0;}

미리보기를 통해서 페이지를 열어보면 아래와 같이 변한 화면을 볼 수 있다.

스프링노트13.PNG

<수정된 후 화면>

박스가 생겼으며 숫자도 사라졌다. 색깔이 마음에 안들면 background : #XXXXXX 부분을 수정해주면 된다. 색깔에 대한 내용은 http://kkamagui.tistory.com/97 페이지를 참고하면 적절한 색깔을 고를 수 있으니 참고하자. ^^

5.마치면서...

스프링노트와 블로그를 동시에 활용하는 방법에 대해서 간단히 알아보았다. 스프링노트가 블로그보다 상대적으로 검색이 약하고 블로그가 계속해서 글을 키워나가기에 부족한 부분이 있으니 위키와 블로그 어느 하나를 선택하기가 쉽지 않다. 둘중 하나를 선택할 수 없다면 간단한 팁으로 편리하게 관리하는 것도 좋은 방법이라 생각한다. ^ㅡ^

이 글은 스프링노트에서 작성되었습니다.

'프로그래밍(Programming)' 카테고리의 다른 글

ACM(알고리즘 대회) 문제 데이터 베이스에서 대회 준비한다고 골라서 푼 문제... ^^;;; (2)	2007.11.19
내 블로그에 한RSS 추가 버튼 넣기 (6)	2007.11.18
PC를 애플 Mac OS 레퍼드(Leopard)로 바꾸기 (0)	2007.11.17
빈칸 하나가 코드를 완전히 다르게 보이게 한다 (0)	2007.11.16
구글 애드센스 티스토리에 간단히 다는 방법 ^^ (0)	2007.11.16

kkamagui의 작업실