티스토리 스킨 제작은 너무 번거롭고 힘든작업이라서 매번 하지는 못합니다. 그러나 스킨 변경이 가능한 몇몇 사이트들은 티스토리 스킨 변경하는데 비해서 아주 적은 노력만으로도 스킨을 바꿀수 있습니다. 물론 제약이 티스토리보다 커서 완전히 뜯어고치기는 힘들지만요. 실력 갈고닦는 개념으로 루리웹 마이피 스킨제작에 이어서 이글루스 스킨제작에 도전했습니다.
이전 마이피는 아무 계획없이 순수 CSS만으로 삽질했던데 비해서 이번 것은 PURE 프레임워크를 기반으로 만들어서 금방 만들었습니다. 사실 이번에 티스토리 스킨 바꾸면서 사용하며 되게 만족한 파운데이션이나 스켈레톤, HTML5 보일러플레이트, 그럼비, 그리고 새로나온 부트스트랩3도 고려를 해보았습니다. 제가 방금 말한 5개 프레임웍의 공통점이 뭔지 아시나요? 네, 그렇습니다. 노멀라이징이나 모더나이즈를 자바스크립트로 구현을 한다는 것이죠.
이글루스는 독립된 서비스로 시작했다가 네이트에 인수되고 마이너스의 손 네이트가 말아먹고 존폐위기 까지 갔다가 ZUM인터넷(이스트소프트)가 인수했습니다. 이글루스는 HTML수정과 CSS 수정을 지원하는데요, 그게 아주 제한적입니다. 그리고 제일 병신 같은것은 자바스크립트 사용을 허락하지 않습니다. -_-; 그래서 위에 나열한 5개의 프레임웍중 단 하나도 사용할수가 없습니다. (노멀라이징이 안되면 화면에서 구버전 브라우저에서 개판으로 깨집니다) 외부 CSS 업로드도 지원하지 않기 때문에 하나의 파일에 우겨넣어야 하는데요, 아주 귀찮고 짜증납니다. 물론 전 Sass로 작성하고 Compass로 컴파일 하기 때문에 여러개의 SCSS 파일을 클릭한번으로 합칠수 있지만 기본적으로 메모장 코딩 하시는 분들은 이렇게 못하기 때문에 열외로 하겠습니다.
이번 스킨에서 덕을 좀 많이본 퓨어 프레임 웍
하지만 요즘 세상이 어느시대 입니까. 우리의 호프인 CSS3을 사용할수 있는 새천년입니다. 그래서 기본적인 애니메이션이나 레이아웃 변경은 이제 CSS3만으로도 충분히 할 수 있습니다. 문제는 반응형 레이아웃을 만드려면 그리드 기반의 레이아웃이 필요한데 이게 직접 다 코딩을 하기에는 되게 힘들고 귀찮습니다. 그래서 프레임웍을 쓰는것이고요. 그래서 자바스크립트 없이 사용할수 있는 프레임이 없을까 알아보던중 발견한것이 퓨어(pure) - http://purecss.io/ 입니다. 야후에서 개발한 프레임 워크 인데요, 자바스크립트 없이 순수 CSS로만 구동되는 진짜 진짜 가벼운 프레임 워크입니다. 물론 가벼운 만큼 기능은 조또 없지만 이글루스는 그냥 사진 보관함이나 바탕화면 저장용의 용도로 쓸참이라서 별 상관은 없었습니다.
2시간 동안 머리싸멘 결과물
디자인 구상을 약 2시간정도 한뒤 컨셉아트를 30분만에 만들었습니다. 심플하게 만들어서 번거로운 코딩은 최대한 줄이는게 목표이기 때문에 간단한 디자인을 취했습니다. 느와르 드라마에서 볼법한 길쭉한 폰트를 사용해서 뭔가 빈티지 한 느낌을 살리긴... 개뿔 그냥 꼴리는데로 디자인 했습니다. 티스토리 스킨은 가변 레이아웃의 모바일 퍼스트 스킨이고, 루리웹 마이피는 페럴렉스 1단형 스킨이기에 좀 더 색다른 것을 만들어보고 싶었습니다. 그래서 디자인 구상을 하던중 포트폴리오 형식의 포토 블로그용 스킨인 왼쪽 사이드바 2단형을 만들기로 했습니다. 주로 워드프레스의 포트폴리오 형식의 스킨들이 이런 구성을 많이 취하고 있는데요, 이 레이아웃의 특징은 사이드바가 전혀 움직이지 않고 오른쪽의 본문 영역만 움직입니다. 그래서 기본적으로 코드를 짤때 사이드바를 고정시키고, 사이드바 넓이만큼의 영역을 본문영역에서 밀어내버리면 됩니다. 프레임웍을 쓰면 좋은점이 이런 기본적인 코딩이 타이핑 몇번이면 다 이루어진다는 것입니다.
포토샵으로 만든 컨셉아트 입니다. 이 컨셉아트의 수치나 색상, 폰트를 기반으로 웹 페이지를 만들게 됩니다.
일단 이글루스 스킨에서 유저가 수정가능한 부분의 기본 마크업 자체가 너~~~무 적은데요, 달랑 사이드바 영역과 본문 영역의 위치만 변경할수 있습니다. -_-
나머지는 모두 CSS로 스타일만 바꿔라는 식으로 나오는데 참 어이가 없습니다. 이렇게 해놓으면 기본적인 화면에 문구조차도 사용자 마음대로 못 바꾸니까요. 물론 CSS를 이용해서 내용물을 바꾸는 방법도 있습니다. 하지만 그게 너무 귀찮기 때문에 저도 정말 필요한 일부분 빼고는 사용하지 않았습니다. 마이피 스타일 변경방식이 하도 지랄 같았기 때문에 이글루스에서 이정도 변경이 가능한것만 해도 다행이라는 생각이 들더군요. 만약 마이피 보다 이글루스를 먼저 건드렸으면 빡쳐서 하다가 때리치웠을지도 모릅니다. -ㅅ- 게다가 프레임 웍 덕도 봤고 노멀라이저 덕도 좀 봐서 마이피 스킨에 비하면 CSS 코딩은 반의 반도 안 됩니다. ㅋㅋ
건드릴게 없는 마크업
스킨2.0이 어쩌고, 사용자 친화가 어쩌고 하는데, 역시나 이글루스도 마이피 못지 않은 병신 삽질 마크업의 향연이었습니다. (사실 헤더 부분을 손 못댄다는것 부터가 진짜 병신크리)
예시사진을 보시면 input에 이미지를 넣어놓았습니다. (하하하하 씨ㅂ 빡치네) 스킨을 만들라는건지 지금 고문을 받는건지 약간 의문이 듭니다. ^오^
리그고딕으로 완전 유명해진 더 리그 오브 무버블 타입의 오스트리치 산세리프 체를 적용했습니다. (https://www.theleagueofmoveabletype.com/ostrich-sans) 제 티스토리 첫번째 스킨인 Congnoscenti에서 리그고딕을 사용한적이 있는데 티스토리의 변태같은 속성때문에 IE에서 웹폰트가 지원이 안되는 문제가 발생해서 그 다음 스킨부터는 깔끔하게 포기하고 구글 웹폰트만 사용하게 되었습니다. 그런데 이글루스 스킨을 만드려고 열심히 구글링하며 다니다 보니 이글루스에서는 자체 홈페이지에 업로드된 폰트를 어느정도 사용할수 있게 해주더군요. 바로 혹해서 폰트 업로드하고 웹폰트를 적용했습니다. 각종 꼼수를 써서 IE도 지원을 하는 방향으로 만들었지만 크로스 브라우징 다음으로 지랄같은게 웹폰트이기 때문에 장담은 못 드립니다.
왜냐면 웹폰트라는게 브라우저마다 렌더링 방식이 다르고, 운영체제마다 또 렌더링 방식이 다릅니다. 크롬 - 사파리 - 오페라 -파이어폭스의 차이가 날 뿐만 아니라 OS X - 리눅스 - 윈도의 차이도 극심하게 납니다. 제가 스킨제작할때 만해도 사파리와 크롬으로 테스트를 했는데 크롬과 사파리의 폰트간격이 다르게 나와서 고생을 했습니다. 저 같은 경우 블로그 스킨은 주로 OS X에서 만드는데, 윈도에가면 또 폰트가 다르게 보일겁니다. 그래서 맘에 드는 폰트가 없어도 억지로 구글 웹폰트를 쓰는 이유가, 전문 CDN에서 서비스 하는 폰트들은 이런 편차를 어느정도 보정을 해줍니다. 이것도 완벽하지는 않지만 어느정도 보정이 되기 때문에 이 방법이 선호되는 편입니다. 하지만 리그고딕 계열은 라이선스 문제 때문인지 무료 폰트임에도 구글 웹폰트에서 사용이 불가능하더군요. 그래서 나눔고딕만 가져다 쓰고 있습니다. (현재 스킨이 100% 완료가 된게 아니기 때문에 파폭이나 오페라에서는 폰트가 안뜰수도 있습니다.)
퓨어 프레임웍같은 경우에는 야후에서 밝히길, IE7이상을 지원한다고 되어있습니다. 하지만 제가 스타일에 CSS3 요소를 아예 퍼부어 버렸고, 이를 보정해줄 html5 shiv나 mordernizr 스크립트를 스킨에 넣지 못했기 때문에 최신 브라우저가 아닌 이상을 사이트가 심하게 박살 날것입니다. 경고창이라도 띄우고 싶지만 역시나 스크립트는 허용이 안되므로 이마저도 FAIL -_-
이렇게 제한이 많다보니 이글루스관련해서 구글링을 아무리 해봐도 빠방한 스킨이나 신기술이 사용된 블로그를 찾기가 힘듭니다. 현직 개발자분이 운영하는 블로그도 전무한 수준이구요. 백괴사전 표현대로 전투민족들이 모여서 말싸움이나 하는곳이라는게 적나라하게 느껴지더군요 -ㅅ- (걔내들 표현으로 샨새교(티스토리)는 유배지... 하하핳)
현재 이글루스스킨(meltdown)은 사파리와 크롬에서 정상작동을 확인했으며, 파이어폭스에서는 심하게 박살이 나고 있습니다.(인터넷 익스플로러 따윈 신경안씁니다.) 웹폰트 핵을 써서 구현을 했음에도 이런일이 벌어지는 것을보니 추가로 작업이 더 필요 할듯합니다. 하지만 파폭보다는 크롬점유율이 높으니.... 당장 그렇게 큰 문제는 아닐것 같네요. (이렇게 말해놓고 여기서 사후지원은 끝)
크로스 브라우징은 워낙 자료가 많아서 별탈이 없지만 웹폰트는 자료도 별로 없고 구현도 힘들다보니 체감상 더 힘든것 같습니다. ㅠㅠ
완성된 모습입니다. 컨셉아트랑 비슷한가요? ㅎㅎ
순도 100% 사진업로드용으로만 사용할 계획이기 때문에 다른 추가 플러그인을 더 넣고 말고 할 계획은 아직 없습니다. 디스커스 댓글창은 넣고 싶지만 이글루스에서 스크립트를 쓰려면 해당스크립트에 대해서 허가를 받아야하는 지랄맞은 정책 때문에 잠정보류입니다. 게다가 게시글마다 댓글 창을 붙여넣기 쉬워보이는 구조도 아닌것 같고요.
이글루스 최초의 반응형스킨이라고 자랑은 해놓았는데, 사실 의미는 전혀없습니다. 티스토리처럼 모바일 페이지를 끌수 있는것도 아니며, 모바일 페이지로 바로 우회하게 하는 자바스크립트를 심을수 있는 상항도 전혀 안되니 말이죠. 그냥 "이런거 해봤다"로 자위하려고 만든것 맞습니다. ㅇㅇ
며칠써보고 버그좀 수정한 뒤에 업로드 해볼 생각입니다. 티스토리 스킨 만드는것에 비하면 노력이 세발에 피만큼 들어간지라... 그닥 애착이 없네요 ㅋㅋ
크로스브라우징 따윈 개무시한 스킨을 보시고 싶으면 여기로 (크롬 or 사파리 우대) - http://est0que.egloos.com/
