[Tech Team Insight #7] 산넘고 물건너 가는 먹거리 프로젝트 - 7기 정윤호, 김유림

 

제목: 산넘고 물건너 가는 먹거리 프로젝트

작성자: 7기 정윤호, 김유림

 

이번 4월 테크 인사이트에서는 조금 말랑말랑한 주제를 다뤄 보려 합니다. 아직 진행 중인 프로젝트이긴 하지만, SDP 테크팀이 ‘먹거리’ 프로젝트를 진행하며 겪었던 여러 기술적인 한계들과 이를 해결한 방법들에 대한 이야기를 들려 드리고자 합니다.

직관적인 작명에서 알 수 있듯 먹거리 프로젝트는 우리가 매일매일 소비하는 먹거리에 대한 정보를 제공합니다. 이미 영양정보, 건강정보, 가격정보를 제공하는 서비스는 많이 있습니다. 저희가 제공하고자 한 정보는 바로 먹거리의 환경영향정보인데, 이러한 정보를 제공함으로써 현대 식량 시스템이 야기하는 환경 문제에 대한 인식을 제고하고, 해결책을 제안하는 것을 목표로 하고 있습니다.

전세계적으로 식량 시스템에서 생산, 유통, 소비 모든 단계에서 환경에 미치는 영향들이 커지고 있고, 각국 정부와 시민, 기업들이 다 함께 해결책을 강구하고 있는 상황입니다. 이에 따라 국가, 기업 차원뿐만 아니라, 개인이 환경 문제 해결에 기여할 수 있는 방안 중 하나인 가치 소비가 확산되고 있습니다.

가치 소비는 제품을 구매할 때 가격이나 기능성이 아닌 친환경, 지속가능성 등 사회적 영향을 고려하는 것은 물론, 전형적인 미의 기준에서 벗어나 자신만의 개성을 추구하며 소비를 하는 행위를 의미합니다.

환경 분야에서도 가치 소비가 확산되고 있는 가운데, 이에 대한 정보는 개인이 일일이 고려할 수 없을 정도로 방대할 뿐 아니라 때로는 신뢰도가 낮다는 문제가 있습니다. 저희는 이 문제점에서 출발해 식품을 구성하는 원재료들에 대한 다각도에서의 환경 영향, 더 나아가 우리의 신체에 미치게 될 영향력에 대한 정보를 수집, 검증하여 제공하고자 했습니다.

초기에 구상한 먹거리 프로젝트의 (원대한) 청사진은 모바일 어플리케이션을 제작해 유저가 오프라인 환경에서 상품 이미지를 찍었을 때, 해당 상품을 구성하는 원재료명과 그에 대응하는 환경 정보를 제공받을 수 있도록 하는 것이었습니다.

하지만 몇 가지 이유로 인해 앱 개발에 앞서 크롬 익스텐션을 제작하기로 결정했습니다. 첫 번째 이유는 크롬 익스텐션을 사용한다면 현재 코로나로 온라인 식품 구매가 증가하는 추세에다가 가치 소비에 관심이 많고 모바일 환경에 익숙한 MZ세대들을 겨냥하여 솔루션을 제공하고 피드백을 받을 수 있을 것이라 판단했기 때문입니다. 두 번째로 더 중요한 이유는, 많은 테크팀원들이 앱 개발보다는 웹 개발에 익숙하기 때문에 구현 가능성의 측면에서 비교적 쉽다는 점 때문이었습니다. 수집한 정보를 제공할 수 있는 방안들을 빠르게 구현하고 테스트하는 과정으로 사용될 수 있는 셈입니다. 이 과정은 DB 설계, API 구축, OCR 성능 테스트 등 앱 개발 사전에 필요한 작업을 포함하고 있었습니다.

초기에 구상했던 익스텐션은 다음의 단계들을 거쳐 사용자에게 정보를 전달합니다. 1) 익스텐션 활성화 2) 웹페이지의 식품 원재료명 이미지 캡쳐, 3) OCR 기능 활용, 추출된 이미지에서 원재료명을 텍스트로 변환 4) DB에 저장된 환경영향물질과 매칭 5) 익스텐션의 팝업 화면에서 정보 제공 총 5 단계로 구성되었습니다.

그러나 개발이 진행됨에 따라 프로젝트는 기술적 한계를 하나씩 마주치며, 처음의 그림에서 멀어지기 시작했습니다.

 

#난관 1. 데이터 확보

첫 번째로 맞닥뜨린 문제는 데이터 확보의 문제였습니다. 우리 일상에서 가장 중요한 것 중 하나인 음식, 그 음식에 대한 규격화된 데이터가 생각보다 적었던 것입니다. 이마트의 SSG, 마켓컬리, 11번가, 쿠팡 등 다양한 식료품 이커머스 쇼핑몰을 둘러봤으나 대부분의 식품 데이터는 규격화된 텍스트 데이터가 아니라 라벨지 이미지의 형태로 제공되고 있었습니다.

 

그림 1. 라벨지 형태의 식품성분정보

그래서 팀원들은 한 개 사이트, 마켓컬리를 타겟으로 삼아 이 식품라벨지를 컴퓨터로 인식해 환경/성분정보를 제공하기로 방법을 변경했습니다. 사람이 직접 쓴 글자나 이미지 속에 있는 문자를 스캔으로 얻은 다음, 이를 컴퓨터가 인식할 수 있도록 디지털화하는 OCR(광학문자인식)을 이용하는 것입니다. 구글에 OCR 기능 구현을 검색해보면 나오는 블로그 포스팅들을 보니 인식률이 대단히 높아 보여 더욱 용기를 얻었습니다.

 

#난관 2. OCR 텍스트 인식기능

OCR을 이용해 라벨지를 인식하기로 결정하고 UI 등을 신나게 구성하던 중 또다른 난관에 부딪혔습니다. OCR의 문자인식기능이 생각보다 너무 떨어졌던 것입니다. OCR이 제대로 작동하지 않으면 다른 모든 부분이 의미가 없기 때문에, 프로젝트에 참여하는 개발 인원들이 모두 하던 것을 멈추고 OCR 기능테스트와 개선에 달려들었습니다. 가장 많이 사용한다는 테서렉트부터 카카오, 구글에서 배포하는 API까지 다양한 OCR을 테스트하고 기능을 개선하려는 노력을 해봤지만 녹록치 않았습니다. 

 

그림 2. 기능개선을 위한 노력의 흔적

 

 

OCR을 이용하려는 시도가 실패하면서 프로젝트는 가장 큰 방향 전환을 맞았습니다. 결국 백엔드 개발 팀원들이 필요한 성분데이터를 손수 구축하기로 한 것입니다. 물론 모든 상품에 대한 성분데이터를 일일이 입력하기는 현실적으로 어려우므로 몇 개의 대표 상품을 골라 성분데이터를 데이터베이스에 입력하고, 나머지 상품들에 대해서는 더미데이터를 채워 넣기로 결정했습니다.

 

이렇게 원시적인 방법을 써서라도 익스텐션을 완성하기로 한 것은 크게 두 가지 의미가 있기 때문입니다. 먼저 현재는 기술적 한계로 데이터베이스를 수동으로 구축했지만, 추후에 앱개발 프로젝트가 끝난 뒤 또는 개발 과정 중에 OCR 기능을 개선하게 된다면 해당 부분만 바꾸면 될 것이기에 큰 틀을 잡았다는 의미가 있습니다.

두 번째는 우리끼리 동작할 수 있는 서비스를 구축해보는 경험을 얻는 것이 다음 프로젝트로 넘어갈 때에 중요한 경험이 될 것이기 때문입니다. 유저가 프로그램을 설치하는 것에서부터 상품을 선택하고, 원하는 정보를 열람하는 과정을 한 바퀴 돌아봄으로써 다음 프로젝트 설계를 어떻게 해야할 지 감을 잡는 데에 도움을 얻을 수 있을 것이라 생각했습니다.

 

#난관 3. 익스텐션 팝업화면

기술적 고민은 여기에서 끝나지 않았습니다. 크롬 익스텐션에서 제공하는 자체 UI만으로 정보를 제공할 수 있는 방법은 크게 2가지, 뱃지(Badge)와 아이콘 클릭 시 나오는 팝업 화면 방식이 있는데, 저희는 팝업 방식의 익스텐션을 구현하고 싶었습니다.

 

 

그림3. 크롬 익스텐션의 뱃지

 

그림4. 크롬 익스텐션의 팝업 화면

 

그림 5. 익스텐션 디자인

 

위 그림처럼 초기 기획은 상품에 아이콘을 띄우고, 해당 아이콘을 클릭했을 때, 팝업 화면이 나오는 것으로 구상했습니다.

이를 위해서 크롬 익스텐션이 활성화되었을 때, 상품 목록 웹사이트에 방문하면 자동적으로 저희가 작성한 스크립트가 실행되도록 했습니다. 위처럼 이미지를 찾고, 이미지 아래에 아이콘이 추가됩니다.

팝업 화면 UI를 제작한 이후, 사용자가 아이콘을 클릭했을 때, 오른쪽 상단의 팝업 화면에 원재료명에 대한 환경 영향 정보를 제공하도록 연결되도록 코드를 작성하고 있었습니다. 그러던 중, 브라우저의 아이콘을 클릭해도 익스텐션의 팝업 화면이 팝업될 수 없다는 것을 알게 되었습니다. 구글 크롬 디자이너들이 ‘programmatically’ 팝업 화면이 띄워질 수 없도록 설계했기 때문이었습니다.

이를 해결하기 위해, 새로운 DOM element를 만들어 해당 탭의 html 문서에 삽입하는 방식을 사용하기로 결정했습니다. 해당 html 문서에 이미 삽입한 javascript파일에서 원하는 스타일과 구조의 DOM element를 만들어, 특정 위치로 삽입했습니다. 그리고 z-index를 가장 높게 하여 어떤 웹 페이지에서 팝업이 되더라도 저희가 만든 DOM element가 최상단에 올라올 수 있도록 구성했습니다. 이 방식을 사용함에 따라 추가적으로 팝업 화면을 드래그해서 움직이게 할 수 있거나, 최소화 버튼을 사용하여 익스텐션이 실행되고 있음을 시각적으로 부각시킬 수 있는 부가적인 장점을 얻을 수 있었습니다.

 

비록 처음에 의도한 모습과는 달랐지만, 익스텐션 개발을 하다 보니 기술적으로 보완해야 할 점을 많이 발견했다는 의미가 있었습니다. 먼저 데이터베이스의 경우, 예상했던 것과 다른 모습의 식품 성분 데이터들을 발견하고 추후에 이러한 데이터를 어떻게 처리해야 할지 고민해볼 수 있게 되었습니다.

또한, 데이터베이스를 구축/관리하는 인원들이 데이터베이스를 다뤄본 경험이 적어 처음에는 데이터베이스 한 개에 모든 데이터를 무식하게 집어넣으려 했지만, 조금 더 큰 데이터를 효과적으로 관리하기 위해 다음 프로젝트로 넘어갈 때에는 관계형 데이터베이스를 설계하기로 결정할 수 있었습니다.

 

UI를 디자인하고 아키텍쳐를 설계하며, 사용자가 어떻게 사용하면 편리하게 서비스를 이용할 수 있을지 고민해보는 시간도 값진 경험이었습니다. 비록 웹과 어플리케이션은 조금 다른 유저를 타겟으로 하고 구동방식에도 차이가 있지만, 익스텐션을 제작하면서 얻은 지식들이 앱 개발에도 도움이 되겠죠.

 

지금은 슬프게도 OCR을 적용할 수 없지만, 앱을 제작하면서 결국 구현해야 하는 기능입니다. OCR기능 구현을 추후 프로젝트로 미루고 뼈대를 세우는 것에 집중하기로 한 이유는 OCR 성능 향상 연구가 다음 프로젝트인 앱개발 타임라인에까지 영향을 주는 것을 우려했기 때문입니다. 이번에 시도한 이미지 전처리는 bitwise 및 grayscale로 변환하는 것이었지만, 이외에도 텍스트의 경계를 구분지어 인식하는 보더링, 이미지가 깨지지 않고 인식되도록 하는 리사이징 등의 다양한 전처리 기법이 있습니다. 이러한 전처리 기법을 이용해 원하는 수준까지 성능을 끌어올릴 수 있을 것입니다.

 

이번 테크 인사이트에선 먹거리 프로젝트를 진행하며 겪었던 기술적 이슈들을 다뤄보았습니다. 이 글이 저희와 유사한 프로젝트 또는 비슷한 베이스에서 협업 프로젝트를 진행하는 분들께 유의미한 인사이트를 제공할 수 있었으면 합니다.