모바일 뱅킹 앱 전면 개편
수백만 명이 쓰는 모바일 뱅킹 앱을 은행 · 카드 · 증권 · 보험 서비스까지 한 앱에 담도록 전면 개편하는 프로젝트에서 로그인과 인증 영역을 맡았습니다. 로그인이 막히면 고객은 계좌 조회도 이체도 할 수 없고, 인증은 여러 화면과 외부 모듈에 걸쳐 얽혀 있어 한 곳을 고치면 다른 곳이 깨지기 쉽습니다. 오래된 방식으로 짜인 로그인 · 인증 화면을 새 화면 작성 방식으로 다시 쓰고, 본인 확인 · 생체 인증 · 신분증 인증을 업무 단위로 나눠 정리했습니다. 외부 안면 인식 솔루션을 앱에 연동해 인증 흐름에 붙이고, 다른 담당자가 인증 기능을 쉽게 불러 쓰도록 호출 방식도 설계했습니다.
옛 화면과 새 화면이 함께 도는 동안 다시 쓴 로그인
모바일 뱅킹 앱의 로그인 · 인증 화면을 새 화면 작성 방식(선언형)으로 다시 썼습니다. 화면 상태, 입력값, 검증 결과, 인증 진행 상태를 한곳에서 관리하도록 정리해, 화면이 언제 왜 바뀌는지 따라가기 쉽게 했습니다. 개편 기간에는 기존 화면과 새 화면이 한 앱 안에 함께 있었기 때문에, 화면 단위로 영향 범위를 따지고 기존 흐름이 깨지지 않았는지 확인할 지점을 함께 점검했습니다. 다른 플랫폼 앱도 같은 시기에 화면 방식을 바꾸고 있어, 구현은 달라도 사용자 흐름과 인증 정책은 같게 보이도록 맞췄습니다.

로그인 · 본인 확인 · 생체 · 신분증을 업무 단위로 나눈 인증 구조
뱅킹 앱의 인증은 로그인, 본인 확인, 생체 인증, 신분증 인증이 여러 화면과 외부 모듈에 걸쳐 얽혀 있습니다. 이 흐름을 업무 단위로 나누고, 화면 이동과 인증 상태를 따로 관리하게 했습니다. 각 화면 담당자는 필요한 인증 기능만 골라 안정적으로 불러 씁니다.

안면 인식과 카메라가 실패해도 끊기지 않는 본인 확인
모바일 뱅킹 앱의 안면 인식 본인 확인은 외부 안면 인식 솔루션을 앱에 연동해 만들었습니다. 솔루션을 로그인 · 인증 흐름에 직접 붙이고, 초기화, 카메라 권한, 촬영 결과, 실패 응답, 재시도를 앱의 인증 상태와 연결해, 중간에 실패해도 고객의 흐름이 끊기지 않게 했습니다. 기기 종류와 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…



