[2022 신입 공채] PLMA - 챗봇 기반의 카카오ocr 엔진을 사용한 이미지/텍스트 분석 멜론 플레이리스트 만들기

프로젝트명 : 챗봇 기반의 카카오ocr 엔진을 사용한 이미지/텍스트 분석 멜론 플레이리스트 만들기
팀명 : PLMA
팀원 :  Maeve, Terry, Raon
멘토 : Eric, Brom, Woody

 

안녕하세요, 

저희는 2022 신입 개발자 공채 추천해조의 메이브, 테리, 라온입니다. 

 

테크온보딩 기간 동안 진행했던 토이프로젝트 '챗봇 기반의 카카오ocr 엔진을 사용한 이미지/텍스트 분석 멜론 플레이리스트 만들기'를 소개하려고 합니다.

 

저희의 팀명은 'PLMA'로 플레이리스트를 멜론으로 마이그레이션 한다는 서비스의 성격에 맞추어, 플레이리스트 마이그레이션을 줄여 플마(PLMA)로 지었습니다. 노래를 추가, 제거(플러스, 마이너스) 한다는 느낌이 사용자에게 와닿을 수 있다 생각했습니다.

 

저희가 열심히 만들었던 프로젝트! 

같이 보시죠~!

 

 

서비스 소개

 

서비스로고

다른 플랫폼의 플레이 리스트 이미지를 카카오톡 챗봇에 보내게 되면, 저희 PLMA가 적절히 이미지를 분석하여 멜론 플레이리스트에 추가 해줍니다.

 

 

 

서비스 아키텍처 및 인프라 구성

 

서비스 아키텍처

 

스프링부트와 레디스를 이용해 어플리케이션을 구성하였고, 써드파티 api로 카카오비전 api, 멜론 api 를 사용하였습니다. 또한, 코드형상관리는 github을 이용하였고 CI/CD는 Jenkins, d2hub, dkos를 사용하였습니다.

 

 

CI/CD 과정

먼저 깃헙에 코드를 푸시하면, 젠킨스에서 도커파일로 도커 이미지를 생성합니다. 생성한 이미지를 D2HUB에 업로드하고,  마지막으로 DKOS에서 도커 이미지를 사용하여 클러스터에 리소스를 생성합니다.

 

클러스터 내부 구조

인그레스 노드로 서비스를 호출하면, 트래픽이 서비스 노드를 통해 스프링부트 파드로 가게 됩니다. 각각의 파드에서 또 다른 서비스 노드를 통해 레디스 파드와 통신합니다.

 

 

화면 설계

 

◽️User-side 흐름 설계

 

1. 플러스친구를 추가한뒤 [ +PLMA- 시작하기 ] 버튼을 누릅니다.

2. 그러면 서비스 소개 말풍선을 볼 수 있습니다, [ 플레이리스트 인식 시작하기 ] 버튼을 누릅니다.

3. 플레이리스트 사진을 첨부하라는 안내 말풍선을 볼 수 있습니다.

 

 

4. 일반적으로 카카오톡에서 이미지를 보내는것처럼 플레이리스트를 보내면,

5. 챗봇에서는 이미지를 인식하여, 인식한 곡을 리스트-캐로셀 형식으로 보여줍니다.

6. 총 몇곡을 인식했는지 확인시켜주는 말풍선을 보여주고, [ 전체 플레이리스트 보기 ] 버튼을 누르면

 

 

7. 지금까지 등록한 모든 곡을 볼 수 있습니다.

8. 모든 곡을 멜론에서 확인하기 위해 [ 멜론에서 확인하기 ] 버튼을 누르면

 

 

9. 짜잔~! 멜론에서 확인할 수 있습니다!!!🎊

 

 

스킬서버 설계

 

◽️스킬 서버란?

 

스킬 서버는 봇 시스템으로부터 스킬 요청을 받고 이에 담긴 정보를 분석하여 적절한 응답을 만듭니다. 각각의 요청은 HTTP POST를 통해서 전달되고, 요청과 응답 모두 JSON으로 구성된 Body를 이용합니다.

 

이러한 구성은 HTTP API 서버를 만드는 것과 동일합니다. 단, 그 대상이 봇 시스템이라는 것을 유념해야 합니다.

 

 

◽️스킬 서버 흐름

 

 

 

◽️다양한 예외 처리 

 

 1. 이미지가 아닌 텍스트 메세지 전송

 

 

 2. 이미지가 아닌 동영상 전송

 

 

 3. 이미지가 아닌 음성 메세지 전송

 

 

 4. 이미지에서 노래를 인식하지 못하는 경우

 

 

 5. 노래를 추가하지 않고 전체 플레이리스트 보기 버튼 클릭 시 

 

 

 6. 전체 플레이리스트가 50곡 이상일 때
     - 챗봇의 제한상 50개 이상을 보여줄 수 없습니다. 

 

 

 7. OCR API 스펙 맞추기 위한 예외 처리 

 

 

 

고려사항

 

◽️스킬서버는 반드시 5초안에 응답을 해주어야 한다는 제약사항이 있었습니다.

 

 

그래서 저희는 우리의 로직이 5초 이내로 처리할 수 있는지, 병목 지점이 있다면 어디인지? 를 찾기위한 테스트를 했습니다.

 

 

• 테스트 결론 : 평균 2.5초내로 응답을 한다. 따라서 대부분의 경우 5초라는 제한사항과 무관하게 잘 응답을 할 수 있는것을 확인했습니다.
• 하지만, 결과를 봤을때 OCR 통신시간, 유효성 검증시간이 총 소요시간의 약 90%를 차지하는 것을 알 수 있었습니다.
• 따라서 이러한 시간을 줄이기 위해 다음과 같은 방법을 통해서 해결했습니다.

 

 

◽️비동기 처리 및 테스트 결과

 

 

 

평균적으로 무려 1/5수준으로 시간을 단축할 수 있었습니다!

 

또한, 이러한 비동기처리를 이용하여 혹시나 5초이내에 우리의 로직이 돌지 않을 경우를 대비했습니다.

 

 

 

시연영상

 

◽️서비스 시작 화면

 

◽️타 음원서비스 플레이리스트 사진 첨부

 

◽️여러 사진 첨부 후, 인식된 음원들 확인

 

◽️인식된 곡을 기반한 멜론 내 플레이리스트 확인

 

 

 

 

프로젝트 리뷰

 

Maeve

• 사내 인프라를 사용해본 경험은 처음이었는데, 도커와 쿠버네티스를 공부하면서 DKOS도 사용해 볼 수 있어서 좋았습니다. 또, 챗봇과 통신하는 서버를 개발할 수 있어서 신기한 경험이었습니다. 😆
• 힘든 점은…이거 말해도 되는지 잘 모르겠긴 한데, 같은 팀에 테모씨가 자꾸 힘들게 하는 상황이 몇번 있었습니다 🥲 누군지는 비밀이에요. 아 그리고 라모씨도 “이거 이렇게 하면 안되나요?” 라고 여쭤보면 무조건 “안되는데요?” 라고 하셔서 참 힘들었습니다…😂
• 장난이고, 다들 맡은 일 열심히 잘 하시고 손발이 척척 맞아서 재미있게 프로젝트 했어요 ㅎㅎ 🥰 프로젝트 끝난 뒤에도 가끔 만나서 차 한잔 하시죠^^

 

Terry

• 우리나라의 다양한 음원서비스를 다 지원하게 만들어서 뿌듯했습니다. 바이브, 지니, 플로, 벅스 등을 전부 잘 지원합니다😉. 유튜브 뮤직, 스포티파이도 지원하게 만드는게 게획이었는데 간발의 시간차이로 완성하지는 못했습니다. 이부분을 제외하고는 저희가 맨처음에 계획했던대로 결과물이 나와서 기분이 참 좋았습니다.
• 힘든점은 사실 없었습니다!! 팀원분들과도 잘 맞았고 프로젝트도 수월했습니다. 그래도 한가지를 뽑자면 맨처음에 과제 주제가 한번 크게 바뀐적이 있었습니다. 그래서 그때까지 진행됐던 과제가 완전히 바뀌었었는데요. 이때가 생각이 나네요. 다만 기존보다 더 명확하게 주제가 바뀌어서 더 원만하게 진행할 수 있었습니다.

 

 

Raon

• 데모데이의 저주를 아시나요? 😥
• 저희는 개발을 할때 카카오톡 챗봇의 샌드박스 버전을 이용했습니다. 분명히 개발할때는 동작을 참 잘했는데, 데모 발표일 전날 챗봇 서버가 터진겁니다… 저희가 할 수 있는건 없었고, 결국 데모 발표일에 실시간 시연 영상을 보여주지 못한 부분이 상당히 아쉽습니다…😂
• 하지만, 방대하고 편리한 사내 인프라를 사용 해볼수있는 경험이 너무 즐거웠고, 멘토분들의 꼼꼼한 피드백 덕분에 많은 것을 배웠습니다. 그리고 훌륭한 팀원들 덕분에 완성도 있는 결과물을 만들 수 있었습니다!!! 🥰 

 

라온, 테리, 메이브