--- title: "유용한 크롬 확장 프로그램(Chrome Extension) 추천" date: 2020-06-10 updated: 2020-06-10 category: etc canonical: https://intzzzero.dev/tip-chrome-extenstion/ source: "Between Negative and Positive" language: ko --- ## 크롬 확장 프로그램(Chrome Extension) 구글 크롬 확장 프로그램(Google Chrome Extension)은 크롬 브라우저를 기반으로 동작하는 애플리케이션이다. 따라서 HTML, CSS, JavaScript로 제작되며, 구글 계정을 갖고 있다면 누구나 크롬 웹 스토어를 통해 설치할 수 있다. [Chrome 웹 스토어](https://chrome.google.com/webstore/category/extensions?hl=ko) ## 모두에게 유용한 확장 프로그램 ### Momentum ![momentum](https://lh3.googleusercontent.com/RJ4jnr30NkOL3zFByvWdY0JNWH_q7F4Up2I0RsRxV0m-N25MHB0IlwWg5GzCy3w-XiCK6yy_UA=w640-h400-e365) ![momentum](https://lh3.googleusercontent.com/9UA9KaU7zMtWtyQobggNrYWRDW2OFjOaqmsKVqGKsebxj70eKUA-hEig31MAEixeF9S2N7N3mvU=w640-h400-e365) 모멘텀(Momentum)은 구글의 새창을 기반으로 하는 싱글페이지 애플리케이션이다. 사용자 위치 기반의 현재 시간, 날씨 등을 제공하고, 투두리스트로써의 기능도 갖고 있다. 새창을 열 때마다 새롭게 바뀌는 배경 이미지를 보는 재미도 있다. [Momentum - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=ko) ### Todoist ![todoist](https://lh3.googleusercontent.com/1S6w9WZ9jkfIs0ZAKdKOD7Umcm8iP7rBxWXdFEUtbQo3tl70DDhIf9hmn8BLtE6BHVB8R8SmJg=w640-h400-e365) 기본에 충실한 투두리스트 애플리케이션이다. 미니멀한 디자인에 스마트폰(애플리케이션 별도 설치 시)과 연동이 가능하다는 점이 유용하다. [Todoist: 할일 목록 및 작업 관리자 - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/todoist-to-do-list-and-ta/jldhpllghnbhlbpcmnajkpdmadaolakh?hl=ko) ### Google Arts & Culture ![art & culture](https://lh3.googleusercontent.com/ImkIjlpPefWM7uKsoJCXA09aKj7-BxJwIJb4K5MKiVrUzCbt2DKGYZ6ov3GzRSK7K9HrZboQJA=w640-h400-e365) 나로 하여금 모멘텀을 삭제하게 만든 일등공신이다. 새창을 열 때마다 동서고금을 막론한 세계의 명화들을 감상할 수 있다. 작품명과 제목은 물론이고 해당 작품을 소장하고 있는 미술관 정보까지 알 수 있다. 나처럼 이렇게나마 비루한 교양 수준을 키우고 싶은 사람들에게 추천한다. [Google Arts & Culture - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/google-arts-culture/akimgimeeoiognljlfchpbkpfbmeapkh?hl=ko) ### Google Dictionary ![google dictionary](https://lh3.googleusercontent.com/AdRzoFvCxlNKEOt-78CEZfcp7nymZU7ZZCwxUiVxrL0VZyWTFWqM0gSACE0zpmCkj24aUx3d=w640-h400-e365) 구글이 만든 구글 사전이다. 영영, 한영, 영한 모두 지원한다. 물론, 번역 애플리케이션도 웹 스토어에 존재하지만, 이건 내 마지막 자존심이다. 그리고, 종종(?) 만나게 되는 생소한 영단어를 더블 클릭 하는 것만으로 빠르게 확인할 수 있기 때문에 빠르게 컨닝하고 시치미 떼기에 좋다. [Google Dictionary (by Google) - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/google-dictionary-by-goog/mgijmajocgfcbeboacabfgobmjgjcoja?hl=ko) --- ## 웹 개발자에게 유용한 확장 프로그램 ### Wappalyzer ![wappalyzer](https://lh3.googleusercontent.com/QVwNvDyEfFZIJdRsmSQA6NPLAWxkmyrUPR-SH5tQ7D4KiIYR-jzN9NTis-XTZXergz7AHuoSIQ=w640-h400-e365) Wappalyzer는 '이 웹사이트는 어떤 프레임워크를 썼을까?', '서버로는 무엇을 쓰고 있을까?' 싶을 때 유용한 확장 프로그램이다. 간단하게 특정 웹사이트를 구성하는 여러 서비스들을 알 수 있다. 평소 눈여겨 보던 사이트는 무엇으로 만들어졌나 확인해보자. [Wappalyzer - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) ### Blue Button ![blue button](https://lh3.googleusercontent.com/1qqxOXRUEOCjXbxtpR2IwpvTGMIbrJHiAcxw79LWAjw6ooQrTyD3C9Hd8mRpBsd8X7BXETLT-X0=w640-h400-e365) 클릭 한 번으로 해당 웹사이트의 HTML, CSS, JS 정보를 모두 알 수 있으며, 이미지 정보까지 알 수 있다. 물론, 개발자도구로도 모두 알 수 있는 내용이긴 하지만, Blue Button은 친절하게 정리해서 시각화까지 해준다. [Blue Button | the webpage X-ray - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/blue-button-the-webpage-x/ahbcoeleapdfhmlnjglbiaddohfncace?hl=ko) ### ColorZilla ![colorzilla](https://lh3.googleusercontent.com/P77_Pe5xvds-T4r2LJZhj2nIZ7JS7n58mOI9AhpwvTquBlvy0DvZ3YSADGIjsAaLjDbvrit_Rg=w640-h400-e365) ColorZilla의 존재를 모를 때에는 웹에서 발견한 색상의 값을 알아내기 위해 캡쳐를 하고, 포토샵으로 불러내 스포이드 툴로 찍어봐야 했다. 하지만 ColorZilla와 함께라면 이제 그런 수고는 안 해도 된다. [ColorZilla - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ko) ### headingsMap ![headingsMap](https://lh3.googleusercontent.com/joL7RZVsHDy7BRuleGu2pyCmqIz7TgcL7QNRlZHZq8njiNuRb9j4fBeNJfAK6onGAi31cGHIGHo=w640-h400-e365) 웹 접근성을 고려한 웹 페이지 설계에 관심이 있다면, headingsMap의 설치를 추천한다. 접속 중인 웹 페이지의 모든 헤딩태그들을 선형구조로 한눈에 파악할 수가 있다. 평소 주의 깊게 보던 웹 사이트가 있다면 headingsMap으로 확인해보자. [headingsMap - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=ko) ### OpenWAX ![openwax](https://lh3.googleusercontent.com/46Z_uZSxiTeJEmeegVPgYO0hLmVH-Ewt55dpNZlDzmhWP0w4BIRuvVGq4ZR2tOjRQufN_Z-ohE4=w640-h400-e365) OpenWAX 역시 웹 접근성 공부에 특히 유용한 확장 프로그램이다. 제목 뿐만 아니라 대체 텍스트 사용 현황부터 적절한 명도 대비, 링크 텍스트까지 접속 중인 웹 사이트의 웹 접근성 수준을 확인할 수가 있다. 이를 통해 웹 접근성이 고려되지 않은 웹 페이지를 발견하고 “나는 이러지 말아야지”하며 반면교사 삼도록 하자. [OpenWAX - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe?hl=ko) ### Page Ruler ![pageruler](https://lh3.googleusercontent.com/-tL56rjvHxjpUAK5LaGnd74a-tcfQUmLVHvCuVssqcgLFSZxtJc2n5TOBEuVzmuNJ8Xe6p2zog=w640-h400-e365) 웹 페이지 요소들의 사이즈와 태그를 확인할 수 있는 확장 프로그램이다. 해당 위치에 마우스 포인터를 올리는 것만으로 쉽게 확인이 가능하며, 부모 태그와 자식 태그까지 알 수 있다. [Page Ruler - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme?hl=ko) ### Web Developer ![web developer](https://lh3.googleusercontent.com/zumjZ75PvVSPDOsvmRznqr7oPMwqI4EjE1-ddStYtIDSAmC3Sfl0d5Gpo5kqDGNbbRPqzuQngg=w640-h400-e365) 정말 유저 타겟팅에 충실한 이름이 아닐 수 없다. 확장 프로그램 이름이 Web Developer다. 무슨 말이 더 필요할까. 웹 사이트의 CSS를 모두 지우고 HTML만 본다던가 하는 등의 일을 할 수 있다. [Web Developer - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ko) ### WhatFont ![whatfont](https://lh3.googleusercontent.com/nep5S6A_Z05btUKTsv76SXoKW1Zv5a1Hr9RspeTOxS1y0E88UiYLHQv4OXvD1UaL8-YdlHuDsmg=w640-h400-e365) 이름 그대로 웹에서 만나는 폰트들을 손쉽게 확인할 수 있게 해주는 확장 프로그램이다. [WhatFont - Chrome 웹 스토어](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ko)