워드프레스 자동 포스팅 이미지 리사이징 해결 방법 | Python API 이미지 최적화 (feat. 중앙정렬)

매번 노션에 쓴 글을 워드프레스로 복사·붙여넣기 하는 건 비효율의 극치..

API를 활용해 '딸깍' 한 번으로 포스팅을 끝내는 자동화 파이프라인을 구축해 보았음.

노션에서 글을 쓰고 'Ready' 상태로 바꾸면,

GitHub Actions가 정해진 시간에 그걸 감지해서 워드프레스에 자동으로 발행하고,

다시 노션 상태를 'Published'로 바꿔주게 됨.

시스템 아키텍처 개요

전체적인 흐름은 노션 데이터베이스의 상태 값을 감지해 워드프레스 REST API로 데이터를 쏘는 방식임.

핵심은 노션-GitHub Actions-WordPress의 유기적인 연결.

이걸 한 장의 그림으로 보면 이렇게..

노션-워드프레스 자동화

 

워드프레스 자동 포스팅 구축 완료, 그런데...

API로 워드프레스 자동 포스팅 파이프라인 만들었음. 노션에서 글 쓰면 자동으로 워드프레스에 올라가게

"이제 편하겠지?" 했는데...

글은 올라가는데 이미지가 미쳤음

워드프레스 이미지 사이즈 문제 발생

자동으로 올라간 글 확인하러 들어가면 이미지들이 글 영역을 완전히 벗어나서 엄청 크게 박혀있음

모바일에서 보면 더 심각함. 이미지가 화면 밖으로 튀어나가서 가로스크롤 생김

결국 매번 워드프레스 들어가서 이미지 하나하나 클릭해서 사이즈 조절하고 중앙정렬 다시 해줘야 했음

이게 무슨 자동화인가 싶었음

워드프레스 이미지 크기 문제 원인 분석

노션에서 가져온 이미지를 워드프레스 API로 업로드하면:

• 원본 사이즈 그대로 들어감
• 정렬 설정이 없음
• 반응형 처리 안됨

결국 4K 해상도 이미지를 원본 그대로 박아넣으니까 레이아웃이 개박살 난 거임

 

 

해결: 이미지 자동 리사이징 + 중앙정렬

코드를 수정해서 이미지 업로드할 때 자동으로 처리하게 만듦

추가한 기능

1. 자동 리사이징

def resize_image_for_wordpress(image_data, max_width=800):
    """
    이미지를 워드프레스에 맞게 리사이징
    """
    img = Image.open(io.BytesIO(image_data))
    
    # 가로가 max_width보다 크면 리사이징
    if img.width > max_width:
        ratio = max_width / img.width
        new_height = int(img.height * ratio)
        img = img.resize((max_width, new_height), Image.Resampling.LANCZOS)
    
    # 메모리에 저장
    output = io.BytesIO()
    img.save(output, format=img.format or 'JPEG', quality=85)
    output.seek(0)
    
    return output.getvalue()

2. 중앙정렬 + 반응형 처리

def format_image_html(image_url, alt_text=""):
    """
    이미지를 중앙정렬하고 반응형으로 만드는 HTML 생성
    """
    return f'''
    <figure style="text-align: center; margin: 20px 0;">
        <img src="{image_url}" 
             alt="{alt_text}" 
             style="max-width: 100%; height: auto; display: block; margin: 0 auto;" />
    </figure>
    '''

핵심 포인트

1. max-width: 100%: 부모 요소보다 절대 크지 않게
2. height: auto: 비율 유지하면서 자동 조절
3. margin: 0 auto: 중앙정렬
4. quality=85: 용량 최적화 (100%는 과함)

결과: 이제 진짜 자동화

수정 후 테스트해보니까:

• ✅ 이미지가 글 영역 안에 딱 맞게 들어감
• ✅ 자동으로 중앙정렬됨
• ✅ 모바일에서도 깔끔하게 보임
• ✅ 페이지 로딩 속도도 개선됨 (이미지 용량 줄어서)

이제 진짜 손 안 대도 됨

노션에서 글 쓰고 → 자동 발행 → 끝

더 이상 워드프레스 들어가서 이미지 일일이 수정 안 해도 됨

교훈

자동화 만들 때 "결과물이 사람이 직접 한 것과 똑같은지" 체크하는 게 중요함

API로 데이터만 넘기면 끝이 아니라, 실제 사용자 경험까지 고려해야 진짜 자동화임

특히 이미지 같은 미디어 처리는:

• 사이즈
• 정렬
• 반응형
• 최적화

다 신경 써줘야 함. 안 그러면 결국 수작업으로 돌아옴

코드 전체 흐름

# 1. 노션에서 이미지 URL 가져오기
notion_image_url = block['image']['file']['url']

# 2. 이미지 다운로드
response = requests.get(notion_image_url)
image_data = response.content

# 3. 리사이징
resized_image = resize_image_for_wordpress(image_data, max_width=800)

# 4. 워드프레스에 업로드
wordpress_url = upload_to_wordpress(resized_image, filename)

# 5. HTML 생성 (중앙정렬 + 반응형)
html = format_image_html(wordpress_url, alt_text="설명")

# 6. 본문에 삽입
content += html

이제 진짜 완벽한 자동 포스팅 파이프라인 완성!

 

테스트 해보니 이미지가 이전과 다르게 작게 정중앙 배열로 잘 들어간다.

아주 편- 안

---

비슷한 문제 겪는 사람들한테 도움 됐으면 좋겠다

궁금한 거 있으면 댓글로!

 

전체 코드 참조

전체 코드는 아래 깃 주소를 참조..

https://github.com/kangdanni/CICD_TEST.git

GitHub - kangdanni/CICD_TEST

 

원래는 티스토리에도 글을 자동으로 올릴 수 있게 하려고 코드는 반영해두었다.

그러나 티스토리가 최근에 API를 통한 포스팅 기능 지원을 멈추었다. 흑..

아무래도 자동 업로드는 AI로 글을 맘대로 포스팅할 수 있어서 그런걸까..?

동영상 업로드도 이제 지원을 멈추고……

이래저래 불편하구만 흠

 

 

 

근데 언제까지 티스토리에 일일이 글을 써야하는걸까?ㅠㅠ

이것도 자동화할 수 있는 법이 있을지 좀 고민해봐야겠다.

 

다음엔 워드프레스 이미지를 올릴 때 대표 이미지까지 자동 설정을 할 수 있을지 코드를 좀 업그레이드 해보아야겠다.

 

 

Github Acitons 설정은 아래 글을 참조

https://dangammtech.tistory.com/38

GitHub Actions로 소스코드 보안 자동화 하기 [2]- Github Actions 설정하는 방법