page-object-model

세금 환급 자동화 : AI-driven UI 테스트 자동화 일지 (새 탭에서 열림)

토스인컴의 복잡한 세금 환급 서비스 QA를 위해 1명의 매니저가 AI를 팀원으로 활용하여 4~5명 규모의 자동화 성과를 낸 과정을 다룹니다. AI 에이전트에게 코드 작성과 설계를 맡기고 사람은 문제 정의와 검증에 집중함으로써, 5개월 만에 35개의 고난도 E2E 테스트 시나리오를 성공적으로 구축하고 운영화했습니다. 이 실험은 기술적 난도가 높은 환경에서도 AI와의 협업을 통해 자동화 효율을 극대화할 수 있음을 입증했습니다. **AI 자동화 도입 배경과 도구 구성** * 복잡한 환급 플로우(15~20단계)와 빈번한 UI/정책 변경, 외부 연동 시스템의 불안정성 때문에 전통적인 수동 자동화 방식으로는 대응이 불가능했습니다. * 메인 개발자인 Claude Sonnet 4.5를 비롯해 Cursor(IDE 페어 프로그래밍), Codex(코드 분석) 등 각기 다른 강점을 가진 AI 도구들을 조합하여 사용했습니다. * AI를 SDET 에이전트(설계), 문서화 전문가(기록), Git 마스터(형상 관리)라는 세 가지 페르소나로 분리하여 역할 분담을 명확히 했습니다. **기술적 문제 해결과 아키텍처 고도화** * **Page Object Model(POM) 도입:** 중복 셀렉터 문제를 해결하고 유지보수성을 높이기 위해 AI와 협업하여 모든 페이지 요소를 객체화하는 POM 구조를 설계했습니다. * **React 타이밍 이슈 해결:** 요소가 화면에는 보이지만 이벤트 핸들러가 바인딩되지 않아 발생하는 클릭 실패를 해결하기 위해, UI 안정화와 상호작용 준비 상태를 분리해 감지하는 'Interaction Readiness' 전략을 구현했습니다. * **Fallback 클릭 로직:** 표준 클릭 실패 시 키보드 엔터 입력, 자바스크립트 직접 클릭 순으로 시도하는 안전한 클릭 함수를 만들어 테스트의 견고함을 높였습니다. * **동적 약관 처리:** 서비스별로 상이하고 복잡한 약관 동의 플로우를 AI가 자동으로 감지하고 처리하도록 설계하여, 약관이 변경되어도 테스트가 중단되지 않는 구조를 만들었습니다. **운영 효율화를 위한 협업 시스템 구축** * **문서화 및 일지 자동 생성:** 매일 커밋 기록을 기반으로 AI가 회고 일지와 가이드 문서를 작성하게 하여, 수십 분이 걸리던 기록 업무를 1~2분 내외의 검토 수준으로 단축했습니다. * **메신저 기반 리포팅 루프:** 테스트 결과, 실패 지점 스크린샷, 오류 로그(EventID 등)를 사내 메신저에 자동으로 연동하여 개발팀과의 빠른 논의가 가능하도록 환경을 조성했습니다. * **테스트 격리 및 리팩토링:** 수천 줄의 단일 파일을 분리하고 테스트 데이터(userNo) 충돌 방지 로직을 도입하여 자동화 품질을 관리 가능한 수준으로 끌어올렸습니다. 단순히 AI에게 코드를 짜게 하는 수준을 넘어, 아키텍처 설계와 운영 프로세스 전반을 AI와 함께 고민하는 'AI-First' 접근 방식은 리소스가 제한된 환경에서 QA 품질을 혁신적으로 높일 수 있는 실질적인 해법이 됩니다. 6개월간의 여정은 AI를 도구가 아닌 실제 팀원으로 대우할 때 자동화의 본질인 '안정적인 반복 실행'을 달성할 수 있음을 보여줍니다.

토스인컴 세금 환급 서비스 : 빠른 속도에서 품질을 지키기 위한 E2E 자동화 여정 (새 탭에서 열림)

토스인컴은 빠른 배포 속도에 대응하기 위해 기존의 수동 검증과 복잡한 클래스 기반 POM(Page Object Model)에서 벗어나, 함수형 POM 중심의 자동화 시스템을 구축했습니다. 이를 통해 4시간 이상 소요되던 검증 시간을 20분(병렬 실행 시)으로 단축하고 테스트 성공률 100%를 달성하며, QA가 제품의 품질을 초기부터 설계하고 실행 속도를 높이는 핵심 동력으로 자리 잡았습니다. ### 클래스 기반 POM에서 함수형 POM으로의 전환 * **무상태(Stateless) 함수 설계**: 상태를 갖는 클래스 대신 `page` 객체를 입력받아 동작을 수행하고 다시 `page`를 반환하는 단순한 함수 구조를 채택했습니다. * **가독성 및 유지보수성 향상**: 테스트 코드를 '사람이 읽는 시나리오'처럼 작성할 수 있게 되었으며, 버튼 문구 등 UI 변경 시 수십 개의 파일 대신 POM 함수 한 곳만 수정하면 되도록 캡슐화했습니다. * **명확한 네이밍 컨벤션**: `goto`, `click`, `enter`, `verify` 등 동작 중심의 접두사를 사용하여 코드만 보고도 어떤 테스트 단계인지 직관적으로 이해할 수 있게 했습니다. ### 여정 중심의 단계 분리와 레고식 조립 * **사용자 여정 기반 설계**: 단순히 화면 단위로 나누지 않고, '로그인/약관', '공제 확인', '결제', '신고' 등 세금 환급의 4가지 핵심 단계로 파일을 분리해 관리합니다. * **독립적 모듈화**: 의료비, 신용카드, 인적공제 등 각 공제 항목을 독립된 함수로 만들어, 새로운 테스트 시나리오가 필요할 때 필요한 기능만 레고 블록처럼 조립해 빠르게 생성할 수 있습니다. ### 테스트 안정성을 높이는 기술적 전략 * **4단계 클릭 폴백(Robust Click)**: React 렌더링 타이밍 문제로 발생하는 클릭 실패를 방지하기 위해 'Enter 키 입력 → 일반 클릭 → Force 클릭 → JS 직접 실행' 순의 단계별 재시도 전략을 유틸리티화했습니다. * **최신 페이지 자동 감지**: 리다이렉트나 새 창 열림이 빈번한 환경에서 `getLatestNonScrapePage` 유틸을 통해 항상 유효한 최신 탭을 추적하고 `currentPage`를 갱신하여 페이지 닫힘 에러를 방지했습니다. * **네트워크 대기 최적화**: Playwright의 기본 `networkidle` 방식 대신, 타임아웃이 발생해도 테스트를 중단하지 않고 UI 앵커(텍스트, role 등)로 화면 준비를 판단하는 `waitForNetworkIdleSafely`를 구현했습니다. ### 자동화 도입이 가져온 성과 * **정량적 지표 개선**: 검증 시간 77% 감소, 테스트 커버리지 600% 증가, 코드 중복률 76% 감소 등 모든 지표에서 비약적인 발전을 이루었습니다. * **업무 문화의 변화**: 24시간 자동 검증 시스템을 통해 개발 완료 즉시 기능을 점검하고 결과를 슬랙으로 공유하며, QA는 단순 반복 검증이 아닌 세금 엔진의 금액 정합성 검증 및 성능 지표 분석 등 고부가가치 업무에 집중하게 되었습니다. **실전 팁** 가장 빈번하게 오류가 발생하는 구간(예: 로그인)부터 자동화를 시작하고, 추상화에 너무 매몰되기보다 누구나 읽고 고칠 수 있는 명료한 함수 구조를 유지하는 것이 중요합니다. 특히 페이지 전환이 일어날 때마다 최신 페이지 객체를 새로 할당하는 원칙만으로도 상당수의 자동화 실패를 예방할 수 있습니다.