Mochi 라는 것을 들어보신 분은 제 생각에 많이 없을 것 같습니다. 모바일 운영체제 UX중에서 가장 뛰어났던 WebOS의 리디자인된 프레임 웍이 Mochi입니다. 2011년에 개발이 되었으나 HP가 WebOS를 포기 함에 따라 묻혀버린 비운의 프레임 웍입니다. 그러나 2014년 오픈소스화 되면서 소스코드가 일반에 공개되었습니다. 이 공개된 소스코드에 나타난 Mochi의 디자인이 너무 완성도가 높아, 비슷하게 블로그 스킨을 안 만들수가 없었습니다. (저는 죽으나 사나 팜덕후니까요)
최대한 비슷한 느낌을 살리기 위해서 이전에 없던 여러가지 시도를 해보았습니다.
-
아코디언 사이드바
사이드바 위젯들이 평상시에는 접혀있다가 선택시에 펼쳐지게 되어있습니다.
화면크기에 따라 바뀌는 메뉴
상단 메뉴는 화면크기에 따라서 형태가 변합니다. 검색창이 모바일 뷰에서는 메뉴 아래로 들어갑니다.
오프스크린 메뉴
모바일 뷰에서는 오프스크린 메뉴를 사용 할 수 있습니다.
-
-
텝 형식의 게시글 메뉴
댓글,트랙백,태그,소셜 메뉴를 텝형태로 지원을 하여 차지하는 공간을 줄였습니다.
-
토글 버튼 형태의 비밀글 체크박스
비밀글 체크박스를 토글 형태로 전환하여 일관성 있는 스타일을 구성했습니다.
-
-
반응형 티에디션
기존 티스토리에서 지원하는 블루프린트 기반의 프레임 웍을 끌어다가 이리저리 늘여서 반응형으로 만드는 것이 아니라 완전히 블루프린트를 제거하고 자체 CSS만으로 반응형 티에디션을 구현합니다.
-
내장형 소셜 메뉴
주요 소셜 네트워크 서비스에 글을 보낼 수 있는 기능을 기본으로 제공합니다.
-
스크린 샷
설치방법
실험용이다 보니 제가 만든 기존의 스킨과는 설치 방법이 약간 다릅니다. 스킨 파일 업로드 → 적용 방식은 일반 스킨과 다를바가 없으나 스킨을 적용하고 나면 티에디션에 접근하여 수정이 불가능 합니다. 그래서 스킨을 적용하기 전에 미리 티에디션을 수정해야 합니다.
스킨은 기본스킨 중에 아무거나 선택하셔도 상관없습니다.
스킨을 지정한 후, 관리 메뉴의 화면설정에서 티에디션을 활성화 시킵니다.
그리고 티에디션 시작하기에 들어갑니다. 현재 적용 되어있는 아이템이 있다면 전부다 제거 합니다. 그리고 새로운 아이템을 하나 생성합니다.
아이템은 무엇을 선택하던지 관계 없습니다. 선택후 디자인텝을 선택합니다.
디자인텝에서 html난으로 들어갑니다.
mirage-tedition.txtHTML난에 첨부파일의 티에디션 코드를 입력합니다.
코드는 다음과 같습니다.
<div class="box">
<s_tabloid>
<s_article_rep>
<div class="inner">
<a href="[ ##_article_rep_link_## ]">
<img src="http://[ ##_article_rep_thumb_host_## ]/T950x950/[ ##_article_rep_thumb_hash_## ]" alt="[ ##_article_rep_title_## ]" />
<h2>[ ##_article_rep_title_excerpt_## ]</h2>
</a>
</div>
</s_article_rep>
</s_tabloid>
</div>
화면에 표시되는 아이템 갯수를 늘리려면 + 버튼을 누르면 됩니다. 티에디션이 심하게 깨지더라도 스킨을 적용하면 스킨이 알아서 잘 뜨게 해주니 걱정 안 하셔도 됩니다.
이제 원하는 만큼 아이템을 넣었으면 적용을 해줍니다.
티에디션 적용이 완료가 되었다면 이제 스킨을 설치하시면 됩니다.
Mirage 1.0.1.zip첨부파일을 다운로드 받습니다.
환경설정 → 스킨에서 스킨 등록
추가 버튼 클릭
파일 업로드 → images 폴더 안까지 싹다 업로드 해줍니다.
스킨 저장명 지정하고 해당된 이름의 스킨을 스킨 보관함에서 선택 후 적용 완료 하면 됩니다.
반응형 스킨이기 때문에 모바일웹 스킨은 반드시 꺼주셔야 합니다.
댓글 옆 프로필 이미지를 사용하려면 플러그인 설정에서 블로그 아이콘 표시 → 사이즈 선택 64x64px로 지정합니다.
소셜 메뉴 사용하기
처음 스킨을 설치하면 소셜 메뉴가 비활성화 되어있습니다. 사용자가 소스코드 수정을 통해서 수정을 해줘야 사용이 가능합니다. 소셜 버튼의 경우, 자신의 블로그 주소를 끌어다가 링크를 걸게 되어있으나, 티스토리에서 자신의 블로그 주소를 끌어다주는 치환자는 없습니다. 그래서 어쩔 수 없이 직접 수정해야 합니다. 이 기능이 필요가 없다면 삭제하셔도 별 지장 없습니다.
skin.html에서 [블로그주소] 라는 부분을 찾아서 자신의 블로그 주소로 교체해 줍니다.
e.g.) [블로그주소] → est0que.tistory.com
FAQ
Q. 스킨 적용 후 티에디션에 뜨는 게시글 갯수를 바꾸고 싶어요.
A. 위의 방법을 역순으로 기본스킨 적용 후 아이템 갯수 조절하고 다시 스킨을 재적용 하면 됩니다.
유의사항
베이스 css는 mirage.css이며 기본 티스토리 스타일은 이것 보다 우선순위가 높기 때문에 이 위에 덮어쓰는 방식으로 수정을 하시면 됩니다. 베이스 css는 무분별한 수정으로 인하여 오류가 나는 것을 막기 위해 압축 처리되어 있습니다. 굳이 이 파일을 건드릴 필요 없이 Style.css만 수정하시면 됩니다.
IE9 이하 지원 안 합니다. 계획도 없으니 요청금지.
개인 별 커스텀 수정 역시 요청 받지 않습니다. 수정 요청 금지.
사이드바 저작권 표시 지우지 마세요.
모든 기능은 jQuery 위주로 돌아갑니다. jQuery 빼지 마세요.
스킨관련 문의/버그신고
댓글 난에 해주시되, 답변은 첫 휴가 나오면 일괄로 해드리겠습니다. 방명록이나 메일로 요청시에는 가차없이 삭제합니다.
16.9.11 - 폰트 엘리어싱 hack 제거
