본문 바로가기

티스토리

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단 그리드 입니다. 그리고 사이드바를 옆으로 땡겨서 왼쪽에 위치되어있고요, 모바일 뷰에서는 아래로 내려갑니다. 이외에도 자동 숨김처리 되는 오른쪽 메뉴와 화면 크기가 줄어들때 자동으로 오프켄버스 메뉴가 뜹니다. 스킨의 전체적인 스타일도 아주 독특하게 만들었습니다. 메뉴는 전부다 아코디언 형태로 숨겨져 있고, 게시글의 코멘트와 트랙백, 태그는 텝 형태로 지원이 됩니다. 그리고 베포용 스킨으로서는 최초로 블루프린트를 제거하는 기능을 적용하였습니다. 이 때문에 적용과정이 약간 귀찮아 지긴했지만 그렇게 힘들진 않으니 초보자도 문제 없이 설치가 가능하리라 봅니다. 덕분에 반응형 스펙을 완벽하게.. 더보기
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.. 더보기
Paper - 티저 2단 반응형은 여러개 만들어 보았지만 3단 반응형은 이번에 처음 만들어 봅니다.스킨의 특징이라면 글 너비가 무제한이라는 것을 들 수가 있겠내요마치 테블릿 앱 처럼 작동합니다. 더보기
티스토리 에디터 클래스 분석 스킨 수정을 하다 보면 다른 부분은 건드리기 싫고 딱 본문에 나오는 이 부분만 바꿔보고 싶다는 생각을 할 때가 있다. 이를 위해서 몇 가지 css 셀랙터가 필요한데 이 기회에 정리를 해보았다. 티스토리 공식 스킨 가이드에는 더 보기 접기 부분만 나와 있기 때문에 좀 불만이 있는 부분이기도 하다. tt_article_useless_p_margin→ 티스토리 글 설정에서 문단 간격 없음을 선택하면 자동으로 감싸지는 div. 의외로 활용도가 많고 스킨 구조에 상관없이 딱 글 부분만 선택해서 css 적용하기 유용한 셀렉터 이므로 왠만하면 이 옵션을 켜는게 좋다. 물론 이걸 안 켜 놓으면 문단 사이 간격이 어마어마하게 넓어지기 때문에 이미 다 사용하고 있는 기능이라고 본다. 참고로 문단 간격 없음을 설정하지 않으.. 더보기
Dynamite - Parallax Tistory Skin 티스토리로 옮겨온지도 거진 1년이 다 되어 가고 있습니다. 늘 사용하면서 느끼는 것인데, 베포용 스킨이나, 아니면 개인이 제작한 스킨을 보면 정말 독특한 몇몇 블로그를 제외하고는 그저 그런 2단,또는 3단형 레이아웃의 스킨이 대부분이며 흔히 볼수 있는 그런 지루하고 따분한 디자인 일색이었습니다. 혹자들은 티스토리의 구조가 가지는 한계성 때문에 요즘 유행하는 웹디자인 요소를 적용한 스킨이 나올수 없다고들 합니다. 그러나 제 생각은 다릅니다. 기본적으로 오로지 기능을 위한 티스토리 스킨만이 존재할 뿐이지 디자인에 중점을 두고 만들어진 티스토리 스킨은 그렇게 많지 않습니다. 물론 블로그는 컨텐츠가 주 목적이기 때문에 간단 명료 해도 된다고 하지만, 적어도 간단하고 심플한 범위내에서 남들보다 튀어볼만한 요소를 .. 더보기

티스토리툴바