안녕하세요! 이 글은 현재 제가 참여 중인 사이드 프로젝트에서 겪은 고민을 바탕으로 작성하게 되었습니다.

저희 프로젝트는 학생증을 촬영하여 인증하는 프로세스를 포함하고 있는데요. 기획자분의 아이디어에 따라, 학생증이 프레임 안에 들어오면 자동으로 인식하고 다음 페이지로 넘어가는 방식을 기획하게 되었습니다. 즉, 촬영 버튼 없이! 프레임 안에 학생증이 들어오면 바로 S3에 업로드되는 방식이죠.

그런데, 곰곰이 생각해보니 "웹앱에서는 이게 가능할까?" 라는 의문이 들더라고요.

그래서 실제로 구현이 가능한지, 어떤 문제가 있는지 파봤고, 이 글은 그 조사 내용을 정리한 것입니다.

사이드 프로젝트 팀원들에게 공유도 하고, 비슷한 고민을 하고 있을 분들께도 도움이 되었으면 해서 블로그에 남겨봅니다!

왜 OCR 자동 인식이 문제일까?

아래는 실제 팀원들과의 대화 내용입니다.

여기서 핵심은 이겁니다:

웹앱에서는 이런 방식의 자동 인식 구현이 어렵다!

왜 어렵냐고요? 그건 실제로 어떻게 구현되고 작동하는지를 알아야 이해할 수 있습니다. 한번 같이 알아봅시다!

은행 앱은 어떻게 신분증을 인식할까?

은행 앱이나 통신사 앱을 써보셨다면 이런 프로세스를 본 적 있을 겁니다.

신분증 준비 → 카메라로 촬영 → 인식 → 다음 단계로 이동

하지만 개발자 입장에서 보면, 이 과정은 생각보다 훨씬 복잡합니다.

신분증 준비 → 카메라에 프레임 표시 → 신분증 위치 인식 → 자동 캡처 및 업로드 → 서버에서 OCR 처리 → 결과에 따라 다음 페이지로 이동

여기서 중요한 포인트는, 은행 앱은 어떻게 프레임 안에 신분증이 들어온 걸 자동으로 인식했을까? 이걸 알아야 저희 프로젝트에도 적용할 수 있을지 판단할 수 있어요.

나는 어떻게 구현해보려고 했는가..

저는 처음에 ‘밝기 감지’로 시도했습니다.

프레임 안에 밝은 면적이 많으면 신분증이 들어왔다고 판단

하지만 문제는, 밝은 배경이나 다른 객체도 밝기 기준만 맞으면 그냥 인식돼버린다는 거죠. 즉, 정확한 인식이 어렵습니다.

진짜 방법은 머신 러닝 기반의 ‘객체 인식’

은행 앱은 단순 밝기 감지가 아닙니다. 실시간으로 카메라 프레임을 분석하고, 그 안에 ‘신분증’이라는 객체가 있는지를 판단하는 머신 러닝 기반의 시스템을 사용한다고 예측됩니다.

신분증이라는 물체를 ‘이해’ ✔ 위치를 인식하고, 기준에 맞는지 판단 ✔

자동 캡처 및 처리!

여기서 사용되는 기술은 대표적으로 이런 것들이 있습니다:

• YOLO (You Only Look Once)
• SSD (Single Shot MultiBox Detector)
• Faster R-CNN

이런 객체 감지 모델들은 실시간으로 프레임을 분석하여,

“여기 신분증이 있습니다! (신뢰도: 92%, 위치: 정중앙)” 이런 결과를 반환해주는 거죠.

인식 조건 예시

조건	설명
객체 인식 확률 (confidence)	일반적으로 90% 이상
프레임 내 차지 비율	너무 작거나 한쪽에 치우쳐 있으면 안 됨
기울기/왜곡	각도 왜곡이 심하면 보류
조명/명도	너무 어둡거나 밝아도 보류
이 조건들을 만족하면?

→ 자동 캡처 → OCR 처리 → 다음 단계 이동

그럼 이런 머신 러닝 모델은 어떻게 만들었을까?

대기업(은행, 통신사 등)은 이런 방식으로 데이터를 준비합니다:

• 주민등록증 사진 1만 장, 운전면허증 5천 장 등 대규모 데이터셋 구축
• 모델을 학습시켜서 디바이스 내에서 실시간 객체 인식 가능
• iOS: Core ML, Android: ML Kit, TensorFlow Lite 등 사용

그런데 이건 웹에서는 거의 불가능하다?

결론적으로, 이런 고도화된 머신 러닝 기반 실시간 인식은 웹앱에서는 매우 어렵습니다.

왜냐하면:

• 웹은 카메라 프레임을 실시간으로 처리하기에 성능 한계가 있습니다.
• 브라우저 보안 정책상 로컬 머신 러닝 실행도 제한적입니다.
• 모바일 네이티브 앱과 달리, 저수준 하드웨어 접근이 어렵습니다.

웹앱에서는 자동 캡처가 어렵다

결론적으로, 웹에서는 학생증이 프레임 안에 들어오면 자동 인식 후 페이지 이동 같은 기능은 현실적으로 구현이 어렵습니다.

대안이 있다면?

사용자 촬영 버튼 제공

캡처 후 서버에서 인식 및 결과 반환 → 페이지 이동 카메라 프레임에 신분증(학생증)에 맞게 위치에 두고 촬영 버튼을 통해 직접 촬영 가능하게 하는 것이 현실적으로 좋다고 봅니다.

이러한 방식이 에러 바운더리에도 좋고, 웹앱에서 현실적으로 구현 가능한 범위라고 생각합니다.

마무리하며

이번 조사를 하면서 느낀 건, 은행 앱에서의 자동 인식 기능은 단순히 ‘찍고 넘어간다’ 수준이 아니라, 고도로 정교한 머신 러닝 기술과 네이티브 환경이 결합된 결과물이라는 점입니다.

저희 사이드 프로젝트는 웹앱 환경이기 때문에, 동일한 사용자 경험을 기대하려면 다른 접근 방식이 필요하다는 걸 깨달았어요.

혹시 비슷한 고민을 하고 계신 분이 있다면, 이 글이 판단에 도움이 되었으면 좋겠습니다!