피드로 돌아가기
Dev.toFrontend
원문 읽기
Playwright 기반 스크린샷 자동화로 30초 내 5종의 고품질 마케팅 에셋 생성
How I Automated Firefox Extension Screenshots for AMO Listings
AI 요약
Context
AMO 배포 시 요구되는 엄격한 해상도 규격과 일관된 UI 품질 유지의 어려움 발생. 수동 캡처 방식에 따른 환경 의존적 결과물과 반복적인 작업 공수가 주요 병목 지점으로 작용.
Technical Solution
- Playwright 기반의 Headless Browser 제어를 통한 1280x800 고정 Viewport 환경 구축
- API Interception 기능을 활용한 Weather API Mocking으로 외부 데이터 의존성 제거 및 시각적 일관성 확보
- LocalStorage 조작 및 Page Reload 로직을 통한 다중 테마(Light/Dark) 및 시나리오별 자동 렌더링 설계
- 플랫폼별(AMO, Chrome, ProductHunt) 서로 다른 Viewport 설정을 매핑한 멀티 타겟 캡처 파이프라인 구성
- Sharp 라이브러리를 활용한 후처리 프로세스로 이미지 Border 추가 및 시각적 완성도 향상
- package.json 스크립트 통합을 통한 Build 단계 내 스크린샷 생성 공정 자동화
Impact
- 30초 미만의 시간으로 5종의 정제된 스크린샷 생성 완료
- 릴리스 주기마다 UI 변경 사항을 즉각 반영하는 일관된 재생성 환경 구축
Key Takeaway
마케팅 에셋 생성과 같은 단순 반복 작업도 API Mocking과 브라우저 자동화를 결합하여 결정론적(Deterministic)인 파이프라인으로 구축 가능함.
실천 포인트
1. 외부 API 의존성이 있는 UI 캡처 시 `page.route`를 통한 Mocking 적용 여부 검토
2. 플랫폼별 해상도 요구사항을 객체 형태로 관리하여 확장 가능한 Viewport 전략 수립
3. 단순 캡처를 넘어 Sharp와 같은 이미지 처리 라이브러리로 후처리 공정 자동화 고려
4. CI/CD 또는 Build 스크립트에 통합하여 수동 작업 개입 가능성 원천 차단