오늘의 말풍선/말풍선수다

TISTORY - wysiwys.css는 어떻게 보일까?

Shain 2008. 7. 30. 02:00
728x90
반응형

(7월 28일 업데이트 이전 작성된 내용입니다. 포스팅한 부분은 업데이트 이후에도 같습니다)


이거 실험해보다가 한밤중에 혼자 부글부글 끓었었다는 걸 고백합니다. 거짓말 좀 많이 보태서 예전엔 css 편집은 자다가 일어나서도 할 수 있을 정도였어요. 이미지넣는 경로를 못 외우거나 색상 번호같은 걸 못 외워 그렇지 대부분은 타이핑해서도 잘 넣을 정도로 편집을 할 수 있었던 ....많이 과장된 기억이 있습니다(Believe or Not 수준이죠).  지금은 정말 편집하기 싫어 죽을 지경인데다 봐도 뭔 말인지 모른다는 소릴 먼저 하게 됩니다(몰라야 편하니까). 구조를 파악하기 시작하면 건드려야할 것같은 강박에 시달리는게 싫습니다.



별로 착하진 않은데 이런 미션이나 베타테스트 명령이 내려오면 시키는대로 또 해보는게 제 성격인가 봅니다. 간만에 위지위그.css를 적용해보겠다고 타이핑 또각또각해서 올렸는데 이게 적응이 안되는 겁니다. 분명 제 스킨은 베타테스트 블로그에서 지정했던 수정되어 있다는 그 스킨이었거든요I(Butterfly 블루 그거 말이에요). 원인이 무엇일까 싶어 따지다 보니 그때부터 수난이 시작됐습니다. 전에도 이야기했듯 전 뭔가 잊어버리고 집중할 일이 있으면 블로그를 만지는 성격이라 거의 몰입을 해버렸는데 초반엔 해결점이 안 찾아지더군요. 딴 생각 반 블로그 생각 반이다 보니 쉽게 알 수 있는 일들을 파악하지 못한 거 같습니다. 그 과정에서 일어난 일들을 적어봅니다.



wysiwys.css 실험 중 알게 된 사실 몇가지


한두가지는 정확하게 공지를 읽지 않았기 때문에 발생한 에러일 수도 있다. wysiwys.css를 잘 편집하면 웹에디터의 화면이 원하는대로 바뀌는 줄 알았는데 실험해보니 완벽하게 적용시키는 건 불가능했다. 현 버전으론 위지위그로 웹에디터 스킨의 모양을 완전히 조정할 수 없다는 말. 그리고 현 버전 에디터에도 일부 영향을 주고 있다는 걸 알게 됐다. 현 버전 에디터 역시 스킨에 따라 웹에디터의 글쓰기 영역이 조정되곤 했었는데 새로운 에디터에서부턴 스킨 모양이 에디터에 적용된다. 여하튼 기본 스킨을 적용시키는 것 이외에 사용자가 wysiwys.css로 조정할 수 있는 건 현재 없다.

현 에디터에도 이런 스크립트가 추가되어 있다.

구 에디터에 스크롤 부분이 변한 걸 알 수 있을 것이다. 에디터에 위지위그가 적용되려면 배경이미지와 제목 뿐만 아니라 글쓰는 영역의 크기가 조정되는 건 기본일 거다.



첫째, 아직 스킨위저드로 편집한 스킨은 적용되지 않는다
티스토리에서 운영하는 블로그 중 같은 아이디를 사용하는 건 두가지 뿐이다. 그중 하나는 이번에 밝힌대로 웹에디터와 스킨의 모양이 동일하게 보이도록 수정된 그 스킨을 쓰고 있었다. 바로 Butterfly 스킨이다. 위저드로 수정된 스킨은 적용되지 않는다는 사실을 모르고 wysiwys.css을 적용해봤지만 헛수고였다. 공지를 확인해 봤더니 스킨위저드로 수정된 스킨에 적용하는 부분은 아직 테스트 중이라 한다. wysiwys.css가 제대로 보이는 건 저 스킨을 원형 그대로 적용했을 때 뿐이다. 사용자가 수정해서 업로드한다고 전체적으로 바뀌거나 하진 않는다.


두번째, 사이드바가 달린 스킨은 적용할 때 조심해야 한다
굳이 서브블로그에서 실험한 까닭은 이 글을 쓰는 블로그 스킨에 무척 많은 사이드바가 달려 있는데 스킨 적용을 새로할 경우 모두 다시 셋업해야 하는 종류들이다. 덕분에 다른 블로그에서 실험을 계속했는데 한번, 실험 삼아 wysiwys.css 파일을 이 블로그에 한번 올렸다가 모든 사이드바를 다시 업로드 했어야 했다. 집이 아닌 곳에 있었기 때문에 구글의 저장된 페이지를 보고 페이지 소스를 복사해 올렸다는 불쌍한 블로그 주인장. 블로그가 하나일 경우엔 사이드바의 소스를 백업해두고 실험하길 바란다.

아직 스킨 영역은 공개되지 않았기 때문에 wysiwyg.css를 업로드할 때는 구버전을 이용했다. 그 파일 하나만 올려도 스킨의 설정은 초기화된다. 사이드바 백업 조심.


* 이번 7월 28일 업데이트 이후엔 스킨 저장 기능이 생겼는데(추후 포스팅 예정), 사이드바를 비롯한, 위젯, 플러그인, 배너들의 html 소스를 그대로 저장하는 지의 여부는 불투명하다(스킨 바꿀 때 마다 백업되는 부분이기에). 사이드바 때문에 백업 기능이 필요해진 티스토리.



세번째, wysiwys.css와  WYSIWYS.CSS는 다르다
위지위그의 철자를 쳐넣기 귀찮았던 나는 대충 베껴서 파일 이름을 저장했다. 아마 베타테스트 블로그에 있던 타이틀 그대로 복사해온 것 같은데 거기 예제로 올라온 css를 샘플 삼아 wysiwys.css를 만들어 올렸더니 아무리 해도 적용이 되지 않는다(물론 다른 이유도 함께 작용한 까닭이지만). 자세히 파일 올리기 부분에서 살펴 보니 wysiwys.css 파일을 이미지 파일처럼 아래 폴더에 올려버리는 것 아닌가. 결국 이유는 이 파일 이름이 대문자로 저장된 까닭이란 걸 알게 됐다. 개인적으로는 가장 기본적인 실수를 한 셈이다.



네번째, wysiwys.css를 올리면 웹에디터 스킨은 망가진다
버퍼플라이를 비롯한 5종의 스킨은 위지위그 css가 소스 상단에 입력되어 있다. 그래서 사용자가 wysiwys.css를 따로 추가하지 않아도 웹에디터의 모양이 스킨의 모양과 비슷한 형태로 변한다. 사용자는 에디터 상의 디자인을 보고 포스팅 이후의 모습을 짐작한다는 컨셉대로 이용할 수 있는 것이다. 원래 웹에디터라는 것도 스킨 처리가 가능한 종류라 사용자는 몰라도 에디터의 창크기는 스킨에 의해 조금씩 변하고 있었다. 이번 wysiwys.css로 그 변경 폭이 더 커진 듯하다. 아래는 실험 삼아 이 웹에디터의 모양이 변하는 지 보려고 여러 wysiwys.css를 업로드했던 결과.

스킨 선택에서 다섯 종류의 스킨 중 하나를 선택하면 웹에디터의 모양이 스킨 모양과 동일하게 변한다. 이 웹에디터 스킨 css를 변화시켜보는 실험.


이 웹에디터 스킨의 페이지 소스를 보면 이 스킨에 적용된 wysiwys.css를 읽어볼 수 있다. 파일올리기에서 다운로드할 방법은 없으므로 이 쪽의 소스를 읽어본다.


오늘 이 포스트를 쓰면서 알게된 사실 - 이 페이지소스 제법 자주 변하고 있구나 하는 점. 이 페이지 소스를 통해 이 스킨의 wysiwys.css를 알아낸다.


wysiwys.css로 페이지 소스에 있는 내용을 복사해 올리면 이렇게 웹에디터의 스킨은 깨져 버린다. 글쓰기 창의 크기는 스킨과 동일하게 줄어든 상태(적용하는 css가 다른 모양이다)


그래도 css 파일에서 바꾼 폰트 크기는 적용 된다. 12px이었던 폰트 크기를 15px로 바꾼 결과. 이 웹에디터의 스킨은 적용범위가 복잡하게 나뉘어 있는 모양.


5개의 스킨에 위지위그가 추가된 상태라 다음 스킨편집, 그러니까 스킨위저드를 비롯한 많은 css 편집시에 이 wysiwys.css도 함께 조정이 될 것같다. 아직까지는 미완의 기능이지만 '보이는대로 편집한다'는 건 꽤 매력적인 부분. 스킨에서 어떻게 보일 지 예상할 수 있기 때문에 미리보기 기능이 동시에 제공되는 셈이다.




웹에디터에 wysiwys.css가 적용된 모양


wysiwys.css가 적용된 스킨은 다섯 종류 뿐이다. 그 다섯종류의 스킨을 적용했을 경우 웹에디터가 어떻게 변하는 지 실험해 보았다. 나머지 스킨들 중엔 크게 변경된 모양이 없는 것으로 보인다. wysiwys.css가 수정되었다고 공개된 스킨 이외에도 적용되는 종류가 있었다(업데이트 중인 모양이다). 스킨 모양에 따라 어떤 웹에디터가 나올까. 당연히 단순한 스킨일수록 단순한 웹에디터가 나온다. 스킨 적용 후에 로딩을 워낙 많이 했더니 '티스토리 - 이용에 불편을 드려 죄송합니다'라는 메시지가 떴다. 과도한 실험 정신은 서버에 무리를 주나 보다..(물론 착각이겠지만 깔깔..)


Moving Box(Brown) 스킨 웹에디터가 가장 깔끔해 보인다.


Moving Box(Black) - 글씨가 잘 안 보이는 스킨.


Moving Box(Green)


Pure Black (Text)와 Pure Blue (Image)는 웹에디터 모양이 같다.


IS BASE 스킨은 거의 그대로 구현되었다.


Tistory ViewFinder 스킨도 거의 그대로 보인다.


Letter Box도 깔끔하다.


스킨위저드가 적용되지 않는 beetle_jade 스킨도 가능하다.


역시 스킨위저드가 적용되지 않는 fotowall 스킨.


이로츠 디자인 스킨 sdooops.v1a(3단형) 에도 적용.


Pure Sky - NoonFlower ep04 스킨.


Pure Sky - ep06 Black and White Drawing part1 스킨과의 차이를 모를 정도로 확실히 적용되었다.


m22m_3color_XHTML 스킨


Tiskin - Plum Flavor 티스토리 초기부터 유명했던 스킨.


Tiskin - Green Dayz 이 스킨은 정말 딱 그대로다 에디터 = 스킨.


rest_leaves 스킨. 스킨만큼이나 에디터도 심플한 매력.


Simple_BKO 스킨 XHTML


exfido.com / Blackk


Butterfly (Purple) - 수정하느냐 수없이 만난 스킨.


Butterfly (Red)


Butterfly (Black) - 에디터에서도 글씨는 잘 보이지 않는 편.


simpleWhite_Daisy 스킨도 멋지게 웹에디터 정착 성공.



위지위그란 단어는 웹초반부터 수없이 들어왔다. html 만으로 웹문서를 편집하던 시절에도 위지위그, 편리한 사용자 접근은 아주 중요한 테마였다. 웹 2.0의 시대에 들어섰다며 웹표준이 자리잡은 지금도 '사용자 편의'는 결코 포기할 수 없는 부분 아닐까. 과연 이런식으로 스킨을 웹에디터 안으로 들여온 에디터는 드물다는 생각이 든다. 지금도 꽤 많은 CSS 소스를 불러들이기 때문에 약간은 정신없지 않은가 싶으면서도 편리하고 기능성있는 주제를 보면 눈이 반짝하는게 사용자인가 보다. 최소한 미리보기를 자주 할 일이 없어졌다는 건 반가워할 일이다. 그렇지만 스킨위저드를 비롯한 개인적으로 손질된 스킨들에겐 불합리한 부분도 없잖아 있지 않을까 우려되는 것도 사실. 스킨위저드가 추가된 이후엔 스킨을 새로 구상하기 힘들어졌다. 새로운 매뉴얼을 숙지한다는 게 역시 힘든 탓이기도 하고. 그 부분 이외에는 꽤 반가운 기능이다.


728x90
반응형