Latibulum Luciferi

정말로 마지막 미션~
사실 좀 옛날에 뜬 거긴 하지만...;(미션 5와 6 사이였나...) 보너스 미션인 WYSIWYG.CSS입니다.
위지윅이라고 하면 What You See Is What You Get의 약자로서, 쓰임에 맞게 의역하자면 "보이는 대로 뜬다"는 것 되겠습니다. 한마디로 글을 작성하는 에디터에서 보이는 화면과 글을 보는 사람들이 블로그 포스트를 통해 보는 화면이 같다는 이야깁니다. 완성된 포스트의 미관을 위해 미리보기를 세 끼 밥 먹듯 애용하는 저로선 아주그냥 쌍수 들고 환영할 기능이죠T0T
그래서 미션 뜨자마자 가이드에 따라 CSS 파일을 만들어 봤는데 아뿔싸, 티스토리 측의 오류로 제목 부분 태그 반영이 안돼ㅠㅠ...
제가 태그를 잘못 작성했을 가능성도 있지만 버그신고 부분을 보니 저와 같은 현상을 보이는 분들이 한둘이 아니더라고요. 그래서 이건 티스토리 측 오류인 게 맞는 것 같아서 방명록에 건의도 남기고 곰곰이 따져 보니 기본 개념이 이상한 것 같아서 버그신고 쪽에 질문도 남기고 했지만 묵살당했습니다(...)

...는 설마 아니겠고, 담당자 분의 댓글에 따르면 댓글은 남기신 모양인데 아마 휴지통에 들어갔거나 한 모양입니다. 아무튼 저는 대답을 못 얻었고, 미션 마감날까지 기다리다가 이렇게 포스팅을 하고 있습니다.ㅠㅠ 바쁘기야 하시겠지만 기껏 메일로 CSS파일도 보내드렸는데 묵묵부답이신 티스토리 개발진 여러분들 정말 너무하세요ㅠㅠ


아무튼 그렇게 됐으니 얼른 미션 수행 들어가겠습니다.
우선 WYSIWYG.CSS 적용 부분입니다. 티스토리에서는 WYSIWYG.CSS을 새로이 개편하면서 Butterfly, IsBase, Moving Box, Pure, Tistory ViewFinder 스킨에 WYSIWYG.CSS를 적용해 놓았는데, 어떨지 몰라 버전별로 다 적용해 봤어요.

티스토리 제공 스킨을 보면 이렇게나 멋있게 적용이 되는데, 왜 사용자들이 만들면 적용이 안 되는 걸까요. 그것에 관한 제 의문을 여기다도 쓰려고 하는데... 우선 제가 적용한 에디터부터 보시겠습니다.

대략 이렇게 되었습니다. 본문 부분만 반영이 되고 제목 부분과 바탕 부분은 전혀 반영이 안 된 상태입니다. 제딴에는 분명히 티스토리 측의 가이드대로 파일을 작성했다고 생각했는데 아무리 고쳐도 이상하게 그렇게 되더라고요.
적용한 파일의 내용은 이렇습니다. (※티스토리 측에 보냈던 메일과는 내용이 다소 다를 수 있습니다. 어디까지 수정했는지 헷갈려서;)

@charset "utf-8";

body {font:0.75em/malgun Gothic, 1.5 Verdana, Gulim,  AppleGothic, Sans-serif; background:url(images/bg_violettaV2_wide_container_editor.gif) repeat-y center top; color:#666; text-align:justify;}
a:link,
a:visited { color:#AA78B2; border-bottom:1px dotted #FE46DD;}

#tx_canvas_wysiwyg_holder {background: url("./images/bg_lacebdr_violettaV2_wide.gif") repeat-y center 0 !important;}

#tx_canvas_subject_holder { background:url("./images/bg_title.gif") repeat-y right top #DFC3E1; }

#tx_canvas_subject { color:#fff!important; margin-left:10px; font: bold 14px malgun Gothic, Dotum;}

#tx_canvas_wysiwyg { }

#tx_canvas_wysiwyg 부분이 비어 있는 이유가 제 의문의 시작이 되는데요...
티스토리 측의 가이드를 보면 에디터 화면은 

이런 형식으로 구성되어 있다고 합니다.(※위부터 바탕/제목 장식/제목 글자모양/본문 부분)
즉 WYSIWYG.CSS에 들어가야 할 부분은 저 4부분이라는 거죠. 그런데 파일 형식을 보시면 생뚱맞게 body가 들어가 있습니다. body 부분은 가이드에서도 설명이 안 나와 있어요. 그래서 제가 처음에 쓰임을 착각하기도 했었는데...
아무튼 제가 CSS파일을 만들면서 이리저리 적용해 본 결과 body 부분이 #tx_canvas_wysiwyg 부분의 역할을 하고 있는 것 같더군요.. #tx_canvas_wysiwyg 부분은 어떤 내용을 넣어도 반영이 안 됩니다. 이 부분에 뭘 넣더라도 body에 내용이 없으면 말짱 꽝이더라는 거죠. 이렇게 될 거라면 차라리 body 부분을 #tx_canvas_wysiwyg 부분이라고 명시했으면 좋았을 텐데 하는 생각이 들었던 것이 첫 번째.


그리고 두 번째는 그렇다면 왜 나머지 파트는 모조리 반영이 안 되는 것인가?
혹시 바탕에 이미지를 넣으려고 해서 반영이 안 되는 건가 싶어서 단순 컬러만 넣어봐도 묵묵부답. 제목 부분도 마찬가지입니다. 어떤 태그를 넣어도 먹히질 않아요. 원래 WYSIWYG.CSS의 취지는 스킨 설정대로 에디터에서 보자는 거니까 처음에는 스킨에서 해당 부분을 긁어다가 집어넣었었습니다만 반영이 안 되니 뭐...
이 부분은 티스토리가 개편 컨셉이니 뭐니 해서 열심히 광고를 때렸던 만큼 조속한 조치가 필요하다고 생각하는데 다른 일들로 바쁘신 건지 영 피드백이 안되더군요. 뭐 베타 끝나고 나서도 정식오픈 때까지는 어느 정도 남은 것 같으니 그때 처리하실 생각이겠지만요.


세 번째는 본문 설정에서마저도 오류가 존재합니다.
위에 올린 CSS를 보시면 본문(body) 부분의 메인 폰트를 맑은 고딕으로 해 놨는데, 위의 캡쳐에도 있지만 글을 쓰고 있는 지금 전혀 반영이 되어 있지 않습니다. 왜 그런가 싶어서 한글로 '맑은 고딕'이라 쓴 걸 영어로도 변경해 보고 했는데 묵묵부답... 그런데 에디터에서 지원하는 폰트인 굴림/바탕/돋움/궁서 등은 반영을 하더라고요. 오류라기보다는 에디터의 한계인 것 같기도 합니다만, 제 경우엔 에디터 상에서 맑은 고딕을 사용해야 진정한 위지윅이 구현되는 것이기 때문에(비록 보시는 분들은 다른 폰트로 보신다 해도-.- 전에 맑은 고딕을 메인 폰트로 썼다가 한소리 들은 경험이 있어서 이번엔 안 썼어요) 이것도 개선이 되었으면 좋겠습니다.


흐아... 끝났다. 보너스 미션까지 해서 총 10개 미션 올클리어했습니다^^ 뿌듯하네요.
길디긴 소감은 뒷페이지의 미션 9에서 다 썼으니 여기서는 말을 아끼겠습니다. 이제는 여러분들이 원하시는 대로 덕후 포스팅을 할 수 있어요 기대하세요(...) 아니, 애초에 기대를 하시긴 했던가-_-;
아무튼 우선은 버그퇴치 쫌만 더 뛰다가 밀린 잠 좀 보충해야겠네요. 어찌됐건 끝났다 와아아아!!!!

드디어 마지막 미션입니다. 아직 보너스 미션이 남았긴 하지만 아무튼 공식적으로는 마지막 미션이니까!
저에겐 정말 길고도 긴 3주간이었네요. 일과 미션을 병행하는 게 생각보다 버거워서 많이 힘들었어요. 제대로 잠도 못자고 미션 포스팅하고 버그신고하고... 심한 날은 3시간 수면의 압박과 웬만해선 잘 안 생기는 다크서클의 향연 ㅋㅋ 역시 투잡(이지만 타임상 쓰리잡)은 많이 힘드네요. 거짓말 아니고 진짜 일과 미션 수행 말고는 아무것도 할 수 없었던 3주였습니다.ㅠㅠ 제가 워낙 멀티가 안 되는 탓도 있지만;


아무튼 이번 7월은 개인적으로 정말 눈코 뜰 새 없이 바빴던 것 같습니다. 오죽하면 요번 달의 포스트가 아크엔젤 님의 문답 포스트 말고는 죄다 미션 포스트로 수놓여 있을까요ㅠㅠ
블로그를 다소 버려 가면서까지 나름대로는 열심히 테스트를 했다고 생각하지만 돌이켜 보니 일만 좀 덜 했어도 좀더 열심히 테스트할 수 있었을 거라는 생각이 들어 좀 아쉽긴 하네요. 하지만 대체적으로 후회는 없습니다. 이런 유의 테스트에 이렇게 열심히 참여한 적은 처음이라니까요 ㅋㅋ 이제 테스트가 끝나면 잠도 좀 자고 밀렸던 취미생활도 좀 하고 그래야겠네요.


그럼 본격적인 소감문을 한번 써 볼까요. 여기서부턴 상당히 장문에 제법 쓴소리가 이어질 전망인데 저는 정말 티스토리의 발전을 위해 쓰는 거니까 오해는 마시고 봐 주시기 바라요. 서운해하시면 소심한 저는 슬퍼합니다ㅠㅠ


일단 다른 분들이 많이 지적해 주신 부분인데 베타테스팅 준비가 다소 미흡하지 않았나 하는 생각이 듭니다. 저는 사실 비스타/IE7이라는 다소 평범한 환경에 있는 사용자이기 때문에 사실 버그 신고를 하고 싶어도 할 내용이 없지 않을까 하는 생각을 테스트 처음에 했었어요. 그런데 공개된 기능을 보니까 솔직히 안정성도 좀 떨어지고(뭐라고 콕 집어 말할 수 없는 부분이지만 전 에디터에 비해 뭔가 흔들흔들 불안한 인상을 받았달까요;) 군데군데 완성이 덜 된 곳도 보이고 하더라고요. 그래서 지식 없는 전 버그 신고도 그쪽을 많이 공략했습니다만(...) 그렇게 사소한 건 솔직히 안 고쳐지는 경우가 더 많더군요(......)
그리고 베타 블로그에서 밝히길 티스토리 개발진이 가장 많이 소유한 환경은 FF3이라고 하던데, 그럼에도 다른 분들의 버그 리포트를 보면 FF3에서 일어나는 버그도 타 브라우저 만만치 않게 많더라고요. 그래서 지인과 농담으로 이 테스트는 베타테스터들 벌레 잡으라고 하는 테스트 아닌가 하는 말도 했었죠^^; IE 외의 브라우저는 쓰지 않는 저이기에 좀더 다양한 환경에서 테스트할 수 없는 게 좀 안타깝긴 했습니다만, IE 유저로서 할 일은 다 했다고 생각합니다.


또한 테스트하면서 절절히 통감한 부분이지만 개발진으로부터의 피드백이 생각보다 빠르지 못했다는 점이 개인적으로는 상당한 아쉬움으로 남아 있습니다. 좀있다 위지윅 CSS에 대한 보너스 미션을 올릴 생각인데, 전에 버그신고 게시판에 올렸던 질문에 대한 대답을 아직도 못 받았습니다.(자세한 사정은 보너스 미션에 있어요) 결국 위지윅 CSS는 베타 마지막까지도 미해결된 기능으로 남을 것 같습니다. 쓴소리 하는 김에 말씀드리지만 티스토리는 전 에디터 때도 그렇게 끝까지 나몰라라 한 버그가 몇 개 존재합니다 ㅎㅎ
그리고 저는 블로깅 특성상 이미지 삽입과 파일 업로드에 대한 건의를 정말 많이 했는데, 그 중에 해결된 건 이제 반 되려나... 제가 딱히 특이한 버그를 신고한 것도 아니라 중복이 제법 될 텐데 업데이트가 좀 더딘 게 아닌가 싶어요. 아니 물론 개발진 분들께 초인이 되시라는 건 아닙니다; 힘드신 거 잘 알지만 버그 퇴치에 우선순위를 두셨으면 하는 작은 바람이 있어요. 또한 버그 퇴치는 그래도 괜찮은데 사용자들이 요구하는 새 기능 추가에는 유독 인색하시더라고요. 기능 추가 면에서도 좀만 더 고려를 해 주셨으면 하는 아쉬움이 있습니다.
음 또, 이건 그냥 사소한 불평이지만 버그 신고 게시판만 보더라도 지금 며칠째 댓글이 안 달리고 있어요. 물론 쫑파티 준비와 베타 뒷정리 등으로 바쁘실 것은 압니다만, 물밀듯이 밀려오는 버그 신고에 개발진 여러분들도 다소 감당이 안 되었던 게 아닐까 싶습니다.


그래서 말인데, 베타테스터는 200명이 아니라 100명만으로도 충분하지 않았나 생각합니다. 그랬으면 좀더 집약적인 테스트가 가능하고 피드백도 좀더 빠릿하지 않았을까 하는 생각을 해보게 돼요. 환경의 다양함을 고려한 인선인 것은 알고 있지만, 어차피 환경의 다양함이라 해 봐야 제가 봤을 때 OS는 XP/비스타/맥/리눅스 계열? 은 있었는지 없었는지 모르겠습니다만 아무튼... 그 정도에 브라우저는 IE/FF/사파리/오페라 정도였던 것 같거든요. 거기다 테스터 여러분들 중에선 이 환경 중 몇 가지를 동시에 소유한 분들도 몇몇 계시고... 티스토리 새 기능의 버그가 OS와 브라우저 때문에 일어나는 버그라면 100명만으로도 충분히 캐치가 될 수 있었다고 봅니다. 인원수가 많다 보니까 버그 신고 게시판을 둘러보다 보면 중복 신고도 너무 많고 한 가지 버그에 대해서도 너무 많은 시선으로 인식을 하다 보니 다소 혼동되는 점이 있어 개발진 여러분들도 신고 접수에 많은 어려움이 있으셨을 것 같습니다. 그런 의미에서 중복 신고 방지 시스템이 구축되지 못했던 것도 다소 아쉽고요. 또한 참여율이 생각보다 높지 않았던 것도 그와 같은 맥락이 아닐까 합니다.


이 참여율에 대해선... 미션의 강도가 상당히 셌던 게 한몫을 할지도 모르겠네요. 저만 해도 포기하고 싶은 미션이 한둘이 아니었습니다; 제가 테스트를 하면서 몇 번 썼습니다만 이거 완전 전문가용 테스트 아닌가 싶을 정도로; 비전문가 테스터를 제법 간과하시는 면을 보여주기도 하셨습니다ㅠㅠ 미션 감당이 너무 안 돼서 두어 개 포기하신 분들도 제법 되는 걸로 알아요. 저는 같잖은 완벽주의 때문에 어떻게든 때우긴 했습니다만 오죽하면 30일 현재 미션 9개 중에 그나마 트랙백이 100개를 넘은 미션이 첫번째 미션 하나밖에 없겠나요. 다른 미션은 많아봐야 평균 80여 개, 미션 5부터는 점점 줄어서 트랙백이 평균 50개도 안되더군요. 테스터 분들도 많이 지치신 겁니다. 이래서야 참여율을 기대하고 200명씩이나 뽑을 건 없었다는 거지요; 한마디로 하는 사람만 한달까... 그런 느낌을 적잖이 받았습니다. 사실 이건 어느 일을 할 때나 어느 정도는 각오하고 하는 부분이긴 하지만 이 경우엔 좀 심하지 않았나 싶어요.


쓴소리를 길게 했습니다만, 그래도 저로서는 매우 즐겁게 테스트했습니다^^; 다음엔 어떤 미션이 나올까 두근두근 가슴졸이기도 하고, 버그 찾느라 기능을 둘러보면서 감탄도 하고 아쉬워도 하고. 베타 이후로 포스팅은 모두 새 에디터에서 하다 보니 이젠 전 에디터 쓰는 게 어색할 지경에 다다랐을 정도로 나름대로 애착을 가지게 됐어요. 이제 파일 업로드만 어떻게 좀 해결된다면 좋을텐데


그래서 결론은 베타테스터 시켜 주셔서 감사하다는 겁니다 ㅋㅋ 전 제가 뽑힐 줄 정말 몰랐기 때문에 선정됐을 때도 참 기뻤고 나름대로 열심히 하려고 노력했어요. 그 결과가 충실히 반영이 되려는지는 모르겠습니다만, 적어도 전 나름대로 본분을 다했다고 생각합니다. 앞으로 더 편리하고 좋은 티스토리가 되면 좋겠어요~


음 그리고 바라는 의견...을 쓰라고 하셨는데, 솔직히 제가 바라는 것도 다른 분들이 쓰시는 것과 별반 다를 게 있나 싶습니다. 그냥 피드백 좀 잘 해주시고(제발요ㅠ.ㅠ 신고를 받기만 해서는 해결이 안됩니다. 적어도 대답이라도 주셔야...), 플러그인과 스킨 추가...는 다른 분들이 충분히 목놓아 외치고 계실 테니까 저는 별 말 않겠습니다.ㅋㅋ
그리고 제일 중요한 것, 초심을 잃지 말고 항상 정진하는 티스토리가 되길 바란다는 것입니다. 항상 고객의 소리에 귀 기울이고 고객을 위한 서비스를 하는 것이 기업의 가장 큰 덕목 아니겠어요? 진부하긴 하지만 그만큼 통용되는 진실이기 때문에 진부한 거겠지요. 클로즈드 베타테스트 기간부터 티스토리를 꾸려왔던 (나름) 티스토리 터줏대감인(강조 ㅋㅋ) 저로선 사실상 그거밖에 바라는 게 없네요.
아, 그리고 실리를 중시한 소규모 운영...도 추가로 부탁드려 봅니다. 소규모 운영이라곤 해도, 이것저것 덕지덕지 끼워팔지 말라는 뜻이에요.^^ 타 매체와의 필요에 의한 융합이 아닌 쓸데없는 기능 추가가 없었으면 하는 바람입니다.


글이 정말 길군요^^; 처음엔 뭘 써야 하나 했는데, 아 역시 나란 녀석은(...)
아무튼 쓰고픈 건 위에 다 썼고, 앞으로 정식 새 오픈까지 달라진 티스토리의 모습을 기대하면서 저는 이만 미션을 끝내려고 합니다. 이 뒤에 보너스 미션이 따라붙긴 하겠지만 사실 글은 다 작성해 놓은 상태거든요 ㄲㄲ
막상 끝내려고 하니 상당히 아쉬운데, 이제 그만 떨치고 저도 제 생활로 돌아가야겠습니다. 티스토리 개발진 여러분들 그동안 정말 고생 많이 하셨고 베타테스터 분들도 많이 애쓰셨습니다. 그동안 감사했고 새 티스토리에서 만나요^^

8번째 미션...!
아아 고지가 눈앞에 보입니다... 요즘 체력적으로 너무 힘들어서(방학 들어 하루 평균 수면 시간이 3~4시간을 못 넘습니다;) 솔직히 베타테스트가 얼른 끝났으면 좋겠다는 생각도 막 해요. 뭐 딱히 다른 분들보다도 열정적으로 테스팅에 임하는 것도 아니긴 하지만;; 그래도 지금 상황에선 여기에 여가 시간을 가장 많이 투자하고 있다고요. 이 나름의 노력을 티스토리 개발진 여러분들이 알기는 하실는지ㅠㅠ;

아무튼, 이번 미션은 나만의 노하우를 알려달라는 건데.....
뭐야 점점 전문가용 테스트로 가고있잖아 진짜 이럴래 티스토리 ㅇ<-<
라는 게 제 본심TㅛT;;;
지난번의 서식도 그렇지만 저는 정말 글을 제멋대로 쓰는 사람이라 딱히 남한테 자랑스러이 알려줄 만한 거창한 노하우가 없어요. 개인적 취향 때문에 글을 미관적으로 좀 괜찮아 보이게 쓰려고 노력하기는 하지만 그건 노하우랄 것도 없는 소위 노가다의 산물이기 때문에 공개해도 부끄럽기만 하고; 역시 베타테스트란 건 전문가들한테나 맡기는 거였나 싶어서 소심해지고 있지만;;; 뭐 그래도 기왕 여기까지 온 거, 하는 만큼 해보도록 하겠습니다. 그래서 결과가 좋으면 다행인 거고 아니어도 뭐 orz...

그럼 8번째 미션 수행 시작할게요ㅠㅠ
저의 활용 팁이라고 할 만한 건 정말 없지만 굳이 하나 꼽아 보자면 위젯이나 배너 등을 사이드바 요소로 관리하기 정도가 아닐까 싶네요. 사실 이건 새 에디터에 대한 이야기도 아닌 데다 노하우라고 하기도 너무 민망한 게, 그냥 개인적으로 편해서 자주 사용하는 방법일 뿐이고 솔직히 요런 꼼수는 알 만한 분들은 다 아실 터라(...) 쓰기 정말 뭐하긴 하지만 그래도 한번 써봅니다.

우선, 사이드바 요소로 관리한다는 게 뭐냐면 한마디로 사이드바에 덕지덕지 붙일 수 있는 온갖 것들을 사이드바 요소로 인식시킴으로써 티스토리의 사이드바 설정은 물론 개별적인 관리가 가능하다는 겁니다. 보통 위젯 같은 건 html의 사이드바 부분에 스크립트를 붙여넣기만 해도 사이드바에 정착이 되는데, 개인화 스킨 중에는 그게 안 통하는 것도 존재한단 말이죠. 예를 들자면 제가 지금 쓰고 있는 이 스킨이라든가-_-; 단순 붙여넣기만 해서는 사이드바에 저어얼대 출력이 안됩니다. 왜 그런지 정말 알고 싶지만 이쪽 분야에는 심히 취약한 관계로 잘 모르겠고요;

아무튼 그래서 어떻게 하면 이걸 넣을 수 있을까 하고 고민하다가 생각해낸 게 <s_sidebar_element></s_sidebar_element> 태그를 스크립트 앞뒤에 둘러쳐서 사이드바 요소로 인식시키는 거였어요. 그렇게 하니까 기를 써도 안 나오던 위젯이 너무 잘 나오는 거... 그때까지 고민한 게 바보같을 정도로 말이죠;

예를 들면 지금 사이드바 맨 위를 차지하고 있는

요 띠 모양의 시계...
http://www.clocklink.com/에서 제공하는 무료 시계 위젯입니다. 저는 제 블로그의 메인 컬러에 맞추느라 저런 무난한 디자인을 가져왔지만 링크 따라가 보시면 별별 디자인이 많아요. 가끔 시계 디자인 업데이트도 해 주니 관심있으신 분들은 체크해 보세요.
이 시계 위젯의 스크립트는

<script src="http://www.clocklink.com/embed.js"></script>
<script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="5008-purple2.swf";obj.
TimeZone="GMT0900";obj.width=220;obj.height=22;obj.wmode="transparent";showClock(obj);
</script>

이건데요, 티스토리에서 배포하는 정식 스킨(여기서는 "Moving Box(Brown)")에 스크립트만 붙여넣으면 위젯이 그대로 구현되는 것을 확인했습니다.

하지만 제 스킨에서는
 

이런 식으로 태그를 만들어 줘야만 사이드바에 제대로 정착을 합니다. 이 시계 위젯 뿐만 아니라 전에 잠깐 있었던 날씨 위젯이나 아래의 프리 배너들, 라이프로그도 모두 이 방법으로 넣었어요.


뭐 사실 좀 귀찮기는 한데 이건 이것 나름대로 좋은 점이 있습니다. 우선은 위의 캡쳐대로 <!-- 시계 위젯 --> 이라는 주석을 달아 놓고 티스토리의 사이드바 설정에서

이런 식으로 사이드바 요소의 하나로 취급하여 자유로이 넣었다 뺐다 하거나 위치를 자유로이 바꿀 수 있다는 것입니다. 그냥 html에 붙박아 놓는 것보다 여러 모로 편리하죠. 특히 저같이 변덕이 하늘을 찌르는 사람에게는 ㅋㅋ;


그리고 또 하나 편리한 점은 Div id를 지정해서 CSS를 이용한 여러 효과를 넣을 수 있다는 점이에요. 물론 이 경우는 딱히 사이드바 요소가 아니어도 가능하긴 하지만 일단 저는 이런 식으로 많이 쓰고 있고 이것도 팁이라면 팁이니까 씁니다 ㅋㅋ 단, 이건 어디서 배운 게 아니라 저 혼자 터득한 것이라 오류가 있을 수 있으니 주의해 주시길 바라요.

 <s_sidebar_element>
       <!-- MSN Live Messenger -->
              [##_msn_ime_widget_##]주인장과 MSN으로 대화하기 (※ msn_ime_widget의 ()은 []가 맞습니다. []로 그대로 적으면 포스트에선 보이지가 않아서;) 수정. 엔즐 군 님의 팁으로 포스트에서 치환자를 그대로 나타낼 수 있게 되었습니다. 이런 거야말로 진정한 팁인데 말이죠 orz... 아무튼 엔즐군 님 감사합니다^^
</s_sidebar_element>

이건 사이드바의 MSN 대화 아이콘을 사이드바 요소로 만들어 놓은 건데요, 그냥 이렇게만 해서 올리면

이런 결과가 나옵니다. 이것은 공지사항과 MSN 아이콘을 같은 선상에 놓으려고 한 저의 의도와는 어긋나는 모습이죠. 이럴 때 필요한 게 간격 조절 태그인 margin인데요, 이 태그는 CSS에서 구현하는 태그이기 때문에 특정 div id를 만들어야 그 id 범위의 속성을 바꿔줄 수가 있어요. 그래서 저는 위의 태그에 div id를 붙여서

<s_sidebar_element>
      <!-- MSN Live Messenger -->
            <div id="messenger">
                   [##_msn_ime_widget_##]주인장과 MSN으로 대화하기
            </div>
</s_sidebar_element>

이렇게 만들어 주고 CSS에는

#messenger {margin-bottom: -16px; margin-left: 8px; margin-top: 15px;}

이런 속성을 줬습니다. 그렇게 해서 나온 결과물이

이것이지요. 제가 원하는 공지사항 일체형의 MSN 메신저 폼이 완성되었습니다.

...보시면 아시겠지만 이거 꽤 많은 거기다 쓸데없는 노동을 요하는 작업입니다. 자기 구미에 맞는 간격을 찾아 이리 헤매고 저리 헤매야 하니 말이죠ㅠㅠ 워낙에 성격이 이상한 데서 꼼꼼해서 이런 거 엄청 신경씁니다; 이런 거 하느라 스킨 고치는 데 삽질하는 거예요(...)
그래도 위젯이나 배너를 자기가 원하는 대로 예쁘게 넣기에는 좋은 팁이니 관심 있으신 분은 한번 시도해 보시는 것도 좋을지도요?^^