8화. 실패를 영상으로 읽는다 — Trace Viewer로 원인 추적.

AI 시대의 품질 아키텍트 : 테스터에서 시스템 품질 설계자로

Part 0. 오리엔테이션
0화. 30분 데모와 프로덕션 사이의 거리 — 현실 인식과 방향 제시

Part 1. 기초 체력
AI가 짠 코드를 읽고 검증할 수 있는 눈과 웹·API 원리 다지기
1화. AI가 짠 코드를 읽는 눈 — Python 또는 JS/TS 중 하나를 코드 리뷰 가능한 수준까지. 실습: AI가 생성한 테스트 코드의 버그 3개 찾기.
2화. 변경은 diff에서 시작된다 — Git과 PR 기반 협업, 변경 기반 테스트의 첫 단추. 실습: PR diff만 보고 영향 범위 추정해 보기.
3화. 웹은 어떻게 움직이는가 — HTTP, 쿠키·세션의 원리. 실습: 개발자도구로 요청·응답 해부.
4화. 인증의 지도 — OAuth·JWT·RBAC를 테스터 시선으로. 실습: 토큰 만료·권한 우회 시나리오 설계.
5화. API의 두 얼굴 — REST와 GraphQL의 차이와 테스트 관점. 실습: 같은 기능을 두 방식으로 호출·검증.

Part 2. 테스트 자동화
Playwright를 주력으로 깊이 익히기
6화. 왜 Playwright인가 — 도구 선택의 근거와 첫 테스트 작성.
7화. 플래키의 근원, 셀렉터와 대기 — 안정적 셀렉터와 비동기 대기 전략.
8화. 실패를 영상으로 읽는다 — Trace Viewer로 원인 추적.
9화. 계약을 테스트하라 — API·계약 테스트(OpenAPI/GraphQL schema 기반).
10화. 눈에 보이는 회귀, 모두에게 열린 화면 — 시각적 회귀와 접근성 자동 검사. (Selenium·Appium은 레거시·모바일 대응용으로 짧게 짚기)

Part 3. AI 활용·MCP (연재 핵심)
AI를 단순 도구가 아닌 차별화 무기로 만드는 구간
11화. 프롬프트로 테스트를 설계하기 — 명세·PR을 입력해 케이스를 생성·우선순위화하는 패턴 정립.
12화. 에이전트는 무엇을 대신하는가 — 에이전트형 테스트의 개념과 한계(수동 노력 최대 45% 절감 추정).
13화. 스스로 고치는 테스트, 그리고 그 한계 — 자가 치유와 AI Healer. 셀렉터·DOM 변경에서 75%+ 복구, 그러나 복잡한 로직 버그는 사람 몫.
14화. npx playwright init-agents — 첫 MCP 실습 — 접근성 트리 기반 Playwright MCP 시작하기.
15화. MCP로 통합을 검증하다 — MCP 기반 통합 검증 실습.
16화. 환각을 거르는 사람 — AI 결과의 환각·오탐을 걸러내는 인간 검증 체계 설계. 직무 특성상 가장 큰 강점이 되는 지점.

Part 4. 파이프라인·운영
개인기를 조직의 신뢰 시스템으로 연결
17화. 문 앞의 품질 게이트 — CI/CD 품질 게이트 구성.
18화. 플래키를 격리하라 — 불안정 테스트 격리와 실패 원인 자동 분류.
19화. 관측성을 테스트로 환원하기 — 로그·메트릭·트레이스(OpenTelemetry)를 테스트 사고로 끌어오기.
20화. 진짜 같은 가짜 데이터 — 테스트 데이터 합성과 마스킹.

Part 5. 비기능 영역
눈에 보이지 않는 품질 지키기
21화. 무게를 견디는가 — k6/JMeter로 부하·스트레스 테스트.
22화. 손안의 성능 — 모바일 성능 지표(FPS·시작속도·메모리·배터리).
23화. 공격자처럼 생각하기 — OWASP Top 10으로 본 보안 기본기.
24화. 코드를 스캔하는 도구들 — SAST·DAST·SCA(SonarQube·OWASP ZAP·Snyk) 실전.

Part 6. 전략·리더십·표준
아키텍트로서의 설계·운영·리더십
25화. 테스트 가능성을 설계에 심다 — Testability를 기획·개발 단계로 끌어올리기.
26화. 공통 언어로서의 BDD — Gherkin으로 기획·개발·QA를 한 문장에 모으기.
27화. AI를 지휘하는 운영 모델 — 20명 규모 팀을 위한 AI 오케스트레이션 가이드라인과 코칭.
28화. 표준과 AI를 잇다 — KOLAS 인정 요건·품질 표준을 AI 검증 체계로 연결하는 도메인 전문성.
29화. 데모를 프로덕션으로 옮기는 비용 — 30분 데모와 실전의 거리, 사람의 감독이 끝까지 필요한 이유를 균형 있게 정리.
30화. 테스터에서 품질 아키텍트로 

 

---

 

테스트가 실패한 순간, CCTV 영상처럼 돌려보는 Trace Viewer

 

Playwright로 자동화 테스트를 돌리다 보면 “이번엔 또 왜?” 하며 화면을 멍하니 바라보는 일이 생깁니다.

 

실패 원인을 추측으로 찾다 시간만 날리는 대신, Trace Viewer를 활용하면 실패 장면을 영상처럼 되감아보며 정확한 원인을 파악할 수 있습니다.

 

이 도구 하나로 디버깅 시간이 절반 이상 줄어들고, 플래키 테스트를 잡는 눈도 크게 성장합니다.

 

 

실패 보고서가 아니라, 사건 현장 재현 영상

중학생 때 친구들과 축구를 하다 공이 골대 옆으로 빗나갔다고 생각해 보세요.

 

“바람이 불어서”, “발을 잘못 디뎠어” 하며 서로 추측만 합니다.

 

그런데 CCTV 영상을 돌려보면?

 

공이 날아간 순간, 친구 발 위치, 바람 방향, 심지어 잔디 상태까지 한눈에 보이죠.

 

Playwright의 Trace Viewer는 바로 그 CCTV입니다.

 

테스트가 실패한 과정을 타임라인으로 기록해 두었다가, 나중에 영상처럼 재생하며 분석할 수 있게 해줍니다.

 

단순한 로그나 스크린샷이 아니라, 클릭·입력·페이지 변화·네트워크 요청까지 모두 담긴 살아있는 기록물이죠.

 

 

Trace Viewer 켜는 방법, 생각보다 간단합니다

테스트를 실행할 때 trace를 자동으로 기록하도록 설정하면 됩니다.

 

npx playwright test 명령에 --trace=on 옵션을 붙이거나, 테스트 코드나 playwright.config.ts 파일에서 쉽게 활성화할 수 있어요.

 

test('로그인 테스트', async ({ page }) => {
  test.info().snapshotDir = 'snapshots'; // 필요시
  await page.goto('https://example.com');
  // ... 테스트 진행
});

 

실행 후 실패하면 trace.zip 파일이 생성됩니다. 터미널에서 아래 명령어를 입력하면 Viewer가 브라우저로 열립니다.

npx playwright show-trace trace.zip

 

 

영상을 돌려보며 보는 핵심 장면들

 

Trace Viewer를 열면 타임라인 화면이 펼쳐집니다.

 

마치 영화를 편집하듯 좌우로 드래그하며 시간을 이동할 수 있어요.

• 액션 타임라인: 페이지.goto, click, fill 같은 모든 동작이 순서대로 나열됩니다. 어느 단계에서 멈췄는지 바로 알 수 있습니다.
• 스크린샷: 각 액션 전후의 화면을 자동 캡처해 보여줍니다. “이 버튼이 안 보였구나”를 눈으로 확인할 수 있어요.
• 네트워크 패널: API 호출이 언제 일어났고, 응답이 늦었는지, 오류가 있었는지 파악합니다.
• 콘솔 로그와 에러: 브라우저 콘솔에 찍힌 메시지와 스택 트레이스를 함께 볼 수 있습니다.
• 소스 코드 연동: 실패한 코드 라인으로 바로 점프할 수도 있습니다.

특히 플래키 테스트를 분석할 때 강력합니다. “가끔 요소를 못 찾는다”는 실패가 네트워크 지연 때문인지, 셀렉터가 불안정한 건지, 애니메이션이 아직 끝나지 않아서인지 영상을 돌려보면 대부분 한 번에 드러납니다.

 

 

실제 프로젝트에서 Trace Viewer 활용하는 습관

처음에는 테스트가 실패할 때마다 trace를 켜서 분석하는 습관을 들이세요.

 

AI가 생성한 테스트 코드라도, Trace Viewer로 돌려보면 “여기서 대기가 부족했네”, “셀렉터가 약하구나” 같은 인사이트를 빠르게 얻을 수 있습니다.

 

이 도구를 익히면 단순히 실패를 고치는 데 그치지 않고, “왜 이 부분이 불안정한가”를 시스템적으로 개선하는 품질 아키텍트의 사고방식이 자리 잡습니다.

 

한 번의 실패를 통해 여러 번의 반복 실패를 막을 수 있게 되는 거죠.

 

Trace Viewer를 자유자재로 다루게 되는 순간, 테스트 자동화는 더 이상 ‘귀찮지만 해야 하는 일’이 아니라, 시스템의 숨은 문제를 밝혀내는 강력한 탐정 도구가 됩니다.

 

다음 단계에서도 이 영상 분석 능력을 바탕으로 더 깊이 들어가 보겠습니다.