당신의 AI는 테스트를 작성할 뿐만 아니라 실행까지 합니다.

I’m happy to translate the article for you, but I’ll need the full text of the post (the paragraphs you’d like translated). Could you please paste the article’s content here? Once I have it, I’ll provide a Korean translation while keeping the source link and formatting exactly as you requested.

실제 브라우저에서 실행되는 테스트 작성

대부분의 AI‑생성 테스트는 Node.js에서 jsdom(시뮬레이션된 DOM)을 대상으로 실행됩니다. 이는 많은 경우에 동작하지만, 실제 컴포넌트와 실제 라우팅, 실제 네트워크 모킹이 적용된 실제 애플리케이션 안에서 실행되는 것과는 다릅니다.

TWD 테스트는 브라우저에서 실행됩니다. 실행 중인 앱 내부에서 실제 DOM을 대상으로, 실제 컴포넌트 트리를 마운트한 상태에서 동작합니다. /twd 스킬—TWD AI 플러그인의 일부—은 테스트를 작성하고, 브라우저에서 실행하며, 결과를 읽고, 실패가 발생하면 코드를 수정하고 다시 실행합니다.

전체 흐름

1. 작성 – 에이전트가 프로젝트의 테스트 규칙을 이해하기 위해 .claude/twd-patterns.md 파일을 읽고, 해당 패턴을 따르는 테스트를 생성합니다.
2. 실행 – 테스트는 twd-relay라는 WebSocket 릴레이를 통해 브라우저로 전송됩니다. 이 릴레이는 에이전트를 앱 내에서 실행 중인 TWD 사이드바와 연결합니다.
3. 결과 읽기 – 통과/실패 상태가 오류 상세 정보를 포함한 일반 텍스트 형태로 반환됩니다(스크린샷이나 DOM 덤프는 제공되지 않으며, 필요한 신호만 전달됩니다).
4. 수정 및 재실행 – 테스트가 실패하면 에이전트가 오류를 읽고 테스트를 조정한 뒤 다시 실행합니다.

이 루프는 자동으로 진행되며, 완료될 때까지 사용자는 개입하지 않아도 됩니다.

릴레이 작동 방식 (무겁게 만들지 않기)

twd-relay는 에이전트와 브라우저 사이에 WebSocket 연결을 사용합니다. 에이전트가 테스트를 실행하고 싶을 때, 릴레이를 통해 명령을 보냅니다. 브라우저는 실행 중인 앱 내부에서 테스트를 수행합니다 — 실제 DOM을 대상으로, 여러분이 모킹한 API 응답이 적용된 상태이며, 실제 컴포넌트 상태도 그대로 사용합니다.

결과는 간결한 텍스트로 돌아옵니다: 통과했나요? 그리고, 통과하지 못했다면 오류 메시지는 무엇이었나요? 이렇게 하면 토큰 사용량이 놀라울 정도로 낮아지며, 에이전트는 터미널에서 보는 것과 동일한 구조화된 실행 가능한 출력을 얻게 됩니다.

빌드하기 전에 실행하기

권장 워크플로는 테스트‑우선입니다. 기능을 구현하기 전에 /twd를 실행하세요.

/twd Write a test for the checkout form — it should verify that submitting with an empty email shows a validation error

에이전트는 기존 패턴을 기반으로 테스트를 작성하고, 브라우저에서 실행합니다. 그리고 아직 기능이 존재하지 않기 때문에 테스트가 실패합니다. 이 실패는 일종의 명세 역할을 합니다. 그런 다음 기능을 구현하면 테스트가 통과하고, 테스트 구조, 셀렉터, 혹은 목 설정에 대해 고민할 필요가 없습니다; 에이전트가 프로젝트에서 이미 알고 있는 패턴을 사용해 이를 처리합니다.

테스트가 통과되지 않을 때 발생하는 일

모든 테스트가 첫 번째 시도에서 바로 고쳐지는 것은 아닙니다. 때때로 에이전트가 해결할 수 없는 경우를 만나게 됩니다 — 예상과 다르게 동작하는 구성 요소이거나, 깔끔하게 변환되지 않는 패턴일 수 있습니다.

/twd 스킬은 이를 위해 강제 제한을 두고 있습니다: 세 번의 수정 시도 후에도 테스트가 여전히 실패하면 해당 테스트는 it.skip 으로 표시되고 파일에 주석으로 남겨집니다. 이는 나머지 테스트 실행을 차단하지 않으며, 나중에 실제 문제를 조사할 수 있게 해줍니다. 이 접근 방식은 신뢰성을 유지합니다: 실패가 조용히 숨겨지는 것이 아니라 드러나게 됩니다.

대화 정리하기

/twd 스킬은 포크된 컨텍스트에서 실행되므로 테스트 반복, 실패 시도 및 수정 사이클이 메인 대화와 별도로 진행됩니다. 작업이 끝나면 수십 개의 디버깅 메시지를 스크롤하지 않아도, 통과된 항목, 건너뛴 항목 및 생성된 파일에 대한 요약을 받게 됩니다.

구체적인 예시

Vue 컴포넌트를 만들어 사용자 데이터를 가져와 표시한다고 가정해 보세요. 다음과 같이 호출합니다:

/twd Write tests for the UserProfile component

작동 방식:

• 에이전트는 .claude/twd-patterns.md 파일을 읽어 프로젝트 규칙, twd.mockRequest() 로 API 엔드포인트를 모킹하는 방법, screenDom 으로 사용할 셀렉터 등을 학습합니다.
• /api/users/:id 엔드포인트를 모킹하고, 페이지를 방문하며, 표시된 데이터를 검증하는 테스트를 생성합니다.
• 릴레이를 통해 브라우저에서 테스트를 실행합니다.
• 테스트가 실패하면(예: 셀렉터가 마크업과 일치하지 않을 경우) 에이전트가 오류를 읽고 쿼리를 수정한 뒤 다시 실행합니다.
• 모든 테스트가 최종적으로 통과합니다.

총 소요 시간: 수동 개입 없이 2분 미만.

실제 시작에 필요한 것들

• 앱에서 실행되는 TWD 사이드바 (twd-js에서).
• 로컬에서 실행되는 twd-relay.
• /twd:setup으로 생성된 .claude/twd-patterns.md.
• twd‑ai 저장소에서 설치한 /twd 스킬.

그게 전부입니다. 릴레이는 브라우저 연결을 처리하고, 패턴 파일은 규칙을 정의하며, 스킬은 나머지를 조정합니다.

다음 주제: CI 설정

테스트를 로컬에서 작성하고 실행하는 것은 전체의 절반에 불과합니다. 나머지 절반은 테스트를 CI 파이프라인에 통합하여 브라우저 없이도 매 푸시마다 헤드리스로 실행되도록 하는 것입니다.

이 시리즈의 다음 글은 /twd:ci-setup을 다루며, 헤드리스 CLI 러너를 사용해 CI에서 TWD 테스트를 실행하도록 프로젝트를 설정합니다. AI가 작성한 테스트를 배포 게이트로 활용하고 싶다면 이 글을 읽어보세요.