Magnitude: 테스트 자동화 프레임워크에서 AI 브라우저 제어 자동화 프레임워크로 진화한 프로젝트

9bow · 6월 30, 2025, 9:30오후

Magnitude 소개

웹 애플리케이션 테스트 자동화는 오랜 시간 개발자와 QA 엔지니어들에게 핵심 과제로 여겨져 왔습니다. Selenium, Cypress, Playwright 등 다양한 도구들이 등장했지만, 여전히 UI의 빈번한 변경이나 복잡한 사용자 흐름에 따른 유지보수 문제는 완전히 해결되지 않았습니다. 이에 대한 새로운 해법으로 AI 기반 접근 방식이 떠오르고 있으며, 그 중심에는 Magnitude가 있습니다.

magnitude

Magnitude는 이전에 한 번 소개해드렸었는데요, 당시에는 AI 기반의 웹 애플리케이션 테스트 프레임워크로 소개했었습니다. 자연어 기반 테스트 작성, 시각적 UI 인식, 그리고 AI를 통한 테스트 계획 수립 등 혁신적인 기능을 통해 기존 테스트 자동화 도구들이 가지는 한계를 극복하고자 했습니다. 예를 들어, 테스트 케이스를 자연어로 기술하면 시각적 에이전트가 실제 사용자처럼 동작하며, 테스트 중 문제가 발생하면 AI가 이를 감지하고 조정하는 방식이었습니다.

하지만 최근의 Magnitude는 단순한 테스트 프레임워크를 넘어서, AI 브라우저 자동화 프레임워크로 진화했습니다. 이제는 테스트에 국한되지 않고, 브라우저 상에서 수행되는 다양한 작업을 자연어로 제어할 수 있는 범용 도구로 확장된 것입니다. 이처럼 역할의 범위가 넓어지면서, Magnitude는 단순한 테스트 도구가 아니라 브라우저 에이전트를 위한 기반 기술로 자리 잡고 있습니다.

이전 버전(테스트 자동화 프레임워크)과 현재 버전(AI 브라우저 자동화 프레임워크) 비교

초기 Magnitude는 테스트 자동화를 위해 다음과 같은 기능을 제공했습니다:

자연어 기반 테스트 작성: 사람이 읽고 이해할 수 있는 자연어로 테스트 케이스를 작성.
시각적 UI 인식: 화면 구성 요소를 시각적으로 해석하여 DOM 변화에 강인함.
AI 기반 테스트 추론: 예외 상황에 유연하게 대응하며 테스트 흐름을 자동 조정.
CI/CD 통합: 테스트 스크립트를 파이프라인에 통합 가능.

그러나 최신 버전의 Magnitude는 단순한 테스트 목적을 넘어 다음과 같은 방식으로 진화했습니다:

자연어로 브라우저 제어: 단순 클릭이나 입력뿐 아니라 작업 흐름 전체를 제어 가능.
멀티 레벨 추상화: 고수준(업무 흐름)과 저수준(픽셀 단위 조작) 액션을 모두 지원.
데이터 추출 기능: 웹 페이지에서 필요한 정보를 시각적으로 파악하여 추출.
미래 지향적 구조: 데스크탑 앱, 가상머신 등 웹 외 환경 확장을 위한 비전 중심 아키텍처 도입.

결국, 초기에는 테스트 중심의 기능을 제공했던 Magnitude가, 이제는 일반적인 브라우저 자동화 및 에이전트 기술 플랫폼으로 진화한 것입니다.

Magnitude의 최신 기능 개요

자연어 기반 브라우저 제어 수행

사용자는 사람이 말하듯 자연어로 명령을 입력하면, Magnitude는 이를 해석하여 마우스 클릭, 키보드 입력, 드래그 등 실제 UI 조작을 수행합니다. 이 방식은 특히 비개발자에게도 직관적이며, 교육 없이도 사용할 수 있을 만큼 접근성이 좋습니다. 예를 들어, “할 일을 생성하고 제목과 설명을 입력하세요”라는 명령은 agent.act() 함수로 전달되며, 내부적으로 적절한 클릭, 입력 등의 액션으로 변환됩니다.

await agent.act('Create a task', {
  data: {
    title: 'Use Magnitude',
    description: 'Run "npx create-magnitude-app"',
  },
});

시각적 이해를 바탕으로 한 데이터 추출

Magnitude는 단순히 액션만 수행하는 것이 아니라, DOM을 시각적으로 해석하여 데이터를 추출할 수도 있습니다. 시각적으로 페이지를 분석하여, DOM 구조와 상관없이 필요한 데이터를 추출할 수 있으며, 이를 위해 zod 스키마 기반의 데이터 구조를 활용하여, 결과를 정형화된 형식으로 받아올 수 있습니다. 예를 들어, 특정 컬럼의 항목들을 추출하려는 경우, agent.extract() 함수로 요청할 수 있습니다.

const tasks = await agent.extract(
  'List in progress tasks',
  z.array(z.object({
    title: z.string(),
    description: z.string(),
    difficulty: z.number().describe('Rate the difficulty between 1-5')
  })),
);

테스트 자동화 및 CI 통합

이전 버전에서의 강점이었던 테스트 자동화 기능도 여전히 포함되어 있습니다. magnitude-test 패키지를 통해 테스트 러너를 설치하고, npx magnitude init을 실행하면, 기본 테스트 디렉토리와 설정 파일이 자동으로 생성됩니다. 이를 통해 CI/CD 파이프라인과도 쉽게 연동할 수 있습니다. 시각적 검증, 실패 시 대응 전략 등의 기능도 그대로 유지됩니다

npm i --save-dev magnitude-test
npx magnitude init
# 기본 설정 파일: magnitude.config.ts
# 예제 테스트: example.mag.ts

대규모 모델 기반 비전 AI 활용

Claude Sonnet 4, Qwen-2.5VL 72B 등 대형 비전 언어 모델과 연동이 가능하며, 이를 통해 실제 사용자의 시각적 추론과 유사한 방식으로 페이지를 분석하고 판단합니다. 이는 DOM 기반 접근보다 훨씬 일반화 성능이 높고, 다양한 UI 디자인에 강인합니다.

기존 브라우저 자동화 도구는 DOM 구조에 의존하기 때문에, 동적 페이지나 프론트엔드 프레임워크를 사용하는 환경에서 예외 처리가 잦고 유지보수가 어렵습니다. 반면, Magnitude는 실제 UI의 픽셀 위치 기반으로 동작하기 때문에 DOM 구조의 변경에 영향을 덜 받으며, 가상머신이나 데스크탑 앱 자동화까지 확장 가능성이 있습니다.

또한, 작업을 반복 가능하고 예측 가능한 방식으로 실행할 수 있도록 ‘네이티브 캐시 시스템’도 설계 중입니다. 이는 추후 대규모 자동화에 유리한 기반이 될 것입니다.

라이선스

Magnitude 프로젝트는 Apache-2.0 라이선스로 공개 및 배포되고 있습니다. 자유로운 사용, 수정, 재배포가 가능하며, 상업적 사용도 허용됩니다.

Magnitude 프로젝트 GitHub 저장소

Magnitude 프로젝트 공식 문서 사이트

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~