위치정보 기반 이미지 자동 분류 애플리케이션입니다.

기획자/디자이너와 협업하여 프론트와 백엔드 개발 및 배포 (기여도 90%) 실제 작업자의 분류 작업시간을 80%이상 단축하였습니다 ****

2023.09 - 2024.04 (7개월)

페이지 구성

• 이미지 파일 업로드
  • 파일 업로드
  • 폴더 업로드
• 자동 분류
  • 거리 기준으로 분류
  • 시간 기준으로 분류

이미지 파일 업로드

자동분류(거리) & 편집

• 수동 분류
  • Polygon, 원, 사각형으로 분류
• 편집
• 저장

자동 분류(시간으로 분류)

수동 분류 & 편집

• 기타 기능1

  • 한 / 영 변환 (i18n)
  • 누적 파일업로드
  • 파일명 변경
  • 폴더명 변경
  • 선택 삭제 및 복구
  • 정렬 (폴더명, 파일명, 촬영일자)

• 기타 기능2

  • 지적도 on/off
  • 집중 모드 on/off
  • 거리 측정
  • 원본 파일 보기
  • 폴더별 파일 숨기기
  • 초기화

저장 된 폴더 모습

트러블 슈팅

<aside> 💡

1. 대용량(10GB 이상) 이미지 업로드 시 업로드 시간 이슈와 성능 저하

</aside>

⭐ 해결 방법

• 1. contextApi와 React.memo를 사용하여 랜더링을 최적화했습니다.
• 2. react-window를 통해 랜더링을 최소화 시켰습니다
• 3. svg이미지를 png로 변경하여 리소스를 줄였습니다
• 4. 파일 업로드 기능이 있는 타 어플리케이션의 소스코드를 찾아보며 해결책을 찾았습니다.
• 5. 이미지 리사이징 & 캐싱을 통해 리소스를 줄였습니다.

<aside> 💡

2. i18n 다국어 지원 시 개발자와 검수자의 협업 문제 및 DX의 저하

</aside>

• 문제 원인) 개발자와 검수자 모두 협업하기 어려운 업무절차

⭐ 해결 방법

구글 스프레드시트 API 를 연동해 json 파일의 공유 및 검수자와 같은 시트파일을 보며

커뮤니케이션 할 수 있게하여 협업 환경 및 개발 환경을 개선하였습니다.

• 1. ko.json 파일을 npm명령어로 구글 시트에 업로드
• 2. 검수자와 시트를 보며 커뮤니케이션 할 수있는 환경 구축
• 3. 구글 시트의 내용을 npm명령어로 다운로드 및 en.json 파일로 변환