반응형 웹 퍼블리싱 테스트를 위한 Browsersync 사용해보기

Browsersync 를 이용하면 반응형 웹 퍼블리싱 작업시 테스트를 편리하게 진행할 수 있다. 작업중인 소스에 영향을 주지 않고 이용할 수 있으며 각 디바이스에 실시간 미러링을 지원한다. 예를 들면, 브라우져에서 개발중인 페이지에 접속하여 이루어지는 동작을, 다른 디바이스에서도 동일하게 실행해 주는 방식이다. 내부적으로 웹소켓 PUSH로 동작되며, 동기화되는 동작은 클릭, 페이지 스크롤, 키 입력, 자바스크립트 실행 정도 인것 같다. 아직 완벽하지는 않으며 간혹 미러링 되지 않는 동작들도 있다. 하지만, 레이아웃 확인, 스크롤 및 링크 이동 동기화 기능 만으로도 충분히 만족스러우며 작업 생산성을 높일 수 있다.

Browsersync 공식 홈페이지 URL

https://browsersync.io/

시작해볼까?

1. Node.js 설치

Browsersync 는 Node.js의 모듈이다. 당연히 Node.js 설치 후 이용할 수 있다. 맥, 윈도우, 리눅스를 위한 인스톨러를 제공한다. 자신의 운영체제 환경에 맞는 인스톨러를 다운받아 설치한다. 이미 설치되어 있다면 다음으로 패스~

2. Browsersync 설치

터미널 혹은 CMD창에서 다음과 같이 입력해준다. 맥 혹은 리눅스의 경우 명령어 앞에 관리자 권한으로 실행하기 위해 sudo 를 붙여야 하는 경우도 있다. 전역(-g 옵션)모듈로 설치 후 이용하면 편리하다. 개별 모듈로 설치하여 Gulp & Grunt 의 빌드과정에 통합시킬 수도 있지만 여기서 소개하지는 않는다.

npm install -g browser-sync

3. Browsersync 시작하기

서버가 없는 경우(html, css, javascript 파일만 존재하는 경우)  웹 루트 디렉터리로 이동 후 다음의 명령어를 실행. css 디렉터리가 따로 존재하지 않는 경우 --files "css/*.css" 부분은 생략해도 됨

browser-sync start --server --files "css/*.css"

별도의 웹서버가 존재하는 경우 프록시 모드 사용. 자신의 vhost 명을 사용

browser-sync start --proxy "my project.dev" --files "css/*.css"

4. 테스트 해보기

여기까지 성공적으로 실행했다면 다음과 같이 터미널에 접근 가능한 URL이 표시되었을 것이다.

[BS] Access URLs:

 ------------------------------------

       Local: http://localhost:3000

    External: http://10.10.10.45:3000

 ------------------------------------

          UI: http://localhost:3001

 UI External: http://10.10.10.45:3001

 ------------------------------------

[BS] Serving files from: ./

내부, 외부에서 접근 가능한 URL을 표시해주며 html페이지에 접근 가능한 URL과 Browsersync 관리자 페이지에 접근할 수 있는 URL을 별도로 제공한다. 브라우져에서 html 페이지에 접근시 우측 상단에 Connected to browser sync 라는 메시지가 표시된다. 여러 브라우져에서 같은 화면을 띄우고 이것저것 동작했을때 각 브라우져의 페이지가 동일하게 동작된다면 성공한 것이다. Browsersync관리자 페이지에서는 동기화시킬 동작을 켜고 끌 수 있다.

실제 테스트 수행 해봄

공감(♥) 및 댓글은 글쓴이에게 큰 힘이 됩니다. 로그인 없이도 가능하답니다. 오늘도 당신의 삶을 응원합니다.