삐삐북 개발기 7편 — 사진에 형광펜을 긋다: OCR과 이미지 편집

메모를 직접 타이핑하는 사람은 적다

책을 읽으면서 메모를 남기는 방법은 여러 가지입니다.

인상 깊은 구절을 그대로 옮겨 적기. 내 생각을 짧게 쓰기. 사진으로 찍어두기.

이 중에서 가장 자주 하는 건 사진입니다. 좋은 문장을 발견하면 책 페이지를 찍어두는 게 가장 빠르고 자연스럽습니다.

앱을 설계할 때부터 사진을 메모의 주요 수단으로 생각했습니다. 텍스트 입력도 있지만, 사진 등록이 핵심이어야 했습니다.

책 페이지 사진을 찍으면 그 안의 글자들을 텍스트로 변환할 수 있으면 좋겠다는 생각이 들었습니다.

나중에 특정 문장을 검색하거나, 텍스트로 메모를 활용하고 싶을 때 도움이 됩니다.

iOS에는 Vision 프레임워크에서 OCR 기능이 내장되어 있습니다. 별도 라이브러리 없이 Apple이 제공하는 기능을 쓸 수 있습니다.

VNRecognizeTextRequest를 사용하면 이미지에서 텍스트를 인식해서 가져올 수 있습니다. 한국어도 지원합니다.

사용법도 비교적 간단하고, 정확도도 나쁘지 않았습니다. 책 페이지처럼 인쇄된 텍스트는 특히 잘 인식합니다.

앱에서 책 표지 이미지와 메모 사진을 다루는 데 Kingfisher 라이브러리를 사용했습니다.

Kingfisher는 iOS에서 가장 많이 쓰이는 이미지 로딩 라이브러리 중 하나입니다. URL에서 이미지를 비동기로 다운로드하고, 캐싱도 자동으로 처리해줍니다.

책 표지처럼 외부 URL의 이미지를 반복적으로 보여줘야 할 때 매번 다운로드하면 느립니다. Kingfisher는 이미 다운로드한 이미지를 캐시에 저장해두고 빠르게 불러옵니다.

사진을 찍어서 메모로 저장하는 것에서 한 발 더 나아가고 싶었습니다.

형광펜으로 중요한 부분을 표시하거나, 밑줄을 긋거나, 간단한 메모를 사진 위에 써두는 기능. 실제 책에 하는 것처럼 사진에서도 할 수 있으면 훨씬 풍부한 독서 기록이 됩니다.

이걸 직접 구현하려면 터치 이벤트 처리, 그리기 기능, 색상 선택, 실행 취소 등 꽤 복잡한 기능들이 필요합니다. 처음엔 직접 만들어보려 했는데, 생각보다 범위가 넓었습니다.

그때 ZLImageEditor라는 오픈소스 라이브러리를 발견했습니다. Swift로 작성된 이미지 편집 라이브러리인데, 그리기, 텍스트 추가, 스티커, 자르기 등의 기능이 포함되어 있었습니다.

이 라이브러리를 기반으로 삐삐북의 메모 편집 기능을 구현했습니다. 처음에는 기본 기능만 썼지만, 이후 업데이트를 거치면서 형광펜, 밑줄 등 더 세밀한 편집이 가능하도록 커스텀했습니다.

텍스트 메모, 사진, OCR로 추출한 텍스트, 형광펜 편집까지.

책을 읽으면서 남기는 기록이 단순한 별점이나 한 줄 감상이 아니라, 그 책을 읽을 당시의 경험이 그대로 담길 수 있게 됐습니다.

1년 뒤에 그 기록을 꺼내보면, 그때 어떤 부분에서 무슨 생각을 했는지 생생하게 다시 떠올릴 수 있습니다.

그게 처음 이 앱을 만들고 싶었던 이유였습니다.