Claude Code + VS Code + Python으로 티스토리 HTML 소스를 자동 생성하는 실전 가이드
▲ VS Code에서 Claude Code와 Python으로 티스토리 HTML 블로그 글을 자동 생성하는 환경
Word 파일로 블로그 글을 만드는 방법이 익숙하다면, 다음 단계로 HTML 방식을 고려해볼 만합니다. 티스토리는 '기본 모드' 외에 'HTML 모드' 에디터를 제공하기 때문에 HTML 소스를 직접 붙여넣으면 서식이 정확히 의도한 대로 반영됩니다. Word 방식에서는 에디터가 서식을 해석하는 과정에서 레이아웃이 틀어지는 경우가 생기지만, HTML은 작성한 코드 그대로 출력되기 때문에 반복 포맷 글에 특히 강점이 있습니다. Claude Code와 Python으로 HTML 템플릿을 만들어두면 주제와 내용만 바꿔 넣어 완성된 블로그 소스를 몇 초 만에 뽑아낼 수 있습니다.
| 항목 | 내용 |
| 사용 도구 | VS Code + Claude Code + Python(Jinja2 / f-string) |
| 출력 형식 | 티스토리 HTML 에디터에 바로 붙여넣기 가능한 .html 파일 |
| 핵심 장점 | 서식·색상·이미지 경로까지 한 번에 자동 생성 |
| Word 방식 차이 | Word는 에디터 의존, HTML은 디자인을 코드로 완전 제어 |
| 권장 활용 | 반복 포맷 글(리뷰·정보글·튜토리얼)에 특히 효과적 |
1. Word 방식과 HTML 방식, 무엇이 다른가
두 방식은 결과물은 비슷해 보여도 제어 범위가 크게 다릅니다. Word 파일은 에디터가 서식을 해석해 화면에 출력하기 때문에 글꼴 크기나 여백이 예상과 다르게 적용되는 경우가 있습니다. 반면 HTML은 태그와 CSS로 픽셀 단위까지 직접 제어하므로 어떤 기기에서 열어도 의도한 레이아웃을 유지할 수 있습니다. 특히 색상 강조 박스, 카드형 레이아웃, 반응형 이미지처럼 디자인 요소가 중요한 글에서는 HTML 방식이 훨씬 유리합니다.
Word 방식 vs HTML 방식 비교
| 비교 항목 | Word(.docx) 방식 | HTML 방식 |
| 서식 제어 | Word 스타일에 의존 | CSS로 픽셀 단위 완전 제어 |
| 이미지 삽입 | 파일 내 포함 | src 경로 또는 Base64 임베드 |
| 티스토리 업로드 | 복사·붙여넣기 (서식 유지) | HTML 탭에 소스 직접 붙여넣기 |
| 반응형 지원 | 제한적 | 미디어쿼리로 모바일 최적화 |
| 커스텀 디자인 | 어려움 | 자유로운 색상·레이아웃 적용 |
| 재사용성 | 템플릿 복사 | Jinja2 템플릿으로 변수만 교체 |
| 학습 난이도 | 낮음 | HTML/CSS 기초 필요 |
2. 티스토리 HTML 블로그 글의 기본 구조
티스토리 HTML 에디터에 붙여넣는 소스는 완전한 HTML 문서일 필요가 없습니다. <body> 안에 들어가는 콘텐츠 부분만 작성하면 됩니다. 기본 뼈대는 제목(<h2>), 본문(<p>), 이미지(<img>), 목록(<ul>), 표(<table>)로 구성되며 인라인 스타일이나 <style> 블록으로 CSS를 함께 넣으면 에디터에 붙여넣는 순간 스타일이 그대로 적용됩니다.
티스토리 HTML 블로그 주요 태그 정리
| HTML 태그 | 역할 | 티스토리 활용 예시 |
| <h2> | 섹션 제목 | 본문 소제목, 목차 앵커 연결 |
| <p> | 본문 단락 | 설명 텍스트, 줄간격 CSS 적용 |
| <img> | 이미지 삽입 | 대표 이미지, 캡션과 함께 구성 |
| <table> | 표 | 비교표, 스펙표, 단계별 정리 |
| <ul> / <li> | 목록 | 핵심 포인트, 체크리스트 |
| <pre><code> | 코드 블록 | 명령어, 소스코드 하이라이트 |
| <div class=> | 레이아웃 구획 | 요약 박스, 강조 박스, 콜아웃 |
| <a href=> | 링크 | 참고 출처, 관련 글 연결 |
▲ Python으로 자동 생성된 HTML 블로그 글의 브라우저 렌더링 예시 — 요약박스·이미지·Tip·코드블록·해시태그 포함
아래는 티스토리에 붙여넣기 적합한 최소한의 HTML 글 뼈대입니다. 이 구조를 Python 템플릿으로 만들어두면 변수만 교체해 다양한 글을 생성할 수 있습니다.
<!-- 티스토리 HTML 에디터 붙여넣기 기본 뼈대 -->
<style>
.blog-wrap { font-family: "Malgun Gothic", sans-serif; line-height: 1.8; }
h2 { color: #1a1a2e; border-left: 4px solid #0066cc; padding-left: 10px; }
.summary-box { background: #f0f4ff; border-radius: 8px; padding: 16px; }
img { max-width: 100%; border-radius: 6px; margin: 12px 0; }
.tag { display: inline-block; background: #e8f0fe; color: #1a73e8;
border-radius: 4px; padding: 2px 8px; margin: 2px; font-size: 13px; }
</style>
<div class="blog-wrap">
<h1>글 제목</h1>
<div class="summary-box">
<strong>핵심 요약</strong>
<ul><li>포인트 1</li><li>포인트 2</li></ul>
</div>
<h2>1. 첫 번째 섹션</h2>
<p>본문 내용...</p>
<img src="이미지URL" alt="설명">
<p class="tag">#태그1</p><p class="tag">#태그2</p>
</div>
3. Python으로 HTML 블로그 소스 자동 생성하기
Python에서 HTML을 생성하는 방법은 크게 두 가지입니다. f-string으로 HTML 문자열을 직접 조립하는 방식과 Jinja2 템플릿 엔진을 사용하는 방식입니다. 간단한 글은 f-string으로 충분하고, 섹션 수가 많거나 조건부 렌더링이 필요하면 Jinja2가 적합합니다. Claude API로 각 섹션 텍스트를 생성한 뒤 이 Python 코드로 HTML에 주입하면 완성된 소스가 파일로 저장됩니다.
# f-string 방식: 간단한 구조에 적합
def build_html(title: str, sections: list[dict]) -> str:
section_html = ''
for s in sections:
section_html += f'''
<h2>{s['heading']}</h2>
<p>{s['body']}</p>
'''
return f'''
<div class="blog-wrap">
<h1>{title}</h1>
{section_html}
</div>
'''
# Jinja2 방식: 복잡한 구조·반복·조건에 적합
from jinja2 import Template
TMPL = Template('''
<div class="blog-wrap">
<h1>{{ title }}</h1>
{% for s in sections %}
<h2>{{ s.heading }}</h2>
<p>{{ s.body }}</p>
{% if s.image %}<img src="{{ s.image }}">{% endif %}
{% endfor %}
</div>''')
html = TMPL.render(title='제목', sections=[...])
Path('output/blog.html').write_text(html, encoding='utf-8')
4. Claude API로 각 섹션 텍스트를 채우는 방법
HTML 뼈대를 만들었다면 각 섹션의 텍스트는 Claude API로 채웁니다. 섹션 제목 목록을 먼저 정의하고 각 제목별로 API를 호출해 본문을 생성한 뒤 템플릿에 주입하면 완성입니다. 이미지 src에는 로컬 파일 경로 대신 티스토리에 업로드한 이미지 URL을 쓰거나, Base64로 인코딩해 HTML 안에 직접 포함시킬 수도 있습니다.
import anthropic, base64
from pathlib import Path
client = anthropic.Anthropic()
TOPIC = 'VS Code와 AI로 블로그 자동화하기'
HEADINGS = [
'1. 왜 HTML 방식이 유리한가',
'2. 기본 HTML 구조 잡기',
'3. Python으로 소스 자동 생성',
'4. 티스토리에 붙여넣는 방법',
]
def gen(heading: str) -> str:
msg = client.messages.create(
model='claude-sonnet-4-6', max_tokens=800,
messages=[{'role': 'user', 'content':
f'주제: {TOPIC}\n섹션: {heading}\n'
'티스토리 독자용 본문을 300자 이내로 작성해줘.'}]
)
return msg.content[0].text
def img_to_base64(path: str) -> str:
data = Path(path).read_bytes()
return 'data:image/png;base64,' + base64.b64encode(data).decode()
sections = [{'heading': h, 'body': gen(h)} for h in HEADINGS]
html = TMPL.render(title=TOPIC, sections=sections)
Path('output/blog.html').write_text(html, encoding='utf-8')
print('완료: output/blog.html')
· 섹션 수가 많으면 한 번의 API 호출로 전체 JSON을 받아 파싱하는 방식이 더 빠름
· prompt_cache_control 설정으로 동일 시스템 프롬프트 반복 호출 비용 절감
· Base64 이미지 임베드 시 HTML 파일 하나로 모든 자료가 포함된 독립 파일 생성 가능
5. 티스토리 HTML 에디터에 붙여넣는 방법
생성된 HTML 파일을 티스토리에 올리는 과정은 간단합니다. 글쓰기 화면에서 에디터 우측 상단의 'HTML' 탭을 클릭하면 소스를 직접 입력할 수 있는 창이 열립니다. 여기에 생성된 HTML 소스를 전체 선택해 붙여넣고 '기본 모드'로 돌아오면 스타일이 적용된 미리보기가 나타납니다. 이미지는 티스토리 자체 업로드 후 URL을 src에 넣거나, Base64로 임베드해 소스 안에 포함시킬 수 있습니다.
· 티스토리 글쓰기 → 에디터 우측 상단 'HTML' 탭 클릭
· 생성된 HTML 소스 전체 복사 → HTML 창에 붙여넣기
· '기본 모드'로 전환해 미리보기 확인 → 이상 없으면 발행
· 이미지 경로는 티스토리 첨부 이미지 URL로 교체하거나 Base64 임베드 사용
· <style> 블록의 CSS는 티스토리 스킨과 충돌 여부 미리보기로 확인 권장
6. 강조 박스·콜아웃 같은 디자인 요소 추가하기
HTML 방식의 가장 큰 장점은 Word 에디터에서 구현하기 어려운 강조 박스, 콜아웃, 카드 레이아웃을 CSS 몇 줄로 바로 만들 수 있다는 점입니다. 요약 박스, 주의 박스, 팁 박스 같은 자주 쓰는 컴포넌트를 Python 함수로 미리 만들어두면 generate_tip_box('내용') 한 줄로 어디서든 불러쓸 수 있습니다.
▲ 요약박스·Tip·Warning·코드블록 4종 컴포넌트 예시 및 자동화 흐름 (주제 입력 → 티스토리 붙여넣기)
# 재사용 가능한 HTML 컴포넌트 함수
def summary_box(items: list[str]) -> str:
li = ''.join(f'<li>{i}</li>' for i in items)
return f'''<div style="background:#f0f4ff;border-left:4px solid #0066cc;
border-radius:6px;padding:14px 18px;margin:16px 0">
<strong>핵심 요약</strong><ul>{li}</ul></div>'''
def tip_box(text: str) -> str:
return f'''<div style="background:#fff8e1;border-left:4px solid #f9a825;
border-radius:6px;padding:14px 18px;margin:16px 0">
💡 <strong>Tip</strong><br>{text}</div>'''
def warn_box(text: str) -> str:
return f'''<div style="background:#fce4ec;border-left:4px solid #e53935;
border-radius:6px;padding:14px 18px;margin:16px 0">
⚠️ <strong>주의</strong><br>{text}</div>'''
# 사용 예시
html_body = summary_box(['HTML 방식은 디자인 제어가 자유롭다',
'Claude API로 본문을 자동 생성한다'])
html_body += tip_box('Jinja2를 쓰면 조건부 섹션도 손쉽게 처리할 수 있습니다.')
마무리: Word보다 HTML이 맞는 상황이 있습니다
블로그 자동화에서 Word와 HTML은 서로 대체 관계가 아니라 용도가 다른 두 가지 도구입니다. 빠르게 글 초안을 만들고 자동화 진입 장벽을 낮추기엔 Word 방식이 유리하고, 디자인 일관성이 중요하거나 반복 포맷 글을 대량 생성하는 경우에는 HTML 방식이 강점을 발휘합니다. Claude Code를 VS Code에서 함께 사용하면 HTML 템플릿 코드 작성부터 오류 수정, 컴포넌트 추가까지 대화 몇 번으로 빠르게 구현할 수 있어 코딩 경험이 적어도 충분히 시작할 수 있습니다.
'컴퓨터 활용 공간 > AI' 카테고리의 다른 글
| 엑셀 INDEX / MATCH를 웹에서 처리하는 서비스 소개 (0) | 2026.04.27 |
|---|---|
| 엑셀 SUMIF를 웹에서 처리하는 서비스 소개 (0) | 2026.04.27 |
| VS Code와 AI로 블로그 글 자동 작성하기, 파이썬 스크립트 하나로 Word 파일 완성 (2) | 2026.04.26 |
| 엑셀 VLOOKUP을 몰라도 되는 웹 도구 소개 (2) | 2026.04.26 |
| 클로드 코드로 슈팅 게임 만들기, 프롬프트 한 번으로 게임 완성 (2) | 2026.04.26 |