본문 바로가기

Works

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단 반응형은 이번에 처음 만들어 봅니다.스킨의 특징이라면 글 너비가 무제한이라는 것을 들 수가 있겠내요마치 테블릿 앱 처럼 작동합니다. 더보기
Dynamite - Parallax Tistory Skin 티스토리로 옮겨온지도 거진 1년이 다 되어 가고 있습니다. 늘 사용하면서 느끼는 것인데, 베포용 스킨이나, 아니면 개인이 제작한 스킨을 보면 정말 독특한 몇몇 블로그를 제외하고는 그저 그런 2단,또는 3단형 레이아웃의 스킨이 대부분이며 흔히 볼수 있는 그런 지루하고 따분한 디자인 일색이었습니다. 혹자들은 티스토리의 구조가 가지는 한계성 때문에 요즘 유행하는 웹디자인 요소를 적용한 스킨이 나올수 없다고들 합니다. 그러나 제 생각은 다릅니다. 기본적으로 오로지 기능을 위한 티스토리 스킨만이 존재할 뿐이지 디자인에 중점을 두고 만들어진 티스토리 스킨은 그렇게 많지 않습니다. 물론 블로그는 컨텐츠가 주 목적이기 때문에 간단 명료 해도 된다고 하지만, 적어도 간단하고 심플한 범위내에서 남들보다 튀어볼만한 요소를 .. 더보기
Dynamite 거의 완료 어느정도 실사 좀 해보고 버그를 잡은 뒤에 업로드 하도록 하겠습니다. 더보기
이글루스 스킨 제작 일지 이글루스 스킨을 제작하면서 만나는 별의 별 개같은 경우를 아주 상세히 열거하고, 어떻게 우회를 했는지도 간략하게 설명해보려 한다. 일단 이글루스는 head 부분을 수정할 수 없기 때문에 meta 태그를 쓸 수가 없고, 따라서 view port를 수정할 수 없기 때문에 반응형 스킨의 적용이 불가능하다. 걍 동명의 티스토리 스킨 scss가 아까워서(사실은 입대 전에 잉여력 폭발해서) 이글루스에 적용시도를 해보았으나 티스토리 만들때 보다 더 작업이 많아졌다 -_- 이글루스는 스킨의 기본폰트가 굴림으로 뜬다 (님들아 자비 좀…) 티스토리는 돋움이 기본 폰트고, 네이버는 돋움 기본에 나눔고딕 설치 되어있을시에는 나눔고딕으로 로드를 하게 설정이 되어있다. 제발 좀… 굴림 좀 쓰지말자. 스킨 곳곳에 em,abbr 같.. 더보기
Dynamite - 페이지 별 페럴랙스 헤더 dynamite 스킨의 최대 특징으로는 페이지 별로 별도의 페럴랙스 헤더 배경을 지정할 수 있습니다. 티에디션 방명록 키로그 위치로그 미디어 로그 보호글 검색 결과 태그 클라우드 본문 본문 제목이 아주 길때 본문 제목이 아주 길때는 타이틀 부가 커지면서 밑부분이 드러나게 됩니다. 권장하는 헤더 배경 크기는 1920x1080 사이즈이며, 그 이상도 괜찮지만 너무 크면 스크롤시 버벅거리므로 신중하게 적용하셔야 할듯 합니다. 더보기
Hare for egloos -가장 빠르고 가볍고 '이쁜' 이글루스 반응형 스킨 본 스킨은 동명의 티스토리 스킨인 Hare for Tistory를 컨버전 하여 이글루스 용으로 변경해 놓은 것 입니다. 티스토리 용은 HTML5와 CSS3 기반으로 되어있으나 이글루스용 스킨은 이글루스의 저질스런 구조에 맞추어 XHTML Transitional 기반으로 변경되었으며, 시멘틱 구조를 지원하지 않기 때문에 SEO 따위는 꿈도 꾸지 않는게 좋습니다. 제 이글루스 블로그에 적용되어 있는 스킨이 바로 이 스킨이며 아주 미려한 디자인과 색상 배치가 적용되어 있습니다. 스킨의 주요 특징으로는 레스터 이미지가 일체 사용되지 않았으며 각종 아이콘은 SVG로 스타일시트를 통해 injection되게 해놓았습니다. 그래서 따로 번거롭게 이미지 파일을 넣는다던가 하는 삽질을 할 필요 없이 원터치로 인스톨이 가능.. 더보기

티스토리툴바