본문 바로가기

반응형

EP1 - The New Standard for Tistory Skin 아래 링크를 클릭하면 선택된 항목으로 바로 이동합니다. 소개 관리 페이지 지원 기능 일람 지원 플러그인 목록 에디터 별 지원기능 안내 설치 방법 티에디션 세부 설정 방법 테터데스크 세부 설정 방법 스킨위자드 세부 설정 방법 다운로드 세 줄 요약 소개 꾸준히 티스토리 스킨 개발을 해온 것은 아니지만 그래도 가끔씩 개발을 하면서 느꼈던 점은, 타 블로그 서비스에 비해서 티스토리가 지원하는 기능이 정말 많다는 것 입니다. 물론 기능이 많다는 것은 좋은 점이지만 반대로 스킨을 만드는 개발자 입장에서는 신경써야 할 것이 늘어나는 것이기도 합니다. 그래서 현재 티스토리에서 다운로드 받을 수 있는 유저 제작 스킨이나, 심지어 티스토리에서 직접 제작한 스킨까지도 이전에 제공하던 기능을 더 이상 제공하지 않는 경우가 많.. 더보기
EP1 2차 티저 빌어먹을 IE 최적화 때문에 공개가 지연되고 있다. 마음 같아서는 그냥 IE / 엣지 지원 버리고 내놓고 싶지만... 브라우저 통계를 보니 아직도 머한민국에 30%가 넘는 정신병자가 있다고 떠서 어쩔 수 없이 별도 코드 작성중... 더보기
[WIP] Meltdown Rev.2 이글루스를 시작으로 티스토리 스킨까지 기존에 있는 스킨들을 최신화, 코드 정리, 구조 / 속도 개선 작업을 할 예정이다. (사실 이거 2016년 7월에 했어야 했는데 1년이나 미루어졌다) 첫빠따(?)는 최초로 만든 이글루스 스킨인 Meltdown. 지금 와서 코드를 까보니 완전 개판오분전이다. 내가 이딴 스파게티 코드를 짜고 있었다니... 라고 자괴감이 드는 순간이다. 2014년에 짰던 코드 수준 지금 짜는 코드 수준 주요 변경 사항은 웹폰트 적용, compass 완전히 제거, 속도 개선, 자동 업데이트 기능 추가 등이다. 웹폰트와 rawgit의 속도 때문에 그다지 빠르진 않은 편이지만 일단 css가 케싱 되고 나면 퍼포먼스 상에 딱히 문제는 없어보인다. 어짜피 이글루스 구조도 개판인데 웹폰트 로딩이 개.. 더보기
Material Design Lite Tistory - 1.0.0 beta ※본 스킨은 베타 버전이므로 예상치 못한 버그가 있을 수 있음. 버그 발견시 아래 댓글난에 제보바람 3년만에 만드는 티스토리 배포용 스킨이다. 현재 쓰고 있는 스킨을 만들기 위해 인터넷 여러 곳을 떠돌아 다니며 많은 것들을 보았다. 그러다 발견한 것이 바로 MDL 이다. MDL은 구글 디자인 팀에서 만든 머티리얼 디자인 웹 개발 키트이다. 기존의 머티리얼 디자인이 안드로이드와 그 외의 구글 제품들에 적용이 되었는데 여기서 한단계 나아가 웹에서도 머티리얼 요소를 쓰게 해준다. 머티리얼 테마인 리플 버튼이나 갖가지 애니메이션이 모두 지원이 된다. 이 테마는 기존에 있던 스킨을 티스토리용으로 변환 한것이다. MDL 홈페이지에 가면 원본 스킨을 볼 수 있다. MDLT 스킨은 티스토리에서 기본으로 지원하는 기능을.. 더보기
Life is Journey v 3.0 대세는 모바일 이다. 백년 전부터 모바일이 대세라는 소리를 귀가 따갑게 들었지만 이제는 정말 모바일 대세다. 어느새 모바일 기기는 64비트 아키텍쳐를 품고 PC와 대등한 존재가 되어버렸다. 그리고 통신망의 발달로 인해서 더 빠른 시간에 웹 페이지를 로드 할 수 있게 되었고, 날이 갈수록 새로 등장하는 기술들 덕분에 웹은 더 다채롭고 빨라지고 있다. 지금 처럼 웹이 격변하는 시기는 웹의 도래 초기 이후로 전무후무하다. 이에 따라 한시도 쉬지 않고 업데이트를 하지 않으면 시대에 뒤쳐질 수 밖에 없는 처지에 놓인 것이 스킨제작자의 삶이 아닐까한다. 이번 업데이트에서는 여러가지 알려진 오류를 수정하였고, 신형 기기지원, 구형기기 지원의 향상 그리고 빠질 수 없는 요소인 속도에 중점을 둔 최적화를 하였다. 그 뿐.. 더보기
Strada - 스킨위자드 되는 티스토리 반응형 스킨 왜 이 스킨을 만들었느냐... 라는 질문을 받았다는 가정하에서 이실직고 하자면 단지 ‘스킨위자드가 되는 반응형 스킨을 한번 만들어보고 싶었다’고 밖에 말씀을 못 드리겠습니다. ㅋㅋ 어짜피 스킨 위자드 적용할꺼 Hare에다가 스킨위자드 기능만 끼워넣어볼까... 라는 생각도 했지만, 이미 만들어 놓은 구조 수정하기도 여러모로 귀찮아서 그냥 새로 스킨을 하나 만들었습니다. -_-a 요즘 사진이나 영상 위에 흰색으로 글씨 쓰는게 대세라서 그 대세에 발맞추어 심플하게 뽑아보았습니다. 진짜 별기능없고 초간단이기 때문에 제작시간도 약 4시간? 쯤 걸린 것 같네요. 막상 만들고보니 계획 했던것보단 이쁘게 나와서 나름 흡족합니다. 특징1 반응형 스킨 주제에 무려 구닥다리 티스토리 스킨위자드가 됩니다! 특징2 글씨가 흰색.. 더보기
Strada - 스킨 위자드 사용가능한 최초의(?) 반응형 스킨 요즘 커피숍들 같은데 보면 흰색 마커로 유리에 그림을 많이 그리더군요. 요즘 대세가 이미지 위에 글씨 쓰는걸 증명이라도 하듯 비미오의 영상이나 워드프레스용 스킨들도 이런류의 스타일을 적용하는 것을 흔히보고 있습니다. 그래서 대세에 맞추어 아예 잡스러운 색은 하나도 안쓰고 오로지 흰색만 사용하여 스킨을 한번 만들어 보았습니다. 티스토리에서는 skin.html과 style.css 수정을 지원합니다. 그러나 이러한 방식은 매우 하드코어하기 때문에 코드만 보면 울렁증을 일으키는 일반인에게는 그다지 적절하지 못한 방식입니다. 그래서 티스토리가 고민의 고민을 한 끝에 내놓은 것이 스킨 위자드 입니다 만… 생각보다 이게 그리 좋지 않습니다. 기껏 수정가능한 부분이라 해봤자 배경이나 타이틀의 배경, 높이, 글꼴, 색상.. 더보기
Mirage - Advanced tistory skin Mochi 라는 것을 들어보신 분은 제 생각에 많이 없을 것 같습니다. 모바일 운영체제 UX중에서 가장 뛰어났던 WebOS의 리디자인된 프레임 웍이 Mochi입니다. 2011년에 개발이 되었으나 HP가 WebOS를 포기 함에 따라 묻혀버린 비운의 프레임 웍입니다. 그러나 2014년 오픈소스화 되면서 소스코드가 일반에 공개되었습니다. 이 공개된 소스코드에 나타난 Mochi의 디자인이 너무 완성도가 높아, 비슷하게 블로그 스킨을 안 만들수가 없었습니다. (저는 죽으나 사나 팜덕후니까요) 최대한 비슷한 느낌을 살리기 위해서 이전에 없던 여러가지 시도를 해보았습니다. 아코디언 사이드바 사이드바 위젯들이 평상시에는 접혀있다가 선택시에 펼쳐지게 되어있습니다. 화면크기에 따라 바뀌는 메뉴 상단 메뉴는 화면크기에 따라.. 더보기
Mirage - 실험용 티스토리 스킨 티저 실험용이라고 해서 베포를 안 하는 것은 아니고요, 여태까지 시도된적 없는 방법을 많이 써봤습니다. 일단 그리드 부터가 16단 그리드 입니다. 그리고 사이드바를 옆으로 땡겨서 왼쪽에 위치되어있고요, 모바일 뷰에서는 아래로 내려갑니다. 이외에도 자동 숨김처리 되는 오른쪽 메뉴와 화면 크기가 줄어들때 자동으로 오프켄버스 메뉴가 뜹니다. 스킨의 전체적인 스타일도 아주 독특하게 만들었습니다. 메뉴는 전부다 아코디언 형태로 숨겨져 있고, 게시글의 코멘트와 트랙백, 태그는 텝 형태로 지원이 됩니다. 그리고 베포용 스킨으로서는 최초로 블루프린트를 제거하는 기능을 적용하였습니다. 이 때문에 적용과정이 약간 귀찮아 지긴했지만 그렇게 힘들진 않으니 초보자도 문제 없이 설치가 가능하리라 봅니다. 덕분에 반응형 스펙을 완벽하게.. 더보기
Paper - 3단 반응형 티스토리 스킨 2단 사이드바 또는 3단 레이아웃이라고 불리우는 스킨 형태가 있습니다. 티스토리 기본 제공 스킨 중에도 이런 형태가 있는데요, 사이드 바에 아주 많은 것을 넣거나 아니면 사이드바 길이 때문에 스크롤이 길어지는 것을 꺼리는 경우에 이런 레이아웃을 사용합니다. 그러나 반응형 웹 시대가 도래하면서 이런 형태의 레이아웃은 점차 사라지게 되었습니다. 첫번째 이유는 여러 부분으로 쪼개지기 때문에 반응형으로 만들기가 까다롭습니다. 두번째는 사이드 바 하나 만으로도 반응형 만들려면 머리가 아픈데 2개나 되니 더욱 두통이 심해지기 때문입니다. 그래서 반응형 초창기 도입 단계에 3단 레이아웃은 종말을 선언하였고, 얼마 지나지 않아 2단 레이아웃도 서서히 종적을 감추고 있으며, 현재는 1단 레이아웃을 넘어서 full scr.. 더보기

티스토리툴바