항공 프론트엔드 구축기 (6/10): 컨테이너를 둘로 쪼개지 않았다
Summary
웹과 앱 웹뷰를 한 방에 해결하는 기가 막힌 단일 레이아웃 컨테이너 설계법
각종 환경 분기와 복잡한 모바일 웹 브라우저 부작용을 단 한 줄의 조건식으로 잠재운 여기어때 항공의 실무 노하우
다양한 환경에 유연하게 대처하면서도 높은 유지보수성을 가져가는 프론트엔드 공통 레이아웃 설계 아키텍처를 소개합니다. 환경별로 불필요하게 컴포넌트를 쪼개는 대신 공통의 핵심 뼈대만 남기고, 브라우저 주소창, 기기별 회전 대응 여백, 헤더 그림자 제어 등은 전용 훅으로 정교하게 격리하는 실제 구현 전략을 배울 수 있습니다.
- 01웹 브라우저의 가변적인 주소창 높이에 대응하는 100dvh와 앱 웹뷰 전용 100vh의 최소한의 분기 처리
- 02디바이스 안전 영역(Safe Area)과 기기 회전 이벤트를 반응형으로 부드럽게 감지하는 전용 훅 적용
- 03동적으로 높이가 계산되는 하단 영역의 레이아웃 시프트(CLS) 현상을 지연 렌더링 방식으로 우아하게 우회
- 04헤더를 넘겨주기만 하면 스크롤 상단 진입/이탈 여부에 따라 그림자가 자동 처리되는 무상태 구조
- 05불필요한 리렌더링을 차단하기 위해 스크롤 조작 기능과 스크롤 상태 구독 기능을 두 종류의 훅으로 이원화
RECOMMENDATION
하이브리드 앱이나 다양한 모바일 뷰포트를 일관되게 지원해야 하는 크로스 플랫폼 프론트엔드 개발자 및 공통 컴포넌트 아키텍처 최적화에 관심이 깊은 시니어 React 개발자에게 적극 추천합니다.
The Problem
웹, 모바일 웹, 앱 웹뷰 등 다양한 플랫폼을 동시에 대응해야 하는 상황에서 환경별로 레이아웃 컨테이너를 쪼개어 구현할 경우, 환경에 대한 개별 지식이 컴포넌트 내부에 중복 저장되어 코드 복잡도가 무한히 증가하는 문제가 있었습니다.
The Solution
컨테이너를 하나로 유지하면서 웹과 웹뷰를 가르는 환경 분기를 '전체 화면일 때의 높이 단위 결정(100dvh vs 100vh)' 단 한 줄로 축소하고, 나머지 환경 의존적 요소(뒤로가기, 세이프 에어리어, 화면 오버레이 등)는 하위 전용 훅과 개별 모듈로 이관하여 격리했습니다.
The Result
레이아웃 컨테이너는 오직 세 가지 속성(mode, header, bottomBar)만 주입받는 극도로 단순하고 재사용성 높은 형태로 정리되었으며, 동적 하단 바 렌더링 시 발생하는 레이아웃 시프트를 해결하고 스크롤 동작과 상태 관리 훅을 분리하여 리렌더링 성능 최적화를 달성했습니다.
Trade-off
모든 세부 환경 분기를 훅과 외부 모듈로 밀어내면서 전체를 통제하는 중앙화된 레이아웃 제어 코드가 사라졌으며, 뷰포트 크기가 실시간으로 동적으로 변할 때는 컴포넌트 외부에서 스크롤 대상 전환 등 일부 구체적인 제어 비용을 함께 감수해야 합니다.
Key Concepts
More from 여기어때
View all posts from 여기어때EKS 컨테이너 메모리 스파이크 추적기
EKSPage CacheLogback2일 전SRE 업무에 AI 녹여내기 — 2편: Alert Adviser로 장애 원인 분석 자동화
GrafanaMCPSlack Bot6일 전SRE 업무에 AI 녹여내기 — 1편: Smart RI Calc로 인프라 비용 산정 자동화
SREAWS KarpenterCost Estimation6일 전WebFlux 전환 부하 테스트를 다시 쓴 이야기
WebFluxSpring BootLoad Testing1주 전데드락을 해결하려다, 락을 줄이게 된 이야기
MySQL InnoDBDeadlockPessimistic Lock1주 전
