Human-First에서 Agent-First 테스트로: 1년간 구축이 가르쳐준 것

I’m happy to translate the article for you, but I’ll need the full text of the post (the paragraphs, headings, lists, etc.) in order to do the translation. Could you please paste the content you’d like translated? I’ll keep the source line at the top exactly as you provided and preserve all formatting, markdown, and technical terms.

Overview

Shiplight Cloud는 인간 생산성을 크게 향상시키도록 설계된 완전 관리형 클라우드 기반 자연어 테스트 플랫폼입니다. 팀은 시각적으로 테스트를 작성하고, 플랫폼이 실행을 담당하며, 결과는 클라우드에서 관리됩니다. 관리형 테스트 작성 및 실행이 필요한 팀에게 계속 서비스를 제공합니다.

2025년 말에 상황이 변했습니다:

• AI 코딩 에이전트가 테스트 스크립트를 빠르게 생성하지만, 결과물을 검토하기 어렵고 유지 비용이 많이 듭니다. 테스트 양은 증가하지만 신뢰도는 늘어나지 않습니다.
• 역할이 통합되고 있습니다 – 전통적인 PM → 엔지니어 → QA 전달이 사라지고 있습니다. 한 사람이 AI와 함께 정의, 구축, 검증을 점점 더 많이 수행하면서 품질이 별도의 단계가 아닌 통합된 활동이 되고 있습니다.
• 명세가 진실의 원천이 됩니다 – AI가 의도에서 코드를 생성함에 따라 제품 행동의 정형화된 자연어 표현이 코드보다 상위에 위치하게 됩니다.

이를 해결하기 위해 Shiplight Plugins을 도입했습니다. 이는 AI 에이전트와 함께 작업하는 개발자와 자동화 엔지니어를 위한 새로운 제품입니다. 핵심 원칙은 간단합니다: AI가 테스트 생성, 실행 및 유지 관리를 담당하고, 시스템은 각 단계마다 인간이 이해하고 신뢰할 수 있도록 명확한 증거를 제공합니다.

핵심 원칙

• AI 에이전트를 위한 긴밀한 피드백 루프 – AI 코딩 에이전트는 명확하고 즉각적인 피드백을 받을 때 더 나은 결과를 도출합니다. 검증은 개발 중에 이루어지며, 이후가 아닙니다.
• 스펙 기반 – 테스트는 구현 코드가 아니라 제품 사양처럼 읽힙니다. 따라서 팀의 누구든 기술 전문 지식 없이도 무엇을 테스트하는지 검토할 수 있습니다.
• 자동 복구 – 제품 동작이 변하지 않는 한, UI의 외관 및 구조적 변경은 테스트를 깨뜨리지 않습니다.
• 인간이 읽을 수 있는 증거 – 통과/실패 결과는 코드를 보거나 스택 트레이스를 읽지 않아도 팀 누구나 이해할 수 있습니다.
• 성능 – 테스트는 기본적으로 빠르고 반복 가능하며, 가능한 경우 결정론적 재생을 제공하고 필요할 때만 AI 해결을 사용합니다.
• 새로운 플랫폼 학습 불필요 – 개발자가 이미 사용하고 있는 도구와 워크플로우를 확장하여, 완전히 새로운 시스템을 도입하지 않습니다.

Source: …

작동 방식

MCP 통합

MCP와 호환되는 코딩 에이전트는 Shiplight 브라우저 MCP 서버에 연결하여 다음과 같은 기능을 얻습니다:

• 브라우저를 열고, 앱을 탐색하며, 요소와 상호작용하고, 스크린샷을 찍으며, 네트워크 활동을 관찰합니다.
• 기존 Chrome DevTools URL에 연결해 실제 데이터와 인증된 상태가 있는 실행 중인 개발 환경을 테스트합니다.
• 원격 및 헤드리스 설정을 위한 릴레이 서버를 사용합니다.

YAML로 테스트 작성

Shiplight 테스트는 자연어 지향 YAML로 작성되어 AI가 생성한 Playwright 스크립트의 가독성 및 유지보수 문제를 해결합니다.

# shiplight-test.yaml
goal: Verify that a user can log in and create a new project
base_url: https://your-app.com
statements:
  - URL: /login
  - intent: Enter email address
    action: input_text
    locator: "getByPlaceholder('Email')"
    text: "{{TEST_EMAIL}}"
  - intent: Enter the password
    action: input_text
    locator: "getByPlaceholder('Password')"
    text: "{{TEST_PASSWORD}}"
  - intent: Click Sign In
    action: click
    locator: "getByRole('button', { name: 'Sign In' })"
  - VERIFY: The dashboard is visible with a welcome message
  - intent: Click "New Project" in the sidebar
    action: click
    locator: "getByRole('link', { name: 'New Project' })"
  - VERIFY: The project creation form is displayed

각 테스트는 흐름을 인간적인 표현으로 설명합니다. 기능을 정의한 사람이라면 테스트 코드를 이해하지 못하더라도 검토할 수 있습니다. 파일은 레포에 존재하고 PR에서 리뷰되며, 깔끔한 diff를 생성합니다. 의도 기반 단계는 실행 시 AI를 통해 해결되거나, 결정적인 재생을 위해 캐시된 로케이터를 사용합니다.

테스트 실행 및 디버깅

• shiplight test – 로컬에서 테스트를 실행합니다.
• shiplight debug – 인터랙티브 디버거를 열어 테스트를 한 단계씩 진행하면서 브라우저 상태를 확인하고, 단계들을 현장에서 수정합니다.

보고서

실행이 끝난 뒤 Shiplight은 HTML 보고서를 생성합니다. 보고서에는:

• 자연어 단계와 스크린샷이 짝을 이룹니다.
• 실패 시 실제 페이지 스크린샷, 기대 동작, 그리고 AI가 생성한 설명(예: “환영 메시지를 기대했지만 페이지에 ‘Session Expired’가 표시됩니다”)이 표시됩니다.
• 코드 컨텍스트 없이도 팀 누구나 읽을 수 있는 형태입니다.

CI/CD 통합

테스트는 레포에 있는 순수 YAML 파일입니다. CLI는 Node.js가 실행되는 어디서든 동작하므로 Shiplight을 CI에 추가하는 것이 간단합니다:

# Example GitHub Actions step
- name: Run Shiplight tests
  run: npx shiplight test ./tests

GitLab CI, CircleCI 등에서도 동일한 방식으로 단계만 추가하고 테스트 디렉터리를 지정하면 됩니다.

클라우드 기능 (선택 사항)

Shiplight Cloud는 예약 실행, 팀 대시보드, 히스토리 트렌드, 호스팅된 보고서를 제공합니다. 필요할 때만 사용할 수 있으며, 핵심 루프는 CLI와 기존 CI만으로 완전히 동작해 벤더 락인 없이 사용할 수 있습니다.

혜택

• Real‑browser verification during development – AI 에이전트가 코드 리뷰 전에 UI 변경을 검증합니다.
• Stable regression tests generated automatically – 검증이 개발의 부수 효과가 되어 추가 노력 없이 회귀 커버리지를 구축합니다.
• AI‑driven self‑healing – 의도 기반 단계가 UI 변경에 적응하고, 캐시된 로케이터가 실행을 빠르게 유지하며, 필요할 때만 AI가 해결합니다.
• Enterprise‑ready security – SOC 2 Type II 인증, 데이터 암호화, 역할 기반 접근 제어, 불변 감사 로그, 99.99 % 가동 시간 SLA.

빠른 시작 가이드

1. CLI 설치

   npm install -g shiplight

2. 테스트 파일 만들기 (예: login-create-project.yaml) 위의 YAML 사양을 사용하세요.
3. 로컬에서 실행

   shiplight test ./login-create-project.yaml

4. CI에 추가 – 파이프라인에 shiplight test 명령을 포함하세요.
5. 옵션 – Shiplight 대시보드에서 리포지토리를 연결하여 Shiplight Cloud 기능을 활성화하세요.

YAML Test Language Spec

Shiplight YAML 언어에 대한 전체 사양은 저장소의 docs/yaml-spec.md에 있습니다. 여기에는 다음이 정의됩니다:

• 최상위 키(goal, base_url, statements).
• 문장 유형(URL, intent, VERIFY).
• 지원되는 액션(click, input_text, select 등).
• 로케이터 구문(Playwright‑스타일 선택자).
• 변수 삽입({{VARIABLE}}).

조건부 단계, 루프, 맞춤형 AI 해결자와 같은 고급 기능은 사양을 참조하십시오.

Shiplight 플러그인 개요

이 플러그인들은 npm 패키지로 배포되며 단일 npm install 명령으로 모든 Node.js 프로젝트에 추가할 수 있습니다.