현장실습 어노테이션 툴 제작기 리뷰

소개

4학년 2학기 되서 광주에 있는 인트플로우 회사에 현장실습을 하러 왔다. 기간은 9월 ~ 11월. 첫 날은 금요일이여서 그런가 딱히 뭔가를 하진 않고 어떤 회사인지에 대한 간단한 설명?을 듣고 3명이서 갔는데 한 분은 인공지능 부서 쪽 나랑 다른 한 분은 서비스 부서으로 가게 됬다. 처음으로 하게 될일은 사내에서 사용하고 있는 어노테이션 툴이 급하게 만들어진거다 보니 수정보완에 여러 애로사항이 있어서 개선사항을 기획하고 거기에 요구사항까지 추가하는 것이었다.

 

어노테이션 툴 이란?

인공지능에서 라벨링 할때 물체에 boundingbox를 달거나 라벨을 다는 것에 도움을 주는 도구이다. 하지만 우리가 개발할 툴은 아무것도 없는 이미지에서 라벨링을 하는것이 아니라, 1차적으로 인공지능이 라벨링한 데이터를 가시화해서 사람이 2차적으로 수정할 수 있게 하는 특화된 툴을 만들어 내는것이었다.

 

초기기획 및 개발

복잡한 프로그램이 아니라 figma를 쓸것도 아니고 그림판으로 잘 그렸다.

왼쪽 3개의 버튼은 각각 tab으로 단축키 설명, 파일선택, annotated data 들이고

아래의 3개의 버튼은 사용할 tool들인데 현재는 위쪽으로 이동하였다.

 

역할을 파일업로드가 되어야 그려내는 것도 시작할 수 있기에 내가 dropzone을 이용한 파일업로드를 빠르게 구현하고 다른 분께서 fabric으로 그려내는 부분을 맡았다. 당일마다 구현한 내용을 간략하게 적어놨는데 다음과 같다.

 

2일차 애자일 방법론과 백로그, fastapi 비동기코드, 깃허브 만들기, 백로그 작성완료 개발시작
3일차 html 프론트 구성, dropzone.js 이용, fastapi 만지는중
4일차 fastapi upload 프론트 서버 완료. 내일은 올라와있는 데이터 리스트화
5일차 데이터들 리스트화 완료 개별 삭제, 전체삭제
6일차 파일 버튼누를시 rendering 연결
7일차 새로고침시 최근 선택된 애 불러오기 image.js addEventListner 오류 선택된 파일의 박스 카드화
8일차 단축키 추가 각종 버튼 추가 눈껐다켰다 핀꼽았다뽑았다 프론트단만  편집 모달 추가
9일차 add 모달추가 눈표시누르면 해당 오브젝트만 껐다 켰다.
10일차 pinned 추가 누르면 전체화면 버튼 유효성검사
11일차 ADD버튼 완료  모듈화 리팩토링
12일차 edit버튼 수정중 주석추가 edit 버튼 완료 삭제완료
13일차 color guide 모드 ver1.0출격 버그리포트
14일차 삭제시 남아있는 데이터 제거 
15일차 현재모드 3개표현 버그 수정
16일차 새로고침 변경 다운로드시 색깔 파란색 변경
17일차 버그수정
18일차 클릭시 위에 파일이름 추가 통합테스팅 및 배포완료

23일차
새로운 기능 요구사항
** 1. ctrl + a  붙여넣기 가능하게 **
2. 정렬되어서 왼쪽에 나오게
3. save시 website에도 적용

24일차 새로운 요구사항완료
25일차 새로운 요구사항 패치
26일차 요구사항 버그 발견후 수정 및 패치
   1. 복사 붙여넣기시 이미지 id 오류
   2. 복붙시 객체위치 변경

 

정상적으로 동작한후 편의성을 위한 기능적인 부분의 간단한 패치노트는 아래와 같다.

 

[ 0.7 v]
- 개인삭제할때 localstorage도 삭제
- 현재 모드 3개 표현
- 상자 키포인트가 겹쳐있을떄 키포인트를 만질수있게 키포트를 가장위에 올려놓기
- ctrl+s 이벤트막고 저장넣기
- 삭제했어도 초기화되지 않는 버그 수정
- 모드2 에서 박스가 고정되지 않는 버그 수정
- 객체편집시 idValidication 버그 수정
- 객체 추가 버튼 오류 발견

[0.8 v]
1. + 버튼 버그 수정
2. 새로고침 변경
3. 다운로드 완료한 경우 체크표시?
4. 삭제시 서버에 이미지 삭제요청
5. 이미지 없을시 예외처리
6. 영어번역

[0.9 v]
1. 오른쪽위에 로그인 주석처리
2. 설명이미지추가
3. 선택모드 용어 변경
4. 저장버튼 위치 변경
5. 선택된 파일 제목 추가

 

결과

현재 상태는 위와같다.

 

간단한 기능 설명으로

1. File 불러오기 : json file을 불러와서 image를 canvas에 그리고 data의 어노테이션들을 설치합니다.

2. FeaturePoint 및 BoundingBox 이동

3. FeaturePoint 및 BoundingBox 편집 고정 삭제 추가

4. 가장 최근 추가된기능으로 FeaturePoint 및 Bounding box 복사

나머지는 설명을 위한 ShortKey를 확인하면 된다.

 

기술 스택

FE : VanillaJS, fabric.js, dropzone.js, bootstrap5

BE : fastapi

버전관리 : GitHub

문서정리 : Notion, trello

개발기간 : 1달

개발인원 : 2인

 

후기

회사 내부적으로 사용하는 툴이다 보니 딱히 말씀은 안하셨지만 소스코드는 비공개로 해두었다. 툴 이미지도 일부만 공개한 것도 이미지 같은것이 뭔가 보안에 접목될까봐 걱정이 되었다. 만들고 나서 테스트를 완벽히 마치지않았는데 해외로 보내 라벨링을 시킨다고 해서 걱정이 좀 많았는데 잘 작동하는 것 같다. 이후의 요구사항을 적용하고 패치하는 경험은 조금 신기했던 것 같다. 

 

1. BE 부분보다는 FE 부분이 많았 던 것같다. react native로 앱을 개발한 이후로 front는 다시 손을 안대려 했는데 VanilaJS로 다시 보며 여러가지 알아가는 개념들 도 있었다.

 

2. 처음에는 module화를 하지 않고 사용하다가 중간에 리팩토링을 거치며 모든 파일을 module화를 거쳤다. 이는 보안 및 개발의 편의를 위해서 적용하였다.

 

3. 배포는 내부 서버의 port를 열고 docker로 설정하는 등의 어려움을 겪다 회사분이 도와주셔서 쉽게 배포할 수 있었다. 배포되있는 프로그램을 업데이트 할때 배포중인 프로그램을 정지시키고 다시 못켜서 문제를 겪었는데, 원래는 fastapi의 경우에 git pull 만으로 CI/CD가 가능 한 것이었다.