EP1 - The New Standard for Tistory Skin

아래 링크를 클릭하면 선택된 항목으로 바로 이동합니다.

1. 소개
2. 관리 페이지 지원 기능 일람
3. 지원 플러그인 목록
4. 에디터 별 지원기능 안내
5. 설치 방법
6. 티에디션 세부 설정 방법
7. 테터데스크 세부 설정 방법
8. 스킨위자드 세부 설정 방법
9. 다운로드
10. 세 줄 요약

소개

꾸준히 티스토리 스킨 개발을 해온 것은 아니지만 그래도 가끔씩 개발을 하면서 느꼈던 점은, 타 블로그 서비스에 비해서 티스토리가 지원하는 기능이 정말 많다는 것 입니다. 물론 기능이 많다는 것은 좋은 점이지만 반대로 스킨을 만드는 개발자 입장에서는 신경써야 할 것이 늘어나는 것이기도 합니다.

그래서 현재 티스토리에서 다운로드 받을 수 있는 유저 제작 스킨이나, 심지어 티스토리에서 직접 제작한 스킨까지도 이전에 제공하던 기능을 더 이상 제공하지 않는 경우가 많습니다. 하지만 기능이라는게 어디서 누군가는 편리하게 쓰고 있을지도 모르는 것이기 때문에, 스킨을 제작하는 입장에서 언젠가는 모든 기능을 다 지원하는 스킨을 만들고 싶다는 생각을 하고 있었습니다.

그러나 이 발상은 코딩 실력의 한계와 기타 기술의 한계에 부딫혀 실현하기 어려운 목표이기도 했습니다. 그리고 시간이 흘러, 2017년 EP1을 개발하게 되었습니다. 티스토리에서 제공하는 모든 기능을, 새기능과 이전기능, 그리고 종료된 기능까지 가장 최신의 웹 표준으로 지원을 하겠다는 것이 목표 였습니다. 스킨의 스타일은 화려하지도 않고 평범하지만 세세한 부분까지 모두 고려되어 티스토리의 개본 요소를 대체하게 되어있습니다. 티스토리의 색체를 억지로 지우기 보다는 좀 더 모던하게 다듬어서 더 나은 방향으로 구현하는 것이 목표였습니다.

EP1의 개발목표는 간단히 이렇게 정의 할 수 있습니다.

1. 티스토리의 기능을 모두 사용할 수 있는 반응형 스킨
2. 플러그인을 가리지 않고 모두 사용할 수 있는 스킨
3. 코드 수정 없이도 티스토리 기본 기능을 활용하여 충분히 사용이 가능한 스킨
4. 기본적인 코딩 지식이 전혀 없어도 쉽게 사용이 가능한 스킨
5. 스킨크기와 체감 로딩시간은 관련이 없다는 것을 보여주는 스킨

견본블로그

낯 간지럽지만 본 스킨은 배포용 한정으로 몇 가지 최초 기능을 지원하는 스킨입니다.

배포용 스킨 한정 최초로 지원하는 기능

100% 반응형 티에디션 (베타)

- 최초로 티스토리에서 지원하는 모든 티에디션 요소, 조합에 상관없이 반응형을 기본으로 지원합니다. 

- 티에디션 아이템 옵션을 모두 사용 할 수 있습니다.* 

  (*타이틀 옵션을 사용하고자 하였으나, 스트립트 문제로 비어있는 타이틀 까지 한꺼번에 출력되는 문제가 있어서 해결방법을 찾을때 까지는 지원하지 않습니다. 타이틀을 제외한 글제목, 글 요약, 썸네일 선택 등 모든 기능은 정상적으로 다 지원 됩니다.) 

- 어떠한 별도의 절차가 필요 없이 기존의 티에디션을 지원하는 구형 티스토리 스킨을 사용하듯 사용 할 수 있습니다.

100% 반응형 테터데스크

최초로 반응형 테터데스크를 지원합니다. 테터데스크는 게시글 하단, 상단에도 표시가 가능하며 메인화면 대체 뿐만 아니라 기존의 인덱스 리스트와 함께 조합해서 사용 할 수도 있습니다.

100% CSS3 + SVG 구형 카테고리

못생기고 고해상도에서 깨지던 에물단지 구형 카테고리 옵션이 새롭게 탈바꿈 하였습니다.

HTML5 표준 Aria 태그 적용으로 접근성 향상

스크린리더와 일부 접근성 향상 기능을 위한 Aria 태그를 적용하여 좀 더 평등한 웹 환경을 만들기 위해 노력하였습니다.

문단 간격 없음 옵션 선택 여부에 상관없이 항상 동일한 결과를 출력합니다.

EP1은 문단간격없음 옵션을 해제한 상태를 기준으로 만들어져 있습니다. (단락하단에 자동으로 여백추가) 따라서 기존에 쓰던 스킨에서 EP1으로 스킨을 변경하고, 글쓰기 환경을 바꾸더라도 모든 게시글을 일일히 수정할 필요가 없습니다.

모바일 앱 지원 - 작성 방법에 상관없이 동일하게 게시글이 표시 됩니다.

티스토리 앱으로 글을 작성시 일부 게시글 요소와 사진이 다르게 첨부되어 블로그 전체의 글 형태와 다르게 표시가 됩니다. 본 스킨은 이를 보정하는 스타일 시트가 내장 되어 있어 블로그 앱을 사용해서 적은 글도 PC나 모바일 웹페이지에서 항상 같은 모습으로 출력이 됩니다.

모바일 퍼스트 + PC 퍼스트

보통 반응형 스킨의 경우 PC 스타일을 줄여서 모바일에 맞추거나, 반대로 모바일 스타일의 크기를 늘려서 PC에 맞추는 것과 달리, PC용과 모바일용 두개의 스타일을 완전히 별도로 작성하여 적용하였기 때문에 PC에서는 PC에 최적화 된 화면이, 모바일에서는 모바일에 최적화 된 화면을 출력합니다. 따라서 모바일에서는 모바일 전용 웹사이트 같은 최적화를, PC에서는 기존의 PC전용 스킨과 같은 최적화를 이뤄냈습니다.

구형 브라우저 지원

 

IE5~11까지 산업폐기물 수준의 구형 브라우저를 지원합니다.

최초는 아니지만 자랑하고 싶은 기능

FOIT Free

블로그 접속시 갑자기 글자가 사라지는 현상을 원천 봉쇄 했습니다. 대부분의 웹폰트를 사용하는 스킨들의 경우 이와같은 고질병에 시달리고 있습니다.

초고속 로딩타임

PC에서는 평균 2초, 모바일에서는 평균 5~7초 정도의 로딩 타임을 자랑합니다. 3G 환경에서 케시가 전혀 없더라도 7초안에 페이지를 볼 수 있습니다. (Critical CSS) 티스토리의 경우 자체 플러그인이 비동기식으로 로드 되지 않아 Render-Blocking이 심한편입니다. 앞서 밝힌 데이터의 경우 LiveRe와 테터데스크를 제외한 모든 플러그인을 활성화 한 상태로 측정한 결과 입니다. (광고 플러그인은 테스트 대상이 아닙니다.) 라이브리를 사용할 경우 비동기로드를 지원하지 않기 때문에 상기 시간에 + 10초 ~ 1분(3g 연결) 정도를 추가해야 합니다.

지원 브라우저

완전 지원

크롬, 사파리, 파이어폭스, 엣지(프리뷰), 오페라

부분 지원

엣지 12+, IE11, IE10

일부 브라우저에서는 반응형 티에디션을 지원하지 않습니다. (엣지 12+, IE 10+)

특수 지원

네이버 블로그를 쏙 빼닮은 1998년도 스타일 레트로 블로그 스킨을 사은품으로 제공 

IE5 ,IE6, IE7, IE8, IE9

거의 대부분 (90% 이상)의 티스토리 기본 요소 / 플러그인의 커스텀 스타일 지원 레스터 이미지 버튼 전부 제거, 100% SVG 로드

티스토리 기본 툴바, 티스토리 새글 표시 

테터 데스크 설정버튼 

티에디션 설정버튼 

티스토리 프로필 레이어 (사이드바 위젯 포함) 

CCL, 신고버튼 스타일 

사이드바 커스텀 위젯 기본 중앙 정렬 지원 

티스토리 버전 표시

구형 카테고리 스타일

404 페이지 스타일 

관리자 댓글 / 방명록 표시 스타일

비밀 댓글 / 방명록 표시 스타일

모바일 앱 스티커 지원

지원 기능

HTML5 기반

최신 웹표준인 HTML5를 준수했으며, 불필요한 코드는 최대한 간소화 하여 간단한 구조를 자랑합니다.

HTML5 시멘틱 기능으로 SEO 최적화

시멘틱 형태의 웹페이지를 구성하여 구글과 같은 검색 엔진 노출에 좀 더 이득을 볼 수 있습니다. (네이버 제외)

HTML5 Aria 기능 지원으로 스크린 리더등 기타 장비를 통해 접근성 강화

Aria (Accessible Rich Internet Applications) 표준을 준수하여 신체에 불편이 있는 사용자도 편리하게 블로그의 내용을 읽고 사용 할 수 있습니다.

CSS3 스타일 다수 적용

jQuery 미사용, only 바닐라 자바스크립트

jQuery 없이 순수 바닐라 자바스크립트 만으로 구성이 되어있기 때문에 jQuery 로드를 원천 봉쇄하는 테터데스크를 사용하는데 별 문제가 없습니다.

FOIT 차단 스크립트 탑재

대다수의 웹폰트를 사용한 블로그나 웹사이트들이 로딩 도중 폰트가 증발하는 현상이 발생하는데, 이를 갖가지 꼼수로 극복하였습니다. 그래서 글을 읽는 도중에 글자가 사라지지 않으며, 모바일 환경과 같이 인터넷 속도가 느릴 경우 기기 내의 폰트를 사용합니다.

크리티컬 CSS 적용으로 체감 속도 향상

68747470733a2f2f692e696d6775722e636f6d2f6c417a6d4244322e706e67.p

체감 로딩 속도에 중요한 영향을 미치는 크리티컬 CSS 적용을 통해 체감 속도를 향상 시켰습니다.

highlight.js 기본적용

기존의 스킨에서는 지원하지 않던 기능이지만 티스토리가 페이지 기능을 통해 공식적으로 코드 블럭을 지원함에 따라 기본으로 지원하게 되었습니다.

반응형 티에디션

모든 아이템을 100% 반응형으로 지원하는 최초의 티스토리 스킨 입니다.

반응형 테터데스크

정확하진 않지만 반응형 테터데스크를 지원하는 최초의 스킨... 인 것 같습니다. 애초에 시중에 모든 스킨들이 jQuery 기반이다 보니...

반응형 인덱스 페이지

티스토리 모바일 앱 글 작성 지원

모바일 앱에서 작성한 글, 특히 사진을 첨부할 경우 따로노는 경우가 대부분이었으나 여러번의 테스트를 거쳐 모바일 앱에서 작성한 글과 최대한 유사하게 게시글을 구현하도록 하였습니다.

스킨 위자드 지원

반응형 스킨이지만 구형 기능인 스킨 위자드를 지원합니다. 적용 부분은 상단 타이틀 이미지만 해당됩니다. 다른 레이아웃의 경우 CSS Grid로 작성이 되었기 때문에 스킨 위자드 적용이 불가능합니다.

페이지 별 스타일 지원

인덱스 페이지와, 카테고리, 검색 페이지가 서로 다른 레이아웃으로 구성되어 있습니다. 인덱스 페이지는 단순 목록형, 카테고리, 검색 페이지는 Masonry 레이아웃으로 동작 됩니다.

목록 타입과 내용 타입 둘다 지원하는 검색결과 (티스토리 설정에서 변경 가능) 

키로그 스타일 (옵션, 수동으로 스타일시트 적용 필요)

 

Full Bleed 이미지 지원

 

 

Full Bleed & 반응형 비디오 지원 (지원 서비스: 유투브 / 비미오 / 판도라tv / 네이버 동영상 / 다음팟 / 카카오tv / 구글 지도) 

웹폰트 

아이콘 폰트 

티스토리 프로필 레이어 지원

게시글 상태 표시, 빵가루 (Breadcrumb) 표시 

관리자 메뉴 

구독 메뉴 

티스토리 버전 

커스텀 켈린더 

블로그 이미지 지원하는 링크 메뉴 

댓글 링크 주소 지원 

블로그 기본 검색 지원

사이드바 기능 지원

티스토리 관리에서 설정 변경 가능

신 / 구 카테고리 리스트 

공지사항 목록 

최근글 목록 

최근댓글 목록 

링크 목록 

블로그 프로필 

구독 메뉴 

태그 리스트 

달력 

블로그 메뉴 

관리자 메뉴 

글 보관함 

검색

모바일 스킨 기능

CSS3 Only Off-Canvas Menu

오로지 CSS만 사용해서 오프캔버스 메뉴를 구현하였습니다. 오페라 미니와 같이 자바스크립트를 차단하는 브라우저나, 최근 모바일에서 유행하는 콘텐츠 차단기가 적용되어 있어도 문제 없이 오프켄버스 메뉴를 사용 할 수 있습니다.

상단 검색

Top Nav Bar에서 바로 검색창을 쓸 수 있습니다. (PC버전도 동일)

그 외 기타 기능들

크리티컬 CSS - 구글 권장 사항 

CSS / 폰트 비동기 로드 

폰트 비동기 로드 - 구글 권장 사항

모바일과 데스크탑에 별도의 스타일 시트 로드

모바일 접속시 > 모바일 스타일 시트 로드 

데스크탑 접속시 > 데스크탑 스타일 시트 로드

>> 요청수 감소로 인한 속도 향상

부가 기능

새 창 링크 표시 

키로그 

카테고리 표시 

Sticky 네비게이션

특징

2가지 웹폰트 지원

UI에는 노토 산스, 게시글에는 노토 세리프

골-든시불쟝 레이아웃 

- 황금 비율 타이포 

- 황금 비율 element style 

리스트 스타일과 목록 스타일 둘다 지원 

반응형 레이아웃 - de facto standard?

티스토리 페이지 기능 지원

코드 블럭 syntax highlighting (코드 자동 분석) 

오픈그래프 링크 스타일 

full bleed 이미지

티스토리 관련글 기능 지원

관리 페이지 지원 기능 일람

콘텐츠

카테고리 설정

카테고리명 최대 40 글자 까지 표기 가능

콘텐츠 설정

다음 지도 위젯 지원

CCL SVG 아이콘 지원

댓글 방명록

설정

제한 없음 (티스토리 최대 방명록 개수 30개)

꾸미기

사이드바

최근글 개수 제한 없음 (티스토리 최대 30개 / 40자)

최근 댓글 개수 제한 없음 (티스토리 최대 30개 / 40자)

최근 공지 개수 제한 없음 (티스토리 최대 30개 / 40자)

글 보관함 제한 없음 (티스토리 최대 30개월)

링크 제한 없음 (티스토리 제한 30글자)

태그 제한 없음 (티스토리 제한 30개)

모든 사이드바 기능을 끄고 켤 수 있습니다. 다만 모바일에서는 중복되는 기능과 모바일에서 사용 용도가 적은 기능을 제외하고 적용 됩니다. 

적용 제외 항목

카테고리 

카테고리 구형 

최근댓글 

방문자수 

링크 

프로필 

구독 

태그 클라우드 

달력 

블로그 메뉴 

관리자 메뉴

모바일에서는 카테고리가 off-canvas 형태로 제공 됩니다.

메뉴

티스토리 기본 메뉴 기능을 지원합니다.

설정

기본 화면에서 글 개수 제한 없음 (티스토리 제한 30개)

글 목록에서 글 개수 제한 없음 (티스토리 제한 30개)

목록형과 내용형 두가지 모두를 지원하는 스킨 입니다. 따라서 설정에서 지원하는 옵션을 모두 선택 할 수 있습니다. 

태그 화면 옵션도 모두 선택 가능합니다. 댓글 펼침과 접기 옵션 둘다 지원합니다.

메뉴바 역시 지원하지만 제한적으로 지원하고 있습니다. 기존의 티스토리 툴바가 너무 쓸데 없는 기능이 산재 되어있기 때문에 일부 메뉴만 표기 되며, 꾸미기 옵션 역시 지원하지 않습니다. (이는 스킨 구조의 한계상 어쩔 수 없는 부분입니다.)

본 스킨에서 지원하는 티스토리 메뉴바 옵션은 다음과 같습니다.

로그인 시

내 링크에 추가 랜덤 계정관리 로그아웃

비 로그인 시

로그인

최초! - 100% 반응형 티에디션을 지원합니다.

티스토리에서 기본제공하는 모든 아이템이 반응형에 맞춰 새로 제작 되었습니다. 어떤 아이템, 어떤 조합이든지 문제 없이 반응형으로 사용 가능합니다.

플러그인

EP1은 거의 대부분의 티스토리 플러그인을 지원합니다. 여기서 지원이라 함은 단순하게 적용하는 것이 아니라, 커스텀 스타일 시트가 적용되어 블로그 스타일에 맞춰서 적용 되는 것을 말합니다. 커스텀 스타일 시트를 통해 레스터 이미지를 모두 제거 하였고, SVG를 사용하여 모든 요소가 브라우저를 통해 렌더링 됩니다.

지원 플러그인 리스트

다음 검색창

- 커스텀 스타일 지원

SNS 글 보내기

- 커스텀 스타일 지원 

- SVG 아이콘 적용

그림문자

- 커스텀 스타일 지원

내 글 지도

- 커스텀 스타일 지원

이모티콘 표시

- 기존의 gif 이모티콘을 SVG*로 대체 (*Twemoji 사용)

드래그 검색

- 커스텀 스타일 지원

블로그 아이콘 표시

- 방명록 한정으로 지원. 

- 댓글에는 티스토리 기본 댓글 이미지 지원

사업자 정보 표시

- 커스텀 스타일 지원 

- SVG 버튼

사진정보 (EXIF) 출력

- 커스텀 스타일 지원

라이브리

- 커스텀 스타일 지원

위치로그 표시

- 커스텀 스타일 지원 

- SVG 아이콘

Light TT EX

- 커스텀 스타일 지원 

- SVG 아이콘

카테고리 글 더 보기

- 커스텀 스타일 지원

키워드 출력

- 키워드 링크 전용 스타일 지원 

- 키워드 페이지용 스타일 시트 제공 (수동으로 적용 필요. 옵션)

티스토리 생일 표시

- 커스텀 스타일 지원

페이스북 소셜

- 소셜 버튼에 커스텀 스타일 지원

홈페이지 아이콘 표시

- 댓글, 방명록에 커스텀 스타일 지원

테터데스크

반응형 스타일시트 제공

프로필 레이어

- 커스텀 스타일 

- SVG 아이콘 

- 사이드바 위젯 지원

에디터 별 지원기능 안내

현재 티스토리는 3가지 공식 에디터가 있습니다. 이번에 페이지와 함께 공개된 신형 에디터, 기존에 존재하는 구형 에디터, 그리고 모바일 전용 에디터가 있습니다. 이 3가지 에디터는 글 작성 방식도 다르고 글을 작성했을때 블로그에 렌더링 되는 형태도 다릅니다. EP1은 이 격차를 최대한 줄이기 위해 많은 노력을 기울였습니다.

신 에디터

텍스트 스타일 전체 

모든 이미지 Full Bleed 표시 (최대 크기 = 원래 크기)

오픈그래프 링크 스타일

코드 블럭 

인라인 코드 

테이블

구 에디터

사진 자막 

사진 왼쪽 정렬 

사진 오른쪽 정렬

사진 두개 정렬 (모바일 지원)

사진 세개 정렬 (모바일 지원)

슬라이드쇼 (모바일 지원)

텍스트 스타일 전체 (밑줄 표시는 형광팬으로 적용) 

글 정렬 방식 모두 

들여쓰기 내어쓰기 모두 

아이콘 표시 링크 표시 (새창 링크는 별도의 아이콘 표시) 

테이블 

티스토리 기본 게시글 스타일 (부분 지원) 

글 상자 

인용구

더 보기, 접기 기능

주석 기능 수식 입력 

문단 간격 없음 / 있음 모두 지원  

파일 첨부 지원

지도 첨부 지원

구 에디터 종료된 기능 지원 여부

마이피플 스티커

지역 정보 표시 

영화 정보 표시 

책 정보 표시 

공연정보 표시 

지역 정보 + 지도 표시

모바일 에디터

모든 텍스트 스타일 

사진 첨부 

지도 첨부

스티커댓글

사이드바 플러그인 모듈 지원. CSS3 스타일 적용

다음 검색창 

내 글 지도 

태그 입력기 (티스토리 생일 표시) 

프로필 레이어

필수! 기본 설치 방법

티스토리 관리페이지에 접속하여 꾸미기 > 스킨변경으로 들어갑니다.

페이지에서 스킨 등록 버튼을 누릅니다.

이 페이지에서 추가 버튼을 눌러줍니다.

업로더가 실행이 되면 다운로드 받은 파일 안에 있는 파일을 모두 업로드 해줍니다.

저장 버튼을 누르고 스킨이름을 지정합니다. 반드시 확인 버튼을 마우스로 눌러주어야 합니다. 엔터키나 리턴키를 누를경우 스킨이 제대로 저장 되지 않을 수 있습니다.

스킨을 업로드 한 후 스킨 보관함에 들어가서 업로드한 스킨을 적용해주어야 합니다.

스킨 등록이 완료 되었습니다. :)

콘텐츠 너비는 1920px 이상을 권장합니다. Full Bleed 레이아웃이 적용 되어있어서 작은 글쓰기 레이아웃 폭을 할 경우 이 크기에 맞춘 이미지가 로드되기 때문입니다.

본 스킨은 반응형 스킨이기 때문에 모바일에서도 작동합니다. 설정 > 꾸미기 > 모바일 > 티스토리 모바일웹 자동 연결을 > 사용하지 않습니다. 로 설정해주세요.

스킨 커스터 마이징 가이드

스킨의 헤더 이미지는 별도의 코드 수정 없이 스킨위자드로 변경이 가능합니다. 너비 100%의 시원시원한 헤더에 원하는 이미지를 넣어보세요 :)

수정 가능한 부분 Style.css

스킨의 원활한 작동을 위해 수정 영역에 제한을 두고 있습니다. 스타일시트의 경우 일부는 인라인, 일부는 압축되어 적용되어 있으며 무분별한 수정을 통한 오류를 막기 위함 입니다. 추가 스타일은 티스토리의 스킨 수정 기능을 사용하여 CSS 항목에 추가하면 자동으로 적용이 됩니다.

스킨의 HTML 코드 수정은 권장하지 않습니다. 특히 외부 코드의 추가가 아닌 임의 삭제는 정말로 권장하지 않습니다. 예를 들어 사이드바의 일부 기능이 필요없을 경우 관리페이지를 이용해주세요. 또한 애드센스와 같은 기타 기능의 경우에도 가능하면 티스토리 플러그인을 통하여 적용할 것을 권장합니다.

스킨 무단수정시 발생하는 오류는 일절 책임지지 않습니다. 또한 이와 관련된 질문 댓글에는 전혀 답변하지 않으며 경우에 따라 임의로 삭제할수도 있습니다.

버그 / 건의 / 개선사항

언제든지 환영합니다. 다만 건의 수렴후 실제 적용까지의 정확한 기간은 보장하지 못 합니다.

구글 애드센스의 경우 티스토리 기본 플러그인 사용을 권장합니다.

커스텀 스킨 제작 의뢰는 받지 않습니다.

인터넷 익스플로러 호환성 지원 요청 또한 받지 않습니다. 인터넷 익스플로러의 경우 최소한 게시글을 읽을 수 있는 수준까지의 호환성 지원만 적용된 상태입니다. 기술의 한계와 시간제약상 그 이상은 지원하지 않습니다.

티에디션 세부 설정 방법

EP1은 티에디션의 모든 아이템을 지원하므로 어떤 아이템이나 어떤형태의 조합이든 사용 할 수 있습니다.

티에디션이 활성화 되어있지 않다면 관리 메뉴에서 꾸미기 > 설정 > 티에디션을 > 사용합니다로 변경해줍니다.

티에디션을 수정하려면 홈화면의 '티에디션 설정' 버튼을 누르거나,

관리화면에서 꾸미기 > 설정 > 티에디션 설정하기 버튼을 누릅니다.

수정화면에서는 + 버튼을 눌러 아이템을 추가하거나, X 버튼을 눌러서 아이템을 삭제 할 수 있습니다. 그리고 오른쪽 끝의 두개의 화살표 버튼을 통해 아이템의 순서를 변경 할 수 있습니다. 

아이템 영역을 선택한 후 팝업 메뉴에서 원하는 아이템 스타일을 선택합니다.

글선택 메뉴에서는 카테고리를 선택하거나, 직접 원하는 글을 선택할 수 있습니다. 티에디션은 이미지가 없는 경우 회색이 기본 이미지를 불러오게 되어있습니다. 이것이 마음에 들지 않는다면 하단의 ‘이미지가 있는 글만 가져오기’ 옵션을 활성화 시키면 됩니다.

티에디션의 특이한 기능중 하나인 게시글 인기별 선택이나, 태그별 선택도 가능하다는 점을 꼭 알아두시기 바랍니다.

디자인 영역에서는 제목 글자수나 글 요약 숫자를 변경할 수 있습니다. CSS Grid를 사용하여 제작된 스킨이 이기 때문에 콘텐츠의 글자수 제한은 없습니다. 또한 썸네일 비율이나 정렬 방식을 변경할 수도 있습니다.

다만 CSS로 적용하는 요소인 글제목 폰트 스타일, 폰트 크기, 색상, 이미지 정렬방식, 이미지 비율, 그리고 테두리 색상은 에디터에서 저장을 해도 홈 화면에 적용되지 않습니다.

상세 메뉴에서는 게시글 제목과 글 요약을 변경 할 수 있습니다. 티에디션이 비록 구식 시스템이지만 이와같은 매우 강력한 기능을 제공합니다. 이것이 바로 제가 무리를 해서 티에디션을 반응형으로 사용가능하게 만든 이유입니다.

글제목, 글요약 수정 뿐만 아니라 썸네일 수정도 가능합니다. 썸네일은 게시글에 첨부된 이미지 중에서 선택할 수 있습니다.

테터데스크 세부 설정 방법

EP1은 테터데스크의 모든 아이템을 지원하므로 어떤 아이템이나 어떤형태의 조합이든 사용 할 수 있습니다.

 

테터데스크는 관리페이지의 플러그인 목록에서 선택해서 적용할 수 있습니다.

첫페이지에 표시할 경우 기존의 인덱스 페이지 리스트를 완전히 대체하게 됩니다. 글 상단, 또는 하단을 선택할 경우 동시에 사용이 가능합니다.

테터데스크를 수정하려면 홈 화면에서 테터데스크 설정 버튼을 클릭합니다.

설정화면에서는 현재 적용된 아이템이 무슨 아이템인지 제목 위에 표시가 됩니다.

화면 오른쪽 상단의 테터데스크 설정 메뉴를 사용하여 아이템의 추가및 수정이 가능합니다.

아이템 베치를 누르면 현재 적용되어 있는 아이템의 상태를 확인 할 수 있으며 수정 할 수도 있습니다.

아이템의 설정을 클릭하면 나오는 화면 입니다. 레이아웃과 썸네일 크기를 지정할 수 있습니다. 1단 아이템의 경우 반응형을 지원하기 때문에 크기에 제약이 없습니다. 스킨의 기본 너비인 870px 보다 큰 사이즈를 넣어주면 됩니다. 2단, 3단 아이템의 경우에도 큰 사이즈의 이미지를 불러와도 알아서 레이아웃에 맞게 조정하게 되어있습니다. 

아이템에 게시글은 포스트 추가하기 버튼을 눌러서 글을 별도로 선택할 수 있습니다. 테터데스크는 티에디션과 다르게 카테고리별로 선택하는 것이 아니라 별도로 일일히 글을 선택해야 하는 구조입니다. 원하는 글을 항상 화면내에 표시하고 싶다면 테터데스크가 가장 좋은 방법입니다.

테터데스크의 파티 기능(?)은 뭐니뭐니 해도 게시글 내 표시기능이라고 할 수 있습니다. 게시글 내의 테터 데스크 또한 문제 없이 반응형으로 지원합니다.

스킨위자드 세부 설정 방법

스킨위자드에서는 배경이미지, 타이틀 이미지, 게시글 너비, 게시글 폰트 스타일을 수정 할 수 있습니다. 본 스킨에서는 타이틀 이미지 수정만 지원합니다. 이는 스킨 위자드가 너무 구식 코드를 사용하여 EP1의 레이아웃 구성 방식에 적용하기가 난해하기 때문입니다.

설정에서 스킨위자드 옵션을 선택합니다.

스킨위자드 화면입니다. 사용가능한 유일한 옵션인 타이틀을 선택하여 상단 헤더 이미지를 간편하게 변경할 수 있습니다.

목록에서 원하는 이미지를 선택하거나 직접 올리기를 통해 원하는 이미지를 올릴 수 있습니다.

헤더에 사용할 이미지는 로딩속도를 고려하여 200kb 이하의 이미지를 권장합니다.

적용 되었습니다. 적용 버튼을 눌러 저장합니다.

프로필 레이어 활성화

계정관리 > 프로필 레이어에서 댓글과 블로그 사이드바에 프로필 레이어를 > 공개합니다. 로 변경.

댓글 작성시 닉네임 옆에 프로필 버튼이 뜨게 됩니다.

옵션 - 키워드 스타일

수동으로 추가해야 되는 키워드 스타일을 제공합니다. 굳이 안해도 상관없습니다. 통일성을 좋아하시는 분들을 위한 별도의 옵션이라 생각하시면 됩니다. 

키워드 글 하단에 다음과 같은 코드를 넣어줍니다.

<link href=“자신 스킨의 framework.css 주소” media="screen" rel="stylesheet" type="text/css”>

framework.css 주소는 스킨 수정 > 파일 업로드에서 파일에 오른쪽 마우스 클릭후 주소 복사가 가능합니다.

별도의 스타일 시트가 적용된 모습

FAQ

Q. 카테고리 작성글 갯수를 없애고 싶어요

A. 카테고리 설정 > 카테고리별 글 수를 > 표시하지 않습니다.

Q. 카테고리 새글 알림을 해제하고 싶어요

A.카테고리 설정 > 새 글 발행 여부 > 표시하지 않습니다.

Q. 글 하단에 뜨는 다음 지도 위젯을 끄고 싶어요

A. 콘텐츠 > 설정 > 다음 지도로 보낸 글 하단에 지도 위젯(장소명과 지도 링크)을 > 표시하지 않습니다.

Q. 저작물 사용허가 (CCL)을 끄고 싶어요

A. 콘텐츠 > 설정 > 저작물 사용 허가(CCL)를 > 표시하지 않습니다.

Q. 글 목록에서 목록 또는 내용을 끄고 싶어요

A. 꾸미기 > 설정 > 글 목록에서 글은 N개 표시되며, > 내용만 / 목록만

Q. 블로그 메뉴바를 끄고 싶어요

A. 꾸미기 > 설정 > 블로그 메뉴바를 > 숨깁니다.

Q. 티에디션 수정 버튼을 숨기고 싶어요

A. 꾸미기 > 설정 > 블로그에 티에디션 편집 버튼을 > 표시하지 않습니다.

Q. 티에디션을 켜고 / 끄고 싶어요

A. 꾸미기 > 설정 > 티에디션을 > 사용합니다. / 사용하지 않습니다.

Q. 티에디션과 기본 글 목록 (index 페이지)를 같이 사용하고 싶어요

A. 불가능합니다.

Q. 테터데스크와 티에디션을 같이 쓰고 싶어요

A. 불가능합니다.

Q. 테터데스크와 기본 글 목록을 같이 사용하고 싶어요

A. 가능합니다. 홈화면 대체가 아닌 글 상단 또는 글 하단부 표시로 변경하면 메인화면에서 테터데스크와 인덱스 페이지를 같이 사용 할 수 있습니다.

Q. 트랙백 기능은 왜 없나요?

A. 티스토리에서 공식적으로 종료한 기능이기 때문에 지원하지 않습니다.

Q. 댓글 검색 기능은 왜 없나요?

A. 티스토리에서 공식적으로 종료한 기능이기 때문에 지원하지 않습니다.

Q. 키워드 페이지는 어디로 갔나요?

A. 최근 업데이트와 함께 사라졌습니다. 대신에 관리자 페이지에 키워드 관리가 새로 생겼습니다.

알려진 버그

가끔 티에디션 아이템 위치가 이상하게 표시 되는 문제 (티에디션 아이템이 순차적으로 로딩이 되는데, 그전에 flexbox가 수치 계산을 끝내버려서 생기는 문제입니다. 현재 해결방법을 찾고 있습니다.)

적용된 소스 

LoadCSS - https://github.com/filamentgroup/loadCSS 

LoadJS - https://github.com/filamentgroup/loadJS 

FontFaceObserver -https://github.com/bramstein/fontfaceobserver 

Highlight.js - https://highlightjs.org/ 

Flaticons - http://www.flaticon.com/ 

Twemoji - https://github.com/twitter/twemoji 

티스토리 Breadcrumb script by. circlash - http://circlash.tistory.com/714 

Noto Sans by Google - https://www.google.co.kr/get/noto/ 

Noto Serif by Google - https://www.google.co.kr/get/noto/

MIT License - https://opensource.org/licenses/MIT

Special Thanks To.

개발에 많은 가르침을 주신분 - Matthew님 (Hackya - https://hackya.com/kr/)

License

Copyright 2017 Estoque Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

다운로드

EP1.zip

스킨이 마음에 드신다면 가난한 대학생에게(ㅜㅜ) 밥 한끼 사주세요! (25 USD)

기부하신분에 한정하여 스킨 지원 서비스를 이용하실 수 있습니다.

기부하신 후에 개인 메일 주소(incusx@naver.com)로 연락 주시면 지원서비스를 해드리도록 하겠습니다. 메일 내용에 페이팔에서 사용하셨던 기부자 이름을 기입해주셔야 합니다. 

스킨 지원 서비스 (기부하신분에 한정)

기본적인 스킨 사용 및 관리를 도와드립니다.

설치가 힘드실 경우 설치를 도와드립니다. (아주 간편하게 설치가 가능하다고 자부하지만 이 마저도 힘들어 하실 분들을 위하여…)

사소한 스킨 수정을 도와드립니다.* (하이라이트 색상 변경)

*경우에 따라 실현 불가능 또는 능력 밖의 수정 요청의 경우 거부될 수 있습니다. 

TL;DR

• 최초의 100% 반응형 티에디션, 테터데스크 지원
• 페이지별 별도 스타일
• 울트라 스피리추알하게 어으썸

MIT License