본문 바로가기

일상·여행

티스토리 반응형 신스킨 3종 분석

반응형

 

티스토리가 여러가지 부분에서 개선이 이루어지면서 신스킨 3종이 새롭게 나왔습니다.


신스킨 제작 가이드라인에 맞춰 앞으로 새로 만들 스킨에 적용을 해 나가야할 것 같아서 수박 겉핧는 느낌으로다가...

티스토리가 나아가려는 방향을 살펴보는 느낌적인 느낌으로 스킨 소스를 좀 살펴 봤습니다.



달라진 부분들

------------------------------


1. 

CSS에서 사용하는 기본 크기 단위가 em 단위로 모두 변경되었습니다. 레티나 디스플레이나 모바일 대응을 하는데 있어서 픽셀 단위로는 한계가 있기 때문에 전면 변경된 것으로 보입니다.


#gnb ul li {font-size: 1.25em;line-height: 3;}
#gnb ul li a {display: block;text-decoration: none;color: #000;}
#gnb ul li a:hover {text-decoration: underline;color: #4e2e28;}
#gnb ul li ul {margin-bottom: 35px;}
#gnb ul li ul li {font-size: 1em;line-height: 2;}


기존에 픽셀 단위에만 익숙한 분들은 새로운 스킨을 커스터마이징 하거나 신스킨 방식으로 새롭게 스킨 제작을 하는데 애로사항이 좀 있을 것 같습니다. 

em 단위를 쓰면 스킨 텍스트 크기나 레이아웃을 예쁘게 잡는게 생각만큼 쉽지 않습니다.

하지만 실상은 뭐 그냥 기존에 하던데로 픽셀 기준으로 해도 됩니다.

레티나에서 좀 작게 보이면 어때서... -,.-;



2. 

CSS가 간결해졌습니다.

기존 표준 제공 스킨을 기준으로 해서 새스킨을 만들다보면 CSS가 좀 너저분?해서 수정작업이 생각보다 많았습니다.

신스킨은 컬러 테마와 커버를 지원하기 위한 CSS를 제외하면 기존 스킨 CSS대비 코드량이 1/3 정도 줄어들었습니다.

구조적으로 많이 심플해졌습니다.

이제서야 뭔가 구조적으로 잘 짜놓은 CSS 같습니다.



3. 

레티나 디스플레이 지원 미디어쿼리가 추가되었습니다. 

노트북 조차도 레티나 디스플레이를 지원하는 기기들이 속속 나오고 있는 시점이라 당연한 수순인 것으로 보입니다.

스킨 제작자 입장에서는 손댈게 자꾸 늘어나는...


@media only screen and (-webkit-min-device-pixel-ratio:1.5) {


타블렛 타겟도 지원을 합니다.


@media screen and (max-width:1023px) {


다만 이런 기준에 맞춰 주다보면 스킨 레이아웃에 제약이 자꾸 생겨서 다양한 레이아웃을 만들기가 어려워집니다.



4. 

커버 기능이 추가되었습니다. 다행히도 치환자 방식으로 추가되었고, 기존 스킨에도 커버 기능을 붙일 수 있을 것으로 보입니다.

일반 블로그 외에 홍보성 사이트나, 회사 홈페이지 같은 레이아웃을 조금 더 쉽게 만들 수 있게 일종의 템플릿을 제공해주는 것으로 보입니다.

아마도 이번 업데이트의 가장 핵심이 아닌가 싶습니다. 블로그의 활용 범위를 넓히겠다!

총 5가지의 커버 타입이 제공되고(일종의 뷰 컴포넌트 같은 거라고 보면 됩니다.) 적당히 섞어서 배치하면 다양한 메인 페이지 레이아웃을 만들어낼 수 있습니다.


작년부터 제공되는 페이지 기능과 함께 쓰면 괜찮을 것 같습니다.

하지만 여전히 예쁜 레이아웃을 만들려면 장인?의 손길이 필요합니다.

생각보다 설정할게 많아서 복잡한 설정 싫어하는분들은 남의 나라 얘기가 될 것 같습니다.


      <s_cover_group>
          <s_cover_rep>

            <s_cover name='cover-thumbnail-list'>
            </s_cover>

            <s_cover name='cover-slider'>
            </s_cover>

            <s_cover name='cover-masonry'>
            </s_cover>

            <s_cover name='cover-list'>
            </s_cover>
      
            <s_cover name='cover-gallery'>
            </s_cover>

          </s_cover_rep>
      </s_cover_group>



5. 

페이징 타입으로 "더보기" 버튼으로 다음 페이지 내용을 현재 페이지 내용 하단에 붙여주는 방식을 신스킨에서 제공합니다.(Whatever 스킨) 

기술적으로는 별다를 건 없고 기존 스킨에도 동일하게 구현 가능합니다.

다만, 레퍼런스로 이렇게 써도 된다고 제공되지 않다보니, 스킨 제작자들도 이렇게는 잘 안쓴다는...

ajax로 간단하게 구현 가능하기 때문에, 이걸 변형해서 무한 스크롤도 만들 수 있습니다.

트래픽이 줄어든다거나 하는건 없습니다. 

기존 방식으로 다음페이지 내용을 로딩하는 과정은 똑같고, 로딩한 컨텐츠 내용만 javascript단에서 잘라서 붙여주는 식입니다.

모바일 환경인 경우 사용자 경험 측면에서 사용자를 더 오래 머무르게 하는 측면이 있어서 사용해볼 만할 것 같습니다.




6. 

구글 웹폰트를 표준으로 사용합니다.

일부스킨에서 구글 웹폰트를 정식으로 사용하기 시작했습니다.

대표 글꼴인 "Noto Sans KR" 을 사용하고 있습니다.


@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');


그런데 왜 명조체 계열은 나눔 명조일까? Noto Serif KR 이 세트로 있는데...



7. 

커버 기능중 일부가 메이슨리를 기본으로 사용합니다. 사용자 커스텀 스킨에 많이 사용하는 자바스크립트 라이브러리인데, 화려하고 다이나믹한 UI를 만들 수 있게 해주는 기능인 만큼 이용자가 좀 늘지 않을까 싶습니다.

다만, 이 라이브러리가 조금 무겁기 때문에 모바일 중심 환경에서는 그닥 추천하지는 않습니다.


            <s_cover name='cover-masonry'>
              <div class="cover-masonry">
              </div>
            </s_cover>




8.

스킨옵션 정의 및 커스터마이징 기능이 제공됩니다.

도대체 이게 어디 처박혀 있을까 싶었는데 index.xml 파일을 통해 정의합니다.

컬러 테마 옵션이나 기타 설정들을 정의해서 사용할 수 있습니다.

index.xml 파일을 통해 정의하게 되는데 스킨 제작자를 위한 기능이다보니 사용법은 조금 복잡합니다.

만들어진 스킨을 조금 수정해 사용하는 레벨에서는 크게 의미가 있을 것 같지는 않습니다.




9.

티스토리 스킨 가이드 문서가 깃허브의 문서 서비스인 깃북으로 옮겨갔습니다.

유지보수 측면에서 깃헙의 문서화 툴이 훨씬 유연하고 좋기 때문에 대 환영입니다.

새로 추가된 기능들에 대한 내용들도 꼼꼼하게 추가되어 있습니다.


https://tistory.github.io/document-tistory-skin/




업데이트 후 아쉬운 부분들

-------------------------------------------


1. 

백엔드 단에서 사용하는 컨텐츠 생산툴의 플래시 사용이 그대로입니다.

공지에도 없었던 부분이라 뭐 그냥 아쉽기만 하지만, 그래도 개선이 되기를 바랬던 1순위인데...

플래시 기반의 에디터 기능들은 빨리 개선이 좀 되었으면 좋겠습니다.



2. 

스킨에 검색엔진 차단 메타태그를 넣어놨는데 이유를 모르겠습니다.

검색엔진이 인덱스도 크롤링도 하지 않도록하는 메타태그를 기본으로 넣어놓는 스킨이라는게...

대부분 블로거들이 스킨 적용하면 그대로 쓰는게 기본일텐데 착오인거겠져?


<meta name="robots" content="noindex, nofollow">


긴급패치로 메타태그 문제는 해결이 되었습니다.

공지가 따로 올라왔습니다.

https://notice.tistory.com/2460?category=110385


3. jQuery는 여전히 1.12.4를 씁니다. 호환성때문일텐데, 조금, 아주 살짝 아쉽습니다.


<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>




아직 세세하게 뜯어본 건 아니어서 잘못 이해한 부분이 있을 수도 있습니다.

스킨 제작자 입장에서 달라진 부분이 많다보니 그 부분들만 주로 훓어 봤습니다.


전체적으로 보면 블로그 데코레이션 기능에 중점을 둔 업데이트 정도로 보입니다.

컨텐츠 생산 기능 쪽은 그대로고, 눈에 보이는 부분들이 주로 업데이트 되었습니다.


커버 기능은 아주 마음에 듭니다. 이채로운 스킨을 만들 수 있지 않을까 싶습니다.


초대장 사라진 것도 마음에 듭니다.

초대장을 돈받고 파는 지경까지 갔으면 없어지는게 맞았는데, 너무 오랫동안 질질 끌었습니다.


개인적으로는 다음번 업데이트때는 사이트맵 생성 지원, 컨텐츠 생산 에디터 전면 교체가 꼭 이루어졌으면 좋겠습니다.

특히 에디터는 많이 불편합니다. 

너무 구시대적인 에디터여서 이래저래 불편합니다.


새 스킨 3종도 새로운 기능들을 많이 넣어줘서 마음에 듭니다.

레퍼런스 스킨으로 많은 도움이 될 것 같습니다.

신스킨 메타태그에 검색 차단을 넣어놓은건 아마도 실수가 아닌가 싶고...


새 스킨 만드는데 커버 기능이나, 달라진 em 단위에 맞춰 적응하려면 꽤나 삽질을 하게될 것 같습니다.


망조가 보이는 구글의 블로깅 서비스들에 비해 내수용인 서비스가 이렇게 노력을 해주는 것만으로도 감사해야 할 일인데

너무 바라는게 많은 건지, 조금씩 아쉬운 부분들도 보이고 그렇습니다.


티스토리 블로그팀 화이팅임다!

반응형

닫기