Windows Live Writer를 사용해보고

1. Windos Live Writer 설치

Live Writer룰 사용해보고자 Live.com 계정에 가입까지 했다. 원래 전에 만들어둔 Hotmail계정이 있었는데 오래 동안 사용을 안 해서 인지 없는 계정으로 나왔다.; 대충 둘러보니 스카이드라이브라는 웹 하드서비스도 있길래 겸사겸사 써주기로 했다. 설치하면 다른 프로그램들(메신져등)도 같이 설치 한다 길래 Live Writer만 설치 하도록 했다.

Live Writer는 플러그인과 같이 쓰면 그 기능이 업그레이드 된다. 그래서 플러그인을 설치하려 했는데 플러그인이 하나만 나오는 것이었다.; 그 이유는 필터기준이 한국어로 설정 되있어서였다. 모든 언어로 설정을 바꾸면 검색 해볼 수 있다.

2. 쓸만한 플러그인들

내가 설치한 플러그인은 총 6가지 이다.

• Polaroid Picture : 삽입한 이미지주변에 테두리를 만들어준다. 매우 쓸모 있음.
• Insert Code for Windows Live Writer : HTML등의 코드를 붙여 넣을 때 따로 코드 입력창을 삽입해서 깔끔하게 보여준다.
• Flickr4Writer : 플리커라는 외국이미지사이트인데 여기서 사진검색 및 이미지를 가져다가 쓸 수 있다. 난 여기 계정이 없어서 안 써봤지만, 그냥 깔아놨다 ~_~
• Picasa Image Plugin : Picasa 웹 앨범과 연동해서 쓸 수 있다. 웹 앨범에 저장된 이미지를 바로 가져 올 수 있다.
• Bullets plugin for WLW : 제작자 말로는 예쁜 Bullets를 삽입할 수 있게 해준단다. (밑에 참조)

      Bullets란 이거다.
      Bullets란 이거다.
      이 모양 말고도 여러 가지가 있다.
      
     

• Horizontal Line Plugin : 단락선을 그어준다. 문단 나눌 때 씀.

3. 구글 Docs와의 비교

블로그 시작한지도 얼마 되지도 않았는데 비교 글을 쓰자니 좀 웃기긴 하다. 그래도 눈에 보인 차이가 있으니 적어둔다. 결론부터 말하면, Live Writer에 손을 들어준다. 구글 Docs는 아직 부족한 점이 있었다. Live Writer를 설치하고 블로그와 연결시키면 블로그에 접속해서 게시물과 스킨을 읽어온다. 이것으로 인해 오프라인 작업이 가능해진다. 한글이나 MS워드처럼  문서를 작성하듯 게시물을 작성하고, 하드디스크에 저장해두어 천천히 살펴보면서 나중에 블로그에 게시할 수 있다.     

▣ Live Writer의 좋은 점?

• 우선 양쪽정렬 옵션이 있다. 구글 Docs는 없음.
• Polaroid Picture 플러그의 기능. 이 플러그인을 뺴고라도 이미지 삽입 및 조정은 Live Writer가 훨씬 편리했다. 뭐 Docs는 문서편집용이니 이건 당연한 것. 이 플러그인과 다른 플러그인 때문에 Live Writer가 글쓰기 훨씬 편리하다.
• 미리 보기 기능. 작성한글이 어떤 모양으로 게시됐는지 미리 볼 수 있다. 매우 좋은 기능이다. 실시간으로 자신이 작성한 글 확인 가능.
• 카테고리 설정기능. 이게 라벨을 달아주는 기능이다. Live Writer에서 글을 올릴 때 라벨까지 설정해주고 게시할 수 있다.
• 맞춤법 검사가 작동된다. Docs는 실행할 때 오류가 났었다.

▣ Live Writer의 단점?

• Live Writer의 편집 화면이 마음에 안들 수 있다. 여기로 가서 글을 참조하면 되겠다.
• 표 삽입 기능. 이건 구글 Docs와도 같다. 행 합치기와 열 합치기가 없다. 복잡한 표를 만들려면 머리 좀 써야 한다; 그 외 표를 꾸미기 위한 설정을 할 수가 없다. 꾸미려면 직접 소스코드를 수정해야 한다.
• 소스코드 보기에서 한글이 깨짐. 한글이 네모로 나온다.
• 플러그인 삭제가 불편함. Live.com에서 다운받으면 바로 설치가 아니라, 설치파일을 실행시켜 줘야 한다. 게다가 제거 하려면 제어판가서 프로그램추가제거로 삭제해주는 정성까지 들여야 한다;;;

일단 이 정도만 적어둔다. 그러고 보니 그리기 개체 기능이 Live Writer에는 없다. 그리기 개체기능으로 그려 넣은 도형이 가끔가다 표시가 안 되는 것을 보면, 이 기능은 사용 안 하는 것이 옳다고 보다.

2010.06.17 최초 작성완료

블로그의 기초! 템플릿의 대략적인 구조

템플릿의 구조

이건 어디까지 검색해서 알아낸 것을 기록하는 것이다. 정확하다고 보장은 못한다.; 

현재 블로그 적용스킨인 Sonica를 기준으로 분석해보겠다.

크게 3부분으로 나눌수 있다. head 부분, CSS 부분, body 부분

head

CSS

body

처음 템플릿 설정할때는 코드를 보고도 이런 구조인줄 몰랐다. 하룻밤 자고(?) 맑은 정신으로 차분히 검색해보면서 에디터로 코드를 찬찬히 살펴보니 이런 구조라는 것을 발견한 것이다! 이렇게 보니 단지 중간에 스타일시트 구문이 들어간 것만 빼고 내가 어설프게 나마 알고 있는 html 구조와 똑같다. 이렇게 기쁠수가~!  어제만해도 스타일시트가 어디에 있는지 눈알이 빠져라 찼고 있었다.; 코드를 보고도 모르고 있었던 것이다.; 아 부끄러워라.

각 부분에 대한 간단한 분석

1. head 

매우 간단하다. 이 줄빼고는 그 다음부터 body 시작할때 까지 전부 스타일시트다. 

 <b:include data='blog' name='all-head-content'/> : 이부분은 파비콘을 설정하는 부분이다.

 <data:blog.pageTitle/> : 말그대로 블로그의 타이틀을 보여준다.

2. CSS

 </title>바로 아래 붙어 있다. <b:skin>이란 태그로 시작한다. 이부분이 가장 길고도 찼아볼곳도 많은 부분이다.;  나에게 생소한 부분이 많기 때문에  분석에 시간이 상당히 걸릴 것이다. 그래도 한번 보면 어떤 부분을 정의 하는지 감이 오는 부분도 있다. 

• /* Variable definitions : 이 주석아래로 템플릿에서 사용되는 요소들(폰트,배경등)의 색깔, 크기, 폰트종류등등을 name 태그로 정의 한다. 
• 다음은 body가 나오는데 블로그에서 보면 바깥부분을 가르키는거 같다.; (밑의 그림 참조;;;)
• #header-wrapper : 헤더 전체를 뜻한다. 여기보면 width:960px;라고 설정되있다. 이 크기가 블로그의 가로폭이다. 이걸 조정하면 헤더의 가로 크기만 조정할 수 있다. 물론 다른곳도 같이 조정해야 이상해지지 않을 것이다.
• #outer-wrapper : 확실하지 않치만 #main-wrapper 와 #sidebar-wrapper를 둘러싼 곳을 가르키는 듯? 
• #main-wrapper : 이 부분이 본문에 관한 곳이다. 여기에 양쪽정렬태그를 넣어서 쓰고 있다. 여기서 가로폭과 #sidebar-wrapper 가로폭 그리고 margin의 크기를 전부 합쳐서 이 스킨에서는 전체 가로폭이 960px이다.
  

• #sidebar-wrapper : 가젯들이 들어와있는 곳이다. 본문 바로 옆에 위치함
  
• #comments, #footer : 이부분은 댓글과 바닥글에 대한 설정이다.
  
• 그외도 많다;;; 
• #navbar-iframe {
  display: none !important;
  }
  이곳은 Navbar 표시 여부를 나타내는 곳이다. none은 감추기. on으로 설정하면 바가 상단에 표시된다. 블로거에서 제공하는 기본 템플릿들은 전부 이 바가 보이도록 설정되있는데 개인이 만든 템플릿들은 안보임으로 되있다. 

위의 그림은 허접하게 나마 그려본 템플릿의 구성도이다.; 이것이 일반적이 2단 템플릿의 구조이다.

3. body

이곳은 html태그로 구성요소들을 정렬해주는 곳이다. 여기서 Layout조절이 가능할듯. 여기는 태그 공부만 좀 하면 이해하는데 어려움은 없을듯.

휴.....

간략하게 나마 정리해보았다. 자세히 파고 들어가면 밑도끝도 없으니 이쯤에서 일단 멈춰야겠다. 아직 불확실하게 이해하고 있는 곳도 많고, 아예 모르는 곳도 많고... (...) 

2010.06.15 최초 작성완료

블로그의 기본! 라벨 설정하기

현재 구글 블로그는 카테고리 서비스를 지원하지 않는다. 카테고리 서비스 대용으로 라벨을 이용하면 된다.

구글 Docs에서 문서를 포스팅하면 라벨이 붙어 있지 않다. 수동으로 추가하는 수밖에 없는듯 하다.

이곳으로 이동후 글목록에서 설정한다.

메뉴를 보면 레이블을 새로 만들수 있고 추가 적용, 제거를 할수 있다.

레이블을 적용할때는 체크박스란에 체크하고 적용하면 된다.

블로그의 기본! 기초적인 Layout 설정, 가젯추가, 템플릿추가

이 방법들을 알아내는데로 삽질 좀 했다.

구글 블로그 사용법에 관해서는 한글로 정리된 사이트 찼기 정말 힘들었다.

이번에 구글이 Textcube와 Blogger서비스를 합병한다고 한다. 한국인 이용자가 많이 좀 왔으면 한다. 

여기는 진짜 망망대해에 홀로 표류하고 있는 기분이다.

아 내가 왜 여길 덜컥 선택했는지...

어째건 수많은 시행착오를 거치면서(...) 알아낸것들이니 정리나 해놔야겠다.

Layout 설정

Layout은 기본으로 여러가지 형식을 제공한다. 추가할 가젯들을 고려해서 샘플중에 고르면 되겠다.

이 샘플로 제공된 Layout이 맘에 들지 않으면 직접 수정하면 된다. 간단하게 글꼴 변경과 양쪽 정렬하기 방법만 적어보겠다. 

일단 여기로 이동해서 코드를 얻어야 한다. 

위 코드를 전체 복사후 다른 에디터에 붙어넣기 후 편집하는게 좋다. 편집기는 에디트플러스3을 사용했다.

맑은 고딕 추가 하기

구글 Dodc에서도 그렇고 블로그 글쓰기 에디터에서도 맑은 고딕을 기본 지원하지 않는다. 맑은 고딕 글꼴을 추가해 보면 

/* Variable definitions 항목 아래 font가 들어 있는 곳에 전부 맑은 고딕을 추가 시켜주면 된다.

검색으로 arial를 찼아서 확인해본후, 바꾸기로 맑은 고딕을 넣어주면 되겠다.

수정후 문서를 다시 붙여 넣고 미리보기로 테스트 해보고 이상이 없으면 스킨 저장을 하면 된다.

양쪽정렬로 깔끔하기 정리하기

블로그에 기본제공하는 에디터에는 양쪽정렬 메뉴가 있는데 구글Docs에서는 이 기능이 없다.

현재 사용 하고 있는 스킨에서는 여기에다가 추가하면 된다.

body 항목에

 text-align: justify;  

를 추가하면 된다.

스타일 시트는 사용 가능한 것인가?

스타일 시트를 이용해서 간편하게 서식을 변경하는 법이 여기서는 없는 건가 모르겠다.

한글 사이트에서는 적용 방법을 발견 못했다. 블로그 꾸미는 글들은 죄다 다른 블로그 서비스에 관한 이야기뿐...

위 방법도 제대로 한건지 모르겠다. 어쩌다가 우연히 맞아 떨어진건지...

스킨 태그를 봐도 무슨 말인지 모르니;;
HTML에 관한 지식은 그냥 이름만 아는 수준이라 코드해석하는게 힘들다. 그래서 스킨을 직접수정하는 것은 일단 보류다. 한가해지면 지금 쓰는 스킨 연구나 해봐야겠다. 아니 전반적으로 HTML기초부터 다시 봐야할꺼 같다. 

젝일~~~~~~~~~~~~~~!

스킨 재설정 할때는 백업이 필수다.

시험삼아 다른 스킨으로 교체한 순간~!

• 게시물중에 그리기로 삽입한거 깨짐 
• 폰트 설정 없어짐
• 양쪽정렬 안됨

위 3가지 현상이 발견됐다.

디자인 페이지구성요소에서 가젯추가

처음 블로그 만들고 내용을 채워넣어야 되는데 그 방법을 몰랐다. 그래서 한참 엉뚱한 곳에서 검색하다가 블로그 설정에서 발견했다. 그 때의 허탈함이란... OTL 이래서 초보때는 힘든거다.

설치방법은 무지 간단하다 그냥 항목에서 클릭만하면 Layout에 그냥 추가된다. 

위치 이동은 마우스로 끌면 되는거고...

구글에서 제공하는 것 외에 직접 스크립트를 가져오는 것도 있는 거 같은데 이건 나중에 연구~

템플릿 디자이너 설정하기 

인터넷을 돌아다녀보니 깔끔하고, 화려하게, 또 한 이쁘게 잘 꾸며놓은 블로그가 참 많았다. 지금의 내 실력으로는 그렇게 꾸미는 건 무리니 그냥 기본으로 제공되는 템플릿으로 때우는게 상책이다.

이 항목에서 가능한 것은

• 템플릿 변경
• 배경화면과 색깔 테마 변경
•  Layout 구성변경 (가젯 추가 불가)
  
• 제공되는 템플릿의 설정변경(색, 폰트, 크기)

여기 고급항목의 맨아래 CSS추가가 있다. 여기서도  Layout 설정변경하는 것처럼 블로그 외관을 변경시킬수 있을꺼 같다. 그러나 이건 또한 시간 관계상 나중에 연구~

이전 템플릿이란 항목이 있다. (위에 Layout 설정란 참조) 여기서 레이아웃을 선택하면 템플릿 디자이너의 기능이 제한적으로 사용되니 잘 생각해보고 적용여부를 결정해야한다. 

2010. 06.14 최초 작성완료

블로그의 기본! 구글 DOCS에서 포스팅하기

따라하기를 시작하기전에...

STEP 1. 먼저 제목을 정한다.

빨간 동그라미를 클릭하면 제목을 변경할수 있다.

제목은 블로그에 포스팅되는 글의 제목이 된다. 즉 제목이 곧 블로그의 글제목.

STEP 2. 서식지정후 글쓰기를 시작한다.

서식 - 문서 설정에서 선택할수 있다.

메뉴자체도 상당히(!) 간단해서 볼건 없다...

작성되는 글의 일관성 유지를 위해서는 그래도 설정을 하자.

STEP 3. 블로그에 포스팅하기.

글을 다 작성 했으면 이제 포스팅을 해야한다.

화면 오른쪽 상단의 공유항목을 클릭후 웹으로 게시를 클릭한다.

빨간 동그라미안에 블로그에 게시를 누르면 블로그에 포스팅할수 있다. 노란색 밑줄을 누르면 다시 문서 편집 화면으로 돌아온다. 게시 완료후 블로그에 가보면 포스팅된 글을 볼수 있을 것이다.

게시 완료후에도 구글 Docs 초기 화면으로 가보면 포스팅한 글이 남아있다.

언제든지 다시 글을 불러서 편집후 수정본을 다시 포스팅 할 수 있다. (이거 엄청 편리하다!)

※ 여기 잠깐 주의할점이 있다. 이 글을 쓰는 현재(2010.06.14 기준) 구글 문서도구 설정 항목의 수정탭으로 가서 최신 에디터 사용옵션을 체크하면 블로그에 게시하는 기능을 사용 할 수 없다. 처음에 본인도 최신이니깐 좋겠지라는 안이한 생각에 체크하고 첫 글을 작성했다가 저 기능이 없어서 엄청 당황했다. (-___-) 그냥 기본에디터로 사용하자. (...)

▣ 이상 간단히 구글 Docs에서 블로그에 포스팅하는 기능을 살펴보았다.

구글 Docs와 Blogger서비스를 같이 이용하면 좋은점은 편리함이라고 생각한다.

Gmail계정만 있으면 별다른 설정없이 블로그를 쉽게 만들고 블로그에 올릴 글도 별도의 프로그램 설치없이 웹에서 작성해서 바로 올릴수 있다. 거기다가 이미지편집툴로 Picasa 3를 같이 사용해보니 정말 편했다.

다만 불편한점이 Blogger는 한국 사람이 많이 이용안한다는 점이다. OTL..

초보인 난 아무 생각없이 그냥 개설해서 여기까지 와버렸다. (...)

이 점 때문에 블로그 꾸미기라던지 기초적인 정보검색이 힘들었다. 사실 Docs와 Blooger를 연동해서 쓸 수 있다는 것도 2시간만에 알아낸거다. 한글 검색으로는 정보 검색에 한계가 보인다. 영어로 검색하면 이것 저것 쏟아져 나오는 거 같은데 영어 압박이라... (...)

구글 Docs는 한글 입력에 문제가 있는거 같다. 이 글을 쓰고 있는 동안 갑자기 한글 입력이 안되면서 글이 안써지는 경우가 3번 발생했다. 뭐 저장하고 리로드한번 해주면 되긴하는데 좀 찝집하다. 아직 개발중이라서 그런듯하다.

블로그 글을 작성하는 용도로 나름 고수(?)라는 분들은 Editplus로 직접 코딩하거나 마소에서 나온 Live writer를 추천하고 있다. 시간이 되면 Live writer나 한번 써봐야 겠다.

2010. 06.14 최초 작성완료