chatGPT 티스토리 블로그 마크다운 옮길 때 소소한 수정 팁

chatGPT 티스토리 블로그 마크다운 옮길 때 소소한 수정 팁

콘텐츠 제작자라면 한 번쯤 “ChatGPT에서 뚝딱 생성한 마크다운 문서를 티스토리 블로그에 붙여넣었더니 서식이 엉망”이라는 경험을 하셨을 겁니다. 특히 티스토리 블로그 에디터는 최신 웹표준·마크다운 스펙을 100 % 지원하지 않기 때문에, 자동 생성된 문서를 그대로 올리면 검색엔진 최적화(SEO) 점수가 떨어지고 가독성도 악화됩니다.

이번 글에서는 최소한의 수작업만으로 ChatGPT 마크다운을 티스토리 친화적인 HTML로 바꾸는 노하우를 소개합니다. 모든 팁은 실무에서 검증된 방법이며, 업무 시간을 단축하고 블로그 품질을 높이는 데 도움이 될 것입니다.

수정팁: EditPlus 같은 텍스트 에디터 프로그램은 문자 replace All기능이 강력합니다.

---

H2 기준 제목 레벨 정리

본문 내 제목글에 H1을 써야 되냐 말아야 되냐 논란이 많지만, 적어도 네이버 Search Advisor에서는 H1을 웹표준 위반으로 인식합니다. 때문에 가급적 본문 내의 제목 최고 레벨은 H2가 돼야 합니다. chatGPT에게 H2가 최고레벨의 제목이 되라고 프롬프트를 주어도 H1부터 시작 할 때가 많기 때문에 반드시 이 부분은 체크하고 수정해야 합니다.

왜 H1을 피해야 하나

• 네이버 Search Advisor는 본문에 #(H1)이 있으면 웹표준 위반으로 간주하고 가중치를 깎습니다.
• 티스토리 스킨 대부분이 본문 최상단에 이미 H1을 사용하므로, 추가 H1은 ‘중복 타이틀’ 문제가 발생합니다.

한 번에 교정하는 방법

1. EditPlus 또는 VS Code에서 “바꾸기(Replace All)” 기능 실행
2. 찾을 말 #␣ → 바꿀 말 ##␣
3. 파이썬 코드블록 안의 # 주석이 바뀌지 않도록 정규식 또는 코드 블록 선택 후 제외

Tip : 반대로 ChatGPT가 H3부터 시작한 경우
##␣ → #␣ 로 대체해 주면 됩니다.

---

과도한 문자 이스케이프 제거

마크다운은 **로 시작해서 **로 끝내면 문자를 Bold처리합니다. 하지만, chatGPT는 과도하게 친절해서 특수문자 뒤에 오는 볼드처리 기호를 텍스트화(\를 앞에 붙임)합니다.

증상

ChatGPT가 친절함(?)을 발휘해 **볼드** 앞뒤에 백슬래시(\)를 삽입하는 경우가 있습니다.

\*\*강조할 문장\*\*

티스토리 에디터에서는 그대로 **강조할 문장** 텍스트만 보여줍니다.

해결 절차

• 찾을 말 \*\*
• 바꿀 말 **(별표 두 개 뒤에 공백 포함)
• 닫는 부분도 동일하게 처리

---

리스트(List) 안 LaTeX 렌더링 오류

원인 분석

• 티스토리에서 MathJax를 로드해도 들여쓰기가 포함된 리스트 항목 내부 LaTeX는 종종 렌더링 실패
• ChatGPT는 UL·OL 내부 수식을 자동으로 들여쓰기(indent) 처리

실무 교정

1. 해당 수식 문단 드래그 → Shift+Tab 으로 왼쪽으로 한 단계 내어쓰기
2. 리스트 구조가 깨지더라도 렌더링은 정상화
3. 필요하다면 수식을 블록 인라인($$ … $$)으로 분리하여 가독성 향상

---

표(Table) 스타일 깨짐 방지

티스토리 스킨 한계

• Thead <th>에 대한 CSS가 없는 경우가 다수
• ChatGPT는 마크다운 변환 시 첫 줄을 자동으로 <thead>로 묶어 헤더 셀이 스타일 미적용

빠른 두 가지 대안

① 스킨 CSS 수정

/* layout.css */
.post tbody th,
.post thead th {
  background:#f7f7f7;
  font-weight:600;
  padding:8px;
}

② 결과물 직접 편집

• HTML 편집 모드에서 <thead> → <tbody> 교체
• 또는 마크다운 원본에서 표 첫 줄 복사 → 구분선(| --- |) 아래에 같은 줄 한 번 더 삽입

Tip : 표가 한두 개뿐이라면 에디터에서 수동 수정이 더 빠르고, 다량이면 EditPlus 매크로가 효율적입니다.

---

코드블록 하이라이트 & 스크롤바

기본 문제

티스토리 기본 스킨은 <pre><code> 영역에 줄바꿈 강제·가로 스크롤 없음 등으로 코드 가독성이 떨어집니다.

개선 스니펫

1. CSS

/* custom.css */
pre code {
  display:block;
  overflow-x:auto;
  padding:1rem;
  background:#272822;
  color:#ddd;
  border-radius:6px;
  font-family:Consolas, 'D2Coding', monospace;
  line-height:1.6;
}

2. 마크다운
   ```python

# 예시

print("Hello Tistory!")
```

---

VS Code 사용자 정의 스니펫으로 자동 치환

1. settings.json > files.associations에 "*.md": "markdown" 지정
2. snippets/markdown.json에 아래 규칙 삽입

"H1 to H2": {
  "prefix": "#",
  "body": ["## $1"]
}

3. ChatGPT 결과 붙여넣기 → Ctrl+Space로 스니펫 호출 → 일괄 변환

---

SEO 관점에서 추가 점검 리스트

• 메타디스크립션 : 티스토리 글 설정에서 100자 이내 요약 작성
• 키워드 밀도 : 주요 키워드 1 % – 2 % 유지, 과도한 반복은 페널티
• 링크 구조 : 내부 링크 2개 이상, 외부 권위 사이트 1개 이상 삽입
• ALT 태그 : 모든 이미지에 대체 텍스트 기입
• 모바일 최적화 : 긴 코드·표는 가로 스크롤 가능하도록 CSS 확인

---

워크플로우 예시

1. ChatGPT에 프롬프트 입력 → 결과물 복사
2. VS Code에서 스니펫·정규식으로 1차 정리
3. EditPlus에서 전역 치환으로 H 레벨·이스케이프 수정
4. 티스토리 HTML 모드에 붙여넣기 후 표·코드 블록 CSS 확인
5. 미리보기로 모바일·다크모드 출력 점검
6. 발행 후 Search Console·네이버 서치어드바이저 등록

---

결론

ChatGPT가 만들어 준 마크다운을 그대로 올려도 글은 보이지만, 검색엔진과 방문자 모두에게 최적화된 글을 만들려면 최소한의 후처리가 필수입니다. H2 기반 제목 계층을 유지하고, 불필요한 이스케이프·들여쓰기를 제거하며, 표와 코드 블록 스타일을 보강하면 티스토리에서도 깔끔한 문서 형태를 유지할 수 있습니다. 위 팁들을 자동화 스니펫과 텍스트 에디터 매크로로 익혀 두면, 긴 글도 5분 안에 교정하여 발행할 수 있으니 꼭 활용해 보시길 권합니다. 현업에서 바로 적용 가능한 실전 노하우로 블로그 퀄리티와 업무 효율을 동시에 잡아보세요.

---