홈페이지 개발 과정에서는 다양한 업무들이 반복됩니다. 그래서 개발자들은 이를 간소화하거나 효율을 높이기 위해 다양한 도구들을 활용하곤 하는데요. 그중 대표적인 도구가 바로 ‘구글 크롬 확장 프로그램’입니다.
구글 크롬 확장 프로그램은 구글이 만든 웹브라우저 ‘크롬'(chrome)에서 자체적으로 연동해 사용할 수 있는 프로그램을 말합니다. 대표적인 게 캡처 도구나, 웹서핑 중 찾은 이미지나 글을 저장하는 도구 등이죠. 아래 홈페이지 개발 과정에서 사용하면 좋은 구글 크롬 확장 프로그램 9가지를 선별해 추천드립니다.
✍️ 이 글의 순서
• 레퍼런스 ‘수집’할 때 유용한 구글 크롬 확장 프로그램
• 레퍼런스 ‘분석’할 때 유용한 구글 크롬 확장 프로그램
• ‘실무자 추천’ 웹 개발 구글 크롬 확장 프로그램
레퍼런스 ‘수집’할 때 유용한 구글 크롬 확장 프로그램
by 위시켓
1. 풀스크린 캡처 프로그램
GoFullPage는 말 그대로 사이트의 전체 이미지를 캡처하는 확장 프로그램인데요. 스크롤이 긴 사이트도 시작부터 끝까지 전체적으로 캡처할 수 있습니다.
2. 디바이스별 실제 화면 비교하는 프로그램
사용하는 스마트폰 기종에 따라 사이즈나 보이는 화면이 조금씩 다릅니다. 일반적으로는 구글 크롬의 F12(개발자 도구)를 활용하면 쉽게 확인할 수 있어요. 하지만 Responsive Viewer는 각 디바이스별 화면을 비교해서 볼 수 있다는 장점이 있답니다.
3. 각 요소의 간격과 사이즈 알려주는 프로그램
UI/UX를 위해서는, 화면 구성 요소의 간격 하나에도 심혈을 기울여야 합니다. Pixel measurement를 사용하면 웹페이지 구성 요소의 간격을 자동으로 알려줍니다. 또 해당 부분의 사이즈도 알려주기 때문에, 각 요소의 레퍼런스를 수집할 때도 효과적입니다. 마우스 오버만으로도 각 항목의 여백을 보여주기 때문에, 레퍼런스 수집 중이신 분들은 꼭 설치해 보세요.
4. 이미지 다운로드 프로그램
Image Downloader는 현재 사이트에 있는 모든 이미지를 다운로드할 수 있는 도구입니다. 만약 레퍼런스 웹사이트와 똑같은 클론 코딩을 해야 한다면 이 툴이 매우 유용하죠. 같은 레이아웃이라고 해도 이미지의 퀄리티에 따라 사이트의 분위기가 달라지기 때문에, 레퍼런스를 구체적으로 분석하시거나 적용하실 예정이라면 꼭 활용하시기 바랍니다.
Image Downloader – ⒸPact Interactive
레퍼런스 ‘분석’할 때 유용한 크롬 확장 프로그램
by 위시켓
5. 폰트 찾아주는 프로그램
웹페이지에서 폰트 디자인은 브랜드의 이미지를 전달하는데 상당히 중요한 역할을 합니다. 같은 디자인이라도 폰트에 따라 분위기는 물론, 사용자의 만족도도 달라지니까요. WhatFont는 웹 사이트 내에서 사용한 서체명과 폰트 크기, 폰트 굵기에 대한 정보를 제공해 줍니다. 다만 이미지로 된 폰트는 분석하지 못하니 참고하세요.
6. 사용한 컬러값 확인하는 프로그램
레퍼런스 조사 중 웹페이지에 사용한 컬러와 완전히 같은 컬러를 사용하고 싶다면? 보통 해당 페이지를 캡처한 다음 이미지 편집 프로그램에서 색을 추출하여 확인하는 게 일반적입니다. 이렇게 하면 캡처하는 과정에서 색이 손상될 수도 있고, 무엇보다 과정이 번거롭다는 단점이 있는데요. ColorZilla를 사용하면 해당 웹에 사용한 컬러 정보를 손쉽게 찾고, 바로 복사할 수 있습니다. 디자인 작업을 하거나, 기획안에 컬러 값을 입력해야 할 때 바로 적용할 수 있습니다.
ColorZilla – Ⓒiosart labs llc
‘실무자 추천’ 웹 개발 구글 크롬 확장 프로그램
by 위시켓
7. Json 형식 데이터를 가독성 있게 정리하는 프로그램
JSON 데이터는 웹 개발, API 통신, 데이터 분석 등 다양한 분야에서 널리 사용됩니다. 하지만 복잡한 JSON 데이터를 직접 확인하기란 쉽지 않은데요. JSONVue와 같은 확장 프로그램을 사용하면 JSON 데이터의 구조와 내용을 쉽게 파악할 수 있어 업무 효율성이 크게 향상됩니다. 특히 웹 스크래핑, 데이터 분석 등의 작업 시 JSON 데이터를 빠르게 확인할 수 있어 매우 유용하죠.
8. Cookie 데이터 조회, 수정, 삭제를 도와주는 프로그램
EditThisCookie는 쿠키 관리의 편의성, 브라우징 경험 향상, 보안 및 프라이버시 강화 등의 장점이 있어 개발자들이 사용하기에 매우 유용한 확장 프로그램입니다. 이 확장 프로그램을 활용하면 웹 애플리케이션 개발 및 디버깅, 사용자 경험 개선, 보안 관리 등의 업무를 효율적으로 수행할 수 있습니다.
9. 파라미터 확인하고 수정할 수 있는 프로그램
데이터 분석, 맞춤형 기능 구현, 디버깅 등의 작업을 할 때, 개발자들은 파라미터를 확인하면서 작업하는 경우가 많습니다. 이럴 때 vParam 확장 프로그램을 사용하면 파라미터 관리가 편리해지고, 개발 생산성이 향상되며, 사용자 경험이 개선되는 등의 장점이 있어요.
💡 이 글은 ‘위시켓’에서 작성했습니다 : 2012년 설립된 위시켓은 지금까지 ‘세상이 일하는 방식을 더 행복하게’ 만들기 위해 IT 아웃소싱 시장에 혁신을 만들어가고 있습니다. 현재까지 97,569개의 기업이 누적 7,519억 원 이상의 프로젝트를 믿고 맡겨주셨습니다.
🔖 함께 보면 도움되는 글
[공지] 위시켓 ‘무료상담 신청’으로 IT 프로젝트 시작
