지난 주 AppSignal 업데이트에는 모든 화면에 대한 업데이트된 인터페이스 디자인이 포함되었습니다. 즉, 앱의 현재 상태를 반영하도록 홈페이지의 모든 스크린샷을 업데이트해야 했습니다. 막대한 양의 수작업을 줄이기 위해 프로세스를 자동화하기로 결정했습니다.
운 좋게도 우리는 곧 Selenium이 스크린샷을 찍을 수 있다는 것을 기억했습니다. 우리는 이미 기능 테스트를 위해 Capybara를 통해 Selenium을 상당히 많이 사용하고 있으므로 이것이 새로운 움직이는 부품을 도입하지 않고 작업을 자동화하는 방법이 될 수 있는지 조사하기 시작했습니다. 고민 끝에 우리 계획이 실현 가능하다는 것을 알게 되었습니다.
스크린샷을 찍는 API는 간단합니다. 브라우저 창을 원하는 크기로 설정하고 페이지를 방문하여 스크린샷을 찍으면 됩니다.
require 'capybara'
Capybara.default_driver = :selenium
page.driver.browser.manage.window.resize_to(1600, 1200)
visit 'https://appsignal.com'
page.save_screenshot(file)그러면 지정된 위치에 png 파일이 생성됩니다. 하지만 Retina 스크린샷을 찍고 싶다면 주의해야 할 사항이 있습니다. Chrome 드라이버는 Retina 스크린샷을 생성하지만 보이는 영역만 촬영합니다. 반면에 Firefox 드라이버는 전체 페이지를 촬영하지만 Retina 해상도에서는 촬영하지 않습니다. 그리고 우리 팀의 모든 사람이 Retina 화면을 사용하는 것은 아니므로 스크린샷을 업데이트할 수 없습니다.
몇 가지 검색 후, 우리는 thisGistby chrism에서 문제에 대한 해결책을 찾았습니다. 이 멋진 핵을 사용하여 Firefox가 스크린샷을 찍기 직전에 페이지를 일반 크기의 두 배로 부풀리도록 합니다.
page.driver.execute_script('
body = document.getElementsByTagName("body")[0];
body.style["transform-origin"] = "top left";
body.style["transform"] = "scale(2)";
')
전체 페이지의 Retina 스크린샷이 완료되면 다음 단계는 convert를 사용하여 원하는 치수로 자르는 것입니다. ImageMagick에 포함된 CLI 도구:
`convert #{file} -crop #{1600 * 2}x#{ 800 * 2}+0+0 #{to_file}`
ImageMagick은 이것이 Retina 이미지인지 알지 못하기 때문에 치수를 두 배로 늘려야 합니다. 그것은 단지 3200x1600px로 간주합니다. to_file 자산 폴더의 파일을 직접 가리킵니다.
마지막으로 pngquant를 사용하여 파일을 최적화합니다. 일반적인 스크린샷의 범위는 220kB에서 250kB이므로 크기를 확실히 최소화해야 합니다.
`pngquant --force --output #{to_file} #{to_file}`그게 다야. 디자인을 변경할 때마다 다시 실행할 수 있는 이러한 명령을 기반으로 Rakefile을 작성했습니다. 여기에서 전체 코드가 포함된 요지를 찾을 수 있습니다.
이 프로세스를 자동화하는 것은 이미 성과를 거두었으며 미래에도 제정신을 유지할 것입니다. 지금은 Tour 및 다른 곳에서 Retina의 영광을 누리는 결과 이미지를 즐기십시오!