자동 업데이트되는 스크린샷 시스템 개발
원제: Self-updating screenshots
왜 중요한가
문서화 자동화 도구의 혁신사례로, 개발팀의 생산성 향상과 사용자 경험 개선에 기여할 수 있는 기술이다.
개발자 James Adam이 웹 애플리케이션 Jelly의 도움말 센터를 위해 UI 변경 시 스크린샷을 자동으로 업데이트하는 시스템을 구축했다고 발표했다. Markdown 파일에 특수 주석을 삽입하면 헤드리스 Chrome을 통해 자동으로 스크린샷을 캡처하고 갱신한다.
웹 애플리케이션 문서화 시 가장 큰 문제 중 하나인 스크린샷 관리 문제를 해결하는 혁신적인 시스템이 개발됐다. Jelly 애플리케이션의 도움말 센터는 UI가 변경될 때마다 스크린샷이 자동으로 업데이트되는 빌드 시스템을 도입했다.
이 시스템은 Markdown 파일에 '<!-- SCREENSHOT: acme-tools/inbox | element | selector=#inbox-brand-new-section -->' 형태의 HTML 주석을 삽입하면, Rake 작업이 헤드리스 Chrome 브라우저를 통해 해당 페이지를 방문하고 지정된 DOM 요소의 스크린샷을 자동으로 캡처한다.
캡처 모드는 특정 DOM 요소(element), 전체 페이지(full_page), 브라우저 뷰포트(viewport) 세 가지를 지원한다. 또한 버튼 클릭 후 상태 캡처를 위한 'click' 옵션, 애니메이션 대기를 위한 'wait' 옵션, 특정 영역 자르기를 위한 'crop' 옵션 등 다양한 기능을 제공한다.
전체 파이프라인은 'rails manual:build' 명령어 하나로 실행되며, UI 변경 후 이 명령어를 실행하면 모든 스크린샷이 자동으로 업데이트된다. 이를 통해 수동 작업 없이 문서와 코드를 동기화할 수 있어 개발 효율성이 크게 향상됐다.