베포중: 10 / 애드온: 1 / 반응형: 14 / 총 개수: 21
Cognoscenti
6.23 ~ 08.06
Update Log
2013년 作
06.23 베타1
06.24 베타2 자잘한 버그 수정
07.09 위젯박스등 다수의 기능 추가
08.04 최종 빌드
Specification
HTML5
CSS3
Static
Fancy Box
Masonry
Wow Slider
IE5
IE6
IE7
Behind Story
Cognoscenti는 티스토리로 이주하기 위해서 약 1개월간 제작한 스킨 입니다. 우선 HTML과 CSS, Javascript를 그리 많이 다뤄보지 않은 상태에서 블로그 스킨을 만드려니 맨땅에 해딩 하는 기분이었습니다. 그래도 12년전에 컴퓨터를 처음 배울때만 해도 HTML은 두꺼운 책 한권을 끼고 배워야 되는 것이었지만 요즘은 W3schools나 codeacademy등 배울 수 있는 곳이 정말 많아져서 비교적 쉽게 배울 수 있었습니다. 기본적으로 W3s에서 배운 내용을 바탕으로 티스토리 스킨에 끼워맞춰 응용하는 형태였습니다. 사실 티스토리 기본 스킨의 코드를 그대로 가져다가 써도 상관없지만 코드를 연습하고자 처음부터 가이드라인을 보고 새로 짰습니다. 어쩌다보니 검색도 안되고 방명록도 안써지는 웃지못할 상황이 연출됬지만 몇번의 수정을 거쳐 완전히 작동하게 만들었습니다. 첫번째 스킨부터 자바스크립트로 히든메뉴를 넣고 갤러리뷰, 슬라이더등 아주 다양한 시도를 해보았습니다. 그러다보니 스킨을 제작하는 과정이 프로그램 언어를 베우는 과정과 거의 같아져 버려서 아주 삽질을 많이 했습니다. 그래도 불가능해 보이던 기능이나 요소들이 몇번의 삽질 끝에 구현되는 것을 보고 무한한 기쁨을 느낄수 있었습니다. 초창기 스킨이기에 지금보면 아주 볼품 없고 무모한 시도도 많이 했던 스킨입니다. 우선 웹폰트를 도입했는데 bullet-proof webfont를 썼습니다. 그럼에도 IE와 파이어폭스에서 제대로 로드가 되지 않아 멘붕을 했는데, 알보고니 해당 브라우저들이 woff를 승인되지 않은 곳에서 불러오는 것을 막아 로드가 되지 않았습니다. 이를 해결하려면 서버를 하나파서 폰트를 불러와야 하는데, 그렇게 까지 할 마음은 없기에 깔끔하게 포기했습니다. 스킨제작은 드림위버로 하였는데, 생각보다 드림위버가 되게 무겁고 까다로워서 익숙해지느라 힘겨웠던 기억이 있습니다. 디자인 요소는 간단간단 하고 큼직 큼직하게 구성을 했습니다. HTML5에 CSS3 기반으로 box-shadow같은 요소를 많이 활용했습니다. 마치 잡지를 연상시키는 메거진 형태의 디자인을 이끌어 내려 했습니다. 자잘한 UI요소 보다는 타이포그래피에 많이 치중을 하였습니다.
TechAesthetic
08.07 ~ 10.05
Update Log
2013년 作
08.07 버전1 - 스킨 경량화, less도입, 부트스트랩 적용, 사이드 바 부활
08.08 버전2 - 자잘한 버그 수정
08.13 버전3 - 소셜 기능 강화, 프로필 사진 3d 효과
08.13 버전4 - 자잘한 버그 수정, 슬라이더 제거
09.05 버전5 - 버그 픽스, 사이드 바 정리
09.20 버전6 - 블로그 이웃 연동 시스템 추가, 라이브 파이어 댓글, 애드디스 스마트 레이어 추가 , 삭제 표시 변경, 주석 크기 변경, 다음뷰 글 목록 추가, 믹시/다음뷰 위젯 위치 변경,
Specification
HTML5
CSS3
Static
Bootstrap 2.3.2
IE5
IE6
Behind Story
TechAesthetic은 처음으로 프레임웍이라는 것을 도입한 스킨입니다. 요즘 유행하는 부트스트랩을 사용하였는데, 부트스트랩의 기본 스타일 요소를 걷어내느라 아주 애를 많이 먹었습니다. 그리고 처음으로 리셋 스타일을 사용한 스킨이기도 합니다. 물론 리셋스타일 덕분에 모든 텍스트 요소를 다 스타일 지정하느라 고생깨나 했습니다. 반응형 디자인이 목표였지만, 당시에만 해도 티스토리에 반응형 스킨을 적용하려면 매우 까다롭고 번거로워서 잠시 보류해뒀던 기억이 있습니다. 당시에만 해도 모바일 페이지가 반 강제로 적용이 되어서 반응형 스킨을 쓰려면 스크립트로 모바일 페이지 접속시 다시 PC페이지로 보내는 아주 번거로운 과정을 거쳐야 했습니다. 그리고 처음으로 포토샵을 이용해서 목업을 뜨고 그것을 바탕으로 스킨을 제작한 케이스 인데, 생각보다 굉장히 목업에 가깝게 나와서 만족한 스킨이기도 합니다. 디자인은 당시에 스큐어모픽에서 플랫으로 넘어가던 과도기라서 완전한 플랫은 아니고 어느정도 플랫입니다. 추후에 여러번의 버전업을 거쳐 티스토리 운영역사상 가장 오래사용한 스킨입니다.
TechAesthetic v2
10.05 ~ 10.20
Update Log
2013년 作
10.05 버전1
-메이저 업그레이드.
-타임라인 도입,
-전체적인 색상을 밝게,
-사이드바 전면 수정 ,
-카운터 변경,
-소셜 위젯 간소화,
-검색버튼 수정,
-RSS위젯 위치 이동,
-소셜 위젯 새로제작 css sprite, psuedo class 사용, 애니메이션 적용(로딩속도 향상)
-공지사항은 넓이의 100% (1170px)로 뜨도록 조정
-블로그 이웃 연동 위젯 접기 기능 추가
-스킨 해더 부분 변경
- 블로그 제목 변경, 사진 추가
- 반응형 웹 슬라이더 적용
- 미디어 로그 삭제
- 방명록을 Q&A 게시판으로 용도 변경
- css 최적화
- 작성자 정보란 스타일 변경
- 포스팅 넓이 증가 850 -> 870
- 본문 폰트, 자간 개선
- 애드디스 상단부 추가, 하단부 스타일 변경.
- 코맨트 입력창 변경
- 애드디스 버튼 커스텀화
Specification
HTML5
CSS3
Static
Bootstrap 2.3.2
IE5
IE6
Behind Story
TechAesthetic 2는 티스토리가 2013년 7월 부로 모바일 페이지를 끌 수 있고 반응형 스킨을 지원함에 따라 대대적으로 수정을 가한 스킨입니다. 겉보기에는 별 차이없지만 반응형 그리드를 활성화 시키고 미디어 쿼리가 들어가는등 내부적으로는 아주 많은 변화가 생긴 스킨입니다. 이때 티에디션을 타임라인 형태로 사용하고 있다가 추후에 반응형 갤러리로 바꾸게 됩니다. 스크린샷은 타임라인을 적용한 모습입니다. 업데이트와 함께 외부 플러그인도 도입을 했는데, 레이어 슬라이더를 적용시켰습니다. 하지만 티에디션이 본문자리를 대체하는 변태적인 구조 때문에 게시글 안에서도 레이어 슬라이더가 로드 되는 웃지 못할 상황이 벌어졌습니다. 그리고 레이어 슬라이더 자체가 그렇게 반응형을 완벽하게 지원하지 않아서 반쪽짜리 스킨이 되었습니다. 그래도 오만가지 플러그인을 다 얹어 보고, 별의 별 요소를 추가해보는등 아주 많은 삽질과 실력증진에 영향을 미친 스킨입니다. 특히 텔짱샘님의 간곡한 요청(이라 쓰고 협박)으로 인해 제가 만든 스킨중 현재 유일하게 일반 사용자용으로 변환된 티스토리 스킨이기도 합니다. 티스토리에 거주하면서 스킨을 4개 만들었지만 정작 배포는 1개 밖에 안 했다는게 좀 아이러니 하네요. 사실 배포용 스킨을 만들기 위해서는 이리저리 신경쓸것도 많고 제한되는 기능도 많기에 변환하기 귀찮아서 만들지 않는 이유도 없지 않아 있습니다. 더군다나 스킨 만든다고 아이폰 테마처럼 기부가 들어오는 것도 아니고 십원 땡전도 못 벌기 때문에 그다지 제작 의욕이 안 생깁니다. 디자인은 기존의 버전 1보다 색상의 가짓수를 줄여서 더 심플하게 만드려고 노력했습니다. 그리고 CSS3의 여러 장식적인 요소를 활용하였습니다. TA2 부터 OS X에서 스킨을 제작하게 되었고, 본격적으로 코다를 사용하게 되었는데, 이 덕분에 스킨의 업데이트나 제작속도가 굉장히 빨라지게 되었습니다.
TechAesthetic v2.5
10.05 ~ 11.01
Update Log
2013년 作
-반응형 레이아웃 도입
-반응형 티에디션 도입
Specification
HTML5
CSS3
LESS
Responsive
Bootstrap 2.3.2
IE5
IE6
IE7
Behind Story
위의 v2 비하인드 참고
TechAesthetic v2.8
11.01 ~ 12.14
Update Log
2013년 作
V2.7 11/01
-검색페이지 전면교체 2+2컬럼,8컬럼 구조로 변경
-masonry 갤러리 방식
-addthis 인기글 뷰어 추가
-미디어로그 수정, 유투브 플레이어 부착
V 2.8 11/12
-요소간 간격축소
-카테고리 다른글 테두리 제거, 믹시와 다음뷰 위젯의 길이차 보완
-다음뷰 최신글과 인기글 위젯의 색상변경
-작자 소개 부분 크기수정, 플립 애니메이션 삭제, 크기감소, 타이포 수정, 소셜도구와 통합
-테그가 옆으로 밀려나가는 현상 수정
-말풍선 형태의 addthis버튼을 알약형태로 수정
-상단 메뉴에서는 현재 경로를 표시함
-방문자 위젯과 캘린더 위젯을 하나로 통합
-글보관함을 셀렉터로 변경
-애드디스 공유버튼 배경색 제거
-404 페이지 변경
Specification
HTML5
CSS3
LESS
Responsive
Bootstrap 2.3.2
Masonry
IE5
IE6
IE7
Behind Story
위의 v2 비하인드 참고
Prototype
12.14 ~ 02.08
Update Log
2013년 作
12.31 - v2.0
- 상단 로고변경
- TS-plugin 설치
- 사이드바를 왼쪽으로 보내는 CSS추가
- 게시글에서 슬라이더 로드안됨
- 스타일 정리. 간소화
- 카테고리 메뉴중 위쪽 메뉴의 드롭다운 메뉴를 호버가 아니라 클릭시 뜨게 변경
- 쓸데없는 위젯 제거
- 카테고리 새 매뉴 추가
01.03 - v2.1
Masonry 티에디션 도입
01.08 - v2.2
카테고리별 스킨 도입 - 톱기어,iOS,얼터너티브,일렉트릭
01.12 - v2.2.1
센드박스 카테고리 스킨추가
Specification
HTML5
CSS3
SASS
Responsive
Mobile First
Foundation 5.0.3
Masonry
Oribit Slider
TS plug-in by Axusia
Special Style for Certain Category
IE5
IE6
IE7
IE8
Behind Story
Prototype은 TA스킨이 처음부터 반응형을 고려하지 않고 만든후 나중에 반응형 요소를 추가한게 썩 좋지 않아 밑바닥 부터 반응형으로 만든 스킨입니다. 이번에는 프레임웍을 다른것으로 바꿔 파운데이션5를 적용했습니다. 개인적으로는 부트스트랩 보다는 파운데이션5가 나았던것 같습니다. 문제는, 파운데이션에서 제공하는 기본 템플릿으로 스킨을 짠다음 티스토리 치환자를 넣었는데, 이게 생각보다 구조가 너무 복잡해져서, 모바일 퍼스트라는 수식어가 무색하게도 스킨의 로딩속도가 너무 느려졌습니다. 본문 하나를 표현하기 위해서 엄청난 양의 div를 거쳐야 했기에 안 무거운게 오히려 이상할 정도 였습니다. CSS를 하나로 뭉쳐서 압축하고, 자바스크립트를 단일 파일로 압축, CSS 스프라이트 도입, HTML 압축등 엄청난 삽질을 했지만 로딩속도는 전혀 발전이 없었습니다. 그리고 이전 스킨들이 플렛 성향을 띄었던 것에 비해 약간 복잡하고 아기자기한 스킨이 만들어보고 싶어 알록달록 하고 그래픽 요소를 많이 넣어서 스킨을 구성하였지만 결과적으로 많은 이미지가 로딩속도를 느리게 하였고, 생각보다 만들어놓고 나니 그 다지 예쁘지 않아서 제가 만든 스킨 중 사용기간이 가장 짧은 흑역사를 자랑합니다. 온통 플랫 열풍이 부는데 스큐어모픽하게 버티려니 심기가 많이 불편했습니다. 그리고 때마침 아주 좋은 디자인도 떠올랐기에 망설임 없이 갈아 탔습니다. 하지만 모바일퍼스트/sass/ compass/ 파운데이션 등등 아주 많은 수식어가 붙는 스킨인 만큼 웹 프로그래밍 실력을 비약적으로 향상시켜준 스킨이기도 합니다. 이전까지의 3개 스킨이 기초적인 부분만 활용하였다면 Prototype 스킨 부터는 여러가지 최신기술들을 적극반영하여 만들어진 스킨입니다. 다만 그 도구를 활용하는 실력이 좋지 못해서 정말 정말 무거운 스킨이 나왔습니다. 오히려 무거운 스킨을 빠르게 돌리려고 연구에 연구를 하다보니 웹 페이지 속도를 향상 시키는 관련 문서는 거의 다 읽어보게 되었습니다. 그리고 티스토리 자체의 시스템과 꼼수로 우회 또는 원하는 것을 만들어 내는 것도 이 스킨부터 본격적으로 시작했습니다. 덕분에 일반 스킨에서는 찾아볼수 없는 많은 요소 들이 들어가 있습니다. 사용기간이 짧아 스크린샷도 얼마 없는 스킨이지만 할말은 가장 많은 스킨입니다. 아마 이떼부터 로딩 속도에 집착을 하기 시작했습니다. 평소보다 너무 느려지다 보니 느려지게 하는 요소를 없애려 많이 노력을 했습니다. 특히 스킨 디자인 시에 과유불급을 뼈저리게 깨닫게 한 스킨 입니다. 이뻐 보인다고 이것저것 막 쑤셔 넣다 보니 뒤죽박죽이 되고 막판에 가서는 수습 불가가 될 정도로 아주 개판이 되어버렸습니다. 공을 많이 들였으나 결말이 좋지 못해 상당히 아쉬운 스킨 입니다. 로딩 속도가 느리다는 원성을 여기저기서 받아 서둘러 다음 스킨을 작업 하였습니다.
Burarikun
12.28
Update Log
2013년 作
12.28
최초출시 - 루리웹 마이피 용
Specification
HTML4 with Table
CSS3
Semi-Responsive
Free
IE5
IE6
IE7
IE8
Download
BurarikunBehind Story
루리웹의 컬트(?)적인 요소가 되어버린 크고 아름다운 물건을 소유한 그분의 별명을 따와서 이름을 지었습니다. 사실 Burarikun Jin in hwan 하려고 했는데 이름이 너무 길어서 앞 부분만 썼습니다. 스킨은 기본적으로 도대체 석기시대 때에 만든 건지 화석이 되어가고 있는 테이블 레이아웃을 기반으로 만든 스킨 입니다. 사실 저는 구식 웹은 제대로 배우지 않아서 테이블 기반 레이아웃은 이번에 처음으로 도전을 해보았습니다. 정말 테이블은 표 만들라고 있는 것이지 왜 이딴 것으로 레이아웃을 짜는지 이해가 안 갑니다. 기본적으로 스크립트 뿐만 아니라 HTML수정은 꿈도 못 꾸기 때문에 CSS로 겁나 떼워야 하지만 @import 속성과 CSS3 있기에 문제 없이 웹 폰트도 적용하고 여러가지 스타일을 적용할 수 있었습니다. 완전하지는 않지만 어느 정도 반응형을 지원합니다. 문제는 마이피가 사진을 500px로 강제 열화시켜 보여주는 아주 병크를 터뜨리는데, 이는 사진을 미리 업로드하고 절대주소로 감싼 뒤에 올리면 됩니다. 스킨은 3단형 레이아웃을 강제하는 루리웹의 마이피를 마구 파.괘.하.여. 1단형으로 만들고 배경에 고정 된 배경화면을 깔아서 약간 페럴랙스 틱한 스킨 스타일을 연출 했습니다. 뿐만 아니라 사이드 바를 옆으로 쫙 펴서 상단에 위치 시켰으며, 루리웹이나 다음 관련 요소는 모두 숨김 처리 해버렸습니다.
Meltdown
01.08
Update Log
2014년 作
01.08
최초출시 - 이글루스 전용 스킨
Specification
HTML4 Strict
CSS3
SASS
Responsive
Pure
Masonry
Free
IE5
IE6
IE7
Download
MeltdownBehind Story
티스토리는 정말 블로깅을 할 목적으로 게이버 블로그에서 옮겨 탔지만, 이글루스는 순도 100% 호기심에 개설을 해보았습니다. 이전에는 제한이 심했지만 요즘은 CSS도 수정되고 HTML도 수정되고, 심지어 구글 애드센스를 박는 거도 가능하다 카더라 라고 하길래 가입을 했습니다. 정작 스킨을 만드려고 하니 티스토리 뺨치는 온갖 제약의 향연이었습니다. 가장 지랄 같았던 것은 헤더 부분이 일체 수정이 안 된다는 점입니다. 그리고 스크립트가 일체 허용이 안되는 점도 있고요. 병크도 이런 병크가 없습니다. -ㅅ-; 치환자라는 개념을 티스토리에서 끌어다가 사용하고 있는 것으로 보이나 세부적인 설정을 위한 치환자가 아니라 그냥 레이아웃을 짜기 위한 목적이라서 상당히 별로 였습니다. 사용 프레임 웍중 태반이 자바스크립트 노멀라이즈, 모더나이징을 요구하기 때문에 결국 오로지 CSS로만 구현이 되는 Pure 프레임 웍을 적용해서 만들었습니다. 2단 고정 사이드 바는 이번에 처음 만들어 봤습니다. 이글루스는 별도의 모바일 페이지가 강제 로드 되기 때문에 반응형 따윈 필요 없지만 재미 삼아서 적용 해보았습니다. 웹폰트도 구글 폰트 대신에 이글루스 첨부 파일 업로드로 끌어다 쓰는 방식을 취했는데 woff보안 문제 때문에 IE와 파폭에서는 제대로 적용이 되지 않습니다. 온갖 제약을 이겨내기 위해서 css import를 엄청나게 남발했습니다. 심지어 Pure 프레임 웍 조차도 야후의 CDN 서버에서 끌어다가 씁니다. 추가 CSS를 사용할 수 없고 헤더를 건드릴 수 없기 때문에 이런 삽질을 했습니다. 이글루스 측에 문의를 넣어보니 (소통이라는 영자가 직접 답변을 달아줍니다. 벽창호 티스토리 보다는 훨씬 낫더군요. 문제는 서비스가 구려서…) 웹 표준 준수와 최신 웹 기술 도입에 노력을 하고 있다는 답변을 줬습니다. 그런데 웹 표준 아닌 CSS Transition을 사용한 것을 본 것 같지만 기분 탓이겠죠. 버튼을 생성할 때 이미지을 안에 넣는 아주 병신 같은 코딩으로 인해서 스타일 작성에 많은 애를 먹었습니다. 실험 정신과 나도 이런거 해봤다 라는 자위용으로 만든 스킨 이지만 한번 만들어보고 나니 다시는 이글루스 스킨을 만들고 싶지 않더군요.
TechAesthetic v3
01.12
Update Log
2014년 作
01.12
최초출시
Specification
HTML5
CSS3
SASS
Responsive
Bootstrap 2.3.2
Masonry
Free
IE5
IE6
Download
TechAestheticBehind Story
TA스킨의 배포 용 버전 입니다. 커스텀 요소를 최대한 배제하고 티스토리가 기본 제공하는 요소를 사용할 수 있도록 설정하였습니다. 사실 배포 계획은 딱히 없었는데, 어떤 분(TA2 비하인드 스토리 참고)의 요청으로 변환을 했습니다. 개인용 스킨에서 범용 스킨으로 전환하기는 생각보다 까다로웠습니다. 현재 레이아웃 변경 관련 문의가 많이 들어오는데, 커스텀 수정은 따로 해드리지 않고 있으며 직접 하시기 바랍니다.
Life is a Journey
02.08 ~
Update Log
2014년 作
02.08
최초출시
02.09
IE 구버전용 전용 스킨 적용
오류페이지 적용 - 태그로그, 미디어로그, 위치로그, 키로그, 보호글
02.10
카테고리 별 스킨 적용 - Hackintosh, iOS7, Photo
02.11
Cars 카테고리 스킨적용
02.12
배포 용 테마나 스킨 페이지용 별도 스킨을 만들었습니다.
Top Gear, Diary 카테고리 별도 스킨 적용 되었습니다.
02.13
Music 카테고리 전용 스킨 적용
02.14
가변식 3단 레이아웃 적용
02.17
Spot.im 채팅방 설치
02.18
다운로드 링크, CCL, 주석부 스킨적용
02.19
디스커스 코맨트 갯수 표시 api 적용
02.23
인용구란 신설
02.24
Review,Cartoon 스킨추가, Music 기존 스킨 교체
03.01
Entypo Glyphcon추가, 접기 버튼 추가, 툴팁 추가, 검정 색상 변경
Specification
HTML5
CSS3
SASS
Responsive
Mobile First
Foundation 5.1.1
Masonry
Oribit Slider
Special Style for Certain Category
IE5
IE6
IE7
IE8
Behind Story
Life is a Journey는 Prototype에서 배운것과 실패 요소를 모두 개선하여 담아낸 스킨입니다. 우선 블로그 초창기 부터 염두해두고 있었던 카테고리별 스킨을 스킨 제작시부터 고려하여서 만들어진 스킨입니다. Prototype도 카테고리별 스킨이 가능하지만 HTML 구조가 복잡하여 스킨이 나중에 로드 되는 문제가 있었습니다. 그러나 새 스킨 부터는 티스토리의 HTML 구조를 그대로 활용하여, 티스토리에 최적화된 스킨을 만들고자 노력하였습니다. 티스토리 기본 제공 스킨을 기반으로 하여 HTML5 시맨틱 구조로 변경하여 사용하고 있습니다. Prototype 스킨에서는 카테고리별 스타일 로드를 위해서 엑수시아님이 제작하신 TS플로그인을 사용하였으나, 이번 스킨부터는 자작한 스크립트로 별도의 CSS를 불러오게 하였습니다. 게시글 뿐만 아니라 페이지별로 별도의 스킨이 적용되는 티스토리 스킨 제작사상 초유의 스킨을 만들어 보았습니다. 이미지 사용을 극도로 줄이고, 타이포 적인 요소를 많이 활용함으로 로딩시간을 줄였습니다. 어찌보면 첫번째 스킨의 컨셉으로 돌아간다고 볼 수도 있겠네요.디자인적 측면에는 최신 웹 디자인 동향을 적극 반영했습니다. 상단의 거대한 히어로 이미지, 스티키 탑바, 애니메이션 반응형 그리드, 페럴랙스 스크롤링, 아이콘 폰트, 다양한 두께의 영문 웹폰트등 많은 최신 요소가 반영이 되었습니다. 기존의 4개 스킨에서는 기본스킨을 바탕으로 두고 IE관련 hack을 쓰거나, 요소를 삭제하는 등의 방법으로 구버전 IE를 지원헀습니다. 그러나 이번 스킨 부터는 아예 IE전용 스킨을 따로 만들어서 그것을 사용하게 해놓았습니다. 아주 무시무시하게 전용 스킨을 디자인했는데요, 궁금하신 분은 직접 IE7이하의 IE로 접속해 보시는 것도 좋습니다. 정말 웹 디자인에서 하면 안되는 짓만 골라서 해놓았습니다. 모티브는 추억돋는 90년대 웹 사이트 디자인을 적극 참고 했습니다. 그래서 접속을 해보시면 추억에 잠기실거라고 예상해봅니다. 가장 특징적인 점은, 제가 필요없다고 생각하는 티스토리의 요소를 모조리 제거해버렸습니다. 이미 소셜 댓글이 있으니 기본 댓글도 제거, 방명록도 소셜 댓글로 대체, 허구한날 스팸만 들어오는 트랙백도 삭제, 사이드바에서 꼭 필요한 링크/ 최신글/ 아카이브/ 공지만 남겨두었습니다. 그리고 미디어로그나 로컬로그등 죽어도 쓸일이 별로 없는기능들은 망설임 없이 제거해버렸습니다. 다른 페이지로 활용하는 방향도 있긴한데, 왠지 귀찮아요. 이 스킨을 한마디로 정의 하자면, 콘텐츠 반응형이라는 이상한 말을 쓸 수 있을것 같습니다. 게시글의 주제나 카테고리에 따라서 글의 모습이 바뀝니다. 그리고 여러가지 주제별로 스킨을 만들때 한가지 템플릿에 색칠놀이만 하는게 아니라 레이아웃을 아예 통채로 갈아 엎어서 만들었습니다. 최신 웹페이지 레이아웃에서 시도되고 있는 요소는 모두 사용해보았는데요, 2단 형 오른쪽 사이드 바, 2단형 왼쪽 사이드 바, 3단형, 1단형, 1단형 Full width, 2단형 고정 왼쪽 사이드 바, 2단형 고정 오른쪽 사이드 바, 그리고 화면에 일부분만 차지하는 스킨 형태등 아주 다양하게 구성을 했습니다.
IE fallback
02.08
Update Log
2014년 作
02.28
최초출시
Specification
HTML4 Transitional
CSS1
IE9
IE10
IE11
Safari
Firefox
Chrome
Opera
Beautiful Fluorescence Colour Interface
진지한 궁서체
예쁜 굴림체
Behind Story
초기에 스킨 제작시부터 “제발 최신 브라우저 쓰세요” 라고 목이 터져라 외쳤지만, 누가 제 블로그 손님 아니랄까봐 “나는 죽어도 IE6으로 강행 돌파 한다!!” 라고 외치시는 분이 많아서 크로스 브라우징 이슈는 제가 스킨을 제작하면서 부터 아주 골머리를 앓게 하는 문제 였습니다. 고민에 고민을 거듭하다가 IE 구버전 호환이나, IE 전용 Hack에 대해 고민하지 말고 그냥 전용스킨을 따로 만드는게 어떨까? 라는 아주 단순한 발상을 하게 되었고 이에 맞춰 만들어진 스킨입니다. 기본적으로 IE5버전 까지의 구동을 목표로 하기에 아주 오래된 CSS1의 명령어를 가져다 썼으며, 최대한 90년대의 웹사이트 분위기를 살려서 구식 브라우저 방문자들이 20년 전의 추억 속에 잠길 수 있는 아주 뜻 깊은 시간을 마련하기 위해 노력을 많이 했습니다.
Life is a Journey v.2
03.20 ~
Update Log
2014년 作
03.20
메이저 업그레이드
HTML5 Symantic 구조 적용
SVG 도입
Simple Share Buttons 도입
rem 사이즈 폰트 적용
비동기식 스크립트 로드 적용
비동기식 디스커스 로딩
반응형 애드센스 적용
테이블 요소 반응형 적용
터치 기기 최적화
요청수 감소로 인한 속도향상
크로스 브라우징/ 운영체제 폰트 최적화
색상 조합 변경
베너 이미지 변경
CARS 카테고리 새 스킨 도입
아웃 브레인 스타일 도입
접기 펴기 스타일 변경
검색 결과 스타일 변경
이스터 애그 추가
스킨 용량 감소 6.5mb → 1.83mb
티스토리 기본 댓글 복원
슬라이더 캡션 기능 부활
검색결과에 디스커스 댓글 개수 표시
슬라이더 버그 수정
티에디션 디자인 변경
티에디션 검색창, 메뉴 부활
SEO 최적화
03.22
유투브 로딩 개선 플러그인 설치
03.22
스킨 구조 플로우 차트 공개
03.23
Syntax Highlighting 기능 추가 - Highlight.js
v.2.0.1 업데이트
03.24
초고해상도 (1920px 이상) 스킨 크기 제한
모바일용 상단 메뉴 디자인 변경
티스토리 상단 슬라이더의 컨트롤 부는 마우스 호버시에만 사용가능하게
이웃커넥트 버튼 추가
v.2.1 업데이트
03.30
오프켄버스 메뉴 추가
v.2.5 업데이트
03.31
티스토리 기본 댓글 스타일 수정
티스토리 정보 표시 버튼 변경 (팝업창은 아직 작업중)
관리자 전용 프로필 추가
손님 전용 프로필 추가
관리자, 손님, 비밀댓글 구분 용 으로 오른쪽에서 라벨 추가
세부 카테고리 스타일 변경
티스토리 에디터 레이아웃 반응형 적용
이미지 캡션 스타일 수정
티스토리 기본 이미지 슬라이더 스타일 수정, SVG 적용
다음뷰 추천버튼 흑백 필터 적용
티스토리 기본 음원 플레이어 흑백 필터 적용
티스토리 에디터 수식 입력에 스타일 적용
티스토리 에디터 외부 정보에 스타일 적용 (완벽 개선)
코드뷰 스타일 수정
티스토리 주석 풍선 스타일 교정
유투브 이미지 대체 플러그인의 플레이버튼을 SVG로 교체
HTML5에서 표준안으로 빠진 Strike 태그 대신 S 태그로 대체중
Textarea는 아래쪽 사이즈만 조절 가능
확장자별 다운로드 아이콘 적용 (zip, deb)
CSS 이미지 스프라이트 재도입
태그 스타일 개선
소셜버튼에 tumblr, flatter 추가
소셜 버튼으로 공유시 페이지 이름이 똑바로 뜨지 않는 현상 수정
본문 폰트 스타일을 시스템 기본폰트로만 적용하게 변경
일부 카테고리에 새로운 웹폰트 적용
구글 페이지 스코어 상승 95 -> 97점
메인화면 슬라이더 속도및 성능 개선
하드웨어 가속 지원
Specification
HTML5
CSS3
SASS
SVG
Responsive
Mobile First
Entypo
Foundation 5.2.2
Masonry
Oribit Slider
Special Style for Certain Category
IE5
IE6
IE7
IE8
Behind Story
디자인과 속도. 웹 페이지를 만들 때 항상 충돌하게 되는 요소 입니다. 디자인에 신경을 쓰다 보면 웹 페이지 속도가 서서히 감소하는 것이 눈에 보일 것이고, 속도에 신경을 쓰다보면 정말 흰화면에 글자와 사진만 몇 개 떠다니는 수준이 되어버릴 수도 있습니다. 보통 스킨을 제작하게 되면 항상 고민하는 것이 바로 속도와 디자인 입니다. 늘 좀 더 새롭고 좋은 모습을 추구하면서도, 바라는 대로 무턱대고 만들어버리면 속도에 치명적인 영향을 미쳐버리고 맙니다. 그래서 스킨을 처음 만들 때 부터 지금까지도, 좋은 디자인을 가지면서 속도가 빠를 수는 없을까 라는 생각을 늘 상 하곤 했습니다. 이런 고민을 항상 하면서 스킨을 제작하다 보니 이전에는 단순한 구조임에도 속도가 한심할 정도로 느렸지만 지금은 숙련도가 쌓였는지 구조를 복잡하게 짜도 브라우저가 처리할 수 있도록 순서만 부여해준다면 오히려 단순한 구조와 맞먹는 속도를 낼 수 있는 것을 깨닫고 있습니다.
본론으로 들어가서, 사실 뭐 버전2라고 거창하게 이름 붙이긴 했는데 저한테나 의미 있는 버전2이지 일반사용자 분들에게는 그냥, ‘어 쬐끔 빨라졌네’라는 생각이 들것 같습니다. 백조가 우아하게 수면 위에 떠있지만 물속에서는 발이 미친듯이 움직이고 있듯, 외관 보다는 속을 뜯어 고치다 보니 업데이트 이후에도 외관상 그 다지 달라진 것은 많이 없습니다. 버전2 업데이트를 통해서 어떤 신기술이 적용되었고 적용시에 어떤 문제를 만났는지 상세하게 적어보려 합니다.
2월 초순쯤에 제작이 끝났던 이 Life is a Journey 스킨도 어느 덧 수많은 수정을 거쳐 거의 버전 1.5.9까지 왔습니다. 업데이트라고 해봤자 세부 카테고리 스타일 추가나 아니면 버그 잡기, 새로운 플러그인 추가와 같은 아주 소소한(?) 작업만 했습니다. 물론 버전 1일때 사이트 구조도 그렇게 흠 잡을 곳이 없지만 몇 가지 치명적인 문제가 있었습니다.
일단 괴상한 HTML 구조입니다. 믿기진 않으시겠지만1 현재 블로그 스킨인 Life is a Journey는 티스토리 기본스킨인 Basic을 기반으로 하고 있습니다. 제가 여태까지 티스토리 스킨을 3개 만들었는데, 앞의 3개는 전부 제가 바닥부터 마크업을 했습니다. 그런데 그렇게 하고보니 검색이 안 된다던지, 아니면 게시글의 순서가 엉킨다던지 하는 웃지 못할 상황이 발생하였습니다. 그래서 최대한 티스토리에서 제공하는 기본 마크업 구조를 따라가기 위해서 Basic 스킨의 마크업을 가져다가 필요한 부분만 HTML5 시맨틱 구조로 변경해서 사용 중입니다. 그런데 이 변경 과정에서 footer와 nav, header만 도입을 했습니다. 이는 몇 가지 이유가 있는데요, 일단 구버전 IE를 지원하기 위해서는 기본적인 div 태그 안에 들어갈 수 있는 요소에만 시맨틱 태그를 적용 했습니다. 즉, 자신이 몸체가 되는 div 요소에는 시맨틱 태그를 쓰지 않았습니다. 왜냐면 IE는 xml구조로 된 비표준 요소에는 스타일이 적용이 안되는 치명적인 단점이 있기 때문입니다. 스킨이야 어찌됐든2 일단 화면에 출력은 시켜야 하기 때문에 시멘틱 구조를 완전하게 도입할 수가 없었습니다. 중략...
IE fallback v.2
03.21 ~
Update Log
2014년 作
03.21
최초출시
Specification
HTML5
CSS2
HTML5 Shiv
IE Quirks Mod
IE5
IE6
IE7
IE8
IE9
IE10
IE11
Safari
Firefox
Chrome
Opera
나름 평범한 색 배섹
Behind Story
한때 제 블로그에서 화제가 되었던 것 중 하나가 바로, 이 멋드지고 간지터는 IE 전용 스킨 입니다. 최신 브라우저 용 스킨보다 더 큰 호응을 받았던 작품으로 “흡사 눈뽕맞는 기분이 이렇지 않을까" 라는 과분한 평가까지 주변사람들이 해주었습니다. 그래서 이번에 차기 작은 어떻게 만들어야 할지 상당한 고민을 했습니다. 흰 바탕에 흰 글자로 써볼지, 아니면 빨간 바탕에 주황색 글자를 써볼지 등등 아주 여러가지 시안을 만들었습니다. 곰곰히 생각하다가 보니, 이번에는 그냥 흰 바탕에 검은 글씨를 쓰는게 어떨까? 라는 아주 좋은 아이디어가 나왔고 그에 맞춰 스킨을 만들었습니다.
이전에는 맞지도 않는 IE8에서 미디어 쿼리를 꼼수로 작동시킬 수 있다는 명분으로 기존 스킨을 어거지로 돌렸으나, 아무리 생각해도 제대로 작동하지 않는 스킨을 쓰는 것은 옳지 않아 이번에는 과감하게 IE8도 전용 스킨 목록에 추가 시켰습니다. 이번 스킨 업데이트를 통해 html5shiv로 시맨틱 구조를 인식 시키고, 그에 맞춰서 스타일을 작성하였습니다. 스킨 너비는 960px로 선사시대 90년도 유물을 사용하고 있으며, 1024x768에서 가장 적절하게 김대기 처럼 나타납니다.
예전에는 유투브나 사진이 그냥 밖으로 삐져 나와 여백의 미를 살리는 디자인 언어를 사용하였다면, 이제는 모든 사진이나 영상을 게시글 안으로 들어가있도록 해놓았습니다. 그래서 간혹 가로폭 1920px이상의 사진을 현재 선 캄브리아기에 살고 계신 IE7,8 사용자 분들이 만나게 되셔도 쫄지말고 작은 사이즈로 감상하실 수 있습니다.
한 가지 아쉬운 점은 이번 스킨은 CSS 2.1 표준을 기준으로 작성이 되었기 때문에 CSS1과 CSS2도 개판 오분전으로 지원하는 IE5와 IE6 지원은 드랍 되었습니다. 물론 해당 브라우저 사용자 분들은 이미 공구리 속에서 화석이 되었을테니 더 이상 신경쓰지 않겠습니다.
흰 바탕에 검은 글씨라니 너무 클리셰 스럽고, 이전보다 못난 디자인 이지만, 아무쪼록 그런 브라우저를 써주시는 것만해도 옛것의 가치를 소중히 하는 고귀한 정신이 깃들어 있는 것 이므로 존중해 드립니다.
참고로 흰바탕에 검은글씨는 사지방 사용환경을 심히 고려한 업데이트라는 것을 이실직고 합니다. (__)
P.S 특정 psuedo-class는 quirks-mod에서는 동작하지 않는 다는 말을 들었는데, 테스트 해보니 잘되네요 (뭐지... 낚인건가)
Hare for Tistory
04.08
Update Log
2014년 作
04.08
최초출시
Specification
HTML5
CSS3
SASS
Responsive
Mobile First
TukTuk
Font Awesome
Free
IE5
IE6
IE7
IE8
IE9
Download
Hare for TistoryBehind Story
곤운에 간 이후 블로그의 밥줄(방문자)가 끊기지 않도록 하기 위해 스킨을 몇개 만들어 놓았는데 그 중 첫번째가 바로 이 스킨입니다. 처음에는 티스토리 전용으로 제작이 되었으나 자바스크립트를 전혀 사용하지 않아서 이글루스에도 적용해보는 것도 괜찮지 않을까 싶어서 이글루스와 티스토리 스킨을 한번에 만드는 시도를 해보았습니다. (하지만 이 도전을 후에 크게 후회하였습니다. -0-) 첫번째 목표는 가장 가벼운 티스토리 스킨을 만드는 것 이었습니다. 심플한 구조에 아주 간단하게 적용이 가능하고 무게도 가벼운 스킨을 만들기 위해서 최소한의 코드를 사용해서 작업을 했습니다. 자바스크립트는 일체 사용하지 않아 반응 속도를 높였고, CSS에 많은 시간을 투자했습니다. 약간 실험적이긴 한데, 모든 구성요소에 CSS3 Transition을 적용하여 마치 스킨이 살아서 움직이는 듯한 느낌을 연출했습니다. 물론 스타일이 복잡하면 이런구성이 지저분 해보일수 있으나 워낙 간결하게 디자인을 했기에 그런 느낌은 들지 않았습니다.
Suit & Tie - FB v1.5.1
04.10
Update Log
2014년 作
04.10
최초출시
Specification
HTML5
CSS3
SASS
SVG
Responsive
Bootstrap 3
Font Awesome
Free
Download
Suit & TieBehind Story
Readiz님의 Fastboot 1.5.1 업뎃 소식을 30일날 접하고 잉여력 폭발해서 3시간 만에 만든 애드온 스타일 시트 입니다. HTML은 단 한 줄도 건드리지 않았으며 CSS 파일만 달랑 만들었습니다. 웹 폰트는 쓰지 않았으며, 매킨토시에서는 Helvetica Neue와 애플 산돌 고딕 네오, 윈도우 에서는 Arial과 맑은 고딕이 기본 적용 되며 맑은 고딕이 없을 경우에는 나눔고딕이 적용 됩니다.
Hare for Egloos
04.11
Update Log
2014년 作
04.11
최초출시
Hare for Tistory의 쌍둥이 이글루스 버전
Specification
HTML4 Transitional
CSS3
SASS
SVG
Responsive
TukTuk
Font Awesome
Free
IE5
IE6
IE7
IE8
IE9
Download
Hare for TistoryBehind Story
그냥 재미로 시작했다가 후회를 아주 막심하게 했던 컨버전입니다. 티스토리 같은 경우 클래스만 어찌어찌 맞춰주면 정말 CSS를 많이 안 쓰고도 원큐에 만들수 있습니다. 그런데 이글루스는… 그런거 없습니다. -_-;; 모든 요소의 클래스를 찾아서 일일히 스타일을 지정해줘야 합니다. 진짜 예전에 첫번째 이글루스 스킨 만들때는 아주 피똥쌌었는데 지금은 아예 웹페이지를 통째로 저장한다음에 외부 스타일시트를 하나 심에서 거기에다 대고 브라우저 익스텐션을 통해서 CSS 작성시 자동으로 리프레시 되게 해서 아주 빠른시간(3시간)만에 제작을 끝냈습니다. 가끔 보면 이글루스의 아주 미친 마크업이 엿을 먹이곤 했지만 어찌어찌 해내긴 했습니다. 그러나 제작후 급격한 분노를 참지못하고 빡침의 글을 하나 남기고 맙니다. → 제작후기
Dynamite
04.15
Update Log
2014년 作
04.15
최초출시
Specification
HTML5
CSS3
SASS
Parallax
Responsive
Mobile First
Gumby 2.6.3
Entypo
Free
IE5
IE6
IE7
IE8
Download
DynamiteBehind Story
티스토리로 옮겨온지도 거진 1년이 다 되어 가고 있습니다. 늘 사용하면서 느끼는 것인데, 베포용 스킨이나, 아니면 개인이 제작한 스킨을 보면 정말 독특한 몇몇 블로그를 제외하고는 그저 그런 2단,또는 3단형 레이아웃의 스킨이 대부분이며 흔히 볼수 있는 그런 지루하고 따분한 디자인 일색이었습니다. 혹자들은 티스토리의 구조가 가지는 한계성 때문에 요즘 유행하는 웹디자인 요소를 적용한 스킨이 나올수 없다고들 합니다. 그러나 제 생각은 다릅니다. 기본적으로 오로지 기능을 위한 티스토리 스킨만이 존재할 뿐이지 디자인에 중점을 두고 만들어진 티스토리 스킨은 그렇게 많지 않습니다. 물론 블로그는 컨텐츠가 주 목적이기 때문에 간단 명료 해도 된다고 하지만, 적어도 간단하고 심플한 범위내에서 남들보다 튀어볼만한 요소를 넣는 것은 어느정도 용인이 가능하다고 봅니다. 일단 ‘독특한 구조의 스킨은 적용이 힘들다’라는 고정관념을 깨고 싶었습니다. 보통 구조가 일반적이지 않으면서도 설치나 사용이 불편한 스킨들은 감히 만드는 사람의 실력 문제라고 평하고 싶습니다. 물론 저도 고작 6개월 스킨 만든 쪼랩이긴 하지만, 원터치 인스톨이 가능한 범위 내에서도 얼마든지 화려하고 독창적인 스킨을 만들 수 있다고 생각합니다. 그래서 그 생각을 실제로 보여드리고자 Dynamite 스킨을 제작하게 되었습니다. 앞서 말씀드렸듯 이 스킨의 최대 목표는 첫번째가 독특한 디자인입니다. 그러나 디자인에 지나치게 치우쳐 퍼포먼스를 희생하는 여타 스킨과는 달리 두마리 토끼를 다 잡기 위해서 노력하였습니다. 그 결과로 스킨의 총 용량은 불과 0.28mb입니다. 전작인 Hare 스킨이 0.27mb이고, 스크립트 까지 적용된 것을 감안하면 엄청나게 가벼운 축에 듭니다. 페럴랙스 기법은 현재 유행하는 디자인 요소입니다. 사전적 의미로 페럴랙스는 ‘시차'를 의미하는 것인데, 스크롤할때 배경이 고정되어 있는 것이 아니라 스크롤 속도의 절반정도 되는 속도로 따라서 움직이게 되어있는 구조 입니다. 평면적인 웹 페이지가 더욱 입체적이고 생동감 있게 해주는 요소로서 적절하게 사용할시에 아주 독특하고 차별화된 느낌을 낼 수 있습니다. 특히 제가 나름 자랑스럽게 생각하는 부분의 하나는 이 페럴랙스 부분을 커스터마이징 하는 부분입니다. 커스터마이징이 가능한 요소들은 style.css에 상주하며, 이 부분의 코드를 수정하면 스킨의 다른요소에 영향없이 아주 빠르게 원하는데로 스타일 수정이 가능하게 하였습니다. 특히 페럴랙스 베너 부분은 페이지 별로 각각 다른 이미지를 넣는 것이 가능하기 때문에 원하는데로 꾸밀 수 있습니다.독특한 구조임에도 반응형 스펙을 완벽히 지원합니다. 모든 요소들은 각각의 스크린 사이즈에 맞게 최적화 되어있기 때문에 별다른 수정이 필요 없습니다. 특히 제작 과정 중에 티스토리 에디터에서 본문에 넣을 수 있는 요소를 모두 테스트하여 화면크기 별로 작동에 문제가 없는지도 테스트를 하였습니다.
Paper
04.22
Update Log
2014년 作
04.22
최초출시
Specification
HTML5
CSS3
SASS
Three Column
Responsive
Mobile First
Pure 1.2.1
YUI
Free
IE5
IE6
Download
PaperBehind Story
2단 사이드바 또는 3단 레이아웃이라고 불리우는 스킨 형태가 있습니다. 티스토리 기본 제공 스킨 중에도 이런 형태가 있는데요, 사이드 바에 아주 많은 것을 넣거나 아니면 사이드바 길이 때문에 스크롤이 길어지는 것을 꺼리는 경우에 이런 레이아웃을 사용합니다. 그러나 반응형 웹 시대가 도래하면서 이런 형태의 레이아웃은 점차 사라지게 되었습니다. 첫번째 이유는 여러 부분으로 쪼개지기 때문에 반응형으로 만들기가 까다롭습니다. 두번째는 사이드 바 하나 만으로도 반응형 만들려면 머리가 아픈데 2개나 되니 더욱 두통이 심해지기 때문입니다. 그래서 반응형 초창기 도입 단계에 3단 레이아웃은 종말을 선언하였고, 얼마 지나지 않아 2단 레이아웃도 서서히 종적을 감추고 있으며, 현재는 1단 레이아웃을 넘어서 full screen layout 이라는 새로운 개념이 등장해서 웹 디자인의 대세가 되고 있습니다. 3단 레이아웃은 이런 고전적인 레이아웃이기는 하나, 이런 레이아웃도 구성만 잘 잡으면 반응형으로 문제 없이 사용할 수 있습니다. paper 스킨도 이러한 단순한 아이디어에서 출발했습니다. paper 스킨은 3단형 스킨을 만들되, 사이드바는 반응형을 넣지 않고 본문 영역에만 반응형이 적용됩니다. 그러나 이 방법으로는 3단 레이아웃을 모바일에서 표시하기에는 한계가 있기에 테블릿에서는 2단 레이아웃, 스마트 폰에서는 1단 레이아웃으로 자동 변경이 됩니다.이런방식의 장점으로는 사이드바의 너비가 고정되어 있다보니 반응형에 최적화 되어있지 않은 구형 위젯들을 사용하기가 용이합니다. 소셜 네트워크 플러그인의 경우 반응형이 대부분 그럭저럭 지원되는 편이지만, 네이버나 다음에서 지원하는 블로그용 위젯들은 반응형이 아예 안되거나 반쪽 짜리인 경우가 대 다수 입니다. 2단 사이드 바를 놓고 쓰시는 분들은 대부분 화면에 아주 많은 위젯을 띄고 쓰시는 경향이 있기 때문에 반응형 스킨을 도입하기가 쉽지 않습니다. 본문 영역만 반응형으로 넣으면서 새로운 시도를 해보았습니다. 이전 작인 Life is a Journey나 Prototype 스킨은 반응형 스킨 임에도 화면 넓이 100%를 차지 하는 아주 독특한 형태를 취하고 있습니다. 이것을 만들면서 터득한 방법을 활용하여, paper 스킨은 최대 해상도의 제한이 없습니다. 최소 해상도는 320px이며 최대 해상도는 사용자의 모니터 크기 만큼이 곧 제한 해상도 입니다. 말 그대로 가로 폭이 2560이건 2880이건 전혀 문제가 없다는 겁니다. 스킨의 기본 글 넓이는 1920px으로 지정이 되어있으나 취향에 따라서 무한대로 늘여서 사용할 수 있습니다. 본 스킨에서는 반응형 스킨으로는 상상을 초월할 정도로 아주 적은 용량(0.07mb)과 매우 빠른 자바스크립트 플러그인 로딩속도를 구현했습니다. 자바스크립트 라이브러리는 YUI를 사용하여 비교적 간단한 기능을 보다 빠르게 구현하였습니다. 기존에 jQuery보다 기능은 적지만 필수 적인 것들을 아주 적은 용량으로 지원하고 야후 서버 cdn에서 끌어오므로 로딩 속도가 정말 빠릅니다. 일례로 이전 작인 Hare 스킨의 평균 로딩시간이 2.5초대 인데 비해, Paper 스킨은 1.5초대의 속도를 자랑합니다. 이전 작인 Hare를 가장 가벼운 반응형 스킨이라는 거창한 타이틀로 내어 놓았었는데, Paper 스킨이 그 자리를 뺏어와 버렸습니다. ㅎㅎ2단 사이드 바는 두 곳에 모두 위젯을 넣을 수 있습니다. 첫번째 사이드 바의 가로 폭은 200px이며, 두번째 사이드 바의 가로 폭은 300px 입니다. 예를 들면 첫번째 사이드바에는 스카이 스크래퍼 광고를, 두번째 사이드바에는 정사각형 광고를 넣는 것도 나쁘지 않아 보입니다. 취향에 따라 원하는 위젯을 마음껏 넣어보세요.
Modern Basic
04.29
Update Log
2014년 作
04.29
최초출시
Specification
HTML5
CSS3
SASS
Skin Wizard
SVG
Entypo
Free
IE5
IE6
Download
Modern BasicBehind Story
여태까지 제가 만든 스킨인 TechAesthetic, Prototype, Congnoscenti를 제외하고 그 이외에 나온 모든 스킨들은 티스토리의 기본 스킨인 Basic 기반으로 되어있습니다. 현재 사용중인 Life is a Journey 스킨도 역시나 Basic 기반인데요, 이렇게 많은 도움을 받은 Basic 스킨에게 작게나마 Tribute를 하기 위해서 뼈대는 그대로 두고 구조만 최신 구조로 바꾸어 보았습니다.
Mirage
05.06
Update Log
2014년 作
05.06
최초출시
Specification
HTML5
CSS3
SASS
SVG
Responsive
Mobile First
Foundation 5.2.2
Free
IE5
IE6
IE7
IE8
Download
MirageBehind Story
Mochi 라는 것을 들어보신 분은 제 생각에 많이 없을 것 같습니다. 모바일 운영체제 UX중에서 가장 뛰어났던 WebOS의 리디자인된 프레임 웍이 Mochi입니다. 2011년에 개발이 되었으나 HP가 WebOS를 포기 함에 따라 묻혀버린 비운의 프레임 웍입니다. 그러나 2014년 오픈소스화 되면서 소스코드가 일반에 공개되었습니다. 이 공개된 소스코드에 나타난 Mochi의 디자인이 너무 완성도가 높아, 비슷하게 블로그 스킨을 안 만들수가 없었습니다. (저는 죽으나 사나 팜덕후니까요)
Strada
05.06
Update Log
2014년 作
05.08
최초출시
Specification
HTML5
CSS3
SASS
SVG
Skin Wizard
Responsive
Gumby 2.6.3
Free
IE5
IE6
IE7
IE8
Download
StradaBehind Story
왜 이 스킨을 만들었느냐... 라는 질문을 받았다는 가정하에서 이실직고 하자면 단지 ‘스킨위자드가 되는 반응형 스킨을 한번 만들어보고 싶었다’고 밖에 말씀을 못 드리겠습니다. ㅋㅋ 어짜피 스킨 위자드 적용할꺼 Hare에다가 스킨위자드 기능만 끼워넣어볼까... 라는 생각도 했지만, 이미 만들어 놓은 구조 수정하기도 여러모로 귀찮아서 그냥 새로 스킨을 하나 만들었습니다. -_-a 요즘 사진이나 영상 위에 흰색으로 글씨 쓰는게 대세라서 그 대세에 발맞추어 심플하게 뽑아보았습니다. 진짜 별기능없고 초간단이기 때문에 제작시간도 약 4시간? 쯤 걸린 것 같네요. 막상 만들고보니 계획 했던것보단 이쁘게 나와서 나름 흡족합니다.