티스토리 스킨 JAVAPARK Dev v1.5 — 접근성, SEO, 코드 품질 전면 개선

안녕하세요, 자바파커입니다.

"새 기능을 추가하는 것만큼, 기존 코드를 점검하는 것도 중요합니다."

v1.4까지 코드 하이라이팅, 다크 모드, 목차, 공유 버튼 등 눈에 보이는 기능을 계속 추가해왔는데요. 이번 v1.5에서는 방향을 바꿨습니다.

결론부터 말씀드리면 — v1.5는 눈에 보이지 않는 곳을 단단하게 만드는 업데이트입니다. 깨진 HTML 수정, 접근성 개선, SEO 최적화, 코드 현대화까지 — 스킨의 기초 체력을 끌어올렸습니다.

---

JAVAPARK Dev 스킨 버전 히스토리

버전	주요 기능
v1.0	기본 레이아웃, 반응형 디자인
v1.2	목차(TOC) 자동 생성, 플로팅 네비게이션, 모바일 대응
v1.3	다크/라이트 테마 자동 전환, 시스템 설정 연동
v1.4	코드 하이라이팅, 복사 버튼, 이미지 확대, 공유 버튼, 읽기 시간, JSON-LD
v1.5 (이번)	글 목록 메타 정보, 접근성·SEO 개선, HTML/CSS/JS 코드 품질 전면 점검

v1.4까지는 "기능 추가"에 집중했다면, v1.5는 "기반 품질 강화"에 초점을 맞췄습니다.

---

v1.5 변경사항 — 한눈에 보기

구분	변경	파일
기능	글 목록에 카테고리·작성일 표시	skin.html
HTML	깨진 태그 2곳 수정	skin.html
SEO	이미지 alt 텍스트 6곳 추가	skin.html
접근성	다크 모드 색상 대응	style.css
JS	GNB 메뉴 하이라이팅 개선	script.js
JS	더보기 페이징 현대화 (XHR → fetch)	script.js

총 11건, 3개 파일 수정입니다.

---

1. 글 목록에 카테고리·작성일 표시

Before (v1.4 이하):

글 목록에서 썸네일, 제목, 요약만 표시되었습니다. 독자가 어떤 카테고리 글인지, 언제 작성된 글인지 목록에서 알 수 없었습니다.

After (v1.5):

[카테고리]
글 제목
글 요약 텍스트...
2026.04.02

카테고리는 제목 위에 작은 라벨로, 작성일은 요약 아래에 표시됩니다. 일반 글과 보호글 목록 모두 적용했습니다.

<!-- 추가된 코드 -->
<span class="category">블로그 운영</span>
<span class="title">티스토리 스킨 JAVAPARK Dev v1.5 — 접근성, SEO, 코드 품질 전면 개선</span>
<span class="excerpt">안녕하세요, 자바파커입니다."새 기능을 추가하는 것만큼, 기존 코드를 점검하는 것도 중요합니다."v1.4까지 코드 하이라이팅, 다크 모드, 목차, 공유 버튼 등 눈에 보이는 기능을 계속 추가해왔는데요. 이번 v1.5에서는 방향을 바꿨습니다.결론부터 말씀드리면 — v1.5는 눈에 보이지 않는 곳을 단단하게 만드는 업데이트입니다. 깨진 HTML 수정, 접근성 개선, SEO 최적화, 코드 현대화까지 — 스킨의 기초 체력을 끌어올렸습니다.JAVAPARK Dev 스킨 버전 히스토리버전주요 기능v1.0기본 레이아웃, 반응형 디자인v1.2목차(TOC) 자동 생성, 플로팅 네비게이션, 모바일 대응v1.3다크/라이트 테마 자동 전환, 시스템 설정 연동v1.4코드 하이라이팅, 복사 버튼, 이미지 확대, 공유 버튼, 읽기 ..</span>
<span class="date">2026. 4. 3. 00:09</span>

CSS에는 .post-item .category와 .post-item .date 스타일이 이미 정의되어 있어서 별도 CSS 수정 없이 바로 적용됩니다. 원래 스킨에 스타일은 있었지만 HTML에서 빠져있던 것이었습니다.

---

2. 깨진 HTML 태그 수정

스킨을 정밀 점검하면서 HTML이 깨져있던 곳 2곳을 발견했습니다.

글 목록 헤더의 깨진 </span> 태그

<!-- Before (깨진 코드) -->
<span>()</h< /span>

<!-- After (수정) -->
<span>()</span>

</h< /span>이라는 존재하지 않는 태그가 있었습니다. 브라우저가 어느 정도 보정해주기는 하지만, 렌더링 오류의 원인이 될 수 있는 코드였습니다.

커버 슬라이더의 비정상 어트리뷰트 구조

<!-- Before -->
<li<s_cover_item_thumbnail> style="..."
  </s_cover_item_thumbnail>>

<!-- After -->
<li <s_cover_item_thumbnail>style="..."</s_cover_item_thumbnail>>

티스토리 치환자와 HTML 태그가 뒤엉켜 있었습니다. 공백과 닫는 태그의 위치를 정리했습니다.

---

3. 이미지 alt 텍스트 — SEO 개선

Before: 스킨 전체에서 이미지 alt 속성이 비어있었습니다.

<!-- Before -->
<img src="..." alt="">

After: 각 이미지에 해당 글의 제목을 alt 텍스트로 자동 삽입합니다.

<!-- After -->
<img src="..." alt="">

수정한 곳은 총 6곳입니다.

위치	alt 내용
cover-thumbnail-list	커버 항목 제목
cover-masonry	커버 항목 제목
cover-list	커버 항목 제목
cover-gallery	커버 항목 제목
글 목록 썸네일	글 제목
관련 글 썸네일	관련 글 제목

이게 왜 중요한가:

• 구글 이미지 검색에서 블로그 이미지가 노출될 가능성 증가
• 스크린 리더가 이미지를 설명할 수 있게 되어 웹 접근성 향상
• 이미지 로딩 실패 시 제목 텍스트가 대체 표시

빈 alt=""는 "이 이미지는 장식용"이라는 뜻입니다. 하지만 블로그 썸네일은 장식이 아니라 콘텐츠의 일부이므로, 의미 있는 텍스트가 있어야 합니다.

---

4. 접근성 링크 색상 — 다크 모드 대응

스킨 상단의 접근성 건너뛰기 링크(#acc-nav)에 색상이 하드코딩되어 있었습니다.

/* Before */
#acc-nav a { color: #000; }
#acc-nav a:focus { color: #fff; }

/* After */
#acc-nav a { color: var(--text); }
#acc-nav a:focus { color: var(--bg); }

이 링크는 평소에는 화면 밖에 숨겨져 있다가, 키보드 Tab 키로 포커스하면 나타납니다. 다크 모드에서 #000 텍스트는 어두운 배경에 묻혀 보이지 않았는데, 이제 CSS 변수를 사용하여 테마에 맞게 자동 전환됩니다.

---

5. GNB 메뉴 하이라이팅 개선

사이드바 메뉴에서 현재 페이지에 해당하는 항목을 강조(highlight)하는 기능이 있는데, URL 매칭 방식에 문제가 있었습니다.

// Before — 정확히 같은 경로만 매칭
if (link.getAttribute('href') === currentPath)

// After — 후행 슬래시 정규화 + 하위 경로 매칭
var href = link.getAttribute('href').replace(/\/$/, '') || '/';
if (href === currentPath || (href !== '/' && currentPath.startsWith(href)))

Before의 문제:

• /category/AI도구와 /category/AI도구/가 서로 다른 경로로 인식
• 카테고리 메뉴를 클릭해서 들어가도 메뉴가 강조되지 않는 경우 발생

After의 개선:

• 후행 슬래시(/)를 제거하여 경로 정규화
• startsWith로 하위 경로도 매칭 (카테고리 → 해당 카테고리의 글 페이지에서도 메뉴 강조)
• 홈(/)은 예외 처리하여 모든 페이지에서 강조되는 문제 방지

---

6. 더보기 페이징 — XHR에서 fetch로 전환

글 목록의 "더보기" 버튼이 XMLHttpRequest를 사용하고 있어서 현대적인 fetch API로 교체했습니다.

// Before
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function () {
  if (xhr.status < 200 || xhr.status >= 300) return;
  // ...
};
xhr.send();

// After
fetch(url)
  .then(function (res) {
    if (!res.ok) return;
    return res.text();
  })
  .then(function (html) {
    if (!html) return;
    // ...
  });

동작은 완전히 동일합니다. fetch는 Promise 기반이라 코드가 더 깔끔하고, 에러 처리도 자연스럽습니다. 모든 현대 브라우저에서 지원하므로 호환성 문제도 없습니다.

---

변경 파일 요약

파일	변경 건수	주요 내용
skin.html	8건	글 목록 메타 정보, 깨진 태그 수정, alt 텍스트
style.css	1건	접근성 링크 색상 CSS 변수화
images/script.js	2건	GNB 매칭 개선, fetch API 전환

기존 v1.4에서 위 3개 파일만 교체하면 됩니다.

---

JAVAPARK Dev v1.5.zip

784.5 kB

적용 방법

1. 티스토리 관리자 → 꾸미기 → 스킨 편집 → HTML/CSS 편집
2. skin.html 내용 교체
3. style.css 내용 교체
4. 파일 업로드 탭에서 images/script.js 교체
5. 저장 후 글 목록에서 카테고리·날짜가 표시되는지 확인

---

이번 업데이트를 하면서 느낀 점

솔직히 말씀드리면, 이번 작업은 "재미있는" 작업은 아니었습니다. 새 기능을 만드는 것보다 기존 코드의 문제를 찾아 고치는 게 지루할 수 있거든요.

하지만 그 과정에서 깨달은 게 있습니다:

• alt=""가 비어있으면 구글 이미지 검색에서 아예 무시당할 수 있다는 것
• HTML 태그 하나 깨진 게 브라우저 렌더링에 영향을 줄 수 있다는 것
• 다크 모드에서 접근성 링크가 안 보이면, 그 기능이 없는 것이나 마찬가지라는 것

기능 100개보다 기반이 탄탄한 코드 1개가 낫습니다. 스킨을 직접 커스터마이징하시는 분들도, 가끔은 새 기능 대신 기존 코드를 점검해보시길 권합니다.

---

FAQ

Q. v1.4에서 v1.5로 업데이트하면 기존 설정이 초기화되나요?

아니요. 스킨 옵션(color-type, post-type 등)과 다크 모드 설정(localStorage)은 모두 유지됩니다. HTML/CSS/JS 파일만 교체하면 됩니다.

Q. 글 목록의 카테고리·날짜를 숨기고 싶으면?

CSS에서 .post-item .category { display: none; }과 .post-item .date { display: none; }을 추가하면 됩니다. HTML에는 남겨두되 CSS로 숨기는 방식이 SEO에 더 유리합니다.

Q. alt 텍스트가 글 제목과 같으면 중복 아닌가요?

같은 페이지 내에서 중복이 아니라, 이미지 자체의 설명으로서 의미가 있습니다. 구글은 이미지의 alt 텍스트를 독립적으로 인덱싱하기 때문에, 제목과 같더라도 빈 값보다 훨씬 낫습니다.

---

마무리

여러분의 티스토리 스킨도 한번 점검해보시는 건 어떨까요? 개발자 도구(F12)에서 Console 탭을 열어보면 의외로 HTML 오류 경고가 떠있을 수 있습니다. 궁금한 점이나 개선 아이디어가 있다면 댓글로 공유해주세요!