이글루스 스킨 제작에 한계는 어디일까 라는 물음에 이런 미친짓(?)을 해보았다. html 코드는 있으나 마나 한게 이글루스인데, 모든 요소를 그냥 불러와서 자체 CSS를 입혀버리고 사용자가 노가다로 알아서 CSS를 입히라고 요구하는게 이글루스의 행태라서 스킨만드는게 여간 까다로운게 아니다. 티스토리야 거의 bare HTML을 만질수 있게 해주니까 나처럼 공들여서 페이지별로 스타일시트를 작성할게 아니면 클래스 하나 파놓고 공장식으로 찍어내듯 CSS 만들면 끝난다. 하지만 이글루스는 하나하나 클래스/ID 찾아서 CSS를 작성해줘야 하기 때문에 완전 생 노가다 이다. -_-;;
물론 티스토리 스킨을 제대로 만드는게 난이도가 훨씬 어렵지만 이글루스는 어렵다기 보다는 쌩노가다 이다 -_-. 아마도 이래서 이글루스에 스킨만드는 사람도 없을것이며, 스킨의 질이 하나같이 저질인 이유도 이 때문일 것이다. 그래도 이런 노가다를 하며 희열을 느끼는 마조히스트 이기 때문에 이번에도 스킨하나를 제작하고 있다. (6시간동안 CSS 만 작성했다. 후우....)
본론으로 들어가서, Hare for egloss는 Hare for Tistory의 이글루스 쌍둥이 버전이다. 두개의 스킨이 완전하게 동일한 CSS를 사용하고 있다. 물론 자바스크립트가 허용안되는 이글루스이기 때문에 스크립트까지 같이 쓸수는 없지만 어짜피 Hare for Tistory는 자바스크립트가 한줄도 안들어간 스킨이다. (물론 인라인은 있다. 외부 파일은 없음)
Hare for Tistory - 가장 빠르고 가벼운 티스토리 반응형 스킨
Hare의 초기 아이디어가 초경량 스킨이기에 거기에 맞춰서 코드를 짜다보니 스크립트를 최소화 할 수 밖에 없었고, 이 때문에 스타일시트를 만들어 놓은게 아까워서 이글루스 용도 만들게 되었으나, 오히려 이글루스 용을 만드는게 티스토리 만드는 것보다 시간이 더 많이 드는 주객전도 현상까지 생겨버렸다 -_-;;;;;;;
특히 이글루스는 특유의 지랄 같은 마크업으로 사람을 엿먹이는데, 베스트 오브 베스트를 꼽자면 input 속성에 버튼 이미지 할당을 src로 해놓은것. 와... 어떻게 사람 새끼가 이런 코드를 쓸수 있지....?
더욱 난감했던건 거의 3년전에 작성해둔 코드라서 뭐가 뭔지 하나도 기억이 안나더라... 특히 저 빌어먹을 input src를 없애고 svg버튼으로 바꾸는 방법을 3년전에는 알았는데 지금은 도무지 구현이 되지 않는다. 아마도 3년전의 나는 천재였는가 보다. 아니면 3년후의 내가 바보거나....
어찌 됐든, 결국에 구현하는 법을 찾아내서 복구하는데 성공했다. 다행이 scss파일이 다 남아 있어 마크업을 갈아 엎는데 용이했다. 지금은 도태된(그러나 XP1에서는 아직도 쓰고 있는) compass를 싹 걷어냈다. 사실 예전에 내가 compass를 쓰는 용도는 vender-prefix 때문이었는데, 지금은 autoprefixer라는 아주 신통방통한 물건이 있어서 더 이상 쓸모가 없어졌다. 현재 사용하는 티스토리 스킨(XP1)의 경우 버티컬 리듬과 스프라이트 용도로 쓰고 있는데, 날잡아서 코드를 싹 걷어낼 생각이다. compass를 쓰면 libsass로 컴파일이 안되기 때문에 무진장 느리다...
게다가 이글루스는 아직도 HTML4에 IE8에 최적화된 시스템을 쓰고 있다. 그래서 CSS가 4천단어가 넘어가면 자동으로 잘라버린다. 이 때문에 스킨을 재설치하면 사용이 가능하지만 수정을 하면 CSS가 깨지는 버그가 있었다. 이를 해결하기 위해 우리의 친구인 jsdelivr를 활용해서 거의 스킨의 모든 요소를 다 @import로 땡겨왔다. V2 부터는 스킨 벨리에서 바로 설치도 되고 수정해도 초기화 되지도 않는다.
이번 V2 업데이트의 주요 사항은 다음과 같다.
- 코드 간소화
- 이글루스 스킨 벨리에서 바로 설치가능
- 볼드체가 안뜨는 버그 수정
- 검색결과가 붙어나오는 문제 수정 (오류보고; Jiwoong kims님)
- 구식 코드 제거 (e.g. 구버전 크롬용 폰트 엘리어싱 코드)
- 로딩 속도 소폭 상향
- 스킨 수정해도 더 이상 스킨이 초기화 되지 않음
아무쪼록 생각없이 만든 스킨인데, 많은 분들이 써주셔서 항상 감사하게 생각하고 있다.
Hare for Egloos.zip압축파일을 사용해서 설치, 또는 이글루스 스킨 벨리에서 바로 설치가 가능하다.
압축파일을 사용해서 설치할 경우, 아래 설치 방법을 참고.
Hare for egloos -가장 빠르고 가볍고 '이쁜' 이글루스 반응형 스킨
※ 이전에 만들어 놓은 티스토리 스킨들도 마이너 업데이트가 계획되어 있으니 참고 바람.
