Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

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

 

환경: BLISK

 

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

 

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

https://blisk.io/

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

 

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

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

 

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

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

 


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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

반응형
Posted by 녹두장군1
,