Luko에서 제 첫 임무는 회사의 마케팅 웹사이트를 담당하는 것이었습니다. 목표는 최대한 많은 사람들을 유입시키고 Luko라는 neo-insurance 브랜드를 알리며, 보험 가입을 시작할 수 있는 Luko Onboarding 이라는 SPA 웹앱으로 사용자를 전환시키는 것이었습니다.
프로젝트 개요
입사 당시 해당 웹사이트는 Prismic Headless CMS + Nuxt2를 Netlify에서 배포하고 있었고, 전임자로부터 인수인계를 받은 뒤 혼자서 관리했습니다. 해당 프로젝트에서 수행한 주요 작업은 다음과 같습니다:
- 디자인 시안 기반 페이지 구현
- SEO 최적화
- Page Speed 개선
- Nuxt3 마이그레이션 및 AWS Amplify 전환
- 페이지 AB 테스트 구현
- CI/CD 파이프라인 개선
주요 작업 내용
1. 디자인 및 개발 협업
Figma를 통해 디자이너와 협업했습니다. 회사에서 자체 개발한 컴포넌트 라이브러리인 Lukomponent와 브랜드 디자인 규약이 있어, 그에 맞춰 개발을 진행했습니다.
2. SEO 최적화
SEO 전문가와 함께 부족한 부분이나 개선이 필요한 부분들(meta data, sitemap, page speed, HTML structure, JSON schema, language attribute, link rel 등)을 지속적으로 개선했습니다.
3. Page Speed 개선
개선 전 모바일 40점대, 데스크탑 60점대였던 페이지 속도를 개선하기 위해, 먼저 Frontend Masters에서 Web Performance Fundamentals와 Web Performance with Webpack 강의를 수강하며 이론을 학습한 뒤 문제점을 분석했습니다.
발견된 문제점 및 해결 방법
Tree-shaking 문제 해결
Webpack bundler로 검사한 결과, 회사 컴포넌트 라이브러리 Lukomponent가 tree-shaking이 되지 않는다는 것을 발견했습니다. 컴포넌트 라이브러리를 당장 재작성하기는 시간적으로 불가능했기 때문에, 우선 해당 사항을 팀원들에게 공유하고 마케팅 웹사이트에서 Lukomponent를 제거한 뒤 직접 구현했습니다. 이 문제는 해당 라이브러리를 사용하는 모든 사이트/웹앱에서 발생하는 치명적인 문제였으므로, 회사 내 프론트엔드 개발자들은 향후 컴포넌트 라이브러리를 tree-shaking 가능하도록 개선할 계획이었지만, 저는 빠른 해결을 위해 제거하고 직접 구현하는 방식을 선택했습니다.
CSS 크기 최적화
CSS가 일반적인 경우에 비해 비정상적으로 크다는 것을 발견했습니다. Vue는 HTML/JS/CSS를 한 파일에 작성할 수 있는데, 이 방식의 단점은 스타일이 각각의 컴포넌트 단위로 생성된다는 문제가 있었습니다. 이를 해결하기 위해 atomic CSS 라이브러리인 Tailwind CSS를 도입하여 CSS 크기를 수십 KB까지 줄일 수 있었습니다.
이미지 최적화
이미지가 모바일과 데스크탑에서 같은 사이즈로 로딩되는 문제를 발견했습니다. nuxt-image 패키지를 이용하여 img srcset을 설정하여 모바일과 데스크탑에서 화면 크기에 맞는 다른 사이즈의 이미지가 로딩되도록 최적화했습니다.
결과
위와 같은 모든 작업을 완료한 후, 페이지 속도가 모바일과 데스크탑 모두 90점대 이상을 달성했습니다. 다만, 개발자가 완전히 제어할 수 없는 Google Tag Manager, Cookie Banner와 같은 서드파티 스크립트와 CMS에서 오는 정제되지 않은 이미지들의 영향으로 점수가 다시 하락하는 경우가 있었습니다.
4. Nuxt3 마이그레이션 및 인프라 전환
해당 사이트를 Nuxt2에서 Nuxt3로 마이그레이션했습니다. Nuxt2 코드를 대부분 재사용할 수 있었기 때문에 마이그레이션 자체는 어렵지 않았지만, Vue3의 Composition API와 Pinia를 사용하여 상태 관리를 개선하면 코드가 훨씬 깔끔해지기 때문에 해당 리팩토링도 모두 진행했습니다.
마이그레이션 이후 웹사이트 호스팅을 Netlify에서 AWS Amplify로 이전하는 작업도 수행했습니다.
5. AB 테스트 구현
회사에서는 어떤 페이지가 더 전환율이 높은지 테스트하기를 원했고, 다른 SPA 앱에서는 해당 기능이 있었지만 마케팅 웹사이트에서는 아직 시도된 적이 없었습니다.
단순하게 SPA처럼 로딩이 완료된 후 원하는 버전을 렌더링하게 되면 페이지가 깜박이게 되어 사용자 경험에도 좋지 않고 페이지 로딩 속도에도 영향을 미쳤습니다.
이를 해결하기 위해 AWS CloudFront에서 오는 요청을 AWS Lambda를 이용하여 사용자를 두 그룹으로 나누고, URL은 그대로 유지하되 페이지 자체를 다른 버전으로 보여주도록 구현했습니다.
6. CI/CD 파이프라인 개선
마케팅 웹사이트에서 다른 페이지로 가는 링크가 동작하지 않으면 SEO에 치명적이기 때문에, 고장난 링크가 있는지 검사하는 단계를 추가했습니다.
또한 Cypress의 image regression 테스트를 추가하여 웹사이트가 배포되기 전 중요한 페이지들이 이전과 이후에 얼마나 많은 부분이 변했는지 테스트하는 것도 추가했습니다.