배포 없이 앱과 로컬 웹을 잇다
Summary
매번 빌드 기다리다 하루 다 가셨나요? 배민이 배포 없이 하이브리드 앱과 로컬 웹을 실시간으로 '잇는' 비결
지루한 CI/CD 대기 시간 제로! 양방향 웹소켓 터널링으로 로컬 화면을 앱에 즉시 띄우는 프록시 시스템 ITDA 구축기
하이브리드 앱 웹뷰 화면 하나 고칠 때마다 배포 프로세스를 견뎌야 했던 웹 개발자들을 위한 혁신적인 해결책입니다. 사내의 엄격한 보안 가이드와 VPN 동적 IP 문제를 극복하며 설계된 독자적 프록시 시스템 ITDA의 구성과 작동 방식을 생생히 전해 드립니다.
- 01빌드와 배포 프로세스 전격 생략: 캐시 무효화 대기 없이 실시간 화면 피드백 확보
- 02CloudFront Function 기반 스마트 리다이렉트: 네이티브 앱 수정 최소화 및 안전한 트래픽 판별
- 03싱글 웹소켓을 통한 고효율 터널링: 다중 이미지 및 CSS 리소스를 고유 ID로 매핑해 동시 처리
- 04철저한 Fallback 메커니즘: 로컬 연결 해제 시 기존 베타 시스템으로 자동 복구하는 무중단 설계
RECOMMENDATION
하이브리드 앱의 웹뷰 화면 개발 주기를 단축시키고자 하는 엔지니어링 팀에게 강력히 권장합니다. 특히 보안 제약이 많아 외부 프록시 도구를 도입하기 힘든 대기업 인프라 환경에서 아키텍처 수립의 훌륭한 이정표가 될 것입니다.
The Problem
하이브리드 앱 환경에서 웹뷰 화면을 개발할 때, 아주 작은 코드 수정 사항이라도 앱 내에서 확인하려면 빌드 및 배포, CDN 캐시 무효화 등의 번거로운 베타 배포 과정을 매번 거쳐야만 했습니다. 또한 사내 VPN의 동적 IP 정책과 보안 제약으로 인해 외부 터널링 도구를 원활히 활용하기 어려웠습니다.
The Solution
사내 환경에 특화된 터널링 기반 프록시 시스템인 'ITDA'를 개발하였습니다. CloudFront Function(CFF)에서 개발 프로파일 요청을 감지해 ITDA 프록시로 302 리다이렉트하게 유도하고, 개발자의 로컬 PC에서 프록시로 웹소켓 연결을 미리 맺어 두어 앱의 요청을 개발자 로컬 서버로 즉시 전달하는 구조를 설계했습니다.
The Result
배포 과정 없이 로컬 개발 서버에서 수정한 코드를 하이브리드 앱 웹뷰에서 실시간으로 확인할 수 있게 되어 개발 생산성이 크게 향상되었습니다. 로컬 개발 서버가 끊기더라도 자동으로 기존 베타 환경으로 복구되는 안전장치를 구축하여 안정적인 테스트 환경을 보장합니다.
Trade-off
요청 주소가 프록시 주소로 전환되는 리다이렉트 방식을 사용함에 따라, 서로 다른 도메인 간의 브라우저 보안 정책(CORS) 및 세션/쿠키 유지 여부를 개발팀이 인프라와 웹 영역에서 지속적으로 점검하고 관리해야 하는 추가 조율 비용이 발생합니다.
Key Concepts
More from 우아한형제들
View all posts from 우아한형제들기술블로그 세 번째 책 《요즘 우아한 백엔드 개발》 출간
KotlinApache KafkaElasticsearch3주 전BFF 서버에 SSE를 도입한 이유: 전시 서버의 통신 구조 재설계
BFFSSEReact Query1개월 전기술이 없던 곳에 기술 더하기: 사내 해커톤 플랫폼 만들기
AI-Assisted DevelopmentClaudeSpring Boot1개월 전멀티 어카운트 NACL 차단 자동화 도구 운영 및 개선 경험
AWS NACLAWS LambdaAmazon DynamoDB1개월 전AI가 내 프롬프트를 흘려듣는 이유: 원리부터 다시 본 컨텍스트 엔지니어링
LLMPrompt EngineeringContext Window1개월 전
