Category: 웹브라우저

스타일리시 크롬 확장기능 설치 및 사용법

LudensLeave a comment
warning.or.kr 접속

크롬이나 파이어폭스를 쓰시는 분들 중 많은 분들이 이미 확장기능을 쓰고 계실겁니다. 여러 인기 있는 확장기능들이 있지만, 제가 개인적으로 좋아하는 것들은 광고차단과 이번 글에서 소개할 Stylish입니다. 요즘 크롬을 쓰는 분들이 많아져서(저도;;) 크롬을 기준으로 설명하겠습니다.

Stylish?

Stylish는 웹사이트의 CSS를 사용자가 원하는 대로 바꿀 수 있게 해주는(정확히는 덮어씌우는) 확장기능입니다. 간단하게는 자주 가는 웹사이트의 폰트나 배경화면을 마음대로 바꾸는 것부터, 레이아웃을 통째로 바꾸는 것까지 가능하게 해줍니다.

스타일리시 설치하기

준비물: 크롬이 깔린 데스크탑 또는 노트북

  1. 크롬 웹스토어의 Stylish페이지로 이동합니다.
  2. 오른쪽 ‘+ 무료’버튼을 클릭합니다.
  3. 확인창에서 ‘추가’버튼을 클릭하면 끝!

스타일리시 사용하기

스타일리시를 사용하는 방법은 크게 2가지가 있습니다. CSS를 직접 작성하는 방법과 공개된 CSS소스를 가져와서 사용하는 방법입니다. 물론 여기서 CSS를 작성하는 방법은 다루지 않을 거구요;; 공개된 소스를 사용하는 방법을 알려드리겠습니다.
Stylish에서 사용할 수 있는 공개된 CSS는 userstyles.org에서 얻으실 수 있습니다. 여기서는 userstyles.org에서 제가 만든 warning.or.kr redesign을 적용해보죠.

  1. 스타일리시를 적용할 사이트인 warning.or.kr에 접속합니다.
  2. 주소표시줄 오른의 Stylish 아이콘을 클릭하고 ‘Find more styles for this site’를 클릭합니다.
  3. 새 탭으로 뜨는 페이지에서 원하는 스타일을 선택합니다.
  4. Install with Stylish 버튼을 클릭하여 스타일을 설치합니다.
  5. warning.or.kr을 다시 접속해서 바뀐 스타일을 확인합니다.

스타일리시 해제하기

설치된 스타일을 해제하는 방법도 간단합니다.
  1. 적용된 스타일을 해제할 사이트에 접속합니다.
  2. 주소표시줄 오른쪽의 Stylish아이콘을 클릭하고 해제할 스타일 밑의 ‘Disable’을 클릭합니다. (‘Delete’를 눌러 바로 삭제도 가능합니다)

스타일리시 옵션

주소표시줄 오른쪽의 Stylish 아이콘을 오른쪽버튼 클릭하고 ‘옵션’을 클릭하면 나옵니다.

스타일리시 옵션화면에서는 직접 CSS를 작성 및 수정하거나 설치된 스타일의 관리와 업데이트를 할 수 있습니다. 설치된 스타일이 깨진다면 ‘check for update’를 클릭해서 업데이트가 되었는지 확인해보는 것이 좋겠죠.

참 쉽죠?:) 제가 만든 다른 스타일인 소셜미디어 나눔고딕 강제적용도 테스트로 설치해보세요ㅎ

[appbox chromewebstore fjnbnpbmkenffdnngjfgmeleoegfcffe]

스마트폰으로 웹페이지 저장하기 – Opera 저장된 페이지

LudensLeave a comment

스마트폰으로 웹서핑을 하다보면, 약도와 같이 정보를 확인했다가 다시 봐야할 경우가 있습니다.
이 때 대부분은 즐겨찾기에 저장하거나 화면캡쳐를 하게 됩니다.

그런데 즐겨찾기에 저장하고 다시 필요해서 접속할때 꼭! 와이파이는 없고 느린 3G로 접속할 때가 많더군요. 이런 불편함을 해소해줄 기능이 바로 오페라 미니와 오페라 모바일에 들어가 있습니다.

‘저장된 페이지’ 기능

오페라 미니과 오페라 모바일에 들어있는 ‘저장된 페이지’기능이 바로 위와같은 상황에서 쓰면 적절한 기능입니다.
인터넷연결과 상관없이 미리 저장만 해 놓으면 다시 보는게 가능합니다. 물론 사용법도 매우 쉽습니다.

  1. 스마트폰의 오페라로 웹서핑을 하다 페이지를 저장해야할 필요성을 느낀다.
  2. 오페라의 메뉴버튼을 누르고 ‘저장된 페이지’를 눌러 페이지를 저장한다.
  3. 필요할때 오페라의 ‘저장된 페이지’에서 미리 저장한 페이지를 열어본다.

덧) iOS는 캡쳐가 확실히 빠릅니다;;

모바일 브라우저의 초슈퍼울트라갑, 오페라 미니!

LudensLeave a comment
2012년 1월 ~ 5월 3일까지의 세계 모바일 브라우저 점유율
2012년 1월 ~ 5월 3일까지의 세계 모바일 브라우저 점유율

현재 모바일 브라우저 시장의 Top 3는 오페라, 안드로이드, 아이폰입니다.(출처) 오페라 미니(또는 오페라 모바일), 구글의 안드로이드에 탑재된 웹킷엔진의 브라우저, 아이폰에 기본으로 탑재된 사파리가 경쟁하고 있습니다.

저는 사실 오페라가 저 3곳 중 하나로 포함되는 것 자체가 놀랍다고 생각합니다. 애플이나 구글의 경우 OS를 만드는데 비해 오페라의 경우 브라우저 하나로 저 치열한 리스트에 들어가 있는 것이지요.(물론 OEM의 영향도 있긴하지만 말이죠.)

하지만 여기에서 이야기할 오페라 미니는, 우리나라에서는 계속 느리다는 평가를 받아왔습니다.
해외에서는 자체적인 데이터 압축을 통해 데이터비용의 절감과 전송 속도 향상이라는 두마리 토끼를 잡았다고 극찬을 받는 브라우저임에도 불구하고 말이죠. 그 이유는 자체적인 데이터 압축을 위한 서버문제가 가장 크다고 할 수 있습니다.

오페라 미니가 빨라졌다…?!

그런데, 저조차도 느리다고 알고있던 오페라 미니를 어제 피치못할(?) 사정으로 깔아보았더니 의외로 엄청 빠르게 돌아가더군요. 저는 혹시 제 폰만 그런건가 싶어서 어머니의 갤럭시 네오(나름대로 최적화 한다고 했는데 정말 느립니다-_-)를 테스트로 돌려보았습니다.

[youtube https://www.youtube.com/watch?v=56TvzUJmFd8&rel=0]

저도 이번에 제대로 사용하고 있는데 웹서핑이 오페라 모바일보다 훨씬 부드럽고 가볍습니다.
언제부터인지는 잘 모르겠지만, 오페라 미니가 이렇게 빠르고 가벼운 이상 안 쓸수가 없게 되었네요:)

덧) 영상은 제 베뉴로 찍었는데 화질 완전 안좋네요;;

노트북에서 가장 오래가는 웹브라우저는?

Ludens1 Comment

7tutorials에서 오래된 노트북의 윈도우7 환경에서 어떤 브라우저가 가장 오래가는지 테스트를 했습니다.

Test Comparison: Which Browser Will Make Your Laptop’s Battery Last Longer?

테스트는 윈도우의 전원절약기능을 보여주려는 것 같았는데, 결과가 재밌게도 오페라에 유리하게 나왔네요.

테스트환경

HP Pavillion dv7 2185dx – 나온지 2년이 넘은 노트북이라고 합니다.

  • Intel Core2 Quad CPU Q9000 @ 2.00 GHz
  • 6GB of RAM DDR2
  • ATI Mobility Radeon HD 4650
  • 깨끗한 윈도우7 환경 / 윈도우 8 컨슈머프리뷰
  • Peacekeeper battery test 사용
  • 전원관리 옵션 중 절전 사용

결과 – IE > Opera > Firefox > Chrome

IE가 1위를 하는 경우도 다 있네요.

IE시리즈 다음으로는 오페라가 올라왔고, 다음으로는 파이어폭스, 그리고 크롬이 가장 안습이네요.

오페라를 추천합니다.

Opera, the fastest and most secure web browser

이 결과로 오페라를 사용해야될 이유가 오페라링크 말고도 한가지 더 생긴 것 같습니다.
(설마 위 결과를 보고 IE를 쓰려고 하시는 분은 없겠죠?;;)

IE보다는 못하지만 파이어폭스나 크롬보다 오래가는 오페라를 추천합니다.

덧) 오페라링크와 함께라면, 집에서 들어갔던 그 사이트 노트북에서도 쉽게 다시 찾을 수 있습니다.
덧2) IE가 배터리를 조금 먹는다고해도 솔직히 못쓰겠죠?;;

오페라미니는 어떻게 스마트폰 데이터를 90%나 절약할까?

LudensLeave a comment

오페라미니가 데이터절약으로 유명한 브라우저라는건 알만하신 분들은 다 아시리라 생각합니다.
오페라 공식 블로그에 오페라미니의 데이터 절약에 대한 설명글이 올라와있어 간단하게 번역해보았습니다.
(데스크탑의 오페라나 오페라모바일에서는 터보기능으로 들어가있습니다.)

이 글은 Opera Mini and Data Compression 의 번역입니다.

오페라미니는 어떻게 작동하고있죠?

평범한 웹브라우저들과는 다르게, 오페라미니는 모든 컨텐츠를 프록시서버를 통해서 가져옵니다. 이 프록시서버는 웹페이지를 작은 화면에 더 잘 맞도록 재포장하는데, 페이지가 압축되면 OBML(Opera Binary Markup Language)이라는 마크업언어로 핸드폰에 전송됩니다. 이러한 압축과정은 전송시간을 2~3배정도 단축시켜줍니다. 또한 예비처리로 일반 웹페이지의 모바일에 대한 호환성을 높여줍니다.

서버의 재포장과정은 뭔가요?

모바일기기들은 일반적인 PC와는 많은 분야에서 다릅니다. 화면크기가 작기때문에, 가독성을 높이기위해 글자의 처리방식도 다릅니다. 또한 모바일기기 내에서도 숫자키패드, 쿼티키보드, D-pad, 스타일러스, 터치 등등 각각 다릅니다. PC에서 작동하는 많은 것들이 모바일기기에선 작동하지 않습니다. 특히 가장 두드러진 예로 마우스포인터가 없기때문에 프레임스크롤이나 마우스오버같은 액션이 불가하죠. 이처럼 소소한 문제들을 해결하기위해 약간의 포장을 해야할 필요가 있습니다.

데이터가 압축될때 어떤 일이 일어나죠?

먼저 제일 중요한 사실은 데이터압축은 실제로 속도향상을 많이 도와주진 못한다는 것입니다. 중요한것은 첫 반응을 볼때까지의 사용자의 행동으로 결정되는 대기시간입니다. 대기시간을 줄여주는 몇가지 대표적인 방법들이 있습니다.

  • 우리가 가진 클라이언트서버의 프로토콜(연결을 유지시켜주는 역할)이 요청을 보내기 위해 설치되어있습니다. 이것은 사용자의 대기시간을 20~30퍼센트 줄여줍니다.
  • 우리는 페이스북과 구글같은 컨텐츠를 가진 회사들과 파트너관계로 직접적으로 연결되어있습니다. 그뿐 아니라 다른 회사들의 웹서버들이 우리의 서버실 안에 있기때문에 대기시간을 우리의 트랜스코더들이 자료의 부피를 최대한 줄여줍니다.

오페라 미니에서 사용되는 압축과 데이터축소 기술은 다른 방식도 몇가지 있습니다.

  • 서버가 클라이언트에 대한 정보를 유지하고 있습니다. 따라서 정보는 매번 요청하는게 아니라 서버에 한번만 전송되면 되는것이죠.
  • 쿠키는 서버측에서 전적으로 관리합니다. 그래서 데이터가 불필요하게 왔다갔다 할 일이 없습니다.
  • 이미지는 사용하는 기기의 디스플레이 사이즈에 맞도록 축소됩니다. 이것은 효과적으로 크기를 줄임과 동시에 사용자가 웹페이지를 더 보기 좋게 만들어줍니다.

마지막으로 결과데이터는 여러 방법으로 압축됩니다. 보통은 텍스트를 먼저 보내고, 링크, 필수 레이아웃, 그리고 마지막으로 그래픽요소들을 보냅니다. 우리는 데이터를 보낼때 사용자들이 다음에 읽을 부분도 생각합니다.

모든 데이터가 오페라의 서버를 거치면, 보안에 대한 문제는 없나요?

오페라미니는 데스크탑컴퓨터와 같습니다. 사용자가 인터넷 화면을 보는동안 브라우저는 컴퓨터에서 돌아갑니다. 오페라미니는 사용자가 모바일기기로 화면을 보는동안 브라우저는 오페라사의 서버에서 돌아가고 있습니다. 오페라미니의 성공은 서버를 얼마나 안전하게 운영하는데 달려있다는것을 알고있습니다. 그래서 우리는 현재까지 보안에 대한 어떤 사건이나 문제도 없었습니다.

오페라미니의 서버는 모두 노르웨이에 있나요?

몇몇은 노르웨이에 있습니다만, 많은 다른 지역에도 서버가 있습니다. 여러곳에 있는것이 경제적으로 효율적이고 성능면에서도 좋습니다. 대표적으로 아이슬란드에 있는 데이터센터는 미국과 유럽 사이에 있고 지열발전이라는 장점이 있죠.

덧) 한국에서 오페라미니, 오페라터보가 느린 이유가 이해가 되지 않나요?;;;
덧2) 데이터가 가는건 알고있었지만 쿠키까지 전적으로 관리한다니 놀랍군요ㄷㄷ