Social
소셜 이미지 자동 생성 API
🔗 social.hada.io
Social은 웹 페이지의 OpenGraph와 Twitter Card에 사용되는 소셜 이미지를 동적으로 만들어주는 서비스입니다. 간단한 API 호출만으로 각 페이지에 어울리는 썸네일 이미지를 자동 생성하고, 캐싱된 이미지를 곧바로 제공받을 수 있습니다.
OpenGraph images
공유되는 순간까지 페이지를 디자인합니다
Social은 글 제목과 서비스 정보를 받아 OpenGraph 이미지를 동적으로 생성합니다. GeekNews와 hada.io의 페이지들이 공유될 때 같은 품질의 미리보기를 갖도록 만든 내부 도구에서 시작했습니다.
social.news.hada.io/index.png 왜 만들었나요
좋은 콘텐츠를 만들어도, 링크를 공유했을 때 보여지는 미리보기 이미지가 초라하면 클릭률이 급격히 떨어집니다. 페이스북, 트위터(X), 슬랙, 디스코드, 카카오톡 등 거의 모든 소셜 채널이 OpenGraph 또는 Twitter Card 스펙을 기반으로 미리보기를 생성하기 때문입니다.
문제는 이 이미지를 매 페이지마다 수작업으로 만드는 것은 현실적으로 불가능하다는 점입니다. 블로그 글, 뉴스 기사, 제품 상세, 사용자 프로필... 페이지 수가 조금만 늘어나도 감당이 안 됩니다.
GeekNews를 운영하면서도 같은 고민이 있었습니다. 하루 수십 개의 뉴스가 올라오는 사이트에서, 어떻게 각각에 어울리는 소셜 이미지를 효율적으로 생성할 수 있을까? 이 문제를 푸는 과정에서 만든 내부 도구가 Social의 시작이었습니다.
어떻게 동작하나요
og:image 태그에 Social URL을 넣고 제목, 부제, 로고 같은 값을 쿼리 스트링으로 전달합니다.
요청이 들어오면 템플릿에 텍스트와 이미지를 조합해 PNG 파일을 생성합니다.
한 번 생성된 이미지는 캐싱되어 여러 플랫폼에서 반복 요청되어도 빠르게 전달됩니다.
프로젝트별 로고, 서브 타이틀 위치, 글꼴, 배경 색상을 지정할 수 있습니다.
어디에 쓰이고 있나요
Social은 이미 실제로 꾸준히 쓰이고 있는 프로덕션 서비스입니다.
- GeekNews (news.hada.io): 매일 수십 개의 뉴스가 올라오는 사이트에서, 각 글의 소셜 이미지를 모두 Social을 통해 생성합니다.
- Fairy (fairy.hada.io): 프로젝트 페이지의 오픈그래프 이미지 자동 생성.
- 오늘의 글쓰기 (write.hada.io): 서비스 소개 페이지의 오픈그래프 이미지.
- hada.io: 회사 사이트의 모든 페이지.
한마디로, 하다 스튜디오가 운영하는 모든 서비스가 Social 위에서 돌고 있습니다. 스스로의 프로덕션 부하를 오랫동안 버텨온 셈이라, 외부 사용에도 안정적으로 대응할 수 있다고 자신합니다.
기술 스택과 설계 원칙
Social은 다음과 같은 원칙을 지켜가며 설계·운영되고 있습니다.
- 동적 생성 + 캐싱: 페이지 수와 상관없이 비용이 선형적으로 늘지 않도록.
- 안전한 입력 처리: 쿼리 파라미터로 들어오는 텍스트를 이미지에 안전하게 렌더링.
- 빠른 응답: 첫 요청조차 체감 속도에 영향이 없도록 최적화.
- 장애 대응: Social이 잠깐 장애가 나더라도 원본 페이지는 정상 동작하도록.
앞으로
현재 Social은 주로 하다 스튜디오의 내부 서비스를 위해 쓰이고 있지만, 외부 개발자와 스타트업도 활용할 수 있도록 점진적으로 공개 API를 정비해 나갈 계획입니다. 관심 있는 분은 contact@hada.io로 문의 주시면, 준비된 부분부터 안내해 드리겠습니다.