소개
다중 기기 웹을 타겟팅하는 웹 개발자는 다양한 기기와 구성에서 사이트와 웹 앱을 테스트해야 할 수 있습니다. 동기화 테스트는 여러 기기와 브라우저에서 동시에 자동으로 동일한 상호작용을 실행할 수 있는 효과적인 방법입니다.
동기식 테스트는 특히 시간이 많이 소요되는 다음 두 가지 문제를 해결하는 데 도움이 될 수 있습니다.
- 테스트하려는 URL과 모든 기기의 동기화를 유지합니다. 어제는 이를 각 기기에 수동으로 로드하면 시간이 더 오래 걸리고 회귀를 더 쉽게 놓칠 수 있습니다.
- 상호작용 동기화. 페이지를 로드할 수 있으면 시각적 테스트에는 좋지만 상호작용 테스트의 경우에는 스크롤, 클릭 및 기타 동작을 동기화할 수도 있는 것이 좋습니다.
다행히 일부 대상 기기에 액세스할 수 있다면 데스크톱에서 휴대기기로의 흐름을 개선하기 위한 여러 도구가 있습니다. 이 문서에서는 Ghostlab, 원격 미리보기, Adobe Edge Inspect, Grunt를 살펴봅니다.
도구
GhostLab (Mac)
Ghostlab은 여러 기기에서 사이트 및 웹 앱 테스트를 동기화하도록 설계된 상용 Mac 애플리케이션 ($49)입니다. 다음과 같은 최소한의 설정으로 동시에 동기화할 수 있습니다.
- 클릭수
- 탐색
- 스크롤
- 양식 입력 (예: 로그인 양식, 가입)
이를 통해 여러 기기에서 사이트의 엔드 투 엔드 사용자 환경을 매우 간단하게 테스트할 수 있습니다. 기기의 브라우저에서 페이지를 연 후에 탐색 (새로고침 포함)을 변경하면 연결된 다른 기기에서 즉시 새로고침됩니다. Ghostlab은 로컬 디렉터리 보기를 지원하므로 수정사항을 로컬 파일에 저장할 때도 모든 것이 항상 동기화된 상태로 유지됩니다.
Ghostlab을 설정하는 과정은 쉽지 않았습니다. 시작하려면 평가판 (또는 지금 정식 버전 구매)을 다운로드, 설치, 실행하세요. 그런 다음 Mac과 테스트하려는 기기를 동일한 Wi-Fi 네트워크에 연결하여 검색할 수 있도록 합니다.
Ghostlab이 실행되면 '+'를 클릭하여 테스트용 URL을 추가하거나 브라우저의 주소 표시줄에서 URL을 드래그할 수 있습니다. 또는 테스트하려는 로컬 폴더를 기본 창으로 드래그하면 새 사이트 항목이 생성됩니다. 이 글에서는 http://html5rocks.com의 서비스 중인 버전을 테스트하고 있습니다. ; )
그런 다음 사이트 이름 옆에 있는 '>' 재생 버튼을 클릭하여 새 Ghostlab 서버를 시작할 수 있습니다. 이렇게 하면 네트워크의 IP 주소 (예: http://192.168.21.43:8080)에서 사용 가능한 새 서버가 시작됩니다.
여기서 Nexus 4를 연결하고 Android용 Chrome을 Ghostlab이 제공한 IP 주소로 지정했습니다. 이게 다 됐습니다. Ghostlab에서는 다른 솔루션처럼 기기별로 전용 클라이언트를 설치할 필요가 없으므로 훨씬 더 빠르게 테스트를 시작할 수 있습니다.
Ghostlab URL에 연결하는 모든 기기는 기본 Ghostlab 창 오른쪽의 사이드바에 있는 연결된 클라이언트 목록에 추가됩니다. 기기 이름을 더블클릭하면 화면 크기, OS 등의 추가 세부정보가 표시됩니다. 이제 클릭 탐색 및 동기화를 테스트할 수 있습니다. 야호.
Ghostlab은 UA 문자열, 표시 영역 너비 및 높이, 기기 픽셀 밀도, 가로세로 비율 등 연결된 기기에 관한 일부 통계도 표시할 수 있습니다. 항목 옆의 설정 톱니바퀴 아이콘을 클릭하여 언제든지 검사 중인 기본 URL을 수동으로 변경할 수 있습니다. 그러면 다음과 같은 구성 창이 열립니다.
이제 연결된 다른 기기 중 하나를 선택하고 HTML5Rocks 주변의 다른 링크를 클릭하면 탐색이 데스크톱 Chrome(동일한 Ghostlab URL을 입력함)과 모든 기기에서 동기화됩니다.
더 좋은 점은 Ghostlab이 네트워크를 통과하는 모든 링크를 프록시할 수 있다는 것입니다. 따라서 http://192.168.21.43:8080/www.html5rocks.com을 클릭하는 대신 www.html5rocks.com/en/performance1에서 www.html5rocks.com/en/performance1.http://192.168.21.43/www.htm5rocks.com/en/performance
사용 설정하려면 '콘텐츠 로드' 탭에서 'Ghostlab을 통해 모든 콘텐츠 로드'를 선택합니다.
실제 사례 보기:
Ghostlab은 지원되는 브라우저에서 사이트 또는 창을 개수에 제한 없이 로드할 수 있습니다. 이를 통해 다양한 해상도로 사이트를 테스트할 수 있을 뿐만 아니라 다양한 브라우저와 플랫폼에서 코드가 어떻게 작동하는지 테스트할 수 있습니다. 목표를
Ghostlab을 사용하면 미리보기 중인 프로젝트 작업공간의 설정을 구성할 수 있으며 디렉터리 변경사항이 감지되면 감시하고 새로고침할지 여부를 지정할 수 있습니다. 즉, 변경사항이 있으면 연결된 모든 클라이언트가 새로고침됩니다. 더 이상 수동으로 새로고침하지 않아도 됩니다.
Ghostlab에서 어떤 도움을 받을 수 있는지 궁금하실 겁니다. 스위스 군용 칼은 아니지만 연결된 기기에서 원격 코드 검사도 지원합니다. 기본 인터페이스에서 기기 이름을 더블클릭하면 '디버그' 옵션이 표시되어 Chrome DevTools 버전이 실행됩니다.
Ghostlab에서는 번들된 Weinre 원격 웹 검사기를 통해 이를 가능하게 하며, 연결된 기기에서 스크립트를 디버그하고 스타일을 조정할 수 있습니다. Android용 Chrome에서 사용할 수 있는 원격 디버깅 환경과 마찬가지로 요소를 선택하고 일부 성능 프로파일링을 실행하며 스크립트를 디버그할 수 있습니다.
전반적으로 여러 기기에서 일상 테스트에 Ghostlab을 사용할 수 있는 속도에 감명을 받았습니다. 프리랜서의 경우 상용 라이선스의 비용이 약간 높을 수 있습니다 (추가 옵션은 아래를 참고하세요). 하지만 그 외에는 Ghostlab을 추천하겠습니다.
Adobe Edge Inspect CC (Mac, Windows)
Adobe Edge Inspect는 Adobe Creative Cloud 구독 패키지의 일부이지만 무료 체험판으로도 제공됩니다. 이를 통해 Edge Inspector Chrome 확장 프로그램을 통해 Chrome으로 여러 iOS 및 Android 기기를 구동하여 특정 URL로 이동하면 연결된 모든 기기가 동기화된 상태로 유지됩니다.
설정하려면 먼저 Adobe Creative Cloud 계정에 가입하거나 이미 계정이 있는 경우 기존 계정에 로그인합니다. 그런 다음 Adobe.com에서 Edge Inspect를 다운로드하여 설치합니다. Mac과 Windows에서는 현재 사용할 수 있지만 Linux에서는 사용할 수 없습니다. Edge Inspect docs를 참고하면 유용합니다.
설치가 완료되면 연결된 기기 간 탐색을 동기화할 수 있도록 Chrome용 Edge 검사 확장 프로그램을 다운로드하는 것이 좋습니다.
또한 작업을 동기화하려는 각 기기에 Edge Inspect 클라이언트를 설치해야 합니다. 다행히 클라이언트는 iOS, Android, Kindle에서 사용할 수 있습니다.
설치 프로세스가 완료되었으므로 이제 페이지 검사를 시작할 수 있습니다. 이를 위해서는 모든 기기가 동일한 네트워크에 연결되어 있어야 합니다.
데스크톱에서 Edge Inspect를 시작하고 Chrome에서 Edge Inspect 확장 프로그램을 시작한 다음 기기에서 앱을 시작합니다 (아래 참고).
이제 데스크톱에서 HTML5Rocks.com과 같은 사이트로 이동할 수 있으며 휴대기기에서 자동으로 동일한 페이지로 이동합니다.
또한 이제 확장 프로그램에는 아래 스크린샷과 같이 기기 옆에 <> 기호가 있는 기기가 표시됩니다. 이것을 클릭하면 Weinre 인스턴스가 실행되어 페이지를 검사하고 디버그할 수 있습니다.
Weinre는 DOM 뷰어이자 콘솔이며, 자바스크립트 디버깅, 프로파일링, 네트워크 워터폴과 같은 Chrome DevTools의 기능이 없습니다. 이는 최소한의 개발자 도구이지만 DOM 및 JavaScript 상태의 상태 확인에는 유용합니다.
또한 Edge Inspect 확장 프로그램은 연결된 기기에서 스크린샷을 쉽게 생성할 수 있도록 지원합니다. 레이아웃을 테스트하거나 페이지를 캡처하여 다른 사용자와 공유할 때 유용합니다.
이미 CC 비용을 지불하고 있는 개발자의 경우 Edge Inspect가 훌륭한 솔루션입니다. 하지만 각 기기에는 전용 클라이언트를 설치해야 하고 Ghostlab과 같은 대안으로는 찾을 수 없는 약간의 추가 설정 작업과 같은 몇 가지 주의사항이 있습니다.
원격 미리보기 (Mac, Windows, Linux)
원격 미리보기는 여러 기기에 표시할 수 있는 HTML 페이지와 콘텐츠를 호스팅하는 오픈소스 도구입니다.
원격 미리보기는 1,100ms 간격으로 XHR 호출을 실행하여 구성 파일의 URL이 변경되었는지 확인합니다. 포함된 것을 발견하면 스크립트는 각 기기의 페이지에 로드된 iframe의 src 속성을 업데이트하여 페이지를 로드합니다. 변경사항이 감지되지 않으면 스크립트가 변경될 때까지 폴링을 계속합니다.
이는 기기를 함께 연결하고 모든 기기에서 URL을 쉽게 변경하는 데 유용합니다. 시작하려면 다음 단계를 따르세요.
- 원격 미리보기를 다운로드하고 모든 파일을 로컬에서 액세스할 수 있는 서버로 이동합니다. Dropbox, 개발 서버 또는 다른 서버일 수 있습니다.
- 모든 대상 기기에서 이 다운로드 항목에서 'index.html'을 로드합니다. 이 페이지는 드라이버로 사용되며 iframe을 사용하여 테스트하려는 페이지를 로드합니다.
- 미리보기할 URL로 'url.txt' (다운로드에 포함되어 있으며 이제 서버에 제공됨)를 수정합니다. 이 파일을 저장합니다.
- 원격 미리보기에서 url.txt 파일이 변경되었음을 확인하고 연결된 모든 기기를 새로고침하여 URL을 로드합니다.
로우파이 솔루션이지만 원격 미리보기는 무료이며 작동합니다.
Grunt + 실시간 새로고침 (Mac, Windows, Linux)
Grunt (및 Yeoman)는 프런트엔드에서 프로젝트를 스캐폴딩하고 빌드하는 데 사용되는 명령줄 도구입니다. 이미 이러한 도구를 사용 중이고 실시간 새로고침을 설정한 경우, 편집기에서 변경할 때마다 로컬 앱을 연 모든 기기에서 새로고침이 발생하는 교차 기기 테스트를 사용하도록 워크플로를 쉽게 업데이트할 수 있습니다.
grunt server를 사용하는 데 익숙할 것입니다. 프로젝트의 루트 디렉터리에서 실행하면 소스 파일의 변경사항을 감시하고 브라우저 창을 자동으로 새로고침합니다. 이는 서버의 일부로 실행하는 grunt-contrib-watch 작업 덕분입니다.
Yeoman을 사용하여 프로젝트를 지원했다면 데스크톱에서 실시간 새로고침을 실행하는 데 필요한 모든 것이 포함된 Gruntfile이 생성됩니다. 교차 기기에서 작동하도록 하려면 속성 하나를 변경하면 됩니다. 바로 데스크톱의 hostname 속성입니다. connect 아래에 나열됩니다. hostname가 localhost로 설정되어 있으면 0.0.0.0으로 변경하면 됩니다. 그런 다음 grunt server를 실행하면 평소와 같이 새 창이 열리고 페이지 미리보기가 표시됩니다. URL은 http://localhost:9000 (9000이 포트임)과 같은 형태입니다.
새 탭 또는 터미널을 실행하고 ipconfig | grep inet를 사용하여 시스템의 내부 IP를 검색합니다. 192.168.32.20처럼 보일 수 있습니다. 마지막 단계는 livereload를 동기화할 기기에서 Chrome과 같은 브라우저를 열고 이 IP 주소와 이전 포트 번호 (예: 192.169.32.20:9000)를 입력하는 것입니다.
작업이 끝났습니다. 이제 실시간 새로고침을 사용하면 데스크톱에서 소스 파일을 수정하면 데스크톱 브라우저 및 휴대기기의 브라우저 모두에서 새로고침이 트리거됩니다. 사용하든,
또한 Yeoman은 이 워크플로를 쉽게 설정할 수 있는 모바일 생성기를 사용할 수 있습니다.
에밋 라이브스타일
Emmet LiveStyle은 개발 워크플로에 실시간으로 CSS를 수정할 수 있는 브라우저 및 편집기 플러그인입니다. 현재 Chrome, Safari, Sublime Text에서 사용할 수 있으며 양방향 (편집기에서 브라우저로 또는 그 반대로) 편집을 지원합니다.
Emmet LiveStyle은 변경할 때 브라우저 전체를 강제로 새로고침하지 않고 대신 DevTools 원격 디버깅 프로토콜을 통해 CSS 수정사항을 푸시합니다. 즉, 데스크톱 Chrome이나 Android용 Chrome 등 연결된 모든 버전의 Chrome에서 데스크톱 편집기를 통해 변경사항을 확인할 수 있습니다.
LiveStyle에는 '멀티뷰 모드'라고 하는 기능이 있는데, 이는 여러 창과 기기에서 반응형 디자인을 테스트하고 조정하는 데 적합합니다. 멀티뷰 모드에서는 모든 편집기 업데이트가 모든 창에 적용되며, 동일한 페이지의 DevTools 업데이트도 적용됩니다.
LiveStyle 패키지가 설치된 상태에서 실시간 CSS 편집을 시작하려면 다음 단계를 따르세요.
- Sublime Text를 시작하고 프로젝트에서 CSS 파일을 엽니다.
- Chrome을 시작하고 수정하려는 CSS가 있는 페이지로 이동합니다.
- DevTools를 열고 LiveStyle 패널로 이동합니다. 'LiveStyle 사용' 옵션을 선택합니다. 참고: 스타일 업데이트를 적용하려면 각 창의 실시간 편집 세션 중에 DevTools를 열어 두어야 합니다.
- 이 기능이 사용 설정되면 스타일시트 목록이 왼쪽에 표시되고 편집기 파일 목록이 오른쪽에 표시됩니다. 브라우저와 연결할 편집기 파일을 선택합니다. 작업이 끝났습니다. 붐 마이크
이제 파일을 수정하거나 만들거나 열거나 닫을 때 편집기 파일 목록이 자동으로 업데이트됩니다.
결론
교차 기기 테스트는 여전히 많은 새로운 경쟁자가 개발 중이며 빠르게 변화하는 분야입니다. 다행히 다양한 기기 세트에서 호환성을 보장하고 테스트할 수 있는 다양한 무료 상용 도구가 있습니다.
하지만 이 영역에는 여전히 개선의 여지가 많이 있습니다. 여러 기기를 대상으로 테스트를 위한 도구를 어떻게 더욱 개선할 수 있을지 생각해 보시기 바랍니다. 설정 시간을 줄이고 교차 기기 워크플로를 개선하는 방법은 무엇이든 좋습니다.
문제
아마도 이러한 도구로 테스트하는 동안 발생한 가장 큰 문제는 기기가 정기적으로 절전 모드로 전환되는 것이었을 것입니다. 문제가 되는 것은 아니지만 시간이 지나면 화가 납니다. 가능하면 기기가 절전 모드로 전환되지 않도록 설정하는 것이 좋습니다. 하지만 항상 전원에 연결되어 있지 않으면 배터리가 소모될 수 있습니다.
GhostLab을 사용할 때는 개인적으로 큰 문제를 겪지 않았습니다. $49의 가격이 조금 비쌀 수도 있지만 정기적으로 사용하는 경우 더 높거나 낮은 가격이 적용된다는 점에 유의하세요. 이 설정에서 가장 좋은 점 중 하나는 대상 기기별로 클라이언트를 설치하고 관리할 필요가 없다는 점이었습니다. 동일한 URL이 모든 위치에서 작동했습니다.
Adobe Edge Inspect를 사용하면 각 기기에 특정 클라이언트를 설치하고 사용해야 하는 일이 약간 지루함을 느꼈습니다. 또한 연결된 모든 클라이언트를 일관되게 새로고침하지 않아서 Chrome 확장 프로그램에서 직접 새로고침해야 했습니다. 또한 Creative Cloud 구독이 필요하며, 기기의 선택된 브라우저가 아닌 클라이언트에서 사이트를 로드하는 것으로 제한됩니다. 이로 인해 정확한 테스트가 제한될 수 있습니다.
원격 미리보기는 광고대로 작동했지만, 매우 가볍습니다. 즉, 여러 기기에서 사이트를 새로고침하는 것 이상의 경우에 고급 도구 옵션이 필요합니다. 예를 들어 클릭 또는 스크롤을 동기화하지 않습니다.
추천
시작하는 데 도움이 되는 무료 크로스 플랫폼 솔루션을 찾고 있다면 원격 미리보기를 사용하는 것이 좋습니다. 유료 솔루션을 찾는 회사에서 일하는 회사의 경우, GhostLab은 제 경험에서 일관되게 훌륭했지만 Mac에서만 사용할 수 있습니다. Windows 사용자의 경우 Adobe Edge Inspect가 가장 좋은 방법이며, 몇 가지 특이한 점이 없다면 일반적으로 문제를 해결하는 데 도움이 됩니다.
Grunt 및 LiveStyle은 개발 중에 실시간 반복을 보강하는 데에도 탁월합니다.