웹 퍼블리셔 웹개발자용 브라우저 BLISK, 모바일과 PC화면을 동시에


요즈음은 N스크린 시대입니다. N스크린이란 다양한 PC나 노트북뿐 아니라 스마트폰이나 태블릿등 디바이스별로 다양한 화면 사이즈기 존재한다는 것을 말합니다. 근래는 버스나 지하철만 타도 다양한 화면 사이즈를 지닌 모바일 디바이스를 사용하는 사람들을 주변에서 흔히 볼 수 있습니다.


이런 환경에서 코딩을 하는 웹 퍼블리셔나 웹개발자들은 제작한 웹사이트가 데스크탑 PC화면에서 뿐 아니라 모바일 웹브라우저 화면에서도 어떻게 보여지는가를 반드시 테스트 해봅니다. 회사의 업무 분장에 따라서는 간혹 웹 디자이너분들도 웹표준 코딩을 하고 테스트하는 경우도 있구요.

굳이 전문적인 퍼블리셔나 개발자가 아니더라도 블로그를 운영하는 일반인 운영자 역시 자신이 작성한 블로그 포스팅이 모바일에서 어떻게 보여지는지 확인하기 위해서 수시로 스마트폰을 확인하곤 하지요.


이 때 편리하게 사용할 수 있는 프로그램이 있는데, 바로 BLISK 입니다. BLISK는 크로미엄(Chromium) 기반으로 만들어진 웹 개발 전용 브라우저로 모바일과 PC화면을 동시에 편리하게 확인하는 기능을 가지고 있습니다.

즉, 모바일과 데스크탑 PC 화면을 동시에 띄워놓고 화면을 스크롤링하거나 스크린 샷을 찍어놓을 수 있고, 스크린 녹화기능으로 웹사이트 제작을 하면서 디버깅 및 테스트 도구로도 훌륭하게 확인할 수 있습니다.

전문 개발자나 퍼블리셔가 아니더라도 개인적으로 블로그를 운영하는 사람도 모바일과 데스크탑 PC 화면을 동시에 보면서 블로그 화면을 확인하는데 이용할 수 있겠죠.



BLISK란 무엇인가?


BLISK 공식사이트에 들어가면 아래 그림과 같이 BLISK가 무엇인지 기능과 정체성을 명확하게 이야기 하고 있습니다.

BLISK는 어떤 디바이스에서든지 잘 보이고 원활히 작동하는 웹사이트 개발과 테스트를 위한 도구이다.

첫째, 스마트폰과 태블릿 등 모바일 디바이스를 시뮬레이션 할 수 있다.
둘째, 데스크탑과 모바일의 URL과 스크롤이 자동으로 동기화되어 작동한다.
세째, 파일이 변경되면 자동으로 페이지를 새로고침한다.
네째, 개발도구와 함께 이용해서 데스크탑과 모바일 디버깅을 할 수 있다.
다섯째, 어떤 IDE 개발툴이나 개발언어, 프레임워크에서도 제대로 작동한다.


조금 전에 앞에서 언급한 BLISK의 기능에 대해서 웹 퍼블리셔나 개발자는 이해하기 어렵지 않아도 블로그를 운영하는 일반인은 어렵게 느껴질 수 있습니다. 



어렵게 느껴지는 분들은 아래 공식 홈페이지에서 'PRESS & MEDIA' 메뉴를 누른 뒤에 'WATCH VIDEO'를 참고바랍니다.


여기에서 제공하는 영상만 보아도 Blisk의 개념이나 동작 방식을 쉽게 이해할 수 있습니다.



BLISK 설치하고, 웹 퍼블리셔가 아닌 블로거도 사용해보자!


그럼 BLISK를 다운로드하고 설치하겠습니다. 현재는 지원하는 운영체제가 윈도우와 Mac 입니다. 리눅스는 조만간 지원할 예정입니다. 'DOWNLOAD BLISK'를 눌러서 진행하면 됩니다.


팝업에서 운영체제를 윈도우로 확인하고 설치파일을 다운로드 받습니다.


실행파일을 클릭해서 설치를 진행합니다.


여러가지 기능이 있는 개발용 브라우저이기 때문에 설치를 진행할 때 시간이 조금 걸립니다. 천천히 기다리세요.


기다림끝에 BLISK의 설치가 완료되었습니다. 설치가 되면 아래 그림과 같이 2분짜리 Overview가 나타납니다.


유튜브 동영상으로 제공되는 Overview는 BLISK의 간단한 사용방법을 설명합니다.


그럼 한번 실습해보겠습니다. 사용하는 것은 어렵지 않습니다. 브라우저 주소창에 URL을 입력하면 아래 그림과 같이 왼쪽에는 모바일 화면이 오른쪽에는 데스크톱 화면이 뜨게됩니다.

현재는 가상의 모바일 디바이스로 아이폰6가 선택되어 있는 상태입니다. 아이폰6에서 웹사이트 시뮬레이션 및 테스트를 해볼수 있는 것이지요.


만약 다른 모바일 디바이스를 테스트 해보려면 아래와 같이 갤럭시S6 엣지로 디바이스를 선택하면 됩니다.
디바이스를 선택하는 즉시 가상의 갤럭시S6 엣지 스마트폰이 나타나고 웹사이트의 테스트 및 시뮬레이션을 할 수 있습니다.

이런 기능은 전문가뿐 아니라 일반인 블로거들도 활용하면 유용하게 사용할 수 있을 것입니다.


그럼, 아래 BLISK 공식사이트를 통해서 프로그램을 다운로드 받아서 유용하게 활용하시기 바랍니다.



크롬 브라우저 다운로드는 잇아이템 얻는 것!

몇 년전까지 국내 웹브라우저 시장은 마이크로소프트의 인터넷 익스플러러가 대부분을 장악했다. 그렇지만 스마트폰의 대중화와 함께 등장한 구글은 브라우저 시장의 판도를 바꾸어 놓았다. 구글 크롬 브라우저는 안드로이드 운영체제를 사용하는 모든 스마트폰에 기본으로 탑재되기 때문이다. 

그렇지만, 크롬은 모바일에서 뿐아니라 데스크탑에서도 웹표준인 HTML5를 지원하고 빠른 속도와 월등한 기능으로 사용자의 호평을 받고 있다. 크롬의 또하나의 매력은 웹스토어를 통해서 풍부한 플러그인 기능으로 브라우저를 멋지게 가꿀수 있다는 점이다.

구글은 크롬에 속도와 기능 뿐아니라 안정성과 보안성도 놓치지 않고 포함시켜서 브라우저를 개발해냈다.
그 결과 현재 이미 웹브라우저 시장 점유율 절반을 차지하며 1위였던 마이크로소프트 인터넷 익스플로러의 자리를 탈환했다.

[ Chome 웹스토어 ]


재미있는 사실은 마이크로소프트 역시 과거에 윈도우 운영체제에 인터넷 익스플로러를 내장시키면서 당시 웹브라우저 부동의 1위였던 넷스케이프를 밀어냈던 적이 있다는 점이다.

마이크로소프트 익스플로러는 필요없을까?

그렇다면, 마이크로소프트 인터넷 익스플로러는 필요가 없을까? 일단 국내에서만큼은 아직까지는 아니다.
그 이유는 바로 액티브엑스(ActiveX) 때문이다. 국내 은행이나 증권, 보험같은 금융기관이나 관공서 등의 웹사이트에 사용하는 보안관련 프로그램들은 액티브엑스(ActiveX) 기반으로 동작한다. 물론 개별 금융기관이나 관공서에서는 웹표준 HTML5 기반으로 웹사이트를 전면 개편한 곳도 있지만, 모두 변경한 것은 아니다.

그래서 마이크로소프트 익스플로러가 없으면 은행등 금융기관을 이용할 수 없는 경우도 있다. 그래서 불편하더라도 사용은 해야한다. 만약 아직까지 구글 크롬 웹브라우저를 사용하지 않고 인터넷 익스플로러만 사용했던 유저가 있다면 크롬을 사용하는 순간 빠른 속도와 편의성에 매료될 것이다.

그럼 크롬 다운로드 방법을 알아보도록 하자

크롬 브라우저 다운로드 및 설치하기

구글, 네이버등 포탈 사이트에서 '크롬'으로 검색하면 '구글 크롬' 웹사이트에 접속할 수 있다.
직접 연결되는 주소는 https://www.google.com/chrome/browser/desktop/index.html 이다.


크롬 웹사이트에 접속하면 크롬을 다운로드 할 수 있는 버튼이 보인다. 만약 윈도우 운영체제가 윈도우10, 윈도우8, 윈도우7 64비트를 사용하고 있다면 1번 'Chrome 다운로드' 버튼을 눌러서 설치파일을 다운로드 받으면 된다.

만약, 윈도우를 32비트로 사용하고 있거나 다른 운영체제인 맥(Mac)이나 리눅스등을 이용하고 있다면 2번 '다른 플랫폼용 Chrome 다운로드'를 클릭해서 크롬을 설치해야 한다. 




현재 자신이 사용하고 있는 컴퓨터의 윈도우 운영체제 비트가 몇 비트인지 궁금하다면 아래를 관련글을 참고하자
여기에서는 먼저 1번 윈도우 64비트용을 설치하겠다. 1번 'Chrome 다운로드'를 클릭한다.


서비스 약관에 동의 체크를 하고 '동의 및 설치' 버튼을 클릭한다.


'동의 및 설치' 버튼을 누르면 아래 화면과 같이 ChromeSetup.exe 파일이 내 컴퓨터에 다운로드 된다. 실행파일을 클릭해서 설치를 진행한다.


실행 파일을 클릭하면 먼저 아래 화면과 같이 크롬이 다운로드된다.


설치가 이어서 진행된다.


설치가 완료되면 아래 그림과 같이 크롬 브라우저 64비트 최신 버전이 설치 된 것을 확인할 수 있다. 


다른 플랫폼을 사용한다면?

윈도우 64비트가 아니라면 스파트폰 태블릿용이나 기타 데스트톱 OS용 다운로드를 사용해서 설치를 진행하자


크롬 다운로드 않될 때, 문제점 해결

마이크로소프트 인터넥 익스플로러를 사용할 때 간혹 크롬 브라우저가 다운로드 되지 않을 경우가 있다.
익스플로러의 문제일 수 있는데 다음 팁으로 해결할 수 있다. 브라우저 메뉴에서 '모바일용'을 선택하고 나서 다시 '개인 컴퓨터용'을 클릭하면 된다.
그럼 해보자. 먼저 '모바일용' 메뉴를 클릭하고


다시 '개인 컴퓨터용' 메뉴를 클릭한다.


그러면 아래 점선 영역과 같이 자동으로 다운로드 팝업이 뜨고 설치를 진행할 수 있게 된다. 익스플로러에서 제대로 다운로드가 되지 않을 때 사용하는 꿀팁이다.
그럼, 크롬과 함께 즐거운 웹서핑을 되시길~~!


빠른 웹브라우저의 강자, 파이어폭스

구글 크롬과 함께 빠른 웹브라우저의 강자로 등장하고 있는 것은 불여우를 로고로 하고 있는 파이어폭스다. 
파이어폭스는 가볍기로 소문난 웹브라우저로 이른바 마니아층이 두터운 웹브라우저라 할 수 있다. 익스플로어를 사용하다가 구글 크롬만 사용해도 웹서핑 속도가 빠르다고 느끼는데 파이어폭스는 더 빠르다는 평이 많다.

그럼 파이어폭스 64비트를 다운로드하고 설치하는 방법을 시작하겠다. 파이어폭스 공식 사이트에 들어가기 위해서 한국모질라를 검색해서 한국모질라 공식사이트에 접속한다.


한국 모질라(Mozilla) 커뮤니티 공식사이트에 들어오면 파이어폭스 다운로드 버튼을 누른다.


'수익이 아닌 사람을 위한 인터넷'이라는 공익적인 목적의 문구가 파이어폭스의 정체성을 잘 말해주는 것 같다. 돈보다 사람을 위한 회사!
오른쪽 상단에 'FIREFOX 다운로드' 버튼을 누른다.


파이어폭스 웹사이트에 접속하면 자동으로 파이어폭스가 다운로드된다. 그런데 자동으로 다운로드 되는 것은 32비트 버전이다. 따라서 파이어폭스 64비트 버전을 내려받기 위해서는 아래에 'Firefox 기타 플랫폼 및 지원 언어' 항목을 선택한다. 

직접 접속할 수 있는 URL은 다음을 참고하자.


항목에 보면 운영체제별로 윈도우뿐 아니라 맥(MAC)과 리눅스도 다운로드가 가능하다. 두번째에 윈도우 64비트를 확인할 수 있다.


화면 아래쪽으로 스크롤링을 하면 한국어 언어가 나오는데 여기의 64비트 Download 항목을 클릭한다.


파이어폭스 설치하기

파일이 다운로드되면 실행파일을 클릭해서 설치를 진행한다.


설치과정은 기본 설치로 진행하면 된다. 나머지 과정을 그대로 넘어가면 되는데 다음 과정에 한 가지만 확인하자.


설치 진행과정 중에서 환경 설정 및 항목 가져오기 부분이 나타난다. 현재 사용하고 있는 웹브라우저에서 설정 및 사용자 데이터를 가져올 것인가를 선택하는 것이다.



만약, 크롬 브라우저에 저장해두었던 즐겨찾기나 브라우져 설정항목을 파이어폭스 브라우저로 모두 가져오려면 아래와 같이 크롬을 선택하고 다음 버튼을 클릭해서 진행하면 된다. 


그렇지만, 아무 설정도 가져오지 않으려는 유저라면 '아무것도 가져오지 않기'를 선택하도록 하자.


이제 파이어폭스 64비트의 설치가 완료되었다.


파이어폭스 64비트 정보 확인하기

그럼 설치된 브라우저가 64비트인지 확인을 해보자. 화면에서 아래 화살표가 지시하는 아이콘을 누른다.


브라우저의 여러가지 옵션 설정을 할 수 있는 화면이 뜬다. 브라우저의 정보를 보기 위해서 하단의 물음표 모양의 아이콘을 클릭한다.


도움말 중에서 맨 아래의 'Firefox 정보' 메뉴를 클릭한다.



정보 팝업이 나타나고, 모질라 파이어폭스 정보가 64비트로 정상적으로 설치된 것을 확인할 수 있다.
그럼, 이제 빠른 파이어폭스 브라우저로 즐거운 웹서핑을 즐겨보자!


+ Recent posts