モバイルバンキングアプリの全面刷新
数百万人が使うモバイルバンキングアプリを、銀行・カード・証券・保険のサービスまで一つのアプリに収めるよう全面刷新するプロジェクトで、ログインと認証の領域を担当しました。ログインで止まれば顧客は口座照会も振込もできず、認証は多くの画面と外部モジュールにまたがって絡み合っているため、一か所を直すと別の所が壊れやすい領域です。古い方式で作られたログイン・認証画面を新しい画面作成方式で書き直し、本人確認・生体認証・身分証認証を業務単位に分けて整理しました。外部の顔認証ソリューションをアプリに連携して認証フローにつなぎ、他の担当者が認証機能を簡単に呼び出せるよう呼び出し方式も設計しました。
古い画面と新しい画面が併存する間に書き直したログイン
モバイルバンキングアプリのログイン・認証画面を、新しい画面作成方式(宣言型)で書き直しました。画面の状態、入力値、検証結果、認証の進行状態を一か所で管理するよう整理し、画面がいつ、なぜ変わるのかを追いやすくしました。刷新期間中は既存の画面と新しい画面が一つのアプリ内に併存していたため、画面単位で影響範囲を見極め、既存の流れが壊れていないかを確かめる箇所も併せて点検しました。他プラットフォームのアプリも同じ時期に画面方式を変えていたので、実装は違っても利用の流れと認証ポリシーは同じに見えるよう合わせました。

ログイン・本人確認・生体・身分証を業務単位に分けた認証構造
バンキングアプリの認証は、ログイン、本人確認、生体認証、身分証認証が多くの画面と外部モジュールにまたがって絡み合っています。この流れを業務単位に分け、画面遷移と認証状態を別々に管理するようにしました。各画面の担当者は、必要な認証機能だけを選んで安定して呼び出せます。

顔認証やカメラが失敗しても途切れない本人確認
モバイルバンキングアプリの顔認証による本人確認は、外部の顔認証ソリューションをアプリに連携して作りました。ソリューションをログイン・認証フローに直接組み込み、初期化、カメラ権限、撮影結果、失敗応答、再試行をアプリの認証状態と結び付け、途中で失敗しても顧客の流れが途切れないようにしました。機種やOSバージョンごとに異なって起きていたカメラの問題も追跡しました。権限の状態、カメラの起動、画面を行き来するときのカメラの解放と再開、撮影結果の受け渡しで起きる例外を一つずつ見つけて安定させました。

他の担当者が中身を知らなくても呼び出せる認証モジュール
大規模なバンキングアプリでは、認証機能をログイン担当の複数の開発者と多くの画面が共に使います。担当者間の協業コストを減らすため、認証モジュールの呼び出し方式を自ら設計して提供しました。内部の実装は隠し、何を渡せば何が返るか、結果をどう知らせるかだけを明確に決め、他の画面でも認証機能を簡単に組み込めるようにしました。

この仕事のポイント
ログイン・本人確認・生体認証・身分証認証を業務単位に分けた認証構造
顔認証の外部モジュール連携と、機種・OSバージョン別のカメラ不具合の安定化
他の担当者が内部を知らなくても呼び出せる認証モジュールの呼び出し方式
インサイト
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



