안녕하세요! 오늘은 직접 제작한 티스토리 스킨 Mono Zinev1.1.0 업데이트 소식을 전해드릴게요. 🎨
이번 업데이트에서는 웹 접근성(WCAG 2.1 AA) 준수와 성능 최적화에 집중했어요. 더 빠르고, 더 많은 사람들이 편하게 볼 수 있는 스킨이 되었습니다!

🆕 v1.1.0 업데이트 내용

♿ 접근성 대폭 개선 (WCAG 2.1 AA 준수)

  • 텍스트 대비율 4.5:1 이상 확보 - 저시력 사용자도 편하게 읽을 수 있어요
  • 다크모드 대비율 개선 - 어두운 배경에서도 선명한 텍스트
  • prefers-reduced-motion 지원 - 모션에 민감한 분들을 위해 애니메이션 비활성화 옵션
  • 검색창 라벨 추가 - 스크린리더 사용자를 위한 접근성 강화
  • ARIA 라벨 보강 - 모든 인터랙티브 요소에 명확한 설명 추가

⚡ 성능 최적화

  • font-display: swap 적용 - 폰트 로딩 중에도 텍스트가 바로 보여요 (FCP 개선)
  • AdSense defer 로딩 - 초기 렌더링 차단 방지
  • requestIdleCallback 활용 - 브라우저가 한가할 때 비핵심 작업 처리
  • 스크롤 이벤트 최적화 - 불필요한 리플로우 최소화로 부드러운 스크롤

🎨 색상 조정

변수 이전 변경 이유
--accent #e63946 #c5303c 대비율 4.5:1 확보
--slate #6b6b6b #545454 대비율 7:1 확보
--silver #a8a8a8 #767676 대비율 4.54:1 확보

색상이 조금 더 진해졌지만, 전체적인 톤은 유지하면서 가독성이 크게 향상되었어요.


✨ Mono Zine 스킨이란?

Mono Zine은 매거진 스타일의 타이포그래피와 미니멀한 디자인을 결합한 티스토리 스킨이에요. 단순히 예쁜 것에서 그치지 않고, SEO 최적화, 빠른 로딩 속도, 그리고 웹 접근성까지 고려해서 만들었답니다.

🎯 주요 특징

1. 세련된 에디토리얼 디자인

  • Playfair Display + Pretendard 폰트 조합으로 고급스러운 느낌
  • Bold Red 액센트 컬러로 시선을 사로잡는 포인트
  • 호버 시 부드럽게 나타나는 액센트 바 애니메이션
  • 스크롤 진행률을 보여주는 프로그레스 바

2. SEO 완벽 대응

  • Schema.org 구조화 데이터 - 검색엔진이 콘텐츠를 더 잘 이해해요
  • Open Graph / Twitter Card - SNS 공유 시 예쁜 미리보기
  • Breadcrumb 마크업 - 검색결과에 경로 표시
  • RSS 자동 연결 - 구독자 확보에 유리

3. 빠른 로딩 속도

  • 불필요한 스크립트 자동 제거
  • 리소스 Lazy Loading 적용
  • Critical 폰트 Preload + font-display: swap
  • 스크롤 시에만 GTM/Analytics 로드
  • requestIdleCallback으로 비핵심 작업 지연

4. 다크모드 자동 지원

시스템 설정에 따라 자동으로 다크모드가 적용돼요. 밤에 블로그를 보는 독자분들의 눈을 보호해줍니다. 🌙
v1.1.0에서는 다크모드에서도 WCAG 대비율을 준수하도록 색상을 조정했어요!

5. 완벽한 반응형

데스크톱, 태블릿, 모바일 어디서든 최적화된 레이아웃으로 보여요.

6. 웹 접근성 (NEW! ♿)

  • WCAG 2.1 AA 준수 - 텍스트 대비율 4.5:1 이상
  • Skip Link - 키보드 사용자가 본문으로 바로 이동
  • ARIA Labels - 스크린리더 완벽 지원
  • prefers-reduced-motion - 모션 민감 사용자 배려
  • focus-visible - 키보드 포커스 시각적 표시

📸 스킨 미리보기

▼ 메인 페이지 (글 목록)

  • 깔끔한 카드형 레이아웃
  • 호버 시 왼쪽에서 슬라이드되는 액센트 바
  • 썸네일 확대 애니메이션

▼ 글 상세 페이지

  • 중앙 정렬된 제목과 메타 정보
  • 읽기에 최적화된 720px 본문 너비
  • H2 제목 옆 포인트 컬러 바

▼ 다크모드

  • 눈이 편안한 다크 배경
  • 자동 색상 반전
  • 개선된 대비율로 더 선명한 텍스트

📦 다운로드

mono-zine-skin-1.1.0.zip
0.07MB

🛠️ 설치 방법

설치는 정말 간단해요!

  1. 위 버튼을 눌러 ZIP 파일을 다운로드해주세요.
  2. 압축을 풀면 3개 파일이 나와요: skin.html, style.css, index.xml
  3. 티스토리 관리자꾸미기스킨 편집으로 이동
  4. 우측 상단 html 편집 클릭
  5. 파일 업로드 탭에서 4개 파일 모두 업로드
  6. 적용 버튼 클릭하면 끝!

🔄 기존 사용자 업데이트 방법

이미 Mono Zine을 사용 중이시라면:

  1. 새 버전 ZIP을 다운로드
  2. skin.htmlstyle.css만 다시 업로드
  3. 기존 설정은 그대로 유지돼요!

⚠️ 액센트 컬러를 커스텀하셨다면, 새 style.css에서 다시 수정해주세요.

⚙️ 커스터마이징 가이드

액센트 컬러 변경하기

style.css 파일 상단의 :root 부분에서 색상을 바꿀 수 있어요:

:root {
    /* 현재: Bold Red (접근성 개선) */
    --accent: #c5303c;
    
    /* 다른 옵션들 (모두 WCAG AA 준수) */
    /* --accent: #1d4ed8;   Deep Blue */
    /* --accent: #047857;   Emerald */
    /* --accent: #6d28d9;   Violet */
}

💡 팁: 커스텀 색상을 사용할 때는 WebAIM Contrast Checker로 대비율을 확인해보세요!

사이드바 위치 변경

스킨 편집기능 설정에서 사이드바 위치를 선택할 수 있어요:

  • 왼쪽
  • 오른쪽 (기본값)
  • 없음 (1단 레이아웃)

💡 이런 분들께 추천해요

  • ✅ 깔끔하고 트렌디한 블로그 디자인을 원하시는 분
  • ✅ 검색엔진 최적화(SEO)에 관심 있으신 분
  • ✅ 블로그 로딩 속도가 느려서 고민이신 분
  • ✅ 다크모드를 지원하는 스킨을 찾으시는 분
  • 웹 접근성을 중요하게 생각하시는 분
  • ✅ 심플하지만 디테일이 살아있는 디자인을 좋아하시는 분

🔧 기술 스펙

항목 내용
폰트 Playfair Display, Pretendard (font-display: swap)
본문 너비 720px (최적 가독성)
전체 너비 1200px
반응형 분기점 1024px, 768px, 480px
SEO Schema.org, OG, Twitter Card
다크모드 자동 (prefers-color-scheme)
접근성 WCAG 2.1 AA, Skip Link, ARIA, prefers-reduced-motion
텍스트 대비율 4.5:1 이상 (모든 텍스트)

📋 변경 이력

v1.1.0 (2025.01.09)

  • ♿ WCAG 2.1 AA 대비율 준수 (4.5:1 이상)
  • ⚡ font-display: swap 적용으로 FCP 개선
  • ⚡ AdSense defer 로딩
  • ⚡ requestIdleCallback 활용한 비핵심 작업 최적화
  • ⚡ 스크롤 이벤트 리플로우 최소화
  • ♿ prefers-reduced-motion 지원
  • ♿ 검색창 라벨 및 ARIA 속성 보강
  • 🎨 다크모드 색상 대비율 개선

v1.0.3

  • 초기 릴리즈

❓ FAQ

Q. 기존 글이나 설정이 날아가나요?
A. 아니요! 스킨만 바뀌고 글, 댓글, 설정은 모두 그대로 유지돼요.
Q. 댓글이 안 보여요!
A. 스킨 편집기능 설정에서 "댓글" 옵션이 켜져있는지 확인해주세요.

Q. 네이버/구글 인증 코드는 어디에 넣나요?
A. skin.html<head> 부분에 이미 네이버 인증 코드 위치가 있어요. 본인 코드로 교체해주시면 됩니다.

Q. 수정해서 사용해도 되나요?
A. 네, 자유롭게 수정하셔도 돼요! MIT 라이선스입니다.

Q. 이전 버전 색상이 더 좋았는데, 되돌릴 수 있나요?
A. style.css에서 --accent: #e63946;, --slate: #6b6b6b;, --silver: #a8a8a8;로 변경하시면 돼요. 단, 접근성 대비율이 낮아질 수 있습니다.

Q. prefers-reduced-motion이 뭔가요?
A. 시스템 설정에서 "동작 줄이기"를 켜면 모든 애니메이션이 비활성화돼요. 모션에 민감하거나 어지러움을 느끼는 분들을 위한 기능이에요.


스킨 사용 중 문제가 있거나 개선 요청이 있으시면 댓글로 남겨주세요! 최대한 반영해볼게요. 😊
그럼 새로운 스킨으로 블로그가 더 멋져지길 바랍니다! ✨