toice's blog
toice's blog

wysiwyg.css 설정 후 테스트 캡쳐

태터툴즈 클래식에서 태터툴즈 1.0(모던)으로 가면서 에디터의 목표는 에디터에서 글 작성할 때와 블로그에 실제로 표시될 때를 동일하게 한다는 것이었습니다만 그 방법으로 태터툴즈 1.0이 택한 방법은 index.xml에서 에디터 넓이를 설정해주어 크기를 맞추는 것이었는데 한계가 있었습니다. 사용자마다 글자크기, 글자간격, 줄간격등의 차이를 보였고 그래서 그 부분에선 별 효과를 얻지 못했는데 이 부분에 티스토리는 계속 신경을 쓰고 있었나봅니다.

티스토리 베타에서 택한 방법은 WYSIWYG.CSS 라는 새로운 스타일시트를 만들어 에디터 전용으로 스타일을 지정하는 방법입니다. 기존 스타일시트를 분석해서 에디터에 적용시키는 방법은 초보자에게 더 쉽게 다가갈수 있었겠지만 새로운 파일을 만듦으로써 Blog view = Writer View의 기존 의도된 방법 뿐 아니라 사용자에 따라 자신이 글 작성하기에 편한 화면으로 세팅할 수도 있게 되었습니다. 개인적으로는 글작성시 DQ레볼루션의 CSS가 왠지 모르게 더 글쓰는 맛이 난다고 생각하기 때문에 그렇게 변경해볼까 고려중입니다.

사실 새벽에 wysiwyg.css를 만들어서 씨름을 좀 했는데 안먹히는 게 좀 있는 것 같습니다. 일단 줄간격 line-height 을 아무리 변화를 줘도 아무 변화가 없고 제목 부분은 바꿀 생각이 없었습니다만 혹시나 한번 다 해보자 하고 시도했는데  제목 부분에 text-align:center;로 가운데 정렬을 시도해도 안되더군요. 자간이랑 링크색 맞는 것만으로도 비슷해서 어느정도 만족스럽긴 합니다만 좀 더 연구를 해볼필요가 있을 것 같습니다. 전 블로그뷰, 글작성뷰 똑같은 것보다 개인적인 글 쓸맛 나는 환경으로 도전해볼 생각입니다. :)

p.s 제 블로그 화면은 700px인데 이상하게 에디터 화면은 690px라 그 점 때문에 처음에 맞추는데 애먹었습니다. 에디터 화면 넓이를 임의로 올려버리니까 스크롤이 생겨서 불편하고 그래서 결국 690px 맞게 비율을 맞춰버렸어요. 혹시 아무리 해도 블로그뷰와 글작성뷰가 다른 분들은 이 점을 고려해서 수정해보세요.

p.s2 다른 블로그에 티스토리측에서 wysiwyg.css를 제공한 스킨을 적용해보았는데 정말 멋지네요. 제가 현재 사용하는 스킨은 어차피 흰색이라 크게 변화될게 없는게 아쉬울 정도입니다.

스킨과 거의 흡사한 에디터 화면