Xenosium: Season 2 Start!

제노시움: 시즌 2를 시작합니다. 코드네임은 스킨의 이름을 따라 “imaginCANVAS,” 한글로 “무한상상캔버스”입니다. 상상력을 마음껏 발휘하고 나타낼 수 있는 캔버스…이런 의미로 이름지었습니다. 만들고 나서보니 캔버스 보다는 스케치북에 더 가깝지만 말이죠. ㅎ_ㅎ;;

새로운 사이트 디자인을 구상하면서 여러가지를 생각해봤는데 결국 이런 느낌으로 완성되었네요. 컨셉은 캔버스, 스케치북, 워터컬러, 스케치, 낙서, 상상력 등, 뭐 이런겁니다. 🙂

새 스킨에 대해서

스킨을 처음 작업하기 시작한게 3월 10일. 첫 디자인 티저를 공개한게 3월 18일.중간에 시험 공부하느라고 몇주간은 작업하진 못했습니다만 끝낸 후부터 오늘까지 이번주에는 하루종일 스킨작업만 했네요. (4월신작 애니도 다 받아놓고 못 본…orz) 실제로 스킨 공개는 어제 이미 했습니다만, 공개후에도 배경을 많은 부분이 바뀌었습니다. 이제야 “완성”되었다고 할 수 있겠네요. 🙂

이번 스킨의 특징…이랄까.. 에 대해 약간 설명하자면:

• 완전히 새로운 코드

  이번 스킨은 전처럼 이미 있던 스킨에서 수정한 것이 아니고, 텅 빈 새로운 HTML/CSS 파일로부터 손수 코딩되어서, 불필요한 코드 없이 깔끔하게 짜여있습니다.

• 컨텐츠 중심적

  구독자들이 보다 컨텐츠에 집중할 수 있도록 사이드바를 제거하고, 대신 풋터를 만들어서 사이드바 컨텐츠를 옮겼습니다.

• 웹 표준 준수

  XHTML 1.0 Transitional과 CSS 3으로 코딩되었으며 W3C의 인증을 통과했습니다.

• jQuery

  jQuery의 풍부한 자바스크립트 라이브러리를 이용해 풋터나 툴팁등 유용하고 깔끔한 기능들을 구현했습니다.

전 스킨에서는 중간에 Fancybox만 적용해 사용했었는데 이번엔 아예 처음부터 jQuery를 엄두해두고 디자인했습니다. 정말 배울수록 너무 좋은것 같아요 jQuery는. 그래도 아직 제 자바스크립트 지식 레벨은 초보… 그저 남들 해놓은거 보고서 응용하는것 밖에는 못 합니다.ㅎ_ㅎ

블로그 포스팅 컨텐츠의 폭은 460px로, 기존 bloom:fx스킨보다 60px 확장되었습니다.

기본 폰트로는 네이버에서 배포하는 나눔고딕과 나눔명조를 사용했습니다. 한글 텍스트는 나눔고딕 > 맑은고딕 > 굴림 / 나눔명조 > 바탕 순서로 출력되어서 나눔서체가 설치되어있지 않아도 표시되긴 하지만 되도록이면 설치해서 원래 의도된 바 대로 보시기 바랍니다.

브라우저 호환성

다음으로 가장 중요한 건 역시나 브라우저 호환성. 바로 이전 포스팅에서 언급했듯이, 본 스킨은 Internet Explorer 6는 지원하지 않습니다. 따라서 IE6에서 사이트가 제대로 보이고 브라우징하는데 문제가 없을거라고 보장해드릴 수 없습니다. IE7에서도 보니 댓글 부분 등이 상당히 많이 망가졌는데, IE7까지 무시할 수는 없을 것 같아서 할 수 없이 억지로 조건 코멘트로 따로 스타일시트를 지정해줬습니다. 최대한 오리지널에 가깝게 튜닝(?)했지만 역시 완전히 고치는건 불가능이네요. IE6/IE7 사용자님들은 엄두해두시기 바라고, 가장 좋은 방법으로는 브라우저를 최신 버전인 Internet Explorer 8로 업그레이드 하시거나, 다른 브라우저를 이용하시기를 추천합니다.

• Mozilla Firefox 3.0 – 3.5.4

  (3.0.10, 3.5.4) 모두 원래 의도된 바 대로 아무 문제 없이 제대로 출력됩니다.

• Google Chrome 2.0 – 3.0

  (2.0.172.28, 3.0.195.27) 모두 제대로 출력됩니다.

• Internet Explorer 8

  (RTM/8.0.7100.0) 모두 제대로 출력됩니다.

• Internet Explorer 7

  컨텐츠를 보는데는 큰 문제가 없지만 여러 부분에서 크기나 여백등이 틀리게 출력됩니다. 또한 조건적 스타일시트에서 지정해준 대로 댓글/방명록 리스트의 숫자가 말풍선 아이콘으로 대체되었습니다.

• Apple Safari 4.0.3

  (531.91) 모두 제대로 출력됩니다.

• Opera 9.64 – 10.00

  (1750) 컨텐츠를 보는데는 문제가 없지만 댓글 리스트 부분, 방명록이 깨지고 페이지 밑에 큰 여백이 표시됩니다. 그리고 한글 폰트 자간이 개떡같이 표시됩니다. -_-;;

(이 부분은 수시로 업데이트됩니다.)

위의 브라우저에서 확인된 문제 외에 또 다른 버그들을 발견하시면 저에게 알려주시면 감사하겠습니다.

Xenosium: Season 2 has begun. The codename for this season is, just like the skin name, “imaginCANVAS.” The intended meaning was something like “a canvas where creativity and imagination can be freely expressed…” Although it’s more of a sketchbook than a canvas. 😛

I had a lot of ideas about what the theme/concept of the new site design would be, and after all that it came to this. Canvas, sketchbook, watercolor, doodles, imagination, color, splatter, pencil… you get the idea.

About the new skin

I first started working on the skin on March 10. First design teaser was revealed on March 18. Though I couldn’t work during some weeks because of the test I had to prepare, after the test I worked on this for a whole day all week till now. (didn’t even get to watch all the new anime this spring season! orz) I actually revealed the skin yesterday with my return posting, but ever since that many parts have been changed. Only now I can say it’s “done” 🙂

Lets talk about the… features about the new skin:

• A whole new code

  Unlike previous skins I’ve made, this skin is hand-coded HTML/CSS by me all from scratch. The code is clean withouth any any unnecessary unused lines.

• Concentrated on content

  To help readers concentrate on content more, sidebar has been removed but instead a footer has been created to contain sidebar features.

• Follows Web standards

  The skin has been coded in XHTML 1.0 Transitional and CSS 3, and has passed the W3C validation.

• jQuery

  Using jQuery‘s rich javascript library, many useful and pretty features like footer accordion and tooltips has been implemented.

In the previous skin I only applied Fancybox, but for this skin I had jQuery in mind all they way from the beginning. Every time I learn more about it, jQuery seems sooo nice. 🙂 but still my javascript knowledge is sooo noob… I’m just looking at other ppls’ codes and adapting into mine. 😛

Blog content column’s width is 460px, which is 60px more than the previous bloom:fx Skin.

Browser Compatibility

Secondly, an important topic in web design… browser compatibility. As I have said before in the previous posting, this skin does not support Internet Explorer 6. I cannot guarantee that my site will look okay in IE6 and that you will be able to browse my site without any problems. Even in IE7 my site looked pretty broken, but I thought I couldn’t ignore even IE7… so I made a conditional CSS file separate for IE7.

Thanks to the override stylesheet the site has been tuned as close to the original, but still there are many places that look broken. Please note if you are using IE6/IE7. The best way of course, is that you upgrade your browser to the latest Internet Explorer 8 or even better, use a different browser such as Firefox.

• Mozilla Firefox 3.0 – 3.5.4

  (3.0.10, 3.5.4) Everything displays fine the way it should be.

• Google Chrome 2.0 – 3.0

  (2.0.172.28, 3.0.195.27) Everything is fine.

• Internet Explorer 8

  (RTM/8.0.7100.0) Everything displays all right.

• Internet Explorer 7

  Displays okay and content is readable. However compared to the original many places show wrongly sized boxes/padding/margin etc. And because of the conditional stylesheet, the comment section’s list count numbering does not display, instead showing a comment icon.

• Apple Safari 4.0.3

  (531.90) Everything displays fine.

• Opera 9.64 – 10.00

  (1790) Main content is readable but the comment list section is broken, and a large margin is shown on the bottom of the page.

(This part of the post will be updated from time to time.)

Please let me know if you find any other bugs that I haven’t mentioned in above browsers.