저는 블로그 운영을 위해 구글의 Blogger 서비스를 이용하고 있습니다. 전에도 여러 번 밝혔듯이, 구글 블로거의 편집기는 다른 편집기들에 비해 불편한 게 사실입니다. 그래서 저도 MS의 Windows Live Writer를 애용해왔던 것이고요.

그런데 Windows Live Writer는 로컬 컴퓨터에서나 쓸만한 툴이라는 게 단점입니다. 여러 장소, 여러 컴퓨터에서 오가며 쓰기에는 영 불편합니다. 그래서 온라인 기반의 에디터를 알아보았습니다. 지금은 사라진 스프링패드나 유명한 에버노트 등도 잠깐 써봤지만, 뭔가 조금씩 아쉬웠습니다. 훌륭한 툴들이지만 '글쓰기'라는 측면에서 볼 때 복잡하거나 쓸데 없는 기능들이 너무 많았던 탓이죠.

어느 날, 우연히 크롬 웹 스토어에서 Writer라는 서비스를 알게 되었습니다. 이 서비스의 타이틀은 바로 'Writer: the internet typewriter'. 인터넷 타자기를 표방하는 서비스였습니다. 그리고 나타나는 검은 바탕의 초록 글씨. 초기 컴퓨터의 허큘리스 모니터를 그대로 따온 듯한 모습이었습니다.

옛날에 만났던 초기 버전은 한글 지원도 좀 미숙했던 것 같은데, 최근에 보니 그런 문제도 꽤 개선되었습니다. '이젠 꽤 쓸만하다'는 생각이 듭니다. 이것저것 보기 좋게 설정한 값을 여기 기록해 둡니다.

요새 한창 새 템플릿 만드느라 정신이 없었는데, 그 사이 구글 Blogger에 꽤 중요한 업데이트가 있었습니다. 바로 새 편집기를 사용할 수 있게 된 것입니다. Blogger 도움말에도 이에 대한 글이 있는데, 스크린샷을 보아하니 먼저 Blogger Draft에서 테스트를 마치고 이제 정식으로 적용한 모양이네요.

An overview of the new post editor (Blogger Help)

Blogger의 구형 위지윅 편집기

기존 편집기의 모습입니다. 아주 기본적인 기능들만 제공하는 위지윅 편집기입니다. 별도의 팝업창을 통해 이미지를 삽입하며, 미리보기 기능은 실제 블로그에서 보는 것과 많은 차이가 있습니다. 간단한 글을 쓰기엔 괜찮지만 입력창 크기가 고정되어 있어 긴 글을 쓸 때엔 불편합니다. 타 블로그 서비스의 편집기와 비교해봐도 많이 떨어지는 편이죠. 그래서 전 예전부터 HTML을 직접 입력하여 글을 썼고, 지금은 Windows Live Writer로 글을 쓰고 있습니다.

새 위지윅 편집기

이번에 업데이트된 새 위지윅 편집기입니다. 겉보기엔 큰 차이가 없어 보이지만 꽤 많은 부분이 개선되었습니다. 가장 변화가 큰 부분은 이미지 삽입에 관련된 부분으로, 기존의 중구난방식 이미지 삽입에서 매우 많이 개선되었습니다.

기존 편집기에서는 이미지 추가 시 별도의 팝업창이 떴는데요, 새 편집기에서는 이렇게 생긴 레이어가 편집기 바로 위에 뜹니다. 전과 달리 이미지를 올릴 때 크기를 지정하지 않아도 되고, 글에 추가된 이미지들은 썸네일로 이 레이어에 나타나게 됩니다.

기존엔 이미지를 올릴 때마다 글에 삽입할 크기를 미리 지정해야 했죠. 이젠 그럴 필요가 없어졌습니다. 편집창 내에 삽입된 이미지를 클릭하면, 아래쪽에 작은 메뉴가 따로 뜹니다. 이미지 크기를 지정할 수 있고, 이미지 정렬을 바꿀 수도 있습니다.

미리 지정된 세 가지 크기가 맘에 들지 않는다면, 이렇게 직접 크기를 지정해 줄 수도 있습니다. 편집창에서 이미지를 더블클릭하면 크기를 조절할 수 있게 핸들이 생기는데, 이를 조절하여 크기를 바꿀 수 있습니다. 오른쪽 아래에 픽셀수도 표시해 줍니다.

또한 HTML 편집 부분도 개선되었습니다. 기존의 편집기에선 HTML 모드와 위지윅 모드를 번갈아 쓰면 HTML 코드가 죄다 깨져버리곤 했었는데, 이런 부분이 많이 개선되었다고 합니다.

그밖에 편집창 크기 조절, 링크 편집, 미리보기 화면, 도구모음 색상팔레트 등이 개선되었다고 하네요.

새 편집기를 직접 써보니…

처음에 딱 보고 도구모음 부분이 바뀌었길래 뭔가 새로운 기능이 추가된 줄 알았는데, 안타깝게도 그런 건 없더군요(겨우 취소선 삽입 버튼 하나). 오히려 동영상 추가 버튼이 없어졌습니다. Blogger에서 바로 넣지 말고 유튜브를 이용하라는 걸까요? 이미지 삽입 부분은 전보다 확실히 편해졌지만, 이미지를 가장 크게 넣었을 때의 크기가 겨우 400px이네요. 너무 작아요.

그리고 편집창 크기는 세로로만 늘어나고, 가로로는 늘어나지 않는군요. 요건 구글 크롬을 쓰는 게 좋겠어요. 색상 팔레트가 개선된 건 좋지만 16진수 코드(#FFFFFF 같은)를 직접 삽입할 수 있었다면 더 좋았을 텐데요.

또한 위에서 링크한 Blogger Help의 글에는 새 편집기에서 위치 태그를 사용할 수 있다고 표시되어 있는데, 실제 써보니까 그런 기능을 찾을 수 없었습니다. 아직 업데이트가 안 된 모양입니다. 좀 아쉽네요.

그래도 꾸준히 개선해 나가는 것 같으니, 계속 지켜봅시다 ;)

덧) 위치태그 기능은 Blogger Draft 상태에서 사용 가능하다고 합니다. zizukabi님의 글 참고.

구글 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를 수정하여 맘에 드는 스타일로 바꿔 사용해 보세요. 글이 훨씬 더 잘 써질 겁니다 :)