Windows Live Writer 편집 화면을 보다 깔끔하고 보기 쉽게 만들기

구글 Blogger의 기본 위지윅 편집기는 다른 블로그 서비스들의 편집기에 비해 성능이 떨어지는 편입니다. 간단한 글을 쓸 때는 상관 없지만 좀 길고 복잡한 글을 쓸 땐 조금 불편하죠. 그래서 전 Windows Live Writer를 이용해 글을 쓰고 있습니다. 블로그 템플릿을 이용해 미리보기를 할 수도 있고, HTML 소스 편집도 꽤 용이한 편이거든요. 무엇보다 외형상 정신 사나운 요소가 거의 없어, 스트레스 없이 글쓰기에만 집중할 수 있게 도와줍니다. 최소한 Blogger 편집기보다는 깔끔하죠.

그런데 Live Writer에도 단점은 있었으니, 그것은 기본으로 설정된 편집 화면이 너무 지저분하다는 것이었습니다.

 

Live Writer에서 기본으로 설정된 편집 화면입니다. 글 제목은 쓸데없이 너무 크고, 본문 글자도 큰 편입니다(14px정도). 무엇보다 글자 사이에 줄간격이 전혀 적용되어 있질 않아서 지저분해 보입니다. 한/글 워드프로세서처럼 줄간격 160% 정도는 되어야 편히 글을 쓸 텐데요.

물론 ‘스킨 사용 편집(Ctrl+F11)’ 기능을 사용한다면 상관없겠지만, 저처럼 이 기능을 쓰지 않고 ‘편집’ 화면만 이용하는 경우라면 아주 불편해집니다. 전체 글이 한 눈에 들어오지도 않고, 정신사나워서 글을 쭉쭉 쓰기에도 어렵죠. 영어라면 모르겠지만, 한글에서는 완전히 꽝입니다.

그래서 뭔가 방법이 없을까 하며 Live Writer의 설치 폴더를 뒤적이던 중, 뜻밖의 파일을 하나 발견했습니다. 바로 CSS 파일이었죠.

• C:\Program Files\Windows Live\Writer\template\defaultstyle.css

이름에서부터 뭔가 ‘나 기본 스타일을 담당하는 파일이야!’ 라고 외치는 듯한 이 파일에 해답이 숨겨져 있었습니다. 간단히 메모장(notepad.exe)을 이용해 파일을 열고, CSS를 수정해 주었습니다.

우선, /* page layout */ 이라 적힌 주석 부분을 찾습니다.

body
{
font-family: {body-font};
font-size: 14px;
}

부분을 찾아, 수정해 줍니다. 여기서는 본문의 글꼴 스타일을 지정할 수 있습니다. 저는 우선 글자 크기를 13px로 줄이고, 줄간격 180%를 지정해 주었습니다.

body
{
font-family: {body-font};
font-size: 13px;
line-height: 180%;
}

제목 부분도 맘에 들지 않는다면 고쳐줍니다. 이번엔 /* title section of the post */ 주석 부분을 찾습니다. 그냥 아래로 스크롤 해도 되고요.

.title
{
margin: 10px 5px 10px 5px;
font-family: {title-font};
font-size: 20px;
}

보다시피 글자 크기가 무려 20px로 지정되어 있습니다. 보기 편하게, 16px로 바꿔주었습니다.

.title
{
margin: 10px 5px 10px 5px;
font-family: {title-font};
font-size: 16px;
}

이렇게 수정한 뒤, 파일을 저장하고 닫습니다. Live Writer를 다시 실행시키면 변경된 내용이 적용됩니다. 어떻게 바뀌었나 한번 볼까요?

 

방금 전 CSS 파일을 수정한 그대로, 글자 크기는 더 작아지고 보기 좋게 줄간격이 들어갔습니다. 정신사납지 않고 좋네요.

 

바로 옆에 두고 비교해 보면 차이가 확연합니다. 물론 글자를 더 작게 할 수도 있고, 줄간격을 더 좁힐 수도 있습니다. font-size 부분에 12px를 입력하면, 흔히 사용하는 9pt가 됩니다. 13px를 입력하면 10pt 정도 되고요. 줄간격은 퍼센트를 써도 되고, px이나 em을 쓰셔도 됩니다. 한/글 워드프로세서처럼 160%를 사용해도 되지요.

Windows Live Writer의 기본 글꼴이 맘에 들지 않아 사용을 꺼리셨다면, 직접 CSS를 수정하여 맘에 드는 스타일로 바꿔 사용해 보세요. 글이 훨씬 더 잘 써질 겁니다 :)