티스토리 블로그 203개 글을 전수 점검해 고친 것들: H1·모바일 UX·스킨 배포

티스토리 블로그를 오래 운영하면 글만 쌓이는 것이 아닙니다. 스킨 수정, 에디터 변경, 오래된 글의 HTML, 모바일 화면처럼 서로 다른 시기에 만들어진 요소도 함께 쌓입니다. 겉으로는 정상처럼 보여도 문서 구조나 접근성, 배포 방식에는 작은 문제가 남을 수 있습니다.

이번에는 JAVAPARK에 공개된 약 203개 글과 주요 목록 화면을 읽기 전용으로 먼저 확인한 뒤, 영향 범위를 좁혀 수정했습니다. 결과적으로 일부 글의 제목 구조를 정리하고, 모바일에서 노출되던 검색 라벨을 바로잡았으며, 스킨을 v1.6.4와 v1.6.5로 나누어 보관했습니다.

먼저 결론
이번 점검에서 본문 H1이 들어 있던 5개 글의 제목 8개를 H2로 조정했습니다. 스킨 공통 제목 구조도 정리해 공개 글 페이지마다 대표 H1 하나가 남도록 확인했습니다. 모바일 목록 화면에서는 .screen-out 스타일 누락을 수정하고 390px 화면에서 가로 넘침이 없음을 검증했습니다.

왜 전수 점검이 필요했을까

블로그 운영 초기에는 글 한 편과 PC 화면만 확인해도 충분해 보입니다. 하지만 글이 200개를 넘으면 개별 글을 눈으로 열어보는 방식만으로는 일관성을 확인하기 어렵습니다.

이번 점검에서는 다음 질문을 기준으로 삼았습니다.

• 글 페이지에서 가장 중요한 제목이 일관된가?
• 스킨이 만든 제목과 본문에 직접 입력한 제목이 충돌하지 않는가?
• 화면에서 숨겨야 하는 접근성 문구가 실제로 숨겨지는가?
• PC뿐 아니라 좁은 모바일 화면에서도 조작 영역이 깨지지 않는가?
• 문제가 생겼을 때 이전 상태로 돌아갈 수 있도록 버전이 남아 있는가?

중요한 점은 H1 개수를 억지로 맞추는 작업을 SEO 비법으로 보지 않았다는 것입니다. Google도 제목 요소의 개수에 마법 같은 정답이 있는 것은 아니며, 의미에 맞는 제목 구조는 특히 화면 낭독기 사용자를 위해 유용하다고 설명합니다. 이번 수정의 목적은 검색 순위를 단정하는 것이 아니라 문서 구조와 사용자 경험을 더 예측 가능하게 만드는 것이었습니다.

참고: Google 검색엔진 최적화 기본 가이드

1. 스킨과 본문에 나뉘어 있던 H1 정리

티스토리에서는 스킨이 글 제목을 출력하고, 본문은 에디터가 별도로 HTML을 생성합니다. 이 둘을 따로 관리하면 스킨의 블로그 제목, 글 제목, 본문 안의 큰 제목이 모두 H1이 되는 상황이 생길 수 있습니다.

먼저 스킨 공통 영역을 정리한 뒤 공개 글을 확인했습니다. 이어서 전체 글을 검사해 본문 내부에 H1이 들어간 글만 추렸습니다. 실제 수정 대상은 5개 글이었고, 본문 H1은 모두 8개였습니다.

수정 기준은 단순했습니다.

• 글의 대표 제목은 티스토리 글 제목에 맡긴다.
• 본문 안의 주요 구획은 H2를 사용한다.
• H3 이하 제목은 상위 구획과의 관계를 보고 유지한다.
• 제목처럼 보이게 만들기 위해 글자 크기만 키우지 않는다.

변경 후에는 관리자 에디터만 믿지 않고 공개 URL에서 다시 확인했습니다. 대상 글 모두 대표 H1 하나가 남고, 기존 본문 구획과 문장은 유지되는 것을 확인했습니다.

2. 모바일에서 두 줄로 보이던 검색 라벨

글 목록 검색 기능을 추가한 뒤 모바일 화면에서 현재 목록에서 글 찾기라는 문구가 검색창 옆에 그대로 나타났습니다. 좁은 화면에서는 두 줄 이상으로 줄바꿈되어 검색창과 보기 방식 버튼이 답답해 보였습니다.

HTML에는 이미 접근성용 클래스가 지정되어 있었습니다.

<span class="screen-out">현재 목록에서 글 찾기</span>

문제는 클래스 이름만 있고, 실제로 화면에서 숨기는 CSS가 없었다는 점입니다. 문구를 HTML에서 삭제하면 화면 낭독기가 검색창의 용도를 알기 어려워질 수 있으므로, 요소를 없애는 대신 시각적으로만 숨기는 방식을 적용했습니다.

.screen-out {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

수정 후 문구는 화면에서 사라졌지만 검색 입력창의 설명은 남았습니다. 390px 모바일 화면에서 검색 영역 전체 너비는 343px, 입력창은 275px로 표시됐고 가로 스크롤도 생기지 않았습니다.

작은 CSS 한 블록이지만 여기에는 중요한 운영 원칙이 있습니다. 보이지 않게 만드는 것과 접근성 정보 자체를 삭제하는 것은 다릅니다. 화면 문제를 고칠 때는 마크업이 왜 존재하는지 먼저 확인해야 합니다.

3. v1.6.4와 v1.6.5를 나눈 이유

이번 변경을 기존 v1.6 파일에 그대로 덮어쓰지 않았습니다.

• v1.6.4: 사이트 전반의 제목 구조 정리
• v1.6.5: 목록 검색 라벨의 접근성 스타일 보완

각 단계에서 스킨 파일을 별도 ZIP으로 만들고 티스토리 스킨 보관함에도 버전을 구분해 등록했습니다. v1.6.5 배포 ZIP의 SHA-256 값도 함께 남겼습니다.

89574F08C45A39B33E49E6E831BB4B7FD584E68AD71F4AA930B22F138F201E9D

버전 번호는 기능을 과시하기 위한 표시가 아닙니다. 새 스킨에서 문제가 발견됐을 때 이전 버전으로 돌아갈 수 있게 하는 운영 장치입니다. 티스토리 스킨을 수정한다면 최소한 다음 세 가지는 남겨두는 편이 좋습니다.

1. 적용 전 스킨 백업
2. 변경 내용이 구분되는 버전 번호
3. 적용 후 공개 페이지 점검 기록

4. 관리자 화면보다 공개 화면을 마지막에 확인하기

에디터와 스킨 편집기의 미리보기만으로 작업을 끝내지 않았습니다. 실제 방문자가 보는 공개 페이지에서 다음 항목을 다시 확인했습니다.

점검 항목 확인 결과

글 페이지 대표 H1	대상 글마다 1개
본문 내부 H1	수정 대상 5개 글에서 제거
모바일 검색 라벨	시각적으로 숨김 처리
검색 입력 안내	기존 placeholder 유지
390px 화면 가로 넘침	없음
스킨 복구 수단	v1.6.4·v1.6.5 별도 보관

이 과정에서 특히 도움이 된 것은 “수정했다”와 “공개 화면에서 확인했다”를 별개의 단계로 취급한 것입니다. 캐시, 티스토리 치환자, 에디터가 만든 HTML 때문에 저장된 코드와 실제 출력 결과가 다를 수 있기 때문입니다.

티스토리 운영자가 바로 써볼 수 있는 점검표

아래 항목은 스킨을 업데이트하거나 오래된 글을 정리할 때 그대로 사용할 수 있습니다.

• 현재 스킨을 먼저 백업했는가?
• 글·목록·카테고리·검색 화면을 각각 확인했는가?
• 본문 제목이 H2부터 자연스럽게 이어지는가?
• 숨김 문구가 단순히 화면 밖으로 밀려나지는 않았는가?
• 키보드만으로 검색과 메뉴를 사용할 수 있는가?
• 390px 안팎의 모바일 화면에서 가로 스크롤이 생기지 않는가?
• 수정 전후 버전과 배포 파일을 구분해 보관했는가?
• 관리자 미리보기뿐 아니라 공개 URL에서도 확인했는가?

수정이 끝난 뒤부터가 측정의 시작

이번 작업만으로 검색 유입이 증가했다고 말할 수는 없습니다. 구조를 정리한 날짜를 기준점으로 남기고, 앞으로 30일과 90일 동안 검색 노출수·클릭수·유입 검색어를 비교할 예정입니다.

다만 검색 결과와 별개로 즉시 확인할 수 있었던 개선은 분명했습니다. 제목 구조가 일관되어 유지보수가 쉬워졌고, 모바일 검색 영역이 간결해졌으며, 문제가 생겼을 때 돌아갈 수 있는 버전도 확보했습니다.

개발 블로그를 운영하다 보면 이런 변경은 너무 작아서 기록할 필요가 없다고 느끼기 쉽습니다. 하지만 실제 운영에서는 작은 문제를 발견하고, 영향 범위를 확인하고, 수정 후 공개 화면까지 검증하는 과정이 가장 재사용하기 좋은 경험이 됩니다.

다음 글에서는 이번 점검에서 가장 판단이 필요했던 주제인 “티스토리에서 H1이 여러 개면 실제로 무엇이 문제인가”를 스킨과 본문 구조로 나누어 정리해보겠습니다.