이 블로그를 보는 데 필요한 두 가지
1. 구글 크롬
이 블로그는 구글 크롬에 최적화되어 있습니다.
구글 크롬은 가볍고 빠르며 무척 편리한 웹브라우저로, 특히 세계에서 가장 웹 탐색 속도가 빠른 브라우저의 하나로 알려져 있습니다.
제 블로그를 자주 찾는 분이시라면 구글 크롬을 추천해드립니다.
구글 크롬은 이 링크를 클릭하시면 도착하는 페이지에서 내려받아, 간단하게 설치 할 수 있습니다.
1. 구글 크롬
이 블로그는 구글 크롬에 최적화되어 있습니다.
구글 크롬은 가볍고 빠르며 무척 편리한 웹브라우저로, 특히 세계에서 가장 웹 탐색 속도가 빠른 브라우저의 하나로 알려져 있습니다.
제 블로그를 자주 찾는 분이시라면 구글 크롬을 추천해드립니다.
구글 크롬은 이 링크를 클릭하시면 도착하는 페이지에서 내려받아, 간단하게 설치 할 수 있습니다.
CSS3(아래 참조)를 적극적으로 사용하고 있기 때문에, 인터넷 익스플로러(Internet Explorer; IE)6, 7, 8에서는 제대로 보이지 않습니다(8의 경우 레이아웃은 정상출력).
구글 크롬 이외의 오페라, 파이어폭스, 사파리 등 웹 표준을 준수하는 최신 브라우저에서는 일부 효과를 제외하고 정상 출력 됩니다.
오페라의 경우는 제목에 적용된 마스크 효과와 브라우저가 지원하지 않는 그라디언트를 제외하면 크롬과 가장 근접한 90% 정도의 UX(User-eXperience)를 제공하고 있습니다.
모질라 파이어폭스는 애니메이션 효과(3.7부터 지원 예정)가 제대로 지원되지 않으며 제목 마스크 효과도 볼 수 없습니다만, 그 외에는 크롬과 완전히 같은 화면을 체험 할 수 있습니다.
사파리는 제가 테스트 해 보지 않았기 때문에 확신 할 수 없지만, 크롬과 같은 웹킷 엔진을 채용하고 있으므로 아마도 큰 문제 없이 제대로 내용을 보여 줄 것이라 생각합니다.
2. 나눔고딕 글꼴
더불어 네이버에서 배포하고 있는 나눔고딕 글꼴이 PC에 깔려있다면 더욱 깔끔한 화면을 즐기실 수 있습니다.
나눔고딕 글꼴은 네이버에서 무료로 배포하고 있으며, 상업적으로 재배포만 하지 않는다면 거의 제한없이 사용 할 수 있는 공개 글꼴입니다.
PC모니터, 특히 LCD모니터에서 가독성이 매우 우수하기 때문에 제 블로그 말고도 많은 블로그에서 나눔고딕 글꼴을 채용하고 있으니, 이번 기회에 깔아두시는 것을 추천해 드립니다.
나눔고딕 글꼴은 이 링크를 클릭하시면 도착하는 페이지에서 내려받아, 간단하게 설치 할 수 있습니다.
이 블로그의 스킨에 대하여
이 블로그의 스킨은 제가 직접 만든 것입니다.
배포는 전혀 계획이 없으나 스킨제작을 하시는 분들께 약간의 팁이나 도움은 드릴 수 있습니다.
이 스킨의 특징은 아래와 같습니다.
1. CSS3 도입
Cascading Style Sheet 3, 즉 CSS3는 현재의 CSS2.1을 대체할 차세대 규격입니다.
HTML5와 함께 많은 관심의 대상이 되고 있습니다.
CSS3의 가장 큰 특징은 종전의 CSS2.1이 지나치게 정적이었던 것에 반해, 무척 화려하고 동적인 페이지를 구성 할 수 있다는 점입니다.
애니메이션 효과나 그림 회전, 다양한 특수효과를 정의하고 있으므로 브라우저가 제대로 지원만 한다면 CSS2.1로 짠 페이지와는 비교도 할 수 없는 다양하고 이채로운 UX를 제공 할 수 있습니다.
이 블로그는 애니메이션 효과나 모서리 곡선 효과, 그라디언트 효과등 디자인이 너무 난잡해지지 않는 수준에서 CSS3를 적극적으로 사용했습니다.
RT 모듈을 제외하면 순수하게 CSS와 HTML만 가지고 제작했습니다.
어도비 플래시 같은 건 안 키웁니다. ^^
마우스를 올린 상태에서 색이 변한다거나, 클릭하면 또다시 색이 변하는 등의 다양한 효과와 더불어 title 태그를 활용해서 다양한 주석을 달려고 노력했습니다.
많은 부분에서 툴팁으로 출력되는 설명을 보실 수 있습니다.
문제는 IE6, 7은 CSS3는 물론 CSS2.1도 제대로 지원하지 못하며, IE8은 그나마 CSS2.1까지는 많은 부분을 지원하고 있지만 역시나 CSS3는(지극히 일부 속성을 제외하면) 전혀 지원하고 있지 않다는 점입니다.
따라서 이 블로그는 위에서도 적었지만 구글 크롬에서 가장 잘 보이며, IE를 제외한 최신 웹브라우저에서만 진면목을 체험 하실 수 있습니다.
2. 저용량
이 스킨에 사용되는 이미지 파일은 아이콘 크기가 대부분이며, 제일 큰 이미지 파일은 200x200px짜리 입니다.
그마저도 평소에는 볼 일이 거의 없으며 외부 계정에서 끌어오고 있습니다(정 궁금하시면 여기를 클릭해 보세요).
또한 자바스크립트 역시 외부 계정에서 불러와서 사용하고 있기 때문에 스킨 자체에는 자바스크립트등이 사용되지 않고 있습니다.
때문에 skin.html과 style.css를 합쳐 70KB도 되지 않으며 이미지 파일을 다 합해도 150KB를 넘지 않습니다.
텍스트큐브는 구조적으로 매우 방만하고 비효율적인 부분이 많아 스킨 파일이라도 이렇게 다이어트 하지 않으면, 네트워크 속도가 느린 곳에서는 로딩에 한도 끝도 없이 긴 시간이 걸리기 때문에, 애초 디자인을 단촐하고 심플하게 잡아 이미지 사용을 최대한 자제한 결과입니다.
3. 가로 해상도 1,000px 최적화
최근들어 LCD 모니터가 CRT를 대체하면서, 많은 분들이 1,280px이상의 고해상도 작업환경을 가지고 계십니다.
하지만 넷북이나 소형 노트북은 여전히 가로 해상도가 제한적인 경우가 많으며, 특히 스마트폰 등의 모바일 기기는 가로폭이 더욱 좁습니다.
여러가지 환경을 고려하고, 자체 조사 결과를 반영해 스킨의 가로폭을 1,000px로 정했습니다.
넷북에서도 가로 스크롤바 없이 자연스런 화면을 보실 수 있습니다.
본문영역 역시 728px로 정해서, 풀 브라우징이 가능한 모바일 기기에서도 사이드바를 제외한 본문만 보는 것이라면 큰 문제는 없습니다.
또한 모바일 기기에서 CSS를 제거하고 보실 경우도 가정해서, 본문을 소스코드에서 상부에 위치시켰습니다.
모바일 기기에서도 비교적 덜 불편하게 보실 수 있으나, 앞으로 CSS3 등의 최신기술을 적용해서 모바일 전용 페이지를 구축해 볼 계획입니다(일정은 미정).
스킨 배포에 대해서
스킨을 배포할 계획은 현재로서는 전혀 없습니다.
아직 이 스킨은 미완성이기도 하고, 완성된 이후에도 배포는 하지 않을 생각입니다.
제 블로그는 Unique를 지향하기 때문입니다.
의뢰를 주신다면 스킨을 디자인 해드리는 것은 가능하지만, 스킨 제작에 대한 일반적 팁이나 노하우 이외에는 제공해 드릴 수 없으므로 양해해 주시기 바랍니다.
스킨의 구조나 코드는 마음만 먹으면 누구나 쉽게 알아낼 수 있기 때문에, 정 궁금하신 분은 소스코드를 뜯어보시길 바랍니다.
디자인과 코딩도 저작권 보호의 대상이므로 디자인과 코딩을 그대로 가져가시는 것은 허락 할 수 없지만, 아이디어와 영감을 채용해서 다른 새로운 스킨을 제작하시는 것은 적극 권장합니다.
스킨 갱신 이력
클릭하면 갱신 이력을 엽니다

