티스토리 #2 반응형 스킨에 대해

디자인도 코드도 몇 년 전 스킨에 비해 잘 만들었고 간결해보이지만, 손볼 곳도 있습니다.

예를 들어, 데스크탑 웹브라우저창에서 윈도우 창이 가로 1250픽셀 정도가 못 될 때는, 헤더 영역(이 스킨의 카테고리, 링크, 공지사항, 태그목록 등등이 보이는 곳)이 이렇게 2단으로 보입니다. 그런데 굳이 이럴 것까진 없거든요. 저 광활한 여백을 보세요.

2단 상태에서 사용자 사이드바는 모두 오른쪽 한 단에 몰아버리는 만행을 저지릅니다.
(이 스킨은 맨 왼쪽 카테고리는 사이드바메뉴로 수정할 수 없습니다)

가로 1250픽셀을 넘어가면 정상적으로 3단으로 표시됩니다. 더 어울리니까 이게 디자이너의 의도겠죠.

그리고 가로 740픽셀이내가 되면 모바일로 간주하는지, 카테고리말고 다른 헤더 요소(사용자가 만든 수많은 링크와 메뉴, 그 외 위에서 카테고리말고 보이는 요소들)는 전부 지워버리고 카테고리만 넣어 1단으로 만듭니다. 그러면서 레이아웃 스타일도 헤더의 색이나 배경그림이 사라집니다. 이건 의도나 실수 정도가 아니라 제대로 된 버그같은데.. 그래서 남에게 이 스킨을 추천하고 싶은 마음은 없어졌습니다. 

다만, 이건 프로그래머탓이 아니라 어떤 기준탓인가하는 생각도 드는데, style.css 파일의 맨 마지막입니다:

이 스킨은 반응형스킨 중 초기에 나와서, 웬만큼 고쳤을 텐데 그래도 아직 이렇습니다. 

티스토리는 좋은 점도 많지만 이런 식으로 방치하는 문제점도 많은데, 스킨을 구성하는 요소를 일부만 사용자가 접근할 수 있어서 고치고 싶어도 쉽지 않고, 일부 가능한 경우에 !important 를 써서 덮어버리기 정도만 합니다.

또 한 가지. 이 스킨은 카테고리를 접을 수 없습니다.

카테고리를 접을 수 있거나 펼 수 있는 스킨은

skin.html의 해당 사이드바에서

• 모든 글 보기
  • 농업, 원예
  • 조용한 저전력, NAS
  • 저전력, 전기요금
    • 조명기구
    • TV, 가전
    • 에어컨,난방,선풍기,공기청정기,제습기
    • 전기밥솥,주방가전,생활가전
    • 전기차, 스마트카 그 외
    • 전기요금, 발전소
    • real DIY
    • 신재생 에너지
    • 신재생 에너지 - 산업
  • 학습, 공개강의
    • 물리학과 수학
    • 읽기와 쓰기
    • 평생교육, 재교육, 자격증, 면허
    • O2O
  • 건강, 생활보조, 동물
    • 질병과 건강
    • 기호식품, 식료품 등
    • 병원 등
    • 의과학
  • 견적, 지름직
    • 직구 관련 등
    • 온라인 쇼핑
    • 웹사이트
    • 전자정부, 온라인 생활공간
    • 금융과 보험
    • 증권,채권,상품시장
    • 생활법률, 법률
  • 웹브라우저
    • 크롬, 확장 프로그램
    • 웨일, 확장앱
    • 파이어폭스, 익스텐션
    • MS엣지, 확장 프로그램
    • Vivaldi, Opera, 기타
    • 확장 프로그램과 스크립트 일반
  • 모바일, 통신
    • 넷
    • 범용 클라우드, 인터넷 저장공간
    • 용도지정 인터넷 저장공간
    • NAS, 전송 유틸리티
    • 앱,프로그램
    • 구글 안드로이드 OS
    • 휴대폰
    • 태블릿, 이북, PDA, 노트북, 넷북 등
    • IoT 사물(소물)인터넷
    • 악세사리
    • 인터넷전화, 통신사 IoT
    • 그외 기계
    • 팩스, 문자
    • 통신서비스, 상품
    • 정책, 통신사, 방송사
    • 결제, 간편결제
    • 전자금융, 뱅킹
    • IT회사 News
    • 기술, 규격
    • 문화, 트렌드, 여담
    • SNS - 문화, 매체
    • 구세대 스마트폰,프로그램
    • 디지털 카메라 부류
    • 피쳐폰,프로그램
    • (미분류)
    • AR, VR
  • 기술과 유행
    • IT회사,경영자,스타트업 관련
    • 드론, 작은 로봇
    • 로봇
    • 공정, 제작과정, 노동대체
    • 챗봇
    • 인공지능-2
    • 챗GPT, 스테이블디퓨전 등 생성형인공지능
    • 소비자수준 자동화
    • 3D
    • 인간 확장
    • 인지과학, 뇌과학
    • 교육
    • 적정기술
    • 기술-미분류
    • 빅데이터
    • 인구
    • 주거,주택,부동산
    • 비대면(언택트), 유연근무, 온라인
    • 우주항공,군사
  • 컴퓨터 고장,보안,백신
    • 보안, 사건사고
    • 온라인 사기, 금융사기
    • 컴퓨터 바이러스,악성코드,랜섬웨어
    • 백신 프로그램
    • 교양 읽을거리
    • 컴퓨터 관련 범죄
  • 공구함, 튜닝PRG
    • 매크로,스크립트
    • 가상머신, Virtual Machine
    • 컴퓨터를 편하게
    • 예쁘게, 직관적으로
    • 글꼴 (Font)
    • 납땜
    • Home DIY
    • 윈도우 OS 화면을 편하게
    • 스크랩북
    • 강의, 학습서, 튜토리얼
  • 컴퓨터 부품별
    • 보드,램,칩셋
    • CPU
    • 비디오카드 VGA
    • 모니터
    • USB메모리,램디스크
    • SSD
    • 하드디스크 HDD
    • 키보드,마우스,디지타이저,게임장비
    • DVD,CD-ROM,Blu-Ray
    • 사운드, 미디
    • 포트(COM, LPT, USB), 장치
    • 스캐너
    • 프린터
    • 파워,전원공급기(PSU)
    • 케이스
    • 네트워크, LAN
    • TV 시청 HW, SW
    • 컴퓨터 하드웨어 사이트
  • 소프트웨어와 콘텐츠
    • PIMS, 생활
    • Freeware, 과학
    • 문서 편집
    • PDF
    • 그래픽, 사진
    • 스크린 캡처
    • 강의, 학습서, 튜토리얼
    • 그래픽 컨텐츠
    • 영상, 음악
    • 강의, 학습서, 튜토리얼2
    • 트랜스코딩
    • 무료음악듣기
    • 영상음악 콘텐츠
    • 게임, 놀 거리
    • 게임기타
    • 개발자
    • 게임제작, 개조
  • 프로그램
    • 아이디어
    • ● 안드로이드 prg
    • ● Python prg
    • 알림글, 블로그 유지 관리
    • 무료프로그램 배포처
    • 리소스
    • 리눅스(Linux)
    • 학습, 학습자료
    • 앱 마켓
    • Prosumer
    • 툴
    • 강의, 학습서, 튜토리얼
    • 매킨토시
  • 아날로그
    • 전자책,이북(ebook),도서정보
    • 도서,한국사, 세계사 관련
    • 도서관, online repository
    • 지도
    • 잡담-기타

모든 글 보기 농업, 원예 조용한 저전력, NAS 저전력, 전기요금 조명기구 TV, 가전 에어컨,난방,선풍기,공기청정기,제습기 전기밥솥,주방가전,생활가전 전기차, 스마트카 그 외 전기요금, 발전소 real DIY 신재생 에너지 신재생 에너지 - 산업 학습, 공개강의 물리학과 수학 읽기와 쓰기 평생교육, 재교육, 자격증, 면허 O2O 건강, 생활보조, 동물 질병과 건강 기호식품, 식료품 등 병원 등 의과학 견적, 지름직 직구 관련 등 온라인 쇼핑 웹사이트 전자정부, 온라인 생활공간 금융과 보험 증권,채권,상품시장 생활법률, 법률 웹브라우저 크롬, 확장 프로그램 웨일, 확장앱 파이어폭스, 익스텐션 MS엣지, 확장 프로그램 Vivaldi, Opera, 기타 확장 프로그램과 스크립트 일반 모바일, 통신 넷 범용 클라우드, 인터넷 저장공간 용도지정 인터넷 저장공간 NAS, 전송 유틸리티 앱,프로그램 구글 안드로이드 OS 휴대폰 태블릿, 이북, PDA, 노트북, 넷북 등 IoT 사물(소물)인터넷 악세사리 인터넷전화, 통신사 IoT 그외 기계 팩스, 문자 통신서비스, 상품 정책, 통신사, 방송사 결제, 간편결제 전자금융, 뱅킹 IT회사 News 기술, 규격 문화, 트렌드, 여담 SNS - 문화, 매체 구세대 스마트폰,프로그램 디지털 카메라 부류 피쳐폰,프로그램 (미분류) AR, VR 기술과 유행 IT회사,경영자,스타트업 관련 드론, 작은 로봇 로봇 공정, 제작과정, 노동대체 챗봇 인공지능-2 챗GPT, 스테이블디퓨전 등 생성형인공지능 소비자수준 자동화 3D 인간 확장 인지과학, 뇌과학 교육 적정기술 기술-미분류 빅데이터 인구 주거,주택,부동산 비대면(언택트), 유연근무, 온라인 우주항공,군사 컴퓨터 고장,보안,백신 보안, 사건사고 온라인 사기, 금융사기 컴퓨터 바이러스,악성코드,랜섬웨어 백신 프로그램 교양 읽을거리 컴퓨터 관련 범죄 공구함, 튜닝PRG 매크로,스크립트 가상머신, Virtual Machine 컴퓨터를 편하게 예쁘게, 직관적으로 글꼴 (Font) 납땜 Home DIY 윈도우 OS 화면을 편하게 스크랩북 강의, 학습서, 튜토리얼 컴퓨터 부품별 보드,램,칩셋 CPU 비디오카드 VGA 모니터 USB메모리,램디스크 SSD 하드디스크 HDD 키보드,마우스,디지타이저,게임장비 DVD,CD-ROM,Blu-Ray 사운드, 미디 포트(COM, LPT, USB), 장치 스캐너 프린터 파워,전원공급기(PSU) 케이스 네트워크, LAN TV 시청 HW, SW 컴퓨터 하드웨어 사이트 소프트웨어와 콘텐츠 PIMS, 생활 Freeware, 과학 문서 편집 PDF 그래픽, 사진 스크린 캡처 강의, 학습서, 튜토리얼 그래픽 컨텐츠 영상, 음악 강의, 학습서, 튜토리얼2 트랜스코딩 무료음악듣기 영상음악 콘텐츠 게임, 놀 거리 게임기타 개발자 게임제작, 개조 프로그램 아이디어 ● 안드로이드 prg ● Python prg 알림글, 블로그 유지 관리 무료프로그램 배포처 리소스 리눅스(Linux) 학습, 학습자료 앱 마켓 Prosumer 툴 강의, 학습서, 튜토리얼 매킨토시 아날로그 전자책,이북(ebook),도서정보 도서,한국사, 세계사 관련 도서관, online repository 지도 잡담-기타

둘 중 하나로 변형하는 것으로 펼치거나 접은 모양을 만들 수 있지만,

그건 어디까지나 스킨이 지원해야 합니다.

https://kooperd.tistory.com/30

https://roomer.tistory.com/11

https://design486.tistory.com/463

스킨이 지원하지 않는 경우는 더 말할 게 없고, 스킨이 원래 지원하던 경우라도 해당 스킨이 티스토리에서 이미 삭제돼 고를 수 없다면 멀쩡히 카테고리 접기 펴기가 되다가도 스킨을 많이 변경하다가 내부적으로 리프레시가 되는지, 저 부분이 동작하지 않게 되는 사태가 벌어질 수 있습니다. 주말에 깨진 스킨과 같은 현상을, 지금 제 스킨에서 list_를 제거하고 보니 볼 수 있더군요. 저는 제가 겪은 걸 그렇게 보기 때문에, 만약 과거에 티스토리 관리자 메뉴에서 스킨을 골라 사용 중인데 지금 티스토리 관리자 메뉴에서 그 스킨이 안 보인다면, 웬만하면 많이 고치지 마시라고 이야기하고 싶네요. 이건 그냥 제 경험이고 실제론 전혀 다른 이야기일 수 있지만서도.

구글 블로그와 비교해 티스토리가 월등히 좋은 점이 바로, 카테고리기능과 카테고리 접기 펴기였는데, 아쉽습니다.