SEOJingCoverImage GenerationAutomationCodex

대표 이미지를 글마다 다시 붙이는 방식 — 사진 검색에서 리소그래프 배경까지

2026년 6월 21일9분 읽기

처음에는 글 제목을 넣은 이미지를 직접 만들려고 했다. 그런데 해보니 금방 한계가 보였다. 이미지 생성 모델이 한글 타이틀을 안정적으로 다루지 못했고, 로컬 후처리로 텍스트를 박아 넣으면 폰트 설치 상태에 따라 결과가 달라졌다.

그래서 방향을 바꿨다.

이미지는 배경만 만든다. 제목, 서브타이틀, SEOJing 아이콘, 검정 블러 오버레이는 블로그 카드 UI가 맡는다. 기존 파일 탐색기형 목록은 그대로 있으니, 새 카드 영역은 정보 탐색보다 분위기를 만드는 쪽으로 가도 된다.

이번에 바꾼 판단

대표 이미지 자동화의 순서를 이렇게 잡았다.

txt

글 제목 / 설명 / 태그
→ 검색 키워드 생성
→ 실제 사진 후보 검색
→ 미니멀한 사진을 점수화해서 선택
→ Codex image generation/edit으로 리소그래프 배경 변환
→ MDX cover frontmatter에 삽입
→ 카드 UI에서 hover 시 제목/블러/아이콘 표시

핵심은 "처음부터 도트 스타일 그림을 생성"하는 것이 아니었다. 그 방식은 그럴듯하지만 금방 추상 배경처럼 보였다. 원하는 감성은 실제 사진의 구도가 남아있는 상태에서, 그 사진을 리소그래프 인쇄물처럼 다시 해석할 때 더 잘 나왔다.

사진을 고르는 기준

좋은 사진을 고르는 게 아니라, 변환했을 때 좋은 포스터가 될 사진을 골라야 했다.

이번 필터는 대략 이런 점수를 봤다.

상단 35% 영역이 조용한가
전체 edge density가 너무 높지 않은가
색과 디테일이 과하게 많지 않은가
세로 4:5 크롭이 가능한가
단일 사물이나 큰 형태가 남아 있는가

반대로 이런 후보는 제외했다.

txt

logo, icon, diagram, chart, map, screenshot,
poster, infographic, presentation, slide,
collage, group, conference, meeting, people, portrait

사진 검색어도 그냥 글 키워드만 쓰지 않았다. close up, detail, macro, minimal, empty, single, isolated 같은 단어를 붙여서, 넓은 장면보다 사물 일부와 여백이 있는 사진을 우선했다.

#	date	post	source query	cover
1	2026-06-21	day11.mdx	`network switch close up`	`/images/content/study/agent-framework/day11/cover-riso.png`
2	2026-06-21	tts-local-api-r2-defer.mdx

이번에 바꾼 판단

사진을 고르는 기준

최신 20개 포스트에 먼저 적용

오케이징에게 물어보기

포스트 목록

같은 섹션의 대표 이미지

대표 이미지 자동화 실험 — 검색과 Codex 생성이 같은.

앞으로의 기본값

Evidence

대표 이미지를 글마다 다시 붙이는 방식 — 사진 검색에서.

Day 12 - 테스트 커버리지 개선, 모바일 프레젠테이션 버그 2건.

useEffect cleanup과 의존성 배열 — 실전 버그.

Day 11 - 프레젠테이션 확대 기능,.

vinext 오픈소스 기여기: 한국어 slug가 RSC에서.

vinext는 왜 빠를까? — SSR, Vite, Edge,.

100vh가 100%가 아닌 이유 — 모바일 뷰포트 단위 완전 정리.

Day 10 - 프레젠테이션 모드 안정화.

Day 9 - 프레젠테이션 모드, 코드블럭 개선, 테스팅.

모바일 웹에서 가로 모드를 강제하는 5가지 방법 — iOS.

블로그 글을 PPT로 만들기 — DOM 클로닝 기반.

Day 8 - 아티클 퀴즈와 스터디 자료.

Context로 퀴즈 컴포넌트를 만들다 막혀서.

Day 7 - Front Matter CMS와 관련 게시물.

Day 6 - 스터디 자료 작성과 데스크탑 비율 수정.

Day 5 - shiki 제거, MDX 모듈화, 그리고.

Day 4 - 배포와 CI/CD.

Cloudflare Workers에서 fs 모듈이 안 되는 이유와.

localStorage 읽기에서 하이드레이션 에러가 터지는 이유.

vinext + GitHub Actions로.

RSC 환경에서 WebAssembly가 차단되는 이유 —.

엄청난 피드백.

생각보다 어려웠던 댓글, 완독 로컬스토리지.

MDX 관련 이슈 노트.

Day 3 - MDX 이슈, 반응형, 다크모드.

디자인 시스템을 구축할 때 주의할 점.

폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?.

MDX DOM 트리 파싱하기.

결국 Node.js 까지 와버렸다.

Day 2 - 블로그 스켈레톤과 MDX 파싱.

전체적인 플로우.

Storybook으로 디자인 시스템 테스팅하기.

MDX가 뭘까?.

Day 1 - 디자인 컨셉과 디자인 시스템.

기술 블로그를 직접 제작하게 된 이유.

왜 자꾸 프로젝트가 중단되는지.