좋은 홈페이지나 상세페이지를 발견하면 나중에 참고하기 위해 캡처해 두는 경우가 많습니다.
하지만 일반 화면 캡처는 현재 보이는 화면만 저장되기 때문에 긴 웹페이지를 여러 번 나눠 캡처해야 하는 번거로움이 있습니다.
예전에는 스크롤을 조금씩 내리면서 여러 장을 저장한 뒤 하나씩 이어 붙여 정리했었습니다.
시간도 오래 걸리고 중간이 잘리거나 겹치는 경우도 자주 있었습니다.
그러다 사용하게 된 것이 GoFullPage였습니다.
GoFullPage는 웹페이지를 처음부터 끝까지 자동으로 캡처해 하나의 이미지나 PDF로 저장할 수 있는 크롬 확장 프로그램입니다.
홈페이지 제작이나 상세페이지 디자인처럼 레퍼런스를 자주 수집하는 작업에서는 지금도 가장 자주 사용하는 도구 중 하나입니다.
이번 글에서는 설치 방법부터 실무 활용법까지 자세히 소개해 보겠습니다.
GoFullPage란?
GoFullPage는 현재 보고 있는 웹페이지를 끝까지 자동으로 스크롤하면서 하나의 이미지로 저장해 주는 크롬 확장 프로그램입니다.
별도의 프로그램을 설치할 필요가 없으며 클릭 한 번이면 긴 페이지도 손쉽게 저장할 수 있습니다.
특히 다음과 같은 작업에서 많이 활용됩니다.
- 홈페이지 레퍼런스 저장
- 상세페이지 분석
- 경쟁사 벤치마킹
- UI 디자인 수집
- 포트폴리오 자료 정리
설치 방법
크롬 웹 스토어 접속
chrome 웹 스토어 바로 가기 →크롬 웹 스토어에서 GoFullPage를 검색합니다.
공식 확장 프로그램을 선택한 후 설치를 진행합니다.
Chrome에 추가
Chrome에 추가 버튼을 클릭한 뒤 권한을 확인하면 설치가 완료됩니다.
설치 시간은 1분 이내입니다.
확장 프로그램 고정하기
브라우저 오른쪽 상단 퍼즐 아이콘을 클릭한 후 GoFullPage를 고정해 두면 더욱 편리하게 사용할 수 있습니다.
기본 사용 방법
사용법은 매우 간단합니다.
전체 페이지 열기
저장하고 싶은 홈페이지나 상세페이지를 엽니다.
가능하면 페이지가 모두 로딩된 상태에서 실행하는 것이 좋습니다.
캡처 시작
GoFullPage 아이콘을 클릭하면 자동으로 페이지를 끝까지 스크롤하면서 캡처를 시작합니다.
사용자는 별도로 조작할 필요가 없습니다.
이미지 저장
캡처가 완료되면 미리보기가 나타납니다.
여기서 PNG 또는 PDF 형식으로 저장할 수 있습니다.
프로젝트에 따라 필요한 형식을 선택하면 됩니다.
실무 활용
홈페이지 제작
참고하고 싶은 홈페이지를 저장해 두면 디자인 회의나 기획 단계에서 활용하기 좋습니다.
특히 긴 랜딩페이지는 전체 흐름을 한 번에 볼 수 있다는 장점이 있습니다.
상세페이지 제작
쇼핑몰 상세페이지는 길이가 매우 긴 경우가 많습니다.
GoFullPage를 활용하면 한 장의 이미지로 저장할 수 있어
콘텐츠 구성,
CTA 배치,
상품 설명 순서를 분석하기 편리합니다.
디자인 레퍼런스 관리
좋은 디자인은 많이 보는 것도 중요하지만, 나중에 다시 찾을 수 있도록 정리하는 것도 중요합니다.
프로젝트별로 캡처를 저장해 두면 새로운 작업을 시작할 때 훨씬 빠르게 참고할 수 있습니다.
GoFullPage의 장점
직접 사용하면서 가장 만족했던 부분은 시간을 크게 절약할 수 있다는 점이었습니다.
예전에는 긴 페이지를 캡처하기 위해 여러 장의 이미지를 저장하고 이어 붙이는 작업을 반복했었습니다.
GoFullPage를 사용한 이후에는 클릭 한 번으로 모든 과정이 끝났습니다.
특히 클라이언트가 참고 사이트를 보내왔을 때 전체 페이지를 바로 저장해 회의 자료로 활용할 수 있어 업무 효율도 높아졌습니다.
사용할 때 주의할 점
일부 홈페이지는
- 동영상
- 움직이는 배너
- 무한 스크롤
등이 포함되어 있어 캡처가 완벽하지 않을 수도 있습니다.
또한 로그인해야 볼 수 있는 페이지는 정상적으로 저장되지 않는 경우도 있습니다.
중요한 자료라면 저장 후 결과를 한 번 확인하는 것이 좋습니다.
함께 사용하면 좋은 크롬 확장 프로그램
WhatFont
폰트를 분석할 때 함께 사용합니다.
ColorZilla
브랜드 컬러를 추출할 때 유용합니다.
CSS Peeper
버튼, 여백, 색상 등 CSS 정보를 함께 분석할 수 있습니다.
Imageye
페이지에 사용된 이미지를 한 번에 다운로드할 수 있습니다.
실무 활용 예시
홈페이지를 벤치마킹할 때 저는 항상 일정한 순서로 작업했었습니다.
먼저 WhatFont로 폰트를 확인합니다.
그다음 ColorZilla로 브랜드 컬러를 추출합니다.
이후 CSS Peeper를 실행해 버튼 스타일과 여백, 카드 디자인 등을 분석합니다.
마지막으로 GoFullPage를 이용해 페이지 전체를 캡처한 뒤 프로젝트 폴더에 저장합니다.
이렇게 정리해 두면 다음 프로젝트에서 “어디서 봤더라?” 하고 다시 검색할 필요가 거의 없습니다.
좋은 레퍼런스를 체계적으로 모으는 습관은 작업 속도를 높여 줄 뿐 아니라 디자인 아이디어를 발전시키는 데도 큰 도움이 되었습니다.
경험 나눔
예전에는 레퍼런스를 저장하는 것이 오히려 스트레스였습니다.
긴 페이지를 여러 장으로 나눠 캡처하다 보면 순서가 섞이거나 빠지는 부분이 생기기도 했고, 나중에 다시 보려고 하면 어떤 사이트였는지 기억나지 않는 경우도 많았습니다.
GoFullPage를 사용한 이후에는 작업 방식이 많이 바뀌었습니다.
좋은 홈페이지를 발견하면 바로 전체 페이지를 저장하고, 프로젝트별 폴더에 정리하는 습관이 생겼습니다.
이렇게 모인 자료는 새로운 홈페이지를 기획하거나 상세페이지를 제작할 때 큰 도움이 되었습니다.
특히 디자인 자체를 따라 하기보다 콘텐츠 구성과 정보 흐름을 분석하는 시간이 늘어나면서 레퍼런스를 활용하는 방식도 조금씩 달라졌습니다.
마무리
GoFullPage는 단순한 캡처 도구가 아닙니다.
좋은 디자인을 기록하고 관리하는 습관을 만들어 주는 실무 도구입니다.
홈페이지 제작이나 상세페이지 디자인처럼 레퍼런스를 자주 참고하는 작업이라면 꼭 한 번 사용해 보시길 추천드립니다.
다음 글에서는 Imageye를 활용해 웹사이트에 사용된 이미지를 한 번에 다운로드하는 방법을 자세히 알아보겠습니다.
