본문 바로가기

스킨

EP1 - The New Standard for Tistory Skin 아래 링크를 클릭하면 선택된 항목으로 바로 이동합니다. 소개 관리 페이지 지원 기능 일람 지원 플러그인 목록 에디터 별 지원기능 안내 설치 방법 티에디션 세부 설정 방법 테터데스크 세부 설정 방법 스킨위자드 세부 설정 방법 다운로드 세 줄 요약 소개 꾸준히 티스토리 스킨 개발을 해온 것은 아니지만 그래도 가끔씩 개발을 하면서 느꼈던 점은, 타 블로그 서비스에 비해서 티스토리가 지원하는 기능이 정말 많다는 것 입니다. 물론 기능이 많다는 것은 좋은 점이지만 반대로 스킨을 만드는 개발자 입장에서는 신경써야 할 것이 늘어나는 것이기도 합니다. 그래서 현재 티스토리에서 다운로드 받을 수 있는 유저 제작 스킨이나, 심지어 티스토리에서 직접 제작한 스킨까지도 이전에 제공하던 기능을 더 이상 제공하지 않는 경우가 많.. 더보기
EP1 2차 티저 빌어먹을 IE 최적화 때문에 공개가 지연되고 있다. 마음 같아서는 그냥 IE / 엣지 지원 버리고 내놓고 싶지만... 브라우저 통계를 보니 아직도 머한민국에 30%가 넘는 정신병자가 있다고 떠서 어쩔 수 없이 별도 코드 작성중... 더보기
티스토리 배포용 스킨 티저 - EP1 티스토리에서 지원하는 모든 기능과 호환되는 나름 최초?의 스킨 - 툴바 지원- 플러그인 지원- 티에디션 지원- 테터데스크 지원- CSS Grid 베이스- 골-든시불장™ 레이아웃 엔진 더보기
Universal X - css grid 처녀작 7월 초부터 조금씩 개발해오던 스킨이다. 사실 웹 개발에 손을 놓은지가 꽤 되어서 감각을 찾고자 개발을 시작하게 되었다. 최종 목표는 워드프레스 테마. 아마도 루리웹 마이피 > 이글루스 > 티스토리 > 워드프레스 순으로 개발하게 될 것 같다. 각설하고, 이번 스킨의 개발 의의는 오랫동안 우려먹을 수 있는 다용도 스킨의 개발이다. 사실 이 스킨에서 처음으로 css grid를 써보았다. 이전에 css grid에 대한 예제를 수도 없이 많이 읽어 보았지만 실전에서 적용해본 것은 이게 처음이다. 이글루스의 경우 매우 구시대 레이아웃을 사용하고 있어서 사방을 둘러보면 fr / clearfix와 같은 클래스 들이 도배가 되어있다. 무식하게 * 셀렉터로 float를 전부 제거하고 전부 css grid로 교채했다. 사.. 더보기
Plain V2 Plain은 Full bleed 스타일 이글루스 스타일이라고 야심차게 내놓은 이글루스 스킨 이었다. 하지만 문제는 내가 적용한 환경 (지정된 글 스타일, 지정된 배치 순서)를 맞추어야지만 구현이 된다는 것을 알게되었다. 스킨을 적용한 사용자가 약 20명 정도 되는데 이 중에 제대로 적용된 사람이 손에 꼽을 정도이다. 이글루스의 경우 스킨을 완전히 새로 설치하지 않을 경우 이전에 사용하던 스킨의 설정을 따라가는 병크를 저지르게 된다. 첫번째 사이드 바를 위쪽으로 강제 고정 후 네비게이션 처럼 사용하게 만들어 놓았는데, 첫번째 사이드 바에 위젯이 제대로 배치가 되지 않은 경우 엉망이 되는 모습을 볼 수 있었다. (이 문제는 새 버전에서도 여전히 존재한다. 나로서는 해결이 불가능한 문제;) Full bleed.. 더보기
Asterisk V2 나름? 이글루스에서 잘 나가는 스킨인 Asterisk의 옆그레이드 버전. 시대에 발 맞추어 컴패스가 제거 되었고 대대적인 코드 정리가 이루어졌다. 이외에도 이전에 스타일이 적용하지 않았던 달력, 아카이브, 태그 클라우드에 대한 스타일이 추가로 적용 되었다. 폰트 어썸 아이콘 폰트가 추가 되었고 많은 요소에 pseudo element로 추가 되었다. 특히 코멘트 난의 경우 대대적인 수술이 이루어졌는데, 작성자 정보 표시는 물론이고 작성난 까지 전부다 css grid를 사용하여 새로 디자인 되었다. 더보기
Hare 4 Egloos 여태까지 만든 이글루스 스킨중에서 제일 잘나가는 Hare의 최신 버전이다. Hare의 경우 이글루스의 막장 정책때문에 반병신 상태의 버전1이 있었고, 이후에 @import 꼼수로 한계를 극복한 V2가 있었다. 이번 V3에서는 이전 버전의 단점을 모두 뛰어넘는 완전한 오버홀을 단행하였다. 기본 아이콘 폰트로 폰트 어썸이 지정되어있지만 cdn의 속도가 영시원 찮은 곳에서 끌어오는 것이라 속도가 좀 더 빠른 jsdelivr로 교체하였다. 이로써 로딩속도가 소폭 개선되었다. 기존의 스킨의 경우 제목 부분의 css 폰트 설정이 cursive로 지정되어 있는데, 한글로 블로그 명을 적용할 경우 여기에 맞는 폰트가 궁서(…)밖에 없어서 궁서로 뜨게 되는 웃지 못할 상황이 발생 하였다. 이 문제를 해결하기 위해 v3 .. 더보기
[WIP] Meltdown Rev.2 이글루스를 시작으로 티스토리 스킨까지 기존에 있는 스킨들을 최신화, 코드 정리, 구조 / 속도 개선 작업을 할 예정이다. (사실 이거 2016년 7월에 했어야 했는데 1년이나 미루어졌다) 첫빠따(?)는 최초로 만든 이글루스 스킨인 Meltdown. 지금 와서 코드를 까보니 완전 개판오분전이다. 내가 이딴 스파게티 코드를 짜고 있었다니... 라고 자괴감이 드는 순간이다. 2014년에 짰던 코드 수준 지금 짜는 코드 수준 주요 변경 사항은 웹폰트 적용, compass 완전히 제거, 속도 개선, 자동 업데이트 기능 추가 등이다. 웹폰트와 rawgit의 속도 때문에 그다지 빠르진 않은 편이지만 일단 css가 케싱 되고 나면 퍼포먼스 상에 딱히 문제는 없어보인다. 어짜피 이글루스 구조도 개판인데 웹폰트 로딩이 개.. 더보기
[WIP] 새로운 마이피 스킨 동영상을 상단 헤더에 넣을수 있는 스킨이다. 유투브 영상을 바로 가져올수 있다면 좋을텐데 루리웹에서는 상단에 iframe을 못 넣게 막아놓았다. 그래서 Video 태그를 사용해서 억지로 집어넣었는데, 파일은 구글 드라이브에서 땡겨와서 쓰고 있다. 구글 드라이브에서 파일 가져오는 법은 의외로 쉽더라. 트래픽이 정신나간 수준만 아니면 구글에서도 특별히 짜르거나 하지는 않는 것으로 보임. 8.2 업데이트 리니어 그래디언트와 블랜딩 추가 아직 블랜딩에는 트랜지션이 적용 안된다. 되는 줄 알았는디... 사파리 빼고는 정상적으로 잘 뜸. 사파리는 아직도 css grid 랜더링에 버그가 있는것 같음 (쪼다같은 사파리...) 사파리 크롬 파이어폭스 더보기
새로운 셀프고문 방법 - 이글루스 스킨만들기 이글루스 스킨을 만드는 것은 고문과도 같기 때문에 일종의 가학성(?) 행위에 가깝다고 봐도 될듯. 새로만든 스킨. Full bleed layout과 fixed top menu, dropdown menu를 제공한다. 레이아웃 제한 때문에 fixed top menu는 거의 이글루스로 치면 차세대급 기술. 발단은 이렇다. 요즘 웹디자인 트랜드는 Full bleed layout이다. 즉, 텍스트는 읽기 쉬운 너비인 600~700px을 유지하되, 사진은 최대한 크게 뿌려주는 형태의 디자인이다. 미디움도 이러한 형태를 사용하고 있으며, 많은 미니 블로그 시스템들이 이와 유사한 형태의 스타일을 제공한다. Hassle-free Full Bleed with *:not()Breaking out of container DI.. 더보기

티스토리툴바