축약된 코드 속 오류를 원본 수준으로 되짚고, 배포 직후를 실시간으로 지켜보다
경량화된 코드에 남는 것은 축약된 이름뿐입니다.
케이뱅크는 MAXY Mobile로 그 오류를 원본 소스 수준에서 되짚습니다.
Background
도입 배경
케이뱅크(K뱅크)는 영업점 없이 디지털 채널만으로 금융 서비스를 제공하는 인터넷전문은행입니다. 손님이 만나는 접점이 앱 화면 하나로 모이기 때문에, 화면에서 발생하는 오류를 얼마나 빨리 발견하고 원인을 얼마나 정확히 짚어내는지가 서비스 품질을 좌우합니다.
케이뱅크 앱은 네이티브 화면과 웹뷰(WebView) 화면이 결합된 하이브리드 구조로 되어 있습니다. 앱 안에서 동작하지만 실제 화면은 웹 기술로 렌더링되는 구간이 있고, 이 영역의 기능들은 다수의 서비스가 독립적으로 개발·배포되는 MSA(Microservice Architecture) 구조로 구성되어 있습니다. 배포 주기가 짧고 잦은 대신, 오류가 발생했을 때 그 원인이 어느 영역에 있는지 좁혀 나가기가 상대적으로 어렵습니다.
특히 배포 과정에서 수백 개 이상의 JavaScript 파일이 경량화(Minify)되어 나갑니다. 공백과 줄바꿈이 제거되고 파일명·함수명·변수명이 축약되기 때문에, 오류가 발생해도 남는 정보는 축약된 이름뿐입니다. 웹뷰 구간에서 생긴 문제는 손님에게 그대로 앱 오류로 보이지만, 정작 원인을 짚으려면 어느 코드의 어느 지점에서 문제가 생겼는지 판별하기 어려운 상태에서 분석을 시작해야 했습니다.
신규 버전 배포 직후도 관리가 필요한 구간이었습니다. 사내 검증을 통과했더라도 실제 사용자 환경에서는 예상하지 못한 오류가 발생할 수 있고, 이때 중요한 것은 초기 대응 속도입니다. 인지가 늦어질수록 영향을 받는 손님이 계속 늘어나기 때문입니다. 이에 따라 K뱅크는 하이브리드 앱 웹뷰 구간에서 발생하는 경량화된 JavaScript 오류의 원본 소스 수준 확인과, 배포 직후 오류 발생 여부·영향 사용자의 실시간 확인을 목표로 모바일 앱 모니터링 솔루션 도입을 추진했습니다.
주요 도입 목적
- 하이브리드 앱 웹뷰(WebView) 구간에서 발생하는 오류의 수집
- MSA 환경에서 분산 배포되는 다수 JavaScript 오류의 정확한 위치 파악
- 경량화(Minify)된 코드를 원본 소스 수준에서 확인하는 디버깅 체계 확보
- 신규 버전 배포 직후 오류 발생 여부의 실시간 확인
- 오류의 영향을 받는 사용자 범위의 즉시 파악
- 롤백 · 긴급 패치 여부 판단에 필요한 근거 데이터 확보
- 잦은 배포 주기에 대응하는 품질 관리 체계 구축
Solution
도입 솔루션
MAXY Mobile은 실제 손님의 단말에서 발생하는 오류와 성능 저하, 행동 데이터를 실시간으로 수집·분석하는 모바일 앱 모니터링 솔루션으로, 하이브리드 앱의 네이티브 구간과 웹뷰 구간을 하나의 지표 체계로 함께 수집합니다. 경량화되어 배포된 웹뷰 구간의 JavaScript 오류도 Source Map 연동을 통해 원본 소스 수준에서 확인할 수 있습니다.
- 하이브리드 앱 웹뷰(WebView) 구간의 JavaScript Error 실시간 수집
- Source Map 연동 — 경량화된 코드의 원본 소스 매핑
- 오류 발생 파일 · 라인 단위 위치 확인
- 같은 오류의 발생 빈도 · 앱 버전별 집계
- 앱 버전 · 서비스 배포 버전별 오류 발생 추이 비교
- 배포 시점 기준의 오류 발생 현황 확인
- 오류가 발생한 사용자 · 세션 확인
- 단말 모델 · 운영체제 · 앱 버전별 오류 분포 확인
- 오류 발생 직전 손님의 화면 이동 및 행위 이력 추적
- API / HTTP 통신 실패 및 응답 지연 분석
- 대상 앱의 성능과 서비스 연속성에 영향을 최소화하는 경량 수집 구조
Impact
기대 효과
경량화된 코드의 오류를 원본 소스 수준으로 확인
MAXY의 Source Map 연동 기능을 통해, 축약된 이름으로만 남던 오류 정보를 원본 소스 기준의 파일명과 라인 단위로 되돌려 확인하고 있습니다. 경량화 이전의 코드를 보고 분석하는 것과 같은 조건에서 원인을 짚을 수 있게 되어, 오류 정보를 해석하는 데 소모되던 단계 자체가 줄었습니다.
하이브리드 앱과 MSA 구조에서도 오류의 위치를 좁혀 나가는 기준
네이티브와 웹뷰가 섞인 화면에서, 수백 개 이상의 JavaScript 파일이 독립적으로 배포되는 환경입니다. 손님이 겪은 오류가 어느 영역에서 비롯됐는지 판단하는 것 자체가 과제가 됩니다. 오류 발생 지점을 파일·라인 단위로 특정하고 같은 오류의 발생 빈도를 함께 확인하면, 분산된 구조에서도 어느 서비스의 어느 코드를 먼저 봐야 하는지 판단할 수 있는 기준이 생깁니다.
배포 직후 오류와 영향 사용자의 실시간 확인
신규 버전 배포와 동시에 오류가 발생하고 있는지, 그리고 어떤 손님들이 영향을 받고 있는지를 실시간으로 확인하고 있습니다. 앱 버전과 단말 환경까지 함께 확인할 수 있어, 배포 직후라는 가장 민감한 구간에서 '지금 문제가 있는가'와 '얼마나 번지고 있는가'를 데이터로 즉시 판단할 수 있게 되었습니다.
확산 전 판단으로 피해 손님 최소화
배포 직후 수집되는 오류 발생 현황과 앱 버전별 크래시 추이는 롤백을 할지, 긴급 패치로 대응할지를 결정하는 근거가 됩니다. 문제가 확산되기 전에 대응 방향을 빠르게 판단함으로써 피해를 겪는 손님이 늘어나는 것을 최소화하고 있으며, 잦은 배포와 서비스 품질을 함께 유지할 수 있는 기반을 확보했습니다.
Voice of Customer
담당자의 말
“MSA 환경에서 경량화되어 배포되는 JavaScript는 오류가 발생해도 정확한 위치와 원인을 파악하기 어렵습니다. MAXY의 Source Map 연동으로 원본 소스 수준에서 확인해 디버깅에 활용하고 있습니다. 신규 배포 직후에는 실시간 모니터링으로 오류 발생 여부와 영향을 받는 사용자를 확인하고, 문제가 확산되기 전에 롤백이나 긴급 패치 여부를 빠르게 판단하고 있습니다.”