Xenosium: Season 2 Start!

2009/04/17 03:58 / Xenosium

resize


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

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

새 스킨에 대해서

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

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

  • 완전히 새로운 코드

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

  • 컨텐츠 중심적

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

  • 웹 표준 준수

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

  • jQuery

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

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

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

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

브라우저 호환성

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

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

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

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




User image

어머니! 저는 드디어 스킨을 완성해내고야 말았습니다!!! 아아 감격ㅜㅠ


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. :P

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. :P

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.

resize
  • 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.




User image

YESS MOM I DID IT!! I FINISHED THE SKIN!!! TwT

responses

23 comments

  • muhootsaver 2009/04/17 08:26

    Edit Reply

    이야~ 밑의 링크라던지 상당히 신경쓰셨네요. ^^ 멋집니다.
    • Kimatg 2009/04/18 15:17

      Edit

      신경 마~아니 썼습니다 ㅎㅎ 열심히 한 보람이 있네요.
      감사합니다 ^^
  • XROK 2009/04/17 10:29

    Edit Reply

    앞으로도 기대하고 있겠습니다 :)

    늘 글 잘 보고 갑니다 yo-
    • Kimatg 2009/04/18 15:17

      Edit

      앞으로도 잘 부탁드립니다! yo-
  • 아크히츠 2009/04/17 16:12

    Edit Reply

    이야, 정말 수고 많으셨습니다~
    저도 홈페이지를 jQuery로 새로 꾸미고 싶은데 귀찮다는 ㅋㅋ
    (실력도 모자라고)
    • Kimatg 2009/04/18 15:19

      Edit

      저도 앞으로 jQuery를 좀 더 배워봐야겠어요. HTML/CSS만 하다가 자바스크립트를 보니 이거 완전 신세계더군요! ㅎㅎㅎ
  • haha 2009/04/18 15:07

    Edit Reply

    congrads
    • Kimatg 2009/04/18 15:19

      Edit

      lol what do you have your name for? :P
      thx anyways :)
  • kevinayP 2009/04/19 01:21

    Edit Reply

    Congratulations!
    Can't wait to read more of your posts =3
    • Kimatg 2009/04/19 17:36

      Edit

      Thanks man! Hope I can write more posts from now on :)
  • 아크 2009/04/19 15:14

    Edit Reply

    죽인다!!!넌천재다!!!!부럽다!!!!!!!!!!ㅁㄹㅇㅁㄴ러매ㅔㅑㅈㄹ퍼ㅑㅐㅔ먼이럼ㄴ패엄ㅈ,ㅣ르퍼ㅣ믄ㅇㄹ패ㅔㅓㅊㅌ
    • Kimatg 2009/04/19 17:37

      Edit

      허허허허헣 쑥스럽게 왜이러시나 헣ㅎ허허허허허 뭐 좀 태어날때부터 천재기질이 있다는 소릴 듣긴 했지만 헣허허허허헣ㅎㅎ... (도주) =3=3=3
  • 徐하늘 2009/04/22 12:16

    Edit Reply

     요즘 바빠서 잘 들르지 못했습니다. 뭐... 그렇단 건데, 시즌 2 되고, 예상했던 대로 많이 가벼워졌네요.
     속도도 꽤 빨라졌고, 전체적인 이미지가 심플한게 그런 듯 해요.

     Helvetica는 진리죠.

     폰트 렌더링 방식 탓에 사파리가 훨씬 나은 듯 하더라고요. 불여우에서 보는 거보다는...
    • Kimatg 2009/04/22 16:30

      Edit

      좀 더 가벼워졌을려나요? ㅎㅎ
      얼마전에 맥샵에서 한번 들어와봤는데 몇몇 부분을 빼고는 사파리에서도 잘 나오더군요. ㅎㅎ

      그나저나 헬베티카는 진리! 우왕굳ㅋ
  • 강철지크 2009/04/26 11:05

    Edit Reply

    새롭게 바꾸신거군요.
    멋집니다.
    • Kimatg 2009/04/26 21:24

      Edit

      넵! 이제 시즌 2입니다! ㅎㅎ
  • Indier 2009/04/28 08:46

    Edit Reply

    Kimatg님 테마 바꾸셨으니 저번 테마는 저에게 넘기시죠..ㅋㅋ
    • Kimatg 2009/04/26 21:25

      Edit

      아무래도 저번 테마를 수정해서 조만간 올릴 계획입니다. 기다려주세요. :)

      아그리고 참고로 제 필명은 Kimatg입니다 ㅎㅎ;
  • 하얀별 2009/05/01 19:22

    Edit Reply

    jQuery라 엄청 다방면으로 사용 가능하다고 하던데……. 일단 CSS와 XHTML부터 마스터 하고 JS들어가서 보아야 겠군요. 그나저나 스킨(테마)하나 만들려면 배워야 할것이 많은 것 같습니다. XHTML, CSS, JS, PHP, FLASH…….
    • Kimatg 2009/05/01 19:31

      Edit

      후후 저도 아직은 HTML과 CSS밖에 몰라요. jQuery는 그저 이미 쓰여져있는 코드 보고 응용하는 정도... 근데 정말 일반 javascript에 비해서 마크업이 상당히 간단한것 같아요. 조오타! ㅎㅎ
  • Rudals 2009/12/23 16:16

    Edit Reply

    와~ 역시 심은대로 거두었네!
    형 진짜 축하해! 그리고 스킨 너무 너무 멋있어.
    형 완전 천재지!
    그리고 책을 들고 있는 사진 말야... 형이야???ㅋㅋㅋ
    • Kimatg 2009/12/26 19:39

      Edit

      ㅋㅋ 노력한만큼의 결과는 나온듯...
      음 천재는 아니고... 그냥 좀 이쪽으로 재능이 있는 정도라고나 할까. 하하하
      짤의 사람은 나 아님. ㅎㅅㅎ

      메리크리스마스~
  • Rudals 2009/12/25 21:12

    Edit Reply

    Merry Christmas

Submit