좋은 홈페이지를 보다 보면 단순히 색상이나 폰트만 참고하는 것이 아니라 버튼 크기, 여백, 카드 디자인, 그림자 효과까지 분석하고 싶을 때가 있습니다.
예전에는 이런 정보를 확인하기 위해 개발자 도구(F12)를 열어 HTML과 CSS를 직접 찾아보곤 했었습니다.
하지만 개발자가 아니라면 수많은 코드 속에서 원하는 정보를 찾는 것이 쉽지 않았고, 시간이 오래 걸리는 경우도 많았습니다.
그러다 사용하게 된 것이 CSS Peeper였습니다.
CSS Peeper는 웹페이지의 디자인 요소를 쉽고 직관적으로 분석할 수 있는 크롬 확장 프로그램입니다.
복잡한 코드를 직접 확인하지 않아도 버튼 스타일, 색상, 폰트, 여백, 이미지 등을 한눈에 확인할 수 있어 홈페이지 제작이나 상세페이지 디자인을 할 때 자주 사용하는 도구입니다.
이번 글에서는 CSS Peeper 설치 방법부터 사용법, 그리고 실제 디자인 작업에서 어떻게 활용하면 좋은지 자세히 소개해 보겠습니다.
CSS Peeper란?
CSS Peeper는 웹사이트의 CSS 스타일 정보를 시각적으로 분석할 수 있도록 도와주는 크롬 확장 프로그램입니다.
개발자 도구처럼 복잡한 코드 화면을 보여주는 것이 아니라, 디자이너가 이해하기 쉬운 형태로 디자인 정보를 정리해서 보여주는 것이 가장 큰 특징입니다.
대표적으로 다음과 같은 정보를 확인할 수 있습니다.
- 색상(Color)
- 폰트(Font)
- 버튼 스타일
- 여백(Padding, Margin)
- 그림자(Shadow)
- 테두리(Border)
- 이미지(Image)
- CSS 속성
디자인 레퍼런스를 분석할 때 매우 유용한 도구입니다.
설치 방법
크롬 웹 스토어 접속
chrome 웹 스토어 바로 가기 →크롬 웹 스토어에서 CSS Peeper를 검색합니다.
공식 확장 프로그램인지 확인한 후 설치를 진행합니다.
Chrome에 추가
Chrome에 추가 버튼을 클릭합니다.
권한을 확인하면 설치가 완료됩니다.
확장 프로그램 고정하기
브라우저 오른쪽 상단 퍼즐 아이콘을 클릭한 뒤 CSS Peeper를 고정해 두면 언제든 빠르게 실행할 수 있습니다.
기본 사용 방법
홈페이지 접속
분석하고 싶은 홈페이지를 엽니다.
페이지가 모두 로딩된 상태에서 실행하는 것이 좋습니다.
CSS Peeper 실행
브라우저 상단의 CSS Peeper 아이콘을 클릭합니다.
잠시 후 현재 페이지의 디자인 정보가 정리되어 표시됩니다.
별도로 개발자 도구를 열 필요가 없습니다.
원하는 요소 선택하기
분석하고 싶은 버튼이나 카드, 텍스트 영역에 마우스를 올리면 해당 요소의 CSS 정보가 표시됩니다.
필요한 스타일만 빠르게 확인할 수 있습니다.
어떤 정보를 확인할 수 있을까요?
색상(Color)
홈페이지에서 사용된 주요 색상을 한눈에 확인할 수 있습니다.
브랜드 컬러,
버튼 색상,
배경색,
텍스트 색상 등을 쉽게 분석할 수 있어 디자인 레퍼런스를 수집할 때 유용합니다.
폰트(Font)
사용된 폰트와 크기, 굵기 등을 확인할 수 있습니다.
폰트 분석만 필요하다면 WhatFont가 더 편리하지만, CSS Peeper에서는 다른 디자인 요소와 함께 확인할 수 있다는 장점이 있습니다.
버튼 스타일
버튼의
- 배경색
- 테두리
- 모서리 둥글기(Border Radius)
- 그림자 효과
등을 확인할 수 있습니다.
CTA 버튼을 분석할 때 자주 사용하는 기능입니다.
여백과 레이아웃
카드와 콘텐츠 사이의 여백,
버튼 간격,
섹션의 패딩(Padding)과 마진(Margin)도 확인할 수 있습니다.
좋은 디자인일수록 여백을 어떻게 사용하는지 참고할 부분이 많습니다.
이미지
페이지에서 사용된 이미지를 확인하는 기능도 제공합니다.
다만 이미지 다운로드가 목적이라면 Imageye를 함께 사용하는 것이 더욱 편리합니다.
실무 활용
홈페이지 제작
클라이언트가 참고 사이트를 전달했을 때 버튼 스타일이나 레이아웃을 분석하는 데 도움이 됩니다.
특히 “이런 느낌으로 만들어 주세요.”라는 요청을 받았을 때 디자인 방향을 이해하기 좋습니다.
상세페이지 제작
상세페이지의 정보 구성은 물론 버튼 디자인과 콘텐츠 간격을 분석하는 데 활용할 수 있습니다.
단순히 디자인를 따라 하는 것이 아니라 왜 이렇게 구성 했는지를 이해하는 데 도움이 됩니다.
UI 디자인
로그인 화면,
카드 UI,
메뉴,
배너 등 다양한 UI 요소를 분석하면서 디자인 아이디어를 얻을 수 있습니다.
디자인 시스템 분석
브랜드마다 사용하는 색상과 버튼 스타일에는 일정한 규칙이 있습니다.
CSS Peeper를 활용하면 이러한 디자인 시스템을 쉽게 파악할 수 있습니다.
CSS Peeper의 장점
직접 사용하면서 가장 만족했던 점은 디자인를 코드가 아닌 시각적으로 이해할 수 있다는 것이었습니다.
예전에는 개발자 도구를 열어도 어떤 CSS가 어떤 디자인에 적용되는지 이해하기 어려웠습니다.
하지만 CSS Peeper는 필요한 정보를 보기 쉽게 정리해 주기 때문에 디자이너도 부담 없이 사용할 수 있었습니다.
특히 버튼 스타일과 여백을 분석할 때는 다른 도구보다 훨씬 편리하게 느껴졌습니다.
사용할 때 주의할 점
모든 CSS 정보가 표시되는 것은 아닙니다.
일부 동적인 요소나 JavaScript로 변경되는 스타일은 정확하게 표시되지 않을 수도 있습니다.
참고 자료로 활용하는 것이 좋습니다.
CSS Peeper는 분석 도구입니다.
디자인을 그대로 복제하기 위한 도구가 아니라 좋은 사례를 연구하고 참고하기 위한 목적으로 활용하는 것이 좋습니다.
여러 도구를 함께 사용하는 것이 효율적입니다.
폰트는 WhatFont,
컬러는 ColorZilla,
이미지는 Imageye처럼 목적에 따라 함께 활용하면 더욱 효과적입니다.
함께 사용하면 좋은 크롬 확장 프로그램
WhatFont
웹사이트 폰트를 분석할 수 있습니다.
ColorZilla
브랜드 컬러를 추출할 수 있습니다.
Imageye
페이지에 사용된 이미지를 빠르게 확인할 수 있습니다.
GoFullPage
홈페이지 전체를 저장해 레퍼런스로 관리하기 좋습니다.
Wappalyzer
어떤 기술과 플랫폼으로 제작되었는지 함께 분석할 수 있습니다.
실무 활용 예시
새로운 홈페이지를 분석할 때 저는 먼저 Wappalyzer로 어떤 플랫폼으로 제작되었는지 확인합니다.
그다음 WhatFont로 폰트를 살펴보고, ColorZilla로 브랜드 컬러를 추출합니다.
이후 CSS Peeper를 실행해 버튼 디자인, 카드 스타일, 여백과 그림자 효과를 분석합니다.
필요한 이미지는 Imageye로 저장하고, 마지막으로 GoFullPage를 이용해 페이지 전체를 캡처해 프로젝트 폴더에 정리합니다.
이 과정을 반복하다 보니 단순히 예쁜 디자인를 모으는 것이 아니라, 왜 이런 디자인가 만들어졌는지를 이해하는 습관이 생겼습니다.
경험 나눔
예전에는 홈페이지를 볼 때 색상이나 레이아웃만 눈에 들어왔었습니다.
하지만 프로젝트를 계속 진행하면서 디자인의 완성도는 작은 요소들이 만든다는 것을 알게 되었었습니다.
버튼의 둥근 정도,
그림자의 강도,
콘텐츠 간격,
카드와 카드 사이의 여백처럼 사소해 보이는 요소들이 전체 분위기를 결정하는 경우가 많았습니다.
CSS Peeper를 사용한 이후에는 이런 부분을 자연스럽게 분석하게 되었고, 디자인를 바라보는 시각도 조금씩 달라졌습니다.
지금도 새로운 레퍼런스를 찾으면 가장 먼저 실행하는 크롬 확장 프로그램 중 하나입니다.
마무리
CSS Peeper는 단순히 CSS를 보여주는 도구가 아니라 홈페이지의 디자인 구조를 이해하도록 도와주는 실무 도구입니다.
홈페이지 제작이나 상세페이지 디자인처럼 레퍼런스를 자주 분석하는 작업이라면 생산성을 높이는 데 많은 도움이 됩니다.
좋은 디자인를 만들기 위해서는 많이 만드는 것만큼 많이 분석하는 습관도 중요합니다.
CSS Peeper는 그 과정을 훨씬 쉽고 효율적으로 만들어 주는 크롬 확장 프로그램입니다.
다음 글에서는 Page Ruler를 활용해 웹사이트의 버튼, 이미지, 콘텐츠 크기를 픽셀 단위로 측정하는 방법을 자세히 알아보겠습니다.
