Bridgetown 웹사이트의 콘텐츠를 최적화하고 자동화하는 세 가지 주요 기법은 다음과 같습니다.
1. Vimeo 비디오 링크 자동 임베딩
수동으로 <iframe> 태그를 삽입하는 대신, Bridgetown의 SiteBuilder 훅을 활용하여 Markdown 소스 내의 Vimeo 링크를 자동으로 임베딩합니다. plugins/builders/vimeo_embeds.rb 파일에 정규식을 사용하여 <p>https://vimeo.com/([0-9]+)</p> 패턴을 Vimeo <iframe> 태그로 치환하는 로직을 구현합니다. 이는 개발자의 수고를 줄이고 다른 비디오 플랫폼에도 유사하게 적용 가능합니다.
2. 이미지 지연 로딩 (Lazy Images)
프론트엔드 성능 향상을 위해 이미지에 loading="lazy" 속성을 자동으로 추가합니다. 이를 위해 nokolexbor 젬 설치 및 html_inspector_parser "nokolexbor" 설정을 마친 후, plugins/builders/lazy_images.rb에 HTML 인스펙터 플러그인을 작성합니다. 이 플러그인은 main 요소 내의 모든 <img> 태그를 순회하며 loading 속성이 없는 경우 loading: :lazy를 설정하여 페이지 로딩 속도를 개선합니다.
3. Open Graph 이미지 자동 추출
Open Graph 미리보기 이미지를 수동으로 설정하는 과정을 자동화하여 개발 효율성을 높입니다. plugins/builders/image_extractions.rb 파일에 hook :posts, :pre_render 훅을 구현합니다. 이 훅은 정규식을 사용하여 리소스 콘텐츠 내의 Markdown 이미지(![]()) 또는 HTML 이미지(<img src="">)를 탐지하고, 유효한 이미지 URL을 resource.data.image 프론트 매터 변수에 할당합니다. 이 기법은 Markdown 및 기존 HTML 기반 콘텐츠 모두에 적용 가능하여 유연성을 제공합니다.