블로그 스킨을 바꿔봤습니다.

2009.11.26 21:26
그냥 문득 블로그 스킨을 바꿔보면 어떨까 해서
기분을 전환하는 겸해서 한 번 바꿔봤습니다.

우연히 스킨자료실에서 하이바님께서 올리신 스킨을 보고
'이거다!' 느낌이 왔고 아주 만족스럽습니다.

하지만, 항상 바꾸면서 드는 생각은 일본어 출력에 관한 것입니다.

저는 개인적으로 익스플로러는 사용하지 않고 FireFox만을 사용하고 있습니다.
인터넷 뱅킹이나 기타 ActiveX를 사용할 일이 있으면 VM을 돌립니다. ' ';

FireFox에서 글꼴 출력을 한글은 나눔고딕, 일어는 명료(meiryo)로
나눠서 출력하기 때문에 나름대로 만족스럽게 지내고 있었지만..
(한글글꼴에 포함 된 일본어 글씨체가 보기 좋지는 않더군요)
VM에서 일을 보다가 갑자기 생각나서 제 블로그에 들어와보니
FireFox에서 본 것과 좀 다른 것을 느끼고 어떻게 하면 다른 사람들도
내가 보는 페이지를 보게 할 수 있을까 하는 것을 생각하게 됐습니다.

FireFox에서 본 화면


이것은 제가 FireFox 상에서 본 제 블로그 일부인데..
아래에 있는 익스플로러와 조금 차이가 나는 것이 보일겁니다.

Explore 8.0에서 본 화면


캡쳐를 하기 위해서 익스플로러를 돌려봤습니다.
일단 날짜와 제목 사이에 있는 간격이 차이가 나는 것이 보입니다.

한글은 제가 나눔고딕을 설치해서 윈도우 상에 있기 때문에 어디서든 다 똑같이 보이지만
일본어의 경우는 상당한 차이가 나는 게 보입니다.

FireFox에서 본 화면


이것은 FireFox에서 본 모습이고..

Explore 8.0에서 본 화면


이것은 익스플로러에서 본 모습입니다.

이 스킨을 제작하신 하이바님께서 워낙 이런 디자인에 능하신 분이셔서 여기저기 보면
상당히 꼼꼼하게 잘 디자인을 하셨다는 것을 느끼실 수 있을 겁니다.

제 FireFox는 글꼴출력을 무조건 나눔고딕 & meiryo 로 고정출력 하기 때문에
아래 익스플로러에서 나타나는 숫자와는 상당히 차이가 나지만
하지만.. 일본어 만큼은 어쩔 수 없군요. ㅠ,.ㅠ;
특히 약자를 표현하는 데 있어서 상당한 부자연스러움이 나타납니다.

일본어로 출력할 부분을 클래스로 정해서 따로 출력을 시킬까.. 도 생각을 하고 있지만
그렇게 하기에는 또 귀찮음을 동반하는 작업이 시작되므로;;

... 뾰족한 수가 딱히 떠오르지 않네요.

What's on your mind?

※ 티스토리 사용자는 여기를 클릭하면 바로 로그인 됩니다 ※
댓글 입력 폼



Comments

  1. Favicon of http://hi8ar.net BlogIcon hi8ar 2009.11.27 02:11 신고

    안녕하세요.. 일본어라.. 영문에 대해서는 많이 고민해 봤는데.. 일본어는.. 흥미롭네요! :)

    올려 놓으신 캡쳐 이미지를 보니, FF는 브라우저 설정에서 언어별로 강제 조정하신 것 같습니다요.. IE는 한글과 일본어가 나눔고딕으로 출력되고 있는것으로 보이구요.. 한자는 나눔고딕에 포함되어 있지 않으니.. 나눔고딕으로 나오지 않을 거구요..;; (아무런 글꼴 강제 설정이 없는 제 FF에서도 그렇구요.. :)

    기본적으로 FF는 css 에 적혀 있는 글꼴 순서 대로 글꼴을 찾아 갑니다. 제일 앞에 적혀 있는 글꼴에, 해당 언어의 정보가 없다면, 다음 글꼴에서 찾습니다. 적혀 있는 마지막 글꼴까지도 정보가 없다면... 시스템의 기본 글꼴로 출력하게 됩니다.

    때문에, 일본어와 한자는 Meiryo로 출력하고, 한글은 나눔고딕으로 출력하는 것이 목표라면.. css 에 글꼴 정보를 다음과 같이 Meiryo를 가장 앞에 적으시면 될 것 같습니다. (완전한 테스트는 하지 않았습니다만..)

    font-family: Meiryo,NanumGothic,나눔고딕,"Malgun Gothic","맑은 고딕",Arial, Sans-serif;

    물론 이는 Meiryo 와 나눔고딕이 모두 설치된 시스템에서 볼때만 가능하겠습니다. Meiryo 가 비스타에는 포함되어 있는지 모르겠으나, 윈도7에는 포함이 되어 있군요. (아, 물론 이 경우엔, Meiryo가 영문 정보를 가지고 있을 테니, 영문 글꼴에 영향을 미칠 수 있습니다. 아마 Meiryo 의 영문 글꼴은 맑은 고딕의 그것과 비슷할 것으로 생각됩니다.)

    그렇다면 IE 는?? 아쉽지만 css 만으로는 방법이 없습니다. IE는 첫번째 글꼴이 시스템에 있고, 첫번째 글꼴에 다른 언어의 글꼴 정보가 없다면, 그저 시스템에 설정된 기본 글꼴로만 출력합니다.


    제목 따위에 일본어에만 클래스를 주는 방법이라면?? 어떤식의 방법을 생각하신건가요? 스크립트?? :)

    암튼, Meiryo 를 제일 앞에 적어 놓는 것 만으로도, 윈도7 + FF 에서는 정말 예쁜 모습을 보여 주는군요! 덕분에 배워갑니다.. :)

    perm. |  mod/del. |  reply.
    • Favicon of http://hi8ar.net BlogIcon hi8ar 2009.11.27 02:15 신고

      Meiryo 의 영문은 맑은 고딕 보다는 verdana와 더 비슷해 보이는 군요! :)

    • Favicon of http://skyume.tistory.com BlogIcon BlueEyes 2009.11.27 03:04 신고

      답변 감사합니다.

      대다수의 사람들이 거의 익스플로러를 사용할 것이라는 가정을 하게 하고, 그래서 항상 기준이 익스플로러가 된 다는 것이 안타깝게 하네요. ' ';

      파이어폭스를 이용하시는 분들을 위해서 일단 설정은 바꿔두도록 하겠지만, 대다수 익스플로러를 사용하시는 분들까지는 역시 미치지 못하는군요.

      혹시나.. 한 마음에 문의를 드렸지만 역시나군요. ' ';
      관심을 가져주셔서 감사합니다. ^-^;

  2. c군 2009.11.27 05:07 신고

    딴데 들어온줄알고 깜딱 놀랬음...

    perm. |  mod/del. |  reply.
  3. Favicon of http://shar.kr BlogIcon Shartia 2009.11.27 08:09 신고

    이 스킨... 정말 명작인 것 같습니다.
    큼직하면서도 지저분하지 않고 깔끔하여 보기 편안하니 말이죠...

    다만, 스킨의 완성도가 높은 탓(?)인지 이 스킨을 선택하시는 분들이 상당히 많던데요... 결국 비슷비슷해져서 자신만의 블로그 특색이 잘 드러나지 않는 것 같아 조금 아쉽습니다.

    perm. |  mod/del. |  reply.
    • Favicon of http://skyume.tistory.com BlogIcon BlueEyes 2009.11.27 08:42 신고

      제가 블로그 활동을 한 지 얼마 안 돼서 잘 모르는 건지도 모르겠지만,
      여러 블로그를 다녀봤지만 아직 이 스킨을 사용한 블로그는 못봤어요 'ㅅ';;
      그런데 많이들 사용하시는 것 같네요.

      뭐, 가장 좋은 것은 직접 디자인 해서 만드는 것이 좋겠지만,
      디자인은 분야가 아니고 또 한다고 하더라도
      많은 시간이 소요될 듯 싶기도 하구요.

      대신 이런 고마우신 분들 덕분에
      저희가 편하게 지낼 수 있는 거겠죠? ^-^;

  4. Favicon of http://onelove1986.tistory.com BlogIcon 준근 2009.11.29 23:25 신고

    저기 궁금한게 있는데요,
    사이드바에 있는 category, tag cloud등의 글씨사이즈는 어떻게 줄였나요?
    포스트제목사이즈는 줄였는데 사이드바의 글자는 어떻게 줄이는지 모르겠어요..

    perm. |  mod/del. |  reply.
    • Favicon of http://skyume.tistory.com BlogIcon BlueEyes 2009.11.30 08:36 신고

      전 포스트 제목 사이즈와 최근 댓글과 트랙백을
      두 줄로 만든 것 뿐이라서;;

      다른 건 손 대지 않았지만,
      다만 사이드바에 관련된 것이라면 /images 에 있는
      sidebar.css 를 손 보시면 가능할 거라 생각됩니다.

      잘 살펴보세요~ ^-^;;



티스토리 툴바