피드로 돌아가기
Dev.toBackend
원문 읽기
HTML Template Variables 도입을 통한 OG 이미지 렌더링 효율화 및 관리 비용 절감
Stop Hardcoding HTML for Every Image — Use Template Variables Instead
AI 요약
Context
클라이언트 측의 단순 String Interpolation 기반 HTML 생성 방식으로 인한 특수 문자 처리 오류 발생 및 디자인-데이터 간 결합도 증가 문제. 템플릿 복잡도 상승에 따른 유지보수 효율 저하와 환경별 템플릿 재사용의 어려움 직면.
Technical Solution
- HTML 구조와 데이터 주입 시점을 분리한 Template Variable 아키텍처 채택
- Render-time에 Placeholder({{variable}})를 실제 값으로 치환하는 Find-and-Replace 로직 적용
- 데이터 누락 시 에러 발생 없이 Placeholder를 유지하는 Non-breaking 처리로 시스템 안정성 확보
- HTML 템플릿을 외부 파일, 환경 변수, DB 필드로 추상화하여 설계 유연성 증대
- 단일 템플릿과 다수의 Variable Object를 결합한 Batch Rendering 인터페이스 설계
- 반복적인 HTML 문자열 생성 과정을 단일 API 요청으로 최적화하여 네트워크 오버헤드 감소
실천 포인트
- 정적 디자인과 동적 데이터가 결합된 이미지 생성 시 Template Variable 패턴 검토 - HTML String Interpolation 대신 데이터 분리 전송 방식을 통한 XSS 및 특수 문자 렌더링 이슈 해결 - 다량의 유사 이미지 생성 필요 시 Batch API 설계를 통한 HTTP Request 횟수 최적화