1. 파이어폭스란?
웹브라우저에는 크롬, 파이어폭스, IE, 오페라 등 여러가지가 있습니다. 우리나라에서는 많이 사용하지 않지만 만든 파이어폭스는 외국에서는 나름 인지도가 있는 있는 웹브라우저입니다. 비영리를 추구하는 모질라 재단에서 만들었고 속도면에서 안정적인 것으로 알려져 있죠. 전세계적으로 가장 많이 사용하고 있는 웹브라우저는 현재 크롬이며, 파이어폭스는 스탯카운터 통계로 대략 시장점유율을 2019년 7월 통계로 4.5%정도의 점유율을 보이고 있습니다.
2. 색상추출도구 ColorZila를 사용해보자!
색상을 추출하는 것은 보통 웹디자이너분들이 많이 사용하게 되는 기능이지만 그 외에도 웹퍼블리셔나 개발자들도 종종 특정 컬러코드가 필요한 경우가 있습니다. 그럴 때 빠르게 색상코드를 알 수 있다면 매우 편리하겠지요. 파이어폭스에서는 Colorzila라는 초특급 간편한 색상 추출도구가 있습니다. 이걸 활용해서 간단히 웹브라우저 파이어폭스에서 이미지의 색상을 추출하는 법을 알아보도록 하겠습니다.
3. 부가기능 설치단계
▼ 파이어폭스 브라우저의 우측에 메뉴바를 눌러서 메뉴를 오픈합니다.
▼ 레이어팝업에서 부가기능을 찾습니다.
▼ 부가기능 관리자 메뉴가 새창으로 열립니다.
검색창에서 Colorzila를 넣고 엔터를 치면 colorzila에 대한 결과목록이 새창으로 나오게 되는데요.
▼ 조회결과 페이지.
검색결과에서 맨 위에 있는 Colorzila 부가기능 페이지로 이동해보겠습니다.
▼ ColorZila 부가기능 안내페이지.
해당 기능을 추가할 것이므로 Firefox에 추가라고 버튼으로 기능을 추가합니다.
▼ 확장기능을 추가를 위한 동의알림팝업이 뜹니다.
팝업이 뜨면 추가를 해야만 해당 기능 추가할 수 있습니다~
▼ 부가기능 추가 완료!
▼ 부가기능 설치 완료후 오른쪽에 스포이드 마크같은 게 표시됩니다!
여기까지 잘 따라왔다면 직접 기능을 사용해봐야겠지요!
4. 색상추출 기능 사용해보기.
간단하게 네이버 페이지를 열어보겠습니다. 네이버 로고의 색깔이 초록색인데 정확히 이 컬러가 어떤 컬러코드를 갖고 있는지 알아보도록 할게요. 먼저 아까 생성된 스포이드 마크를 선택한 후에 컬러가 궁금한 네이버 로고를 찍어줍니다. 그러면 바로 3번처럼 상단에 해당 컬러가 보이고 rgb코드(3, 207,93)와 헥사코드르 바로 보여주는 것을 알 수 있습니다.
웹페이지를 간단하게 열어서 색상코드를 알아내는 데 사용할 수도 있고, 웹브라우저로 간단하게 이미지를 열어서 색상코드도 얼마든지 추출할 수도 있습니다. 파이어폭스 사용하고 있었는데 색상추출 애먹으셨다면 컬러질라로 더 손쉽게 알아내면 좋을 것 같네요.
