UI/UX 디자인용으로 사용하는 도구에 관해 묻는다면 직접 연결된 도구인 Sketch, InVision Studio, Figma, Framer X, Adobe XD 등을 직접 사용할 수 있다.
웹 브라우저는 우리가 일상적으로 사용하는 도구 중 하나이며, 디자이너와 개발자들은 크롬을 많이 사용하고 있다. 테스트, 디자인 소스, 웹 브라우저를 통해 영감을 얻고 있으며, 확장 기능을 통해 구체적인 프로세스에 적잖은 영향을 미치고 있는 것 또한 사실이다. 그렇다면 자주 사용하는 편리한 확장 기능은 어떤 것이 있는지 알아보자.
1. 전체 페이지 화면 캡처
현재 브라우저의 전체 페이지 스크린샷을 자동으로 찍는 가장 간단한 방법과 PNG, JPEG 또는 PDF로 내보낼 수 있다.
좀 더 간편하고 프로그램 설치 없이 사용하고 싶다면 이 글을 참고하기 바란다.
2. CSSViewer
글꼴 및 텍스트, 색상 및 배경, 기타 CSS 속성을 보여주는 간단한 CSS 뷰어 확장 툴
3. WhatFont
웹 페이지에서 글꼴을 식별하는 가장 쉬운 방법과 이 확장 기능을 사용하면 웹 글꼴을 가리 키기만 하면 웹 글꼴을 검사할 수 있다.
4. Eye Dropper
Eye Dropper를 사용하면 웹 페이지, 컬러픽커 및 개인 색상 기록에서 색상을 선택할 수 있다.
5. Spectrum
스펙트럼은 웹 페이지에서 다양한 종류의 색맹 결함(Color Vision Deficiencies)을 즉시 테스트할 수 있다.
6. Site Palette
무료 브라우저 확장 프로그램이다. 디자이너와 프론트엔드 개발자를 위한 필수 툴이며, 모든 웹 사이트의 색상표(color palettes)를 생성할 수 있다.
7. Web Paint
Web Paint는 모양, 선을 그려 라이브 웹 페이지에 텍스트를 추가하고 스크린샷을 찍을 수 있는 다음과 같은 사용하기 쉬운 그리기 도구를 제공한다.
8. Google Font Previewer
몇 가지 텍스트 스타일 옵션을 사용하여 Google 글꼴 디렉터리에서 글꼴을 선택하고 현재 탭에서 미리 볼 수 있다.
9. Open Designer Tools
이 확장 프로그램은 브라우저에 눈금자와 지침을 추가할 수 있다. 요소를 완벽하게 정렬하고, 요소 사이의 공간을 측정하며, 정렬 문제를 발견하거나 브라우저에서 디자인하는 데 사용할 수 있다. 눈금자를 사용하여 안내선을 추가하고 요소를 선택 및 비교하고 오프셋, 거리 및 크기를 볼 수 있다. 나중에 그리드를 추가하고, 가이드를 저장, 이동 및 제거하고, 설정을 변경할 수도 있다.
10. Smart Page Ruler
Smart Page Ruler는 웹 페이지의 모든 요소를 보다 정확하게 측정하는 개발자 도구이다. Zeplin 응용 프로그램으로 요소의 상대 및 절대 위치를 얻을 수 있으며 필요한 모든 여백, 패딩, 너비, 높이를 얻을 수 있다.
11. Muzli 2
웹에서 가장 신선한 디자인, UI, UX 및 대화식 뉴스(Interactive News) 및 사진을 제공한다. 필요한 모든 디자인 영감 얻을 수 있지 않을까~
12. 한국어 맞춤법 검사기
한국어 맞춤법 검사기이다. 웹 브라우저상에서 검사를 원하는 부분을 드래그하여 선택 후 아이콘 또는 단축키를 누르면 검사 결과가 나온다.
13. Window Resizer
다양한 화면 해상도를 에뮬레이트하기 위해 브라우저 창 크기를 조절할 수 있다.
이 확장 프로그램은 다양한 해상도를 에뮬레이트하기 위해 브라우저 창 크기를 조정한다. 특히 웹 디자이너와 개발자가 다른 브라우저 해상도로 레이아웃을 테스트하도록 도와줌으로써 유용하다.
14. Design Grid Overlay
이 확장 툴은 디자인 그리드 시스템에 대한 그리드 및 측정 오버레이를 표시한다. 다양한 디자인 시나리오에 맞게 구성할 수 있다.
디자인 그리드를 사용하는 것은 시각 매체, 특히 웹 사이트 전반에 걸쳐 시각적인 조화와 리듬을 만드는 확실한 방법이다. 이 디자인 그리드 플러그인은 부트스트랩(Bootstrap), 스킨(Skin), 퓨어(Pure), 서시(Susy), 파운데이션(Foundation) 등 많은 인기 있는 그리드 시스템에서 작동하도록 구성할 수 있다.
이 확장을 통해 열(columns), 거터(gutters) 및 너비(widths)의 그리드 사양을 입력한 다음 그리드 가이드 및 요소 측정값을 표시하여 페이지의 내용을 정렬할 수 있다.
15. Web Developer
Web Developer Extension은 다양한 웹 개발자 도구를 사용하여 브라우저에 도구 모음 단추를 추가한다.
16. svg-grabber – get all the svg’s from a site
웹 사이트에서 모든 SVG 자산을 빠르게 미리 보고 복사하거나 다운로드할 수 있다.
svg-grabber를 사용하면 웹 사이트의 모든 SVG 아이콘과 그림 코드를 미리 보고 다운로드하고 복사할 수 있다.
