반응형 웹사이트란 무엇일까요? 최소한 어떤 브라우저, 기기, 운영체제에서든 올바르게 표시되어야 합니다. 즉, 다양한 플랫폼, 브라우저, 화면 해상도를 사용하는 수많은 사용자의 환경까지 모두 고려해야 하죠. 이런 문제를 해결하려면 기업은 수천 대의 실제·가상 기기에서 웹사이트를 테스트해야 합니다. 하지만 그만한 예산이 없다면 이른바 '크로스 브라우저 테스트 솔루션'이 필요합니다.
Comparium은 사이트 버전 간의 '가장 미세한 차이까지 보여준다'고 스스로를 소개하는 자동 시각 테스트 서비스입니다. 버지니아주 알렉산드리아에 위치한 Electronic Team, Inc.의 제품으로, 이번 리뷰에서는 Comparium의 핵심 기능과 커스터마이징 옵션을 자세히 살펴보겠습니다.
참고: 본 글은 Electronic Team, Inc.의 Comparium이 후원한 스폰서 아티클입니다. 실제 내용과 의견은 후원 여부와 관계없이 편집 독립성을 유지하는 저자 개인의 견해임을 밝힙니다.
계정 및 웹 앱 상세 정보
공식 웹사이트에서 계정을 만들어 바로 로그인할 수 있으며, 구글 계정으로 로그인하는 것도 가능합니다.
로그인하면 깔끔하고 심플한 인터페이스가 반겨줍니다. 검색창에 URL 주소를 입력하고 필요한 브라우저·운영체제·화면 해상도 조합만 선택하면 됩니다. 사용자 계정은 게스트(Guest)와 프로(Pro) 두 종류가 있으며, 두 계정 모두 무제한 스크린샷 생성을 지원합니다.
Comparium으로 웹사이트 크로스 테스트하기
검색창에 웹사이트 주소를 입력하면 먼저 선택한 모든 조합에 대한 미리보기 목록이 표시됩니다. Linux, Windows 7, macOS, macOS 다크 모드 환경에서 500px부터 1920px(풀HD)까지 다양한 화면 해상도를 선택할 수 있으며, 현재 Chrome, Firefox, Internet Explorer, Safari, Opera 브라우저를 지원합니다.
자세히 비교하려면 두 개 이상의 화면을 선택한 뒤 오른쪽의 'Compare' 버튼을 클릭하기만 하면 됩니다. 여기서는 Windows Chrome 80.0 버전과 Windows Firefox 68.0 버전을 비교해 보았습니다.
나란히 비교하는 화면은 기본적으로 전체 화면으로 열립니다. 동기화 스크롤 옵션을 활용하면 여러 브라우저와 운영체제에서 웹사이트가 렌더링되는 모습을 동시에 확인할 수 있고, 높이·너비·크기 기준으로 화면을 맞춰 확대·축소할 수도 있습니다.
Comparium은 하나의 인터페이스 안에서 병렬 화면 생성을 기본 지원해 웹사이트 전체를 한눈에 파악할 수 있게 해줍니다. 비교 모드는 총 네 가지로 'side by side(나란히 보기)', 'overlay(오버레이)', 'slider(슬라이더)', 'find differences(차이 찾기)'가 있습니다. 특히 마지막 모드는 육안으로 발견하기 어려운 오류까지 자동으로 짚어주는 강력한 기능입니다.
'차이 찾기' 모드는 두 플랫폼 간 메뉴 아이콘 배치와 글꼴 선택의 차이를 알려줍니다. 편차가 크다면 디자인 코드를 수정해 차이를 해결해야 합니다.
마찬가지로 '오버레이' 모드는 두 설정을 서로 겹쳐 표시해 중대한 편차를 시각적으로 드러냅니다.
정리하면, Comparium의 정교한 스크린샷 비교 기능을 활용하면 서로 다른 운영체제와 해상도 환경을 손쉽게 비교할 수 있습니다. 분석이 끝난 뒤에는 메인 창에서 모든 화면을 삭제할 수도 있습니다.
기타 기능 및 장점
웹 개발자 입장에서 Comparium의 가장 큰 장점은 시각적 검증 정확도의 향상과 모바일 버전 지원입니다. 기기 크기를 500px 범위까지 조절할 수 있기 때문입니다. 또한 자동 비호환성을 감지해 주는 오프라인 보고서 기능과, Linux의 다양한 브라우저를 위한 '라이브 테스트(Live Testing)' 기능도 제공합니다. Windows 7과 macOS Catalina의 라이브 테스트 지원도 곧 추가될 예정입니다.
라이브 테스트 모드는 웹사이트 변경 사항의 반응형 동작을 실시간으로 분석해 줍니다. 앞서 소개한 비교 도구를 통한 시각 검토가 눈에 띄는 오류를 잡아내는 데 유용하다면, 라이브 테스트는 실제 환경에서 웹사이트를 직접 테스트해 출시 준비를 완성할 수 있게 해줍니다.
Comparium은 대량 URL 테스트, 내부 페이지 테스트, 다양한 화면 비율 지원, 저속 연결 시뮬레이션 등 강력한 신규 기능이 포함된 탄탄한 로드맵도 갖추고 있습니다. 시장의 다른 크로스 브라우저 테스트 도구와 기능을 비교해 볼 수 있는데, 웹사이트 오류 자동 감지 능력 덕분에 Comparium은 상당히 경쟁력 있는 평가를 받습니다.
물론 몇 가지 사소한 단점도 있습니다. 현재 Windows 10 환경의 스크린샷은 지원하지 않지만, 고객 지원팀은 해당 기능이 로드맵에 확실히 포함되어 있다고 밝혔습니다. Slimjet, Yandex 같은 기타 브라우저도 아직 지원하지 않습니다. 다만 현재 지원되는 브라우저 목록만으로도 다양한 기기와 운영체제 환경을 충분히 시뮬레이션할 수 있습니다.
요금 및 가격 정보
앞서 언급했듯이 Comparium은 무료 '게스트' 모드와 월 15달러의 유료 '프로' 모드를 제공합니다. 게스트 플랜과 프로 플랜의 세부 비교는 공식 페이지에서 확인할 수 있습니다.
무료 게스트 계정은 Windows 7용 Firefox 75, Chrome 81 등 일부 브라우저만 사용할 수 있고, 화면 해상도도 1024px로 제한됩니다. 그럼에도 라이브 테스트 시간과 스크린샷 생성 횟수에는 제한이 없다는 점은 매우 매력적입니다. 프로 플랜으로 업그레이드하고 싶어질 때까지 무료 한도 내에서 원하는 만큼 테스트할 수 있으며, 로드맵에 흥미로운 기능이 많아 웹사이트 성장과 함께 솔루션도 함께 발전시킬 수 있습니다.
총평
오늘날 최종 사용자의 다양한 취향, 화면 크기, 브라우저 환경을 고려하지 않고서는 웹사이트를 출시하기 어렵습니다. Comparium은 실제 환경 시뮬레이션 관점에서 웹사이트의 반응형 품질을 측정하는 데 부족함이 없는 유망한 도구입니다. 파이프라인에 준비된 흥미로운 기능들을 고려하면, 웹 개발자에게 강력한 크로스 브라우저 테스트 도구로 자리매김할 것으로 기대됩니다.