안녕하세요. 인포그랩 프로덕트팀에서 프론트엔드 엔지니어로 일하는 Hailie입니다. 저는 개발자로서 효과적인 코드 개선 방안을 항상 고민합니다. 그러나 테스트 코드는 제게 다소 먼 이야기로 생각했는데요. 최근 팀에서 어드민 프로젝트*를 개선하면서 테스트 코드의 필요성을 절실히 느꼈습니다. 이에 팀 논의 결과, 테스트 코드를 어드민 프로젝트에 소규모로 도입했습니다.

이 글에서는 제가 테스트 코드를 도입한 과정과 그 결과를 공유하려 합니다. 테스트 코드가 아직 낯선 팀이나 테스트 코드 도입을 고민하는 분들께 유용한 정보가 되기를 바랍니다.

*어드민 프로젝트: 인포그랩의 DevOps 전문 학습 솔루션 expertLABS의 콘텐츠 에디터

도입 배경​

출처=Unsplash | 인포그랩 GitLab
출처=Unsplash

제가 테스트 코드의 필요성을 느낀 이유는 코드 품질과 안정성 문제 때문이었습니다. 어드민 프로젝트의 구조는 간단했지만 아래 문제가 반복적으로 나타났는데요. 저는 테스트 코드로 이 문제를 해결하고 싶었습니다.

  1. 리팩토링 후 버그 발생: 코드를 리팩토링해도 특정 사용자 시나리오에서 예상치 못한 버그가 종종 발생했습니다. 그 결과, 디버깅 시간이 길어지고, 배포 일정이 지연됐습니다.
  2. 코드 리뷰 효율 저하: 변경된 코드가 ‘기존 동작을 깨지 않는지’ 코드 리뷰 과정에서 수동으로 확인할 때가 많았습니다. 수동 확인에 시간이 걸리다 보니 리뷰 효율이 떨어졌습니다.
  3. 난해한 코드 누적: 시간이 지날수록 비즈니스 로직이 복잡해지고, 다른 팀원이 이해하기 어려운 코드가 쌓였습니다. 그 결과, 온보딩과 코드 유지 보수에 시간이 오래 소요됐습니다.

이러한 이유로 저는 테스트 코드가 ‘있으면 좋은 부가 요소’가 아니라 ‘필수 개발 도구’임을 깨달았습니다. 이에 어드민 프로젝트에 테스트 코드를 시범 도입하기로 마음먹었습니다.

참고

제가 테스트 코드 도입을 어드민 프로젝트에서 먼저 실험한 이유는 이렇습니다.

  1. 간단한 구조: 어드민 프로젝트의 구조는 비교적 간단하고, 반복된 패턴이 있었습니다. 따라서 테스트 코드를 처음 도입하기에 적합했습니다.
  2. 낮은 실패 부담: 어드민 프로젝트는 사용자와 직접 상호작용을 하지 않는 프로젝트였습니다. 이에 테스트 실패가 서비스에 큰 영향을 미치지 않을 걸로 예상했습니다.
  3. 용이한 재사용: 어드민 프로젝트용 테스트 패턴을 한 번 작성하면, 유사한 컴포넌트나 로직에도 쉽게 적용할 수 있을 걸로 기대했습니다.

도입 과정​

출처=Unsplash | 인포그랩 GitLab
출처=Unsplash

먼저 저는 조직 규모별로 다양한 테스트 코드 도입 사례를 조사하고 실험했습니다. 이 과정에서 인포그랩 프로덕트팀과 어드민 프로젝트에 효과적인 테스트 코드 도입 방안을 찾았고요. 이를 실무에 적용했습니다. 제가 조사한 타사의 테스트 코드 도입 사례와 시사점, 어드민 프로젝트의 테스트 코드 적용 과정을 소개하겠습니다.

타사 사례 연구​

제가 조사한 조직 규모별 테스트 코드 도입 사례는 아래와 같습니다.

2024-12-04-frontend-testcode-2 | 인포그랩 GitLab

*E2E(End To End) 테스트: 애플리케이션 흐름을 처음부터 끝까지 테스트

**MSW(Mock Service Worker): API Mocking 라이브러리

***Cypress: 웹 애플리케이션 회귀 테스트를 위한 프론트엔드 테스트 자동화 도구

****Playwright: 브라우저 테스트와 웹 스크래핑을 위한 오픈 소스 자동화 라이브러리

시사점 도출​

저는 위 사례에서 다음 두 가지 시사점을 얻었습니다.

  1. 신규 기능에 우선 적용: 모든 영역에 테스트 코드를 한꺼번에 도입하기보다 신규 기능부터 테스트를 작성해 적용 범위를 점차 확대하는 게 현실적입니다.
  2. 작은 프로젝트부터 도입 시작: 테스트 코드 도입 효과는 대규모 코드베이스보다 작은 프로젝트에서 더 큽니다. 따라서 어드민 프로젝트는 테스트 코드 도입을 먼저 실험하기에 적합한 환경이었습니다.

이러한 점을 고려해 저는 테스트 코드 도입을 프로젝트로 작게 시작해 적용 범위를 점진적으로 넓히기로 했습니다.

어드민 프로젝트 적용​

저는 아래 과정을 거쳐 어드민 프로젝트에 테스트 코드를 적용했습니다.

  1. 테스트 코드 학습: 저는 단위 테스트를 1차 목적으로 삼았습니다. 그다음, Jest*와 React Testing Library(RTL)를 중심으로 테스트 코드 작성법을 학습하고 실무에 적용했습니다.
  2. 팀 내 기술 세션 진행: 어드민 프로젝트에서 작성한 테스트 코드를 토대로 테스트 코드 작성법과 관련 도구의 특징을 팀 내 기술 세션에서 소개했습니다. 세션에서 피드백도 받았습니다.
  3. 팀 내 코드 리뷰: 팀원들과 테스트 코드를 리뷰하며, 보완 사항을 논의했습니다. 또 유의미한 테스트 코드 기준을 마련했습니다.

*Jest: Meta에서 개발한 JavaScript 테스트 프레임워크

도입 효과​

출처=Unsplash | 인포그랩 GitLab
출처=Unsplash

저는 어드민 프로젝트에 테스트 코드를 도입한 뒤, 다음 효과를 경험했습니다.

빠른 문제 확인, 수정​

코드 변경 이후, ‘기존 기능이 잘 작동하는지’ 신속히 확인할 수 있었습니다. 그동안 어드민 프로젝트에서는 기존 코드와 기능을 자주 수정해야 했는데요. 그 결과, 코드 리팩토링과 기능 확장 시 기존 코드의 안정성이 약화했습니다. 이제 테스트 코드로 이러한 문제를 빠르게 확인하고 해결할 수 있고요. 테스트 코드 덕분에 ‘변경 사항이 어디서 문제를 일으켰는지’ 신속히 추적하고, 수정 시간도 단축했습니다.

높은 개발 속도 유지​

팀 내 짧은 스프린트 주기와 높은 릴리즈 속도를 안정적으로 유지했습니다. 테스트 코드로 코드와 기능 문제를 빠르게 확인하고 해결한 덕분입니다. 아울러 테스트 자동화로 요구사항을 구현한 뒤, ‘모든 핵심 로직이 정확히 작동하는지’ 신속히 확인했습니다. 이 또한 개발 속도를 빠르게 유지하는 데 도움이 됐습니다.

제품 품질 보증​

제품 품질을 보증할 수 있었습니다. 이는 ‘테스트 코드로 주요 기능과 프로세스가 예상대로 작동하는지’ 검증할 수 있기 때문인데요. 그 결과, 문제를 미리 발견하고, 실수를 방지하며, 제품 품질을 향상했고요. 팀에 QA 담당자가 없어도 품질 보증 프로세스를 확립, 정착시킬 수 있었습니다.

관리 효율성 향상​

코드를 작성하고, 유지보수하기가 더 쉬워졌습니다. 이로써 전반적인 코드 관리 효율성이 향상됐고요. 장기적으로 ‘테스트 코드가 버그와 코드 관리 비용을 줄이는 데 효과적’이라는 확신이 생겼습니다.

향후 테스트 코드 운영 계획​

마틴 파울러의 테스트 피라미드: 단위 테스트(Unit), 통합 테스트(Service), E2E 테스트(UI) 비율 보여줌. 출처=MartinFowler.com | 인포그랩 GitLab
마틴 파울러의 테스트 피라미드: 단위 테스트(Unit), 통합 테스트(Service), E2E 테스트(UI) 비율 보여줌. 출처=MartinFowler.com

저는 이번 작업으로 ‘테스트 코드 도입은 단기 과업이 아닌, 꾸준히 정착해야 할 개발 문화임’을 실감했습니다. 앞서 언급했듯 이번 테스트 코드 도입은 소규모로 이뤄졌는데요. 앞으로 규모를 확대해 아래와 같이 적용하는 방안을 검토하고 있습니다.

  1. 단위 테스트 중심 접근: 마틴 파울러의 테스트 피라미드 원칙에 따라 단위 테스트(70%)에 집중하고, 통합 테스트(20%)와 E2E 테스트(10%)를 병행합니다.
  2. 적용 우선순위 선정: 예상치 못한 입력이나 상황의 엣지 케이스 관련 테스트를 추가해 더 견고한 코드를 만듭니다. 사용자와 직접 상호작용을 하는 주요 UI 컴포넌트에 우선 적용합니다.
  3. 도구 선정: Jest와 RTL로 단위 테스트를, Playwright로 통합 테스트와 E2E 테스트를 수행합니다.

맺음말​

테스트 코드 도입은 단순한 기술 과제가 아닙니다. 이는 코드 신뢰성을 높이고 협업 효율성을 향상하는 데 도움이 되죠. 저는 이번 어드민 프로젝트에서 쌓은 테스트 코드 작성 경험을 팀 전체 개발 성과를 높이는 데 활용하고 싶습니다. 이로써 테스트 코드 도입 문화가 팀에 잘 정착되면 좋겠습니다. 앞으로도 테스트 코드 지식과 경험을 적극적으로 나눌 거고요. 테스트 코드로 더 나은 코드를 만들고, 고품질 서비스를 제공하도록 노력하겠습니다.

참고 자료​

  1. Michał Sobczak, “Frontend Testing: A Guide for 2024”, Netguru, 2024.9.17, https://www.netguru.com/blog/front-end-testing
  2. Martin Fowler, “Test Pyramid”, MartinFowler.com, 2012.5.1, https://martinfowler.com/bliki/TestPyramid.html
  3. 배민근, “코드와 함께 살펴보는 프론트엔드 단위 테스트 – Part 1. 이론 편”, 우아한 기술 블로그, 2024.5.22, https://techblog.woowahan.com/17404/
  4. 송기연, “MSW를 활용하는 Front-End 통합테스트”, 카카오엔터테인먼트 FE 기술 블로그, 2022.8.25, https://fe-developers.kakaoent.com/2022/220825-msw-integration-testing/
  5. Boaz Hwang, “우리 프론트엔드 팀에는 어떤 테스트를 적용해야 할까?”, 레몬베이스 팀블로그, 2022.5.31, https://blog.lemonbase.team/우리-프론트엔드-팀에는-어떤-테스트를-적용해야할까-a3ea48207cd4
  6. Saemi Hong, “프론트엔드 테스트 코드 도입기”, 펫프렌즈 기술블로그, 2023.12.1, https://techblog.pet-friends.co.kr/프론트엔드-테스트-코드-도입기-c3a1865250ee
  7. “Frontend Unit Test 작성하기”, Rhyno Tech Blog, 2022.12.30, https://gregor77.github.io/2022/12/30/unit-test-frontend/

DevOps와 GitLab을 효과적으로 도입하는 방법, 지금 인포그랩에 문의하세요.