#8. 업무 효율 향상을 위해 풀스택 개발자가 추천하는 크롬 익스텐션

 

 

 

 

---

크롬 익스텐션

 

전 세계적으로 브라우저의 점유율 약 60% 이상(심심찮게 70%도 뚫어버리는)을 꾸준히 유지하고 있는 크롬의 비결은 누구든지 "확장프로그램(익스텐션)"을 만들어서 배포할 수 있는 "오픈소스"라 해도 과언이 아닙니다. 크롬 브라우저의 기반으로 동작하는 확장 프로그램을 "크롬 익스텐션"이라고 합니다. 이런 크롬 익스텐션을 이용하여 업무시간 단축은 물론, 웹 브라우징의 효율성도 극대화가 가능합니다. 크롬 브라우저를 설치하지 않으신 분은 크롬 브라우저 다운로드 클릭해서 설치하시면 됩니다.

 

---

1. 업무를 위한 크롬 익스텐션

 

1) 색상 분석 - Colorzilla, Colorpick Eyedropper

웹사이트에서 UX 측면의 고찰도 중요하지만, 비주얼적인 디자인 트렌드를 어느정도는 알고, 활용하는 것도 중요하기에 버튼 색상과 크기를 고민할 때 주로 사용했던 익스텐션입니다. 

브라우저의 어느 지점에서든 색상을 읽고, 색상을 조정하여 다른 곳에 붙여 넣을 수 있습니다. RGB형식과 HEX 및 기타 형식을 지원합니다. 기본적으로 제공하는 기능은 같지만, 조금씩 다른 확장성이 있기에 편한 것을 쓰시면 됩니다.

 

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp/related?hl=ko&

ColorZilla

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=ko&

ColorPick Eyedropper

 

2) 폰트 찾기 - whatfont

웹사이트에서 사용중인 폰트를 찾는 익스텐션입니다. 설치한 익스텐션을 누르고 찾기를 원하는 텍스트에 대기만 한다면, 해당 폰트의 css 속성인 weight, size, line-height, color 까지 알 수 있습니다.

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ko&

WhatFont

 

3) 구글 태그 매니저 - Tag Assistant Legacy 

웹사이트에 다양한 구글 태그 매니저를 올바르게 설치했는지 확인하거나, 어떤 태그를 썼는지, 오류가 무엇인지, 구현을 개선하는 방법이 무엇인지를 볼 수 있습니다. 구글 애널리틱스의 구현을 쉽게 할 수 있습니다. 사용법은 record 버튼을 누르고 원하는 웹사이트를 브라우징 하시면 됩니다.

https://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=ko&

Tag Assistant Legacy (by Google)

 

4) URL을 짧고 강력한 링크로 만들기 - Bitly

웹사이트의 URL을 보시면 뒤에 ?type=post 블라블라 해서 "파라미터"가 덕지덕지 붙어있는 것을 볼 수 있습니다. URL을 따로 저장하거나 공유할 때, 짧고 강력한 링크로 대체할 수 있습니다.

https://chrome.google.com/webstore/detail/bitly-powerful-short-link/iabeihobmhlgpkcgjiloemdbofjbdcic?hl=ko&

Bitly | Powerful Short Links

 

5) 웹사이트 프로파일러 - BuiltWith 

웹사이트가 어떤 기술을 쓰는지 알려줍니다. 헤더부터 스크립트까지 전부 읽을 수 있고, 어떤 기술과 언어를 썼고, 플러그인까지 볼 수 있습니다. 유명한 웹사이트는 주로 사용하는 언어가 무엇인지 파악하여, 앞으로의 공부의 방향을 정할 수도 있습니다.

https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn?hl=ko&

BuiltWith Technology Profiler

 

6) 픽셀과 위치를 재는 눈금자 - Page Ruler Redux

웹페이지의 요소를 측정하는 눈금자입니다. 프런트엔드 개발을 위해 웹 요소를 픽셀단위로 볼 수 있고, 간격의 길이를 재거나, 마진(여백) 작업을 할 때 아주 편리합니다.

https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=ko&

Page Ruler Redux

 

7) JSON뷰어 - JSONViewer 

에디터를 쓰는 이유는 편리함도 있지만, 정렬을 위한 것도 있습니다. 웹사이트에서 json 파일을 열어보면 정렬이 되어 있지 않은 경우가 있어서, 원하는 요소를 찾기 힘들 때 유용합니다. 특히 REST API 작업할 때 사용을 추천드립니다. 테마를 설정할 수 있고, 노드를 여닫을 수 있습니다.

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko&

JSON Viewer

 

8) CSS뷰어 - CSSViewer 

크롬의 개발자 도구를 이용할 수도 있지만, 웹사이트의 css가 어떻게 빌드되었는지 알고 싶을 때 좀 더 빠르고 보기 편합니다. 크롬의 개발자 도구는 요소를 선택해야하지만, css뷰어 익스텐션은 마우스를 가져다 대기만 하면 됩니다.

https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=ko&

CSSViewer

 

 

2. 그 외 유용한 크롬 익스텐션

 

1) google 번역, 네이버 번역

웹 브라우징을 하면서도 번역을 볼 수 있습니다. 분야에 따라 다르게 번역이 되는 경우가 많아서 구글과 네이버 번역을 같이 사용합니다. 구글 번역은 자동 번역을 활성화하거나 끌 수 있습니다.

https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb?hl=ko&

Google 번역

https://chrome.google.com/webstore/detail/papago-translate/enddgifdbfoefnelepppgaabobdfbcpe?hl=ko&

파파고 번역 (Papago for Chrome)

 

2) 개인용 대시보드 - Momentum

이미 너무 유명한 모멘텀입니다. "감성용으로 사용하는거 아니야?"라고 하실 수 있지만, To-Do 리스트를 관리할 수 있는 기능도 있습니다. 바탕화면을 내가 좋아하는 사진으로 꾸미듯이, 모멘텀을 이용하여 나만의 브라우저를 꾸밀 수 있습니다.

https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=ko&

Momentum

 

3) 크롬 원격 데스크톱 - chrome remote desktop

개발자는 컴퓨터를 잘한다는 편견으로 팀뷰어에서 개인계정이 블락까지 당했을 때 찾았던 녀석입니다. 휴대폰 앱도 있어서 휴대폰으로 컴퓨터에 원격으로 접속이 가능해서, 출퇴근시간에도 일을 할 수 있게 만드는 아주 나쁜 녀석입니다. 등록되어있는 컴퓨터의 종료시간도 나와서 내 컴퓨터를 누군가가 건드렸는지도 알 수 있습니다.

https://chrome.google.com/webstore/detail/chrome-remote-desktop/inomeogfingihgjfjlpeplalcfajhgai?hl=ko&

Chrome Remote Desktop

 

4) 영문법 작문용 - Grammarly

IT 관련 해외 사이트에 Q&A 작성할때 주로 사용하는데, 번역기를 사용해서 영작을 하는 것도 좋지만, 이녀석을 이용해서 좀 더 정확한 표현을 할 수 있습니다. 문법과 철자만 체크하는 것이 아니라, 기존의 쓰던 말투나 어조까지 캐치해서 보정해줍니다.

https://chrome.google.com/webstore/detail/grammarly-for-chrome/kbfnbcaeplbcioakkpcpgfkobkghlhen?hl=ko&

Grammarly for Chrome

 

5) 트래픽 순위 체크 - Alexa Traffic Rank

웹사이트의 순위를 굳이 따지자면 트래픽 기준을 할 수 있기에, 트래픽으로 웹사이트를 측정할 수 있는 익스텐션입니다. 단순 트래픽 측정 뿐만 아니라, 사이트의 로드 시간도 볼 수 있습니다. 비슷한 웹사이트로는 similarweb가 있습니다.

 

https://chrome.google.com/webstore/detail/alexa-traffic-rank/cknebhggccemgcnbidipinkifmmegdel?hl=ko&

Alexa Traffic Rank

 

---

마치며

 

대학교 졸업작품으로 웹브라우징의 히스토리를 디바이스별, OS별, 플랫폼별로 머지하는 기능을 제공하는 크롬 익스텐션을 만들었는데, 어디갔는지 찾을 수가 없네요. 비슷한 기능을 제공하는 익스텐션을 찾는 것도 쉽지 않구요. 다시 만들자니 시간이 너무 아깝고..

그 외에도 이미 수많은 크롬 익스텐션이 있지만, 시간날때마다 보물찾기 하는 기분으로 유용한 녀석들을 찾고 있습니다. 혹 유용한 녀석을 알고 계시다면 공유부탁드립니다.