본문 바로가기

Old articles/Mac Life

MarsEdit에서 프리뷰에 티스토리 스킨 적용하기

반응형

이전 글에서 MarsEdit와 티스토리를 연결하는 방법을 설명하였습니다.


이번 글에서는 맥 유저로서 블로깅을 할 때 상당히 아쉽다고 (강렬히..) 느끼는

MarsEdit의 미리보기에 블로그 스킨을 입혀보는 방법을 간단히 설명하고자 합니다.

주의 : 이 방법은 정석이 아닙니다. (그러므로 열심히 따라해도 서울대는 갈 수 없습니다… 응?)

 

일단 아쉬움을 느끼는 원인부터 보도록 하겠습니다.

 

MarsEdit 입니다. 제가 방금 작성한 글이 보여지고 있습니다..

(아.. 생각해보니 다들 나들이 가는 토요일 아침부터 난 왜 집에서 블로깅이나 하고 있지.. 

잠깐 눈물 좀 닦고.. ㅠㅠ)

글 내용 창의 그림이 물음표로 표시되는 것은 티스토리의 문제인지 

MarsEdit의 문제인지 파악하지 못했습니다. 

웹에서는 문제없이 표시됩니다.

 

다음으로는 윈도우에서 블로깅하는 사람들에게 축복(?)이라고 불리우는 Windows Live Writer 입니다.

임시 글을 미리보기 했는데 뭔가 느껴지시나요? 게다가 이 프로그램은 무료입니다…..아..

 

MarsEdit에서는 미리보기가 자체적인 밋밋한 화면이지만 Windows Live Writer에서는 

엉성하게나마 티스토리의 스킨에 맞춰서 보여주는 섬세함(?)을 지니고 있습니다.

 

그렇다고 맥에서 블로깅 하나 하자고 윈도우를 켜는 것은 많은 불편함이 따르므로 

(라고 쓰고 '자존심이 허락하지 않으므로' 라고 읽습니다.)

수동으로나마 티스토리의 스킨을 씌우는 방법을 찾아보도록 하겠습니다.

 

일단 MarsEdit에서 테스트용 글을 작성합니다. 

상단의 Preview를 누르면 미리보기 창이 뜨는 것을 볼 수 있습니다. 

Windows Live Writer에 비하면 상당히 밋밋한 (볼품없는..) 미리보기 화면입니다. 

하단의 'Edit template'를 누릅니다.

 

그러면 위와 같은 HTML코드 창을 볼 수 있는데, 눈치가 빠르신 분들은 이 코드를 적당히 고치면 

티스토리 스킨 화면의 미리보기를 얻을 수 있다는 것을 파악하실 겁니다.

그럼 적당한 HTML코드는 어디서 얻느냐.. 제가 처음에 생각한 방법은 티스토리 블로그 관리자 화면에서 

'스킨' 메뉴의 'HTML/CSS 편집'에서 긁어오는 방법이었습니다. 

이 코드를 복사하여 templete에 붙여넣어봤습니다.Fail……….

본문 내용부분을 치환하는 코드가 있는 건 둘째치고 그림 자체가 나오질 않습니다.


 

그래서 생각한 방법은.. 일단 아까의 테스트 글을 블로그에 게시합니다. 

그리고 글 목록에서 'View on web'을 눌러서 브라우저로 글을  표시합니다.

 그리고 웹페이지에서 (사파리 기준으로) Command + alt + U를 눌러서 소스 보기를 합니다.

 

 이 소스를 Command+A, Command+C로 전체복사를 합니다. 

그리고 아까의 템플릿 편집 창의 내용을 전부 지우고 붙여넣기를 합니다. 



여기서 문제점은 MarsEdit 메인 창의 어떤 글을 가리켜도 

이전의 테스트 글로만 표시 된다는 점이 문제가 됩니다.

이것을 고치기 위해서는 MarsEdit에서 본문이나 제목을 지칭하는 미리 정해진 코드를 넣어주어야 합니다.

 

다시 템플릿 편집창으로 돌아가서 테스트 글의 제목 부분을 찾습니다. 

잘 찾아보면 이런 부분을 찾을 수 있습니다.

여기서 '테스트' 글자를 지우고 편집창 밑의 'Insert Placeholder'를 클릭하여 'Title'을 클릭합니다. 

그러면 테스트 글자의 위치에 #title#이라는 문구가 들어가게 됩니다.

 

마찬가지로 '분류없음' 대신에 #categories#를 넣어줍니다.

역시 동일한 방법으로 <p>본문의 시작</p><p>힝~! 속았지?</p><p>본문의 끝</p> 부분은 

#body# #extended# 로 바꾸어 줍니다.

 최종적으로 바뀐 형태입니다.

 

지금 작성하는 글을 프리뷰 해보면 위와 같이 보이게 됩니다.

이 방법의 단점이라면 스킨을 바꾸었을 때 다시 이 과정을 해야 되고 

또한 제목과 본문을 제외한 나머지 부분은 아까의 그 테스트 글이 보여지던 시점이므로 

다른 부분은 건드릴 수가 없다는 점 입니다.


좀 더 능력자 분들이시라면 여기에서 템플릿을 유용하게 고치실 것 이라고 생각됩니다. 

저는 간단하게 실제 보이는 모습 비슷하게만 보이는 것을 목표로 했기 때문에 여기서 완료를 하였습니다.

 

Windows Live Writer가 맞춤법이나 자잘한 기능면에서 더 나은 점도 있긴 하지만 

일단 제 입장에서는 미리보기만이라도 스킨이 적용된 화면으로 볼 수 있기 때문에 

MarsEdit도 꽤 쓸만한 툴이라고 생각됩니다.


밑의 추천 버튼을 클릭해주시면 조금 더 좋은 글로 보답하겠습니다.

(로그인 과정이 필요하지 않아요~! ^^)

반응형