'Browser'에 해당되는 글 5건

  1. 크롬 - New Tab Redirect(새 탭시 페이지 이동하기)
  2. 크롬 - ColorZilla(Color Picker, 페이지 색상 선택, 추출하기, CSS 도구) 2
  3. 크롬 확장프로그램 - Pig Toolbox(마우스 우클릭 해제하기, 제스쳐 사용하기)
  4. 크롬 확장프로그램 - Lastpass(비밀번호 자동입력 하기)
  5. 크롬 확장프로그램 - IE Tab Multi 설치및 설정하기(크롬에서 은행, 쇼핑몰 이용하기)

익스플로러의 경우 옵션에서 시작페이지를 지정하여 익스플로러를 켰을시나 새탭시에도 시작페이지를

바로뜨게 할 수 있습니다. 하지만 크롬의 경우 홈버튼을 누를시 이동하는 페이지만 지정이 되고

크롬을 새로키거나 새탭시 다음과같은 자주가는 페이지 목록이 나타나고 바로 이동하진 않습니다.


이번엔 크롬에서도 익스플로러 처럼 시작시 바로 지정된 주소로 이동되는 New Tab Redirect에 대해 알아보겠습니다.


다운로드 주소 : https://chrome.google.com/webstore/detail/new-tab-redirect/icpgjfneehieebagbmdbhnlpiopdcmna


설치후 크롬 도구설정에서 확장프로그램으로 이동합니다.

크롬 확장프로그램 경로 - chrome://extensions/


옵션버튼을 클릭



My new tab ~ URL 에서 이동할 페이지주소를 적어줍니다.

Quick Save.. 의 아이콘을 누르면 URL에 아이콘에 맞는 페이지를 입력합니다.

시작페이지를 지정했으면 Save버튼을 클릭 상단의 Options saved!!라는 알림창이 나타나고 탭을 종료한후

새탭버튼을 눌러 보시면 방금 지정했던 URL로 바로 이동하게 됩니다.

new tab redirect의 경우 주소표시줄 우측 아이콘에 나타나지 않기 때문에 크롬 확장프로그램의 옵션에서만

설정이 가능합니다!


웹페이지를 수정하거나 추가할때 오래전에 이미 사용한 색상이나, 다른 페이지의 마음에 드는 색상을 따오고 싶을때

화면을 캡쳐후 포토샵이나 다른 그래픽툴로 색상을 선택해 색상 코드를 따는 번거로움이 있습니다. ColorZilla는

간단한 클릭몇번으로 페이지의 색상코드를 쉽게 따올수 있는 많은 개발자들이 사용하는 확장 프로그램입니다.


홈페이지 : http://www.colorzilla.com/

크롬 다운로드 : https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp


자.. 이제 기능에 대해 알아보겠습니다.


Page Color Picker Active

가장 많이 사용하는 기능으로 커서를 위치하게 되면 해당 색상의 RGB값과 색상 코드값, 

또한 커서가 위치한 속성을 빨간색 테두리로 표시하며 가로세로 픽셀, 해당속성의 class경로가 나타납니다.


Color Picker

색상을 선택해 해당 색상의 rgb, hsl, 색상코드값을 가져올 수 있습니다. 또한 색상을 본후 OK버튼을 누르고 다시

Color Picker에 들어오면 Color history에 이전에 선택했던 색상이 계속 추가됩니다.


Copy To Clipboard

Page Color Picker Active로 선택한 색상의 rgb, hsl, 색상코드 값을 저장하고 있습니다.


Webpage Color Analyzer

해당 페이지에서 사용중인 모든색상을 표시합니다.


Palette Browser

listbox의 list에 해당하는 컬러를 출력하면서 rgb, 색상코드, 색상명을 출력합니다.


CSS Gradient Generator

Gradient효과를 만들어 낼 수 있으며 만들어낸 색상의 CSS가 오른쪽 화면에 나타납니다.


Options


Automatically ~ clicked

체크시 확장 프로그램의 ColorZilla아이콘 클릭하면 바로 Page Color Picker Active를 실행합니다.


Outline hovered elements 

체크시 Page Color Picker Active상태에서 커서이동시 빨간색 태두리를 표시합니다.


Change cursor to crosshair

체크시 Page Color Picker Active상태에서 커서를 십자가 모양으로 나타냅니다.


Automatically copy ~ clipboard - 커서선택시 색상코드값을 바로 복사합니다.

Auto-copy color format - 선택시 색상값을 목록(rgb, hsl, 색상코드값)중 선택한 값으로 나타냅니다.

Show Hex codes in lowercase - 선택시 색상코드값을 소문자로 나타냅니다.

Enable color ~ shortcut - 단축키를 지정해 ColorZilla를 실행할 수 있습니다.


이상 ColorZilla였습니다. 이 확장프로그램을 몰랐을때 포토샵으로 일일이 열어 색상값을 확인했었는데..

ColorZilla를 사용하니 블로그 꾸밀때 상당히 편하네요.. ㅎㅎ 블로그를 운영하시거나 CSS를 많이 다루는 

웹디자이너, 개발자들에게 매우 유용한 크롬 확장프로그램 인것 같습니다!

이번에 소개할 프로그램은 Pig ToolBox입니다.

제 개인적인 생각으로 IE Tab Multi와 함께 가장 활용도 높은 확장 프로그램이 아닐까 생각합니다.

크롬에서 특정 사이트를 이용할때 마우스 드래그나 우클릭이 작동되지 않는 사이트에서 효과적으로 이용 가능하며

제스쳐 기능으로 마우스만으로 사용자가 설정해놓은 정보에 맞게 페이지를 이동하거나 앞으로가기 뒤로가기 등을 할 수 있으며

Youtube지원으로 Youtube동영상을 해상도에 따라 시청할 수 있고 

구글검색을 지원하여 페이지 이용중 빠르게 구글검색을 할 수 있습니다.


구글 크롬 Pig Toolbox 주소 : https://chrome.google.com/webstore/search/pig%20toolbox?hl=ko

로 바로 이동하셔도 되고 구글 확장 프로그램에서 다음과같이 Pig Toolbox로 검색하여 설치하셔도 됩니다.


설치후

우선 Pig Toolbox 옵션의 제스쳐 옵션을 보겠습니다.

초기 설정에서는 수퍼 제스쳐가 체크 되있을 것입니다. 하지만 최신버전의 크롬과 Pig Toolbox의경우

현재는 수퍼제스쳐 이용이 불가능합니다. 그 이유는 Pig Toolbox를 설치한후 알 수 있는데

위와 같이 크롬은 NPAPI플러그인을 더이상 지원하지 않기때문에 윈도우 전용기능의 수퍼제스쳐는 사용할 수 없다고 합니다.

제스쳐의 기능중 앞으로 가기와 뒤로가기를 제외한 제스쳐는 거의 지원되는것 같습니다. 

저는 제스쳐기능을 사용하지 않지만 혹시나 다양한 제스쳐기능을 사용하고 싶으신분들은 Smooth Gestures를 사용하시면 되겠습니다.

Smooth Gestures 주소 : https://chrome.google.com/webstore/search/Smooth%20Gestures?hl=ko


선 두께, 폰트크기, 선색깔 등은 제스쳐 사용시 나타나는 선, 폰트등의 두께, 글자의 크기등의 조절을 할 수 있습니다.

 

Left, Right, Up, Down으로 설정시

 

Alphabet으로 설정시

제스쳐 하단의 기능들은 수퍼제스쳐 기능을 활성화 해야 이용가능하므로 넘어가겠습니다.

구글 메일 확인하러 가기 - 구글 메일페이지로 이동합니다. 로그인이 안되있을시 Pig Toolbox의 아이콘이 ? 로 표시되있고 Gmail에

로그인 되어있는 상태인경우 ? 대신 안읽은 메일의 갯수를 표시합니다.

마우스 제스쳐 사용 안하기 - 마우스 제스쳐 사용의 ON/OFF

현재 사이트 WEB, Torrent, 음악 검색하기 - 하단의 텍스트 상자에 글을 입력후 검색을 하게되면 검색어에 해당하는 구글검색을 합니다.

스크린샷, 캡쳐, 공유 기능은 스크린샷으로 전체페이지, 해당페이지, 영역 선택 등을 캡쳐 할 수 있고 그림판에서 편집할 수 있습니다.

짧은 URL주소 만들기 - 주소를 입력후 만들기를 누르게 되면 더짧아진 주소를 생성합니다.

로그인폼 자동채우기 - 로그인 정보 추가폼으로 해당사이트의 정보를 입력후 로그인폼 자동 채우기 탭을 눌러 ID, PASS를 자동입력 할

수 있습니다.(LastPass를 사용하면 더뛰어난 ID ,Pass 관리 기능을 지원합니다.)

유튜브 동영상 검색 - 유튜브 동영상 시청시 해당탭을 클릭하면 Lyrics Search에서 해당동영상의 가사를 검색합니다.

이 동영상 반복 바로재생의 경우 다음과 같이 다양한 해상도의 동영상으로 변경할 수 있습니다.

우클릭 막힘 풀기 - 우클릭 방지가 되어있는 사이트의 우클릭을 할 수 있도록 합니다. 제 블로그의 경우도 우클릭 방지가 되어있는데

이기능을 활용하면 우클릭을 사용할 수 있습니다.


이상 리뷰를 마치겠습니다. 저는 Pig Toolbox를 마우스 우클릭 막힘 푸는 용도로만 사용했었는데 많은 분들이 제스쳐도 사용하시는것

같더군요. 크롬의 버전업으로 NPAPI를 지원하지 않아 좀 더 다양한 제스쳐를 사용할 수 없는 점이 아쉽지만 

그래도 크롬에서 가장많이 사용하는 확장 프로그램이 아닐까 생각합니다.

오늘 소개해드릴 확장프로그램은 Lastpass입니다.

Lastpass는 크롬 확장프로그램으로써 여러사이트들의 아이디와 비밀번호를 입력하는 것도 귀찬으신!! 

분들을 위한 최고의 확장프로그램이 아닐까 싶습니다. 

lastpass외에도 퀵패스와 알패스, 로보폼이 있는데요 로보폼의 경우 유료이며

알패스와 퀵패스는 현재 익스플로러에서만 지원이되지만

lastpass의 경우 무료에다가 프로그램을 설치하게되면 익스플로러외에도 

파이어폭스 에서도 이용이 가능하며 MAC와 LINUX에서도 이용이 가능합니다.

인터넷 계정으로 관리하기 때문에 윈도우를 다시깔거나 다른 컴퓨터로 이용할 때도

기존에 사용하던 계정으로 lastpass에 접속하게되면 기존에 이용중이던 모든 사이트를 이용할 수 있습니다.

Lastpass 주소 : https://lastpass.com/

크롬 확장프로그램 주소 : https://chrome.google.com/webstore/search/lastpass?hl=ko

설치 한후 lastpass아이콘을 클릭하게 되면 계정이 있는경우 그대로 ID, pass를 입력하시면되고 없으신경우 

New here? Create an Account를 누르셔서 회원가입 하시면 됩니다.

lastpass아이콘을 마우스 우클릭하게 되면 옵션에서 보안성을 위한 로그오프 시간과 알림, 단축키등을 활용할 수 있습니다.

일반 탭에서는 자동로그오프를 위한 시간과 로그인에 해당하는 탭을 설정할 수 있으며

알림 탭에서는 알림기능과 안전한 암호만들기를 지원합니다.

단축키 에서는 사이트 재검사와 안전한 암호만들기에 대한 단축키를 설정할 수 있습니다.


lastpass아이콘을 클릭하게 되면 다음과같은 탭이 나타나고 다양한 기능을 이용할 수 있는데 각각의 기능을 살펴보면

내라스트패스 저장소에서는

위와같이 Lastpass계정내에 등록되있는 사이트가 있으며 빨간상자안의 수정, 그룹, 삭제 등의 기능을 지원합니다.

연필모양의 수정버튼을 누르게 되면

저장되있는 정보에대한 수정과 그룹지정이 가능합니다. 주로 암호를 잘못입력했거나할시 암호 변경으로 사용가능합니다.

즐겨찾기에 체크하게되면 Lastpass의 즐겨찾기 목록에 추가되고

암호 확인 필요 탭에 체크하게되면 해당사이트에 대해 재수정하고 싶을시 다음과 같이 암호를 확인후 수정할 수 있습니다.

자동로그인에 체크하게되면 사이트에 접속할시 자동으로 로그인하게 됩니다.


사이트탭 에서는 다음과같이 Lastpass에 저장되 있는 모든 사이트목록이 나타나며 스패너모양의 아이콘을 클릭해 수정할 수 있습니다.


양식 채우기 탭에서는 프로필, 신용카드에 대한 양식을 지정할 수 있으며

안전한 암호만들기 탭에서는 다음과같이 보안에 뛰어난 암호를 생성해 줍니다.

안전한 메모 에서는 메모를 작성할 수 있습니다.

일치하는 사이트 보기 오른쪽의 빨간상자는 현재사이트에 대한 정보의 갯수를 표현하며 

사이트에 저장되있는 정보가 2개 이상일시 선택해서 로그인 할 수 있습니다.

최근 방문한 사이트 에서는 최근 방문한 페이지 10개를 보여주며 최근 사이트 지우기 기능을 지원합니다.

도구 메뉴에선 위에서 설명했던 기능외에 인쇄 기능을 지원하는데 인쇄 탭에서는 안전한 메모 인쇄와

전체사이트에 대한 인쇄기능을 지원하는데 인쇄하기전 비밀번호를 다시한번 묻게되고 lastpass에 저장되있는 모든 사이트의

이름, 그룹, URL, 해당사이트의 ID, Pass를 표형식으로 출력하고 인쇄할 수 있습니다.


Explorer에서도 Lastpass.com에접속 하여 설치할 수 있는데 URL주소는 같아도 브라우저별로 나타나는 사이트는 다르기 때문에

Explorer에서 설치하실 분들은 반드시 Explorer에서 Lastpass.com에 접속하셔야 합니다.

다운받으신후 Next~를 눌러 설치를 하면되는데 저는 크롬에 먼저 설치후 사용중 이었기 때문에 

인터넷 익스플로러용 라스트패스 플러그인 설치 만 선택하고 라스트패스의 로그인 상태를 유지를 체크해 설치했습니다.

설치후 Explorer 사용시 Lastpass Toolbar를 허용해야 합니다.

기존의 ID, pass입력후 사용할 수 있으며 기존에 저장되있는 사이트와 정보등을 불러올 수 있습니다.

 


왼쪽은 크롬이고 오른쪽은 Explorer인데 설정탭은 자주 이용하지 않지만 

크롬에서는 ▶ 버튼을 누르면 기존 탭이 사라지고 새로운 탭이등장 하고 뒤로

가려면 Back 버튼을 눌러 뒤로가야 하는반면 Explorer의 경우 기존탭애 오른쪽으로 새탭이 추가되어 나타납니다. 

간단한 수정의 경우 굳이 Lastpass아이콘으로 수정하는 방법외에도 브라우저에서 마우스 우클릭에서 설정이 가능합니다.

이상 Lastpass에 대해 알아보았습니다. 

알패스나, 퀵패스의 경우 기능외에도 크로스브라우징지원이 안되 Explorer에서 사용이 불가능 합니다.

Lastpass의 뛰어난 보안과 쉬운 사이트 추가 기능은 자동 입력 프로그램중 최강이며 유료 결제시 모바일에서도 이용가능합니다.


무료로 브라우저에서 자동입력 기능을 써보시고 싶은분께 강력 추천드리고 싶습니다.!

구글 크롬의 IE Multi 는 크롬에서도 익스플로러와 같이 ActiveX를 사용할 수 있게 해주는 프로그램입니다.

크롬의경우 뛰어난 속도가 장점입니다. 아직 우리나라에선 Explorer를 많이 사용하지만 크롬을 써본사람은

Explorer는 버려두고 크롬만 사용하죠. 뭐 Explorer가 9버전 이후로 뛰어난 속도를 자랑하지만 그래도 역시나 크롬입니다.

크롬의 경우 ActiveX를 지원하지 않아 금융권이나 쇼핑몰등에 제한이 있는 단점이 있지만 IE Multi로 ActiveX가

필요한 사이트를 이용할 수 있게 되어 쇼핑몰, 금융서비스 등을 이용할 수 있습니다.

도구 -> 확장 프로그램 선택후

확장 프로그램 -> 더 많은 확장 프로그램 다운로드 클릭

ie tab이나 ie tab multi로 입력후 IE Tab Multi(Enhance)의 무료 버튼을 눌러 설치하시면 됩니다.

설치가 완료된후 IE Tab Multi아이콘을 마우스 우클릭후 옵션을 클릭하면

다음과 같이 설정화면이 나타납니다. 꼭 2개의 단축키 설정을안해도 한개의 단축키로도 사용가능합니다. 만약 앞의 없음 뒤의 F10일경우 F10버튼만눌러도

사용 가능합니다. 빨간 상자의 값은 혹시나 초기의 IPA모드로 적용후 사용할시 금융권 사이트에서 에러가 날수도 있기때문에 SPA로 사용하시는것이

좋습니다. 설정완료후 저장하기 버튼을 눌러주시면 됩니다.

사용하게 되면 주소표시줄이 2개가 생기고 하단의 별도 탭이생김으로써 혼란이 오지만 그래도 크롬에서의 필수 확장 프로그램인것 같습니다.

IE Tab Multi 설치 : https://chrome.google.com/webstore/search/ie%20tab%20multi?hl=ko&utm_source=chrome-ntp-launcher