홈페이지나 쇼핑몰 상세페이지를 보다 보면 참고하고 싶은 이미지가 여러 장 있는 경우가 있습니다.
예전에는 필요한 이미지를 하나씩 저장하거나 화면을 캡처해서 사용했었습니다.
하지만 이미지가 많은 페이지에서는 같은 작업을 반복해야 했고, 저장하는 데만도 꽤 많은 시간이 걸렸습니다.
그러다 사용하게 된 것이 Imageye였습니다.
Imageye는 현재 보고 있는 웹페이지의 이미지를 한 번에 찾아 보여주고, 원하는 이미지를 선택해 다운로드할 수 있는 크롬 확장 프로그램입니다.
특히 홈페이지 제작이나 상세페이지 디자인처럼 다양한 레퍼런스를 수집하는 작업에서는 시간을 크게 줄여주는 도구입니다.
이번 글에서는 Imageye 설치 방법부터 실제 사용법, 실무에서 어떻게 활용하는지까지 자세히 소개해 보겠습니다.
Imageye란?
Imageye는 웹페이지에 포함된 이미지를 자동으로 찾아 목록으로 보여주는 크롬 확장 프로그램입니다.
이미지를 하나씩 직접 저장하지 않아도 페이지에 있는 이미지를 한눈에 확인하고 필요한 것만 선택해서 다운로드할 수 있습니다.
특히 다음과 같은 작업에서 활용도가 높습니다.
- 홈페이지 레퍼런스 수집
- 상세페이지 이미지 분석
- 배너 디자인 참고
- UI 이미지 저장
- 콘텐츠 자료 수집
디자인 작업을 자주 한다면 생산성을 높여주는 도구 중 하나입니다.
설치 방법
크롬 웹 스토어 접속
chrome 웹 스토어 바로 가기 →크롬 웹 스토어에서 Imageye를 검색합니다.
공식 확장 프로그램인지 확인한 후 설치를 진행합니다.
Chrome에 추가
Chrome에 추가 버튼을 클릭하면 설치가 시작됩니다.
권한을 확인한 후 몇 초면 설치가 완료됩니다.
확장 프로그램 고정하기
브라우저 오른쪽 상단 퍼즐 아이콘을 클릭한 뒤 Imageye를 고정해 두면 더욱 편리하게 사용할 수 있습니다.
자주 사용하는 도구라면 미리 고정해 두는 것을 추천합니다.
기본 사용 방법
Imageye는 사용 방법도 매우 간단합니다.
웹페이지 열기
이미지를 저장하고 싶은 홈페이지나 상세페이지를 엽니다.
페이지가 모두 로딩된 후 실행하는 것이 좋습니다.
Imageye 실행
확장 프로그램 아이콘을 클릭하면 현재 페이지에 있는 이미지가 자동으로 검색됩니다.
몇 초 후 이미지 목록이 화면에 표시됩니다.
이미지 선택하기
검색된 이미지 중 필요한 이미지를 선택합니다.
썸네일 형태로 보여주기 때문에 원하는 이미지를 쉽게 찾을 수 있습니다.
다운로드하기
선택한 이미지를 개별 다운로드하거나 여러 장을 한 번에 저장할 수 있습니다.
페이지에 따라 수십 장의 이미지도 몇 번의 클릭만으로 저장할 수 있습니다.
실무 활용
상세페이지 제작
쇼핑몰 상세페이지를 분석할 때 가장 많이 사용하는 기능입니다.
상품 이미지,
아이콘,
배너,
상세 설명 이미지 등을 빠르게 확인할 수 있어 레이아웃이나 콘텐츠 구성을 분석하기 좋습니다.
홈페이지 제작
홈페이지에 사용된 배너나 섹션 이미지를 참고할 때 활용할 수 있습니다.
특히 메인 비주얼이나 카드 이미지 구성을 분석할 때 도움이 됩니다.
디자인 레퍼런스 수집
좋은 이미지를 발견했을 때 하나씩 저장하는 대신 필요한 이미지만 선택해서 빠르게 정리할 수 있습니다.
프로젝트별 폴더를 만들어 관리하면 새로운 작업을 시작할 때 훨씬 효율적입니다.
콘텐츠 기획
블로그나 랜딩페이지를 기획할 때도 어떤 이미지가 사용되었는지 확인하면서 콘텐츠 구성 방식을 분석할 수 있습니다.
Imageye의 장점
직접 사용하면서 가장 만족했던 부분은 이미지를 찾는 시간을 크게 줄여준다는 점이었습니다.
예전에는 이미지를 하나씩 저장해야 했지만,
Imageye를 사용한 이후에는 필요한 이미지를 한 번에 확인하고 저장할 수 있게 되었습니다.
특히 긴 상세페이지에서는 수십 장의 이미지를 정리해야 하는 경우가 많은데, 이런 반복 작업을 줄여주는 효과가 컸습니다.
사용할 때 주의할 점
Imageye는 웹페이지에 표시되는 이미지를 검색하는 도구입니다.
따라서 모든 이미지를 다운로드할 수 있는 것은 아닙니다.
저작권 확인하기
다운로드한 이미지를 그대로 사용하는 것은 권장되지 않습니다.
이미지는 저작권이 있을 수 있으므로 참고 자료나 분석 목적으로 활용하는 것이 좋습니다.
배경 이미지는 검색되지 않을 수도 있습니다.
일부 홈페이지는 CSS 배경 이미지 방식으로 제작되어 있습니다.
이 경우에는 Imageye 목록에 나타나지 않는 경우도 있습니다.
너무 작은 이미지도 함께 표시됩니다.
아이콘이나 로고처럼 작은 이미지도 함께 검색됩니다.
다운로드하기 전에 크기를 확인하는 것이 좋습니다.
함께 사용하면 좋은 크롬 확장 프로그램
WhatFont
웹사이트의 폰트를 분석할 수 있습니다.
ColorZilla
브랜드 컬러를 추출할 때 함께 사용하면 좋습니다.
CSS Peeper
이미지뿐 아니라 CSS 구조와 여백까지 함께 분석할 수 있습니다.
GoFullPage
이미지를 저장한 뒤 전체 페이지도 함께 캡처하면 레퍼런스를 더욱 체계적으로 관리할 수 있습니다.
실무 활용 예시
새로운 프로젝트를 시작하면 저는 먼저 참고할 만한 홈페이지를 찾습니다.
그다음 WhatFont로 폰트를 확인하고, ColorZilla로 브랜드 컬러를 분석합니다.
이후 CSS Peeper를 통해 버튼 스타일과 여백을 살펴본 뒤, Imageye를 실행해 페이지에서 사용된 이미지를 확인합니다.
마지막으로 GoFullPage를 이용해 페이지 전체를 저장하고 프로젝트 폴더에 정리합니다.
이렇게 자료를 모아두면 다음 프로젝트를 진행할 때 필요한 레퍼런스를 다시 찾는 시간이 크게 줄어들었습니다.
단순히 이미지를 저장하는 것이 아니라 디자인의 구성과 흐름까지 함께 분석하는 습관을 만드는 데도 많은 도움이 되었습니다.
경험 나눔
예전에는 좋은 상세페이지를 발견하면 필요한 이미지를 하나씩 저장했었습니다.
이미지가 많을수록 저장하는 시간도 길어졌고, 어떤 이미지를 먼저 저장했는지 헷갈리는 경우도 있었습니다.
Imageye를 사용한 이후에는 작업 방식이 훨씬 간단해졌습니다.
페이지에 있는 이미지를 한눈에 확인하고 필요한 것만 선택할 수 있어 반복 작업이 크게 줄었습니다.
무엇보다 프로젝트를 준비할 때 레퍼런스를 수집하는 시간이 짧아졌고, 그만큼 디자인를 분석하고 기획하는 데 더 많은 시간을 사용할 수 있었습니다.
지금도 새로운 홈페이지나 상세페이지를 분석할 때 빠지지 않고 사용하는 크롬 확장 프로그램 중 하나입니다.
마무리
Imageye는 웹사이트의 이미지를 손쉽게 확인하고 관리할 수 있는 실무형 크롬 확장 프로그램입니다.
특히 홈페이지 제작이나 상세페이지 디자인처럼 레퍼런스를 자주 수집하는 작업이라면 생산성을 높이는 데 많은 도움이 됩니다.
이미지를 하나씩 저장하는 번거로운 작업을 줄이고 싶다면 한 번 사용해 보시길 추천드립니다.
다음 글에서는 Wappalyzer를 활용해 홈페이지가 어떤 기술과 플랫폼으로 제작되었는지 확인하는 방법을 자세히 알아보겠습니다.
