DEVOCEAN

안녕하세요,

저희는 스크린샷 관리를 효율적으로 도와주는 서비스 ScreenWiper을 개발한 CodeSurfers입니다 🏄‍♂️

저희 조는 FE 2명, BE 2명, AI 1명으로 구성된 팀으로,

정보들이 넘쳐나는 시대에 쌓여가는 정보성 스크린샷으로 인해 생기는 문제들을 해결하고자 열심히 고민하였고, 결과적으로 저희의 <Screenwiper>가 탄생했습니다 ! 😊

🗒️ 기획과정

저희 팀은 아래 두 문제점에 주목하여 설문조사를 진행하였어요.

#휴대폰의 터지는 용량, #여러 사진이 뒤섞여서 복잡해진 갤러리

더 자세한 문제점 조사를 위해 실제로 설문조사를 진행한 결과,

‘스크린샷이 쌓여 무슨 사진이 있는지 모른다’는 응답이 74.2%,

‘캡처해 두었던 특정 스크린샷을 찾느라 고생한 적이 있다는’ 응답이 80.6%,

‘중복된 스크린샷으로 용량이 부족한 문제를 겪은 적이 있다’는 응답이 51.7% 로 집계되었어요.

이런 설문조사 결과와 데보션 프로분들의 피드백을 통해 저희 서비스가 개발되었답니다! 🤩

ScreenWiper의 솔루션은 스크린샷에서 텍스트, 날짜, 위치 등의 정보를 자동으로 추출해 카테고리화하는 것입니다!

Screenwiper는 크게 3가지의 서비스를 제공합니다.

1. Extract: 스크린샷 정보 추출

   스크린샷에서 텍스트, 날짜, 위치 등의 정보를 자동으로 추출합니다.

2. Categorize : 정보 카테고리화

   스크린샷을 일정, 장소, 쇼핑 등 다양한 카테고리로 자동 분류합니다.

3. Integration : 검색 데이터 제공

   검색 API 연동을 통한 추가적인 정보를 제공합니다.

이렇게 완성된 Screenwiper, 기능을 더 자세히 살펴볼까요?

⚒️ 기능

❶ 스크린샷 분석 기능

스크린샷 분석 기능은 갤러리 속 정보성 스크린샷의 정보를 분석해줍니다.

AI 가 자동으로 정보를 척척 정리해주니 편리하겠죠? 🤗

꼭 가보고 싶던 음식점을 캡쳐해두신 경험이 있으신가요?

Screenwiper는 기억하고자 하는 장소에 대한 스크린샷을 <장소> 카테고리로 분류하여 기억해줍니다.

뿐만 아니라, 내가 기억해놓고 싶은 전시회가 몇일부터 몇일까지 열리는지의 <일정>, 내가 기억하고 싶은 화장품과 기타 정보도 <기타> 카테고리로 분류해줍니다.

분석 방법은 아주 간단해요!

(1) 이미지를 첨부한 후, (2) 분석 결과 로딩을 기다리고, (3) 분석 결과를 확인하시기만 하면 됩니다!

❷ 카테고리 별 정보관리

<일정> , <장소>, <기타> 로 나눠진 분석결과는 어떻게 보여질까요?

ScreenWiper는 스크린샷에서, 이런 분석 결과를 얻을 수 있어요!

일정

• 연동된 캘린더 기능을 통해 일정관리가 가능해요.

• 일정과 날짜 데이터를 분석해 텍스트로 정리해줘요.

장소

• 연동된 지도 기능을 통해 좌표상 위치를 보여줘요.

• 주소와 영업시간, 요약 내용을 보여줘요.

기타

• 요약 내용과 함께, 이미지 검색 결과를 제공해줘요.

이전에 분석한 내용을 다시 보고 싶으신가요?

Don’t worry ! 이전에 분석한 정보를 카테고리별로 다시 확인할 수 있어, 분석했던 정보를 매번 스크롤해서 다시 찾지 않아도 괜찮아요.

홈화면에서는 사용자가 분석한 정보를 쉽게 확인할 수 있어요.

• <일정> 에 대한 최신 분석 결과들이 추천되어 보여지고,

• <장소> <기타> 분석 결과들이 랜덤으로 보여집니다.

🤖 ScreenWiper의 원리가 궁금해요!

ScreenWiper는 빠른 OCR 처리 (평균 5.897초)가 가능한 Google Vision API를 통해 분석을 진행합니다!

1. S3에 스크린샷 이미지를 저장하고,

2. Google Vision API로 스크린샷에서 텍스트들을 추출하며,

3. Google Natural Language API로 텍스트 엔티티를 추출하고 카테고리를 분류해요.

4. 카테고리가 장소인 경우에는 주소를 기반으로 장소 이름, 위/경도를 조회하죠!

🎉 ScreenWiper, 이렇게 변화했어요!

대망의 중간 발표 이후,

발표영상과 피드백/질문리스트를 작성해보며 추가해야 할 점과 개선사항에 대해 오랜시간 이야기 하는 시간을 가졌는데요,

어떤 기능을 추가하고, 빼야할지…. 기능 개선을 위해 어떤 선택을 해야 할지…. 등, 참 많은 고민들을 했던 순간들이 떠오르네요!

이러한 피드백 내용을 바탕으로 저희 ScreenWiper는 이렇게 변화하였답니다!

❶ 공유하기로 편리하게 스크린샷 업로드!

기존에는 어플리케이션에 접속해서, 스크린샷을 업로드해야했어요.

OS의 스크린샷 감지 기능을 이용해 보라는 피드백을 바탕으로 iOS의 Share Extension을 이용했어요.

스크린샷을 찍은 직후 공유하기 기능을 이용하여 편리하게 앱에 사진을 첨부할 수 있게 되고, 사용자 분들의 편의와 접근성을 향상시킬 수 있었어요.

❷ 기타 카테고리에 추가 정보 제공

장소, 일정으로 분류되지 않은 기타 카테고리에서는 기존에 요약 정보만 제공하고 있었는데요,

추가적인 정보를 제공하기 위해 ‘Google Vision API’의 이미지, 웹페이지 검색을 활용했어요.

사용자들은 이제 더 많은 정보를 쉽게 얻을 수 있겠죠?

❸ 이미지 분석 로직 개선, 그리고 30% 이상의 성능 향상

다양한 방법을 시도해본 후 성능이 가장 좋은 분석 방법을 택하게 됐어요.

속도와 비용 효율성 측면, 그리고 정확도 측면에서 기존 분석 기능을 업그레이드 하기위해 google vision API와 google natural language API를 이용했어요.

이는 이전의 단순 정규 표현식 기반 처리보다 30%이상 향상된 정확도를 보여주었답니다 👏

👨🏻‍💻 개발 과정

저희 ScreenWiper 서비스의 최종 시스템 아키텍쳐는 다음과 같습니다.

프론트엔드

• 이미지를 편리하게 첨부하고, 공유하기 등의 네이티브 기능을 이용하기 위해 React Native로 앱으로 구현하였습니다.

백엔드

• Spring Boot, JPA를 이용하여 API를 개발하였습니다.

• 관리를 용이하게 하기 위하여 도커라이즈 하여 EC2에 컨테이너로 배포해 두었고, 도커 태그로 버전을 관리했습니다.

• Mysql은 동일한 EC2 서버 내에 띄워두었습니다.

AI

• 분석 로직은 FastAPI로 개발하였습니다.

• Google Vision API, Google natural language API를 이용해 이미지 분석 및 카테고리 분류를 진행하였습니다.

🙋🏻‍♂️ 협업 과정

저희는 매주 일요일 같은시간에 모여서 개발 진행사항을 이야기하고, 문제가 생겼던 부분을 함께 고민했어요 ✨

❶ 슬랙

• 슬랙을 통해서는, 개발 상황을 매일매일 공유하였어요.

• 특히, 다양한 채널을 두고 소통하였기 때문에 파트별 빠른 문제 해결이 가능했어요 !!

❷ 노션

• 일정과 회의록을 관리하였어요.

• API시트와, 피그마 파일들을 관리하였어요.

노션에 정말 많이 들락날락 했던 기억이 나네요 ^..^

❸ Github

저희 CodeSurfers 팀원들은 Github를 협업에 알맞게, 커뮤니케이션에 유용하게, 깔끔한 가독성을 가지도록 사용하기 위해서 Commit-Convention 에 신경썼어요.

Issue와 PR을 적극적으로 남겼고, 코드리뷰를 하거나, Git branch를 사용하며 협업을 체계적으로 하기 위해 고군분투 하였습니다!!

항상 여러 의견을 적극적으로 내줬던 멋진 팀원들이 있어 지금의 서비스가 탄생할 수 있었던 것 같아요 😽

🏄‍♂️ 소감

길다면 길고, 짧다면 짧았던 CodeSurfers의 개발 프로젝트 기간이 끝났습니다 ! 애정을 담아 기획하고, 개발했던 프로젝트였기에 아쉬움이 남기도 하네요 🥹

CodeSurfers 친구들과 각자 소감을 적어보았습니다 🍀

• Github https://github.com/SKT-CodeSurfers

• 시연영상 https://www.youtube.com/watch?v=Ya4WYISWPVE