크롬 확장 프로그램 7탄 – Page Ruler, 웹사이트 요소 크기 측정하는 방법

홈페이지를 제작하거나 상세페이지를 디자인하다 보면 “이 버튼은 몇 픽셀일까?”, “이미지 크기는 얼마나 될까?”처럼 요소의 정확한 크기가 궁금한 순간이 자주 있습니다. 예전에는 화면을 캡처한 뒤 포토샵에서 직접 크기를 재거나 개발자 도구를 열어 하나씩 확인했었습니다. 하지만 이런 방법은 시간이 오래 걸리고, 빠르게 레퍼런스를 분석하기에는 번거로운 경우가 많았습니다. 그러다 사용하게 된 것이 Page Ruler였습니다. Page Ruler는 웹페이지에서 원하는 … 더 읽기

크롬 확장 프로그램 6탄 – CSS Peeper, 홈페이지 디자인 분석하는 방법

좋은 홈페이지를 보다 보면 단순히 색상이나 폰트만 참고하는 것이 아니라 버튼 크기, 여백, 카드 디자인, 그림자 효과까지 분석하고 싶을 때가 있습니다. 예전에는 이런 정보를 확인하기 위해 개발자 도구(F12)를 열어 HTML과 CSS를 직접 찾아보곤 했었습니다. 하지만 개발자가 아니라면 수많은 코드 속에서 원하는 정보를 찾는 것이 쉽지 않았고, 시간이 오래 걸리는 경우도 많았습니다. 그러다 사용하게 된 것이 … 더 읽기

크롬 확장 프로그램 3탄 – GoFullPage, 긴 웹페이지 한 번에 캡처하는 방법

좋은 홈페이지나 상세페이지를 발견하면 나중에 참고하기 위해 캡처해 두는 경우가 많습니다. 하지만 일반 화면 캡처는 현재 보이는 화면만 저장되기 때문에 긴 웹페이지를 여러 번 나눠 캡처해야 하는 번거로움이 있습니다. 예전에는 스크롤을 조금씩 내리면서 여러 장을 저장한 뒤 하나씩 이어 붙여 정리했었습니다. 시간도 오래 걸리고 중간이 잘리거나 겹치는 경우도 자주 있었습니다. 그러다 사용하게 된 것이 GoFullPage였습니다. … 더 읽기