By aPOST in 일상 — 2023년 12월 23일

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

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

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

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

달라진 부분들

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

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 단위를 쓰면 스킨 텍스트 크기나 레이아웃을 예쁘게 잡는게 생각만큼 쉽지 않습니다.

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

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

CSS가 간결해졌습니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

총 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

업데이트 후 아쉬운 부분들

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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