CoreML 기반 멀티 크롭(Multi-Crop) 기능 개발

QANDA 앱의 문제 검색 효율성을 위해, 사용자가 한 번의 촬영으로 다수의 문제를 동시 선택하고 인식할 수 있는 멀티크롭(Multi-Crop) 시스템을 제안하고 기획 및 개발했습니다. 아이디어를 실현하기 위해 CoreML 기반의 객체 탐지 모델을 이용해 문제 영역 자동 예측 기능을 구현했으며, 다수의 영역이 중첩되는 복잡한 UI 환경에 대응하고자 EdgeCoordinator 패턴을 설계했습니다. 이를 통해 네 모서리를 활용한 리사이징 로직과 시각적 피드백을 제공하는 직관적 UX를 완성했습니다. 결과적으로 고도화된 학습 경험을 주도적으로 설계해냈습니다.

1. 프로젝트 개요

사용자가 학습 질문을 올릴 때, 문제마다 사진을 따로 찍어야 하는 불편함을 해결하기 위해 한 번의 촬영으로 여러 문제를 동시에 선택하고 자르는(Crop) 기능을 개발했습니다.

2. 핵심 기술 챌린지: 터치 영역 간섭 해결

여러 개의 사각형(Crop Area)이 겹쳐 있는 상황에서 사용자가 ‘모서리’를 잡으려는지 ‘면’을 이동하려는지 판별하기 어려웠습니다.

해결책: EdgeCoordinator 패턴 설계

• Hit Slop & Priority: 시각적 영역보다 더 넓은 논리적 터치 영역을 계산하고, Selected > Corner > Edge 순으로 터치 우선순위를 부여하는 코디네이터 객체 구현
• State Pattern: 각 사각형의 상태(.idle, .resizing, .moving)를 관리하여 뷰 컨트롤러의 복잡도 제어
• 자유로운 조작 구현: 각 영역을 네 개의 꼭지점으로 제어하며, 선택 상태에 따라 Border 강조, 인덱스 라벨 표시 등 다양한 UI 피드백을 제공합니다.

3. CoreML 파이프라인 최적화

• On-device Inference: 서버 통신 없이 디바이스 내에서 즉각적인 피드백을 주기 위해 CoreML 모델 최적화 및 비동기 추론 파이프라인 구축
• UI Feedback: 추론된 CGRect 값을 뷰 좌표계로 변환하여 사용자가 즉시 수정 가능한 형태로 렌더링
• 자동 탐지 연동: 이미지에서 문제 위치를 예측하고 반환된 영역을 UI에 자동 표시하며, 사용자는 필요 시 해당 영역을 직접 수정할 수 있습니다.

4. 터치 기반 인터랙션 최적화

• 직관적인 UX: HoverView 및 Indicator Views를 활용하여 직관적인 선택과 조작 경험을 제공합니다.
• 멀티 선택 지원: 멀티 선택 상태에서도 개별 영역을 명확히 구분하여 조작할 수 있도록 설계했습니다.

5. 성과

• 기존 단일 크롭 대비 문제 등록 소요 시간 70% 단축
• 직관적인 자동 인식 경험 제공으로 검색 전환율 유의미하게 상승
• 문제 등록 UX가 크게 개선되어, 다수의 문제를 한 번에 등록하려는 사용자 니즈에 부합함
• OCR/AI 인식 기능과 시너지를 통해 학습 흐름을 자연스럽게 이어갈 수 있는 구조 마련