alpaka206

OCR 특수기호 인식을 위한 템플릿 관리 시스템 설계: 팩토리 패턴 기반 구조화

date
Jun 8, 2025
slug
ocr-template-factory-frontend-pattern
author
status
Public
tags
펑타이그레이터차이나
summary
OCR 시스템에서 특수기호 인식 문제를 해결하기 위해 도입한 템플릿 기반 구조를 프론트엔드 개발 관점에서 풀어낸 글입니다. 템플릿 팩토리와 매니저 구조를 통해 기기/언어/색상 조건에 따른 유연한 확장을 가능케 했고, 이를 통해 프론트엔드의 Template Method 패턴과의 유사성을 도출해냈습니다.
type
Post
thumbnail
category
✍️ Study
updatedAt
Jul 6, 2025 05:08 PM

배경

OCR 기반 검증 시스템을 운영하면서, 특수기호(+, -, =, *, ") 인식 오류를 해결하기 위해 픽셀 기반 템플릿 매칭 방식을 도입하게 되었습니다.
하지만 서비스가 고도화되며 다음과 같은 다양한 조건을 고려해야 했고, 템플릿 수는 급격히 증가했습니다:
  • 다양한 기기 (모바일 / 태블릿 / 데스크톱)
  • 다양한 언어와 폰트 크기
  • 텍스트 색상 (검정 / 흰색 등)
 
문제점 요약
  • 템플릿 수가 기하급수적으로 증가
  • 조건별로 적절한 템플릿을 찾기 어려움
  • 하드코딩된 분기 로직이 유지보수를 어렵게 함

해결 전략 - Template Factory + Manager 설계

초기에는 단일 폰트와 배경 대비만 고려한 간단한 템플릿 구조로 충분했습니다.
그러나 다양한 디바이스 환경을 대응하며 아래와 같은 리팩토링이 필요해졌습니다.

주요 설계 원칙

  • 템플릿 생성을 new() 대신 Factory 메서드로 위임
  • 배경 밝기, 사이즈, 기호 종류 등을 입력값으로 처리
  • 모든 템플릿 객체는 공통 인터페이스를 따르고 내부 로직은 각자 구현

구조 개요

구성 요소
역할 설명
TemplateManager
조건에 맞는 템플릿을 생성 요청 및 관리, 내부적으로 _create_template() 호출하여 생성 관리
TemplateFactory
템플릿 타입에 따라 알맞은 클래스 인스턴스를 반환, 관리 딕셔너리에 타입 매핑
Template (추상 클래스)
generate(background) 메서드 강제 구현. 각 기호 클래스가 상속

코드 예시

templates = TemplateManager.create_templates(bg_brightness=85) def _create_template(self, template_type, background): size = ... thickness = ... template = TemplateFactory.create_template(template_type, size, thickness) self._templates[template_type] = template.generate(background)
_templates = { 'plus': PlusTemplate, 'minus': MinusTemplate, 'equal': EqualTemplate, ... }

구조 개선으로 얻은 효과

개선 포인트
설명
유지보수성 향상
새로운 기호 추가 시 Factory에만 등록하면 됨
중복 제거
조건 분기 중복 및 하드코딩 제거
코드 일관성
템플릿 생성 로직이 모두 공통 인터페이스 기반
성능 최적화
동일 조건 템플릿은 캐싱 → 재사용 가능

프론트엔드 개발자로서 느낀 연결점

템플릿 구조를 설계하며 가장 인상 깊었던 점은 “공통된 처리 흐름은 고정하고, 세부 로직은 상황에 따라 다르게 정의하는 방식”이었습니다. 이 구조는 프론트엔드에서도 템플릿 메소드 패턴처럼 자주 볼 수 있는 방식입니다.

템플릿 메소드 패턴과의 유사성

Template.generate() 메서드를 모든 기호 클래스가 구현하도록 강제한 구조는 공통 상위 로직을 고정하고, 하위 클래스에 세부 구현을 위임하는 템플릿 메소드 패턴의 전형적인 구조입니다.
구분
내용
공통 로직
템플릿 생성 흐름 (사이즈, 두께 계산 등)
가변 로직
픽셀 배열 생성 방식 → 기호 클래스마다 상이

프론트엔드에서 자주 쓰이는 유사 구조

예시 컴포넌트
설명
BaseModal.renderBody()
모달 구조 고정, 콘텐츠만 커스터마이징
AbstractChart.renderData()
차트 유형별 렌더링 분기
ThemeStrategy.applyColors()
테마에 따라 색상 적용 방식 분리

프론트엔드에 이렇게 응용할 수 있습니다

  • 조건별 UI 구성 로직을 추상 메서드 기반 구조로 분리 → 코드 일관성 확보
  • 컴포넌트 구조를 공통 인터페이스로 통일 → 재사용성과 테스트 용이성 향상
  • 기기/언어/테마 대응 로직을 명시적으로 관리 가능

마무리 요약

OCR 템플릿 설계를 하며 얻은 가장 큰 인사이트는 “UI든 이미지든, 공통 흐름은 고정하고 변동 요소만 유연하게 추상화하면 유지보수성이 높아진다"는 점이었습니다.
이는 프론트엔드에서 자주 마주치는 조건 분기, 테마 대응, 기기별 UI 분기 등의 문제를 템플릿 메소드 기반 구조로 체계적으로 다룰 수 있다는 것을 다시금 확인시켜준 경험이었습니다.