현대적인 프론트엔드 인프라

한 주니어 개발자와 대화하는데, 그가 이렇게 얘기했다.

"웨인, 현대적인 프론트엔드 개발은 제품 개발만이 전부가 아닌 것 같아요."

그의 말이 맞다. 제품을 코딩하는 것과 함께 우리가 일하는 방식과 동선에 관한 인프라 개발이 동반된다. 나는 그에게 현대적 프론트엔드 인프라의 구성요소가 어떤 것이 존재하는지 소개하기 위해 글을 작성해봤다.

웹 기술의 급속한 발전은 프론트엔드의 복잡성을 증대시키고 있다. 이런 복잡성 속에서 어떻게 하면 유저에게 탁월한 경험을 제공할 수 있을까? 더 이상 단순히 좋은 디자인과 빠른 반응성 만으로는 부족하다. 제품이 발전함에 따라 어느 순간 부터는 "최적화된 프론트엔드 아키텍쳐"가 요구된다. 이러한 아키텍쳐를 구성하는 "프론트엔드 인프라"에 대해서 알아보도록 하자.

현대적인 프론트엔드 인프라의 구성 요소는 6가지이다.

Monorepo
CI/CD
Design System
Event Logging
Monitoring
A/B Test

1. Monorepo

Monorepo는 여러 프로젝트를 하나의 저장소에서 관리하는 전략을 말한다. 이 전략은 소스 코드의 중복을 감소시키고, 팀 간 협업을 강화하며, 레포지토리 관리를 단순화 시킬 수 있다. Monorepo의 주요 이점은 다음과 같다.

코드 재사용: 공통적으로 사용되는 컴포넌트, 라이브러리, 툴 중복의 문제를 해결
의존성 관리: 프로젝트 간 의존성을 명확히 관리하고, versioning에서 발생할 수 있는 충돌을 방지(이는 Trunk Based Development와도 관련이 있다)
쉬운 리팩토링: 한 곳에서 전체 코드베이스에 대한 리팩토링을 실행할 수 있어 시간을 절약

Monorepo 관리를 위해 Yarn Workspaces, Nx, Bazel 같은 도구를 사용할 수 있으며, 이들은 프로젝트 간 의존성을 관리하는데 매우 효율적이다.

2. CI / CD

지속적 통합(Continuous Integration, CI)과 지속적 배포(Continuous Deployment, CD)는 개발 과정을 자동화하고, 빠르고 안정적인 소프트웨어 배포를 가능하게 한다.

빠른 피드백: 개발자들은 소스 코드를 주기적으로 main branch에 통합하고, 자동화된 테스트를 통해 문제를 조기에 발견한다.
자동화된 배포: 새로운 코드 변경 사항이 문제없이 통과되면, 자동적으로 스테이징 혹은 프로덕션 환경에 배포된다.
운영 효율성: 배포 절차를 자동화함으로써 개발자들이 코딩에 더 집중할 수 있다.

CI/CD 파이프라인을 구축하는 데에는 Jenkins, Travis CI, GitHub Actions, GitLab CI와 같은 도구들이 널리 사용된다.

3. Design System

디자인 시스템은 반복되는 디자인 요소와 패턴을 표준화하여 일관된 사용자 인터페이스(UI)를 제공한다. 디자인 시스템의 주요 요소는 다음과 같다.

UI 컴포넌트: 버튼, 입력 인풋, 모달 등과 같은 재사용 가능한 UI 요소
스타일 가이드: 색상, 폰트, 간격 등의 기본 스타일 규칙을 정의
문서화: 디자인 시스템의 사용법과 베스트 프랙티스를 명확히 기술해둔 매뉴얼

디자인 시스템은 Storybook, Pattern Lab, Styleguidist와 같은 도구와 함께 사용하여, 개발 프로세스와 디자인의 일관성을 유지한다. 또한 Yarn Workspace 등의 기능으로 디자인 시스템 모듈을 만들어 각 프로젝트에 임포트 하는 방법도 존재한다. 편의성을 위해서라면 이렇게 하는 것이 좋다.

4. Event Logging

사용자 이벤트 로깅은 사용자가 애플리케이션과 상호작용하는 방식을 기록하고 분석하는 데에 중요하다. 이를 통해 다음과 같은 이점을 얻을 수 있다.

사용자 행동 이해: 사용자가 애플리케이션을 어떻게 사용하는지 더 잘 이해할 수 있기된다.
성능 모니터링: 성능 이슈를 식별하고 최적화하여 사용자 경험을 향상시킴
오류 추적: 문제가 발생했을 때 더 빠르게 문제를 파악하고 해결할 수 있음

이벤트 로깅을 위해 Google Analytics, Mixpanel 등의 서비스를 활용할 수 있으며, 로깅을 담당하는 모듈을 만들어 각 프로젝트에서 임포트하여 사용하면 통일된 로깅 로직을 전 서비스에서 공유할 수 있다.

5. Monitoring

모니터링은 애플리케이션의 상태를 실시간으로 감시하고, 문제가 발생했을 때 즉각적인 조치를 취할 수 있게 해준다. 이를 통해 다음의 이점을 얻을 수 있다.

가용성: 시스템의 가용성을 보장하고, 다운타임을 최소화한다.
성능 및 사용성: 애플리케이션이 기대한 대로 원활히 동작하는지를 확인한다.
알림: 문제 발생 시 신속하게 알림을 제공하여 대응할 수 있도록 한다.

모니터링을 위한 툴로는 Prometheus, Grafana, Sentry 등이 있으며, 개발팀이 신속하게 반응할 수 있는 경보 시스템을 갖추는 데 큰 도움이 된다.

6. A/B Test

A/B 테스트는 사용자 경험과 전환율을 개선하기 위한 효율적인 방법이다. A/B 테스트를 통해 다음과 같은 이점을 얻을 수 있다.

의사결정: 데이터에 근거하여 어떤 UI/UX 변화가 더 효과적인지 결정할 수 있다.
사용자 선호도: 다양한 사용자층의 선호도를 이해하고, 최적화된 경험을 제공할 수 있다.
위험 회피: 큰 변경 사항을 적용하기 전에 리스크를 줄일 수 있다.

A/B 테스트 구현을 위해 Optimizely, Google Optimize, Firebase 등의 도구를 사용할 수도 있고, 직접 로직을 구축해서 할 수도 있다. 중요한 것은 A/B 테스트를 구현하는 로직의 통일이며, 통일성 있는 A/B 테스트 환경이 갖추어지면 전사적으로 수많은 테스트를 진행해 볼 수 있는 계기가 된다.

결론

현대적인 프론트엔드 인프라를 구축함으로써 비즈니스는 빠르게 변화하는 시장 환경에 대응하고, 사용자들에게 최고의 경험을 제공할 수 있다.