'Green Dot Party'

안녕하세요, 래블업 프론트엔드 챕터의 이승원입니다. 저희 팀은 지난 4월 2일에 'Green Dot Party'를 가졌습니다. 'Green Dot'은 개발을 마친 후 테스트를 진행할 때 테스트에 통과한 테스트 케이스 옆에 찍히는 초록색 점을 의미하는 단어입니다. 이번 'Green Dot Party'를 통해 기존의 최신화되지 못한 테스트 케이스를 고치고, 새로운 케이스를 추가하여 Backend.AI에 수많은 '초록 점'을 추가하고자 했는데요, 'Green Dot Party'에 대한 내용을 본격적으로 소개하기 전에 래블업에서 어떤 방식으로 제품 테스트가 진행되는지 간단하게 설명을 해드리려 합니다.

통과한 테스트 옆에 붙는 초록색 체크 합격 목걸이

래블업의 E2E 테스트

일반적으로 기능을 개발하는 개발자의 입장에서 개발한 기능의 작은 단위 (함수나 메서드 등)를 독립적으로 테스트하는 것을 유닛 테스트(Unit Test) 라고 부르는데요, E2E (End-to-End) 테스트는 유닛 테스트와 달리 사용자의 입장에서 애플리케이션이 잘 동작하는지 처음부터 끝까지 전체 플로우를 검증하는 테스트 과정을 의미합니다. 유닛 테스트만으로는 전체 시스템의 문제를 잡아내기 어렵고, E2E 테스트로는 세부 기능의 버그를 파악해 내기 쉽지 않기 때문에 두 개의 서로 다른 스코프를 가진 테스트를 상호보완적으로 사용하여 검증을 진행하는 것이죠.

구분	유닛 테스트	E2E 테스트
목적	개별 코드와 기능이 올바르게 동작하는지 검증	사용자가 사용하는 방식에서 소프트웨어가 문제없이 동작하는지 검증
테스트 범위	코드의 작은 단위 혹은 기능의 작은 단위	프론트, 백엔드 DB 등을 포함한 사용자 환경에서의 시스템 전체 흐름
실행 환경	코드 내부, 독립 실행 환경	실제 브라우저 단, API나 DB 등과 연동한 모든 시스템이 동작하는 환경

래블업 역시 기능을 개발하면서 유닛 테스트와 E2E 테스트를 모두 진행하여 기능의 정합성을 유지하려는 노력을 기울이고 있습니다. 저희 팀은 Jira를 사용해서 2주간의 스프린트 단위를 적용해서 일하고 있고, 스프린트가 끝날 때는 해당 기간동안 머지된 이슈들을 바탕으로 새로운 릴리즈를 배포합니다. 해당 과정에서 기존의 기능이 잘 동작하는지, UI/UX적으로 어색한 부분은 없는지, 백엔드의 하위버전과 호환성을 잘 유지하는지 확인하고 있습니다. 규모가 큰 회사들의 경우에는 QA(Quality Assurance)를 담당하는 조직이 따로 있지만, 저희 래블업에는 QA 조직이 따로 없기 때문에 각 기능을 개발하는 담당자들이 유닛 테스트를 수행하고, 제품을 출하하기 전 프론트엔드 팀원분들과 함께 최종적으로 'Final Train'이라는 이름으로 E2E 테스트를 비롯한 마지막 점검 절차를 진행하고 있습니다.

전담 QA 조직이 없는 상황에서 최신화된 E2E 시나리오를 상시 유지하는 것은 쉬운 일이 아닙니다. 개발 주기를 빠르게 가져가다 보면 E2E 테스트가 더 이상 유효하지 않게 되거나, 새로 개발된 기능에 대응하지 못해 테스트가 망가지는 경우가 있습니다. 프론트엔드 챕터에서는 기존의 Lit element로 작성된 컴포넌트들을 React 컴포넌트로 교체하는 동시에, 래블업의 새로운 디자인 시스템인 'NEO' 스타일로 마이그레이션하고 있는데요, 이 과정에서 UI의 모달이 페이지로 바뀌거나, 버튼 위치가 변경되거나 하는 경우가 많아 기존 E2E 테스트 케이스의 최신화가 필요한 상황이었습니다. 그러나 빠르게 변화하는 AI 분야에 맞춰 대응하기 위한 개발 업무에 우선순위가 밀려 손을 대지 못하고 있었죠.

상황을 해결하기 위해서는 팀원 모두가 짧은 시간 안에 하나의 목표에 집중해서 문제를 해결해 내는 과정이 필요했습니다. 이번 'Green Dot Party'를 통해 프론트엔드 팀원이 모두 모여 최신화가 필요한 E2E 테스트 케이스를 목록화하고, 테스트 케이스 작성 방법을 공유하며, 각자 테스트 케이스를 맡아서 작성해 보는 시간을 가졌습니다.

E2E 테스트 케이스 작성하기

좋은 E2E 테스트 케이스를 작성하려면 사용자의 요구사항을 명확하게 이해하고, 이해한 요구사항을 바탕으로 정확한 시나리오를 작성하는 것이 매우 중요합니다. 래블업은 테스트 케이스를 기반으로 하는 개발이 아닌, 사용자의 요구사항에 중심을 맞춰 '시나리오'를 중심으로 개발하는 '행위 주도 개발(BDD, Behavior Driven Development) 방식의 소프트웨어 개발 방법론을 채택하고 있습니다. BDD는 사용자 또는 비즈니스 요구사항을 자연어로 표현하여 개발과 테스트를 진행하는 방법입니다. 모든 이해관계자가 이해할 수 있는 공통된 언어를 사용하는데, Gherkin이라는 문법을 사용하여 자연어에 가까운 형태로 시나리오를 작성하는 것이 일반적입니다.

Gherkin은 "Given-When-Then" 구조를 따르는 문법으로, 시나리오를 작성할 때 자주 사용됩니다.

• Given: 테스트를 하기 위한 세팅이 주어진 환경
• When: 테스트를 하기 위한 조건으로 프론트엔드에세는 대부분 사용자와의 상호작용 요소를 다룸
• Then: 예상 결과를 나타내며 의도대로 동작하는지 검증 및 확인

이를 기반으로, 저희 Backend.AI의 중요한 기능인 '세션'을 생성하는 기능에 대한 시나리오를 다음과 같이 작성할 수 있습니다.

• Given: 로그인 이후, 사이드 메뉴에서 '시작' 메뉴를 클릭하여 '시작' 페이지로 이동
• When: Interactive 타입의 세션을 생성하기 위해 '세션 생성하기' 버튼을 클릭
• Then: '세션 생성' 페이지로 이동하고, Interactive 타입이 선택되어 있어야 함

하지만 모든 시나리오가 이렇게 깔끔하게 정리되진 않습니다. 하나의 시나리오에 많은 'When'과 'Then'이 있을 수도 있고, 하나의 시나리오라고 생각했던 것이 여러 개로 쪼개져야만 할 수도 있습니다. 이러한 고민을 프론트엔드 팀원분들과 함께 나누며, 적절한 단위의 일관적인 테스트 케이스를 구성할 수 있었습니다.

테스트케이스를 구성한 후에는 테스트가 정상적으로 마무리되는지 꼼꼼하게 검토해야 합니다. 해당 테스트로 인한 사이드이펙트가 발생한다면 다른 모든 테스트가 의미 없어질 수 있기에, 모든 테스트의 마무리를 살펴봐야 하죠. 예를 들어, 특정 테스트를 위해 Backend.AI 내부에서 세션을 생성했다면, 테스트가 끝나는 시점에는 생성한 세션을 종료해야 다른 케이스에 영향을 미치지 않을 수 있습니다. 이러한 부분은 Playwright에서 지원하는 afterEach를 통해서 생성한 세션을 각각의 테스트가 끝날 때마다 삭제하는 식으로 대응하고 있습니다. 아름다운 사람은 머문 자리도 아름답다고, 래블업은 아름다운 테스트를 위해 마무리까지도 아름답게 만들고 있습니다.

끝으로

이번 'Green Dot Party'를 통해 저희 프론트엔드 챕터는 최신화가 필요한 E2E 테스트 케이스를 함께 정비하고, 시나리오 중심의 테스트 작성 방법을 공유하며, 검증하는 시간을 가졌습니다. 결과적으로 프론트엔드의 모든 팀원이 한 자리에 모여 3시간이라는 짧은 시간 동안 총 여덟 개의 테스트 케이스를 수정하고, 다섯 개의 케이스를 추가할 수 있었습니다. 이를 통해 제품의 신뢰성과 품질을 한층 높이는 동시에, 변화하는 개발 환경에 맞춰 테스트 체계를 유지할 수 있는 기반도 마련했습니다.

재택근무와 원격근무가 가능한 저희 근무 환경 특성상, 래블업의 모든 구성원은 한 팀이 한자리에 모이는 시간을 소중하게 사용하고 있습니다. Green Dot Party가 진행된 날은 발리에서 원격근무로 함께하고 계시는 프론트엔드 챕터의 리더, 이종은 님이 오랜만에 한국에 방문하신 날이었습니다. 제가 인턴이던 시절부터 온라인으로만 마주했던 분이었는데, 처음으로 오프라인에서 인사를 나눠 반가웠던 기억이 납니다. 이번 Green Dot Party는 E2E 테스트를 최신화하는 코드들의 파티였을 뿐만이 아니라 팀 구성원 모두가 함께 모여 즐겼던 또 하나의 파티이기도 했습니다.

래블업은 매년 빠르게 성장하고 있고, 뛰어난 엔지니어분들을 모시고 있습니다. 다음 Green Dot Party는 더욱 많은 팀원분과 함께했으면 하는 소망이 있습니다. 래블업은 주기적으로 인턴십 프로그램을 운영하고 있고, 다양한 분야에 대한 수시 채용도 진행하고 있습니다. 많은 관심 부탁드리면서, 저는 다시 Visual Studio Code에 초록 점을 찍으러 떠나 보겠습니다. 지금까지 래블업 프론트엔드 챕터의 이승원이었습니다. 감사합니다!