Rails 애플리케이션에서 Open Graph 이미지를 생성하는 두 가지 주요 접근 방식과 그 구현 과정을 설명합니다. 먼저, 애플리케이션 설정으로 Rails 프로젝트 생성, Avo Admin 설치, Active Storage 설정, Article 모델 생성 및 관련 필드 추가 과정을 다룹니다. 이어서 Satoshi 폰트를 포함한 필요한 자산을 준비합니다.
MiniMagick 활용 Open Graph 이미지 생성
MiniMagick은 ImageMagick 라이브러리와 상호작용하는 Ruby Gem으로, 이미지 조작에 강력하지만 CSS를 사용할 수 없어 레이아웃 구현이 다소 복잡합니다. 구현 단계는 다음과 같습니다:
-
기본 이미지 생성: 1200x630px 크기의 PNG 이미지에 파란색 그라데이션 배경을 생성합니다.
-
노이즈 오버레이 추가:
bit-noise.png이미지를 그라데이션 위에 합성하여 질감을 더합니다. -
로고 추가: Avo 로고를 이미지 좌측 상단에 배치합니다.
-
제목 텍스트 추가:
wrap_text메서드를 사용하여 긴 제목을 여러 줄로 나누고, 지정된 폰트와 크기로 중앙에 배치합니다. -
도메인 및 저자 정보 추가: 이미지 하단에 저자 아바타, 저자 이름, 도메인 텍스트를 배치합니다.
-
자동화:
OgImageGenerator클래스를 통해 이미지를 생성하고,AttachImageToArticleJob및CreateOgImageJob을 사용하여 Active Storage에 이미지를 첨부하며, Article 모델의 콜백을 통해 자동 생성 과정을 구현합니다.
Ferrum 활용 Open Graph 이미지 생성
Ferrum은 헤드리스 브라우저(Chrome/Chromium)를 제어하는 Ruby Gem으로, HTML/CSS를 활용하여 이미지를 렌더링하고 스크린샷을 찍어 유연하게 이미지를 생성할 수 있습니다. 이는 CSS 친숙성을 제공하지만 Chrome/Chromium 설치가 필요하다는 단점이 있습니다. 구현 단계는 다음과 같습니다:
-
Ferrum Gem 설치: 프로젝트에 Ferrum Gem을 추가합니다.
-
컨트롤러 및 뷰 생성:
ArticlesController에show및og_image액션을 정의하고,og_image.html.erb뷰 파일에 Tailwind CSS를 활용하여 OG 이미지 디자인을 구현합니다. -
스크린샷 생성: Ferrum 브라우저를 초기화하고, 원하는 크기로 조정한 후,
og_image뷰 URL을 방문하여 스크린샷을 찍습니다. -
자동화:
OgImageFerrumJob을 생성하여 스크린샷 생성, Active Storage 첨부, 임시 파일 삭제 과정을 자동화하고, Article 모델의 콜백을 통해 이미지 생성 및 업데이트 시 작업을 트리거합니다.
Open Graph 태그 추가
마지막으로 meta-tags Gem을 사용하여 생성된 OG 이미지를 웹페이지의 메타 태그로 추가합니다. application.html.erb 레이아웃에 display_meta_tags를 포함하고, ArticlesController에서 set_meta_tags를 사용하여 OG 이미지 URL을 포함한 다양한 메타 정보를 동적으로 설정합니다. 이를 통해 소셜 미디어 공유 시 원하는 방식으로 콘텐츠가 표시되도록 보장합니다.