Luko Onboarding은 다양한 경로로 유입된 사용자가 온라인으로 보험에 가입하는 것을 도와주는 사이트입니다.
목표는 보험 상품 특성상 사용자가 긴 입력 과정을 지루하지 않게 하여 보험가입 전환율을 높이는 것이었습니다. 마케팅 웹사이트를 담당하고 있음에도 불구하고 해당 프로젝트에 참여하게 된 이유는 해당 SPA가 마케팅 웹사이트와 긴밀하게 연결되는 기능들이 많이 있었고, Vue 2에서 Vue 3로 마이그레이션하는데 일손이 필요했기 때문이었습니다.
Onboarding 팀은 제가 합류했을 당시 프론트엔드 개발자 3명, PM 1명, 디자이너 1명으로 구성되어 있었습니다. 마이그레이션 과정은 Webpack으로 번들링되는 앱을 버리고 Vite 기반으로 아예 처음부터 다시 앱을 만드는 것이었는데, 바닥부터 완성하며 Luko의 보험 가입 로직을 완벽하게 이해하게 된 계기가 되었습니다.
마이그레이션 이후 저는 마케팅 웹사이트와 Onboarding 앱을 병행하며 팀과 함께 다음과 같은 일을 했습니다.
1. 다국어 지원 확장
프랑스뿐만 아니라 독일, 스페인 보험상품까지 3개 국어로 각각 가능하도록 기능을 확장했습니다.
각 나라별 보험 상품이 달랐기 때문에 첫 입력 스텝에서 어떤 주소를 입력하냐에 따라 다른 보험 상품을 보여주도록 하는 동적 설계 방식이 필요했습니다. 다행히 Vue 3로 마이그레이션할 때 원하는 스텝을 자유롭게 추가 삭제할 수 있는 설정 파일 기능을 구현했기 때문에 어려움 없이 추가할 수 있었습니다. 각 나라별 언어를 추가하는 것은 기존에 이미 영어와 프랑스어로 서비스를 하고 있었기에 별다른 어려움은 없었습니다. 이후 CI/CD에 번역이 안되어 있는 부분을 체크하는 것을 추가해서 번역 누락으로 인한 버그를 잡아내었습니다.
2. AB 테스트 및 Feature Rollout
전환율이 더 높은 UI/UX를 찾기 위한 AB 테스트 세팅, 그리고 새로운 feature gradual rollout 기능을 구현했습니다.
해당 프로젝트는 AB 테스트와 새로운 기능을 추가하고 삭제하는 것을 정말 많이 했었습니다. 테스트가 하나만 있었을 때는 코드로 제어가 가능했는데, 시간이 지나고 여러 개의 AB 테스트를 동시에 하거나, 새로운 기능을 점진적으로 출시하여 사용자의 반응을 알아보는 테스트를 하게 되자 상태 관리에 애를 먹었고, 그리하여 Unleash라는 외부 서비스를 활용하자는 아이디어가 나와 모든 테스트를 껐다 켤 수 있도록 제어가 가능하게 하였습니다.
3. 로딩 속도 향상
해당 사이트는 초기에 로딩 속도가 느렸습니다. 원인으로는 2가지가 있었고 다음과 같이 해결했습니다:
-
Lukomponent tree-shaking 이슈: 마케팅 웹사이트와 마찬가지로 초기에 Lukomponent tree-shaking 이슈로 첫 화면 로딩에 시간이 많이 나오는 문제가 있었습니다. 해당 문제는 프론트엔드 개발자가 다 같이 Lukomponent를 Vue 3로 마이그레이션하는 과정에서 개선이 되었습니다.
-
언어 파일 로딩 최적화: 4개 국어의 언어가 처음 로드될 때 1개만 로드되면 충분한데도 다 같이 로드되는 현상이 있었습니다. 이 부분은 언어 파일을 따로 chunking하고 지연 로딩을 해서 해결했습니다.
4. 에러 핸들링 개선
사용하는 언어가 4개 국어이므로 사용자가 보는 에러 메시지도 4개 국어로 보여야 했습니다. 이를 위해 여러 가지 아이디어가 있었지만, 우리가 최종적으로 선택한 것은 프론트에서 language 파라미터를 주면 백엔드에서 번역된 에러 메시지를 보내주는 것이었습니다.
그 외에 백엔드가 다루지 못하는 에러들은 모두 팀원들과 같이 에러를 정의하고 사용자가 모든 상황에서 적절한 에러 메시지를 볼 수 있도록 패턴을 만들었습니다. 어떤 함수에서든지 에러가 발생하면 함수 내부에서 에러 메시지 창을 띄우는 행위를 하지 않고 무조건 에러를 throw 하도록 만들고, 에러 핸들링은 가장 나중에 실행되는 최종 함수가 담당하였습니다. 또한 이 최종 함수는 Sentry에 에러를 보내는 역할을 했기에, 사용자가 보는 에러와 같도록 하여 디버깅을 용이하게 하였습니다.
기타
이 밖에도 Playwright를 활용한 모든 product flow 검증하는 효율적인 E2E 패턴 만들기, 이미 접속해서 서비스를 이용하는 사용자가 앱이 릴리즈된 후 다운로드 받을 스크립트가 없어 에러가 나는 경우 해결하기와 같은 흥미로운 문제들이 있었고 이를 해결하는 과정에서 많은 것들을 배웠습니다.