변화하는 UI, 변하지 않는 품질: 토스의 프론트엔드 테스트 전략

프론트엔드 개발 영역에서 테스트 코드의 필요성은 지속적인 논의의 대상입니다. 사용자 인터페이스와 직접적으로 연결되는 프론트엔드 코드의 특성상, 빈번하고 다양한 변화에 직면하게 되기 때문인데요. 이러한 환경에서 개발자들은 때때로 시간적 제약으로 인해 테스트 코드 작성을 생략하고 즉각적인 개발에 집중하게 되는데요. 이는 단기적으로 생산성 향상으로 느껴질 수 있습니다.

그러나 이러한 접근은 '단기적 효율'과 '장기적 지속가능성' 사이의 균형에 대한 문제를 제기합니다. 테스트 코드 없이 진행되는 개발이 당장은 빠른 결과물 도출로 이어질 수 있지만, 장기적 관점에서는 오히려 생산성 저하와 품질 문제로 이어질 수 있기 때문인데요.

그렇다면 테스트 코드가 어떻게 장기적인 생산성 향상에 기여하는 것일까요? 다음은 테스트 코드가 가져다주는 주요 이점들입니다:

1. 신속한 피드백 루프: 테스트 코드는 개발자가 변경사항을 즉각적으로 검증할 수 있게 해줍니다. 이는 수동 테스트 과정을 최소화하고, 버그를 조기에 발견하여 수정 비용을 절감시킵니다.

2. 리팩토링 자신감: 잘 작성된 테스트 코드는 개발자에게 코드 개선에 대한 자신감을 부여합니다. 기존 기능의 정상 작동을 보장하면서 새로운 기능을 추가하거나 라이브러리 업데이트를 할 수 있습니다.

3. 문서화 효과: 테스트 코드는 실행 가능한 명세서 역할을 합니다. 특히 빠르게 변화하는 스타트업 환경에서, 테스트 코드는 최신 상태의 신뢰할 수 있는 문서가 됩니다.

그렇다면 테스트 코드는 어떻게 작성해야 할까요? 아마 많은 개발자 분들이 실질적으로 궁금해하는 내용일텐데요. 전통적인 테스트 피라미드 접근법은 유닛 테스트를 기반으로, 통합 테스트, 그리고 E2E(End-to-End) 테스트 순으로 구성됩니다. 그러나 실제 개발 에서는 이론과 실제 적용 사이의 간극이 존재하기 마련인데요. 토스의 테스트 전략은 아래와 같은 개념 으로 구성되어 있습니다:

1. 전략적 선별: 복잡성이 높고 비즈니스에 중요한 기능에 테스트 역량을 집중합니다. 단순한 UI 요소보다는 핵심 비즈니스 로직과 주요 사용자 시나리오에 초점을 맞춤으로써, 테스트의 투자 대비 생산성을 극대화합니다.

2. 통합 테스트 중심 접근: 페이지 단위의 통합 테스트로 실제 사용자 경험에 더 가까운 테스트 시나리오를 구성합니다. 이러한 방식은 개별 컴포넌트의 기능성뿐만 아니라, 상호작용하여 전체 시스템을 구성하는지 검증할 수 있게 해줍니다.

3. 생산성과 효율성의 균형: 너무 단순한 테스트는 작성하지 않습니다. 예를 들어, 즉시 확인 가능한 단순 UI 변경사항에 대해서는 별도의 자동화된 테스트를 작성하지 않습니다.

결론적으로, 토스의 프론트엔드 테스트는 기존의 이론적 모델을 맹목적으로 따르기보다는 실질적인 가치를 제공하는 방향으로 접근하고 있습니다. 통합테스트 중심의 실용적 접근을 통해 개발 생산성과 품질 사이의 적절한 균형을 맞추는게 인상적이었습니다.

https://toss.tech/article/firesidechat_frontend_3