사용자 에이전트 파서: 브라우저 및 기기 정보 해독하기

2026년 3월 31일 · 12분 읽기

사용자 에이전트 이해하기

웹사이트를 방문할 때마다 브라우저는 "사용자 에이전트 문자열"이라는 작은 텍스트를 전송합니다. 이 문자열은 브라우저, 운영 체제 및 버전에 대한 정보를 담고 있습니다. 이것은 단순한 무작위 문자가 아니라 문자열의 각 부분이 고유한 역할을 합니다.

웹 앱이라고 상상해보세요. 방문자가 Chrome을 사용하는지 Safari를 사용하는지 알고 싶지 않나요? 이를 통해 웹사이트는 브라우저의 기능에 맞는 방식으로 콘텐츠를 제공할 수 있습니다. 예를 들어, 사이트는 애니메이션을 잘 지원하지 않는 브라우저에서 애니메이션을 비활성화하여 성능과 사용자 경험을 개선할 수 있습니다.

또 다른 중요한 정보는 운영 체제입니다. 웹사이트는 Windows 사용자인지 Mac 사용자인지에 따라 다른 기능을 제공할 수 있습니다. 예를 들어, 특정 기능이 최신 버전의 MacOS에서만 호환되는 경우, 운영 체제를 알면 웹사이트가 문제를 해결하거나 잠재적인 불일치에 대해 사용자에게 직접 알릴 수 있습니다.

사용자의 기기 유형(휴대폰이나 태블릿 등)을 이해하는 것은 연설하기 전에 분위기를 파악하는 것과 같습니다. 이는 접근 방식을 효과적으로 맞춤화하는 데 필수적인 열쇠입니다. 모바일 사용자는 데스크톱 사용자와 다른 상호작용을 기대하며, 반응형 디자인 결정은 종종 정확한 기기 감지에 달려 있습니다.

사용자 에이전트 파서란 무엇인가?

여기서 사용자 에이전트 파서가 등장합니다. 이 문자열을 가져와서 이해할 수 있게 만들어줍니다. 누군가가 어떤 브라우저와 기기를 사용하는지 알아내는 해독 링이라고 생각하세요.

이것은 단순히 기술적인 것이 아닙니다. 분석, 사용자 경험 맞춤화, 오류 수정에 매우 유용합니다. 인터넷 사용자의 72%가 자신의 기기에서 보기 좋지 않으면 웹사이트를 완전히 포기한다는 점을 고려하세요. 바로 여기서 사용자의 기기를 아는 것이 중요합니다.

사용자 에이전트 파서는 다음과 같은 원시 문자열을 가져옵니다:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

그리고 이를 구조화되고 실행 가능한 데이터로 변환합니다:

• 브라우저: Chrome 121.0.0.0
• 운영 체제: Windows 10
• 기기 유형: 데스크톱
• 아키텍처: 64비트

파서는 패턴 매칭, 버전 추출 및 기기 분류의 힘든 작업을 수행합니다. 이것이 없다면 복잡한 정규 표현식을 작성하고 끝없는 브라우저 서명 목록을 유지 관리해야 하는데, 이는 어떤 개발자도 원하지 않는 악몽입니다.

사용자 에이전트 파싱이 중요한 이유

개발자와 기업이 사용자 에이전트 파싱에 의존하는 이유는 다음과 같습니다:

• 분석 및 보고: 기술적 수준에서 청중 인구 통계 이해
• 기능 감지: 브라우저 기능에 따라 적절한 기능 제공
• 버그 추적: 브라우저별 문제를 더 빠르게 식별
• 콘텐츠 최적화: 기기에 적합한 이미지, 비디오 및 레이아웃 제공
• 보안: 의심스러운 봇 트래픽 및 자동화된 스크래퍼 감지
• A/B 테스팅: 타겟 실험을 위해 브라우저 또는 기기별로 사용자 세분화

사용자 에이전트 문자열의 구조

사용자 에이전트 문자열은 반표준화된 형식을 따르지만 시간이 지남에 따라 점점 더 복잡해졌습니다. 일반적으로 접하게 될 구성 요소를 분석해 보겠습니다.

기본 구조

대부분의 사용자 에이전트 문자열에는 다음 요소가 포함됩니다:

1. 제품 토큰: 역사적 이유로 일반적으로 "Mozilla/5.0"으로 시작
2. 플랫폼 정보: 괄호 안의 운영 체제 및 아키텍처 세부 정보
3. 엔진 정보: 렌더링 엔진(WebKit 또는 Gecko 등)
4. 브라우저 정보: 실제 브라우저 이름 및 버전

다음은 실제 예제를 분석한 것입니다:

Mozilla/5.0 (iPhone; CPU iPhone OS 17_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1

브라우저별 일반적인 패턴

브라우저마다 사용자 에이전트 문자열 형식에 고유한 특성이 있습니다. 다음은 몇 가지 예입니다:

Windows의 Chrome:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

macOS의 Firefox:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:122.0) Gecko/20100101 Firefox/122.0

Windows의 Edge:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0

Chrome과 Edge가 거의 동일하게 보이나요? Edge가 이제 Chromium을 기반으로 구축되었기 때문입니다. 유일한 차이점은 끝에 있는 "Edg" 토큰입니다.

사용자 에이전트 문자열 해독 방법

사용자 에이전트 문자열을 수동으로 해독하는 것은 지루하고 오류가 발생하기 쉽습니다. 그렇기 때문에 전용 파서나 도구를 사용하는 것이 현명한 접근 방식입니다. 수동 및 자동화된 방법을 모두 살펴보겠습니다.

수동 파싱 (권장하지 않음)

정규 표현식을 작성하여 정보를 추출할 수 있지만 이 접근 방식에는 심각한 단점이 있습니다:

• 브라우저가 업데이트됨에 따라 사용자 에이전트 문자열이 자주 변경됨
• 새로운 기기와 브라우저가 지속적으로 등장함
• 엣지 케이스와 변형이 많음
• 유지 관리가 풀타임 작업이 됨

다음은 JavaScript에서 수동 파싱이 어떻게 보일 수 있는지에 대한 간단한 예입니다:

const userAgent = navigator.userAgent;

// 브라우저 감지 (매우 단순화됨)
let browser = 'Unknown';
if (userAgent.includes('Firefox')) browser = 'Firefox';
else if (userAgent.includes('Edg')) browser = 'Edge';
else if (userAgent.includes('Chrome')) browser = 'Chrome';
else if (userAgent.includes('Safari')) browser = 'Safari';

// OS 감지 (매우 단순화됨)
let os = 'Unknown';
if (userAgent.includes('Windows')) os = 'Windows';
else if (userAgent.includes('Mac')) os = 'macOS';
else if (userAgent.includes('Linux')) os = 'Linux';
else if (userAgent.includes('Android')) os = 'Android';
else if (userAgent.includes('iOS')) os = 'iOS';

이 코드는 취약하며 수많은 엣지 케이스를 놓칩니다. 프로덕션에서 사용하지 마세요.

사용자 에이전트 파서 도구 사용

더 나은 접근 방식은 전용 파서를 사용하는 것입니다. 우리의 사용자 에이전트 파서 도구는 코딩 없이 즉각적이고 정확한 파싱을 제공합니다.

사용자 에이전트 문자열을 붙여넣기만 하면 다음을 얻을 수 있습니다:

• 브라우저 이름 및 버전
• 운영 체제 및 버전
• 기기 유형 (데스크톱, 모바일, 태블릿)
• 기기 브랜드 및 모델 (가능한 경우)
• 렌더링 엔진 세부 정보

이는 빠른 분석, 디버깅 또는 사용자가 실제로 사이트에 액세스하는 데 사용하는 것을 이해하는 데 완벽합니다.

파서 라이브러리 사용

애플리케이션에서 프로그래밍 방식으로 파싱하려면 여러 우수한 라이브러리가 있습니다:

JavaScript/Node.js:

• ua-parser-js - 가볍고 널리 사용됨
• bowser - TypeScript 지원이 있는 최신 API
• platform - 간단하고 신뢰할 수 있음

Python:

• user-agents - 포괄적인 파싱 라이브러리
• ua-parser - 인기 있는 ua-parser의 포트

PHP:

• WhichBrowser/Parser - 광범위한 기기 데이터베이스
• donatj/phpuseragentparser - 가벼운 옵션

사용자 에이전트 파싱 구현하기

다양한 프로그래밍 언어와 프레임워크에서 실용적인 구현 예제를 살펴보겠습니다.

JavaScript 구현

인기 있는 ua-parser-js 라이브러리 사용:

import UAParser from 'ua-parser-js';

const parser = new UAParser();
const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...';

parser.setUA(userAgent);

const result = parser.getResult();

console.log(result.browser.name);    // "Chrome"
console.log(result.browser.version); // "121.0.0.0"
console.log(result.os.name);         // "Windows"
console.log(result.os.version);      // "10"
console.log(result.device.type);     // undefined (데스크톱)

웹 애플리케이션에서 현재 사용자의 에이전트에 직접 액세스할 수 있습니다:

const parser = new UAParser(navigator.userAgent);
const result = parser.getResult();

// 기기에 따라 경험 맞춤화
if (result.device.type === 'mobile') {
  // 모바일 최적화 자산 로드
  loadMobileUI();
} else {
  // 데스크톱 경험 로드
  loadDesktopUI();
}

서버 측 구현 (Node.js/Express)

들어오는 요청에서 사용자 에이전트 파싱:

import express from 'express';
import UAParser from 'ua-parser-js';

const app = express();

app.get('/api/device-info', (req, res) => {
  const parser = new UAParser(req.headers['user-agent']);
  const result = parser.getResult();
  
  res.json({
    browser: result.browser,
    os: result.os,
    device: result.device
  });
});

// 모든 요청에 파싱된 UA를 추가하는 미들웨어
app.use((req, res, next) => {
  req.userAgent = new UAParser(req.headers['user-agent']).getResult();
  next();
});

Python 구현

user-agents 라이브러리 사용:

from user_agents import parse

user_agent_string = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_2 like Mac OS X)...'
user_agent = parse(user_agent_string)

print(user_agent.browser.family)  # "Mobile Safari"
print(user_agent.browser.version_string)  # "17.2"
print(user_agent.os.family)  # "iOS"
print(user_agent.os.version_string)  # "17.2"
print(user_agent.is_mobile)  # True
print(user_agent.is_tablet)  # False
print(user_agent.is_pc)  # False

PHP 구현

WhichBrowser/Parser 사용:

<?php
require 'vendor/autoload.php';

use WhichBrowser\Parser;

$userAgent = $_SERVER['HTTP_USER_AGENT'];
$result = new Parser($userAgent);

echo $result->browser->name;     // "Chrome"
echo $result->browser->version;  // "121.0"
echo $result->os->name;          // "Windows"
echo $result->os->version;       // "10"
echo $result->device->type;      // "desktop"

if ($result->isMobile()) {
    // 모바일 콘텐츠 제공
}
?>

📚 You May Also Like