Read Original
#Frontend

항공 프론트엔드 구축기 (1/10): 웹, 모바일웹, 웹뷰를 코드 한 벌로

항공 프론트엔드 구축기 (1/10): 웹, 모바일웹, 웹뷰를 코드 한 벌로
01

Summary

웹부터 앱 웹뷰까지 코드 한 벌로 끝낸다! 여기어때의 항공 프론트엔드 개척기

Next.js 모노레포와 환경 추상화로 개발 속도와 사용자 경험을 동시에 잡은 싱글 코드베이스 구축 전략

본 아티클은 여기어때 항공 서비스 리뉴얼 과정에서 웹, 모바일 웹, 하이브리드 앱 웹뷰를 단일 코드베이스로 통합한 여정을 소개합니다. 상태와 라우팅의 불일치 문제를 해결하기 위해 공통 로직과 화면을 모두 공유하는 구조를 설계했으며, pnpm 모노레포를 활용해 개발자 경험(DX)을 극대화한 실전 노하우를 담고 있습니다.

  • 01웹과 웹뷰의 화면 구조가 갈라지면서 발생하는 상태 및 라우팅 불일치 문제를 해결하기 위한 단일 코드베이스 전환
  • 02pnpm 워크스페이스 기반 모노레포 아키텍처를 도입하여 불필요한 배포-설치 루프 제거 및 신속한 공통 라이브러리 피드백 반영
  • 03앱 브릿지, 브라우저 히스토리(뒤로가기), 레이아웃, 쿠키/브릿지 토큰 인증 등 플랫폼 간 환경 차이를 추상화 레이어로 캡슐화
  • 04초기 아키텍처 설계 단계의 병목을 방지하기 위해 가이드 문서, 스토리북, 브릿지 코드를 통한 적극적인 지식 자산화 진행

RECOMMENDATION

데스크톱 웹과 앱 웹뷰를 동시에 고도화해야 하거나, 한정된 리소스로 다중 플랫폼을 빠르게 지원해야 하는 프론트엔드 팀에게 Next.js 모노레포 기반의 환경 추상화 아키텍처 설계를 강력히 권장합니다.

The Problem

항공 서비스 리뉴얼 과정에서 기존 Vue2 기반 앱 웹뷰를 개편하고 아예 없던 데스크톱 웹을 새로 구축해야 했으나, 짧은 일정 속에서 웹과 웹뷰를 별도로 개발 및 유지보수해야 하는 중복 작업과 공통 로직 분리에 따른 상태 관리의 불일치 위험이 있었습니다.

The Solution

웹, 모바일 웹, 앱 웹뷰를 하나의 코드로 처리하는 단일 코드베이스 전략을 채택하고, pnpm 기반 모노레포를 구축하여 공통 컴포넌트와 환경별 추상화 계층(앱 브릿지, 인증, 레이아웃)을 분리하여 개발 및 배포 루프를 간소화했습니다.

The Result

동일한 화면 구현 코드를 웹과 네이티브 라우트에 같이 적용하여 화면 수준의 코드 한 벌 구축에 성공했으며, 국내선과 해외선 서비스를 웹, 모바일 웹, 앱 웹뷰의 3개 환경에서 동시에 안정적으로 론칭했습니다.

Trade-off

빠른 초기 구축을 위해 1인 선행 개발 방식으로 기반 아키텍처를 설계함에 따라 해당 개발자에게 지식 병목이 발생할 위험이 있었으며, 이를 완화하기 위해 브릿지 코드 가이드와 스토리북 등의 문서화 비용이 추가로 발생했습니다.

03

Key Concepts

Concept · 01

Single Codebase

웹, 모바일 웹, 앱 내 웹뷰 등 서로 다른 런타임 환경에서 동작하는 웹 애플리케이션을 하나의 코드 저장소와 공통 코드로 개발 및 유지보수하는 전략입니다.

  • 데스크톱 웹과 네이티브 웹뷰가 동일한 화면 구현 코드를 공유하도록 라우트 구조를 매핑함
  • 플랫폼에 따른 실제 차이점은 레이아웃 캡슐화와 조건부 분기 처리를 통해 저비용으로 해결함
Concept · 02

Monorepo (pnpm-workspace)

여러 개의 독립적인 프로젝트나 라이브러리 패키지를 하나의 코드 저장소(Repository)에서 관리하고, 패키지 간의 의존성을 효율적으로 공유하는 아키텍처 방식입니다.

  • apps/flight 서비스 프로젝트와 packages/core, packages/web-ui 등의 공용 라이브러리를 단일 저장소로 결합
  • workspace:* 의존성 지정을 통해 패키지 수정 사항이 별도 배포 절차 없이 실시간으로 서비스 화면에 반영되도록 개발 루프 개선
Concept · 03

App Bridge Abstraction

하이브리드 앱 내 웹뷰가 네이티브 영역과 데이터를 주고받는 고유 규약(Bridge)을 표준 인터페이스로 감싸서, 웹과 웹뷰 환경 구분 없이 동일한 함수 호출로 동작하도록 돕는 추상화 기법입니다.

  • 인증 토큰 획득 시 웹의 쿠키 방식과 앱의 브릿지 방식을 동일한 인터페이스로 통일하여 사용
  • 안드로이드 백키와 브라우저 히스토리를 하나의 규약으로 묶어 뒤로가기 제어를 추상화함