블로그 글쓰기 프로그램 추천 / iA Writer

블로그 글쓰기 프로그램 추천

블로그 글쓰기 프로그램 추천 / iA Writer를 블로거가 쓸 수밖에 없는 이유

블로그에 포스팅할 글감이 생각나면 예전에는 OneNote, Google Docs에 생각나는 내용을 틈틈히 적어두고 블로그 편집기로 복사 & 붙여넣기 하여 포스팅을 마감하곤 하였습니다. GUI 편집 모드에서는 큰 이상이 없어 보였지만 해당 프로그램을 사용하여 블로그에 글을 쓴 경우 HTML 편집모드로 전환하고 깜짝 놀라버렸습니다. 아무래도 HTML을 위한 프로그램이 아니다 보니 한 문장에도 수많은 SPAN TAG를  추가하여 HTML TAG가 남용된 상태였습니다. class 적용을 하기 위해서는 편집이 필요했는데,  정말 욕이 나올 정도였습니다.  편리하고 쉽게 그리고 빠르게 HTML 문서를 꾸미기 위해 CSS 스타일 시트를 사용하는데 불필요한 TAG 지우는 노가다 작업이 요구될 정도니... 특히나 위험한 게 영어 font의 경우 예상치 못한 font family가 html tag에 포함되는 경우가 있습니다. 

 

CSS Class 추가하기

HTML TAG가 기본적인 글이라면, CSS는 이 글에 옷을 입히는 스타일 시트입니다. 따라서 블로그에 기본적인 글쓰기를 완료한 이후 HTML 편집 모드로 전환하여 미리 생성한 CSS Class 이름을 각 h1, h2, p 태크에 적용해 주면 깔끔하게 스타일을 꾸밀 수 있게 됩니다. 

티스토리 CSS 클래스 생성

CSS Class 적용하기

블로그에 초안을 작성하고 HTML 모드로 전환합니다. 그 이후 P TAG, H1, H2 TAG에 CSS CLASS로 미리 지정해둔 CLASS ID를 추가하면 모든 작업이 끝나게 됩니다. 정말 편리하겠지요. 나중에 글의 스타일을 바꿔야 하는 경우 블로그의 글 하나하나 수정할 필요 없이, CSS에 등록시켜둔 해당 ID에 속성만 수정, 추가하여 모든 문서에 디자인을 적용할 수 있으니 블로그 운영하시는 분들이 HTML5와 CSS를 배워서 많이 적용하게 되는 것 같습니다.

CSS 클래스 적용

CSS CLASS 적용된 문서 예제

위 HTML 내용을 보시면 동일한 내용에 단지 Class ID만 각각 다른 4가지 ID를 적용한 예제입니다. CLASS 이름 변경으로 간단하게 블로그 글을 꾸밀 수 있는 것이죠.

CSS 적용된 본문

 

 

 

OneNote 사용 블로그 글쓰기 CASE

블로그 운영 초창기에 OneNote에 생각나는 글감을 적어두고 옮겨오곤 하였으나 HTML TAG가 너무나 지저분하게 들어갑니다. OneNote는 메모용으로 사용하는 것이 가장 좋을 것 같아요. 목적과 달리 블로그에 사용하시면 정말 수정하다가 욕 나옵니다. 아래에 나오는 OneNote에 적어둔 초안을 복사 & 붙여넣기 하여 블로그에 초안을 작성하고 HTML 모드로 전환해보세요.

OneNote로 작성한 글 복사 & 붙이기

OneNote 초안 HTML 

티스토리로 복사 & 붙여넣기한 OneNote 초안의 HTML입니다. SPAN이 단어 사이에 너무 많이 들어갔습니다. 해당 프로그램이 HTML 전용 프로그램이 아니다 보니 이런 문제가 생기는 것 같습니다. 

OneNote HTML 확인

Google Docs로 작성한 초안

주로 블로그 글 초안은 아이패드에서 작업을 했었는데, OneNote의 불필요한 TAG 발견 이후로 Google Docs를 사용했었습니다. OneNote에 비해 단어 사이에 불필요한 span 태그가 지저분하게 포함되지는 않습니다. 아이패드에서 초안을 작성하면 자동으로 Google Drive에 저장되고 휴대전화에서도 수정할 수 있어서 편리하게 장비를 옮겨가며 초안을 관리할 수 있는 장점도 있지만 HTML5 전용 편집기가 아닌 이유로 사용할수록 블로그용 글쓰기에는 다소 부적절한 느낌이 있었습니다.

Google docs 문서 복사 & 붙여넣기

Google Docs로 작성된 HTML

Google Docs는 HTML 전용 편집기가 아니지만 비교적 깔끔하게 HTML 문서로 변환됩니다. 하지만 문장에 Span, color와 같은 불필요한 요소가 몇 개 추가됩니다. 이것 역시 블로그의 글 내용이 길어지면 수정하기 번거롭게 됩니다.

Google docs HTML 확인

iA Writer로 작성된 초안

iA Writer로 작성을 하면서 문서의 제목, 강조 구문에 대해 손쉽게 마크다운을 적용할 수 있으며 내보내기에서 HTML로 내보내기 하면 HTML5 문서 FORMAT에 맞게 변환이 됩니다. 이때 가장 만족스러운 부분이 불필요한 HTML TAG가 전혀 없다는 것입니다.

iA Writer 문서 HTML로 내보내기

iA Writer에서 내보내기 된 HTML 문서

블로그에 복사 & 붙여넣기는 BODY 부분부터 끝까지 복사해서 붙여넣기 하면 됩니다. P 태그 내부만 확인을 해봐도 강조한 부분만 별도의 태그가 있으며, 불필요한 SPAN 태그가 전혀 포함되어 있지 않습니다. 이렇게 초안을 옮겨온 후 P TAG 내부에 CLASS ID만 추가하면 블로그 글 포스팅이 완료됩니다. 정말 이 프로그램 너무너무 맘에 들어요.

iA Writer HTML