피드로 돌아가기
Dev.toBackend
원문 읽기
Figma 파일 5개를 HTML Renderer로 대체하여 브랜드 업데이트 시간을 3주에서 5분으로 단축
Replacing five Figma files with one HTML renderer for our content brand
AI 요약
Context
다양한 이미지 포맷(Blog Hero, Quote Card 등)마다 개별 Figma 파일을 운영하며 발생한 디자인 파편화 및 유지보수 비용 증가. 브랜드 리프레시 발생 시 300개 이상의 아카이브 이미지를 수동으로 재생성해야 하는 운영 병목 발생.
Technical Solution
- Blade view와 CSS partial을 조합한 HTML 기반 이미지 템플릿 구조 설계
- HTML2Img API를 활용하여 HTML 렌더링 결과물을 PNG 파일로 변환하는 자동화 파이프라인 구축
- CSS Variable을 통한 브랜드 자산의 중앙 집중화로 단일 지점에서의 스타일 제어 구현
- Cache Key에 버전 필드(_v)를 포함하여 브랜드 변경 시 전체 이미지의 즉각적인 무효화 및 재생성 트리거 설계
- 외부 API 의존성 제거를 위해 렌더링된 바이트 데이터를 S3에 직접 저장하고 자체 CDN으로 서빙하는 영속성 계층 확보
- 데이터 배열의 ksort 처리를 통해 동일 데이터에 대한 해시 일관성을 보장하고 불필요한 API 호출 방지
실천 포인트
1. 반복적인 이미지 생성 작업이 존재하는지 확인하고 HTML 템플릿으로 대체 가능한지 검토
2. 전역 스타일 변경을 위해 CSS Variable 기반의 중앙 집중식 테마 관리 체계 도입
3. 외부 렌더링 API 사용 시 원본 URL 대신 직접 바이트를 내려받아 자체 스토리지에 저장하는 전략 채택
4. 캐시 키 생성 시 데이터 정렬(ksort)을 통해 결정론적 해시 값 생성 보장