본문 바로가기
  • 디자이너의 시선으로 소소한 이야기를 기록합니다.
팁/Web

UI 디자이너에게 추천하는 크롬 확장 프로그램

by W디자이너 2021. 6. 28.

 

디자이너들에게 도움이 되는 크롬 확장 프로그램을 소개합니다.

 

 

 

 

 

 

 

 

 

01. 서핏(디자인 정보)

다양한 플랫폼에서 생성된 디자인 정보를 한 곳에서 확인할 수 있습니다. 그리고 기획, 개발, 마케팅 등 IT분야의 전반적인 정보도 확인할 수 있습니다. 마지막으로 디렉토리 카테고리에서 다양한 디자이너분들의 포트폴리오들도 불 수 있어서 정말 유용합니다.

 

설치 링크 : 바로가기 >

 

서핏 - 매일 성장하는 사람들의 커리어 지식 플랫폼

새 탭에서 펼쳐지는 추천 커리어 콘텐츠, 매일 성장하고 더 멋지게 일하세요.

chrome.google.com

 

 

 

 

02. GoFullPage - Full Page Screen Capture(스크롤 캡처)

웹페이지의 스크롤 캡처(긴 화면 캡처)할 수 있는 확장 프로그램입니다.

2021.06.18 - [팁/Web] - 웹, 프로그램 등 PC에서 긴 화면 스크롤 캡처하는 방법

 

설치 링크 : 바로가기 >

 

GoFullPage - Full Page Screen Capture

추가 권한을 요청하지 않고 현재 페이지의 스크린샷을 전체적으로 캡처하고 신뢰할 수 있습니다!

chrome.google.com

 

 

 

 

03. Google Drive에 저장(스크롤 캡처 및 구글 드라이브 저장)

GoFullPage - Full Page Screen Capture 확장 프로그램과 같이 웹페이지의 전체 화면을 캡처(스크롤 캡처)한 다음 바로 구글 드라이브에 저장해주는 확장 프로그램입니다. 2개의 PC에서 작업을 진행할 때, 유용하게 사용할 수 있습니다.

(Mac에서 캡처한 이미지 <-> Windows에서 캡처한 이미지)

 

설치 링크 : 바로가기 >

 

Google Drive에 저장

웹 콘텐츠 또는 화면 캡처를 Google Drive에 직접 저장합니다.

chrome.google.com

 

 

 

 

04. ColorPick Eyedropper(컬러 코드 추출)

웹페이지의 컬러 코드를 간단하게 추출할 수 있는 확장 프로그램입니다.

 

설치 링크 : 바로가기 >

 

ColorPick Eyedropper

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

chrome.google.com

 

 

 

 

05. CSS Peeper(CSS 확인)

웹페이지의 Margin, Padding, Color, Font 등 CSS 구조를 파악할 수 있는 확장 프로그램입니다.

 

설치 링크 : 바로가기 >

 

CSS Peeper

Extract CSS and build beautiful styleguides.

chrome.google.com

 

 

 

 

 

06. User-Agent Switcher for Chrome(디바이스 변경)

크롬 웹브라우저를 Android, iOS, Windows Phone 등 여러 가지 디바이스로 변환해주는 프로그램입니다. 웹페이지가 다양한 디바이스에서 어떻게 UI가 변경되는지 확인할 수 있으며, 반응형, 적응형 웹페이지의 UI도 확인할 수 있습니다.

 

설치 링크 : 바로가기 >

 

User-Agent Switcher for Chrome

Spoofs & Mimics User-Agent strings.

chrome.google.com

 

 

 

 

07. LOOM(화면 녹화)

웹 서비스의 프로세스를 분석할 때, 화면 하나하나를 캡처하기보다는 진행되는 과정을 녹화하는 것이 시간 절약 및 작업 효율을 높일 수 있는 방법입니다.

 

설치 링크 : 바로가기 >

 

Loom for Chrome

Video messaging for work.

chrome.google.com

 

 

 

 

08. Image Downloader(이미지 다운로드)

웹사이트에 있는 이미지를 한 번에 다운받을 수 있고 다운이 안되는 이미지도 전부 다운 받을 수 있습니다.

 

설치 링크 : 바로가기 >

 

Image Downloader

Browse and download images on the web

chrome.google.com

 

2021.04.02 - [팁/Web] - 웹사이트에서 이미지 다운로드 받는 방법(Feat. 크롬 브라우저)

 

웹사이트에서 이미지 다운로드 받는 방법(Feat. 크롬 브라우저)

웹사이트에서 필요한 이미지를 다운로드하여야 할 경우가 생기는데요. 일반적인 이미지 같은 경우는 마우스 우클릭으로 이미지를 저장받을 수 있지만 특정 이미지 같은 경우는 우클릭해도 이

wdesigner.tistory.com

 

2021.07.28 - [팁/Web] - 크롬 확장 프로그램 단축키로 실행하기

 

크롬 확장 프로그램 단축키로 실행하기

크롬 확장 프로그램에 단축키를 설정해서 쉽고 빠르게 실행할 수 있습니다. 지금부터 사용 방법을 설명해 드릴게요. 크롬 확장 프로그램 단축키 설정 페이지 링크 : chrome://extensions/shortcuts 이동

wdesigner.tistory.com

 

반응형