웹 개발자 전용 브라우저 BLISK, 모바일 또는 PC 등 다양한 기기들에 대한 화면 제공

웹 개발자 전용 브라우저 BLISK, 모바일 또는 PC 등 다양한 기기들에 대한 화면 제공

 

환경: BLISK

 

요즘은 사이트를 개발하면 기본적으로 여러 기기에서 제대로 동작하는지 체크해야 합니다. 사람들은 스마트폰, 태블릿 등 다양한 기기와 화면 사이즈별로 웹 환경을 즐기기 때문입니다. PC 에서 실행한 웹 브라우저에서는 제대로 표현이 되는데 스마트폰에서 디자인이 깨진다면 제대로 된 소스라고 할 수 없겠죠. 그래서 웹 어플리케이션 개발자들은 여러 환경에 제대로 구현이 되고 있는지 수시로 테스트를 합니다. 이 때 유용한 브라우저가 있습니다. BLISK 는 PC 화면과 모바일 웹 브라우저 화면을 동시에 테스트할 수 있도록 만든 웹 개발자 전용 브라우저 입니다.

 

▼ BLISK 는 웹 개발자가 아닌 블로그 운영자에게도 유용합니다. 자신이 선택한 테마가 모바일과 PC 에 제대로 적용되었는지 확인할 수 있기 때문입니다. 먼저 BLISK 브라우저를 다운받아 보겠습니다. 사이트에 접속해서 오른쪽 상단에 있는 DOWNLOAD 버튼을 클릭합니다.

https://blisk.io/

 

▼ 브라우저 다운로드를 위한 팝업창에서 BLISK 실행을 위한 OS 를 선택합니다. 중간에 있는 것이 윈도우 입니다. 나머지는 맥켄토시와 리눅스입니다. 바로 아래 DOWNLOAD BLISK 버튼을 눌러 파일을 받습니다. 

 

▼ 파일 다운로드 후 프로그램을 실행합니다. 처음에 나타나는 화면은 BLISK 의 소개 페이지 입니다. 다양한 기기에서의 분리된 화면을 보려면 URL 입력창에 자신이 보고 싶은 사이트를 입력합니다. 

 

▼ 그림처럼 주소 입력창에 입력한 사이트는 3가지 영역으로 나누어 집니다. 1번은 스마트폰 기기 목록입니다. 2번은 1번에서 선택한 기기에 사이트를 보여 줍니다. 3번은 PC 화면 입니다. 이렇게 PC 와 모바일 화면을 반으로 나누어서 동시에 볼 수 있도록 만들었습니다. 

 

▼ 테스트 해 볼까요? 1번 영역에 있는 기기 목록에서 아무거나 선택해 보세요. 그럼 바로 옆에 기기의 해상도와 특성에 맞춰서 사이트가 표현됩니다. 

 

▼ 또 하나의 특징은 모바일과 PC 화면이 동시에 스크롤 된다는 것입니다. 마우스를 누른 상태에서 위 아래로 움직여 보세요. 두 화면이 동시에 움직일 겁니다. 화면이 제대로 구현 되었는지 확인할 때 동일한 위치의 내용을 동시에 확인할 수 있어서 유용합니다. 

 

▼ 스크롤 싱크를 없애고 싶으면 오른쪽 상단에 있는 아이콘 목록에서 Manage Scroll Sync 아이콘을 클릭합니다. 

 

▼ 환경 설정 화면에서 Scroll sync 옵션을 Disable 로 변경합니다. 그럼 모바일과 PC 화면은 따로 움직입니다. 

 

▼ 이 외에는 크롬과 같습니다. 오른쪽 상단에 있는 더보기 > More tools > Developer tools 메뉴를 선택해서 개발자 도구를 띄워 보세요. 

 

▼ 크롬에서 개발자 도구를 사용해 보신 분들은 BLISK 의 개발자 도구와 동일하다는 것을 알 수 있습니다. 아마도 Chromium 이라는 구글 크롬의 오픈소스 웹브라우저를 기반으로 만들었을 겁니다.