하나의 웹사이트를 만들기 위해서는 정말 다양한 기술이 필요합니다. 콘텐츠 관리 시스템(CMS), 프레임워크, 각종 스크립트 및 프로그래밍 언어, 결제 시스템까지, 그 종류가 무궁무진하죠.
자주 찾는 웹사이트가 어떻게 작동하는지 궁금하거나, 특정 사이트가 수상한 기술을 사용하고 있는지 확인하고 싶다면 이 글이 도움이 될 것입니다. 웹사이트의 겉모습 너머를 들여다보고 어떻게 구축되었는지 확인할 수 있는 여러 가지 방법을 소개합니다.
1. 웹사이트 소스 코드 직접 보기
개발자가 아니거나 코딩을 막 시작한 초보자라면, 더 나은 프로그래밍 실력을 위한 비밀 하나를 알려드리겠습니다. 바로 다른 사람의 코드를 살펴보는 것입니다.
Chrome 개발자 도구(Chrome DevTools)를 활용하면 사이트의 HTML, JavaScript, CSS 코드를 확인할 수 있고, 어떤 리소스를 사용 중인지 파악할 수 있습니다. 또한 브라우저에서 사이트의 로딩 성능까지 점검할 수 있죠. Chrome뿐만 아니라 주요 웹 브라우저 대부분은 자체적인 개발자 도구를 제공하고 있습니다.
2. BuiltWith
BuiltWith.com은 웹사이트에 사용된 모든 기술을 심층적으로 분석해 주는 전문가 수준의 서비스입니다. 현재 6억 7천만 개가 넘는 웹사이트를 분석 데이터로 보유하고 있으며, 그 규모는 계속 커지고 있습니다. 원래는 소프트웨어 영업 담당자들이 잠재 고객을 발굴하도록 돕는 것이 주요 목적이었습니다.
고급 분석 기능은 유료 구독이 필요하지만, 누구나 BuiltWith.com에 접속해 웹사이트 주소, 기술명, 키워드를 입력하여 상세한 기술 프로필을 받아볼 수 있습니다. 무료 계정에 가입하면 하루에 5번까지 상세 조회가 가능합니다.
3. Netcraft 사이트 리포트
Netcraft는 1995년부터 웹 개발자들에게 신뢰받아 온 리소스입니다. 25년이 넘는 전문성이 무료 Site Report 도구에 고스란히 담겨 있습니다. 이 도구는 기술 분석 리포트와 '누가 이 사이트를 운영하는가'에 대한 배경 조사를 결합해 제공하므로, 사이트에 대한 폭넓은 개요를 파악할 수 있습니다. 호스팅 위치, 소유자 정보, 도메인 사용 이력까지 확인할 수 있죠.
Netcraft 사이트 리포트는 조회 횟수 제한이 없어 보이지만, 꼭 필요할 때만 사용하는 것이 좋습니다. 무료 리소스이며, 개발자 커뮤니티는 이 서비스가 앞으로도 무료로 유지되기를 바라고 있으니까요.
4. W3Techs의 Sites Info
W3Techs의 Sites Info 도구는 다른 서비스들과 조금 다른 방식으로 작동합니다. 자체 데이터베이스를 보유하고 있지만, 해당 도구로 이미 검색된 사이트의 정보만 저장하고 있죠. 처음 조회하는 사이트라면 즉시 크롤링을 통해 정보를 수집합니다.
제공되는 리포트는 다른 서비스보다는 깊이가 다소 부족하지만, 여전히 유용한 인사이트를 얻을 수 있습니다. 사이트에서 사용 중인 CMS, 프로그래밍 언어, 웹 서버, 호스팅 업체 등을 확인할 수 있습니다. 또한 Firefox와 Chrome용 브라우저 확장 프로그램도 제공하므로 클릭 한 번으로 사이트 정보를 확인할 수 있습니다.
5. Wappalyzer
브라우저 플러그인으로 사이트 기술을 확인하고 싶다면 Wappalyzer가 좋은 선택입니다. Firefox, Chrome, Edge용 확장 프로그램을 무료로 제공하며, 사용법이 간단하고 읽기 쉬운 디자인으로 결과를 보여줍니다. 리포트에서 특정 기술을 클릭하면 해당 기술에 대한 설명 페이지로 이동하기 때문에, 처음 보는 기술을 발견했을 때 특히 유용합니다.
Wappalyzer만의 독특한 기능은 웹사이트 변경 알림 설정입니다. 매일 해당 사이트를 점검하여 변화가 감지되면 이메일로 알려주죠. 알림 기능을 이용하려면 무료 계정 생성이 필요하고, 월 10크레딧이 소모됩니다.
다행히 매달 50크레딧을 무료로 제공하며, 알림 하나당 30일마다 10크레딧씩 차감됩니다. 따라서 5개 이하의 사이트를 모니터링한다면 사실상 무료로 사용할 수 있는 셈입니다.
6. Webspotter
Webspotter는 무료 서비스가 거의 없지만 걱정할 필요 없습니다. 무료로 제공되는 Webspotter Chrome 확장 프로그램이 그 부족함을 충분히 만회해 주기 때문입니다. Webspotter 확장 프로그램은 Wappalyzer와 비슷하지만 몇 가지 차별화된 기능이 있습니다. 나열된 각 기술 옆에는 해당 기술의 통계, 그 기술을 사용하는 웹사이트 목록, 공식 홈페이지로 연결되는 링크가 함께 표시됩니다.
더 흥미로운 기능은 웹사이트에서 이메일 연락처, 소셜 미디어 링크, SEO 분석 데이터, 기타 회사 정보를 추출하는 능력입니다. 사이트가 어떻게 만들어졌는지 알려주지는 않지만, 온라인 마케팅이나 취업 활동에 유용하게 활용할 수 있습니다.
7. WordPress Theme Detector
웹 개발에는 큰 관심이 없지만 WordPress 사이트를 만들면서 다른 곳에서 본 기능을 그대로 적용하고 싶은 분이라면, WordPress Theme Detector Chrome 확장 프로그램을 설치해 보세요.
WordPress Theme Detector는 사이트에서 사용 중인 WordPress 테마뿐만 아니라 플러그인까지 알려줍니다. 또한 테마나 플러그인의 제작자와 다운로드 링크까지 함께 보여주기 때문에, 마음에 드는 요소를 내 WordPress 사이트에 손쉽게 적용할 수 있습니다.
웹사이트의 작동 원리를 배워보세요
생각보다 훨씬 쉽게 인터넷상의 어떤 웹사이트든 들여다보고 그 구성 요소를 파악할 수 있습니다. 두 가지 이상의 도구를 함께 사용해 보세요. 어떤 도구는 다른 도구가 놓치는 부분까지 잡아내기 때문입니다.
사이트에서 보이는 대부분의 콘텐츠는 실제로 사용자의 컴퓨터에서 렌더링됩니다. 그렇기 때문에 우리가 이렇게 쉽게 내부를 들여다볼 수 있는 것이죠. 동시에 이것이 바로 여러분의 웹사이트를 최대한 안전하게 만들어야 하는 이유이기도 합니다. 즐거운 탐험이 되시길 바라며, 새롭게 발견한 것들이나 만들어낸 결과물이 있다면 공유해 주세요.