← 기능 섹션으로 돌아가기
Pro

기술 스택

Site Stack은 어떤 웹사이트든 스캔하여 완전한 기술 스택을 식별합니다. 프론트엔드 프레임워크(React, Vue, Angular, Svelte), 메타 프레임워크(Next.js, Nuxt, SvelteKit), CMS 플랫폼(WordPress, Shopify), 분석 도구(Google Analytics, Hotjar), CDN(Cloudflare, Vercel) 등 수십 가지를 찾아줍니다. 감지된 모든 기술은 이름, 버전, 아이콘과 함께 카테고리별 패널에 정리되어 표시됩니다.

웹사이트가 어떤 기술을 사용하는지 파악하는 것은 경쟁사 분석, 학습, 채용 결정, 영업 준비에 유용합니다. BuiltWith나 Wappalyzer 같은 서비스도 이런 기능을 제공하지만, 별도의 웹사이트를 방문하거나 전용 확장 프로그램을 설치해야 합니다. Site Stack은 DevSuite Pro에 직접 내장되어 있습니다 — 아무 페이지에서나 활성화하면 즉시 전체 기술 스택 분석 결과를 볼 수 있습니다.

이 도구는 여러 신호를 분석해 작동합니다. JavaScript 전역 변수(React.__SECRET, __NEXT_DATA__, __NUXT__), HTML 메타 태그와 속성(generator, ng-version), HTTP 헤더(X-Powered-By, Server), 스크립트와 스타일시트 URL(cdn.shopify.com, googletagmanager.com), DOM 구조 패턴 등입니다. 결과는 프론트엔드 프레임워크, 메타 프레임워크, CMS/플랫폼, 분석 및 트래킹, CDN 및 호스팅, UI 라이브러리, 빌드 도구 등의 카테고리로 정리됩니다.

처음에 빈 화면이나 스켈레톤 HTML 응답 후 클라이언트 측에서 하이드레이션되는 싱글 페이지 앱은, 원본 서버 응답만 확인하는 대신 페이지가 안정된 후 다시 스캔하는 방식으로 처리됩니다 — 이는 프레임워크가 마운트되기 전에 탐지기가 실행되어 React나 Vue 사이트가 기술 없이 보이는 흔한 오탐을 방지합니다. 탐지된 각 기술은 얼마나 많은 독립적인 신호가 이를 확인했는지에 기반한 신뢰도 지표를 함께 보여주므로, 어떤 결과가 확실하고 어떤 결과를 직접 다시 확인해봐야 하는지 한눈에 알 수 있습니다.

라이브 미리보기
example.com
감지된 기술
프론트엔드 프레임워크
R
React
N
Next.js
v14.1
분석 및 추적
GA
Google Analytics 4
H
Hotjar
CDN 및 호스팅
CF
Cloudflare
Vercel
주요 기능

프론트엔드 프레임워크 감지

React, Vue, Angular, Svelte, Preact, Solid, Alpine.js, jQuery 등 프론트엔드 라이브러리를 식별합니다. 가능한 경우 정확한 버전 번호를 표시합니다(예: React 18.2.0, Vue 3.4.21). 압축된 프로덕션 빌드에서도 감지합니다.

CMS 및 이커머스 플랫폼

WordPress(테마와 플러그인 포함), Shopify, Wix, Squarespace, Webflow, Ghost, Drupal, Magento, WooCommerce 등을 감지합니다. 브랜딩이 제거된 경우에도 플랫폼을 식별합니다.

분석 및 마케팅 도구

Google Analytics(GA4 및 UA), Google Tag Manager, Meta Pixel, Hotjar, Mixpanel, Segment, Amplitude, Intercom, Crisp 채팅 등 페이지에 설치된 추적 및 마케팅 도구를 찾아줍니다.

CDN, 호스팅 및 인프라

Cloudflare, Vercel, Netlify, AWS CloudFront, Fastly, GitHub Pages, Firebase Hosting 등 CDN/호스팅 제공자를 HTTP 헤더, DNS 해석, 리소스 URL로부터 식별합니다.

UI 라이브러리 및 빌드 도구

Tailwind CSS, Bootstrap, Material UI, Chakra UI, Styled Components, Webpack, Vite, Parcel 등 UI/빌드 도구를 CSS 클래스 패턴, 스크립트 구조, 에셋 명명 규칙으로부터 감지합니다.

버전이 포함된 카테고리별 결과

모든 감지된 기술이 이름, 아이콘, 버전 번호, 신뢰 수준과 함께 라벨이 붙은 카테고리로 정리됩니다. 결과를 클릭하면 어떤 신호가 감지를 유발했는지 확인할 수 있습니다.

주요 활용 사례

경쟁 기술 분석

경쟁사 웹사이트를 방문하여 기술 스택을 파악하세요. React를 사용하나 Vue를 사용하나? 어떤 분석 도구를 쓰고 있나? 어떤 CDN으로 에셋을 제공하나? 이러한 인사이트를 바탕으로 자신의 기술 결정을 내릴 수 있습니다.

영업 prospecting 및 리드 검증

WordPress 플러그인을 판매 중인가요? 잠재 고객 사이트가 WordPress인지 먼저 확인하세요. Shopify 통합을 제안한다면 플랫폼을 검증하세요. Site Stack이 즉각적인 리드 검증 데이터를 제공합니다.

기술 패턴 학습

존경하는 웹사이트를 방문하여 어떤 기술이 작동하는지 확인하세요. Stripe가 Next.js를 사용하고, Linear가 React를 사용하며, 빠르게 로드되는 사이트가 Cloudflare와 Vite를 함께 사용한다는 것을 발견할 수 있습니다. 잘 어울리는 기술 조합을 배울 수 있습니다.

자신의 기술 표면 감사

프로덕션 사이트에서 Site Stack을 실행하여 외부에 어떤 것이 보이는지 확인하세요. 제거한 도구의 스크립트 태그가 남아 있나요? 프레임워크 버전이 노출되어서는 안 될 때 노출되었나요?

인터뷰 및 연구 준비

회사에 취업 면접을 준비 중인가요? 웹사이트에서 사용하는 기술을 미리 확인하면 관련 경험을 보여주고 스택에 대해 잘 아는 질문을 할 수 있습니다.

사용법
1

Site Stack 활성화

DevSuite Pro 플로팅 독을 열고 Site Stack 아이콘을 클릭하세요. 도구가 페이지의 DOM, 스크립트, 헤더, 메타 태그를 스캔하여 기술 시그니처를 찾습니다.

2

카테고리별 결과 보기

감지된 기술이 Frontend, CMS, Analytics, CDN, UI Libraries, Build Tools 등의 카테고리로 정리되어 나타납니다. 각 항목에 기술 이름, 아이콘, 버전이 표시됩니다.

3

감지 세부 정보 탐색

감지된 기술을 클릭하면 어떤 신호(전역 변수, 메타 태그, 스크립트 URL, DOM 패턴)가 감지를 유발했는지 확인할 수 있습니다.

4

신뢰 수준 확인

각 감지에 신뢰 지표가 표시됩니다. 여러 신호가 일치할수록 신뢰도가 높아집니다. 단일 신호 감지는 "가능성 있음"으로 표시됩니다.

5

여러 사이트 비교

다른 웹사이트로 이동하여 각각 Site Stack을 실행하면 경쟁사, 클라이언트, 참고 사이트 간 기술 선택을 비교할 수 있습니다.

시작할 준비가 되셨나요?

DevSuite Pro를 무료로 설치하고 브라우저용 64개 이상의 개발자 도구를 사용해보세요.

Chrome에 추가 Edge에 추가 Firefox에 추가