홈페이지를 보다 보면 “이 사이트는 어떤 프로그램으로 만들었을까?”라는 궁금증이 생기는 경우가 있습니다.
특히 홈페이지 제작을 시작하거나 좋은 레퍼런스를 분석하다 보면 디자인뿐 아니라 어떤 기술을 사용했는지도 함께 알고 싶어집니다.
예전에는 홈페이지 소스를 직접 확인하거나 개발자에게 물어봐야 하는 경우가 많았습니다.
하지만 개발자가 아니라면 소스를 보고 어떤 CMS나 프레임워크를 사용했는지 판단하기는 쉽지 않았습니다.
그러다 알게 된 것이 Wappalyzer였습니다.
Wappalyzer는 현재 접속한 홈페이지가 어떤 기술로 제작되었는지 한눈에 확인할 수 있는 크롬 확장 프로그램입니다.
워드프레스인지, Shopify인지, React를 사용하는지, 어떤 분석 도구를 설치했는지까지 다양한 정보를 확인할 수 있어 홈페이지를 분석할 때 자주 사용하는 도구입니다.
이번 글에서는 Wappalyzer 설치 방법부터 사용법, 실무 활용법까지 자세히 소개해 보겠습니다.
Wappalyzer란?
Wappalyzer는 홈페이지에서 사용 중인 다양한 웹 기술을 분석해 보여주는 크롬 확장 프로그램입니다.
아이콘 한 번만 클릭하면 사이트에서 사용하는 CMS, 웹 프레임워크, 웹 서버, 마케팅 도구, 광고 플랫폼, 분석 도구 등을 확인할 수 있습니다.
대표적으로 다음과 같은 정보를 확인할 수 있습니다.
- CMS
- 프레임워크
- JavaScript 라이브러리
- 웹 서버
- CDN
- 광고 도구
- 분석 도구
- 결제 시스템
- 전자상거래 플랫폼
홈페이지를 제작하거나 경쟁사를 분석할 때 활용도가 매우 높은 도구입니다.
설치 방법
크롬 웹 스토어 접속
chrome 웹 스토어 바로 가기 →크롬 웹 스토어에서 Wappalyzer를 검색합니다.
공식 확장 프로그램을 선택한 뒤 설치를 진행합니다.
Chrome에 추가
Chrome에 추가 버튼을 클릭합니다.
권한을 확인하면 설치가 완료됩니다.
확장 프로그램 고정하기
브라우저 오른쪽 상단 퍼즐 아이콘을 클릭한 후 Wappalyzer를 고정해 두면 언제든 빠르게 사용할 수 있습니다.
기본 사용 방법
사용 방법은 매우 간단합니다.
홈페이지 접속
분석하고 싶은 홈페이지를 엽니다.
페이지가 모두 로딩된 상태에서 실행하는 것이 좋습니다.
Wappalyzer 실행
브라우저 상단의 Wappalyzer 아이콘을 클릭합니다.
몇 초 안에 해당 홈페이지에서 사용 중인 기술 목록이 표시됩니다.
기술 확인하기
홈페이지마다 사용하는 기술이 다르기 때문에 표시되는 정보도 달라집니다.
예를 들어 다음과 같은 내용을 확인할 수 있습니다.
- WordPress
- Shopify
- React
- Vue.js
- Bootstrap
- Google Analytics
- Google Tag Manager
- Cloudflare
사이트에 따라 더 다양한 기술도 함께 표시됩니다.
어떤 정보를 확인할 수 있을까요?
CMS
가장 많이 확인하는 정보입니다.
워드프레스,
Shopify,
Wix,
Cafe24 등
어떤 플랫폼으로 제작되었는지 쉽게 확인할 수 있습니다.
프레임워크
개발자가 어떤 기술을 사용했는지도 확인할 수 있습니다.
예를 들어
React,
Next.js,
Vue,
Angular 등
다양한 프레임워크가 표시됩니다.
분석 도구
홈페이지 운영에 사용하는 분석 도구도 확인할 수 있습니다.
대표적으로
- Google Analytics
- Google Tag Manager
- Meta Pixel
등을 확인할 수 있습니다.
마케팅을 공부하는 분들에게도 도움이 되는 기능입니다.
전자상거래 플랫폼
쇼핑몰이라면 어떤 플랫폼을 사용하는지도 확인할 수 있습니다.
예를 들어
Shopify,
Cafe24,
Magento,
WooCommerce
등을 쉽게 파악할 수 있습니다.
실무 활용
경쟁사 분석
가장 많이 사용하는 기능입니다.
디자인이 마음에 드는 홈페이지를 발견했을 때 어떤 기술을 사용하는지 확인하면 벤치마킹에 도움이 됩니다.
홈페이지 제작
클라이언트가 참고 사이트를 보내오는 경우가 많습니다.
이때 Wappalyzer를 활용하면 어떤 플랫폼으로 제작되었는지 빠르게 확인할 수 있습니다.
프로젝트 방향을 잡는 데 도움이 됩니다.
쇼핑몰 제작
쇼핑몰을 준비하는 경우에도 유용합니다.
경쟁사가 어떤 플랫폼을 사용하는지 확인하면서 장단점을 비교할 수 있습니다.
마케팅 분석
광고 도구나 분석 도구를 확인하면서 홈페이지 운영 방식을 참고할 수도 있습니다.
Wappalyzer의 장점
직접 사용하면서 가장 좋았던 점은 홈페이지를 보는 시야가 넓어진다는 것이었습니다.
예전에는 디자인만 보였다면,
이제는 어떤 플랫폼으로 제작했는지,
어떤 분석 도구를 사용하는지,
어떤 기술을 활용하고 있는지까지 함께 살펴보게 되었습니다.
덕분에 홈페이지를 분석하는 깊이도 자연스럽게 달라졌습니다.
사용할 때 주의할 점
모든 기술이 표시되는 것은 아닙니다.
Wappalyzer는 공개적으로 확인 가능한 정보를 분석합니다.
보안 설정에 따라 일부 기술은 표시되지 않을 수도 있습니다.
결과가 100% 정확한 것은 아닙니다.
간혹 비슷한 기술을 사용하는 경우 잘못 표시되는 사례도 있습니다.
중요한 프로젝트라면 참고 자료 정도로 활용하는 것이 좋습니다.
기술을 안다고 같은 홈페이지를 만들 수 있는 것은 아닙니다.
WordPress를 사용한다고 해서 모두 같은 홈페이지가 만들어지는 것은 아닙니다.
디자인,
기획,
콘텐츠,
개발 방식에 따라 결과는 크게 달라집니다.
함께 사용하면 좋은 크롬 확장 프로그램
WhatFont
홈페이지 폰트를 분석할 수 있습니다.
ColorZilla
브랜드 컬러를 추출할 수 있습니다.
CSS Peeper
버튼과 여백, CSS 구조를 함께 분석할 수 있습니다.
GoFullPage
홈페이지 전체를 저장해 레퍼런스로 관리하기 좋습니다.
Imageye
페이지에 사용된 이미지를 한 번에 확인하고 다운로드할 수 있습니다.
실무 활용 예시
새로운 홈페이지를 분석할 때 저는 항상 일정한 순서로 작업했었습니다.
먼저 Wappalyzer를 실행해 어떤 플랫폼과 기술을 사용하는지 확인합니다.
이후 WhatFont로 폰트를 분석하고, ColorZilla로 브랜드 컬러를 확인합니다.
다음으로 CSS Peeper를 통해 버튼 스타일과 레이아웃을 살펴보고, Imageye로 필요한 이미지를 정리합니다.
마지막에는 GoFullPage로 페이지 전체를 저장해 프로젝트별 레퍼런스 폴더에 보관합니다.
이 과정을 반복하면서 단순히 디자인만 따라 하는 것이 아니라, 홈페이지가 어떤 방식으로 구성되었는지까지 이해하는 습관이 생겼습니다.
경험 나눔
예전에는 좋은 홈페이지를 보면 “디자인가 예쁘다.” 정도만 생각했었습니다.
하지만 프로젝트를 계속 진행하면서 디자인뿐 아니라 제작 방식도 중요하다는 것을 알게 되었습니다.
어떤 CMS를 사용하는지,
어떤 기술을 선택했는지,
어떤 분석 도구를 설치했는지까지 함께 살펴보니 홈페이지를 보는 시각이 많이 달라졌습니다.
특히 클라이언트가 참고 사이트를 전달했을 때 Wappalyzer를 먼저 실행하는 습관이 생겼습니다.
기술 구성을 먼저 이해하면 프로젝트 방향을 잡는 데도 도움이 되었고, 개발자와 소통할 때도 훨씬 수월했습니다.
지금도 홈페이지를 분석할 때 가장 먼저 실행하는 크롬 확장 프로그램 중 하나입니다.
마무리
Wappalyzer는 홈페이지의 겉모습이 아니라 어떤 기술로 만들어졌는지를 이해할 수 있도록 도와주는 실무 도구입니다.
홈페이지 제작을 준비하거나 경쟁사를 분석하고 있다면 디자인뿐 아니라 기술 구성까지 함께 살펴보는 것을 추천드립니다.
이 작은 습관이 홈페이지를 바라보는 시야를 한층 넓혀줄 것입니다.
다음 글에서는 CSS Peeper를 활용해 홈페이지의 색상, 버튼, 여백, UI 디자인을 분석하는 방법을 자세히 알아보겠습니다.
