본문 바로가기

Works/Tistory Skin

EP1 - The New Standard for Tistory Skin 아래 링크를 클릭하면 선택된 항목으로 바로 이동합니다. 소개 관리 페이지 지원 기능 일람 지원 플러그인 목록 에디터 별 지원기능 안내 설치 방법 티에디션 세부 설정 방법 테터데스크 세부 설정 방법 스킨위자드 세부 설정 방법 다운로드 세 줄 요약 소개 꾸준히 티스토리 스킨 개발을 해온 것은 아니지만 그래도 가끔씩 개발을 하면서 느꼈던 점은, 타 블로그 서비스에 비해서 티스토리가 지원하는 기능이 정말 많다는 것 입니다. 물론 기능이 많다는 것은 좋은 점이지만 반대로 스킨을 만드는 개발자 입장에서는 신경써야 할 것이 늘어나는 것이기도 합니다. 그래서 현재 티스토리에서 다운로드 받을 수 있는 유저 제작 스킨이나, 심지어 티스토리에서 직접 제작한 스킨까지도 이전에 제공하던 기능을 더 이상 제공하지 않는 경우가 많.. 더보기
EP1 2차 티저 빌어먹을 IE 최적화 때문에 공개가 지연되고 있다. 마음 같아서는 그냥 IE / 엣지 지원 버리고 내놓고 싶지만... 브라우저 통계를 보니 아직도 머한민국에 30%가 넘는 정신병자가 있다고 떠서 어쩔 수 없이 별도 코드 작성중... 더보기
티스토리 배포용 스킨 티저 - EP1 티스토리에서 지원하는 모든 기능과 호환되는 나름 최초?의 스킨 - 툴바 지원- 플러그인 지원- 티에디션 지원- 테터데스크 지원- CSS Grid 베이스- 골-든시불장™ 레이아웃 엔진 더보기
티스토리 스킨 볼트 공개 지난 5월 25일 티스토리는 구형 스킨의 지원을 끊으면서 스킨 메뉴에서 구형스킨을 고를 수 없게 리스트에서 삭제 되었다. 티스토리 구 스킨 일부 지원 종료 사전 안내 하지만 예전 스킨 코드를 보면 상당히 재밌는 구석도 많이 있고 여러가지 실험을 해볼만한 여지도 많이 남아 있어 미리 다운로드 받아 놓았다. 이것들을 필요한 사람들이 사용할 수 있도록 다시 정리하여 재업로드 하였다. 색상 배리에이션의 경우 따로 보관하지 않았다. 따라서 서비스 종료전의 스킨 라이브러리와 100%는 일치하지 않음에 유의 할 것. 스킨의 미리보기 이미지와, 다운로드 링크, 그리고 제작자 정보와 홈페이지 링크를 제공한다. 스킨 설명이나 라이센스 정보는 해당 스킨의 파일에 들어있는 것을 그대로 옮겼으며 라이센스도 동일하게 적용된다. .. 더보기
Material Design Lite Tistory - 1.0.0 beta ※본 스킨은 베타 버전이므로 예상치 못한 버그가 있을 수 있음. 버그 발견시 아래 댓글난에 제보바람 3년만에 만드는 티스토리 배포용 스킨이다. 현재 쓰고 있는 스킨을 만들기 위해 인터넷 여러 곳을 떠돌아 다니며 많은 것들을 보았다. 그러다 발견한 것이 바로 MDL 이다. MDL은 구글 디자인 팀에서 만든 머티리얼 디자인 웹 개발 키트이다. 기존의 머티리얼 디자인이 안드로이드와 그 외의 구글 제품들에 적용이 되었는데 여기서 한단계 나아가 웹에서도 머티리얼 요소를 쓰게 해준다. 머티리얼 테마인 리플 버튼이나 갖가지 애니메이션이 모두 지원이 된다. 이 테마는 기존에 있던 스킨을 티스토리용으로 변환 한것이다. MDL 홈페이지에 가면 원본 스킨을 볼 수 있다. MDLT 스킨은 티스토리에서 기본으로 지원하는 기능을.. 더보기
[WIP] MDLT MDL의 블로그 목업을 바탕으로 만든 티스토리 스킨. 아파치 2.0 라이센스 적용. 반응형, 스킨위자드 지원 CSS를 뻥안치고 약 한줄 밖에 안 썼다. 기존에 존재하는 클래스 조합으로 다 땜빵함... 제작시간 약 4시간? CSS 안쓰고 스킨 만들기 도전 해봤는데 이것도 사람할짓 아님 -ㅁ- 더보기
Strada - 스킨위자드 되는 티스토리 반응형 스킨 왜 이 스킨을 만들었느냐... 라는 질문을 받았다는 가정하에서 이실직고 하자면 단지 ‘스킨위자드가 되는 반응형 스킨을 한번 만들어보고 싶었다’고 밖에 말씀을 못 드리겠습니다. ㅋㅋ 어짜피 스킨 위자드 적용할꺼 Hare에다가 스킨위자드 기능만 끼워넣어볼까... 라는 생각도 했지만, 이미 만들어 놓은 구조 수정하기도 여러모로 귀찮아서 그냥 새로 스킨을 하나 만들었습니다. -_-a 요즘 사진이나 영상 위에 흰색으로 글씨 쓰는게 대세라서 그 대세에 발맞추어 심플하게 뽑아보았습니다. 진짜 별기능없고 초간단이기 때문에 제작시간도 약 4시간? 쯤 걸린 것 같네요. 막상 만들고보니 계획 했던것보단 이쁘게 나와서 나름 흡족합니다. 특징1 반응형 스킨 주제에 무려 구닥다리 티스토리 스킨위자드가 됩니다! 특징2 글씨가 흰색.. 더보기
Mirage - Advanced tistory skin Mochi 라는 것을 들어보신 분은 제 생각에 많이 없을 것 같습니다. 모바일 운영체제 UX중에서 가장 뛰어났던 WebOS의 리디자인된 프레임 웍이 Mochi입니다. 2011년에 개발이 되었으나 HP가 WebOS를 포기 함에 따라 묻혀버린 비운의 프레임 웍입니다. 그러나 2014년 오픈소스화 되면서 소스코드가 일반에 공개되었습니다. 이 공개된 소스코드에 나타난 Mochi의 디자인이 너무 완성도가 높아, 비슷하게 블로그 스킨을 안 만들수가 없었습니다. (저는 죽으나 사나 팜덕후니까요) 최대한 비슷한 느낌을 살리기 위해서 이전에 없던 여러가지 시도를 해보았습니다. 아코디언 사이드바 사이드바 위젯들이 평상시에는 접혀있다가 선택시에 펼쳐지게 되어있습니다. 화면크기에 따라 바뀌는 메뉴 상단 메뉴는 화면크기에 따라.. 더보기
Modern Basic - 티스토리 기본 스킨의 HTML5/ CSS3 버전 여태까지 제가 만든 스킨인 TechAesthetic, Prototype, Congnoscenti를 제외하고 그 이외에 나온 모든 스킨들은 티스토리의 기본 스킨인 Basic 기반으로 되어있습니다. 현재 사용중인 Life is a Journey 스킨도 역시나 Basic 기반인데요, 이렇게 많은 도움을 받은 Basic 스킨에게 작게나마 Tribute를 하기 위해서 뼈대는 그대로 두고 구조만 최신 구조로 바꾸어 보았습니다. 모더나이즈라고 거창하게 이름 붙이긴 했는데요, 주요 개선 골자는 HTML5 시멘틱 구조 도입, CSS3 적용, 레스터 이미지 대신 SVG 100% 적용 입니다. 덕분에 스킨 용량은 157kb 입니다. (이상하게도 미리보기 이미지는 용량을 따지질 않는군요) 티스토리 기본 방식을 그대로 쓰다보니.. 더보기
Paper - 3단 반응형 티스토리 스킨 2단 사이드바 또는 3단 레이아웃이라고 불리우는 스킨 형태가 있습니다. 티스토리 기본 제공 스킨 중에도 이런 형태가 있는데요, 사이드 바에 아주 많은 것을 넣거나 아니면 사이드바 길이 때문에 스크롤이 길어지는 것을 꺼리는 경우에 이런 레이아웃을 사용합니다. 그러나 반응형 웹 시대가 도래하면서 이런 형태의 레이아웃은 점차 사라지게 되었습니다. 첫번째 이유는 여러 부분으로 쪼개지기 때문에 반응형으로 만들기가 까다롭습니다. 두번째는 사이드 바 하나 만으로도 반응형 만들려면 머리가 아픈데 2개나 되니 더욱 두통이 심해지기 때문입니다. 그래서 반응형 초창기 도입 단계에 3단 레이아웃은 종말을 선언하였고, 얼마 지나지 않아 2단 레이아웃도 서서히 종적을 감추고 있으며, 현재는 1단 레이아웃을 넘어서 full scr.. 더보기