본문 바로가기

블로그

Strada - 스킨위자드 되는 티스토리 반응형 스킨 왜 이 스킨을 만들었느냐... 라는 질문을 받았다는 가정하에서 이실직고 하자면 단지 ‘스킨위자드가 되는 반응형 스킨을 한번 만들어보고 싶었다’고 밖에 말씀을 못 드리겠습니다. ㅋㅋ 어짜피 스킨 위자드 적용할꺼 Hare에다가 스킨위자드 기능만 끼워넣어볼까... 라는 생각도 했지만, 이미 만들어 놓은 구조 수정하기도 여러모로 귀찮아서 그냥 새로 스킨을 하나 만들었습니다. -_-a 요즘 사진이나 영상 위에 흰색으로 글씨 쓰는게 대세라서 그 대세에 발맞추어 심플하게 뽑아보았습니다. 진짜 별기능없고 초간단이기 때문에 제작시간도 약 4시간? 쯤 걸린 것 같네요. 막상 만들고보니 계획 했던것보단 이쁘게 나와서 나름 흡족합니다. 특징1 반응형 스킨 주제에 무려 구닥다리 티스토리 스킨위자드가 됩니다! 특징2 글씨가 흰색.. 더보기
티스토리에 바란다 몇 년째 유저 의견은 듣지도 않고 다음이 서버호스팅만 담당하는 수준의 양상을 띄고 있는 티스토리에게 크게 바라는 것은 없다. 다음과 같은 간단한 사항 만이라도 해결 되었으면 좋겠다. 기본 에디터에서 파일 끌어다 놓기를 지원해줬으면 좋겠다. 최신 브라우저에서는 대부분 지원되는 기능이고 많은 해외 사이트는 이 방식을 사용한다. 사진 업로더 개선이 시급하다 사진 첨부기능은 플래시에 의존하는 편집 가능한 버전과 그냥 사진만 달랑 올리는 사람을 위한 일반 파일 업로더 방식 둘다 지원해주면 좋겠다. 일반 업로더는 접속 상태가 좋지 않을때만 사용할 수 있는데 연결 상태가 좋더라도 사용할 수 있게 고쳐주면 좋겠다. 티스토리 에디터 기본 사진 편집을 사용하는 사람은 극소수 라는 것을 알았으면 한다. 그리고 플래시 업로더.. 더보기
Strada - 스킨 위자드 사용가능한 최초의(?) 반응형 스킨 요즘 커피숍들 같은데 보면 흰색 마커로 유리에 그림을 많이 그리더군요. 요즘 대세가 이미지 위에 글씨 쓰는걸 증명이라도 하듯 비미오의 영상이나 워드프레스용 스킨들도 이런류의 스타일을 적용하는 것을 흔히보고 있습니다. 그래서 대세에 맞추어 아예 잡스러운 색은 하나도 안쓰고 오로지 흰색만 사용하여 스킨을 한번 만들어 보았습니다. 티스토리에서는 skin.html과 style.css 수정을 지원합니다. 그러나 이러한 방식은 매우 하드코어하기 때문에 코드만 보면 울렁증을 일으키는 일반인에게는 그다지 적절하지 못한 방식입니다. 그래서 티스토리가 고민의 고민을 한 끝에 내놓은 것이 스킨 위자드 입니다 만… 생각보다 이게 그리 좋지 않습니다. 기껏 수정가능한 부분이라 해봤자 배경이나 타이틀의 배경, 높이, 글꼴, 색상.. 더보기
Mirage - Advanced tistory skin Mochi 라는 것을 들어보신 분은 제 생각에 많이 없을 것 같습니다. 모바일 운영체제 UX중에서 가장 뛰어났던 WebOS의 리디자인된 프레임 웍이 Mochi입니다. 2011년에 개발이 되었으나 HP가 WebOS를 포기 함에 따라 묻혀버린 비운의 프레임 웍입니다. 그러나 2014년 오픈소스화 되면서 소스코드가 일반에 공개되었습니다. 이 공개된 소스코드에 나타난 Mochi의 디자인이 너무 완성도가 높아, 비슷하게 블로그 스킨을 안 만들수가 없었습니다. (저는 죽으나 사나 팜덕후니까요) 최대한 비슷한 느낌을 살리기 위해서 이전에 없던 여러가지 시도를 해보았습니다. 아코디언 사이드바 사이드바 위젯들이 평상시에는 접혀있다가 선택시에 펼쳐지게 되어있습니다. 화면크기에 따라 바뀌는 메뉴 상단 메뉴는 화면크기에 따라.. 더보기
내가 부트스트랩을 쓰지 않는 이유 여태 까지 여러 종류의 블로그 스킨을 만들어 왔지만 부트스트랩은 단 한번 밖에 쓰지 않았다. 사실 처음에 부트스트랩을 접하게 된것은 거의 모든 해외 웹 디자인 사이트에서 연일 부트스트랩 타령을 하고 있었기 때문이다. 뭐가 그리 대단 한것인지 궁금해서 한번 써보았더니 미리 만들어놓은 요소를 사용한다는게 꽤 편했던 기억이 있다. 그러나 그 이후에 스킨을 만들면서 12개 정도 부트스트랩 이외의 프레임 웍을 써보았다. 그랬더니 가장 만족도가 낮았던 프레임 웍은 부트스트랩이었다. 첫번째. 沒개성 부트스트랩은 GitHub를 통해서 거의 유행처럼 번져나가게 되었다. 디자인 능력이 떨어지는 웹개발자들이 디자인 고민 필요 없이도 쉽게 프로토타입을 제작할 수 있다는 점에 있어 부트스트랩은 상당히 편한 도구이다. 그러나 부.. 더보기
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단 반응형은 이번에 처음 만들어 봅니다.스킨의 특징이라면 글 너비가 무제한이라는 것을 들 수가 있겠내요마치 테블릿 앱 처럼 작동합니다. 더보기
운영체제 별 시스템 폰트 적용 블로그에서 보이는 폰트 같은 것에 별다른 관심이 없다면 모든 운영체제에서 굴림체로 뜨게 할 수도 있다. 그러나 전 우주의 평화와 번영을 위해서 그런 일은 삼가토록 한다. 요즘은 시스템에서 기본으로 제공하는 폰트도 나쁘지 않은 편이므로 양심이 있다면 시스템 폰트를 불러오도록 설정해주는 것이 좋다. 특히 운영체제에 따라서 지원하는 기본 시스템 폰트가 다르므로 font-family를 지정할 때 신중하게 하여야 한다. - 시스템 별로 기본 지원하는 한글 폰트 목록 - 윈도우xp - 아직도 사용 중이라면 자연사 박물관에 자리 마련 가능윈도우 비스타,7,8 - 맑은 고딕 OS X 라이언 (10.8) - 애플 고딕OS X 마운틴 라이언 (10.9) - 애플 산돌 고딕 네오 우분투 - 나눔고딕 안드로이드 4.4 이전 .. 더보기

티스토리툴바