LogoSEO Jing
  • All Posts
  • SEO Jing
  • okayJing
  • KD Team
  • CLAB Coreteam
  • Study

Contact Me

© 2026 SEOJing. All rights reserved.

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 같은 단어를 붙여서, 넓은 장면보다 사물 일부와 여백이 있는 사진을 우선했다.

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

이번 실험에서는 전체 포스트 중 최신 20개만 대상으로 잡았다. 모든 옛글까지 한 번에 덮으면 검수 비용이 커지고, 커버 스타일이 아직 확정되지 않은 상태에서 되돌리기도 어렵기 때문이다.

아래 이미지는 이번에 만든 최신 20개 커버 배경의 접촉시트다. 실제 카드에서는 이 이미지들 위에 제목이 박혀 있지 않고, hover 시 블로그 UI가 검정 블러와 흰색 제목을 얹는 구조로 가는 것이 맞다.

최신 20개 리소그래프 커버 배경 접촉시트

#datepostsource querycover
12026-06-21day11.mdxnetwork switch close up/images/content/study/agent-framework/day11/cover-riso.png
22026-06-21tts-local-api-r2-defer.mdxarchive boxes detail/images/content/okayjing/voice/tts-local-api-r2-defer/cover-riso.png
32026-06-21skill-supply-chain-guardrail.mdxnetwork switch close up/images/content/okayjing/skills/skill-supply-chain-guardrail/cover-riso.png
42026-06-21external-agent-skills-absorption.mdxhard drive close up/images/content/okayjing/skills/external-agent-skills-absorption/cover-riso.png
52026-06-21graphify-derived-metadata.mdxlibrary shelves detail/images/content/okayjing/memory/graphify-derived-metadata/cover-riso.png
62026-06-21gemma4-router-fixture-evaluation.mdxarchive boxes detail/images/content/okayjing/memory/gemma4-router-fixture-evaluation/cover-riso.png
72026-06-21source-resource-api-boundary.mdxaudio cable close up/images/content/okayjing/architecture/source-resource-api-boundary/cover-riso.png
82026-06-21pixel-office-worker-space.mdxpaper texture close up/images/content/okayjing/architecture/pixel-office-worker-space/cover-riso.png
92026-06-21okayjing-local-discord-replacement-criteria.mdxarchive boxes detail/images/content/okayjing/architecture/okayjing-local-discord-replacement-criteria/cover-riso.png
102026-06-21local-evidence-router-boundary.mdxhard drive close up/images/content/okayjing/architecture/local-evidence-router-boundary/cover-riso.png
112026-06-21hermes-only-hub-spoke.mdxpaper texture close up/images/content/okayjing/architecture/hermes-only-hub-spoke/cover-riso.png
122026-06-21repo-local-skill-pack-harness.mdxkeyboard close up computer/images/content/clab/repo-local-skill-pack-harness/cover-riso.png
132026-06-21cover-automation-codex-test.mdxkeyboard close up computer/images/content/seojing/cover-automation-codex-test/cover-riso.png
142026-06-20day10.mdxkeyboard close up computer/images/content/study/agent-framework/day10/cover-riso.png
152026-06-20technical-map.mdxnetwork switch close up/images/content/okayjing/technical-map/cover-riso.png
162026-06-20skill-quality-rubric.mdxkeyboard close up computer/images/content/clab/insight-analysis/skill-quality-rubric/cover-riso.png
172026-06-20project-automation-with-ai.mdxethernet cable close up/images/content/clab/insight-analysis/project-automation-with-ai/cover-riso.png
182026-06-20playwright-e2e-harness.mdxlaptop keyboard detail/images/content/clab/insight-analysis/playwright-e2e-harness/cover-riso.png
192026-06-20ai-code-review-adoption.mdxlaptop keyboard detail/images/content/clab/insight-analysis/ai-code-review-adoption/cover-riso.png
202026-06-19day9.mdxlock close up minimal/images/content/study/agent-framework/day9/cover-riso.png

앞으로의 기본값

앞으로 새 글을 만들 때는 커버를 본문 작성의 마지막 장식으로 보지 않기로 했다. 글 제목, 설명, 태그가 정리되면 곧바로 배경 후보를 검색하고, 미니멀한 실제 사진을 골라 리소그래프 배경으로 변환한다.

카드에서 타이틀은 이미지 안에 굽지 않는다. 블로그 기능으로 처리한다.

txt
기본 상태: 배경 이미지만 조용히 보임
hover 상태: 상단 검정 블러가 내려오고, 흰색 제목/설명/SEOJing 아이콘이 등장

이렇게 하면 폰트 문제도 줄고, 제목을 고칠 때 이미지를 다시 만들 필요도 없다. 이미지 생성은 이미지다운 일만 하고, 블로그 UI는 UI다운 일을 맡는 쪽이 오래 간다.

Evidence

  • 최신 20개 포스트 MDX에 cover frontmatter 추가
  • 커버 이미지 저장 위치: apps/web/public/images/content/**/cover-riso.png
  • 접촉시트: /images/content/seojing/riso-cover-pipeline/latest20-riso-contact-sheet.png
  • 생성 경로: Wikimedia Commons 후보 검색 → 미니멀 점수 필터링 → Codex image generation/edit 리소그래프 변환

Post Q&A

오케이징에게 물어보기

대표 이미지를 글마다 다시 붙이는 방식 — 사진 검색에서 리소그래프 배경까지 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!

0/500

포스트 목록

/SEOJing
파일 15개, 폴더 1개
Cloudflare Workers에서 fs 모듈이 안 되는 이유와 해결법대표 이미지 자동화 실험 — 검색과 Codex 생성이 같은 경로로 붙었다본문 이미지를 나중에 넣는 게 아니라 — SEOJing 글쓰기 파이프라인에 시각 판단을 넣기모바일 웹에서 가로 모드를 강제하는 5가지 방법 — iOS Safari에서도 동작하는 코드 뷰어 만들기블로그 글을 PPT로 만들기 — DOM 클로닝 기반 프레젠테이션 모드100vh가 100%가 아닌 이유 — 모바일 뷰포트 단위 완전 정리Context로 퀴즈 컴포넌트를 만들다 막혀서 React.Children을 공부하게 된 이야기대표 이미지를 글마다 다시 붙이는 방식 — 사진 검색에서 리소그래프 배경까지글 위에 영상을 붙인다는 것 — SEOJing 요약 쇼츠 파이프라인localStorage 읽기에서 하이드레이션 에러가 터지는 이유 useSyncExternalStore로 해결useEffect cleanup과 의존성 배열 — 실전 버그 사례로 이해하는 생애주기vinext + GitHub Actions로 Cloudflare Workers 배포하기vinext 오픈소스 기여기: 한국어 slug가 RSC에서 이슈를 일으킨 이유RSC 환경에서 WebAssembly가 차단되는 이유 — Shiki에서 rehype-prism-plus로vinext는 왜 빠를까? — SSR, Vite, Edge, 그리고 Web Vitals까지

같은 섹션의 대표 이미지

39 posts · latest first
본문 이미지를 나중에 넣는 게 아니라 — SEOJing 글쓰기 파이프라인에 시각 판단을 넣기 글의 대표 이미지
SEO Jing26. 06. 22.

본문 이미지를 나중에 넣는 게 아니라 — SEOJing 글쓰기.

SEOJing에서 새 글을 쓸 때 대표 이미지와 본문 이미지를 빼먹지 않도록, 블로그 맵과 글쓰기 파이프라인 안에 시각 판단 단계를 넣은 과정을 정리했다.

26. 06. 22.SEOJing
SEO Jing26. 06. 22.

글 위에 영상을 붙인다는 것 — SEOJing 요약.

SEOJing 글을 소셜용 영상으로 따로 소비시키는 게 아니라, 포스트 상단 요약과 블로그 유입 장치로 연결하기 위해 summaryVideo frontmatter와 Supertonic3 기반 요약 쇼츠 파이프라인을 붙인 과정을 정리했다.

26. 06. 22.SEOJing
대표 이미지 자동화 실험 — 검색과 Codex 생성이 같은 경로로 붙었다 글의 리소그래프 스타일 대표 이미지 배경
SEO Jing26. 06. 21.

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

SEOJing 블로그에 대표 이미지를 자동으로 붙이는 실험을 실제로 돌려봤다. 검색 기반 cover 삽입과 Codex CLI 기반 정적 SVG 생성이 같은 frontmatter 경로로 연결됐다.

26. 06. 21.SEOJing
대표 이미지를 글마다 다시 붙이는 방식 글의 리소그래프 스타일 대표 이미지 배경
SEO Jing26. 06. 21.

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

SEOJing 포스트 목록을 파일 탐색기처럼만 두지 않고, 최신 글부터 실제 사진 기반 리소그래프 배경을 붙이는 실험을 정리합니다. 이미지는 배경만 만들고, 제목과 아이콘은 블로그 UI가 맡는 쪽으로 방향을 바꿨습니다.

26. 06. 21.SEOJing
SEO Jing26. 04. 01.

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

SEO Jing 개발 열두째 날. code-block 테스트 14개 추가로 커버리지 대폭 개선, 모바일 프레젠테이션에서 FullscreenView 방향 전환 문제와 스크롤 멈춤 버그 수정.

26. 04. 01.SEOJing
SEO Jing26. 04. 01.

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

useEffect 의존성 배열에 불필요한 값이 포함되면 cleanup과 재실행이 뒤엉켜 DOM 상태가 꼬일 수 있다. 프레젠테이션 모드에서 발생한 모바일 스크롤 고착 버그를 통해 원인과 해결 패턴을 정리한다.

26. 04. 01.SEOJing
SEO Jing26. 03. 25.

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

SEO Jing 개발 열한째 날. PC 프레젠테이션 확대/축소 컨트롤 추가, 모바일 orientation 판단 로직 개선, FullscreenView를 독립 컴포넌트로 분리 및 PC 대응.

26. 03. 25.SEOJing
SEO Jing26. 03. 25.

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

한국어 MDX 블로그를 만들다 vinext 프레임워크의 ByteString 버그를 발견하고, 이슈를 작성하고, PR을 올리기까지의 과정

26. 03. 25.SEOJing
SEO Jing26. 03. 25.

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

vinext가 빠른 이유를 이해하기 위해, SSR부터 Hydration, 빌드 도구, Edge Runtime, Web Vitals, RSC, CDN 캐싱, ISR, PPR까지 웹 렌더링 성능의 전체 그림을 정리한다

26. 03. 25.SEOJing
SEO Jing26. 03. 24.

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

모바일 Safari에서 100vh가 화면을 넘치는 이유, vh/svh/lvh/dvh의 차이, JavaScript에서 실제 뷰포트를 구하는 방법, 그리고 전체화면 UI를 만들 때 알아야 할 CSS zoom과 모바일 판정 패턴까지 정리한다.

26. 03. 24.SEOJing
SEO Jing26. 03. 23.

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

SEO Jing 개발 열째 날. 프레젠테이션 모드의 모바일 UX 문제들을 전면 수정. 퀴즈·코드블록·이미지·포스트목록 처리 개선, 롱프레스 UX 및 하단 바 레이아웃 안정화. 모바일 뷰포트·리스트 분할 문제 수정, 채움 비율 보수적으로 조정, 포스트 탐색기 자연 정렬 적용.

26. 03. 23.SEOJing
SEO Jing26. 03. 22.

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

SEO Jing 개발 아홉째 날. 프레젠테이션 기능 추가, 퀴즈 구조 변경, 모바일 반응형, 코드블럭 사용성, 테스팅 도입.

26. 03. 22.SEOJing
SEO Jing26. 03. 22.

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

모바일 웹에서 코드 블록을 가로로 넓게 보여주고 싶었다. screen.orientation.lock()은 iOS에서 안 되고, PWA manifest는 브라우저에서 무시된다. 결국 CSS transform으로 가짜 회전을 만들었고, 그 과정에서 엄지 접근성까지 고민하게 됐다.

26. 03. 22.SEOJing
SEO Jing26. 03. 22.

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

MDX 파일을 수정하지 않고, 렌더된 DOM을 h2 기준으로 자르고 화면 높이에 맞춰 자동 페이지네이션하는 프레젠테이션 모드를 만들었다. 리스트 높이 측정이 왜 틀리는지 디버깅한 과정과, ul/ol을 li 단위로 분할하는 해결책을 정리한다.

26. 03. 22.SEOJing
SEO Jing26. 03. 21.

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

SEO Jing 개발 여덟째 날. 아티클 퀴즈 디자인시스템 구현과 스터디 대면 자료 작성.

26. 03. 21.SEOJing
SEO Jing26. 03. 21.

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

MDX 블로그에 퀴즈 컴포넌트를 만들면서, Context 기반 Compound Component로 시작했다가 index 문제에 막혀 React.Children API를 채택하게 된 과정을 정리한다.

26. 03. 21.SEOJing
SEO Jing26. 03. 20.

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

SEO Jing 개발 일곱째 날. Front Matter CMS 설치와 관련 게시물 이동 탐색기 구현.

26. 03. 20.SEOJing
SEO Jing26. 03. 18.

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

SEO Jing 개발 여섯째 날. 데스크탑 비율 수정과 씨랩 스터디 사전 진단 자료 작성.

26. 03. 18.SEOJing
SEO Jing26. 03. 17.

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

SEO Jing 개발 다섯째 날. shiki를 rehype-prism-plus로 교체하고, gray-matter 직접 구현, MDX 모듈화, 페이지 내 검색, 테이블 디자인시스템까지.

26. 03. 17.SEOJing
SEO Jing26. 03. 16.

Day 4 - 배포와 CI/CD.

SEO Jing 개발 넷째 날. lint, codecov, Cloudflare 배포, fs 런타임 이슈.

26. 03. 16.SEOJing
SEO Jing26. 03. 16.

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

배포 후 블로그 포스트가 404를 반환하던 문제부터, gray-matter eval 차단, next-mdx-remote eval 차단까지 — 세 겹으로 터진 이슈를 하나씩 해결한 기록

26. 03. 16.SEOJing
SEO Jing26. 03. 16.

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

localStorage를 읽는 컴포넌트에서 하이드레이션 불일치가 발생하는 원인과, useState+useEffect가 아닌 useSyncExternalStore가 정답인 이유를 정리한다.

26. 03. 16.SEOJing
SEO Jing26. 03. 16.

vinext + GitHub Actions로.

vinext 프로젝트를 GitHub Actions로 Cloudflare Workers에 자동 배포하는 방법과 실제 겪은 트러블슈팅 기록

26. 03. 16.SEOJing
SEO Jing26. 03. 16.

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

코드 하이라이팅에 Shiki를 쓰면 왜 RSC에서 WebAssembly.instantiate() 에러가 터지는지, 그리고 빌드 타임 하이라이팅으로 어떻게 해결했는지 정리한다.

26. 03. 16.SEOJing
SEO Jing26. 03. 15.

엄청난 피드백.

CLI 코드 리뷰에서 받은 피드백과 전체 코드 수정 계획을 정리했다.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

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

localStorage만으로 글 읽기 추적, 스크롤 진행률, 댓글 감지를 구현한 과정을 정리했다.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

MDX 관련 이슈 노트.

블로그 디테일 페이지에서 MDX를 렌더링하기 위해 검토한 라이브러리들과 최종 선택 과정.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

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

SEO Jing 개발 셋째 날. MDX 라이브러리 이슈, 반응형, 코드블럭, 댓글, 다크모드, 코드 리뷰.

26. 03. 15.SEOJing
SEO Jing26. 03. 14.

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

디자인 시스템 구현 시 파일 구조, 디자인 토큰, 유의 사항을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

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

Tailwind v4 환경에서 폰트가 메인 페이지에서만 적용되지 않던 원인과 Hydration Mismatch 이슈를 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

MDX DOM 트리 파싱하기.

MDX 파일의 경로 탐색 로직과 콘텐츠 트리 생성 과정을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

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

MDX 파일 구조를 JSON으로 변환하기 위해 Node.js의 fs 모듈을 배워봤다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

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

SEO Jing 개발 둘째 날. 디자인 시스템 확장, 블로그 스켈레톤, 폰트 이슈 해결.

26. 03. 14.SEOJing
SEO Jing26. 03. 13.

전체적인 플로우.

SEO Jing 프로젝트의 기술 스택 선정과 전체적인 개발 플로우 정리.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

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

Storybook의 사용법과 디자인 시스템 개발에서의 장점을 정리했다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

MDX가 뭘까?.

MDX의 개념과 블로그에서 활용하는 이유를 정리했다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

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

SEO Jing 개발 첫째 날. 디자인 컨셉 설정과 디자인 시스템 구축을 시작했다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

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

SEO Jing을 개발하게 된 이유입니다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

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

프로젝트가 중단되는 이유에 대한 자기 회고입니다.

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