The Best Google Chrome Extensions

크롬 브라우저를 더 강력하게 만들어주는 최고의 확장 프로그램들

The Best Google Chrome Extensions

AdBlock

 AdBlock_r_600x450

보통의 사람들은 인터넷 서핑을하면서 화면 곳곳에 나타나는 광고 이미지나 문구들이 매우 사람을 산만하게 만들기 때문에 싫어 합니다. 어떤 웹사이트는 실재의 내용보다 더 많은 광고들로 도배가 되어 있어 마치 광고판 처럼 보이기도 하죠, AdBlock는 간단한 설치와 설정만으로 대부분의 광고들을 페이지내에서 나타나지 않게 할 수 있으며 위의 이미지에서 볼수 있듯이 처음부터 광고가 없었던것 처럼 깔끔한 레이아웃의 컨텐츠로 돌아가게 만들어 줍니다. 광고가 없어지면서 사용자는 더 빠른 페이지 로딩이 가능하게 되고 자신이 원하는 컨텐츠에 집중할수 있게 됩니다.

사용자는 특정 광고 URL 부터 키워드 필터 등을 통하여 다양한 방법으로 광고를 제거할 수 있으며 간단하게 버튼을 클릭하여 원본 페이지로 돌아가게 할수도 있습니다.

LastPass

04-LastPass_r_600x450

크롬 브라우저를 사용하기 시작한 가장 큰 이유중에 한가지로 LastPass라는 걸출한 확장 프로그램이 있습니다.

LastPass는 online password manager and Form Filler 로 아이디 패스워드의 관리와 자동입력 그리고 사용자 정보 입력폼을 자동으로 채워주는 기능을  사용하는 기능을 제공하며  아이디 패스워드를 온라인 상에 저장하여 필요할때 마다 자동으로 입력되게 할 수 있을 뿐만 아니라 보안성이 높은 패스워드를 생성하게 할수도 있습니다. 모든 사이트의 아이디 패스워드를 다르게 해서 보안을 강화할 수 있지만 정작 스스로 다 기억하지 못한다면 매우 번거로운 일이 아닐수 없기에 많은사이트의 회원 가입을 하는 저에게는 가장 사용율이 높은 확장 프로그램입니다.

RoboForm, 1 Password, KeePass 등의 다른 패스워드 관리 툴과 호환되는 형태로 아이디 패스워드 정보를 내보내기 할 수 있습니다.

Pocket (formerly Read It Later)

06-Pocket1-f_r_600x450

사이트를 서핑하다 발견한 괜찮은 컨텐츠, 지금 당장 볼 시간이 없다면 어떻게 하시나요?

고전적인 방법으로는 일단 북마크를 할 수 있겠죠, 일단 북마크를 하게 되면 이상하게 다시 보지 않는 경향이 커집니다. (그리고 간혹 원본 글을 작성자가 내리는 경우도 생기죠)

Pocket은 인기 있었던 Read It Later의 진보된 버전의 확장 프로그램입니다. 글, 웹페이지, 이미지, 동영상 등을 버튼 클릭한번으로 Pocket에 담을수 있으며 모바일이나 다른 PC에서 포켓에 접속해서 여유가 있을때 이글을 읽을 수 있습니다. Tag 기반의 소팅과 필터를 제공하므로 찾고 관리하기가 더 수월합니다.

Download Master

11-DownloadMaster_r_600x450

Download Master 는 음악이나 사진, 동영상 관련 페이지에서 일일이 다운로드버튼을 눌러야 하는 수고를 덜어 줍니다.

크롬 브라우저에 설치된 버튼만 클릭하면 지금 보고 있는 페이지내에 있는 모든 다운로드 가능한 파일을 받아 주고 사용자는 필요에 따라서 다운로드 하고 싶은 파일을 필터링 하여 받을 수도 있습니다.

Google Dictionary

Google-Dictionary_r_600x450
영어에 자신이 있는 사람이라도 모든 단어의 뜻을 다 아는 것은 아닙니다. 아는 단어도 다른 용법으로 사용되는 경우도 있죠. 이럴때 구글 사전을 설치하였다면 마우스 더블 클릭만으로 간단히 뜻을 확인 할 수 있습니다. 다른 언어로도 변역이 가능하며 더 자세한 정보를 보고 싶다면 위키피디아 같은 서비스로 연결되어 자세한 뜻을 볼수도 있습니다.

AutoPager Chrome

AutoPager_r_600x450
최근의 SNS 서비스중에 타임라인 개념이 있는 경우 스크롤만으로 페이징을 처리하는 경우가 많이 있습니다. 사용자 입장에서는 매번 클릭을 하지 않고 마우스 휠을 돌리는 것만으로 컨텐츠를 볼수 있다는 것이 상당히 편리합니다.
모바일에서는 손까락으로 페이지를 위로 쭉 끌어 올리면 더 많은 컨텐츠가 아래에 나타나죠
이러한 기능을 서비스 사이트에서 제공하지 않는다고 해도 AutpPager를 이용하면 동일한 효과를 누릴수 있습니다.
이 익스텐션을 설치하게 되면 스크롤이 페이지 하단으로 이동했을때 페이지 하단에 자동으로 다음 페이지를 읽어와서 사용자는 다음 버튼을 클릭할 필요 없이 단지 마우스 휠만으로도 모든페이지에 접근할수 있게 됩니다.  모든 페이지에서 다 되는 것이 아니라 검색 결과 페이지, 게시판, 특히  Google이나 Wikipedia 같은 서비스에 유용합니다.

FastestChrome – Browse Faster

 FastestChrome_r_600x450

FastestChrome은 크롬의 핵심 엔진을 바꾸지 않으면서도(예를 들면 보안이나 개인설정) 더 빠른 브라우징을 할수 있도록 크롬을 변신 시켜 줍니다. 다양한 옵션을 선택할수 있으며 심지어는 다음 페이지 자동 로딩이나 페이지 로딩 타임 제한, 고급 검색 관련 정보들도 설정할 수 있습니다.

구글에서 제공하는 나눔고딕 웹폰트 사용하기

홈페이지 제작시나 워드 프레스 같은 CMS 툴을 사용하다보면 영문에 최적화된 테마를 미리보기로 보고 골랐을때와 실재 적용했을때 한글폰트로 인해 예쁘게 보이지 않아 폰트를 바꿀 수 있는 방법을 찾게 됩니다.

웹에서는 한글이나 MS워드 프로그램처럼 PC에 설치된 폰트를 마음대로 적용할수가 없는데 이때 사용할 수 있는 방법이 두가지가 있습니다.

하나, 폰트를 이미지로 작업해서 올린다.

둘, 원하는 폰트를 웹폰트로 만들어 CSS에서 적용하여 사용한다.

첫번째 방법은 원하는 모든 폰트를 웹에서 사용가능하지만 텍스트 대신 이미지 텍스트로 모두 도배할 수도 없고(성능이나 접근성 측면에서도 권장하지 않습니다) 또한 사용전에 저작권을 미리 확인 하여 사용해야 하는 이슈도 있습니다.

두번째 방법은 웹폰트를 만들거나 이미 만들어진 웹폰트 파일을 (woff / eot 폰트) 파일을 웹서버에 올리고 CSS를 통해 호출해서 사용하는 방법입니다.

웹 폰트란 웹 제작자가 의도한 글꼴을 사용자 브라우저 화면에 그대로 표시하기 위해 사용하는 웹용 글꼴을 말합니다. 로컬 PC에 미려한 글꼴이 없는 경우 브라우저는 웹 서버에서 즉시 제작자가 올려둔 글꼴을 내려받아 사용자에게 표시하게 됩니다. 예쁘지만 사용자도 모르는 사이에 웹 서버에 있는 글꼴을 내려받아야 하기 때문에 성능과 타협해야 합니다. 느린 웹 사이트에는 권장하지 않습니다.

예를 들어 나눔고딕 웹 폰트를 사용하려면 일단 나눔고딕 글꼴이 웹 서버에 올라가 있어야 합니다.
아래 파일 중에 최소 woff 포멧과 eot 포멧을 내려받아 서버에 올려놓으세요.

NanumGothic.woff(982KB)
NanumGothic.eot(745KB)
NanumGothic.ttf(2.23MB)   < ttf형태의 트루타입 폰트도 사용가능하지만 용량을 보시면 2메가가 넘는 크기죠 따라서 웹용으로 사용하기는 권장하진 않습니다.

woff(Web Open Font Format) 포멧은 W3C 권고 표준이고 파이어폭스, 사파리, 오페라, 크롬, IE 9 브라우저가 지원하고 있지만 IE 6~8 브라우저가 지원하지 않습니다.

그리고 eot(Embeded Open Type) 포멧은 IE 6~8 브라우저가 지원하지만 다른 브라우저들은 eot 포멧을 지원하지 않습니다. 따라서 모든 브라우저에서 동일한 글꼴을 보이게 하려면 브라우저 호환성을 확보하기위해 woff, eot 포멧의 파일 모두 웹서버에 올려서 사용할 필요성이 있습니다.

그럼 1) 저작권 문제가 없는 2) 웹폰트로 사용가능한 공개된 폰트 중에서 3) 구글에서 웹폰트로 사용할 수 있게 제공하고 있는 네이버 나눔폰트를 WP 워드 프래스에 적용하는 방법을 알아 보겠습니다.

2013-06-04_192449

보통은 방문자의 PC에 나눔고딕 폰트가 설치되어 있어야 웹페이지에도 해당 글꼴이 제대로 표시가 되는데 이런 문제점을 해결하기 위해서 웹폰트를 서버에 올려서 폰트가 없는 사용자의 브라우저가 자동으로 폰트를 받아 이용하게 하지만 여기서는 웹서버에 폰트를 올리는 것보다 더 유연한 방법으로 구글에서 더 빠른 속도의 서버에 올려놓은 웹폰트를 사용할 수 있는 방법을 안내하려고 합니다.

> 구글에서 제공하는 모든 폰트 목록은 구글웹폰트 사이트를 방문하면 확인할 수 있습니다.

Google Web Fonts API에서는 한글 글꼴 (나눔 고딕, 나눔 명조, 나눔 펜스크립트 등)이외에도 수백 종의 라틴/그리스/키릴 문자 글꼴과 수십 종의 크메르 글자 글꼴 이외에도 한글, 라오, 아랍, 버마, 타밀 등 여러 글꼴을 early access를 통해 제공하고있습니다. 웹 폰트이므로 웹 사이트 방문자가 자신의 컴퓨터에 글꼴을 설치했는지 여부와 관계없이 사용가능합니다.

구글 웹폰트 사이트를 방문해 보면 알겠지만 상당히 많은 웹폰트를 무료로 제공하는 것은 물론 사용법 또한 매우 간단합니다. 나눔고딕 폰트를 예를 들면 아래 코드를 자신의 홈페이지에서 사용하는 CSS에 아래와 같이 추가하면 나눔고딕 웹폰트 사용을 위한 준비는 끝입니다.

워드프래스 사용자라면 테마의 style.css 파일을 열어 상단에 아래와 같이 추가해주면 나눔고딕 웹폰트 사용을 위한 준비는 완료 됩니다.

그리고 테마의 폰트를 지정해주는 css 코드를 찾아서 나눔고딕을 추가해주면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
body,
button,
input,
select,
textarea {
    color: #666666;
    font-family: 'Open sans','Nanum Gothic','Malgun Gothic',Dotum,sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.8;
}

위의 예는 구글에서제공하는 웹폰트들을 추가로 적용한 예이며  이렇게 원하는 곳의 폰트와 크기와 간격등을 수정하면 워드 프래스에서 아주 쉽게 웹폰트를 적용할 수 있습니다.

구글 검색에 리뉴얼한 사이트 정보 등록하기

Image representing Google as depicted in Crunc...

Image via CrunchBase

검색엔진에 자신의 사이트가 검색되게 하려면, 자신의 홈페이지 내용을 검색엔진에 알려주는 작업이 필요합니다.

일반적으로 새로운 페이지가 생성이 되면 각 검색엔진 사이트에서 검색로봇이라 불리는 가상의 프로그램이 자동으로 서핑을 하다 새로이 발견되는 홈페이지 내용을 긁어가는데(크롤링이라 한다.) 한번 수집한 이후에는 다음 검색 주기까지 검색엔진의 DB에 저장되고 바뀌지 않는다.

구글의 경우 웹봇을 통해서 각사이트를 프로그램 로봇이 자동으로 수집(크롤링)하고 이를 색인하여 검색 결과를 제공하게 됩니다.

하지만 만약 Google 검색을 통하여 자신이 제작한 사이트 명을 검색했을때 아직 검색이 되지 않거나 리뉴얼했을 경우 검색되더라도 예전의 홈페이지 구성으로 내용이 보이는 경우 일반적으로는 다음 검색주기까지 기다리면 자동으로 업데이트가 이루어 지지만 관리 필요에 의해서 구글 검색결과에 내용을 빨리 업데이트 해야하는 필요성이 발생하기도 합니다.

이러한 크롤링은 실시간으로 일어나지 않으며 일정 주기별로 이루어지게 되는데 이때 구글의 검색 결과의 향상을 위해서 Sitemap.xml을 이용할 것을 구글은 권장하고 있습니다.

구글의 경우 웹마스터 도구라는 사이트를 통하여 이러한 업무를 진행하고 있으며 절차는 다음과 같습니다.

웹마스터 도구 > 사이트 구성 > Sitemaps > Sitemap 제출

 

Sitemap 정보

 Sitemap을 사용하면 Google이 발견하지 못했을 수도 있는 사이트의 페이지 정보를 Google에 알릴 수 있습니다. 간단히 말해서 XML Sitemap(일반적으로 Sitemap이라고 하며 S는 대문자로 표기)은 웹사이트에 있는 페이지의 목록입니다. Sitemap을 만들어 제출하면 Google의 일반적인 크롤링 과정에서 발견되지 않는 URL을 비롯하여 사이트의 모든 페이지 정보를 Google에 알릴 수 있습니다.

Sitemap을 제출하는 방법:

  1. Sitemap 또는 mRSS 피드를 사이트에 업로드합니다.
  2. 웹마스터 도구 홈페이지에서 원하는 사이트를 클릭합니다.
  3. 왼쪽 메뉴에서 최적화를 클릭한 다음 Sitemap을 클릭합니다.
  4. Sitemap 추가/테스트 버튼을 클릭합니다.
  5. 입력란에 Sitemap의 경로를 입력합니다(예: Sitemap이 http://www.example.com/sitemap.xml에 있는 경우 sitemap.xml 입력).
  6. Sitemap 제출을 클릭합니다.

Sitemap 색인 파일

Sitemap 색인 파일의 XML 형식은 Sitemap 파일의 XML 형식과 매우 비슷합니다. Sitemap 색인 파일은 다음과 같은 XML 태그를 사용합니다.

  • <sitemapindex> – 파일을 둘러싸는 상위 태그
  • <sitemap> – 파일에 있는 각 Sitemap에 대한 상위 태그(<sitemapindex>의 하위)
  • <loc> – Sitemap의 위치(<sitemap>의 하위)
  • <lastmod> – Sitemap의 마지막 수정 날짜(선택사항)

자세한 내용은 Sitemap 프로토콜을 참조하세요.

샘플 XML Sitemap 색인

다음은 XML 형식의 Sitemap 색인에 대한 예입니다. 이 색인에는 2개의 Sitemap이 포함되어 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
  <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <sitemap>
      <loc>http://www.example.com/sitemap1.xml.gz</loc>
      <lastmod>2004-10-01T18:23:17+00:00</lastmod>
   </sitemap>
   <sitemap>
      <loc>http://www.example.com/sitemap2.xml.gz</loc>
      <lastmod>2005-01-01</lastmod>
      </sitemap>
   </sitemapindex>

Sitemap 색인 파일이 만들어지면, 저장하여 Google에 제출하시기 바랍니다. 모든 Sitemap을 업로드하고 저장한 경우 각 Sitemap을 개별적으로 제출할 필요가 없습니다. Sitemap 색인 파일만 제출하면 됩니다. 계정에서 각 사이트마다 Sitemap 색인 파일을 최대 500개까지 제출할 수 있습니다.

robots.txt 파일에 Sitemap 위치 포함하기

모든 검색엔진은 공통적으로 크롤링 과정을 거치기 전에 사이트 내의 robots.txt파일을 찾아 이를 참고로 사이트를 검사합니다. 따라서 검색엔진에 Sitemap 위치를 알리려면 robots.txt 파일에 다음 행을 자신의 경로와 파일 이름으로 업데이트하여 포함합니다.

sitemap: http://www.example.com/sitemap.xml
자세한 정보 보기 >

TIP
사이트 맵을 만들기 위해서는 xml에 대한 기본적인 지식이 필요하나 인터넷에는 자동으로 생성해주는 프로그램도 쉽게 찾을수 있습니다.

head_logo

전세계의 유적지와 명화를 손끝에서 감상하자 Google art project

Google Art Project?

구글의 실험적인 서비스들중 정말 마음에 드는 구글 아트 프로젝트라는 서비스가 있어서 소개를 해드립니다.
다음의 로드뷰나 구글의 스트리트 뷰는 지도서비스의 확장 형태로 실재의 세상을 360로 촬영하여 지도상에서 위치를 지정하여 해당 위치에 사람이 가지 않아도 가상으로 가서 보는 것과 최대한 유사한 형태로 보여주는 서비스 입니다.

직접 가보지 않고도 실재의 전경을 보고 싶을때 사용하기도 해서 지도에서 느낄수 없는 현장감을 확인할수 있는 제가 좋아하는 서비스 중에 한가지 인거죠 그런데 구글이 이러한 기술을 바탕으로 도로정보를 넘어서서 박물관 또는 역사적 가치가 있는 위치에 대해서 좀더 상세한 이미지를 가상현실처럼 제공을 하는 놀라운 전 세계적인 기획을 현실을 구현했습니다.

어떤 용도로 사용될까요?

여행을 좋아하는 사람들에게는 직접 가보지 않아도 PC브라우저 만으로도 다양한 지역을 짧은 시간내에 다닐수 있고, 전세계의 다양한 예술가의 작품을 통하여 영감을 얻고자 하는 사람에게는 역사적인 장소와 예술품을 상당히 고 퀄리티 사진으로 보실수도 있습니다.  물론 학생이나 연구를 하는 사람들에게도 유용한 서비스가 되겠지요

고대의 유적부터 현대의 기념비적인 장소까지 구글은 후대에 남겨야 할 유산에 대해서 디지털화한 거대한 예술관을 기획하고 제작하고 있는 것입니다.

활용 방법

초근접 촬영을 통하여 실제 박물관에서 보는 것보다 더 자세한 감상을 할수 있을뿐만 아니라 개인 구글 계정과 연동되어 마음에 드는 작품을 개인 갤러리에 담아 놓기도 할수 있고, SNS 와의 공유는 기본적으로 제공한다.

또한 작품을 보는 사용자가 지역별, 시대별, 작가별, 연관 작품별, 동일한 아티스트 작품 또는 동일한 시대의 작품, 또는 구글에서 묶어 놓은 테마별등 관심사에 따라 모아서 볼수 있는등 체계화된 DB로 제공하고 있다.

서비스 사용은 모두 무료

구글이 아니면 도저히 시도하기 어려운 기술과 자금력을 들여서 독보적인 컨텐츠를 수집하고 있을 뿐만 아니라 서비스 사이트가 매우 사용하기 쉬운 직관적인 UI를 제공하고 있어서 영어로 제공되는 서비스임에도 불구하고 내용을 보시는데 무리가 없을뿐만 아니라 모든 서비스가 완전히 무료로 제공되고 있습니다.

아쉬운 점은

이 엄청난 프로젝트를 알게되었을때 가장 먼저 확인하고 싶었던것은 세계에서 가장큰 박물관이였는데 구글의 공격적인 협상에도 불구하고 이 프로젝트에 참여하지 않은 박물관들이 있다는 점. 우리가 아는 몇몇 유명 박물관은 아직 내용이 들어와 있지 않다.


<구글 아트 프로젝트 소개 영상>

실재로 구글 스트리트 뷰에서 사용되었던 360도 촬영이 가능한 카메라를 예술품이나 유적지를 촬영하기위해 더 소형화하고 이동성이 좋게 개량하였으며 몇번의 시행착오를 겪으며 더 나은 퀄리티를 만들어 내었던 영상을 보실수 있습니다.

만약 이러한 기획이 국내에서 이루어졌다면 어떤 수순을 밟고 있을까요?
몇편의 작품을 맛보기로 보여주고 하이퀄리티로 더 많이 감상을 하려면 유료 결재를 요청하거나
수없이 많은 배너로 사용자들의 감상에 방해가 되는 디자인이 되지 않았을까요?

구글이 개발한 기술을 이러한 방식으로 활용해서 인류에게 돌려주는 프로젝트 응원하고 싶네요 ^^